:root{--bg:#f3f5f8;--panel:#fff;--ink:#16202b;--muted:#64717f;--line:#dfe4ea;--nav:#12263a;--nav2:#1b3550;
--accent:#1769aa;--accent-ink:#fff;--ok:#1d7a46;--ok-bg:#e3f4ea;--bad:#b42318;--bad-bg:#fde8e6;--warn:#8a5a00;--warn-bg:#fff2d1;
--grey-bg:#eef1f4;--radius:10px}
*{box-sizing:border-box}
body{margin:0;font:14.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent)}
.shell{display:grid;grid-template-columns:228px 1fr;min-height:100vh}
aside{background:var(--nav);color:#c9d6e3;padding:18px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:0 20px 16px;color:#fff;font-weight:700;font-size:18px}
.brand small{display:block;font-weight:400;font-size:12px;color:#9fb3c8}
aside .sec{padding:12px 20px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f97ae}
aside a{display:flex;gap:10px;align-items:center;padding:8px 20px;color:#dbe5ee;text-decoration:none;border-left:3px solid transparent}
aside a:hover{background:var(--nav2)}
aside a.on{background:var(--nav2);border-left-color:#5fb0f0;color:#fff;font-weight:600}
aside .me{padding:14px 20px;font-size:12.5px;color:#9fb3c8;border-top:1px solid #23415f;margin-top:14px}
aside .me a{display:inline;padding:0;border:0;color:#cfe3f5}
main{padding:22px clamp(14px,3vw,34px) 40px;min-width:0}
.top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
h1{font-size:22px;margin:0}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:0 0 8px}
.muted{color:var(--muted)}small{font-size:12.5px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 14px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:14px}
.grid2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.grid2>*,.grid>*{min-width:0}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.kpi .l{color:var(--muted);font-size:12.5px}.kpi .v{font-size:24px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
a.kpi{text-decoration:none;color:inherit}a.kpi:hover{border-color:var(--accent)}
.btn,button{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
padding:8px 13px;border-radius:7px;cursor:pointer;text-decoration:none;font:inherit;font-weight:600;font-size:13.5px;white-space:nowrap}
.btn.ghost,button.ghost{background:#fff;color:var(--accent);border-color:#c6d4e2}
.btn.danger,button.danger{background:#fff;color:var(--bad);border-color:#f0c4bf}
.btn.sm,button.sm{padding:4px 9px;font-size:12.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid #cbd3dc;border-radius:7px;background:#fff;width:100%;color:var(--ink)}
textarea{min-height:70px}
label{display:block;font-size:12.5px;font-weight:600;color:#3a4756;margin-bottom:3px}
.help{font-size:12px;color:var(--muted);margin-top:2px}
.formgrid{display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.formgrid .wide{grid-column:1/-1}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.filters>div{min-width:130px;flex:1 1 140px;max-width:220px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid #edf0f3;text-align:left;white-space:nowrap}
th{background:#f7f9fb;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#56626f;position:sticky;top:0}
td.n,th.n{text-align:right}
tr:hover td{background:#fafcfe}
tfoot td{font-weight:700;background:#f7f9fb}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600;background:var(--grey-bg);color:#46525f}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-bad{background:var(--bad-bg);color:var(--bad)}.b-warn{background:var(--warn-bg);color:var(--warn)}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:#bfe3cc;color:#14532d}.flash.error{background:var(--bad-bg);border-color:#f3c3bd;color:#7a1a12}
.note{background:var(--warn-bg);border:1px solid #f0dca6;padding:10px 14px;border-radius:8px;font-size:13.5px}
.pager{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.channels{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ch{border:1px solid var(--line);border-radius:8px;padding:9px;background:#fbfcfd;font-size:13px}
.ch.used{background:#eef6fd;border-color:#bcd8f0}.ch .no{font-size:11px;color:var(--muted);font-weight:700}
.bar{height:8px;background:#e8ecf0;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent)}
.bar i.hit{background:var(--ok)}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0}
.chart{position:relative;height:260px}
.menu-btn{display:none}
.inline{display:inline}
@media (max-width:860px){
 .shell{grid-template-columns:1fr}
 aside{position:fixed;inset:0 30% 0 0;z-index:20;transform:translateX(-102%);transition:transform .2s;height:100%}
 aside.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
 .menu-btn{display:inline-flex}
 main{padding:14px 16px 30px}
 .grid2{grid-template-columns:1fr}
}

/* ---- ticket thread + supplier portal ---- */
.thread{display:flex;flex-direction:column;gap:12px;margin:4px 0 18px}
.msg{border:1px solid var(--line,#1C4A5B);border-radius:10px;padding:13px 15px;max-width:80%}
.msg .meta{font-size:12px;color:var(--muted,#8aa);margin-bottom:5px;font-weight:600}
.msg .body{white-space:pre-wrap;line-height:1.55}
.msg.supplier{align-self:flex-start;background:var(--panel,#0E2C39)}
.msg.staff{align-self:flex-end;background:rgba(243,166,56,.10);border-color:rgba(243,166,56,.4)}
.portal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--line,#1C4A5B);margin-bottom:22px}
.portal-head .brand{font-weight:800;font-size:18px}
.portal-nav{display:flex;gap:6px;flex-wrap:wrap}
.portal-nav a{padding:8px 13px;border-radius:8px;color:var(--muted,#9FB7C0);font-size:14.5px}
.portal-nav a.on,.portal-nav a:hover{background:var(--panel,#0E2C39);color:var(--fg,#EAF2F3)}
@media (max-width:600px){ .msg{max-width:100%} }