:root{
  --ink:#14100F;
  --porcelain:#F6ECE4;
  --garnet:#B23A48;
  --garnet-deep:#8C2C38;
  --champagne:#D9B48F;
  --surface:#251E1D;
  --surface-soft:#2E2523;
  --line: rgba(246,236,228,0.14);
  --good:#7FA89A;
  --bad:#C1683F;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:#fff;color:#1a1110;font-family:'Manrope',sans-serif;overflow-x:hidden;}
body{min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:28px 16px 40px;}

/* ---- page header ---- */
.brand-header{
  display:flex; flex-direction:column; align-items:center; gap:0; margin-bottom:18px;
}
.brand-logo{
  width:min(56vw,200px); height:auto;
  /* multiply removes the black background so the illustration sits on white */
  mix-blend-mode:multiply;
  /* pull up to compensate for blank padding baked into the PNG */
  margin-bottom:-18%;
}
.brand-tryon{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(22px,6vw,28px);
  color:#FF2D78; letter-spacing:0.18em; text-transform:uppercase;
  margin:0; line-height:1;
}

.sub{ font-size:13px; color:#6b6260; text-align:center; max-width:340px; margin:0 0 22px; line-height:1.5;}

a.textlink{ color:var(--garnet); text-decoration:none; border-bottom:1px solid rgba(178,58,72,.35); font-size:12px; }

/* ---- shared bottle chip ---- */
.bottle{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; width:48px; }
.bottle .cap{ width:18px; height:10px; border-radius:3px 3px 1px 1px; background:var(--champagne); }
.bottle .body{
  width:34px; height:38px; border-radius:6px 6px 9px 9px; border:1.5px solid rgba(0,0,0,.25);
  box-shadow: inset 0 3px 6px rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.bottle.active .body{ transform:translateY(-3px) scale(1.06); box-shadow:0 0 0 2px var(--porcelain), inset 0 3px 6px rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.25); }
.bottle .name{ font-size:9px; opacity:.65; text-align:center; line-height:1.2; }

/* ---- buttons ---- */
.tbtn{
  padding:12px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--porcelain); font-family:'Manrope',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.02em; cursor:pointer; text-align:center;
}
.tbtn.primary{ background:var(--garnet); border-color:var(--garnet); }
.tbtn.danger{ background:transparent; border-color:var(--bad); color:var(--bad); }
.tbtn:active{ transform:translateY(1px); }
.tbtn:disabled{ opacity:.5; cursor:default; }

/* ---- form fields ---- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.6; }
.field input[type=text], .field input[type=password]{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:11px 12px; color:var(--porcelain); font-family:'Manrope',sans-serif; font-size:14px;
}
.field input:focus{ outline:2px solid var(--champagne); outline-offset:1px; }
.color-row{ display:flex; align-items:center; gap:10px; }
.color-row input[type=color]{ width:44px; height:38px; border:none; border-radius:8px; background:none; padding:0; cursor:pointer; }
.color-row input[type=text]{ flex:1; }

.error-msg{ font-size:12px; color:var(--bad); margin:-6px 0 12px; min-height:1em; }
.status-msg{ font-size:12px; color:var(--good); margin:-6px 0 12px; min-height:1em; }

.panel-card{
  width:min(92vw,420px); background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:20px; margin-bottom:16px;
}