/* app.css — structure & components. Colours come from theme.css tokens only. */
*{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--app-bg);
    background-attachment:fixed;
    color:var(--text);
    font-family:var(--sans);
    font-size:14px;
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
  a{color:inherit;text-decoration:none;}

  /* themable SVG bits */
  .gl{stroke:var(--border-soft);}
  .dotbg{fill:var(--bg);}
  .dtrack{stroke:var(--track);}

  /* ============ APP SHELL ============ */
  .app{display:flex;min-height:100vh;}

  /* ---- Sidebar ---- */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:240px;
    background:var(--sidebar-grad);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    z-index:30;
  }
  .brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;}
  .brand .mark{
    width:38px;height:38px;border-radius:11px;flex:0 0 auto;
    display:grid;place-items:center;
    background:linear-gradient(150deg,color-mix(in srgb, var(--emerald) 18%, transparent),color-mix(in srgb, var(--cyan) 16%, transparent));
    border:1px solid color-mix(in srgb, var(--emerald) 35%, transparent);
    box-shadow:0 0 22px -6px color-mix(in srgb, var(--cyan) 55%, transparent);
  }
  .brand .word{display:flex;flex-direction:column;line-height:1.05;}
  .brand .word b{font-size:18px;font-weight:700;letter-spacing:-.2px;color:var(--text-strong);}
  .brand .word span{font-size:11px;color:var(--muted);letter-spacing:.2px;}

  .nav{padding:8px 12px;display:flex;flex-direction:column;gap:2px;overflow:auto;}
  .nav .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
    padding:14px 10px 6px;font-weight:600;}
  .nav a{
    display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
    color:var(--muted);font-weight:500;font-size:13.5px;position:relative;
  }
  .nav a svg{width:18px;height:18px;flex:0 0 auto;opacity:.9;}
  .nav a:hover{background:var(--fill-soft-2);color:var(--text);}
  .nav a.active{
    background:linear-gradient(90deg,color-mix(in srgb, var(--emerald) 16%, transparent),color-mix(in srgb, var(--emerald) 3%, transparent));
    color:var(--nav-active);font-weight:600;
  }
  .nav a.active::before{
    content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
    background:var(--emerald);box-shadow:0 0 12px var(--emerald);
  }
  .nav a.active svg{color:var(--emerald);opacity:1;}
  .nav a .tag{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--ink-amber);
    background:color-mix(in srgb, var(--amber) 14%, transparent);border:1px solid color-mix(in srgb, var(--amber) 32%, transparent);
    padding:1px 7px;border-radius:999px;}
  .nav .dot{margin-left:auto;}

  .side-foot{margin-top:auto;padding:14px;border-top:1px solid var(--border);}
  .coldbar{display:flex;align-items:center;gap:10px;background:color-mix(in srgb, var(--cyan) 6%, transparent);
    border:1px solid color-mix(in srgb, var(--cyan) 24%, transparent);border-radius:11px;padding:10px 11px;}
  .coldbar .t{display:flex;flex-direction:column;line-height:1.15;}
  .coldbar .t b{font-size:14px;color:var(--coldbar-t);font-weight:600;}
  .coldbar .t span{font-size:10.5px;color:var(--muted);}

  /* ---- Main ---- */
  .main{flex:1;margin-left:240px;min-width:0;display:flex;flex-direction:column;}

  /* top bar */
  .topbar{
    position:sticky;top:0;z-index:20;
    height:62px;display:flex;align-items:center;gap:14px;
    padding:0 24px;
    background:var(--topbar-bg);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .topbar .ttl{display:flex;flex-direction:column;line-height:1.1;}
  .topbar .ttl b{font-size:15px;color:var(--text-strong);font-weight:600;}
  .topbar .ttl span{font-size:11.5px;color:var(--muted);}
  .topbar .spacer{flex:1;}

  .search{
    display:flex;align-items:center;gap:8px;height:36px;width:280px;
    background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:0 11px;color:var(--muted-2);
  }
  .search svg{width:15px;height:15px;flex:0 0 auto;}
  .search input{border:0;background:transparent;color:var(--text);outline:none;font-size:13px;width:100%;font-family:var(--sans);}
  .search input::placeholder{color:var(--muted-2);}
  .search .kbd{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;}

  .period{display:flex;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:3px;}
  .period button{
    border:0;background:transparent;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:12px;
    color:var(--muted);padding:6px 13px;border-radius:7px;
  }
  .period button.on{background:var(--period-on-bg);color:var(--period-on-text);box-shadow:inset 0 0 0 1px var(--border);}

  .iconbtn{
    position:relative;width:36px;height:36px;display:grid;place-items:center;
    background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--muted);cursor:pointer;
  }
  .iconbtn:hover{color:var(--text);}
  .iconbtn svg{width:17px;height:17px;}
  .iconbtn .badge{
    position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;
    background:var(--rose);color:#1A0307;font-size:10px;font-weight:800;border-radius:999px;
    display:grid;place-items:center;border:2px solid var(--bg);
  }
  /* theme toggle icon swap */
  .theme-toggle .t-sun,.theme-toggle .t-moon{display:none;}
  :root[data-theme="dark"] .theme-toggle .t-sun{display:block;}
  :root[data-theme="light"] .theme-toggle .t-moon{display:block;}

  .avatar{display:flex;align-items:center;gap:10px;padding-left:4px;}
  .avatar .pic{
    width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;
    color:#04261B;background:var(--grad-avatar);font-size:15px;
  }
  .avatar .who{display:flex;flex-direction:column;line-height:1.15;}
  .avatar .who b{font-size:13px;color:var(--text-strong);font-weight:600;}
  .avatar .who span{font-size:10.5px;color:var(--muted);font-family:var(--mono);}

  /* content grid */
  .content{padding:22px 24px 12px;display:flex;flex-direction:column;gap:18px;}

  .panel{
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    border:1px solid var(--border);border-radius:var(--r-lg);
    box-shadow:var(--shadow);
  }
  .p-pad{padding:18px;}
  .phead{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
  .phead h3{margin:0;font-size:13.5px;font-weight:600;color:var(--text-strong);letter-spacing:-.1px;}
  .phead .sub{font-size:11.5px;color:var(--muted);}
  .phead .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
  .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:600;}

  .chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
    padding:4px 9px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--fill-soft);}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto;}
  .d-g{background:var(--emerald);box-shadow:0 0 8px var(--emerald);}
  .d-a{background:var(--amber);box-shadow:0 0 8px var(--amber);}
  .d-r{background:var(--rose);box-shadow:0 0 8px var(--rose);}
  .d-c{background:var(--cyan);box-shadow:0 0 8px var(--cyan);}

  .delta{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:700;font-size:12.5px;
    padding:2px 8px;border-radius:7px;}
  .up{color:#062a1d;background:var(--emerald);}
  .up-soft{color:var(--ink-emerald);background:color-mix(in srgb, var(--emerald) 12%, transparent);border:1px solid color-mix(in srgb, var(--emerald) 28%, transparent);}
  .down-soft{color:var(--ink-rose);background:color-mix(in srgb, var(--rose) 12%, transparent);border:1px solid color-mix(in srgb, var(--rose) 28%, transparent);}

  /* ===== HERO (B) ===== */
  .hero{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:0;}
  .hero > div{padding:20px 22px;}
  .hero .col-mid{border-left:1px solid var(--border-soft);border-right:1px solid var(--border-soft);}
  .hero .big{font-family:var(--mono);font-size:46px;font-weight:700;line-height:1;letter-spacing:-2px;
    color:var(--text-strong);margin:8px 0 6px;}
  .hero .big small{font-size:24px;color:var(--muted);font-weight:600;margin-right:2px;letter-spacing:0;}
  .hero .vy{font-size:12px;color:var(--muted);margin-top:2px;}
  .chartwrap{margin-top:14px;position:relative;}
  .chartwrap svg{display:block;width:100%;height:auto;}
  .axis{display:flex;justify-content:space-between;margin-top:6px;}
  .axis span{font-size:10px;color:var(--muted-2);font-family:var(--mono);}

  /* donut + legend */
  .donutrow{display:flex;align-items:center;gap:16px;margin-top:6px;}
  .donut{position:relative;width:128px;height:128px;flex:0 0 auto;}
  .donut .ctr{position:absolute;inset:0;display:grid;place-content:center;text-align:center;}
  .donut .ctr b{font-family:var(--mono);font-size:20px;color:var(--text-strong);display:block;line-height:1;}
  .donut .ctr span{font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
  .legend{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0;}
  .legrow{display:flex;align-items:center;gap:9px;font-size:12.5px;}
  .legrow .nm{color:var(--muted);}
  .legrow .vv{margin-left:auto;font-family:var(--mono);font-weight:700;color:var(--text-strong);}
  .legrow .pc{font-family:var(--mono);font-size:11px;color:var(--muted-2);width:42px;text-align:right;}

  .splitstat{display:flex;flex-direction:column;gap:14px;}
  .sbox{background:var(--fill-soft);border:1px solid var(--border-soft);border-radius:12px;padding:14px 15px;}
  .sbox .k{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px;}
  .sbox .v{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--text-strong);margin-top:6px;line-height:1;}
  .sbox .meta{font-size:11px;color:var(--muted-2);margin-top:6px;}

  /* ===== KPI STRIP (C) ===== */
  .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
  .kpi{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);
    border-radius:var(--r-lg);padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;
    box-shadow:var(--shadow);position:relative;overflow:hidden;}
  .kpi .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
  .kpi .lab{font-size:11.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px;}
  .kpi .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
    border:1px solid var(--border);background:var(--fill-soft);color:var(--muted);}
  .kpi .ic svg{width:16px;height:16px;}
  .kpi .num{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--text-strong);line-height:1;letter-spacing:-1px;}
  .kpi .num small{font-size:15px;color:var(--muted);font-weight:600;letter-spacing:0;}
  .kpi .sub{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .kpi .spark{height:30px;margin-top:2px;}
  .kpi .spark svg{width:100%;height:30px;display:block;}

  .bar{height:6px;border-radius:999px;background:var(--track);border:1px solid var(--border-soft);overflow:hidden;}
  .bar > i{display:block;height:100%;border-radius:999px;}

  /* signature cold-chain card */
  .kpi.cold{border-color:color-mix(in srgb, var(--amber) 50%, transparent);box-shadow:var(--glow-amber);background:var(--cold-bg);}
  .kpi.cold::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120px 80px at 90% 0,color-mix(in srgb, var(--amber) 12%, transparent),transparent 70%);}
  .thermo{display:flex;align-items:center;gap:12px;}
  .thermo .reads{flex:1;}
  .warnpill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    color:#2A1B02;background:var(--amber);padding:3px 9px;border-radius:999px;}

  /* ===== TABLE BASE ===== */
  .tablewrap{overflow-x:auto;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  thead th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
    font-weight:600;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;}
  tbody td{padding:13px 14px;border-bottom:1px solid var(--border-soft);color:var(--text);white-space:nowrap;}
  tbody tr:last-child td{border-bottom:0;}
  tbody tr:hover{background:var(--fill-soft);}
  .num-c{font-family:var(--mono);font-variant-numeric:tabular-nums;}
  td .muted{color:var(--muted);font-size:11.5px;}
  tbody td b{color:var(--text-strong);font-weight:600;}

  .shop-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
    background:color-mix(in srgb, var(--cyan) 8%, transparent);border:1px solid color-mix(in srgb, var(--cyan) 22%, transparent);color:var(--ink-cyan);}
  .cellflex{display:flex;align-items:center;gap:10px;}
  .ratio{display:flex;align-items:center;gap:9px;min-width:120px;}
  .ratio .bar{flex:1;}
  .temp{font-family:var(--mono);font-weight:700;}
  .row-warn{background:linear-gradient(90deg,color-mix(in srgb, var(--amber) 12%, transparent),color-mix(in srgb, var(--amber) 2%, transparent));}
  .row-warn td:first-child{box-shadow:inset 3px 0 0 var(--amber);}
  .temp.hot{color:var(--ink-amber);}

  .modechip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    padding:3px 9px;border-radius:7px;border:1px solid transparent;}
  .m-scan{color:var(--ink-emerald);background:color-mix(in srgb, var(--emerald) 10%, transparent);border-color:color-mix(in srgb, var(--emerald) 30%, transparent);}
  .m-coin{color:var(--ink-cyan);background:color-mix(in srgb, var(--cyan) 10%, transparent);border-color:color-mix(in srgb, var(--cyan) 30%, transparent);}
  .m-card{color:var(--ink-amber);background:color-mix(in srgb, var(--amber) 12%, transparent);border-color:color-mix(in srgb, var(--amber) 32%, transparent);}
  .m-note{color:var(--ink-indigo);background:color-mix(in srgb, var(--indigo) 10%, transparent);border-color:color-mix(in srgb, var(--indigo) 30%, transparent);}
  .status{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;}
  .st-paid{color:var(--ink-emerald);}
  .st-refund{color:var(--ink-rose);}

  /* ===== COMMODITY (E) ===== */
  .commodity{display:grid;grid-template-columns:1.05fr 1fr;gap:0;}
  .commodity > div{padding:18px;}
  .commodity .right-col{border-left:1px solid var(--border-soft);}
  .cats{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px;}
  .cat{font-size:12px;font-weight:600;padding:6px 12px;border-radius:9px;border:1px solid var(--border);
    color:var(--muted);background:var(--fill-soft);cursor:pointer;}
  .cat.on{color:#06281f;background:var(--grad-accent);border-color:transparent;}

  .matrixhead{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
  .mstat{display:flex;flex-direction:column;}
  .mstat b{font-family:var(--mono);font-size:16px;color:var(--text-strong);}
  .mstat span{font-size:10.5px;color:var(--muted);}
  .matrix{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
  .cell{aspect-ratio:1/1.05;border-radius:7px;display:grid;place-items:center;
    font-family:var(--mono);font-size:10px;font-weight:700;border:1px solid var(--border-soft);position:relative;}
  .c-ok{background:color-mix(in srgb, var(--emerald) 10%, transparent);border-color:color-mix(in srgb, var(--emerald) 28%, transparent);color:var(--ink-emerald);}
  .c-mid{background:color-mix(in srgb, var(--cyan) 8%, transparent);border-color:color-mix(in srgb, var(--cyan) 22%, transparent);color:var(--ink-cyan);}
  .c-low{background:color-mix(in srgb, var(--amber) 16%, transparent);border-color:color-mix(in srgb, var(--amber) 45%, transparent);color:var(--ink-amber);
    box-shadow:0 0 12px -3px color-mix(in srgb, var(--amber) 40%, transparent);}
  .c-out{background:color-mix(in srgb, var(--rose) 16%, transparent);border-color:color-mix(in srgb, var(--rose) 50%, transparent);color:var(--ink-rose);
    box-shadow:0 0 12px -3px color-mix(in srgb, var(--rose) 45%, transparent);}
  .mlegend{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap;}
  .mlegend span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);}

  .prod{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-soft);}
  .prod:last-child{border-bottom:0;}
  .pthumb{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:0 0 auto;border:1px solid var(--border);}
  .prod .pn{display:flex;flex-direction:column;min-width:0;}
  .prod .pn b{font-size:13px;color:var(--text-strong);font-weight:600;}
  .prod .pn span{font-size:11px;color:var(--muted);}
  .prod .pp{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
  .prod .pp .price{font-family:var(--mono);font-weight:700;color:var(--text-strong);font-size:14px;}
  .stockpill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;}
  .s-ok{color:var(--ink-emerald);background:color-mix(in srgb, var(--emerald) 10%, transparent);border:1px solid color-mix(in srgb, var(--emerald) 28%, transparent);}
  .s-low{color:var(--ink-amber);background:color-mix(in srgb, var(--amber) 12%, transparent);border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);}
  .s-out{color:var(--ink-rose);background:color-mix(in srgb, var(--rose) 10%, transparent);border:1px solid color-mix(in srgb, var(--rose) 28%, transparent);}

  /* footer */
  .foot{display:flex;align-items:center;gap:10px;color:var(--muted-2);font-size:11.5px;
    padding:10px 26px 26px;flex-wrap:wrap;}
  .foot .sep{opacity:.5;}
  .foot .live{display:inline-flex;align-items:center;gap:6px;color:var(--ink-emerald);font-weight:600;}
  .pulse{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 8px var(--emerald);}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1240px){
    .hero{grid-template-columns:1fr 1fr;}
    .hero .col-rt{grid-column:1/-1;border-top:1px solid var(--border-soft);}
    .hero .col-mid{border-right:0;}
    .kpis{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:1024px){
    .sidebar{width:72px;}
    .brand .word,.nav .lbl,.nav a span.t,.nav a .tag,.side-foot{display:none;}
    .nav a{justify-content:center;padding:11px 0;}
    .main{margin-left:72px;}
    .commodity{grid-template-columns:1fr;}
    .commodity .right-col{border-left:0;border-top:1px solid var(--border-soft);}
  }
  @media (max-width:760px){
    .sidebar{display:none;}
    .main{margin-left:0;}
    .search{display:none;}
    .hero{grid-template-columns:1fr;}
    .hero .col-mid{border-left:0;border-right:0;border-top:1px solid var(--border-soft);}
    .kpis{grid-template-columns:repeat(2,1fr);}
    .avatar .who{display:none;}
  }
  @media (max-width:480px){
    .content{padding:14px;}
    .topbar{padding:0 14px;gap:10px;}
    .period button{padding:6px 9px;}
    .kpis{grid-template-columns:1fr;}
    .hero .big{font-size:38px;}
  }

/* ===== skeleton loading (lazy page fragments) ===== */
.lazy{display:block}
.skel{display:flex;flex-direction:column;gap:18px}
.skel-panel{background:var(--panel);border:1px solid var(--border-soft);border-radius:18px;padding:22px}
.sk{position:relative;overflow:hidden;background:var(--fill-soft);border-radius:9px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 8%,transparent),transparent);animation:sksheen 1.25s infinite}
@keyframes sksheen{100%{transform:translateX(100%)}}
.sk-line{height:16px}
.sk-row{height:44px;margin-top:10px}
.sk-card{height:120px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;margin-top:14px}