/* Nail Supply Vault — styles
   Chassis borrowed from sephora.com: white surfaces, pure black type, the
   Helvetica Neue stack, pill buttons, hairline rules at rgba(0,0,0,.063),
   grey wells at #f6f6f8, and a lot of air.
   Palette borrowed from Cinderella: buttery gold hair, sky-blue dress —
   used as gradients, never as flat fills, and never under body text. */

:root{
  /* Sephora chassis */
  --ink:#000;
  --ink-2:#2b2b2b;
  --muted:#6b6b6b;
  --faint:#8e8e8e;
  --hair:rgba(0,0,0,.063);
  --hair-2:#e6e6e9;
  --paper:#fff;
  --well:#f6f6f8;

  /* Cinderella */
  --gold-lt:#FFE9A8;
  --gold:#F2C230;
  --gold-dk:#D3A018;
  --sky-lt:#D7EAF9;
  --sky:#8FBFE8;
  --sky-dk:#4E86C4;
  --blush:#E9899F;
  --alert:#CE1B32;        /* running out — the one colour that means "act" */

  --grad:linear-gradient(120deg,#FFEFB8 0%,#F5CB48 26%,#BFDCF3 66%,#8FBFE8 100%);
  --grad-soft:linear-gradient(120deg,#FFF6D8 0%,#FDE9AE 32%,#DCEBF8 70%,#BEDAF2 100%);
  /* the two brand marks stay pure sky — no gold in the blend */
  --grad-sky:linear-gradient(120deg,#DCEDFB 0%,#A8CCEE 45%,#7DB2E4 100%);
  /* the bar is one flat light sky — no gradient, no keyline, fully opaque */
  --nav:#D7EAF9;

  --r:10px;
  --r-sm:6px;
  --pill:999px;
  --bar:68px;
  --pad:20px;

  /* Sephora ships "helvetica neue", helvetica, arial. Macs get the real face;
     Inter sits ahead of Helvetica because Windows silently substitutes
     Helvetica → Arial, which is a much coarser match than Inter. */
  --sans:'Helvetica Neue',Inter,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(16,32,56,.06), 0 8px 24px rgba(16,32,56,.10);
  --shadow-lift:0 2px 6px rgba(16,32,56,.08), 0 16px 40px rgba(16,32,56,.16);
}

*{box-sizing:border-box}
/* several hidden things carry a display on their class — hidden must win */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:#FDF3D2;color:var(--ink);
  font:14px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
h2{margin:2px 0 0;font-size:20px;font-weight:700;letter-spacing:-.012em}
hr{border:0;border-top:1px solid var(--hair);margin:6px 0}

.mlabel{
  display:block;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink);
}
.mlabel i{color:var(--sky-dk);font-style:normal;padding-left:3px}
.mono{font-variant-numeric:tabular-nums}

/* ── sky ─────────────────────────────────────────────────────────────── */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:#FDF3D2}
.sky svg{width:100%;height:100%;display:block}
.vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 20% 6%, rgba(255,255,255,.55), transparent 58%),
    radial-gradient(130% 100% at 50% 52%, transparent 44%, rgba(196,148,42,.22) 92%);
}
#starfield .tw{animation:tw 6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:var(--o,.9)}50%{opacity:calc(var(--o,.9) * .3)}}
@media (prefers-reduced-motion:reduce){#starfield .tw{animation:none}}

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:5;height:var(--bar);
  display:flex;align-items:center;gap:22px;padding:0 var(--pad);
  /* the whole top strip is the bar: one flat light sky, opaque edge to edge,
     so the gold sky behind it never bleeds through or meets it mid-row */
  background:var(--nav);
}
.mark{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.avatar{
  width:38px;height:38px;flex:0 0 auto;padding:0;border:0;cursor:pointer;
  border-radius:50%;overflow:hidden;position:relative;
  background:var(--grad-sky);display:grid;place-items:center;
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px rgba(0,0,0,.12);
  transition:box-shadow .14s,filter .14s;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .glyph{font-size:16px;line-height:1;color:#1d1d1d}
.avatar:hover{filter:brightness(1.06)}
.avatar:focus-visible{outline:none;box-shadow:0 0 0 2px #fff, 0 0 0 4.5px var(--sky-dk)}
.word{font-weight:700;font-size:19px;letter-spacing:.17em}

.addbar{
  /* min-width:0 or the field's intrinsic width becomes this item's automatic
     minimum and the bar overflows the viewport on a phone — which scrolls the
     page sideways and drags the gold sky out from under the navbar */
  flex:1 1 auto;min-width:0;max-width:780px;position:relative;display:flex;align-items:center;gap:2px;
  /* solid white on the pale bar — a translucent pill would read as bar, not field */
  background:#fff;border:1px solid rgba(0,0,0,.18);border-radius:var(--pill);padding:4px 4px 4px 14px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.addbar:focus-within{background:var(--paper);border-color:rgba(0,0,0,.2);box-shadow:0 0 0 3px rgba(125,178,228,.45)}
.addicon{width:15px;height:15px;color:var(--muted);flex:0 0 auto}
/* scan is the fast path in — it sits in the add bar, not buried in the editor */
.scanbtn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid rgba(0,0,0,.14);background:#fff;color:var(--ink);
  border-radius:var(--pill);padding:7px 13px;margin-right:2px;
  font-size:12px;font-weight:700;white-space:nowrap;
  transition:background .14s,border-color .14s;
}
.scanbtn svg{width:15px;height:15px;flex:0 0 auto}
.scanbtn:hover{background:var(--well);border-color:rgba(0,0,0,.32)}
.scanbtn:focus-visible{outline:none;border-color:#3C74B4;box-shadow:0 0 0 3px rgba(125,178,228,.5)}
@media (max-width:700px){ .scanbtn span{display:none} .scanbtn{padding:8px 10px} }
.addbar input{flex:1;min-width:0;background:none;border:0;outline:none;padding:8px 10px;font-size:14px}
.addbar input::placeholder{color:#8a8a8e}

.topright{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.stat b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat-alert b{color:var(--alert)}
.stat-alert span{color:var(--alert)}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  border:2px solid transparent;background:var(--ink);color:#fff;
  border-radius:var(--pill);padding:8px 18px;cursor:pointer;
  font-size:12.5px;font-weight:700;white-space:nowrap;
  transition:background .14s,color .14s,border-color .14s,box-shadow .14s,transform .1s;
}
.btn:hover{background:#333}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(143,191,232,.6)}
/* A deeper blue than the bar it sits on — a light sky pill on a light sky
   navbar disappears. Still her dress, just the shadowed side of it. */
.btn.primary{
  background:linear-gradient(120deg,#5C93CE 0%,#3C74B4 100%);color:#fff;
  border-color:#33679F;box-shadow:none;
}
.btn.primary:hover{background:linear-gradient(120deg,#4F86C4 0%,#32669F 100%);border-color:#2A5A8C}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
/* on the bar an action is a white pill with a black keyline — blue on pale
   blue disappears, and the two bar buttons match each other */
.topbar .btn.primary,.topbar .btn.ghost{
  background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:none;
}
.topbar .btn.primary:hover,.topbar .btn.ghost:hover{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.danger{background:transparent;color:#b3261e;border-color:#b3261e}
.btn.danger:hover{background:#b3261e;color:#fff}
.iconbtn{padding:7px 11px;line-height:1;font-size:14px}
.linkbtn{
  background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px;text-decoration:underline;text-underline-offset:3px;
}
.linkbtn:hover{color:var(--sky-dk)}

/* ── overflow menu ───────────────────────────────────────────────────── */
.menuwrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:30;min-width:190px;padding:6px;
  background:var(--paper);border:1px solid var(--hair-2);border-radius:var(--r);box-shadow:var(--shadow-lift);
}
.menu button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:9px 11px;border-radius:var(--r-sm);font-size:13px;font-weight:500;
}
.menu button:hover{background:var(--well)}
.menu button.danger{color:#b3261e}

/* ── shell ───────────────────────────────────────────────────────────── */
.shell{
  position:relative;z-index:4;
  height:calc(100vh - var(--bar));
  display:grid;grid-template-columns:252px 1fr;
  /* an implicit `auto` row grows to fit its content, which would leave the
     rail and the grid unbounded and kill their own scrolling. minmax(0,1fr)
     caps the row at the shell height and lets it shrink below content size. */
  grid-template-rows:minmax(0,1fr);
  gap:var(--pad);
  padding:var(--pad);
}
.panel{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow)}
/* min-height:0 — grid/flex items default to min-height:auto and refuse to
   shrink below their content, which silently disables overflow scrolling */
.filters{padding:16px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;min-height:20px}
.panel-head .mlabel{font-size:12px;letter-spacing:.1em}

.search{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:0 12px;
  background:var(--well);border:1px solid var(--hair-2);border-radius:var(--pill);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.search:focus-within{background:var(--paper);border-color:#b9b9bd;box-shadow:0 0 0 3px rgba(143,191,232,.35)}
.search svg{width:14px;height:14px;color:var(--muted);flex:0 0 auto}
.search input{background:none;border:0;outline:none;padding:9px 0;width:100%;font-size:13px}

/* facets */
.facet{border-top:1px solid var(--hair);padding:14px 0 6px}
.facet > .mlabel{margin-bottom:10px}
.opt{display:flex;align-items:center;gap:9px;padding:5px 6px;margin:0 -6px;border-radius:var(--r-sm);cursor:pointer;user-select:none}
.opt:hover{background:var(--well)}
.opt input{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:15px;height:15px;border:1.5px solid #9a9a9e;border-radius:3px;
  background:#fff;cursor:pointer;position:relative;transition:background .12s,border-color .12s;
}
.opt input:checked{background:var(--ink);border-color:var(--ink)}
.opt input:checked::after{
  content:'';position:absolute;left:4.5px;top:1px;width:3.5px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.opt .lab{flex:1;min-width:0;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt input:checked ~ .lab{font-weight:700;color:var(--ink)}
.opt .n{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.opt.off{opacity:.4}
.opt .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.facet .more{margin-top:6px}

/* ── content column ──────────────────────────────────────────────────── */
.content{display:flex;flex-direction:column;min-width:0;min-height:0;gap:12px}
.contentbar{
  display:flex;align-items:center;gap:14px;min-height:40px;flex:0 0 auto;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--pill);
  padding:6px 8px 6px 16px;box-shadow:var(--shadow);
}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 11px;
  background:var(--grad-soft);border:1px solid rgba(0,0,0,.08);
  border-radius:var(--pill);font-size:11.5px;color:var(--ink);
}
.chip b{font-weight:700}
.chip .x{cursor:pointer;color:#4a4a4a;font-size:14px;line-height:1;padding:0 3px}
.chip .x:hover{color:#000}
.tools{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.count{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sel{display:flex;align-items:center;gap:8px}
.sel .mlabel{font-size:10px;color:var(--muted)}
.sel select{
  background:var(--well);border:1px solid var(--hair-2);border-radius:var(--pill);
  padding:6px 10px;font-size:12.5px;font-weight:500;outline:none;cursor:pointer;
}
.sel select:focus{border-color:#b9b9bd;box-shadow:0 0 0 3px rgba(143,191,232,.35)}

/* ── grid ────────────────────────────────────────────────────────────── */
.grid{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 4px 2px;
  display:grid;gap:14px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  /* cards set overflow:hidden, which drops their automatic minimum size to 0.
     Default `auto` rows would then shrink to fit this now-definite height and
     clip every card, so size rows to their content and let the grid scroll. */
  grid-auto-rows:max-content;
}
.card{
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;text-align:left;padding:0;color:inherit;box-shadow:var(--shadow);
  transition:box-shadow .16s,transform .16s,border-color .16s;
}
.card:hover,.card:focus-visible{outline:none;border-color:rgba(0,0,0,.14);box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.card.out{opacity:.66}

.sw{position:relative;height:112px;flex:0 0 auto;overflow:hidden;background:var(--well)}
.sw::after{content:'';position:absolute;inset:0}
.sw[data-finish="creme"]::after,.sw[data-finish="jelly"]::after,.sw[data-finish="sheer"]::after{
  background:radial-gradient(120% 80% at 28% 8%,rgba(255,255,255,.42),transparent 55%);
}
.sw[data-finish="shimmer"]::after,.sw[data-finish="pearl"]::after{
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 47%,transparent 64%),
             radial-gradient(120% 80% at 28% 8%,rgba(255,255,255,.3),transparent 55%);
}
.sw[data-finish="glitter"]::after{
  background-image:
    radial-gradient(1.4px 1.4px at 18% 24%,rgba(255,255,255,.98),transparent),
    radial-gradient(1.2px 1.2px at 62% 16%,rgba(255,255,255,.85),transparent),
    radial-gradient(1.6px 1.6px at 38% 62%,rgba(255,255,255,.95),transparent),
    radial-gradient(1.2px 1.2px at 82% 52%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 24% 82%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.1px 1.1px at 70% 86%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.5px 1.5px at 92% 28%,rgba(255,255,255,.85),transparent),
    radial-gradient(120% 80% at 28% 8%,rgba(255,255,255,.24),transparent 55%);
}
.sw[data-finish="holographic"]::after{
  background:linear-gradient(100deg,rgba(255,0,128,.4),rgba(255,214,0,.36),rgba(0,255,163,.38),rgba(0,163,255,.4),rgba(180,0,255,.38));
  mix-blend-mode:screen;opacity:.55;
}
.sw[data-finish="chrome"]::after,.sw[data-finish="metallic"]::after{
  background:linear-gradient(160deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.06) 34%,rgba(0,0,0,.26) 58%,rgba(255,255,255,.45) 86%);
}
.sw[data-finish="cat-eye"]::after{background:linear-gradient(118deg,transparent 40%,rgba(255,255,255,.78) 50%,transparent 60%)}
.sw[data-finish="matte"]::after{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.08))}
.sw[data-finish="neon"]::after{background:radial-gradient(90% 70% at 50% 45%,rgba(255,255,255,.34),transparent 70%);mix-blend-mode:screen}
.sw[data-finish="clear"]::after{background:var(--grad-soft);opacity:.55}

.sw .cphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;z-index:1}
.sw .tagrow{position:absolute;left:9px;top:9px;right:9px;display:flex;gap:5px;z-index:2}
.badge{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--pill);background:rgba(255,255,255,.92);color:#1a1a1a;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.badge.warn{background:var(--alert);color:#fff}
.sw .qty{
  position:absolute;right:9px;bottom:9px;z-index:2;
  font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:var(--pill);
  background:rgba(255,255,255,.92);color:#1a1a1a;box-shadow:0 1px 3px rgba(0,0,0,.12);
  font-variant-numeric:tabular-nums;
}

.cbody{padding:12px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.cbrand{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.cname{font-size:13px;font-weight:400;line-height:1.35;color:var(--ink-2)}
.ccolor{font-size:12px;color:var(--muted)}
.cmeta{margin-top:auto;padding-top:9px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:8px}
.cmeta span{font-size:10.5px;color:var(--faint)}
.cmeta .price{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

.empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;color:var(--muted);padding:44px;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);
}
.empty h3{margin:0;font-size:19px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.empty p{margin:0;max-width:430px;font-size:13.5px;line-height:1.65}

/* ── drawer ──────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(28,40,60,.34);animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{
  position:fixed;z-index:50;top:0;right:0;bottom:0;width:min(440px,100vw);
  display:flex;flex-direction:column;background:var(--paper);
  box-shadow:-24px 0 60px rgba(16,32,56,.22);animation:slide .2s cubic-bezier(.22,.7,.3,1);
}
@keyframes slide{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
.drawer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px var(--pad);border-bottom:1px solid var(--hair);flex:0 0 auto;
}
.drawer-head .mlabel{color:var(--muted)}
.matchstrip{
  flex:0 0 auto;padding:11px var(--pad);font-size:11.5px;line-height:1.65;color:var(--ink-2);
  background:var(--grad-soft);border-bottom:1px solid var(--hair);
}
.matchstrip b{font-weight:700}
.matchstrip em{color:#5a5a5a;font-style:normal}
.drawer-body{flex:1;overflow-y:auto;padding:var(--pad);display:flex;flex-direction:column;gap:14px}
.drawer-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:14px var(--pad);border-top:1px solid var(--hair);background:var(--paper);
}
.spacer{flex:1}

.f{display:flex;flex-direction:column;gap:6px}
.f .mlabel{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.f input,.f select,.f textarea{
  background:var(--paper);border:1px solid #cfcfd4;border-radius:var(--r-sm);
  padding:10px 11px;outline:none;font-size:13.5px;width:100%;transition:border-color .14s,box-shadow .14s;
}
.f textarea{resize:vertical;font-family:inherit;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--sky-dk);box-shadow:0 0 0 3px rgba(143,191,232,.35)}
.f input::placeholder,.f textarea::placeholder{color:#a0a0a6}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.swatch-row{display:flex;gap:14px;align-items:stretch}
.swatch-big{
  flex:0 0 100px;border-radius:var(--r);border:1px solid var(--hair-2);
  background:var(--well);position:relative;overflow:hidden;min-height:100px;
}
.swatch-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;justify-content:center}
.hexrow{display:flex;gap:8px;align-items:center}
.hexrow input[type=color]{
  flex:0 0 40px;height:38px;padding:3px;border-radius:var(--r-sm);
  border:1px solid #cfcfd4;background:#fff;cursor:pointer;
}
.hexrow input[type=text]{flex:1;min-width:0;text-transform:uppercase}

/* ── dialogs (confirm, avatar, camera) ───────────────────────────────── */
.ask-scrim{z-index:70;background:rgba(10,16,28,.5)}
.ask{
  position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(400px,calc(100vw - 32px));padding:22px;
  background:var(--paper);border-radius:14px;box-shadow:0 24px 70px rgba(10,20,40,.4);
  animation:pop .18s cubic-bezier(.22,.7,.3,1);
}
@keyframes pop{from{transform:translate(-50%,-46%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.ask h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.ask p{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.ask-foot{display:flex;align-items:center;gap:9px;justify-content:flex-end}
.ask-foot .btn{padding:9px 20px}
#askYes{background:#b3261e}
#askYes:hover{background:#8f1e18}

.avdlg,.camdlg{width:min(330px,calc(100vw - 32px));text-align:center}
.avhint{margin:0 0 14px!important;font-size:12px!important}
.avstage{
  width:236px;height:236px;margin:0 auto 16px;border-radius:50%;overflow:hidden;
  position:relative;background:var(--well);cursor:grab;touch-action:none;
  box-shadow:0 0 0 1px var(--hair-2), 0 0 0 6px rgba(143,191,232,.18);
}
.avstage:active{cursor:grabbing}
.avstage img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none}
#avZoom{width:236px;margin:0 0 18px;accent-color:var(--sky-dk);cursor:pointer}

.camstage{
  width:100%;aspect-ratio:4/3;margin:0 0 16px;border-radius:10px;overflow:hidden;background:#0d1420;
}
.camstage video{width:100%;height:100%;object-fit:cover;display:block}

/* ── product photo well ──────────────────────────────────────────────── */
.photo-well{
  flex:0 0 100px;min-height:100px;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hair-2);background:var(--well);
}
.photo-well.drop{border-color:var(--sky-dk);box-shadow:0 0 0 3px rgba(143,191,232,.4)}
.photo-well #photoImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;z-index:2}
.photo-well .swatch-big{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;min-height:0}
.photo-x{
  position:absolute;right:5px;top:5px;z-index:3;width:22px;height:22px;padding:0;line-height:1;
  border:0;border-radius:50%;cursor:pointer;font-size:11px;
  background:rgba(0,0,0,.62);color:#fff;
}
.photo-x:hover{background:#000}
.photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:-4px}
.minibtn{
  border:1px solid #cfcfd4;background:var(--paper);color:var(--ink);border-radius:var(--pill);
  padding:6px 12px;cursor:pointer;font-size:11.5px;font-weight:700;white-space:nowrap;
  transition:background .14s,border-color .14s;
}
.minibtn:hover{background:var(--well);border-color:#9a9a9e}
.hint{font-size:11px;color:var(--faint)}

/* ── web results strip ───────────────────────────────────────────────── */
.webresults{
  border:1px solid var(--hair-2);border-radius:var(--r);padding:12px;background:var(--well);
}
.wr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.wr-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px}
.wr-thumbs button{
  padding:0;border:1px solid var(--hair-2);border-radius:var(--r-sm);overflow:hidden;
  background:#fff;cursor:pointer;aspect-ratio:1;transition:border-color .14s,box-shadow .14s;
}
.wr-thumbs button:hover{border-color:var(--sky-dk);box-shadow:0 0 0 3px rgba(143,191,232,.35)}
.wr-thumbs img{width:100%;height:100%;object-fit:contain;display:block}
.wr-desc{margin:10px 0 0!important;font-size:12px!important;line-height:1.6;color:var(--ink-2)!important}
.wr-desc:empty{display:none}
#wrUseDesc{margin-top:9px}

.setdlg{width:min(460px,calc(100vw - 32px));text-align:left}
.setdlg .f{margin-bottom:12px}
.setsteps{margin:0 0 16px;padding-left:20px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.setsteps a{color:var(--sky-dk)}

/* barcode scanner sweep */
.camstage{position:relative}
.scanline{
  position:absolute;left:8%;right:8%;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:sweep 2s ease-in-out infinite;
}
@keyframes sweep{0%,100%{top:22%}50%{top:78%}}
@media (prefers-reduced-motion:reduce){.scanline{animation:none;top:50%}}

/* ── buy links ───────────────────────────────────────────────────────── */
.buyrow{display:flex;flex-wrap:wrap;gap:7px}
.buyrow a{
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  border:1px solid #cfcfd4;border-radius:var(--pill);padding:6px 12px;
  font-size:11.5px;font-weight:700;color:var(--ink);background:var(--paper);
  transition:background .14s,border-color .14s;
}
.buyrow a:hover{background:var(--well);border-color:#9a9a9e}
.buyrow a.saved{background:var(--grad-soft);border-color:rgba(0,0,0,.12)}

/* ── toast ───────────────────────────────────────────────────────────── */
.toast{
  position:fixed;z-index:60;left:50%;bottom:28px;transform:translateX(-50%);
  padding:11px 20px;border-radius:var(--pill);font-size:13px;font-weight:500;
  background:var(--ink);color:#fff;box-shadow:var(--shadow-lift);animation:rise .2s ease;
}
.toast{z-index:90}
@keyframes rise{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ── sign-in gate ─────────────────────────────────────────────────────
   Sits over everything until the server says who is signed in. Opaque on
   purpose: a half-painted shelf flashing behind the card looks broken. */
.gate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:linear-gradient(150deg,#FFFAEA 0%,#FDF0C4 34%,#FBE49C 68%,#F6D375 100%);
  overflow:auto;
}
.gatecard{
  width:min(380px,100%);padding:30px 30px 24px;
  background:var(--paper);border-radius:16px;box-shadow:0 24px 70px rgba(120,88,20,.28);
  display:flex;flex-direction:column;gap:14px;
  animation:pop-in .22s cubic-bezier(.22,.7,.3,1);
}
@keyframes pop-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.gateword{
  font-size:13px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  background:var(--grad-sky);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.gatecard h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.02em}
.gatesub{margin:-8px 0 2px;font-size:13px;line-height:1.55;color:var(--muted)}
.gatego{width:100%;padding:12px 18px;margin-top:4px}
.gateswap{margin:0;text-align:center;font-size:12px;color:var(--muted)}
.gateswap .linkbtn{font-size:10.5px;margin-left:4px}
.gateerr{
  margin:0;padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.5;
  background:rgba(206,27,50,.08);color:#9B1526;border:1px solid rgba(206,27,50,.22);
}
.gatenote{
  margin:0;padding-top:12px;border-top:1px solid var(--hair);
  font-size:11.5px;line-height:1.6;color:var(--faint);text-align:center;
}
.gatenote b{color:var(--ink-2)}
.gatecard.busy{opacity:.6;pointer-events:none}

/* ── sync pill ────────────────────────────────────────────────────────
   Only ever shown when something is NOT ordinary: offline, waiting to
   send, or running on this device only. A green "all fine" badge would
   just be noise on a bar that is already busy. */
.syncpill{
  border:1px solid rgba(0,0,0,.14);background:#fff;color:var(--ink-2);
  border-radius:var(--pill);padding:5px 12px;cursor:pointer;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;transition:background .14s,border-color .14s;
}
.syncpill:hover{background:var(--well);border-color:rgba(0,0,0,.3)}
.syncpill.pending{border-color:rgba(211,160,24,.5);background:#FFF8E2;color:#8A6608}
.syncpill.offline{border-color:rgba(206,27,50,.35);background:#FDEEF0;color:#9B1526}

/* ── what the photo read ──────────────────────────────────────────────
   The same shape as the catalogue match strip, in sky rather than grey,
   because it comes from a different place and can be wrong differently. */
.vstrip{
  padding:9px 14px;font-size:11.5px;line-height:1.6;
  background:rgba(143,191,232,.14);border-bottom:1px solid var(--hair);color:var(--ink-2);
}
.vstrip b{font-weight:700}
.vstrip em{color:var(--muted);font-style:italic}
.vstrip .low{color:#8A6608}
.vstrip.working{background:var(--well);color:var(--muted)}

/* ── account panel ────────────────────────────────────────────────── */
.acctwho{margin:0 0 14px!important;font-size:14px!important;color:var(--ink)!important;font-weight:600}
.acct{margin:0 0 14px;display:flex;flex-direction:column;gap:0}
.acct div{
  display:flex;justify-content:space-between;gap:16px;
  padding:8px 0;border-top:1px solid var(--hair);
}
.acct dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.acct dd{margin:0;font-size:12.5px;text-align:right;color:var(--ink)}

/* ── scrollbars ──────────────────────────────────────────────────────── */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:10px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);background-clip:content-box}

/* ── narrow ──────────────────────────────────────────────────────────── */
/* (the old rule here hid .stat:nth-child(2) on narrow screens — that used to be
   "units"; with units gone it would have hidden "in need", the one that matters) */
@media (max-width:900px){
  /* stacked: let the document itself be the scroller, and drop the row cap
     so the rail and grid can run to their natural height */
  body{overflow:auto;height:auto;min-height:100%}
  .shell{grid-template-rows:auto;grid-template-columns:1fr;height:auto}
  .topbar{
    height:auto;flex-wrap:wrap;gap:12px;
    padding:calc(12px + env(safe-area-inset-top)) var(--pad) 12px;
    position:sticky;top:0;   /* the add bar stays reachable while scrolling */
  }
  .addbar{order:3;flex-basis:100%;max-width:none}
  .topright{margin-left:auto}
  /* cap the rail so the grid is still reachable without scrolling past every facet */
  .filters{max-height:46vh;overflow-y:auto}
  .contentbar{flex-wrap:wrap;border-radius:var(--r);padding:10px 12px}
  .grid{overflow:visible;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .drawer{width:100vw}
  .shell{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
  .drawer-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* phones: fingers, not cursors — bigger hit areas and no iOS zoom-on-focus */
@media (max-width:560px){
  .word{font-size:16px;letter-spacing:.14em}
  .installbtn{padding:8px 14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
  .sw{height:96px}
  .opt{padding:9px 6px}            /* ~40px tall touch targets */
  .opt input{width:18px;height:18px}
  .opt input:checked::after{left:5.5px;top:2px;width:4px;height:9px}
  .minibtn{padding:9px 14px}
  .photo-actions{gap:8px}
  /* iOS zooms the page when a focused field is under 16px */
  .f input,.f select,.f textarea,.addbar input,.search input{font-size:16px}
  .two,.three{grid-template-columns:1fr}
  .drawer-head{padding:14px 16px}
  .drawer-body{padding:16px}
  .avstage{width:min(236px,72vw);height:min(236px,72vw)}
  #avZoom{width:min(236px,72vw)}
}