:root{
  --navy:#101E33;        /* Midnight Navy */
  --navy-2:#182A47;
  --gold:#C9A227;        /* Champagne Gold */
  --gold-soft:#E4CE8F;
  --ivory:#FAF6EE;       /* Ivory */
  --ink:#22293A;
  --mut:#6B7280;
  --line:#E5DFD2;
  --green:#1F7A4D; --red:#B3372E; --amber:#9A6B00; --blue:#2B5AA5; --grey:#6B7280;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Montserrat',system-ui,sans-serif;background:var(--ivory);color:var(--ink);display:flex;min-height:100vh;font-size:14px}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:var(--navy);margin:0 0 .5rem}
h1{font-size:1.7rem}h2{font-size:1.2rem;margin-top:1.6rem}
a{color:var(--blue)}
main{flex:1;padding:28px 34px;max-width:1200px}

/* sidebar */
.side{width:225px;background:var(--navy);color:#DCE3F0;display:flex;flex-direction:column;padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center;padding:0 18px 18px;border-bottom:1px solid rgba(201,162,39,.25)}
.brand-mark{width:38px;height:38px;border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:1.3rem;border-radius:2px}
.brand-name{font-family:'Playfair Display',serif;font-size:1.15rem;color:#fff;letter-spacing:.06em}
.brand-sub{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
nav{flex:1;padding:10px 0}
nav a{display:flex;align-items:center;gap:8px;color:#C6CFDE;text-decoration:none;padding:10px 18px;font-size:.88rem}
nav a:hover{background:var(--navy-2);color:#fff}
nav a.on{background:var(--navy-2);color:#fff;border-left:3px solid var(--gold);padding-left:15px}
.nav-group{padding:14px 18px 4px;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#7C8AA5}
.pill{background:var(--gold);color:var(--navy);border-radius:9px;font-size:.68rem;font-weight:700;padding:1px 7px;margin-left:auto}
.user-box{padding:12px 18px;border-top:1px solid rgba(201,162,39,.25)}
.user-box label{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:#7C8AA5}
.user-row{display:flex;gap:6px;margin-top:5px}
.user-box input{flex:1;min-width:0;background:var(--navy-2);border:1px solid #2A3D5F;color:#fff;padding:6px 8px;border-radius:3px;font-size:.8rem}
.user-box button{background:var(--gold);border:0;color:var(--navy);font-weight:700;border-radius:3px;padding:0 10px;cursor:pointer}

/* cards / tables / forms */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px}
.card .num{font-family:'Playfair Display',serif;font-size:1.7rem;color:var(--navy)}
.card .lbl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:2px}
.panel{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px;margin:14px 0}
table{width:100%;border-collapse:collapse;background:#fff}
th{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:#FCF9F1}
.badge{display:inline-block;padding:2px 9px;border-radius:10px;font-size:.72rem;font-weight:600;white-space:nowrap}
.badge.green{background:#E3F2E9;color:var(--green)}
.badge.red{background:#F9E4E2;color:var(--red)}
.badge.amber{background:#F7EDD3;color:var(--amber)}
.badge.blue{background:#E3EBF7;color:var(--blue)}
.badge.grey{background:#ECECEC;color:var(--grey)}
form.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
input,select,textarea{font-family:inherit;font-size:.85rem;padding:7px 9px;border:1px solid var(--line);border-radius:4px;background:#fff}
input:focus,select:focus,textarea:focus,button:focus{outline:2px solid var(--gold);outline-offset:1px}
button,.btn{font-family:inherit;font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:4px;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--navy-2)}
button.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
button.ghost,.btn.ghost{background:#fff;color:var(--navy)}
button.danger{background:#fff;border-color:var(--red);color:var(--red)}
button.sm,.btn.sm{padding:4px 9px;font-size:.76rem}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.form-grid label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.form-grid input,.form-grid select{width:100%}
.flash{background:var(--navy);color:var(--gold-soft);padding:10px 16px;border-radius:5px;margin-bottom:14px}
.mut{color:var(--mut);font-size:.8rem}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.82rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}.side{width:180px}}

/* piece timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--line);margin-left:8px}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:'';position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--ivory)}
.timeline .t-action{font-weight:600;color:var(--navy)}
.timeline .t-meta{font-size:.78rem;color:var(--mut)}

/* recorder */
.recorder video{width:100%;max-width:520px;background:#000;border-radius:6px}
.rec-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--red);margin-right:6px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
@media (prefers-reduced-motion: reduce){.rec-dot{animation:none}}

/* scan box */
.scan-box{padding:12px 18px 4px}
.scan-box label{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-soft)}
.scan-box input{width:100%;margin-top:5px;background:var(--navy-2);border:1px solid var(--gold);color:#fff;padding:8px 9px;border-radius:3px;font-size:.85rem;font-family:ui-monospace,Menlo,monospace}
.scan-box input::placeholder{color:#7C8AA5}

/* labels print sheet */
.label-sheet{display:flex;flex-wrap:wrap;gap:4mm;background:#fff;padding:10px}
.label{border:1px dashed #bbb;padding:1.5mm;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;page-break-inside:avoid}
.label .l-sku{font-weight:700;font-size:2.6mm;font-family:'Montserrat',sans-serif}
.label .l-code{font-family:ui-monospace,Menlo,monospace;font-size:2.2mm;letter-spacing:.02em}
.label .l-meta{font-size:2mm;color:#444}
.label svg{width:100%;height:9mm}
@media print{
  body{display:block;background:#fff}
  .side,.no-print,.flash{display:none!important}
  main{padding:0;max-width:none}
  .label-sheet{padding:0;gap:0}
  .label{border:none;margin:0}
}

/* ---------- mobile ---------- */
.menu-btn{display:none}
.nav-overlay{display:none}
.table-wrap{overflow-x:auto}
@media (max-width:760px){
  body{display:block}
  .menu-btn{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;left:10px;z-index:60;
    width:44px;height:44px;border-radius:6px;background:var(--navy);color:var(--gold);border:1px solid var(--gold);font-size:1.2rem;padding:0}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(280px,82vw);z-index:55;height:100dvh;
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:8px 0 30px rgba(0,0,0,.35)}
  body.nav-open .side{transform:translateX(0)}
  body.nav-open .nav-overlay{display:block;position:fixed;inset:0;background:rgba(16,30,51,.5);z-index:50}
  main{padding:64px 14px 24px;max-width:100%}
  h1{font-size:1.35rem}
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .panel{padding:13px;overflow-x:auto}
  table{min-width:560px}
  .panel > form.form-grid, .panel .form-grid{min-width:0}
  input,select,button,.btn{font-size:16px}   /* prevents iOS zoom-on-focus */
  form.inline{gap:8px}
  form.inline input, form.inline select{max-width:46vw}
  .recorder video{max-width:100%}
}
@media (prefers-reduced-motion: reduce){.side{transition:none}}