:root{
  --bg:#f6f8fa; --panel:#ffffff; --surface:#f3f5f8; --surface-2:#eef1f6;
  --ink:#0a0d15; --ink-2:#2f3745; --ink-3:#4b5465; --ink-4:#67707f;
  --line:#e7eaf0; --line-2:#d5dae3;
  --accent:#059669; --accent-2:#10b981; --accent-soft:#e7f8f1; --accent-line:rgba(16,185,129,.3);
  --brand2:#80d754; --grad:linear-gradient(115deg,#059669,#3cbf6e 55%,#8fd94f);
  --navy:#0a0d15; --warn:#b45309; --err:#dc2626; --err-soft:#fdecec;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:'Manrope','Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

/* sidebar */
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:var(--disp);font-size:15px}
.brand .bn{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.02em}
.brand .bn small{display:block;font-size:10px;font-weight:600;color:var(--ink-4);letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer}
.nav a .ic{width:17px;height:17px;flex:none;opacity:.8}
.nav a:hover{background:var(--surface)}
.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.nav a.on .ic{opacity:1}
.nav .grp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);padding:14px 11px 6px}
.side .foot{margin-top:18px;padding:11px;border:1px solid var(--line);border-radius:10px;font-size:11px;color:var(--ink-4)}
.side .foot b{color:var(--ink-2);font-weight:700}

/* main */
.main{min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--line);background:rgba(246,248,250,.8);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.top h1{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.025em}
.top .sub{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.top .right{display:flex;align-items:center;gap:10px}
.search{font-size:12.5px;color:var(--ink-4);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:200px;background:var(--panel)}
.av{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.view{padding:24px 28px 48px}

/* kicker */
.kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);background:var(--panel);border:1px solid var(--line);padding:6px 12px 6px 10px;border-radius:999px;margin-bottom:16px}
.kick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* grid + cards */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card.top{overflow:hidden}
.card.top::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.card h3{font-family:var(--disp);font-weight:700;font-size:15px;margin-bottom:4px}
.kpi .v{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.kpi .v.a{color:var(--accent)}
.kpi .l{font-size:12px;color:var(--ink-3);margin-top:8px}
.kpi .d{font-size:11.5px;font-weight:700;margin-top:4px}
.d.up{color:var(--accent)} .d.dn{color:var(--err)}

/* chips/labels */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;border-radius:999px;padding:3px 9px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--panel)}
.chip .dot{width:6px;height:6px;border-radius:50%}
.chip.a{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.chip.w{color:var(--warn);border-color:#e2c48a;background:#fff7ec}
.chip.e{color:var(--err);border-color:#e6b3ae;background:var(--err-soft)}
.pill{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-radius:5px;padding:2px 6px;color:#fff}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl thead th{background:var(--navy);color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--surface)}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl .name{font-weight:600;color:var(--ink)}
.tbl-wrap{overflow-x:auto;border-radius:var(--r)}
.sites-cell{display:flex;gap:4px;flex-wrap:wrap}

/* toolbar/filters */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fbtn{font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 12px;cursor:pointer}
.fbtn:hover{border-color:var(--line-2)}
.fbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn{font-size:12.5px;font-weight:700;color:#fff;background:var(--grad);border:none;border-radius:8px;padding:9px 15px;cursor:pointer}
.inp{font-size:12.5px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--panel);min-width:220px}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.kanban{grid-template-columns:1fr 1fr}}
.kcol{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.kcol .kh{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);padding:4px 6px 8px}
.kcol .kh .c{font-family:var(--mono);color:var(--ink-4)}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px;margin-bottom:8px}
.kcard .t{font-size:12.5px;font-weight:600;line-height:1.3}
.kcard .meta{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.kcard .amt{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:12px}
.kcard .who{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--ink-3)}
.kcard .who .av{width:20px;height:20px;font-size:9px}

/* chart */
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:10px}
.bars .b{flex:1;background:var(--grad);border-radius:5px 5px 0 0;min-height:4px;position:relative}
.bars .b span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10px;color:var(--ink-4);font-family:var(--mono)}

/* site cards */
.sitecard{position:relative;overflow:hidden}
.sitecard .bar{height:3px;border-radius:3px;margin:-20px -20px 14px;background:var(--grad)}
.sitecard .dom{font-family:var(--disp);font-weight:800;font-size:16px}
.sitecard .ni{font-size:12px;color:var(--ink-3);margin-top:2px;min-height:34px}
.sitecard .row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sitecard .row .n{font-family:var(--disp);font-weight:800;font-size:18px}

/* bot chat */
.chat{display:flex;flex-direction:column;gap:9px;max-width:560px}
.msg{max-width:78%;font-size:13px;line-height:1.4;padding:9px 12px;border-radius:11px}
.msg.i{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-top-left-radius:3px}
.msg.o{align-self:flex-end;background:var(--accent-soft);border:1px solid #cfe4dc;border-top-right-radius:3px}
.msg .tm{font-size:9px;color:var(--ink-4);margin-top:3px;text-align:right}
.msg .doc{margin-top:6px;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:11px;font-family:var(--mono);display:flex;justify-content:space-between}
.msg .doc b{color:var(--accent)}

/* content calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .d{aspect-ratio:1.1;border:1px solid var(--line);border-radius:8px;padding:6px;font-size:10px;color:var(--ink-4);position:relative;background:var(--panel)}
.cal .d .pins{position:absolute;bottom:6px;left:6px;right:6px;display:flex;gap:3px}
.cal .d .pin{height:4px;border-radius:3px;flex:1}
.ig{background:linear-gradient(90deg,#f58529,#dd2a7b)}.fb{background:#1877f2}.tt{background:#111}

.sec-title{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.02em;margin:26px 0 12px}
.muted{color:var(--ink-3)} .mono{font-family:var(--mono)}
.note{font-size:12px;color:var(--ink-4);border-left:2px solid var(--line-2);padding-left:12px;margin-top:14px}
.flow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.flow .st{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;position:relative}
.flow .st .n{font-family:var(--mono);font-size:11px;color:var(--accent)}
.flow .st h4{font-family:var(--disp);font-weight:700;font-size:13.5px;margin:5px 0 4px}
.flow .st p{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.flow .arr{display:flex;align-items:center;color:var(--accent);font-size:18px;padding:0 6px}
@media(max-width:900px){.flow .arr{display:none}.app{grid-template-columns:1fr}.side{display:none}}

/* ---- interactive additions ---- */
.btn-sm{font-size:11.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:7px;padding:5px 10px;cursor:pointer}
.btn-sm:hover{background:#d8f1e7}
.btn-sm.g{color:var(--ink-3);background:var(--panel);border-color:var(--line)}
.btn-sm.g:hover{border-color:var(--line-2)}
.btn-sm.r{color:var(--err);background:#fff;border-color:#f0c9c6}
.icbtn{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font-size:14px;cursor:pointer;line-height:1}
.icbtn:hover{border-color:var(--accent);color:var(--accent)}
.pub-chip{cursor:pointer;user-select:none;transition:opacity .15s}
.pub-chip.off{opacity:.28;filter:grayscale(1)}
.pub-chip:hover{outline:2px solid var(--accent-line)}
.cellacts{display:flex;gap:5px;align-items:center}
.stock-ctrl{display:inline-flex;align-items:center;gap:6px}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(700px 360px at 70% 0%,rgba(16,185,129,.1),transparent 60%),var(--bg)}
.login{width:360px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
.login .mark{width:40px;height:40px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:var(--disp);font-size:18px;margin-bottom:14px}
.login h2{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.02em}
.login p{font-size:12.5px;color:var(--ink-3);margin:2px 0 18px}
.login label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:12px 0 5px}
.login input{width:100%;font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.login input:focus{outline:none;border-color:var(--accent)}
.login .btn{width:100%;margin-top:18px;padding:11px;justify-content:center}
.login .err{color:var(--err);font-size:12px;margin-top:10px;min-height:16px}
.login .hint{font-size:11px;color:var(--ink-4);margin-top:12px;text-align:center}
.modal-bg{position:fixed;inset:0;background:rgba(10,13,21,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{width:460px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;max-height:88vh;overflow:auto}
.modal h3{font-family:var(--disp);font-weight:800;font-size:17px;margin-bottom:14px}
.modal label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:10px 0 4px}
.modal input,.modal select{width:100%;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.modal .pubrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.logout{font-size:12px;color:var(--ink-3);border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 11px;cursor:pointer}
.logout:hover{border-color:var(--line-2)}
.botbar{display:flex;gap:8px;margin-top:8px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:13px;padding:10px 18px;border-radius:10px;z-index:60;opacity:0;transition:opacity .2s}
.toast.on{opacity:1}