/* =====================================================================
   Bhumi Gems — Order Manager
   Dark liquid-glass seller portal: fixed sidebar, top bar, status tabs, table.
   Phone keeps the card list; the table only appears once there is room.
   ===================================================================== */

/* Inter — the closest thing to Apple's SF that can be shipped with the app.
   On an iPhone -apple-system wins and you get the real SF Pro; on Windows
   this takes over, so the two look like the same typeface. */
@font-face{
  font-family:'InterVar';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'Noto Sans Gujarati';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/NotoSansGujarati-gu.woff2') format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0A80-0AFF,U+200C-200D,U+20B9,U+25CC,U+A830-A839;
}
@font-face{
  font-family:'Noto Sans Gujarati';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/NotoSansGujarati-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* mid-dark, not black - closer to how Apple does dark mode */
  --bg:#0f1319;
  --panel:#171c25;
  --panel-2:#1e242f;
  --panel-3:#232a36;
  --line:#2a3240;
  --line-2:#222936;
  --ink:#e9eef7;
  --ink-2:#c2cbd9;
  --dim:#8794a8;
  /* straight off the logo artwork: #DFA887 */
  --accent:#dfa887;
  --accent-2:#eec0a4;
  --accent-rgb:223,168,135;
  --accent-soft:rgba(223,168,135,.14);
  --accent-line:rgba(223,168,135,.34);
  --ok:#3ddc97; --ok-bg:rgba(61,220,151,.13);
  --warn:#f5b452; --warn-bg:rgba(245,180,82,.14);
  --bad:#ff7b7b; --bad-bg:rgba(255,123,123,.13);
  --gold:#e3b769;
  --sidebar:260px;
  --r:14px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.26);
  --glow:0 0 0 1px var(--accent-line), 0 6px 22px rgba(223,168,135,.24);

  /* ---- liquid glass ----
     A sheet of glass is four things at once: something see-through, a blur
     behind it, a bright hairline where the light catches the top edge, and a
     shadow underneath that lifts it off the page. */
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);
  --glass-line:rgba(255,255,255,.10);
  --glass-blur:blur(26px) saturate(165%);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.18);
  --glass-tint:rgba(223,168,135,.10);
}

/* the colour the glass picks up - fixed behind everything, never scrolls */
body::before{
  content:'';position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42rem 32rem at 16% 4%,  rgba(223,168,135,.42), transparent 62%),
    radial-gradient(38rem 30rem at 86% 6%,  rgba(158,110,255,.34), transparent 60%),
    radial-gradient(40rem 30rem at 72% 88%, rgba(61,220,151,.22), transparent 62%),
    radial-gradient(34rem 26rem at 6%  84%, rgba(245,180,82,.18), transparent 62%);
  filter:blur(34px);
}

.glass{
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-hi), var(--shadow);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(223,168,135,.10), transparent 62%),
    radial-gradient(900px 520px at -8% 8%, rgba(122,162,255,.06), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'InterVar','Noto Sans Gujarati',
              'Gujarati Sangam MN','Segoe UI',system-ui,sans-serif;
  font-size:14px;line-height:1.55;
  letter-spacing:-0.006em;              /* the tight SF look */
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1,'ss03' 1;   /* Inter: single-storey a-ish, SF-like */
}
h1,h2,h3,.stat b,.card-price{letter-spacing:-0.02em}
.hidden{display:none !important}
a{color:var(--accent-2)}
::selection{background:rgba(223,168,135,.32)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2c3543;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#39445600}

/* ============================ login ============================ */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:20px}
.login-card{
  width:100%;max-width:400px;border-radius:22px;padding:34px 30px;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-hi), 0 24px 60px rgba(0,0,0,.45);
}
.login-card h1{
  margin:0 0 4px;font-size:24px;font-weight:700;
  background:linear-gradient(90deg,#fff,#eec0a4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-card .sub{margin:0 0 22px;color:var(--dim);font-size:13px}

/* ============================ shell ============================ */
.shell{display:flex;min-height:100dvh}

.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-line);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;
}
.brand-box{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:20px 20px 16px;border-bottom:1px solid var(--glass-line);
}
.brand-logo{
  width:100%;max-width:180px;height:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(223,168,135,.30));
}
.brand-box small{
  font-weight:500;font-size:10.5px;color:var(--dim);
  letter-spacing:.14em;text-transform:uppercase;padding-left:2px;
}
.login-logo{
  width:100%;max-width:210px;height:auto;display:block;margin:0 auto 14px;
  filter:drop-shadow(0 4px 18px rgba(223,168,135,.28));
}

.nav{padding:12px 12px;overflow-y:auto;flex:1}
.nav-label{
  font-size:10.5px;font-weight:700;letter-spacing:.7px;color:var(--dim);
  text-transform:uppercase;padding:14px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:1px solid transparent;border-radius:10px;
  padding:10px 11px;font:inherit;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;text-align:left;margin-bottom:2px;
  transition:background .13s ease,color .13s ease,border-color .13s ease;
}
.nav-item:hover{background:var(--panel-2);color:var(--ink)}
.nav-item.on{
  background:linear-gradient(180deg,rgba(223,168,135,.24),rgba(223,168,135,.12));
  border-color:var(--accent-line);color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-item .ic{width:18px;text-align:center;flex:0 0 auto;font-size:15px;opacity:.9}
.nav-item .badge{
  margin-left:auto;background:var(--panel-3);color:var(--ink-2);
  border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;
}
.nav-item.on .badge{background:rgba(255,255,255,.18);color:#fff}
.nav-item .badge.hot{background:var(--warn-bg);color:var(--warn)}

/* A button that has just become the next thing to do.  It cannot be
   pressed for them - the browser will not open a window that long after a
   click - so it asks to be pressed instead, then goes quiet. */
@keyframes nudge{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  50%    {box-shadow:0 0 0 7px rgba(37,211,102,0)}
}
.btn.nudge{
  animation:nudge 1.15s ease-out 3;
  border-color:rgba(37,211,102,.6);color:#fff;
}
@media (prefers-reduced-motion:reduce){
  .btn.nudge{animation:none;border-color:rgba(37,211,102,.85)}
}

/* the line the owner drew: stages above it, tools below */
.nav-sep{height:1px;background:var(--line-2);margin:12px 10px}

/* ---------------- stone size chart ---------------- */
#stoneCharts{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.stone-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 15px 6px;
}
.stone-card h4{
  margin:0 0 10px;font-size:14px;display:flex;align-items:baseline;gap:8px;
}
.stone-card h4 small{font-size:10.5px;font-weight:500;color:var(--dim);letter-spacing:.03em}
.stone-tbl{width:100%;border-collapse:collapse;font-size:13px}
.stone-tbl th{
  text-align:left;padding:4px 6px 7px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--line);
}
.stone-tbl th:not(:first-child),
.stone-tbl td:not(:first-child){text-align:right}
.stone-tbl td{padding:5px 6px;border-bottom:1px solid var(--line-2)}
.stone-tbl tr:last-child td{border-bottom:0}
.stone-tbl td.dim{color:var(--dim);font-size:12px}
.stone-tbl tr:hover td{background:var(--panel-2)}

.side-foot{padding:12px;border-top:1px solid var(--line-2)}
.user-chip{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid var(--glass-line);border-radius:12px;font-size:12.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(145deg,#eec0a4,#c98a63);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12.5px;
  box-shadow:0 3px 10px rgba(223,168,135,.35);
}
.user-chip .who{min-width:0;flex:1}
.user-chip .who b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .who span{color:var(--dim);font-size:11px}

/* ============================ main ============================ */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  padding:16px 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:30;
}
.hamburger{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--ink)}
.page-title{font-size:19px;font-weight:700;margin:0;line-height:1.2}
.crumb{font-size:12px;color:var(--dim);margin-top:1px}
.topbar .spacer{flex:1}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

.page{padding:22px 26px 40px;flex:1}

/* ============================ tabs ============================ */
.tabs{
  display:flex;gap:2px;border-bottom:1px solid var(--line);
  margin-bottom:18px;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  padding:11px 16px;font:inherit;font-size:13.5px;color:var(--dim);cursor:pointer;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tab .n{
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:0 7px;font-size:11px;font-weight:700;color:var(--ink-2);
}
.tab.on .n{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)}
.tab .n.hot{background:var(--warn-bg);border-color:transparent;color:var(--warn)}

/* ============================ cards / panels ============================ */
.panel{
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);border-radius:var(--r);
  box-shadow:var(--glass-hi), var(--shadow);
  overflow:hidden;
}
.panel + .panel{margin-top:16px}
.panel-head{
  padding:14px 18px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.panel-head h3{margin:0;font-size:14px;font-weight:700}
.panel-body{padding:18px}

/* ============================ toolbar ============================ */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search{position:relative;flex:1 1 260px;max-width:380px}
.search input{padding-left:34px}
.search::before{
  content:'🔎';position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:12px;opacity:.5;pointer-events:none;
}

/* ============================ form controls ============================ */
input,select,textarea{
  width:100%;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font:inherit;font-size:14px;
  transition:border-color .13s ease,box-shadow .13s ease,background .13s ease;
}
input:hover,select:hover,textarea:hover{border-color:#39445a}
input:focus,select:focus,textarea:focus{
  outline:none;background:var(--panel-3);
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(223,168,135,.20);
}
input::placeholder,textarea::placeholder{color:#6d7a8d}
input[type=date],input[type=month]{color-scheme:dark}
select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:32px;
}
option{background:var(--panel-2);color:var(--ink)}
label{display:block;font-size:12px;color:var(--dim);margin-bottom:12px;font-weight:500}
label input,label select,label textarea{margin-top:5px}
fieldset{
  border:1px solid var(--glass-line);border-radius:var(--r);
  padding:16px 18px;margin:0 0 16px;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi), var(--shadow);
}
legend{padding:0 8px;font-size:11.5px;color:var(--accent-2);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
.full{grid-column:1/-1}

/* ---- photo drop zone ---- */
.pic-drop{
  margin-top:5px;position:relative;
  width:190px;height:190px;border-radius:14px;cursor:pointer;
  border:1.5px dashed var(--glass-line);
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  display:grid;place-items:center;overflow:hidden;
  transition:border-color .13s ease,background .13s ease;
}
.pic-drop:hover,.pic-drop:focus,.pic-drop.over{
  border-color:var(--accent);background:var(--accent-soft);outline:none;
}
.pic-drop img{width:100%;height:100%;object-fit:cover;display:block}
.pic-empty{
  display:flex;flex-direction:column;gap:5px;text-align:center;padding:14px;
  font-size:12px;color:var(--dim);
}
.pic-empty b{color:var(--ink-2);font-size:12.5px}
.pic-tip{font-size:10.5px;opacity:.7;line-height:1.35}

/* ---- the other pictures from the listing ---- */
.pic-picker{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.pic-picker button{
  width:56px;height:56px;padding:0;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--glass-line);background:#fff;overflow:hidden;
  transition:border-color .13s ease,transform .13s ease;
}
.pic-picker button:hover{transform:translateY(-1px)}
.pic-picker button.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pic-picker img{width:100%;height:100%;object-fit:contain;display:block}

/* ---- the dollar rate, above the bill screens ---- */
.rate-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  padding:12px 16px;margin-bottom:14px;border-radius:var(--r);
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi), var(--shadow);
}
.rate-what{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2)}
.rate-what input{width:96px;margin:0;text-align:right;font-weight:700}
.rate-why{margin:0;flex:1 1 240px;min-width:0}

/* ---- bill drop zone ----
   Same idea as the photo drop but a wide bar, not a square: a bill is a
   sheet of paper, and the zone sits directly above the box its text lands
   in, so the two read as one step. */
.bill-drop{
  width:auto;height:auto;min-height:64px;
  margin:2px 0 10px;padding:14px 16px;
  font-size:12.5px;color:var(--dim);text-align:center;
}
.bill-drop.over,.bill-drop:hover{color:var(--ink-2)}

/* the box that appears when a list does not have the value yet */
.other-in{margin-top:6px}

/* ---- what is still missing ----
   An amber bar down the left edge of anything still empty.  It is quiet
   enough to live with while typing and disappears the moment the field is
   filled, so the form empties itself of warnings as you work. */
.need > input, .need > select, .need > textarea,
.need > .with-btn > input, .need > .pic-drop{
  border-color:rgba(245,180,82,.55);
  box-shadow:inset 3px 0 0 var(--warn);
}
.need > input:focus, .need > select:focus, .need > textarea:focus{
  box-shadow:inset 3px 0 0 var(--warn), 0 0 0 3px rgba(245,180,82,.18);
}
label.need{color:var(--warn)}
label.need::after{
  content:'needed';margin-left:6px;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.8;
}

.need-bar{
  position:sticky;top:78px;z-index:26;
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  border-radius:var(--r);padding:11px 15px;font-size:13.5px;
  background:linear-gradient(180deg,rgba(245,180,82,.20),rgba(245,180,82,.09));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(245,180,82,.40);color:#f7cd8e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35);
}
.need-bar b{color:#ffe0b0;font-size:15px}
.need-bar .need-dot{
  width:9px;height:9px;border-radius:50%;background:var(--warn);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(245,180,82,.20);
}
.need-bar.done{
  background:linear-gradient(180deg,rgba(61,220,151,.20),rgba(61,220,151,.08));
  border-color:rgba(61,220,151,.40);color:#8ff0c4;
}
.need-bar.done .need-dot{background:var(--ok);box-shadow:0 0 0 4px rgba(61,220,151,.20)}
@media (max-width:999px){ .need-bar{top:66px} }

/* one line per order while the tracking numbers are being scanned in */
.trk-row{
  display:flex;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.trk-row:last-child{border-bottom:0}
.trk-who{flex:0 0 170px;min-width:0}
.trk-who b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk-who small{display:block;color:var(--dim);font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk-row input{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.trk-row .ok{color:var(--ok);font-size:15px;width:16px;text-align:center}

.with-btn{display:flex;gap:6px;align-items:stretch;margin-top:5px}
.with-btn input{flex:1;min-width:0;margin-top:0}
.with-btn .btn{flex:0 0 auto}

/* ============================ buttons ============================ */
/* ---- one button system, four intents ----
   neutral   = get out of the way            (glass)
   primary   = the one brand action          (rose gold, from the logo)
   go        = move the work forward         (teal)
   warn      = undo, step back               (amber)
   danger    = cancel, delete                (red)
   Only ever one primary in view, so the eye knows where to land. */
.btn{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  color:var(--ink-2);border:1px solid var(--glass-line);
  border-radius:10px;padding:9px 15px;font:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .14s ease,border-color .14s ease,color .14s ease,
             box-shadow .14s ease,transform .07s ease;
}
.btn:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.20);color:var(--ink);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(223,168,135,.35)}

.btn.primary{
  background:linear-gradient(180deg,#f0c6a8,#d29465);
  border-color:rgba(255,255,255,.30);color:#2a1a0f;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(223,168,135,.30);
}
.btn.primary:hover{
  background:linear-gradient(180deg,#f6d3ba,#dda274);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(223,168,135,.40);
}

.btn.go{
  background:linear-gradient(180deg,rgba(61,220,151,.30),rgba(61,220,151,.14));
  border-color:rgba(61,220,151,.42);color:#8ff0c4;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.btn.go:hover{
  background:linear-gradient(180deg,rgba(61,220,151,.42),rgba(61,220,151,.20));
  border-color:rgba(61,220,151,.6);color:#b6f7dc;
}

.btn.warn{
  background:linear-gradient(180deg,rgba(245,180,82,.24),rgba(245,180,82,.10));
  border-color:rgba(245,180,82,.40);color:#f7cd8e;font-weight:600;
}
.btn.warn:hover{background:linear-gradient(180deg,rgba(245,180,82,.34),rgba(245,180,82,.16))}

.btn.danger{
  background:linear-gradient(180deg,rgba(255,123,123,.18),rgba(255,123,123,.07));
  border-color:rgba(255,123,123,.38);color:#ff9d9d;font-weight:600;
}
.btn.danger:hover{
  background:linear-gradient(180deg,rgba(255,123,123,.30),rgba(255,123,123,.13));
  border-color:rgba(255,123,123,.6);color:#ffb8b8;
}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.wide{width:100%;justify-content:center;margin-top:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
a.btn{text-decoration:none}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:4px}

/* ============================ table ============================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* below this width the columns start wrapping into unreadable stacks,
   so let the table scroll sideways instead of squashing */
table.grid-tbl{width:100%;min-width:940px;border-collapse:collapse;font-size:13px}
table.grid-tbl td:nth-child(2){min-width:150px}
table.grid-tbl td:nth-child(3){min-width:130px}
table.grid-tbl td:nth-child(4){min-width:110px}
table.grid-tbl td:nth-child(5){min-width:180px}
table.grid-tbl td:nth-child(7){min-width:160px}
table.grid-tbl th{
  text-align:left;font-weight:600;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.5px;
  padding:12px 14px;white-space:nowrap;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
table.grid-tbl td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top}
table.grid-tbl tbody tr{transition:background .12s ease}
table.grid-tbl tbody tr:hover{background:rgba(223,168,135,.07)}
table.grid-tbl tbody tr:last-child td{border-bottom:0}
.t-main{font-weight:600;color:var(--accent-2);cursor:pointer}
.t-main:hover{text-decoration:underline}
.t-sub{color:var(--dim);font-size:12px;margin-top:2px}
.t-name{font-weight:600}
.t-num{font-variant-numeric:tabular-nums}
.t-right{text-align:right}
.mono{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:12px}
.copy-btn{
  background:none;border:0;color:var(--dim);cursor:pointer;font-size:11.5px;
  padding:2px 0;display:inline-flex;align-items:center;gap:4px;font-family:inherit;
}
.copy-btn:hover{color:var(--accent-2)}
.icon-btn{
  background:rgba(255,255,255,.05);border:1px solid var(--glass-line);border-radius:9px;
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  color:var(--dim);font-size:14px;transition:all .13s ease;
}
.icon-btn:hover{
  border-color:var(--accent-line);color:var(--accent-2);
  background:var(--accent-soft);
}

/* ============================ status pills ============================ */
.st{
  display:inline-block;border-radius:999px;padding:3px 11px;
  font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;
}
.st-new{background:rgba(150,170,200,.16);color:#c3d2e6;border-color:rgba(150,170,200,.30)}
.st-replacement{background:rgba(255,140,205,.14);color:#ff9fd6;border-color:rgba(255,140,205,.30)}
.st-print{background:rgba(223,168,135,.18);color:#f0c5a8;border-color:rgba(223,168,135,.34)}
.st-with_soni{background:rgba(245,180,82,.15);color:#f5c47c;border-color:rgba(245,180,82,.3)}
.st-at_office{background:rgba(61,220,151,.14);color:#6fe3b4;border-color:rgba(61,220,151,.28)}
.st-to_ship{background:rgba(90,200,250,.14);color:#7fd3f7;border-color:rgba(90,200,250,.28)}
.st-shipped{background:rgba(175,140,255,.16);color:#c3a7ff;border-color:rgba(175,140,255,.3)}
.st-delivered{background:rgba(61,220,151,.18);color:#4ee6a4;border-color:rgba(61,220,151,.34)}
.st-cancelled{background:rgba(255,123,123,.14);color:#ff9b9b;border-color:rgba(255,123,123,.3)}
.st-refunded{background:rgba(255,140,205,.14);color:#ff9fd6;border-color:rgba(255,140,205,.3)}

.chip{
  display:inline-block;background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;font-size:11.5px;color:var(--ink-2);
}
.chip.hot{background:var(--warn-bg);border-color:#f0dcb6;color:var(--warn)}
.counts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ============================ mobile order cards ============================ */
.list{display:flex;flex-direction:column;gap:10px}
/* No blur on list cards on purpose - a phone showing 100 of them would
   have to composite 100 blur layers.  Translucency over the tinted
   background reads as glass on its own. */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid var(--glass-line);border-radius:var(--r);
  padding:13px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.22);
  transition:border-color .13s ease,transform .06s ease,background .13s ease;
}
.card:hover{border-color:rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045))}
.card.click{cursor:pointer}
.card.click:active{border-color:var(--accent);transform:translateY(1px)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-no{font-weight:600;font-size:13.5px;color:var(--accent-2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-price{color:var(--ink);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.card-mid{font-size:12.5px;color:var(--dim);margin-top:3px}
.card-bot{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;align-items:center}
.card-bot .grow{flex:1}
/* 32px of button, 44px of thumb - the card is the phone layout */
.card-bot .icon-btn{width:44px;height:44px;font-size:16px;flex:0 0 auto}
.pick{margin:0;flex:0 0 auto;display:flex;align-items:center}
.pick input{width:17px;height:17px;accent-color:var(--accent-2);margin:0}
.pick-all{gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer;display:flex;align-items:center}

/* A tick box is 17px of paint but a fingertip needs about 44.  Padding the
   LABEL rather than the box keeps the tick the same size on screen while
   giving the thumb something to land on - bulk actions are the whole point
   of the orders list, and they start with this tick. */
.pick,.pick-all{min-height:44px;padding:0 11px;margin:0 -11px}
.pick-all{padding-right:4px;margin-right:0}
@media (hover:hover) and (pointer:fine){
  .pick,.pick-all{min-height:0;padding:0;margin:0}
  .pick-all{gap:8px}
}

/* ============================ selection bar ============================ */
/* The bar sits ABOVE the list, right next to the tick boxes, and stays put
   under the top bar while the list scrolls.  It is a plain dark surface on
   purpose - the colour belongs to the buttons on it, not to the bar. */
.pick-bar{
  position:sticky;top:78px;z-index:26;
  display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap;
  border-radius:var(--r);padding:11px 15px;font-size:13.5px;color:var(--ink);
  background:linear-gradient(180deg,rgba(38,46,60,.94),rgba(26,32,42,.92));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--accent-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.42);
}
.pick-bar b{color:var(--accent-2)}
.pick-bar .grow{flex:1}
@media (max-width:999px){ .pick-bar{top:66px} }

/* ============================ dashboard ============================ */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--glass-hi), var(--shadow);
  transition:border-color .15s ease,transform .1s ease,box-shadow .15s ease;
}
/* the specular streak that makes it read as glass rather than plastic */
.stat::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%);
}
.stat small{color:var(--dim);font-size:12px;display:block}
.stat b{display:block;font-size:24px;margin-top:4px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .foot{font-size:11.5px;color:var(--dim);margin-top:4px}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;margin-bottom:16px}
.two-col > .panel{margin-top:0}

/* a row of "label ....... value" lines with a proportion bar behind it */
.bar-row{position:relative;padding:9px 12px;border-radius:9px;margin-bottom:5px;overflow:hidden}
.bar-row:last-child{margin-bottom:0}
.bar-row .fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:9px;
  background:linear-gradient(90deg,rgba(223,168,135,.30),rgba(223,168,135,.10));
}
.bar-row .txt{position:relative;display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.bar-row .txt b{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .txt i{font-style:normal;color:var(--dim);font-size:11.5px}
.bar-row .txt span{font-weight:700;font-variant-numeric:tabular-nums}
.bar-row.warn .fill{background:linear-gradient(90deg,rgba(245,180,82,.32),rgba(245,180,82,.10))}
.bar-row.ok .fill{background:linear-gradient(90deg,rgba(61,220,151,.28),rgba(61,220,151,.08))}

.mini-row{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px;
}
.mini-row:last-child{border-bottom:0}
.mini-row span{color:var(--dim)}
.mini-row b{font-weight:700;font-variant-numeric:tabular-nums}
.mini-row b.big{font-size:18px}

.stat.click{cursor:pointer}
.stat.click:hover{
  border-color:var(--accent-line);transform:translateY(-2px);
  box-shadow:var(--glass-hi), 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px var(--accent-line);
}
.pos{color:var(--ok)} .neg{color:var(--bad)}
.ok-mark{color:var(--ok)} .warn-mark{color:var(--warn)}

/* ============================ misc ============================ */
.msg{font-size:12.5px;min-height:18px;color:var(--dim)}
.msg.err{color:var(--bad)} .msg.ok{color:var(--ok)}
.empty{text-align:center;color:var(--dim);padding:48px 16px;font-size:13.5px}
.hint{display:block;margin-top:5px;font-size:11.5px;color:var(--gold);line-height:1.45}
.hint.dim{color:var(--dim)}
.sec-title{font-size:12.5px;color:var(--dim);margin:20px 0 9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px}
.row-line{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.row-line + .row-line{margin-top:5px}
.subtabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.subtab{
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  color:var(--ink-2);border:1px solid var(--glass-line);
  border-radius:10px;padding:9px 16px;font:inherit;font-size:13.5px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.subtab.on{
  background:linear-gradient(180deg,rgba(223,168,135,.30),rgba(223,168,135,.14));
  color:#fff;border-color:var(--accent-line);font-weight:600;
}
.note{
  background:linear-gradient(180deg,rgba(223,168,135,.16),rgba(223,168,135,.07));
  border:1px solid var(--accent-line);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  padding:11px 14px;font-size:12.5px;color:var(--ink-2);margin-bottom:14px;
}

/* ============================ sheet view ============================ */
.sheet-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.sheet{border-collapse:collapse;font-size:12.5px;white-space:nowrap;min-width:100%}
table.sheet th,table.sheet td{
  padding:9px 13px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);
  text-align:left;
}
table.sheet th{
  position:sticky;top:0;z-index:2;background:var(--panel-2);color:var(--dim);
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;
  border-bottom:1px solid var(--line);
}
table.sheet tbody tr:hover{background:#fafbfe}
table.sheet td.num{text-align:right;font-variant-numeric:tabular-nums}
table.sheet td.gold{color:var(--ink);font-weight:600}
.grp-basic{background:#eef3ff !important}
.grp-cust{background:#e9f7f0 !important}
.grp-make{background:#fdf5e6 !important}
.grp-ship{background:#eaf2fd !important}

/* ============================ responsive ============================ */
.only-wide{display:none}
@media (min-width:1180px){
  .only-wide{display:block}
  .only-narrow{display:none}
}
@media (max-width:999px){
  .sidebar{
    position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(16,35,74,.18);
  }
  .sidebar.open{transform:none}
  .hamburger{display:block}
  .topbar{padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
  .page{padding:16px 16px 40px}
  .page-title{font-size:17px}
  .scrim{
    position:fixed;inset:0;z-index:55;
    background:rgba(6,9,14,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  }
  input,select,textarea{font-size:16px}   /* stops iOS zooming on focus */
}

/* ============================ toast ============================ */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  z-index:120;opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,rgba(61,220,151,.62),rgba(24,150,100,.55));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 16px 44px rgba(0,0,0,.42);
  transition:opacity .18s ease, transform .18s ease;
  max-width:calc(100vw - 32px);
}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:linear-gradient(180deg,rgba(255,123,123,.62),rgba(170,50,50,.55))}
#toast .tick{font-size:16px}

/* ==================== "saved" popup ====================
   A ring that draws itself and a tick that lands inside it - a jeweller's
   full stop.  It is the one moment in the day worth a small flourish. */
.saved-card{
  max-width:400px;text-align:center;padding:34px 28px 26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
}
.saved-glow{
  position:absolute;inset:-40% -20% auto;height:70%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(223,168,135,.42),transparent 70%);
  filter:blur(16px);
}
.saved-ring{width:104px;height:104px;display:block;margin:0 auto 4px;position:relative}
.saved-ring .ring{
  fill:none;stroke:var(--accent);stroke-width:5;opacity:.55;
  stroke-dasharray:314;stroke-dashoffset:314;
  animation:ringDraw .62s cubic-bezier(.3,.9,.35,1) forwards;
}
.saved-ring .tick{
  fill:none;stroke:var(--accent-2);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:70;stroke-dashoffset:70;
  animation:tickDraw .34s ease-out .42s forwards;
}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes tickDraw{to{stroke-dashoffset:0}}

.saved-emoji{
  font-size:26px;margin-top:-6px;
  animation:pop .4s cubic-bezier(.2,1.5,.4,1) .66s both;
}
@keyframes pop{from{transform:scale(0) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}

.saved-title{margin:8px 0 2px;font-size:21px;font-weight:700;letter-spacing:-.02em}
.saved-no{
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:13px;color:var(--accent-2);word-break:break-all;
}
.saved-line{color:var(--dim);font-size:13px;margin-top:8px;line-height:1.5}
.saved-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:20px}

@media (prefers-reduced-motion:reduce){
  .saved-ring .ring,.saved-ring .tick{animation:none;stroke-dashoffset:0}
  .saved-emoji{animation:none}
}

/* ============================ order popup ============================ */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.modal-back{
  position:absolute;inset:0;background:rgba(6,9,14,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal-card{
  position:relative;width:100%;max-width:820px;max-height:92dvh;
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-hi), 0 30px 80px rgba(0,0,0,.55);
}
.modal-head{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--glass-line);
}
.modal-logo{height:19px;width:auto;display:block}
.modal-body{padding:18px;overflow:auto;flex:1}
.modal-foot{
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  padding:13px 18px;border-top:1px solid var(--glass-line);
  background:rgba(255,255,255,.03);
}

/* --- hero: photo on one side, the specs beside it --- */
.md-hero{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.md-pic{
  flex:0 0 210px;height:210px;border-radius:14px;overflow:hidden;
  border:1px solid var(--glass-line);background:var(--panel-2);
  display:grid;place-items:center;
}
.md-pic img{width:100%;height:100%;object-fit:cover;display:block}
.md-pic span{color:var(--dim);font-size:12px}
.md-specs{flex:1;min-width:230px}
.md-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.md-job{font-size:24px;font-weight:800;letter-spacing:-.02em}
.md-orderno{font-size:12.5px;color:var(--dim);margin-bottom:12px}
.md-spec{
  display:flex;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:13.5px;
}
.md-spec:last-child{border-bottom:0}
.md-spec span{
  flex:0 0 92px;color:var(--dim);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;padding-top:2px;
}
.md-spec b{font-weight:600;min-width:0;word-break:break-word}
.md-spec b.big{font-size:17px;font-weight:700;color:var(--accent-2)}

/* --- blocks --- */
.md-block{
  background:rgba(255,255,255,.045);border:1px solid var(--glass-line);
  border-radius:12px;padding:14px 16px;margin-bottom:14px;
}
.md-block h4{
  margin:0 0 10px;font-size:11px;font-weight:700;color:var(--dim);
  text-transform:uppercase;letter-spacing:.09em;
}
.md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 18px}
.md-kv small{display:block;color:var(--dim);font-size:11px;margin-bottom:1px}
.md-kv b{font-weight:600;font-size:13.5px;word-break:break-word}
.md-addr{white-space:pre-line;font-size:13px;line-height:1.5}

/* --- tracking --- */
.md-track-now{
  display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(223,168,135,.16),rgba(223,168,135,.06));
  border:1px solid var(--accent-line);border-radius:12px;padding:13px 15px;margin-bottom:10px;
}
.md-track-now .dot{
  flex:0 0 9px;height:9px;border-radius:50%;background:var(--accent);margin-top:6px;
  box-shadow:0 0 0 4px rgba(223,168,135,.18);
}
.md-track-now .where{font-size:15px;font-weight:700;line-height:1.3}
.md-track-now .when{font-size:11.5px;color:var(--dim);margin-top:2px}

/* --- history rail --- */
.md-hist{position:relative;padding-left:20px}
.md-hist::before{
  content:'';position:absolute;left:4px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--accent-line),rgba(255,255,255,.06));
}
.md-step{position:relative;padding:0 0 14px}
.md-step:last-child{padding-bottom:0}
.md-step::before{
  content:'';position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;
  background:var(--panel-3);border:2px solid var(--dim);
}
.md-step.done::before{background:var(--accent);border-color:var(--accent)}
.md-step.due::before{background:transparent;border-color:var(--warn)}
.md-step b{display:block;font-size:13.5px;font-weight:600}
.md-step small{color:var(--dim);font-size:11.5px}
.md-step .note{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}

@media (max-width:640px){
  .modal{padding:0}
  .modal-card{max-width:none;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .md-pic{flex:1 1 100%;height:230px}
}

/* ============================ 4x6 label ============================ */
#labelSheet{display:none}
.sheet2{
  width:4in;height:6in;box-sizing:border-box;background:#fff;
  display:flex;flex-direction:column;page-break-after:always;break-after:page;
}
.sheet2 .cut{border-top:1.5px dashed #000;position:relative;height:0}
.sheet2 .cut::after{
  content:'✂';position:absolute;left:.06in;top:-.085in;
  font-size:9pt;background:#fff;padding:0 .04in;color:#000;
}
.label{
  height:3in;padding:.12in .15in;box-sizing:border-box;overflow:hidden;
  background:#fff;color:#000;
  font-family:-apple-system,BlinkMacSystemFont,'InterVar','Segoe UI',sans-serif;
  display:flex;flex-direction:column;
  letter-spacing:-.01em;
}

/* --- top strip: brand on the left, barcode on the right --- */
.label .lbl-top{
  display:flex;align-items:center;gap:.12in;
  padding-bottom:.06in;border-bottom:2px solid #000;
}
.label .lbl-logo{height:.19in;width:auto;flex:0 0 auto}
.label .lbl-bars{flex:1;min-width:0}
.label .lbl-bars svg{width:100%;height:.30in;display:block}

/* --- middle: job number + metal on the left, photo on the right --- */
.label .lbl-mid{
  display:flex;gap:.10in;align-items:flex-start;
  padding:.04in 0 .03in;
}
.label .lbl-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05in}
.label .lbl-job{
  font-size:21pt;font-weight:800;line-height:.92;letter-spacing:-.02em;
}

/* METAL and ENGRAVING share one box style - these are the two things the
   soni must not get wrong, so they are the only boxed items on the label */
.label .lbl-box{
  border:2.5px solid #000;border-radius:.04in;
  padding:.02in .055in .03in;
}
.label .lbl-box small{
  display:block;font-size:6pt;font-weight:700;letter-spacing:.13em;opacity:.7;
}
.label .lbl-box b{
  display:block;font-size:10pt;font-weight:800;line-height:1.1;word-break:break-word;
}
.label .lbl-box.wide{margin-bottom:.035in;max-height:.42in;overflow:hidden}
.label .lbl-box.wide b{font-size:11pt}

/* The product photo is white-on-white against the label, so a plain box
   looked like an empty rectangle with a ring floating in it.  Corner
   brackets frame it the way a viewfinder does: they read as deliberate,
   they use almost no ink, and the white simply becomes the backdrop. */
.label .lbl-pic{
  position:relative;flex:0 0 .88in;height:.88in;
  display:grid;place-items:center;overflow:hidden;background:#fff;padding:.05in;
}
.label .lbl-pic::before,
.label .lbl-pic::after{
  content:'';position:absolute;width:.2in;height:.2in;pointer-events:none;
}
.label .lbl-pic::before{top:0;left:0;border-top:2px solid #000;border-left:2px solid #000}
.label .lbl-pic::after{bottom:0;right:0;border-bottom:2px solid #000;border-right:2px solid #000}
.label .lbl-pic .br{position:absolute;width:.2in;height:.2in;pointer-events:none}
.label .lbl-pic .br.tr{top:0;right:0;border-top:2px solid #000;border-right:2px solid #000}
.label .lbl-pic .br.bl{bottom:0;left:0;border-bottom:2px solid #000;border-left:2px solid #000}
.label .lbl-pic img{
  width:100%;height:100%;object-fit:contain;display:block;
  /* thermal heads only fire black dots - push the contrast so the ring
     still reads once the printer has thrown away all the greys */
  filter:grayscale(1) contrast(1.5) brightness(1.04);
}
.label .lbl-pic span{font-size:7pt;letter-spacing:.06em;opacity:.45}

.label .lbl-note{
  border-top:1.5px dashed #000;margin-top:.03in;padding-top:.03in;
  font-size:7pt;line-height:1.18;max-height:.24in;overflow:hidden;
}
.label .lbl-note small{
  font-weight:800;letter-spacing:.11em;font-size:6pt;margin-right:.05in;
}


/* --- the list: one fact per line --- */
.label .lbl-list{
  margin-top:auto;border-top:1.5px solid #000;padding-top:.04in;
  overflow:hidden;
}
.label .lbl-row{
  display:flex;gap:.06in;align-items:baseline;
  font-size:7.5pt;line-height:1.22;
}
.label .lbl-row::before{content:'•';flex:0 0 auto;font-size:7pt}
.label .lbl-row span{
  flex:0 0 .56in;font-weight:600;text-transform:uppercase;
  font-size:6.2pt;letter-spacing:.07em;opacity:.72;
}
.label .lbl-row b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* "is this order ready to move on" — read from the list, not from inside */
.chip.ok-chip{background:var(--ok-bg,rgba(46,204,113,.14));color:var(--ok,#2ecc71)}
.chip.need-chip{
  background:var(--warn-bg);color:var(--warn);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* the arrow that moves one order on, without ticking anything */
.row-acts{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.icon-btn.go-one{
  border-color:var(--accent-line);color:var(--accent);font-weight:700;
}
.icon-btn.go-one:hover{background:var(--accent);color:#1a1108}

/* ------------- handing a batch to the soni, one at a time ------------- */
.wa-row{
  display:flex;align-items:center;gap:12px;padding:11px 4px;
  border-bottom:1px solid var(--line-2);
}
.wa-row:last-child{border-bottom:0}
.wa-row.sent{opacity:.4}
.wa-row.sent .wa-txt b{color:var(--ok,#2ecc71)}
/* the one to press next — the whole row leans forward, so on a phone the
   thumb lands in the same place every time without reading anything */
.wa-row.now{
  background:linear-gradient(90deg,rgba(223,168,135,.11),transparent 70%);
  border-radius:12px;margin:0 -6px;padding-left:10px;padding-right:10px;
}
.wa-row .btn{min-width:104px;justify-content:center}
@media (max-width:560px){
  .wa-row{padding:13px 4px}
  .wa-row .btn{min-width:92px;padding:11px 12px}
}
.wa-pic{
  flex:0 0 52px;height:52px;border-radius:10px;overflow:hidden;
  background:#fff;display:grid;place-items:center;
}
.wa-pic img{width:100%;height:100%;object-fit:contain}
.wa-pic span{font-size:9px;color:#888;text-align:center;line-height:1.2}
.wa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wa-txt b{font-size:14px}
.wa-txt small{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-txt small.dim{color:var(--dim)}

/* the pictures on offer: ticked ones go to the soni, ★ is the label one */
.pic-picker button{position:relative}
.pic-picker button i{
  position:absolute;right:3px;bottom:3px;
  min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--accent);color:#1a1108;
  font:700 9.5px/15px system-ui,sans-serif;font-style:normal;text-align:center;
}
.pic-picker button:not(.on){opacity:.4}
.pic-picker button:not(.on):hover{opacity:.75}

/* ---------------- Amazon PDF import preview ---------------- */
.imp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.imp-tbl th{
  text-align:left;padding:8px 10px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line);
}
.imp-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.imp-tbl td small{display:block;color:var(--ink-2);font-size:11px;margin-top:2px}
.imp-tbl tr.dup td{opacity:.45;text-decoration:line-through}
.imp-tbl tr.dup td small{text-decoration:none}

/* ================= shipping label: one 4x6, address ONLY ================
   Stuck straight on the parcel.  By instruction it carries nothing but
   the address - the packer writes the customer's name on the box while
   packing and matches this label to it, so the name is the join and any
   order number or barcode would be noise.  SHIP TO first, country last. */
.ship-sheet{
  width:4in;height:6in;box-sizing:border-box;background:#fff;color:#000;
  padding:.25in .28in;display:flex;flex-direction:column;justify-content:center;
  /* everything bold and generously sized, by instruction: this is read at
     a packing table and a mistake here is a parcel in the wrong state.
     No negative tracking - tight letters cost legibility on thermal print */
  font-family:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:800;font-variant-numeric:lining-nums;
  page-break-after:always;break-after:page;
}
.ship-to{overflow:hidden}
.ship-to small{font-size:10pt;font-weight:800;letter-spacing:.2em}
.ship-name{display:block;font-size:23pt;font-weight:800;line-height:1.08;margin:.09in 0 .08in;word-break:break-word}
.ship-addr{font-size:17pt;font-weight:800;line-height:1.32;word-break:break-word}
.ship-country{font-size:19pt;font-weight:800;margin-top:.09in;letter-spacing:.05em}

@media print{
  body{background:#fff}
  body > *:not(#labelSheet){display:none !important}
  #labelSheet{display:block !important}
  @page{size:4in 6in;margin:0}
}

/* ============================ Listing Desk ============================ */
.ld-colours{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ld-colour-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px;margin-bottom:6px}
.ld-drop{width:auto;height:auto;min-height:96px;padding:12px}
.ld-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;min-height:20px}
.ld-none{font-size:11.5px;color:var(--dim)}
.ld-thumb{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;background:#fff;border:1.5px solid var(--glass-line)}
.ld-thumb.main{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ld-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.ld-slot{position:absolute;left:0;bottom:0;right:0;font-size:10px;font-weight:700;text-align:center;padding:2px 0;background:rgba(15,19,25,.72);color:#fff}
.ld-x,.ld-mk{position:absolute;top:2px;width:20px;height:20px;border-radius:6px;border:0;cursor:pointer;font-size:11px;line-height:20px;padding:0;background:rgba(15,19,25,.78);color:#fff}
.ld-x{right:2px} .ld-mk{left:2px;color:var(--accent)}
.ld-err{margin-top:6px;line-height:1.5}
.ld-variations{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.ld-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.ld-axis{padding:10px 12px;border:1px solid var(--glass-line);border-radius:10px}
.ld-axis-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ld-all{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--ink-2)} .ld-all input{width:auto;margin:0}
.ld-checks{display:flex;flex-wrap:wrap;gap:6px}
.ld-check{display:flex;align-items:center;gap:5px;margin:0;padding:4px 8px;border:1px solid var(--glass-line);border-radius:999px;font-size:12px;cursor:pointer;color:var(--ink)}
.ld-check input{width:auto;margin:0}
.ld-check.on{border-color:var(--accent);background:var(--accent-soft)}
.ld-axis .ld-radio{margin-top:6px}
.ld-plan{margin-top:10px;font-size:12.5px}
.ld-plan .ld-toobig{margin-top:8px;padding:8px 10px;border:1px solid rgba(255,90,90,.45);border-radius:8px;background:rgba(255,90,90,.08);font-weight:600}
.ld-plan.over b, .ld-plan .err{color:var(--bad)}
.ld-radio{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid var(--glass-line);border-radius:10px;cursor:pointer;color:var(--ink)}
.ld-radio input{width:auto;margin:3px 0 0}
.ld-radio b{display:block;font-size:13px}
.ld-radio span{display:block;font-size:11px;margin-top:2px}
.ld-progress{display:flex;align-items:center;gap:14px;margin-top:14px}
.ld-bar{flex:1;height:10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.ld-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),#f0c9a8);transition:width .6s ease}
.ld-progress.done .ld-fill{background:var(--ok)}
.ld-progress.failed .ld-fill{background:var(--bad)}
.msg.warn{color:var(--warn)}
.ld-pct{min-width:48px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.ld-sum{font-size:13px;margin-bottom:10px;color:var(--ink-2)}
.ld-line-sum{font-size:12.5px;line-height:1.55;margin-bottom:8px}
.ld-card{margin-bottom:10px} .ld-card-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.ld-acc{margin-bottom:10px}
.tbl-wrap{overflow:auto;border:1px solid var(--glass-line);border-radius:var(--r)}