:root{
    --canvas:#EFF1F4; --card:#FFFFFF; --soft:#F7F8FA;
    --ink:#1E2633; --muted:#69727F; --faint:#9AA3AF;
    --line:#ECEEF2; --line2:#F2F4F7;
    --brand:#E3A23E; --brand-soft:#FBF1DE;
    --inkbtn:#232B37;
    --danger:#EC6060; --danger-t:#FCECEC;
    --warn:#E9A23E; --warn-t:#FBF1DE;
    --ok:#2FB088; --ok-t:#E4F5EE;
    --info:#5093D6; --info-t:#E9F1FB;
    --shopA:#9B6DFF; --shopB:#2FC0B4; --shopC:#F49D4C; --shopD:#F0736F;
    --disp:'Plus Jakarta Sans',sans-serif;
    --body:'Inter',sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --r:18px; --r2:13px; --rs:10px;
    --sh-sm:0 1px 2px rgba(25,35,60,.04),0 2px 5px rgba(25,35,60,.05);
    --sh-md:0 6px 18px rgba(25,35,60,.06),0 14px 40px rgba(25,35,60,.07);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{font-size:14px}
  body{background:var(--canvas);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.5}
  ::selection{background:rgba(227,162,62,.25)}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
  .num{font-variant-numeric:tabular-nums}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.64rem;color:var(--faint)}
  .pos{color:var(--ok)} .neg{color:var(--danger)}

  .app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}

  /* sidebar */
  .side{padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
  .brand{display:flex;align-items:center;gap:11px;padding:8px 10px 16px}
  .brand .mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(140deg,#F1B75B,#E3922E);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;color:#fff;font-size:1.05rem;box-shadow:0 4px 12px rgba(227,146,46,.35)}
  .brand b{font-family:var(--disp);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;display:block}
  .brand span{color:var(--faint);font-size:.66rem;font-weight:600;letter-spacing:.02em}
  .nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--muted);font-size:.88rem;font-weight:500;text-decoration:none;transition:.14s}
  .nav a .ic{width:18px;text-align:center;font-size:.95rem;opacity:.9}
  .nav a .badge{margin-left:auto;font-size:.72rem;font-weight:600;background:var(--line2);color:var(--muted);padding:2px 9px;border-radius:999px}
  .nav a:hover{background:var(--soft);color:var(--ink)}
  .nav a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-sm)}
  .nav a.on .ic{color:var(--brand);opacity:1}
  .nav a.on .badge{background:var(--brand-soft);color:#B77A1E}
  .nav .lbl{padding:16px 12px 6px}
  .side .foot{margin-top:auto;padding:12px;background:#fff;border-radius:14px;box-shadow:var(--sh-sm);display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
  .side .foot .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-t)}

  .main{padding:20px 26px 40px;min-width:0}

  /* top summary strip */
  .strip{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
  .pill{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:13px 18px;box-shadow:var(--sh-sm);cursor:pointer;transition:.16s}
  .pill:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
  .pill .ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none}
  .pill .n{font-family:var(--disp);font-weight:800;font-size:1.5rem;line-height:1}
  .pill .l{font-size:.72rem;color:var(--muted);line-height:1.3}
  .pill .l b{display:block;font-weight:700;color:var(--ink);font-size:.82rem}
  .pill.d .ico{background:var(--danger-t);color:var(--danger)} .pill.d .n{color:var(--danger)}
  .pill.w .ico{background:var(--warn-t);color:#C6871F} .pill.w .n{color:#C6871F}
  .pill.i .ico{background:var(--info-t);color:var(--info)} .pill.i .n{color:var(--info)}
  .strip .grow{flex:1}
  .shopfilter{display:flex;align-items:center;gap:4px;background:#fff;border-radius:999px;padding:5px;box-shadow:var(--sh-sm)}
  .shopfilter button{font-size:.76rem;font-weight:600;color:var(--muted);padding:6px 12px;border-radius:999px;display:flex;align-items:center;gap:7px}
  .shopfilter button .chip{width:9px;height:9px;border-radius:3px}
  .shopfilter button.on{background:var(--ink);color:#fff}
  .clock{font-size:.8rem;color:var(--faint);font-weight:500;padding:0 4px}

  /* view tabs */
  .viewtabs{display:flex;gap:6px;margin:20px 0 18px}
  .viewtabs button{padding:9px 18px;border-radius:999px;font-family:var(--disp);font-weight:600;font-size:.86rem;color:var(--muted)}
  .viewtabs button.on{background:var(--ink);color:#fff}
  .viewtabs button:not(.on):hover{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}

  .view{display:none} .view.on{display:block}

  .sechead{display:flex;align-items:center;gap:12px;margin:26px 2px 14px}
  .sechead h2{font-family:var(--disp);font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
  .sechead .meta{margin-left:auto;font-size:.74rem;color:var(--faint)}

  /* attention cards */
  .attention{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .acard{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm);cursor:pointer;transition:.16s;position:relative}
  .acard:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
  .acard .ico{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:16px}
  .acard.d .ico{background:var(--danger-t);color:var(--danger)}
  .acard.w .ico{background:var(--warn-t);color:#C6871F}
  .acard.i .ico{background:var(--info-t);color:var(--info)}
  .acard.o .ico{background:var(--ok-t);color:var(--ok)}
  .acard .v{font-family:var(--disp);font-weight:800;font-size:2.3rem;line-height:1;letter-spacing:-.02em}
  .acard .k{font-weight:600;font-size:.9rem;margin-top:6px}
  .acard .sub{font-size:.76rem;color:var(--muted);margin-top:5px;line-height:1.45}
  .acard .go{font-size:.76rem;color:var(--brand);font-weight:600;margin-top:12px;display:inline-flex;align-items:center;gap:5px}

  /* revenue */
  .revwrap{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
  .panel{background:#fff;border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh-sm)}
  .rhead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
  .big{font-family:var(--disp);font-weight:800;font-size:2.4rem;letter-spacing:-.02em;line-height:1}
  .big .cur{color:var(--faint);font-weight:600;font-size:1.15rem}
  .delta{font-size:.8rem;font-weight:700;color:var(--ok);background:var(--ok-t);padding:5px 11px;border-radius:999px}
  .chart{display:flex;align-items:flex-end;gap:4px;height:130px;margin-top:8px}
  .chart .bar{flex:1;background:linear-gradient(180deg,#F1CB84,#E7A94D);border-radius:6px 6px 3px 3px;min-height:4px;transition:.16s;position:relative}
  .chart .bar:hover{filter:brightness(1.05);transform:scaleY(1.02);transform-origin:bottom}
  .chart .bar.today{background:linear-gradient(180deg,#2FB088,#249b76)}
  .axis{display:flex;justify-content:space-between;margin-top:10px;font-size:.68rem;color:var(--faint)}

  .stbl{width:100%;border-collapse:collapse}
  .stbl th{text-align:left;font-size:.66rem;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:0 8px 12px}
  .stbl th.r,.stbl td.r{text-align:right}
  .stbl td{padding:13px 8px;font-size:.86rem;border-top:1px solid var(--line2)}
  .stbl tbody tr:hover td{background:var(--soft)}
  .stbl tbody tr td:first-child{border-radius:10px 0 0 10px} .stbl tbody tr td:last-child{border-radius:0 10px 10px 0}
  .shopname{display:flex;align-items:center;gap:10px;font-weight:600}
  .shopname .chip{width:10px;height:10px;border-radius:3px;flex:none}
  .tag-reauth{font-size:.62rem;color:var(--danger);font-weight:700;background:var(--danger-t);padding:3px 8px;border-radius:999px}
  .stbl tfoot td{border-top:1.5px solid var(--line);font-weight:800;font-family:var(--disp);padding-top:14px}

  /* ===== queue ===== */
  .queue{display:grid;grid-template-columns:280px 1fr;gap:16px}
  .glist{background:#fff;border-radius:var(--r);padding:12px;box-shadow:var(--sh-sm);height:max-content}
  .glist .gh{padding:12px 12px 14px}
  .glist .gh .tot{font-family:var(--disp);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;margin-top:2px}
  .glist .gh .tot small{font-size:.78rem;color:var(--muted);font-weight:500;font-family:var(--body)}
  .gitem{display:flex;align-items:center;gap:13px;padding:12px;border-radius:14px;width:100%;text-align:left;transition:.14s;margin-bottom:2px}
  .gitem .gic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none}
  .gitem.pod .gic{background:var(--info-t);color:var(--info)}
  .gitem.self .gic{background:var(--warn-t);color:#C6871F}
  .gitem.pl .gic{background:var(--line2);color:var(--faint)}
  .gitem.attn .gic{background:var(--danger-t);color:var(--danger)}
  .gitem .gb{flex:1;min-width:0}
  .gitem .gt{font-family:var(--disp);font-weight:700;font-size:.9rem}
  .gitem .gs{font-size:.72rem;color:var(--faint);margin-top:1px}
  .gitem .gn{font-family:var(--disp);font-weight:800;font-size:1.05rem;color:var(--muted)}
  .gitem:hover{background:var(--soft)}
  .gitem.on{background:var(--ink)}
  .gitem.on .gt,.gitem.on .gn{color:#fff} .gitem.on .gs{color:rgba(255,255,255,.6)}
  .gitem.on .gic{background:rgba(255,255,255,.14);color:#fff}

  .gpanel{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);display:flex;flex-direction:column;overflow:hidden}
  .gph{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;gap:14px}
  .gph h3{font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
  .gph .cnt{font-size:.78rem;color:var(--muted);margin-top:2px}
  .gph .r{display:flex;align-items:center;gap:10px}
  .selall{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--muted);font-weight:500;padding:9px 14px;border-radius:11px;background:var(--soft)}
  .selall:hover{background:var(--line2);color:var(--ink)}
  .btn{padding:10px 18px;border-radius:12px;font-family:var(--disp);font-weight:700;font-size:.84rem;display:inline-flex;align-items:center;gap:8px;transition:.15s}
  .btn-approve{background:var(--ink);color:#fff}
  .btn-approve:hover{background:#000;box-shadow:0 6px 16px rgba(30,38,51,.25)}
  .btn-approve:disabled{background:var(--line2);color:var(--faint);cursor:not-allowed;box-shadow:none}
  .btn-ghost{color:var(--muted)} .btn-ghost:hover{background:var(--soft);color:var(--ink)}

  .cards{padding:6px 18px 18px;display:flex;flex-direction:column;gap:12px}
  .ocard{display:grid;grid-template-columns:22px 66px 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;transition:.15s}
  .ocard:hover{box-shadow:var(--sh-sm);border-color:var(--line2)}
  .ocard.pick{border-color:rgba(227,162,62,.5);background:#FFFDF8;box-shadow:0 2px 10px rgba(227,162,62,.1)}
  .ck{width:19px;height:19px;border-radius:7px;border:2px solid #CDD3DB;appearance:none;cursor:pointer;position:relative;flex:none;transition:.12s}
  .ck:checked{background:var(--ink);border-color:var(--ink)}
  .ck:checked::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:800}
  .thumb{width:66px;height:66px;border-radius:14px;object-fit:cover;background:var(--soft)}
  .info{min-width:0}
  .r1{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
  .schip{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;color:var(--muted)}
  .schip .chip{width:8px;height:8px;border-radius:3px}
  .rid{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
  .flag{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
  .flag.mix{background:var(--info-t);color:var(--info)} .flag.hi{background:var(--brand-soft);color:#B77A1E}
  .title{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vars{font-size:.75rem;color:var(--muted);margin-top:3px}
  .pers{font-size:.75rem;margin-top:5px;color:#B77A1E;background:var(--brand-soft);display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px}
  .pers .q{font-style:italic;color:var(--ink)}
  .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  .prov{font-size:.72rem;color:var(--muted);font-weight:500}
  .profit{font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--ok)}
  .deadline{font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px}
  .deadline.late{color:var(--danger);background:var(--danger-t)}
  .deadline.soon{color:#C6871F;background:var(--warn-t)}
  .deadline.ok{color:var(--muted);background:var(--soft)}

  .kbbar{display:flex;align-items:center;gap:18px;padding:14px 22px;border-top:1px solid var(--line);font-size:.74rem;color:var(--faint)}
  .kbbar kbd{font-family:var(--mono);background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:.7rem;color:var(--muted);margin-right:2px}
  .kbbar .hint{margin-left:auto;color:var(--muted)}

  .empty{text-align:center;padding:60px 30px;color:var(--faint)}
  .empty .e-ic{font-size:2rem;margin-bottom:12px}

  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:#fff;font-family:var(--disp);font-weight:600;font-size:.86rem;padding:14px 24px;border-radius:14px;box-shadow:var(--sh-md);opacity:0;transition:.34s cubic-bezier(.2,.9,.2,1);z-index:50;display:flex;align-items:center;gap:10px}
  .toast .t-ic{width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}

  @media (max-width:980px){
    .app{grid-template-columns:1fr}.side{display:none}
    .attention{grid-template-columns:repeat(2,1fr)}.revwrap{grid-template-columns:1fr}.queue{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}