/* ── Mani Spot Channel Manager — design system (tokens from README.md) ── */
:root{
  --bg:#F6F4EF; --ink:#16262E; --card:#FFFFFF;
  --line:#E7E2D8; --line2:#D8D2C6;
  --mut:#7A8890; --mut2:#98A5AA; --mut3:#5F7078;
  --side1:#0E3A42; --side2:#092931; --side-mut:#7FA6AC;
  --teal:#0F5960; --logo1:#177A84; --logo2:#0E4A52;
  --orange:#D97848; --cta:#D2543F;
  --ok:#256B4A; --ok-bg:#E4F2EA; --pos:#2F8A5F;
  --warn:#8A5F1B; --warn-bg:#F7EEDC; --amber:#B9752F; --danger:#9C3A2F;
  --air:#E0565B; --bkg:#0B6EC5; --vrb:#1F4C8F; --dir:#F5B301;
  /* open/bookable nights on live-synced properties */
  --free:#E4F6E5; --free-hover:#C7EBCA; --free-line:#BBE0BE;
  /* channel-blocked nights — still sellable as a direct/offline booking */
  --blocked:#FBEFC4; --blocked-hover:#F5E29B; --blocked-line:#E5D08A;
  --exp:#20315F; --ago:#7A2E4A; --tri:#00A680; --htg:#274E8D;
  --r-card:14px; --r-modal:18px; --r-btn:10px; --r-chip:999px;
  --sh-card:0 1px 2px rgba(22,38,46,.04); --sh-modal:0 24px 64px rgba(9,41,49,.35);
  --font-d:"Bricolage Grotesque",system-ui,sans-serif;
  --font-b:"Instrument Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--font-b);-webkit-font-smoothing:antialiased}
input,select,textarea,button{font:inherit;color:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)!important}
button{cursor:pointer;border:none;background:none}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--orange)}
h1,h2,h3,.display{font-family:var(--font-d)}
.num{font-variant-numeric:tabular-nums}

/* boot splash */
.boot-splash{height:100vh;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--mut)}

/* logo */
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--logo1),var(--logo2));color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px var(--font-d);flex-shrink:0}

/* ── shell ── */
.shell{display:flex;height:100vh;overflow:hidden}
.sidebar{width:238px;flex-shrink:0;background:linear-gradient(180deg,var(--side1),var(--side2));color:#fff;display:flex;flex-direction:column;padding:18px 14px;transition:transform .25s ease}
.side-head{display:flex;align-items:center;gap:11px;padding:2px 8px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.side-head .t{font:700 15px var(--font-d)}
.side-head .s{font-size:11px;color:var(--side-mut)}
.nav{flex:1;overflow-y:auto;padding-top:12px;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--side-mut);font-weight:500;min-height:38px}
.nav a svg{width:16px;height:16px;flex-shrink:0}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav a.on{color:#fff;background:rgba(255,255,255,.10)}
.side-user{border-top:1px solid rgba(255,255,255,.08);padding-top:12px;display:flex;align-items:center;gap:10px}
.side-user .n{font-weight:600;font-size:13px;color:#fff}
.side-user .r{font-size:11px;color:var(--side-mut);text-transform:capitalize}
.side-user button{color:var(--side-mut);font-size:11px;padding:6px}
.side-user button:hover{color:#fff}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--card);border-bottom:1px solid var(--line)}
.topbar h1{font:700 19px var(--font-d)}
.topbar .grow{flex:1}
.gsearch{position:relative}
.gsearch input{width:220px;padding:8px 12px 8px 32px;border:1px solid var(--line2);border-radius:var(--r-btn);background:var(--bg);font-size:13px}
.gsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--mut)}
.content{flex:1;overflow-y:auto;padding:22px;-webkit-overflow-scrolling:touch}
.burger{display:none;width:40px;height:40px;border-radius:9px;align-items:center;justify-content:center;color:var(--ink)}
.burger:hover{background:var(--bg)}
.scrim{display:none;position:fixed;inset:0;background:rgba(9,41,49,.45);z-index:39}

/* ── buttons / inputs / chips ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r-btn);font-weight:600;font-size:13px;border:1px solid var(--line2);background:var(--card);min-height:38px;white-space:nowrap}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.btn.pri{background:var(--cta);border-color:var(--cta);color:#fff}
.btn.pri:hover{filter:brightness(1.07);color:#fff}
.btn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.teal:hover{filter:brightness(1.12);color:#fff}
.btn.sm{padding:6px 11px;min-height:32px;font-size:12px}
.btn.ghost{border-color:transparent;color:var(--mut3)}
.btn.ghost:hover{color:var(--teal)}
.btn.danger{color:var(--danger);border-color:var(--line2)}
.btn.danger:hover{border-color:var(--danger)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn .spin{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mut3)}
.field input,.field select,.field textarea{padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r-btn);background:#fff;font-size:13.5px;min-height:40px}
.field textarea{min-height:74px;resize:vertical}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-chip);font-size:11.5px;font-weight:600}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:#F7E3E0;color:var(--danger)}
.chip.mut{background:var(--bg);color:var(--mut3);border:1px solid var(--line)}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.avatar{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}

/* ── cards / grids / tables ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:18px}
.card h3{font:700 14.5px var(--font-d);margin-bottom:4px}
.card .sub{font-size:12px;color:var(--mut);margin-bottom:12px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g23{grid-template-columns:2fr 1fr}
.kpi .l{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mut3)}
.kpi .v{font:800 26px/1.25 var(--font-d);margin-top:5px}
.kpi .d{font-size:12px;color:var(--mut);margin-top:3px}
.kpi .d .up{color:var(--pos);font-weight:600}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mut2);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--bg)}
.tblwrap{overflow-x:auto}
.empty{padding:34px;text-align:center;color:var(--mut)}
.row{display:flex;align-items:center;gap:10px}
.row .grow{flex:1;min-width:0}
.muted{color:var(--mut);font-size:12px}
.sect{margin-bottom:18px}

/* ── feed / lists ── */
.feed-item{display:flex;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px;align-items:flex-start}
.feed-item:last-child{border-bottom:none}
.feed-item .t{color:var(--mut2);font-size:11.5px;white-space:nowrap;padding-top:1px}
.feed-item.new{animation:fadein .5s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}

/* ── bars chart ── */
.bars{display:flex;align-items:flex-end;gap:4px;height:120px;padding-top:8px}
.bars .b{flex:1;background:var(--teal);border-radius:4px 4px 0 0;min-height:3px;position:relative;opacity:.9}
.bars .b:hover{opacity:1}
.bars .b .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:5}
.bars .b:hover .tip{display:block}

/* ── sync strip ── */
.sync-strip{display:flex;gap:10px;flex-wrap:wrap}
.sync-pill{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--card);font-size:12px}
.sync-pill .ago{color:var(--mut);font-variant-numeric:tabular-nums}
.sync-pill.busy .ago{color:var(--amber)}

/* ── calendar ── */
.cal-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);max-height:calc(100vh - 190px)}
.cal-grid{min-width:max-content;--cell:36px}
.cal-head{position:sticky;top:0;background:var(--card);z-index:3;border-bottom:1px solid var(--line)}
.cal-months,.cal-days{display:flex}
.cal-mband{flex-shrink:0;padding:5px 8px 3px;font:700 11px var(--font-d);color:var(--mut3);border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;text-transform:uppercase;letter-spacing:.4px}
.cal-prop-col{width:172px;flex-shrink:0;position:sticky;left:0;background:var(--card);z-index:2;border-right:1px solid var(--line);padding:8px 12px}
.cal-months .cal-prop-col{padding:5px 12px 3px}
.cal-day{width:var(--cell);flex-shrink:0;text-align:center;padding:7px 0 6px;font-size:10px;color:var(--mut2);overflow:hidden}
.cal-day b{display:block;font-size:12px;color:var(--ink)}
.cal-day.wknd{background:#FBF9F4}
.cal-day.today{box-shadow:inset 0 -2px 0 var(--cta)}
.cal-day.today b{color:var(--cta)}
.cal-grid.dense .cal-day{padding:4px 0 3px;font-size:0}
.cal-grid.dense .cal-day b{font-size:9.5px}
.cal-grid.tiny .cal-day{padding:3px 0 2px;font-size:0}
.cal-grid.tiny .cal-day b{font-size:8px}
.cal-row{display:flex;border-bottom:1px solid var(--line);position:relative;height:52px}
.cal-row:last-child{border-bottom:none}
.cal-prop-col .pn{font-weight:600;font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-prop-col .pa{font-size:10.5px;color:var(--mut)}
.cal-cells{position:relative;display:flex}
.cal-cell{width:var(--cell);flex-shrink:0;border-right:1px solid #F1EDE4;height:52px}
.cal-cell.wknd{background:#FBF9F4}
/* open/bookable night on a live-synced property — click to take a direct booking */
.cal-cell.free{background:var(--free);box-shadow:inset 0 0 0 1px var(--free-line);cursor:pointer}
.cal-cell.free:hover{background:var(--free-hover)}
.cal-cell.free:hover::after{content:'+';display:flex;align-items:center;justify-content:center;height:100%;
  color:#2F6B34;font:700 15px/1 var(--font-d)}
.cal-grid.tiny .cal-cell.free:hover::after,.cal-grid.dense .cal-cell.free:hover::after{font-size:11px}
.cal-cell.mstart{border-left:1px solid var(--line2)}
.cal-grid.tiny .cal-cell,.cal-grid.dense .cal-cell{border-right-color:transparent}
.cal-grid.tiny .cal-cell.wkstart,.cal-grid.dense .cal-cell.wkstart{border-left:1px solid #F1EDE4}
.cal-blk{position:absolute;top:9px;height:34px;border-radius:8px;color:#fff;font-size:10.5px;font-weight:600;display:flex;align-items:center;padding:0 8px;overflow:hidden;white-space:nowrap;cursor:pointer;z-index:1;box-shadow:0 1px 2px rgba(22,38,46,.15)}
.cal-blk:hover{filter:brightness(1.08)}
.cal-blk.pending{opacity:.6;border:1.5px dashed rgba(255,255,255,.8)}
/* direct/offline bookings are yellow — white text would be unreadable on it */
.cal-blk.dir{color:#4A3805;text-shadow:none}
.cal-blk.dir.pending{border-color:rgba(74,56,5,.55)}
/* Dates the channels report as unavailable. They stay blocked for the OTAs, but the
   team can still sell them directly — hence light yellow (not dead grey) and clickable. */
.cal-blk.blk{background:var(--blocked);color:#6B5713;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--blocked-line);font-weight:600;z-index:1}
.cal-blk.blk:hover{background:var(--blocked-hover)}
.cal-blk.blk.manual{cursor:pointer}
/* A real booking always renders above a blocked-date strip. */
.cal-blk:not(.blk){z-index:2}

/* ── channel-freeze banner (read-only mode) ── */
.freeze-bar{background:#E4EDF7;border-bottom:1px solid #A9C6E8;color:#1B4C7E;
  font:500 12.5px/1.5 var(--font-b,system-ui);padding:10px 20px}
.freeze-bar b{font-weight:800;letter-spacing:.3px}
@media (max-width:560px){.freeze-bar{font-size:11.5px;padding:9px 14px}}
.frozen-card{border-left:3px solid #2E6FB0;background:#F2F7FC}

/* ── offline banner ── */
.offline-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#4A3805;color:#FFE9A8;
  font:600 12.5px/1.4 var(--font-b,system-ui);padding:9px 16px;text-align:center;
  box-shadow:0 -2px 10px rgba(22,38,46,.18)}
@media (max-width:560px){.offline-bar{font-size:11.5px;padding:8px 12px}}

/* ── inbox ── */
.inbox{display:grid;grid-template-columns:320px 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow:hidden;height:calc(100vh - 130px)}
.threads{border-right:1px solid var(--line);overflow-y:auto}
.thread{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.thread:hover,.thread.on{background:var(--bg)}
.thread .nm{font-weight:600;font-size:13px}
.thread .pv{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.thread .badge{background:var(--cta);color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.convo{display:flex;flex-direction:column;min-width:0}
.convo-head{padding:13px 16px;border-bottom:1px solid var(--line)}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.msg{max-width:72%;padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.45}
.msg.in{background:var(--card);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.out{background:var(--teal);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg .mt{font-size:10.5px;opacity:.65;margin-top:3px}
.replybox{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.replybox .qr{display:flex;gap:6px;flex-wrap:wrap}
.replybox .qr button{font-size:11.5px;padding:5px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--mut3);background:var(--bg)}
.replybox .qr button:hover{color:var(--teal);border-color:var(--teal)}
.replybox .send{display:flex;gap:8px}
.replybox textarea{flex:1;border:1px solid var(--line2);border-radius:var(--r-btn);padding:9px 12px;resize:none;min-height:42px;max-height:110px}

/* ── reviews ── */
.stars{color:var(--amber);letter-spacing:1px;font-size:13px}
.review .body{font-size:13.5px;margin:8px 0 10px;line-height:1.55}
.review .reply{background:var(--bg);border-left:3px solid var(--teal);border-radius:0 9px 9px 0;padding:10px 13px;font-size:13px;margin-top:10px}

/* ── pricing ── */
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:var(--r-btn);overflow:hidden;width:max-content}
.stepper button{width:38px;height:40px;font-size:17px;color:var(--mut3);background:var(--bg)}
.stepper button:hover{color:var(--teal)}
.stepper .v{min-width:86px;text-align:center;font:700 16px var(--font-d);padding:0 8px}
.rule{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:none}
.rule .rt{font-weight:600;font-size:13px}
.rule .rd{font-size:11.5px;color:var(--mut)}
.switch{position:relative;width:38px;height:22px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .tr{position:absolute;inset:0;background:var(--line2);border-radius:999px;transition:.18s}
.switch .tr:before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+.tr{background:var(--teal)}
.switch input:checked+.tr:before{transform:translateX(16px)}

/* ── crm ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{padding:9px 15px;font-weight:600;font-size:13px;color:var(--mut3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;min-height:42px}
.tabs button.on{color:var(--teal);border-bottom-color:var(--teal)}
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
.stage h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mut3);margin-bottom:9px;display:flex;justify-content:space-between}
.deal{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:9px;box-shadow:var(--sh-card);font-size:12.5px}
.deal .dt{font-weight:600;line-height:1.35}
.deal .dv{font:700 14px var(--font-d);margin-top:5px}
.deal .adv{margin-top:8px;width:100%;font-size:11px;padding:5px;border:1px solid var(--line2);border-radius:7px;color:var(--mut3)}
.deal .adv:hover{color:var(--teal);border-color:var(--teal)}
.donut{width:130px;height:130px;border-radius:50%;flex-shrink:0}
.donut-hole{width:78px;height:78px;background:var(--card);border-radius:50%;margin:26px}

/* ── ops ── */
.ops-job{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.ops-job:last-child{border-bottom:none}
.ops-badge{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;letter-spacing:.3px;flex-shrink:0}

/* ── channels ── */
.chan-card .ch-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chan-card .ch-name{font:700 15px var(--font-d)}
.chan-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:12px;color:var(--mut3);margin:10px 0}
.chan-meta b{color:var(--ink);font-weight:600}
.addon{display:flex;gap:12px;align-items:flex-start}
.listing-row{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.listing-row:last-child{border-bottom:none}
.listing-row input{flex:1;min-width:180px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px;font-size:12px}

/* ── layers: modal, drawer, popover, toast ── */
.overlay{position:fixed;inset:0;background:rgba(9,41,49,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:var(--card);border-radius:var(--r-modal);box-shadow:var(--sh-modal);width:100%;max-width:480px;max-height:92vh;overflow-y:auto;padding:22px}
.modal h2{font:700 17px var(--font-d);margin-bottom:16px}
.modal .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
.drawer-wrap{position:fixed;inset:0;z-index:50;background:rgba(9,41,49,.35)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:420px;max-width:94vw;background:var(--card);box-shadow:var(--sh-modal);padding:22px;overflow-y:auto;animation:slidein .22s ease}
@keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer h2{font:700 17px var(--font-d)}
.drawer .close,.modal .close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;color:var(--mut);font-size:17px}
.drawer .close:hover,.modal .close:hover{background:var(--bg);color:var(--ink)}
.modal{position:relative}
.kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--mut3)}
.kv .v{font-weight:600;text-align:right}
.popover{position:absolute;top:calc(100% + 8px);right:0;width:330px;max-height:400px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-modal);z-index:45;padding:8px 14px}
.bellwrap{position:relative}
.bell{position:relative;width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--mut3)}
.bell:hover{background:var(--bg);color:var(--teal)}
.bell .bdg{position:absolute;top:5px;right:5px;background:var(--cta);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px}
#toasts{position:fixed;bottom:20px;right:20px;z-index:80;display:flex;flex-direction:column;gap:9px}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;box-shadow:var(--sh-modal);display:flex;align-items:center;gap:12px;font-size:13px;max-width:380px;animation:fadein .3s ease}
.toast button{color:#8FD0C6;font-weight:700;font-size:12.5px}
.toast button:hover{color:#fff}
.toast.err{background:var(--danger)}

/* ── login ── */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.login .card{width:100%;max-width:390px;padding:30px}
.login .lh{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login h1{font:800 19px var(--font-d)}
.login .err{background:#F7E3E0;color:var(--danger);border-radius:9px;padding:9px 13px;font-size:12.5px;margin-bottom:13px}

/* filters bar */
.filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.fchip{padding:7px 14px;border-radius:999px;border:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--mut3);background:var(--card);min-height:36px}
.fchip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.filters input[type=search]{padding:8px 13px;border:1px solid var(--line2);border-radius:var(--r-btn);min-width:200px;background:var(--card)}

/* ── responsive ── */
@media (max-width:1200px){.g4{grid-template-columns:repeat(2,1fr)}.pipe{grid-template-columns:repeat(3,1fr)}}
@media (max-width:960px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .scrim.show{display:block}
  .burger{display:flex}
  .g23,.g3,.g2{grid-template-columns:1fr}
  .gsearch input{width:130px}
  .inbox{grid-template-columns:1fr;height:auto}
  .inbox.viewing .threads{display:none}
  .inbox:not(.viewing) .convo{display:none}
  .threads{max-height:70vh}
  .convo .msgs{min-height:40vh}
  .pipe{grid-template-columns:repeat(2,1fr)}
  .content{padding:14px}
  .topbar{padding:12px 14px}
  .drawer{width:100vw;max-width:100vw}
}
@media (max-width:560px){.g4{grid-template-columns:1fr}.pipe{grid-template-columns:1fr}.gsearch{display:none}}