/* =====================================================================
   ROCKET PREPPING — theme.css
   Themes A / B / C. Same DOM, only CSS custom properties + a body class.

   The :root / body.theme-b / body.theme-c variable blocks below are copied
   VERBATIM from mockups/po-page-theme-picker.html (PREPPING-BUILD-PLAN §B),
   plus the status-palette tokens the plan adds.

   RULE (CLAUDE.md): no hardcoded colors / radii / fonts anywhere outside
   this file. index.html contains zero hex codes.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  font-size:var(--fs);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ---------- DEFAULT TOKENS (Theme A baseline) ---------- */
:root{
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs: 13px;
  --fs-sm: 11px;
  --ink: #1b2333;
  --ink-soft: #44506a;
  --muted: #7a879e;
  --bg: #f1f3f6;
  --panel: #ffffff;
  --panel-2: #f7f9fb;
  --line: #d7dce3;
  --line-soft: #e6eaf0;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-ink: #ffffff;
  --accent-tint: #eff5ff;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-pill: 3px;
  --shadow: none;
  --shadow-lg: 0 2px 6px rgba(16,24,40,.10);
  --side-bg: #1f2a44;
  --side-ink: #c4cede;
  --side-ink-strong: #ffffff;
  --side-active-bg: #2d3c5e;
  --side-active-bar: #4f8bff;
  --side-w: 208px;
  --top-bg: #ffffff;
  --head-bg: #eef1f5;
  --head-ink: #6a768c;
  --zebra: #fafbfc;
  --cell-pad: 5px 7px;
  --cell-h: 30px;
  --grid-line: #dfe4ea;
  --focus-ring: #2563eb;
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --warn: #b45309;
  --ok: #15803d;
  --ok-bg: #e8f6ec;
  --sec-po: #eef3f9;       /* 🚚 PO INFORMATION — light blue-gray */
  --sec-notes: #eef2f7;    /* 💬 CUSTOMER NOTES — blue-gray */
  --sec-add: #edf7f0;      /* 🔍 ADD ITEMS — green */
  --sec-grid: #fdf6e3;     /* 📋 WHAT'S COMING — yellow */
  --sec-po-ink: #2e4a6d;
  --sec-add-ink: #1d6b3a;
  --sec-grid-ink: #8a6416;
  --label-tt: uppercase;
  --label-ls: .07em;
  --content-max: 1600px;
  --content-pad: 22px;
}

/* ---------- THEME A · OPS CLASSIC (ShipHero-style) ---------- */
body.theme-a{ /* uses the defaults above */ }

/* ---------- THEME B · MODERN SaaS ---------- */
body.theme-b{
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs: 14px;
  --fs-sm: 11.5px;
  --ink: #16181d;
  --ink-soft: #3f434d;
  --muted: #8b8f9a;
  --bg: #fbfbfc;
  --panel: #ffffff;
  --panel-2: #fafafb;
  --line: #ececef;
  --line-soft: #f3f3f5;
  --accent: #e0432b;
  --accent-hover: #c73a24;
  --accent-ink: #ffffff;
  --accent-tint: #fdf0ed;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
  --shadow-lg: 0 4px 16px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.05);
  --side-bg: #ffffff;
  --side-ink: #5b6070;
  --side-ink-strong: #16181d;
  --side-active-bg: #fdf0ed;
  --side-active-bar: transparent;
  --side-w: 232px;
  --top-bg: #ffffff;
  --head-bg: #ffffff;
  --head-ink: #9195a1;
  --zebra: transparent;
  --cell-pad: 9px 11px;
  --cell-h: 40px;
  --grid-line: #f0f0f2;
  --focus-ring: #e0432b;
  --danger: #d92d20;
  --danger-bg: #fef3f2;
  --warn: #b54708;
  --ok: #067647;
  --ok-bg: #ecfdf3;
  --sec-po: #ffffff;
  --sec-notes: #ffffff;
  --sec-add: #ffffff;
  --sec-grid: #ffffff;
  --sec-po-ink: #16181d;
  --sec-add-ink: #16181d;
  --sec-grid-ink: #16181d;
  --label-tt: none;
  --label-ls: 0;
  --content-pad: 30px;
}

/* ---------- THEME C · SPREADSHEET FIRST ---------- */
body.theme-c{
  --font: "Inter", Roboto, Arial, -apple-system, Helvetica, sans-serif;
  --fs: 12.5px;
  --fs-sm: 10.5px;
  --ink: #202124;
  --ink-soft: #3c4043;
  --muted: #5f6368;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f8f9fa;
  --line: #d9dcdf;
  --line-soft: #e8eaed;
  --accent: #188038;
  --accent-hover: #12692d;
  --accent-ink: #ffffff;
  --accent-tint: #e6f4ea;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-pill: 2px;
  --shadow: none;
  --shadow-lg: 0 1px 3px rgba(60,64,67,.3);
  --side-bg: #f8f9fa;
  --side-ink: #5f6368;
  --side-ink-strong: #188038;
  --side-active-bg: #e6f4ea;
  --side-active-bar: #188038;
  --side-w: 56px;
  --top-bg: #ffffff;
  --head-bg: #f1f3f4;
  --head-ink: #3c4043;
  --zebra: transparent;
  --cell-pad: 3px 6px;
  --cell-h: 25px;
  --grid-line: #d9dcdf;
  --focus-ring: #188038;
  --danger: #d93025;
  --danger-bg: #fce8e6;
  --warn: #b06000;
  --ok: #188038;
  --ok-bg: #e6f4ea;
  --sec-po: #f8f9fa;
  --sec-notes: #f8f9fa;
  --sec-add: #f1f8f3;
  --sec-grid: #fef7e0;
  --sec-po-ink: #3c4043;
  --sec-add-ink: #188038;
  --sec-grid-ink: #7a5900;
  --content-pad: 0px;
  --content-max: none;
}

/* ---------- STATUS PALETTE (PREPPING-BUILD-PLAN §B) ----------
   Tom's sheet palette. Identical across all three themes on purpose:
   the warehouse learns these colors once. LOCKED-FEATURES §7.4.        */
:root{
  --st-inbound:  #fde68a;   /* yellow     */
  --st-arrived:  #bbf7d0;   /* green      */
  --st-prepping: #bfdbfe;   /* light blue */
  --st-completed:#93c5fd;   /* blue       */
  --st-invoiced: #e5e7eb;   /* light gray */
  --st-closed:   #d1d5db;   /* gray       */
  --st-storage:  #e7d8bf;   /* tan        */
  --st-ink:      #1b2333;   /* chip text on every status above          */
  --zone-ok:     #15803d;   /* READY ✓ zone                             */
  --zone-bad:    #c0392b;   /* CAN'T SEND ⚠ zone                        */
  --sev-err:     #d92d20;   /* special status severity = error (red)    */
  --sev-warn:    #b45309;   /* special status severity = warn (amber)   */
  --printnum-bg: #eef1f5;   /* PRINT # column background                */
  --sandbox-bg:  #7c2d12;   /* 🧪 SANDBOX banner                        */
  --sandbox-ink: #fff7ed;
  --bar-bg:      #12141c;   /* theme picker bar + toast (app chrome)    */
  --bar-ink:     #e8eaf0;
  --bar-btn:     #222736;
  --bar-btn-ink: #cdd4e3;
  --bar-btn-line:#343b4f;
  --bar-btn-hov: #2b3143;
  --bar-label:   #8b93a8;
}

/* =====================================================================
   THEME PICKER BAR
   ===================================================================== */
#themebar{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 16px;
  background:var(--bar-bg); color:var(--bar-ink);
  border-bottom:2px solid var(--bar-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:12px;
}
#themebar .tb-label{font-weight:800;letter-spacing:.1em;font-size:10.5px;color:var(--bar-label);text-transform:uppercase;margin-right:4px}
#themebar button{
  font:inherit; cursor:pointer;
  background:var(--bar-btn); color:var(--bar-btn-ink); border:1px solid var(--bar-btn-line);
  padding:7px 13px; border-radius:6px; font-size:11.5px; font-weight:600;
  display:flex; align-items:center; gap:7px;
}
#themebar button:hover{background:var(--bar-btn-hov);color:var(--side-ink-strong)}
#themebar button.on{background:var(--panel);color:var(--bar-bg);border-color:var(--panel);font-weight:800}
#themebar button .kk{font-weight:800;font-size:10px;opacity:.6}
#themebar button.on .kk{opacity:.9}
#themebar .spacer{flex:1}
#themebar .tb-hint{color:var(--bar-label);font-size:10.5px}

/* 🧪 SANDBOX banner — loud, whenever the current org is_test (CLAUDE.md rule 4) */
#sandbox{
  display:none;
  position:sticky; top:44px; z-index:190;
  padding:7px 16px; background:var(--sandbox-bg); color:var(--sandbox-ink);
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  text-align:center;
}
#sandbox.on{display:block}

/* =====================================================================
   APP SHELL
   ===================================================================== */
#shell{display:flex; min-height:calc(100vh - 44px); align-items:stretch}
#shell.hide{display:none}

.sidebar{
  width:var(--side-w); flex:0 0 var(--side-w);
  background:var(--side-bg); color:var(--side-ink);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
body.theme-a .sidebar{border-right-color:#12192b}
.brand{
  display:flex; align-items:center; gap:9px;
  padding:15px 16px; border-bottom:1px solid rgba(255,255,255,.08);
}
body.theme-b .brand, body.theme-c .brand{border-bottom-color:var(--line)}
.brand .logo{
  width:26px;height:26px;flex:0 0 26px;border-radius:6px;
  background:linear-gradient(145deg,#e0432b,#ff7a4d);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
body.theme-c .brand .logo{border-radius:2px;background:linear-gradient(145deg,#188038,#34a853)}
.brand .bt{font-weight:800;font-size:13px;color:var(--side-ink-strong);line-height:1.15;white-space:nowrap}
.brand .bt small{display:block;font-weight:500;font-size:10px;color:var(--muted);letter-spacing:.06em}
body.theme-a .brand .bt small{color:#7f8ca8}

.navlist{padding:10px 8px; display:flex; flex-direction:column; gap:2px; flex:1}
.navitem{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--radius-sm);
  color:var(--side-ink); text-decoration:none; cursor:pointer;
  font-size:13px; font-weight:500; white-space:nowrap; position:relative;
  border-left:3px solid transparent;
}
body.theme-b .navitem{font-size:13.5px}
.navitem .ic{width:18px;text-align:center;font-size:14px;flex:0 0 18px}
.navitem:hover{background:rgba(125,145,190,.14); color:var(--side-ink-strong)}
body.theme-b .navitem:hover{background:var(--panel-2)}
body.theme-c .navitem:hover{background:var(--line-soft)}
.navitem.active{background:var(--side-active-bg); color:var(--side-ink-strong); font-weight:700; border-left-color:var(--side-active-bar)}
body.theme-b .navitem.active{color:var(--accent)}
.navitem.dim{opacity:.45;cursor:not-allowed}
.navfoot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:10.5px;color:var(--muted);white-space:nowrap}
body.theme-b .navfoot,body.theme-c .navfoot{border-top-color:var(--line)}

body.theme-c .navlist{padding:6px 4px}
body.theme-c .navitem{justify-content:center;padding:9px 0;border-left:none;border-radius:2px}
body.theme-c .navitem.active{box-shadow:inset 0 0 0 1px #a8dab5}
body.theme-c .navlabel,body.theme-c .brand .bt,body.theme-c .navfoot{display:none}
body.theme-c .brand{justify-content:center;padding:12px 0}

#main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:14px;
  padding:10px 18px; background:var(--top-bg);
  border-bottom:1px solid var(--line);
}
.storesw{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:6px 11px; background:var(--panel); font-weight:700; font-size:12.5px;
}
.storesw .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.storesw small{font-weight:500;color:var(--muted);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;display:block}
.crumb{color:var(--muted);font-size:12px}
.crumb b{color:var(--ink)}
.topbar .spacer{flex:1}
.who{line-height:1.2;font-size:12px;text-align:right}
.who small{display:block;color:var(--muted);font-size:10.5px}
.avatar{
  width:31px;height:31px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11.5px;
}
body.theme-a .avatar{background:#334a78}

#content{
  flex:1; padding:var(--content-pad);
  max-width:var(--content-max); width:100%;
}
body.theme-c #content{padding:0}

.pagehead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
body.theme-c .pagehead{padding:12px 14px 10px;margin-bottom:0;border-bottom:1px solid var(--line)}
.pagehead h1{margin:0;font-size:21px;font-weight:800;letter-spacing:-.015em}
body.theme-a .pagehead h1{font-size:18px;letter-spacing:.01em;text-transform:uppercase}
body.theme-c .pagehead h1{font-size:16px}
.pagehead .sub{color:var(--muted);font-size:12px;margin-top:3px}
.pagehead .spacer{flex:1}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  border-radius:var(--radius-pill); padding:3px 9px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
}
.pill.test{background:var(--sandbox-bg);border-color:var(--sandbox-bg);color:var(--sandbox-ink)}

/* =====================================================================
   CARDS
   ===================================================================== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:16px;
  overflow:visible;
}
body.theme-c .card{border-radius:0;border-left:none;border-right:none;margin-bottom:0;border-top:none}
.card > h2{
  margin:0; display:flex; align-items:center; gap:9px;
  padding:10px 14px;
  font-size:12px; font-weight:800; letter-spacing:var(--label-ls); text-transform:var(--label-tt);
  border-bottom:1px solid var(--line-soft);
}
body.theme-b .card > h2{font-size:14.5px;letter-spacing:-.01em;padding:15px 18px 13px;font-weight:700}
.card > h2 .hint{margin-left:auto;font-weight:500;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
.card.s-po > h2{background:var(--sec-po);color:var(--sec-po-ink)}
.card.s-notes > h2{background:var(--sec-notes);color:var(--sec-po-ink)}
.card.s-add > h2{background:var(--sec-add);color:var(--sec-add-ink)}
.card.s-grid > h2{background:var(--sec-grid);color:var(--sec-grid-ink)}
.cardbody{padding:14px}
body.theme-b .cardbody{padding:18px}
body.theme-c .cardbody{padding:10px 14px}

/* =====================================================================
   FORM BITS
   ===================================================================== */
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f label{
  font-size:var(--fs-sm);font-weight:800;color:var(--muted);
  letter-spacing:var(--label-ls);text-transform:var(--label-tt);
}
body.theme-b .f label{font-weight:600;color:var(--ink-soft);font-size:12px}
.inp,select.inp,textarea.inp{
  font:inherit;font-size:13px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 10px; width:100%; min-width:0;
}
body.theme-b .inp,body.theme-b select.inp{padding:10px 12px;font-size:14px}
body.theme-c .inp,body.theme-c select.inp{padding:5px 7px;font-size:12.5px;border-radius:2px}
.inp:focus,select.inp:focus{outline:2px solid var(--focus-ring);outline-offset:-1px;border-color:var(--focus-ring)}
.inp::placeholder{color:var(--muted)}

.btn{
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:var(--radius-sm);padding:8px 14px;
  display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btn.big{padding:11px 22px;font-size:13.5px;font-weight:800;letter-spacing:.03em}
.btn[disabled]{opacity:.5;cursor:not-allowed}
body.theme-b .btn{border-radius:var(--radius-sm);padding:10px 16px;font-size:13.5px;box-shadow:var(--shadow)}
body.theme-b .btn.sm{padding:6px 12px;font-size:12px}
body.theme-c .btn{border-radius:2px;padding:5px 11px;font-size:12px}

/* =====================================================================
   LOGIN
   ===================================================================== */
#s-login{
  min-height:calc(100vh - 44px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
#s-login.hide{display:none}
.loginbox{
  width:100%;max-width:380px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:26px 24px;
}
.loginbox .lg{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.loginbox .lg .logo{
  width:34px;height:34px;flex:0 0 34px;border-radius:8px;
  background:linear-gradient(145deg,#e0432b,#ff7a4d);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
body.theme-c .loginbox .lg .logo{border-radius:2px;background:linear-gradient(145deg,#188038,#34a853)}
.loginbox h1{margin:0;font-size:17px;font-weight:800;letter-spacing:.02em}
.loginbox h1 small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.loginbox .f{margin-bottom:12px}
#loginMsg{min-height:18px;font-size:12px;font-weight:600;margin:4px 0 10px;color:var(--danger)}
.loginfoot{margin-top:14px;font-size:10.5px;color:var(--muted);line-height:1.6}

/* =====================================================================
   TABS
   ===================================================================== */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
body.theme-c .tabs{margin-bottom:0;padding:0 14px}
.tab{
  font:inherit;cursor:pointer;background:none;border:none;
  padding:9px 16px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid transparent;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab .n{font-weight:700;opacity:.7;margin-left:5px}

/* =====================================================================
   TABLES
   ===================================================================== */
.gridscroll{overflow-x:auto;position:relative}
table.grid{
  border-collapse:separate;border-spacing:0;width:100%;min-width:100%;
  font-size:12.5px;
}
body.theme-b table.grid{font-size:13px}
body.theme-c table.grid{font-size:12px}
table.grid th,table.grid td{
  border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);
  padding:var(--cell-pad);
  height:var(--cell-h);
  vertical-align:middle;
  background:var(--panel);
  text-align:left;
}
table.grid th:last-child,table.grid td:last-child{border-right:none}
body.theme-b table.grid td{border-right-color:transparent}
body.theme-b table.grid td.num{border-right-color:var(--grid-line)}
table.grid thead th{
  position:sticky; top:0; z-index:20;
  background:var(--head-bg); color:var(--head-ink);
  font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
body.theme-b table.grid thead th{font-size:11px;letter-spacing:.04em;font-weight:600}
body.theme-c table.grid thead th{font-size:11px;letter-spacing:0;text-transform:none;font-weight:700}
body.theme-a table.grid tbody tr:nth-child(even) td{background:var(--zebra)}
table.grid tbody tr:hover td{background:var(--accent-tint)}
table.grid tbody tr.clickable{cursor:pointer}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.ck,th.ck{width:34px;min-width:34px;text-align:center}
td.nowrap,th.nowrap{white-space:nowrap}
.empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:12.5px}

/* status chip — one colored chip, Tom's sheet palette */
.chip{
  display:inline-block;border-radius:var(--radius-pill);
  padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--st-ink);white-space:nowrap;border:1px solid rgba(0,0,0,.08);
}
.chip.s-inbound  {background:var(--st-inbound)}
.chip.s-arrived  {background:var(--st-arrived)}
.chip.s-storage  {background:var(--st-storage)}
.chip.s-prepping {background:var(--st-prepping)}
.chip.s-completed{background:var(--st-completed)}
.chip.s-invoiced {background:var(--st-invoiced)}
.chip.s-closed   {background:var(--st-closed)}
.chip.s-open     {background:var(--st-prepping)}
.chip.s-complete {background:var(--st-completed)}
.chip.s-cleared  {background:var(--st-closed)}

/* identity cell — Title (bold) + SKU · ASIN · FNSKU line (LOCKED §1) */
.idn b{display:block;font-size:12.5px;font-weight:700;line-height:1.35}
.idn small{display:block;color:var(--muted);font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px}
.brandline{display:block;color:var(--muted);font-size:10.5px;margin-top:1px;font-weight:500}
.notes{white-space:pre-wrap;font-size:11.5px;color:var(--ink-soft);line-height:1.5;max-width:260px}
.dtxt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* =====================================================================
   SELECT SCREEN
   ===================================================================== */
.toolrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--line-soft);background:var(--panel)}
.toolrow .spacer{flex:1}
.toolrow .tip{font-size:10.5px;color:var(--muted)}

.srchwrap{position:relative;max-width:520px}
.drop{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); max-height:330px; overflow:auto;
}
.drop.open{display:block}
.hit{
  display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.hit:hover,.hit.cur{background:var(--accent-tint)}
.hit .idn{flex:1;min-width:0}
.hit .idn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--radius-pill);padding:2px 6px;white-space:nowrap;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
}
.badge.fba{background:#e8f0fe;color:#1a56c4;border-color:#e8f0fe}
.badge.wfs{background:#fff0e1;color:#9a5a05;border-color:#fff0e1}
.badge.fbm{background:#f0eafe;color:#5b32b8;border-color:#f0eafe}
.badge.test{background:var(--sandbox-bg);color:var(--sandbox-ink);border-color:var(--sandbox-bg)}

.lockedstore{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--sec-po);
}
.lockedstore .nm{font-weight:800;font-size:14px}
.lockedstore .sub{font-size:11.5px;color:var(--ink-soft)}
.lockedstore .spacer{flex:1}
.lockednote{font-size:10.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:800}

.filters{display:flex;gap:4px;flex-wrap:wrap}
.fbtn{
  font:inherit;cursor:pointer;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:var(--radius-pill);padding:5px 11px;
}
.fbtn:hover{background:var(--panel-2);color:var(--ink)}
.fbtn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.actionbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 14px;
  border-top:1px solid var(--line);background:var(--panel-2);
}
.actionbar .spacer{flex:1}
.actionbar .sum{font-size:11.5px;color:var(--muted)}
.actionbar .sum b{color:var(--ink);font-size:13px}

/* =====================================================================
   PLACEHOLDER / BANNERS / TOAST
   ===================================================================== */
.okpanel{
  border:1px solid var(--ok);background:var(--ok-bg);border-radius:var(--radius);
  padding:16px 18px;display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;
}
.okpanel .big{font-size:22px}
.okpanel h3{margin:0 0 4px;font-size:14.5px;font-weight:800;color:var(--ok)}
.okpanel p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.55}

.errpanel{
  display:none;
  border:1px solid var(--danger);background:var(--danger-bg);border-radius:var(--radius);
  padding:12px 15px;font-size:12.5px;color:var(--danger);font-weight:600;line-height:1.6;
  margin-bottom:14px; white-space:pre-wrap;
}
.errpanel.on{display:block}

.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.kv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kv .k{font-size:var(--fs-sm);font-weight:800;letter-spacing:var(--label-ls);text-transform:var(--label-tt);color:var(--muted);display:block}
.kv .v{font-size:14px;font-weight:700;margin-top:3px;display:block}

#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(160%);
  background:var(--bar-bg);color:var(--bar-ink);padding:11px 18px;border-radius:8px;
  font-size:12.5px;font-weight:600;z-index:500;box-shadow:var(--shadow-lg);
  transition:transform .22s ease; max-width:min(640px,92vw); text-align:center;
  visibility:hidden;
}
#toast.on{transform:translateX(-50%) translateY(0);visibility:visible}

.hide{display:none !important}
.spin{font-size:12px;color:var(--muted);padding:20px 14px}