/* =====================================================================
   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);

  /* ---- type scale ----
     Sizes used to be picked one at a time - 13.5, 12.5, 11.5, 10.5 - and no two
     screens agreed. These eight steps are the whole scale now, so a label is the
     same size wherever it appears and the eye can rank a screen at a glance.
     Numbers everywhere are tabular: in a column of prices and dates, digits that
     do not line up are the single thing that makes a table look untidy. */
  --t-micro:11px;    /* pill counts, footnotes           */
  --t-small:12px;    /* labels, secondary lines          */
  --t-body:13px;     /* table text, dense body           */
  --t-base:14px;     /* forms, paragraphs                */
  --t-lead:16px;     /* panel titles                     */
  --t-h2:19px;       /* page title                       */
  --t-h1:24px;       /* login, big figures               */
  --t-display:30px;  /* the one number a screen is about */
  --lh-tight:1.25;
  --lh-body:1.5;
  --lh-dense:1.45;
  --track-caps:.10em;   /* uppercase needs air            */
  --track-tight:-0.015em;

  /* ---- spacing ---- one 4px ladder, nothing in between */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* ---- surfaces ----
     The glass is now kept for the few things that float ABOVE a still page -
     the sign-in card and the modals.  Everything that scrolls, repeats or
     sticks got a flat surface instead: a backdrop blur has to be re-sampled
     every single frame that moves underneath it, and with 53 of them on screen
     that was most of the cost of a scroll. */
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);
  --glass-line:rgba(255,255,255,.10);
  /* none, deliberately.  Every surface still declares it, so turning the blur
     back on anywhere is one word - but on a page that scrolls it buys nothing
     the tint below does not already give, and costs a re-sample per frame. */
  --glass-blur:none;
  /* the two surfaces that really do float over a page that is standing still */
  --glass-float:blur(20px) saturate(140%);
  --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);
  /* flat stand-ins, matched to how the glass used to read over the background */
  --surface:#161b24;
  --surface-2:#1b212c;
  --surface-hi:inset 0 1px 0 rgba(255,255,255,.055);
  --hairline:rgba(255,255,255,.075);
}

/* The warmth behind everything.  It used to be four saturated washes run
   through filter:blur(34px) - a full-screen layer the compositor had to blur
   again on every frame.  A radial gradient is already soft, so the blur was
   paying for something the gradient gives away: the stops are simply wider
   now and the filter is gone.  Two washes instead of four, and only near the
   top, so the page reads as one room lit from the window rather than a
   light-show. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58rem 38rem at 14% -6%, rgba(223,168,135,.16), transparent 70%),
    radial-gradient(52rem 34rem at 88% -4%, rgba(158,130,255,.11), transparent 72%);
}

.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{
  /* flat colour: background-attachment:fixed makes the browser re-draw the
     whole painted background on every scroll frame, and the warmth is already
     handled by the fixed ::before layer above */
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'InterVar','Noto Sans Gujarati',
              'Gujarati Sangam MN','Segoe UI',system-ui,sans-serif;
  font-size:var(--t-base);line-height:var(--lh-body);
  letter-spacing:-0.006em;              /* the tight SF look */
  font-variant-numeric:tabular-nums;    /* digits line up in every column */
  -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:var(--track-tight);line-height:var(--lh-tight)}
/* Gujarati sits optically smaller than Inter at the same px, so it is nudged
   up rather than left looking like fine print next to the English beside it */
:lang(gu){font-size:1.04em;line-height:1.6}
.hidden{display:none !important}
a{color:var(--accent-2)}
::selection{background:rgba(223,168,135,.32)}

/* A scrollbar that is part of the furniture instead of a grey pipe.  The
   gutter is reserved so nothing shifts sideways the moment a list grows past
   one screen, and the thumb had a bug: #39445600 is eight digits, which is
   fully transparent - the thumb vanished the moment you pointed at it. */
html{scrollbar-gutter:stable}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:#333c4b;border-radius:99px;border:3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{background:#4a5568}
*{scrollbar-width:thin;scrollbar-color:#333c4b transparent}

/* Momentum stays inside the thing being scrolled: reaching the end of the
   sidebar or a table no longer starts dragging the page behind it. */
.nav,.page,.modal-card{overscroll-behavior:contain}
/* A table wrapper scrolls SIDEWAYS - the report's table is 1,180 px wide - and has nothing to
   scroll up and down.  Containing both axes therefore swallowed the wheel: with the pointer over
   the report the page would not move at all, because the browser handed the scroll to a container
   that had nowhere to go and was told not to pass it on.  Sideways stays contained, up and down
   goes back to the page. */
.tbl-wrap{overscroll-behavior-x:contain;overscroll-behavior-y:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================ 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-float);backdrop-filter:var(--glass-float);
  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}
/* the quiet card shown while a saved session is checked on a refresh */
.boot-card{display:grid;justify-items:center;gap:18px;opacity:0;animation:bootIn .35s ease .15s forwards}
.boot-bar{width:160px;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.boot-bar i{display:block;width:40%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#f0c9a8);animation:bootSlide 1.1s ease-in-out infinite}
@keyframes bootIn{to{opacity:1}}
@keyframes bootSlide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}

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

/* Solid, not see-through.  A sticky panel that the page slides under has to be
   opaque or the rows show through it; it used to hide that with a blur, and a
   blur over moving content is the most expensive thing on the screen. */
.sidebar{
  width:var(--sidebar);flex:0 0 var(--sidebar);
  background:linear-gradient(180deg,#191f29,#141922);
  border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;
  contain:layout paint;
}
.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:10px;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:var(--s2) var(--s3) var(--s4);overflow-y:auto;flex:1}
.nav-label{
  font-size:10px;font-weight:700;letter-spacing:var(--track-caps);color:#6f7c90;
  text-transform:uppercase;padding:18px 10px 6px;
}
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:0;border-radius:9px;
  padding:9px 11px;font:inherit;font-size:var(--t-body);color:var(--ink-2);
  cursor:pointer;text-align:left;margin-bottom:1px;
  transition:background .12s ease,color .12s ease;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--ink)}
/* the same gold rail as the table row, so "where I am" is one mark
   everywhere in the app rather than a different treatment per screen */
.nav-item.on{background:rgba(255,255,255,.07);color:#fff;font-weight:600}
.nav-item.on::before{
  content:'';position:absolute;left:-5px;top:7px;bottom:7px;
  width:2px;border-radius:2px;background:var(--accent);
}
.nav-item .ic{width:18px;text-align:center;flex:0 0 auto;font-size:15px;opacity:.85}
.nav-item.on .ic{opacity:1}
.nav-item .badge{
  margin-left:auto;background:rgba(255,255,255,.07);color:var(--ink-2);
  border-radius:999px;padding:1px 8px;font-size:var(--t-micro);font-weight:600;
  font-variant-numeric:tabular-nums;
}
.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:10px;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:12px;
  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:12px;
  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:12px;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:#141922;
  border-bottom:1px solid var(--hairline);
  padding:var(--s4) var(--s6);display:flex;align-items:center;gap:var(--s3);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:var(--t-h2);font-weight:650;margin:0;line-height:var(--lh-tight)}
.crumb{font-size:var(--t-small);color:var(--dim);margin-top:2px}
.topbar .spacer{flex:1}
.top-actions{display:flex;gap:var(--s2);flex-wrap:wrap}

/* No max-width.  A reading measure is right for prose and wrong for this:
   the desk is a wide table and a wide list, and capping the page left a bare
   strip down the right of a 1920 screen while the columns were squeezed. */
.page{padding:var(--s6) var(--s6) 48px;flex:1;width:100%;min-width:0}

/* ============================ tabs ============================ */
.tabs{
  display:flex;gap:2px;border-bottom:1px solid var(--hairline);
  margin-bottom:var(--s5);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 15px;font:inherit;font-size:var(--t-body);color:var(--dim);cursor:pointer;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  transition:color .12s ease;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tab .n{
  background:rgba(255,255,255,.07);border:0;border-radius:999px;
  padding:1px 7px;font-size:var(--t-micro);font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tab.on .n{background:var(--accent-soft);color:var(--accent-2)}
.tab .n.hot{background:var(--warn-bg);color:var(--warn)}

/* ============================ cards / panels ============================ */
/* A panel is a surface, not a pane of glass: one flat tint, one hairline, one
   soft shadow.  Three stacked effects per box is what made every screen feel
   busy, and the shadow was two shadows on 142 elements. */
.panel{
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  overflow:hidden;
  contain:layout paint style;
}
.panel + .panel{margin-top:var(--s4)}
.panel-head{
  padding:var(--s4) 18px;border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.panel-head h3{margin:0;font-size:var(--t-lead);font-weight:650;letter-spacing:var(--track-tight)}
.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(--hairline);border-radius:var(--r);
  padding:18px var(--s5);margin:0 0 var(--s4);
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  box-shadow:0 1px 2px rgba(0,0,0,.28);
}
legend{
  padding:0 var(--s2);font-size:10px;color:var(--accent-2);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-caps);
}
.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:12px}
.pic-tip{font-size:10px;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:12px;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:10px;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:var(--t-body);
  /* opaque: it sticks, so rows travel underneath it */
  background:linear-gradient(180deg,#3a2f1e,#2e2718);
  border:1px solid rgba(245,180,82,.40);color:#f7cd8e;
  box-shadow:0 8px 24px rgba(0,0,0,.38);
}
.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:13px;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:12px}
.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}
/* The header stays put while the rows travel, so a column can still be named
   forty rows down.  It is opaque for the same reason the top bar is. */
table.grid-tbl th{
  text-align:left;font-weight:600;font-size:var(--t-micro);color:var(--dim);
  text-transform:uppercase;letter-spacing:var(--track-caps);
  padding:11px 14px;white-space:nowrap;
  position:sticky;top:0;z-index:4;
  background:#1a202a;
  border-bottom:1px solid var(--hairline);
}
table.grid-tbl td{
  padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:top;
  line-height:var(--lh-dense);
}
/* The rail: a hairline of gold down the left edge of the row under the
   pointer, instead of washing the whole row in colour.  It is the one mark
   this desk uses for "this is the one you mean" - the same rail marks the
   open page in the sidebar - and it costs a single inset shadow to paint. */
table.grid-tbl tbody tr{box-shadow:inset 2px 0 0 transparent}
table.grid-tbl tbody tr:hover{
  background:rgba(255,255,255,.035);
  box-shadow:inset 2px 0 0 var(--accent);
}
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:var(--t-small);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:11px;
  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:11px;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:11px;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. */
/* The phone list.  content-visibility lets the browser skip laying out and
   painting the cards that are off screen and, with an intrinsic height given
   for them, still reserve the right amount of room so the scrollbar does not
   jump.  This is what keeps a list of several hundred orders scrolling at the
   full frame rate on a phone instead of stuttering every few rows. */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  border:1px solid var(--hairline);border-radius:var(--r);
  padding:13px 15px;
  box-shadow:inset 2px 0 0 transparent;
  transition:border-color .13s ease,background .13s ease,box-shadow .13s ease;
  content-visibility:auto;
  /* measured, not guessed: a card is 197px tall on a phone.  An estimate that
     is too small makes the scrollbar shrink as you travel down the list. */
  contain-intrinsic-size:auto 197px;
}
.card:hover{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
  box-shadow:inset 2px 0 0 var(--accent);
}
.card.click{cursor:pointer}
.card.click:active{border-color:var(--accent)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-no{font-weight:600;font-size:var(--t-body);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:var(--t-small);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:12px;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:var(--t-body);color:var(--ink);
  background:linear-gradient(180deg,#262e3c,#1a202a);   /* opaque: it sticks */
  border:1px solid var(--accent-line);
  box-shadow:0 8px 24px 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(176px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
/* The figure is the whole point of the card, so it is the only thing given
   any size: a small upright label above it, the number large and tabular, the
   explanation quiet underneath.  Ranking by size instead of by colour is what
   lets the row be read in one glance. */
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border:1px solid var(--hairline);border-radius:var(--r);
  padding:var(--s4) 18px var(--s4);
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  transition:border-color .15s ease,background .15s ease;
}
.stat small{
  color:var(--dim);font-size:10px;display:block;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-caps);
}
.stat b{
  display:block;font-size:var(--t-display);margin-top:6px;font-weight:620;
  line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.stat .foot{font-size:var(--t-small);color:var(--dim);margin-top:6px}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.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:13px}
.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:11px}
.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:13px;
}
.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);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055));
}
.pos{color:var(--ok)} .neg{color:var(--bad)}
.ok-mark{color:var(--ok)} .warn-mark{color:var(--warn)}

/* ============================ misc ============================ */
.msg{font-size:12px;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:13px}
.hint{display:block;margin-top:5px;font-size:11px;color:var(--gold);line-height:1.45}
.hint.dim{color:var(--dim)}
.sec-title{font-size:12px;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:rgba(255,255,255,.05);
  color:var(--ink-2);border:1px solid var(--hairline);
  border-radius:10px;padding:8px 15px;font:inherit;font-size:var(--t-body);cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.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:12px;color:var(--ink-2);margin-bottom:14px;
}

/* ===================== the order row =====================
   Seller Central's Manage Orders shape: date · picture · who · what · where
   it has got to · what to do.  It is a grid, so the columns line up down the
   whole list the way a table's would, and it collapses to a stack on a phone
   without a second layout to maintain. */
.am-row{
  display:grid;align-items:start;gap:0 var(--s3);
  grid-template-columns:auto 128px 56px minmax(180px,1.1fr) minmax(190px,1.3fr) minmax(150px,1fr) auto;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
  border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:inset 2px 0 0 transparent;
  transition:background .12s ease,box-shadow .12s ease,border-color .12s ease;
  content-visibility:auto;contain-intrinsic-size:auto 96px;
}
.am-row:hover{background:rgba(255,255,255,.075);box-shadow:inset 2px 0 0 var(--accent)}
.am-row.late{box-shadow:inset 2px 0 0 var(--bad)}
.am-tick{align-self:center}
.am-when,.am-who,.am-what{display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer}
.am-when b,.am-who b,.am-what b{font-size:var(--t-body);font-weight:600}
.am-when span,.am-who span,.am-what span{font-size:var(--t-small);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-who b{color:var(--accent-2)}
.am-what a{font-size:var(--t-small);text-decoration:none}
.am-what a:hover{text-decoration:underline}
.am-pic,.am-pic-none{width:56px;height:56px;border-radius:9px;display:block}
.am-pic{object-fit:cover;background:#fff}
.am-pic-none{display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--dim);font-size:18px}
.am-state{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;min-width:0}
.am-state .chip.mono{font-family:ui-monospace,Consolas,monospace;font-size:10px}
.am-price{font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto}
.am-do{display:flex;gap:6px;align-items:center}
#orderList{display:grid;gap:8px}

@media (max-width:1100px){
  .am-row{grid-template-columns:auto 56px 1fr auto;row-gap:var(--s2)}
  .am-when{grid-column:3/5;flex-direction:row;gap:10px;align-items:baseline;flex-wrap:wrap}
  .am-who{grid-column:3/5}
  .am-what{grid-column:2/5}
  .am-state{grid-column:1/5}
  .am-do{grid-column:4;grid-row:1}
  .am-do .icon-btn{width:44px;height:44px;font-size:16px}
}

/* ===================== today's job / the report ======================
   The bar at the very top of the dashboard is the reminder: it only turns
   up when something actually has to leave the building today, so it never
   becomes furniture people stop reading. */
.today-bar{
  border:1px solid rgba(245,180,82,.42);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(245,180,82,.16),rgba(245,180,82,.07));
  padding:var(--s4) 18px;margin-bottom:var(--s5);
}
.today-bar.calm{
  border-color:rgba(61,220,151,.34);
  background:linear-gradient(180deg,rgba(61,220,151,.13),rgba(61,220,151,.05));
}
.today-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--s2)}
.today-head b{font-size:var(--t-lead);letter-spacing:var(--track-tight)}
.today-head .when{color:var(--dim);font-size:var(--t-small);margin-left:auto}
.today-list{display:grid;gap:6px}
.today-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 11px;border-radius:9px;background:rgba(0,0,0,.22);
  font-size:var(--t-body);cursor:pointer;
}
.today-row:hover{background:rgba(0,0,0,.34)}
.today-row .job{font-weight:600;color:var(--accent-2);min-width:64px}
.today-row .who{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-row .tag{font-size:var(--t-micro);padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.09)}
.today-row .tag.bad{background:var(--bad-bg);color:var(--bad)}
.today-more{margin-top:var(--s2);font-size:var(--t-small);color:var(--dim)}

.rep-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s6) 0 var(--s3)}
.rep-head .subtabs{margin-left:auto}

/* ============================ sheet view ============================
   The old Google Sheet, but dark.  Everything here used to be a leftover
   from when the app was light: the hover was #fafbfe and the four group
   headers were pale blues and creams with !important on them, so pointing
   at a row turned it white and unreadable.
   Three things make it read like a spreadsheet rather than a web table:
   a line on every side of every cell, a header that stays put, and the
   first three columns frozen so a row can still be named forty columns
   to the right.                                                        */
.sheet-shell{
  height:calc(100dvh - 210px);min-height:420px;
  border:1px solid var(--hairline);border-radius:var(--r);
  background:var(--surface);overflow:hidden;
}
.sheet-wrap{
  height:100%;overflow:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
table.sheet{border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap;min-width:100%}
table.sheet th,table.sheet td{
  padding:8px 12px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.085);
  border-right:1px solid rgba(255,255,255,.085);
}
table.sheet th{
  position:sticky;top:0;z-index:3;background:#1e242f;color:var(--ink-2);
  font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:var(--track-caps);
  border-bottom:1px solid rgba(255,255,255,.18);
}
/* frozen first columns - the spreadsheet's own freeze panes */
table.sheet th:nth-child(-n+3),
table.sheet td:nth-child(-n+3){position:sticky;z-index:2;background:#191f29}
table.sheet th:nth-child(1),table.sheet td:nth-child(1){left:0;width:44px;min-width:44px;color:var(--dim)}
table.sheet th:nth-child(2),table.sheet td:nth-child(2){left:44px}
table.sheet th:nth-child(3),table.sheet td:nth-child(3){left:136px;border-right:1px solid rgba(255,255,255,.22)}
table.sheet th:nth-child(-n+3){z-index:4}

/* the row colours they already use on the sheet, kept as a left bar plus a
   wash so the colour reads even on the frozen columns */
table.sheet tbody tr td:first-child{box-shadow:inset 3px 0 0 transparent}
table.sheet tr.sh-delivered td{background:rgba(61,220,151,.17)}
table.sheet tr.sh-delivered td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
table.sheet tr.sh-transit  td{background:rgba(245,180,82,.17)}
table.sheet tr.sh-transit  td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.sheet tr.sh-ready    td{background:rgba(88,166,255,.17)}
table.sheet tr.sh-ready    td:first-child{box-shadow:inset 3px 0 0 #58a6ff}
table.sheet tr.sh-making   td{background:rgba(255,255,255,.025)}
table.sheet tr.sh-making   td:first-child{box-shadow:inset 3px 0 0 #6f7c90}
table.sheet tr.sh-dead     td{background:rgba(255,123,123,.16);color:var(--dim)}
table.sheet tr.sh-dead     td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
table.sheet tr.sh-late     td{background:rgba(255,123,123,.13)}
table.sheet tr.sh-late     td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
/* the frozen columns paint over the wash, so they carry it themselves */
table.sheet tr.sh-making    td:nth-child(-n+3){background:#1c222c}
table.sheet tr.sh-delivered td:nth-child(-n+3){background:#1c3329}
table.sheet tr.sh-transit   td:nth-child(-n+3){background:#342b18}
table.sheet tr.sh-ready     td:nth-child(-n+3){background:#1b2738}
table.sheet tr.sh-late      td:nth-child(-n+3){background:#32211f}
table.sheet tr.sh-dead      td:nth-child(-n+3){background:#361f1f}

table.sheet tbody tr:hover td{background:rgba(255,255,255,.07)}
table.sheet tbody tr:hover td:nth-child(-n+3){background:#252c38}
table.sheet td.num{text-align:right;font-variant-numeric:tabular-nums}
table.sheet td.gold{color:var(--ink);font-weight:600}
table.sheet td a{color:var(--accent-2)}
.sh-pic{width:34px;height:34px;border-radius:6px;object-fit:cover;background:#fff;display:block}
.sh-pic-none{width:34px;height:34px;border-radius:6px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);color:var(--dim);font-size:13px}

/* the legend, so the colours are not a secret */
.sheet-key{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--dim);margin-bottom:10px}
.sheet-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* ============================ 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:16px}
  .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:var(--t-base);font-weight:600;color:#fff;
  background:linear-gradient(180deg,#2f9d70,#1f7a55);
  -webkit-backdrop-filter:var(--glass-float);backdrop-filter:var(--glass-float);
  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:24px;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:20px;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(38,44,56,.97),rgba(26,31,40,.97));
  -webkit-backdrop-filter:var(--glass-float);backdrop-filter:var(--glass-float);
  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:12px;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:13px;
}
.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:16px;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:13px;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:11px;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:13px;font-weight:600}
.md-step small{color:var(--dim);font-size:11px}
.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:11px;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}


/* ================= 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:11px;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-needtag{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-left:auto}
.ld-colour.need .ld-needtag{background:var(--warn-bg);color:var(--warn)}
.ld-colour.need .ld-drop{border-color:var(--warn)}
.ld-colour.spare{opacity:.5} .ld-colour.spare .ld-needtag{background:var(--panel-2);color:var(--dim)}
#page-listing.busy fieldset{pointer-events:none;opacity:.55;transition:opacity .3s}
.ld-eta{margin-top:6px;font-size:12px}
.ld-seen{display:block;margin:0 0 12px;padding:10px 12px;border:1px solid var(--warn);border-radius:10px;background:var(--warn-bg);font-size:13px;line-height:1.5}
.ld-result .panel-head h3{color:var(--ok)}
.ld-steps{margin:14px 0 0;padding-left:22px;display:grid;gap:12px;font-size:13px;line-height:1.5}
.ld-steps li::marker{font-weight:700;color:var(--accent)}
.ld-steps .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ld-variations{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.ld-shape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px}
.ld-shape label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;white-space:nowrap} .ld-shape select{max-width:320px}
.ld-shape .hint{margin:0}
.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:12px;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:12px}
.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:12px;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}
/* listing report */
#page-listingReport .stat-row{margin-bottom:14px}
#page-listingReport .two-col{margin-bottom:6px}
#page-listingReport .two-col .panel .bar-row .txt{font-size:13px}
table.ld-rep{min-width:1180px}
table.ld-rep td:nth-child(2){min-width:120px} table.ld-rep td:nth-child(3){min-width:120px} table.ld-rep td:nth-child(4){min-width:100px} table.ld-rep td:nth-child(5){min-width:130px} table.ld-rep td:nth-child(7){min-width:60px}
table.ld-rep td.ld-titles{min-width:360px;max-width:520px;font-size:12px;line-height:1.5}
.ld-title-line{display:flex;gap:6px;align-items:flex-start;margin-bottom:3px} .ld-title-line .chip{flex:none;font-size:10px;padding:1px 7px}
.ld-rep-detail td{background:rgba(223,168,135,.05);padding:14px 18px 18px}
.ld-detail-box{font-size:13px;line-height:1.55}
.ld-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px;margin-bottom:10px}
.ld-detail-sec{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.ld-detail-sec ol{margin:4px 0 0;padding-left:20px}
.ld-copy{margin-top:12px;padding:12px 14px;border:1px solid var(--glass-line);border-radius:10px}
.ld-copy h4{margin:0 0 6px;font-size:13px;color:var(--accent-2)}
.ld-copy ol{margin:8px 0;padding-left:20px} .ld-copy li{margin-bottom:5px}
.ld-copy .ld-desc p{margin:0 0 6px;color:var(--ink-2)}
.ld-detail{max-width:560px;white-space:normal;word-break:break-word}
.ld-thumb-img{display:block;border-radius:8px;background:#fff;object-fit:cover;border:1px solid var(--glass-line)}
table.ld-rep td.ld-pic{width:64px;min-width:64px;padding-right:0}
.ld-detail-pic{float:right;margin:0 0 10px 16px} .ld-detail-pic .ld-thumb-img{border-radius:12px}
.ld-card.has-pic{display:grid;grid-template-columns:72px 1fr;gap:4px 14px;align-items:start}
.ld-card.has-pic .ld-thumb-img{grid-row:1 / span 3}
/* photo prep */
.pp-grid{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(240px,1fr);gap:14px;margin-top:12px}
@media (max-width:760px){.pp-grid{grid-template-columns:1fr}}
.pp-drop{min-height:170px;border:2px dashed var(--accent-line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;background:var(--glass);transition:border-color .15s,background .15s}
.pp-drop:hover,.pp-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.pp-drop-in b{display:block;font-size:15px;margin-bottom:4px} .pp-drop-in span{font-size:12px;color:var(--dim)}
.pp-opts{display:grid;gap:8px;align-content:start} .pp-opts label{display:block;font-size:12px} .pp-opts select{width:100%;margin-top:3px}
.pp-opts .ld-check{display:flex;width:fit-content}
.pp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.pp-item{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;padding:8px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass)}
.pp-item img,.pp-ph{width:96px;height:96px;border-radius:8px;background:#fff;object-fit:contain;border:1px solid var(--glass-line)}
.pp-item.failed{border-color:rgba(255,90,90,.45)}
.pp-meta{min-width:0;font-size:12px;display:grid;gap:2px} .pp-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-act{display:grid;gap:6px}
.ld-log summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.ld-log summary::before{content:'▸';font-size:11px} .ld-log[open] summary::before{content:'▾'}
.tbl-wrap{overflow:auto;border:1px solid var(--glass-line);border-radius:var(--r)}