/* Everlist — one stylesheet for both dashboards. Tokens match the design canvas. */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#FBFBFC; --ink:#0C0E13; --ink-2:#3A3F4B; --muted:#626877; --faint:#8B909C;
  --line:#E4E6EB; --line-2:#EEF0F3; --accent:#3B2EE6; --accent-soft:#EEECFF; --accent-ink:#3B2EE6;
  --ok:#127A4B; --ok-bg:#E3F5EC; --ok-dot:#1F9D61; --warn:#8A5A00; --warn-bg:#FFF3D6; --warn-dot:#C98A0B;
  --bad:#B42318; --bad-bg:#FDE7E5; --bad-dot:#D93036;
  --r-card:22px; --r-box:16px; --r-btn:12px;
  --shadow:0 1px 2px rgba(12,14,19,.05); --shadow-pop:0 30px 70px -24px rgba(12,14,19,.32);
  --font:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
*{scrollbar-width:none}*::-webkit-scrollbar{display:none;width:0;height:0}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3{margin:0;letter-spacing:-.02em}
h1{font-size:34px;line-height:1.1;font-weight:600;letter-spacing:-.035em}
h2{font-size:17px;font-weight:600}
h3{font-size:15px;font-weight:600}
p{margin:0}
.muted{color:var(--muted)} .faint{color:var(--faint)} .mono{font-family:var(--mono)} .small{font-size:12.5px}
.ic{flex:none;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shell ---------- */
.shell{min-height:100vh;display:flex;flex-wrap:wrap}
.side{flex:0 0 252px;background:var(--surface-2);border-right:1px solid var(--line);padding:20px 14px 18px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side.dark{background:#0C0E13;border-right-color:#1E2129;color:#E8EAEE}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;font-weight:600;font-size:18px;letter-spacing:-.02em;color:inherit;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .logo{width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center}
.side.dark .brand .logo{background:#fff;color:var(--ink)}
.brand small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:0}
.side.dark .brand small{color:#9AA0AC}
.ws-chip{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 10px;margin-bottom:8px;border-radius:12px;border:1px solid var(--line);background:#fff}
.ws-chip .av{width:28px;height:28px;font-size:12px}
.ws-chip b{display:block;font-weight:500;line-height:1.2}
.ws-chip span{font-size:12px;color:var(--muted)}
.nav-label{font-size:12px;color:var(--muted);padding:12px 12px 4px;font-weight:500}
.side.dark .nav-label{color:#8B909C}
.nav{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 12px;border-radius:12px;color:var(--ink-2);font-weight:500;text-decoration:none}
.nav:hover{background:#EEF0F3;color:var(--ink);text-decoration:none}
.nav.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(12,14,19,.06),0 0 0 1px var(--line)}
.side.dark .nav{color:#C9CDD5}.side.dark .nav:hover{background:#1A1D25;color:#fff}
.side.dark .nav.on{background:#1F2330;color:#fff;box-shadow:none}
.nav .n{margin-left:auto;font-size:12px;color:var(--muted)}
.nav .dot-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--bad-dot);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.nav.locked{color:var(--faint)}
.nav.locked .lk{margin-left:auto}
.side-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:6px}
.plan-card{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none}
.plan-card:hover{text-decoration:none;border-color:#C9CDD5}
.meter{height:5px;border-radius:99px;background:#EEF0F3;overflow:hidden}.meter i{display:block;height:100%;border-radius:99px;background:var(--ink)}
.meter.warn i{background:var(--warn-dot)} .meter.bad i{background:var(--bad-dot)}

.main-col{flex:999 1 640px;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 32px;border-bottom:1px solid var(--line);background:rgba(244,245,247,.92);backdrop-filter:saturate(1.4) blur(8px)}
.topbar .search{flex:1 1 320px;max-width:640px;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.topbar .search input{flex:1;border:0;outline:0;background:transparent;font:inherit;color:var(--ink);min-width:0}
.topbar .grow{flex:1}
.icon-btn{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{border-color:#C9CDD5}
.icon-btn .count{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--bad-dot);color:#fff;font:600 10px/16px var(--font);border:2px solid #fff;box-sizing:content-box}
.av{width:40px;height:40px;border-radius:50%;background:#E3DED3;display:grid;place-items:center;font-weight:600;color:var(--ink);flex:none;font-size:14px}
.menu-btn{display:none}
.content{width:100%;max-width:1280px;margin:0 auto;padding:36px 48px 80px;display:flex;flex-direction:column;gap:22px}
.banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 32px;background:var(--ink);color:#fff;font-size:13.5px}
.banner form{margin-left:auto}
.banner .btn{min-height:34px;background:#fff;color:var(--ink);border-color:#fff}

/* ---------- popover ---------- */
.pop{position:relative}
.pop-panel{position:absolute;right:0;top:52px;width:400px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-pop);overflow:hidden;display:none;z-index:40}
.pop.open .pop-panel{display:block}
.pop-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.pop-list{max-height:420px;overflow-y:auto}
.pop-item{display:flex;gap:12px;padding:12px 18px;border-top:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.pop-item:hover{background:var(--surface-2);text-decoration:none}
.pop-item.unread{background:#FAFAFF}
.pop-item small{display:block;color:var(--muted);font-size:12.5px}
.menu-list a,.menu-list button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 18px;border:0;background:none;font:500 14px var(--font);color:var(--ink);text-decoration:none;cursor:pointer;border-top:1px solid var(--line-2);text-align:left}
.menu-list a:hover,.menu-list button:hover{background:var(--surface-2);text-decoration:none}

/* ---------- page header ---------- */
.page-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.page-head .titles{flex:1 1 360px;min-width:0}
.eyebrow{font:500 12px var(--mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.page-head h1{margin-top:6px}
.page-head .sub{margin-top:8px;color:var(--muted);font-size:15.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- cards + grids ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px;min-width:0}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-head .more{margin-left:auto;font-size:13px;font-weight:500}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,1fr) 360px;align-items:start}
.g-wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.kpi .l{color:var(--muted);font-size:13px}
.kpi .v{font:600 30px/1.15 var(--font);letter-spacing:-.03em}
.kpi .d{font-size:13px;font-weight:500;color:var(--muted)}
.kpi .d.up{color:var(--ok)}
.stack{display:flex;flex-direction:column;gap:12px}
.row-x{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spacer{flex:1}
.divider{height:1px;background:var(--line-2);margin:4px 0}

/* ---------- lists + tables ---------- */
.list-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line-2)}
.list-row:first-child{border-top:0}
.list-row .grow{flex:1;min-width:0}
.list-row b{font-weight:500}
.list-row small{display:block;color:var(--muted);font-size:12.5px}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
table.t{width:100%;border-collapse:collapse;min-width:720px}
.t th{text-align:left;font-weight:500;font-size:12.5px;color:var(--muted);padding:13px 16px;border-bottom:1px solid var(--line-2);white-space:nowrap;background:#fff}
.t td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr.click{cursor:pointer}.t tr.click:hover td{background:var(--surface-2)}
.t td.num,.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.t .thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#EEF0F3;flex:none;display:block}
.cell-main{display:flex;align-items:center;gap:12px;min-width:0}
.cell-main b{display:block;font-weight:500}
.cell-main small{color:var(--muted);font-size:12.5px}
.pager{display:flex;align-items:center;gap:12px;justify-content:center;padding:12px}

/* ---------- pills + marks ---------- */
.pill{display:inline-block;font-size:12px;font-weight:500;padding:3px 10px;border-radius:99px;white-space:nowrap;background:#F1F2F5;color:var(--ink-2)}
.pill-ok{background:var(--ok-bg);color:var(--ok)} .pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)} .pill-ai{background:var(--accent-soft);color:var(--accent-ink)}
.pill-dark{background:var(--ink);color:#fff}
.mark{border-radius:9px;display:inline-grid;place-items:center;font:600 11px var(--font);flex:none}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.ok{background:var(--ok-dot)}.dot.warn{background:var(--warn-dot)}.dot.bad{background:var(--bad-dot)}.dot.off{background:#C9CDD5}

/* ---------- buttons + forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-btn);border:1px solid var(--line);background:#fff;color:var(--ink);font:500 14px var(--font);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:#C9CDD5;text-decoration:none;color:var(--ink)}
.btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.pri:hover{background:#262A35;color:#fff}
.btn.ai{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--bad)} .btn.danger:hover{border-color:#F4B7B1}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink);cursor:pointer}
form.inline{display:inline}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span,.field>label{font-size:13px;font-weight:500;color:var(--ink-2)}
.field .hint{font-size:12.5px;color:var(--muted)}
.input,select.input,textarea.input{width:100%;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;font:400 14px var(--font);color:var(--ink);outline:none}
textarea.input{min-height:110px;resize:vertical;line-height:1.5}
.input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(12,14,19,.08)}
.input.mono{font-family:var(--mono);font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.check small{display:block;color:var(--muted)}
.switch{position:relative;display:inline-block;width:40px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;border-radius:99px;background:#D6D9DF;transition:.15s;cursor:pointer}
.switch span:before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--ink)}
.switch input:checked+span:before{transform:translateX(16px)}
.seg{display:inline-flex;padding:4px;border-radius:14px;background:#EEF0F3;gap:2px;flex-wrap:wrap}
.seg a,.seg button,.seg label{min-height:36px;padding:0 14px;border-radius:10px;border:0;background:transparent;font:500 13px var(--font);color:var(--ink-2);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}
.seg .on,.seg input:checked+span{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.seg label input{position:absolute;opacity:0}
.seg label span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:10px}
.seg label{padding:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a{padding:10px 14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- alerts ---------- */
.flash{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:14px;font-weight:500;border:1px solid transparent}
.flash.success{background:var(--ok-bg);color:var(--ok)}
.flash.error{background:var(--bad-bg);color:var(--bad)}
.flash.info{background:var(--accent-soft);color:var(--accent-ink)}
.flash.warn{background:var(--warn-bg);color:var(--warn)}
.note{padding:14px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);font-size:13.5px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:44px 20px;color:var(--muted)}
.empty b{color:var(--ink);font-size:16px;font-weight:600}
.empty .btn{margin-top:8px}
.code{font:13px/1.6 var(--mono);background:#0C0E13;color:#D8DBE2;border-radius:14px;padding:14px 16px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.kbd{font:500 12px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:2px 7px;background:var(--surface-2)}

/* ---------- auth pages ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:48px 8vw;gap:22px;background:#fff}
.auth-form .card{border:0;padding:0}
.auth-form h1{font-size:32px}
.auth-art{background:#0C0E13;color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.auth-art h2{font-size:40px;line-height:1.05;letter-spacing:-.04em;max-width:460px}
.auth-art .demo{background:#161922;border:1px solid #262A35;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;max-width:480px}
.auth-art .demo .line{display:flex;align-items:center;gap:10px;color:#C9CDD5;font-size:13.5px}
.auth-narrow{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.auth-narrow .card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.plan{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px}
.plan.hi{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan .price{font:600 40px/1 var(--font);letter-spacing:-.04em}
.plan .price small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plan li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.plan li .ic{color:var(--ok);margin-top:2px}
.plan li.no{color:var(--faint)} .plan li.no .ic{color:var(--faint)}

/* ---------- chat ---------- */
.chat{display:grid;grid-template-columns:320px minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;min-height:620px}
.chat.three{grid-template-columns:320px minmax(0,1fr) 300px}
.chat-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.chat-list .head{padding:14px;border-bottom:1px solid var(--line-2);display:flex;gap:8px;flex-wrap:wrap}
.chat-list .items{overflow-y:auto;flex:1}
.conv{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-2);color:var(--ink);text-decoration:none}
.conv:hover{background:var(--surface-2);text-decoration:none}
.conv.on{background:#F4F5F7}
.conv .grow{flex:1;min-width:0}
.conv b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv small{display:block;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread{display:flex;flex-direction:column;min-width:0;min-height:620px}
.thread .head{padding:16px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2);max-height:62vh}
.msg{max-width:76%;display:flex;flex-direction:column;gap:4px}
.msg .bubble{padding:10px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);white-space:pre-wrap;word-wrap:break-word}
.msg .meta{font-size:11.5px;color:var(--faint)}
.msg.mine{align-self:flex-end;align-items:flex-end}
.msg.mine .bubble{background:var(--ink);color:#fff;border-color:var(--ink);border-bottom-right-radius:6px}
.msg.theirs .bubble{border-bottom-left-radius:6px}
.msg.note .bubble{background:var(--warn-bg);border-color:#F1DDA6;color:#5C3D00}
.msg .bubble a{color:inherit;text-decoration:underline}
.composer{border-top:1px solid var(--line-2);padding:12px;display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;background:#fff}
.composer textarea{flex:1 1 300px;min-height:46px;max-height:180px}
.chat-side{border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:14px}

/* ---------- mobile ---------- */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g-side,.g-wide{grid-template-columns:1fr}
  .chat.three{grid-template-columns:300px minmax(0,1fr)}
  .chat.three .chat-side{display:none}
}
@media (max-width:900px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-102%);transition:transform .2s;box-shadow:var(--shadow-pop)}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:'';position:fixed;inset:0;background:rgba(12,14,19,.35);z-index:50}
  .menu-btn{display:grid}
  .topbar{padding:10px 16px}
  .topbar .search{order:9;flex-basis:100%;max-width:none}
  .content{padding:22px 16px 60px}
  h1{font-size:28px}
  .g2,.form-grid{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth-art{display:none}
  .auth-form{padding:36px 20px}
  .chat,.chat.three{grid-template-columns:1fr}
  .chat-list{border-right:0;border-bottom:1px solid var(--line)}
  .chat.has-thread .chat-list{display:none}
  .msg{max-width:90%}
  .banner{padding:10px 16px}
}
@media (max-width:560px){ .g4{grid-template-columns:1fr} .kpi .v{font-size:26px} }
@media print{ .side,.topbar,.no-print{display:none!important} .content{padding:0} body{background:#fff} }

[hidden]{display:none!important}
.grid>*{min-width:0}
.main-col{max-width:100%}
.sr{left:0;top:0}
.table-wrap{position:relative}