/* ============================================================
Fuse — design system
Light is the default. [data-theme="dark"] on flips it.
============================================================ */
:root{
--bg:#f6f7f9;
--surface:#ffffff;
--surface-2:#fbfcfd;
--surface-3:#f2f4f7;
--sidebar:#12161f;
--sidebar-2:#1a202c;
--sidebar-3:#282f3d;
--sidebar-text:#c2cbd8;
--sidebar-dim:#68748a;
--border:#e3e7ed;
--border-strong:#cfd6e0;
--text:#151a22;
--text-2:#5b6675;
--text-3:#8a94a3;
--accent:#4f46e5;
--accent-2:#6366f1;
--accent-soft:#eef0fe;
--accent-border:#c7cbfa;
--green:#0f8a5f; --green-soft:#e6f6ef; --green-border:#c3e8d6;
--amber:#a86a00; --amber-soft:#fdf3e2; --amber-border:#f2ddb8;
--red:#c0392b; --red-soft:#fdecea; --red-border:#f4cdc8;
--slate:#4a5768; --slate-soft:#eef1f5; --slate-border:#dde3ea;
--purple:#6d3fc4;--purple-soft:#f2ecfd;--purple-border:#ded1f7;
--blue:#1a5fb4; --blue-soft:#eaf2fd; --blue-border:#c6dcf7;
--teal:#0e7490; --teal-soft:#e6f5f8;
--grid-dot:#dfe4ec;
--radius:10px;
--radius-sm:7px;
--shadow-sm:0 1px 2px rgba(16,24,40,.05);
--shadow:0 4px 16px rgba(16,24,40,.08);
--shadow-lg:0 18px 50px rgba(16,24,40,.20);
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
color-scheme:light;
}
[data-theme="dark"]{
--bg:#0e1117;
--surface:#161b24;
--surface-2:#1b212c;
--surface-3:#222937;
--sidebar:#0a0d13;
--sidebar-2:#141a24;
--sidebar-3:#232b3a;
--sidebar-text:#a9b4c4;
--sidebar-dim:#66738a;
--border:#262e3c;
--border-strong:#333d4e;
--text:#e6eaf1;
--text-2:#a3adbc;
--text-3:#778394;
--accent:#7c74f2;
--accent-2:#8b85f5;
--accent-soft:#232244;
--accent-border:#3d3a70;
--green:#4ade80; --green-soft:#12291f; --green-border:#1e4633;
--amber:#fbbf24; --amber-soft:#2b2313; --amber-border:#4a3c17;
--red:#f87171; --red-soft:#2c1719; --red-border:#4d2529;
--slate:#9aa5b6; --slate-soft:#1e2531; --slate-border:#2e3644;
--purple:#c4a2f7;--purple-soft:#241d33;--purple-border:#3d3155;
--blue:#7cb2f5; --blue-soft:#141f2e; --blue-border:#22364d;
--teal:#5ec7d9; --teal-soft:#0f242a;
--grid-dot:#222a37;
--shadow-sm:0 1px 2px rgba(0,0,0,.35);
--shadow:0 4px 16px rgba(0,0,0,.45);
--shadow-lg:0 18px 50px rgba(0,0,0,.6);
color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
margin:0; background:var(--bg); color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
#root{height:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-0.011em;}
/* ---------- layout ---------- */
.app{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:250px;flex:0 0 250px;background:var(--sidebar);color:var(--sidebar-text);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:width .16s ease,flex-basis .16s ease;}
.brand{padding:14px 10px 14px 16px;display:flex;align-items:center;gap:4px;}
.brand-click{display:flex;gap:11px;align-items:center;cursor:pointer;flex:1;min-width:0;}
.brand-mark{width:34px;height:34px;border-radius:9px;flex:0 0 34px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;}
.brand-text{min-width:0;overflow:hidden;}
.brand-name{color:#fff;font-weight:680;font-size:16px;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;}
.brand-sub{font-size:10.5px;color:var(--sidebar-dim);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.sidebar-toggle-btn{flex:0 0 auto;border:none;background:none;padding:6px;border-radius:6px;cursor:pointer;color:var(--sidebar-dim);display:inline-flex;}
.sidebar-toggle-btn:hover{background:var(--sidebar-2);color:#fff;}
.nav-group{padding:4px 10px;}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--sidebar-dim);padding:14px 8px 6px;font-weight:650;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--sidebar-text);font-size:13.5px;font-weight:500;margin-bottom:1px;border:none;background:none;width:100%;text-align:left;}
.nav-item:hover{background:var(--sidebar-2);color:#fff;}
.nav-item.active{background:var(--sidebar-3);color:#fff;}
.nav-item .ico{opacity:.85;flex:0 0 16px;display:flex;}
.nav-item .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-count{margin-left:auto;font-size:11px;color:var(--sidebar-dim);font-variant-numeric:tabular-nums;}
.nav-item.quick{font-size:13px;padding:7px 10px;}
.nav-saved{display:flex;align-items:center;}
.nav-saved .nav-item{flex:1;min-width:0;margin-bottom:0;}
.nav-saved .nav-remove{flex:0 0 auto;opacity:0;margin-right:4px;padding:4px;border-radius:5px;border:none;
background:none;color:var(--sidebar-dim);cursor:pointer;display:inline-flex;}
.nav-saved:hover .nav-remove{opacity:1;}
.nav-saved .nav-remove:hover{color:#fff;background:var(--sidebar-3);}
.sidebar-foot{margin-top:auto;padding:13px 14px;border-top:1px solid var(--sidebar-2);font-size:11.5px;color:var(--sidebar-dim);white-space:nowrap;overflow:hidden;}
/* ---------- collapsed sidebar (desktop rail only — mobile ignores it,
an off-canvas sidebar is always shown at full width) ---------- */
.sidebar-backdrop{display:none;}
/* Specificity bumped to beat .icon-btn's own display:inline-flex, which
otherwise wins on source order alone since these buttons carry both classes. */
.icon-btn.mobile-nav-btn{display:none;}
.icon-btn.sidebar-expand-btn{display:none;}
@media (min-width:881px){
.sidebar.collapsed{width:64px;flex:0 0 64px;}
.sidebar.collapsed .brand{padding:14px 0;justify-content:center;}
.sidebar.collapsed .brand-click{flex:0 0 auto;}
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item .lbl,
.sidebar.collapsed .nav-item .nav-count,
.sidebar.collapsed .sidebar-foot{display:none;}
.sidebar.collapsed .sidebar-toggle-btn{display:none;}
.sidebar.collapsed .nav-item{justify-content:center;padding:9px;}
.sidebar.collapsed .nav-saved .nav-remove{display:none;}
/* Section headers collapse to a plain divider so icon groups stay
visually distinct without needing their label text. */
.sidebar.collapsed .nav-label{
display:block;height:0;padding:0;margin:10px 14px;font-size:0;
border-top:1px solid var(--sidebar-2);white-space:normal;
}
.sidebar.collapsed ~ .main .icon-btn.sidebar-expand-btn{display:inline-flex;}
}
/* ---------- mobile: sidebar becomes an off-canvas overlay ---------- */
@media (max-width:880px){
.sidebar{position:fixed;inset:0 auto 0 0;z-index:150;width:270px;flex:0 0 270px;
transform:translateX(-100%);transition:transform .18s ease;}
.sidebar.mobile-open{transform:translateX(0);box-shadow:var(--shadow-lg);}
.sidebar-toggle-btn{display:none;}
.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(8,11,17,.55);z-index:140;}
.icon-btn.mobile-nav-btn{display:inline-flex;}
.topbar{padding:0 12px 0 8px;}
.content{padding:16px;}
}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{height:56px;flex:0 0 56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;}
.topbar h1{font-size:16px;}
.crumb{color:var(--text-3);font-size:13px;display:flex;align-items:center;gap:7px;min-width:0;}
.crumb a{cursor:pointer;color:var(--text-2);}
.crumb a:hover{color:var(--accent);}
.crumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.content{flex:1;overflow-y:auto;padding:22px;}
.content-inner{max-width:1360px;margin:0 auto;}
.spacer{flex:1;}
/* ---------- module page shell ----------
A list module fills the viewport rather than growing the page: the header
block (stats, actions, filters) stays put and only the results region
scrolls, down to the bottom of the screen. `.content.fill` hands its own
scrolling over to whichever region inside the module claims it. */
.content.fill{overflow:hidden;}
.content.fill .content-inner{height:100%;display:flex;flex-direction:column;min-height:0;}
.mod{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;}
/* Capped so a wrapped toolbar on a short window can never squeeze the results away. */
.mod-head{flex:0 1 auto;display:flex;flex-direction:column;gap:12px;max-height:55%;overflow-y:auto;}
.mod-body{flex:1;min-height:0;display:flex;flex-direction:column;}
/* A results card keeps its own head visible and scrolls only the rows. */
.mod-body > .card{display:flex;flex-direction:column;min-height:0;}
.mod-body > .card > .tbl-wrap,.mod-body > .card > .scroll-y{flex:1;min-height:0;}
/* Stacked results (grouped cards, cards grids, calendars) scroll as one region. */
.mod-scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:2px;}
/* Boards manage their own per-column scrolling, so they fill instead. */
.mod-body > .board{height:100%;align-items:stretch;}
.mod-body > .board .board-col{max-height:none;}
/* ---------- account menu ---------- */
.acct{position:relative;}
.acct-btn{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:none;padding:4px 8px 4px 4px;border-radius:999px;cursor:pointer;}
.acct-btn:hover{background:var(--surface-3);}
.acct-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);min-width:250px;z-index:60;overflow:hidden;}
.acct-head{padding:12px 14px;border-bottom:1px solid var(--border);}
.acct-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;border:none;background:none;text-align:left;cursor:pointer;font-size:13.5px;}
.acct-item:hover{background:var(--surface-3);}
.ctx-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);min-width:200px;max-width:280px;z-index:250;overflow:hidden;padding:5px;}
.ctx-menu-label{padding:7px 9px 5px;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);}
.ctx-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:none;background:none;text-align:left;cursor:pointer;font-size:13.5px;border-radius:6px;color:var(--text);}
.ctx-menu-item:hover{background:var(--surface-3);}
.theme-row{display:flex;gap:4px;padding:10px 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.theme-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-size:11px;color:var(--text-2);}
.theme-btn.on{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent);}
/* ---------- generic ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.card-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.card-head h3{font-size:13.5px;}
.card-body{padding:16px;}
.card-body.tight{padding:0;}
.muted{color:var(--text-2);}
.dim{color:var(--text-3);}
.small{font-size:12.5px;}
.xsmall{font-size:11.5px;}
.mono{font-family:var(--mono);font-size:12px;}
.grid{display:grid;gap:16px;}
.row{display:flex;gap:10px;align-items:center;}
.wrap{flex-wrap:wrap;}
.stack{display:flex;flex-direction:column;gap:14px;}
.center-empty{padding:44px 20px;text-align:center;color:var(--text-3);}
.center-empty svg{opacity:.35;margin-bottom:10px;}
.pre-wrap{white-space:pre-wrap;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;min-height:35.5px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:13px;font-weight:550;cursor:pointer;box-shadow:var(--shadow-sm);white-space:nowrap;}
.btn:hover:not(:disabled){background:var(--surface-3);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover:not(:disabled){filter:brightness(1.08);}
.btn.danger{color:var(--red);border-color:var(--red-border);background:var(--surface);}
.btn.danger:hover:not(:disabled){background:var(--red-soft);}
.btn.ghost{border-color:transparent;box-shadow:none;background:transparent;color:var(--text-2);}
.btn.ghost:hover:not(:disabled){background:var(--surface-3);color:var(--text);}
.btn.sm{padding:4px 9px;min-height:27.5px;font-size:12px;}
.btn.block{width:100%;justify-content:center;padding:9px 13px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.icon-btn{border:1px solid transparent;background:none;padding:5px;border-radius:6px;cursor:pointer;color:var(--text-3);display:inline-flex;}
.icon-btn:hover:not(:disabled){background:var(--surface-3);color:var(--text);}
.icon-btn:disabled{opacity:.4;cursor:not-allowed;}
/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;border:1px solid transparent;white-space:nowrap;line-height:1.6;}
.badge.green{background:var(--green-soft);color:var(--green);border-color:var(--green-border);}
.badge.amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-border);}
.badge.red{background:var(--red-soft);color:var(--red);border-color:var(--red-border);}
.badge.slate{background:var(--slate-soft);color:var(--slate);border-color:var(--slate-border);}
.badge.purple{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-border);}
.badge.blue{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-border);}
.badge.accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border);}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.tier{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.tier-1{background:var(--red-soft);color:var(--red);}
.tier-2{background:var(--amber-soft);color:var(--amber);}
.tier-3{background:var(--blue-soft);color:var(--blue);}
.tier-4{background:var(--slate-soft);color:var(--slate);}
.prio{display:inline-flex;align-items:center;justify-content:center;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:750;letter-spacing:.02em;}
.prio-P1{background:var(--red-soft);color:var(--red);}
.prio-P2{background:var(--amber-soft);color:var(--amber);}
.prio-P3{background:var(--blue-soft);color:var(--blue);}
.prio-P4{background:var(--slate-soft);color:var(--slate);}
/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:650;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);position:sticky;top:0;z-index:1;white-space:nowrap;}
thead th.sortable{cursor:pointer;user-select:none;}
thead th.sortable:hover{color:var(--text);}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.clickable{cursor:pointer;}
tbody tr.clickable:hover{background:var(--surface-2);}
.tbl-wrap{overflow:auto;border-radius:var(--radius);}
.cell-name{font-weight:600;}
.cell-sub{font-size:12px;color:var(--text-3);}
/* ---------- forms ---------- */
label.field{display:block;margin-bottom:14px;}
.field > span.lbl{display:block;font-size:11.5px;font-weight:650;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],input[type=number],input[type=password],input[type=search],select,textarea{
width:100%;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;outline:none;}
textarea{resize:vertical;min-height:76px;line-height:1.55;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.2);}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
input[type=checkbox]{width:auto;accent-color:var(--accent);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.form-grid.three{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:720px){.form-grid,.form-grid.three{grid-template-columns:1fr;}}
.hint{font-size:11.5px;color:var(--text-3);margin-top:4px;}
a.link{color:var(--accent);cursor:pointer;text-decoration:none;}
a.link:hover{text-decoration:underline;}
a.link.small{font-size:12.5px;}
.qr-frame{display:inline-block;padding:12px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--border);}
.backup-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.backup-codes code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:13px;text-align:center;}
.search-box{position:relative;flex:1 1 210px;max-width:340px;min-width:210px;}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);}
.search-box input{padding-left:32px;padding-right:26px;}
.search-kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:650;
color:var(--text-3);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:4px;
padding:1px 5px;pointer-events:none;}
.bulk-bar{display:flex;align-items:center;gap:14px;padding:9px 16px;border-bottom:1px solid var(--border);
background:var(--accent-soft);color:var(--accent);font-size:13px;}
.chip-toggle{padding:5px 11px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);font-size:12.5px;cursor:pointer;color:var(--text-2);font-weight:550;}
.chip-toggle.on{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent);}
.err{background:var(--red-soft);border:1px solid var(--red-border);color:var(--red);padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:14px;}
.multi-pick{border:1px solid var(--border-strong);border-radius:var(--radius-sm);max-height:190px;overflow-y:auto;background:var(--surface);}
.multi-pick label{display:flex;gap:9px;align-items:center;padding:7px 11px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);}
.multi-pick label:last-child{border-bottom:none;}
.multi-pick label:hover{background:var(--surface-2);}
/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,11,17,.55);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:44px 20px;z-index:100;overflow-y:auto;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:660px;display:flex;flex-direction:column;max-height:calc(100vh - 88px);}
.modal.wide{max-width:920px;}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.modal-head h2{font-size:15.5px;}
.modal-body{padding:20px;overflow-y:auto;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 14px 14px;}
/* ---------- command palette ---------- */
.cmdk-trigger{color:var(--text-3);}
.cmdk-trigger kbd{font:inherit;font-size:10.5px;font-weight:650;color:var(--text-3);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:4px;padding:1px 5px;margin-left:2px;}
.cmdk-overlay{position:fixed;inset:0;background:rgba(8,11,17,.55);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:80px 20px;z-index:200;}
.cmdk-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:calc(100vh - 160px);display:flex;flex-direction:column;overflow:hidden;}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-3);}
.cmdk-input input{border:none;box-shadow:none;padding:0;font-size:15px;flex:1;background:transparent;}
.cmdk-input input:focus{box-shadow:none;}
.cmdk-input kbd{font-size:11px;font-weight:650;color:var(--text-3);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:4px;padding:2px 6px;}
.cmdk-list{overflow-y:auto;padding:6px;}
.cmdk-empty{padding:32px 16px;text-align:center;color:var(--text-3);font-size:13.5px;}
.cmdk-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:650;color:var(--text-3);padding:10px 10px 4px;}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;}
.cmdk-item.active,.cmdk-item:hover{background:var(--surface-3);}
.cmdk-item-icon{width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--surface-3);color:var(--text-2);display:flex;align-items:center;justify-content:center;}
.cmdk-item.active .cmdk-item-icon{background:var(--accent-soft);color:var(--accent);}
.cmdk-item-ext{flex:0 0 auto;color:var(--text-3);display:flex;}
/* ---------- rich text editor (TipTap) ---------- */
.rte-wrap{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;}
.rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.rte-btn{min-width:26px;height:26px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px;
border:1px solid transparent;border-radius:6px;background:none;color:var(--text-2);font-size:12.5px;font-weight:600;cursor:pointer;}
.rte-btn:hover:not(:disabled){background:var(--surface-3);color:var(--text);}
.rte-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border);}
.rte-btn:disabled{opacity:.35;cursor:not-allowed;}
.rte-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--border);}
.rte-lang-pick{width:auto;height:26px;padding:0 6px;font-size:12px;border-radius:6px;border:1px solid transparent;background:none;color:var(--text-2);}
.rte-lang-pick:hover{background:var(--surface-3);color:var(--text);}
.rte-body-wrap{position:relative;}
.rte-body{max-height:520px;overflow-y:auto;}
.rte-body.compact{max-height:280px;}
/* EditorContent renders a wrapper div with TipTap's own .ProseMirror element nested inside it. */
.rte-body .ProseMirror{min-height:120px;padding:12px 14px;font-size:13.5px;line-height:1.6;outline:none;}
.rte-body.compact .ProseMirror{min-height:64px;}
/* TipTap's Placeholder extension marks the empty paragraph itself; this is its documented CSS hook. */
.rte-body .ProseMirror p.is-editor-empty:first-child::before{
content:attr(data-placeholder);color:var(--text-3);float:left;height:0;pointer-events:none;}
.spinner.sm{width:13px;height:13px;border-width:2px;}
.rte-loading .rte-body .ProseMirror{opacity:.5;}
/* contextual bubble menus (text-selection formatting, table controls) */
.rte-bubble{display:flex;align-items:center;gap:2px;padding:3px;border-radius:8px;
background:var(--surface-2);border:1px solid var(--border-strong);box-shadow:0 4px 16px rgba(0,0,0,.25);}
/* drag handle (@tiptap/extension-drag-handle-react), shown in the left gutter on hover */
.rte-drag-handle{width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:4px;
color:var(--text-3);cursor:grab;background:var(--surface-2);border:1px solid var(--border);}
.rte-drag-handle:hover{color:var(--text);background:var(--surface-3);}
/* resizable image NodeView (editor only — the read-only renderer uses plain ![]()
+ CSS below) */
.rte-img-wrap{position:relative;display:inline-block;max-width:100%;vertical-align:top;}
.rte-img-wrap img{display:block;width:100%;max-width:100%;height:auto;border-radius:6px;margin:6px 0;}
.rte-img-wrap.selected img{outline:2px solid var(--accent);}
.rte-img-wrap.align-left{float:left;margin:4px 14px 4px 0;}
.rte-img-wrap.align-right{float:right;margin:4px 0 4px 14px;}
.rte-img-wrap.align-center{display:block;margin:6px auto;width:fit-content;max-width:100%;}
.rte-img-handle{position:absolute;right:-5px;bottom:2px;width:12px;height:12px;border-radius:3px;
background:var(--accent);border:2px solid var(--surface);cursor:nwse-resize;}
.rte-drag-handle:active{cursor:grabbing;}
/* "/" slash command menu */
.rte-slash-menu{min-width:200px;max-height:280px;overflow-y:auto;background:var(--surface-2);
border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.3);padding:4px;}
.rte-slash-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 8px;
border-radius:6px;border:none;background:none;color:var(--text-2);font-size:13px;cursor:pointer;}
.rte-slash-item.active,.rte-slash-item:hover{background:var(--surface-3);color:var(--text);}
.rte-slash-badge{display:inline-flex;width:18px;flex:0 0 auto;justify-content:center;font-size:11px;font-weight:650;color:var(--text-3);}
.rte-slash-empty{padding:8px;font-size:12px;color:var(--text-3);}
/* table insert grid-picker (replaces the old numeric rows/columns modal) */
.rte-table-picker{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
box-shadow:0 8px 24px rgba(0,0,0,.3);padding:8px;}
.rte-table-picker-label{font-size:12px;color:var(--text-2);margin-bottom:6px;text-align:center;}
.rte-table-picker-row{display:flex;gap:2px;margin-bottom:2px;}
.rte-table-picker-cell{width:16px;height:16px;border:1px solid var(--border);border-radius:2px;background:var(--surface);}
.rte-table-picker-cell.on{background:var(--accent-soft);border-color:var(--accent-border);}
/* rendered/edited prose, shared by the editor surface and the read-only RichText renderer */
.rte-content{font-size:13.5px;line-height:1.6;color:var(--text);}
.rte-content > *:first-child{margin-top:0;}
.rte-content > *:last-child{margin-bottom:0;}
.rte-content p{margin:0 0 10px;}
.rte-content h1,.rte-content h2,.rte-content h3{margin:16px 0 8px;font-weight:650;line-height:1.3;}
.rte-content h1{font-size:19px;}
.rte-content h2{font-size:16.5px;}
.rte-content h3{font-size:14.5px;}
.rte-content ul,.rte-content ol{margin:0 0 10px;padding-left:22px;}
.rte-content li{margin:2px 0;}
/* TipTap's native TaskList/TaskItem: */
.rte-content ul[data-type="taskList"]{list-style:none;padding-left:2px;}
.rte-content ul[data-type="taskList"] li{display:flex;align-items:flex-start;gap:8px;}
.rte-content ul[data-type="taskList"] li > label{display:flex;margin-top:3px;user-select:none;}
.rte-content ul[data-type="taskList"] li > label span{display:none;}
.rte-content ul[data-type="taskList"] input[type="checkbox"]{width:15px;height:15px;margin:0;accent-color:var(--accent);}
.rte-content ul[data-type="taskList"] li > div{flex:1;min-width:0;}
.rte-content ul[data-type="taskList"] li > div > p{margin:0;}
.rte-content ul[data-type="taskList"] li[data-checked="true"] > div{color:var(--text-3);text-decoration:line-through;}
.rte-content blockquote{margin:0 0 10px;padding:2px 14px;border-left:3px solid var(--accent-border);color:var(--text-2);}
.rte-content hr{border:none;border-top:1px solid var(--border-strong);margin:14px 0;}
.rte-content a{color:var(--accent);}
.rte-content img{max-width:100%;border-radius:6px;display:block;margin:6px 0;}
.rte-content img[data-align="left"]{float:left;margin:4px 14px 4px 0;}
.rte-content img[data-align="right"]{float:right;margin:4px 0 4px 14px;}
.rte-content img[data-align="center"]{margin:6px auto;}
.rte-content table{border-collapse:collapse;margin:0 0 12px;width:100%;}
.rte-content th,.rte-content td{border:1px solid var(--border);padding:6px 9px;font-size:13px;text-align:left;vertical-align:top;}
.rte-content th{background:var(--surface-2);font-weight:650;}
.rte-content code{font-family:var(--mono);font-size:12px;background:var(--surface-3);border-radius:4px;padding:1px 5px;}
.rte-content pre{margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-2);
border:1px solid var(--border);overflow-x:auto;overflow-y:hidden;}
.rte-content pre code{background:none;padding:0;font-size:12.5px;line-height:1.55;white-space:pre;}
/* highlight.js / lowlight token classes — same palette as the rest of the app, in both themes */
.hljs-keyword,.hljs-built_in,.hljs-type,.hljs-literal,.hljs-selector-tag{color:var(--purple);}
.hljs-string,.hljs-attr,.hljs-addition,.hljs-regexp{color:var(--green);}
.hljs-comment,.hljs-quote{color:var(--text-3);font-style:italic;}
.hljs-number,.hljs-symbol{color:var(--teal);}
.hljs-title,.hljs-name,.hljs-tag,.hljs-selector-class,.hljs-section{color:var(--blue);}
.hljs-deletion,.hljs-meta{color:var(--red);}
.hljs-emphasis{font-style:italic;}
.hljs-strong{font-weight:700;}
/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;}
@media (max-width:1100px){.detail{grid-template-columns:1fr;}}
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.page-head h1{font-size:22px;letter-spacing:-.02em;}
.type-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);flex:0 0 42px;border:1px solid var(--accent-border);}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;overflow-y:hidden;}
.tab{padding:9px 13px;border:none;background:none;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:7px;align-items:center;white-space:nowrap;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab .n{font-size:11px;background:var(--surface-3);padding:0 6px;border-radius:999px;color:var(--text-2);font-weight:650;}
.tab.active .n{background:var(--accent-soft);color:var(--accent);}
.side-list{display:flex;flex-direction:column;}
.side-row{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border);font-size:13px;}
.side-row:last-child{border-bottom:none;}
.side-row .k{color:var(--text-3);font-size:12px;white-space:nowrap;}
.side-row .v{text-align:right;font-weight:550;min-width:0;}
.side-row.clickable{cursor:pointer;}
.side-row.clickable:hover{background:var(--surface-2);}
.owner-row{display:flex;gap:11px;padding:11px 16px;border-bottom:1px solid var(--border);align-items:center;}
.owner-row:last-child{border-bottom:none;}
.owner-meta{min-width:0;flex:1;}
.owner-role{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:650;}
.owner-name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.owner-name.vacant{color:var(--red);font-weight:550;}
/* ---------- avatars ---------- */
.avatar{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em;overflow:hidden;position:relative;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar.sq{border-radius:8px;}
.avatar.lg{width:40px;height:40px;flex-basis:40px;font-size:14px;}
.avatar.xl{width:76px;height:76px;flex-basis:76px;font-size:24px;}
.avatar.sm{width:24px;height:24px;flex-basis:24px;font-size:9.5px;}
.avatar.empty{background:var(--surface-3)!important;color:var(--text-3);}
.avatar-edit{display:flex;gap:14px;align-items:center;}
/* ---------- contacts / links ---------- */
.contact-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:var(--surface);}
.contact-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.clink{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);font-size:12.5px;color:var(--text-2);cursor:pointer;max-width:100%;overflow:hidden;}
.clink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clink:hover{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent);}
.link-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);}
.link-row:last-child{border-bottom:none;}
.link-url{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.link-row:hover{background:var(--surface-2);}
/* ---------- notes ---------- */
.note{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:14px 16px;}
.note.pinned{border-color:var(--accent-border);background:var(--accent-soft);}
.note-head{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap;}
.note-title{font-weight:650;font-size:14px;}
.note-meta{font-size:11.5px;color:var(--text-3);}
.note-body{white-space:pre-wrap;color:var(--text-2);font-size:13.5px;line-height:1.6;}
/* ---------- RACI ---------- */
.raci-letter{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:11.5px;font-weight:750;flex:0 0 22px;}
.raci-R{background:var(--green-soft);color:var(--green);}
.raci-A{background:var(--red-soft);color:var(--red);}
.raci-C{background:var(--blue-soft);color:var(--blue);}
.raci-I{background:var(--slate-soft);color:var(--slate);}
.raci-activity{font-weight:650;font-size:13.5px;}
.raci-cell{display:flex;flex-direction:column;gap:6px;}
.raci-assignee{display:flex;align-items:center;gap:7px;font-size:12.5px;}
.raci-assignee .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.raci-assignee .rm{opacity:0;transition:opacity .12s;}
.raci-assignee:hover .rm{opacity:1;}
.raci-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-2);}
/* ---------- attachments ---------- */
.att-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);}
.att-row:last-child{border-bottom:none;}
.att-icon{width:34px;height:34px;border-radius:8px;background:var(--slate-soft);color:var(--slate);display:flex;align-items:center;justify-content:center;flex:0 0 34px;}
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:22px;text-align:center;color:var(--text-3);background:var(--surface-2);cursor:pointer;}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.progress{height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:9px;}
.progress > span{display:block;height:100%;background:var(--accent);transition:width .15s;}
/* ---------- stats ---------- */
.stats-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-sm);}
.stat .n{font-size:26px;font-weight:680;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;}
.stat .l{font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;font-weight:650;margin-top:2px;}
/* On a short window the stats give up height first, so the rows keep the space. */
@media (max-height:860px){
.mod-head .stats-row{gap:8px;}
.mod-head .stat{padding:8px 12px;}
.mod-head .stat .n{font-size:19px;}
.mod-head .stat .l{font-size:10.5px;letter-spacing:.05em;}
}
.bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;display:flex;}
.bar > span{display:block;height:100%;}
/* ---------- home ---------- */
.home-hero{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:6px;}
.home-hero h1{font-size:24px;letter-spacing:-.025em;}
.module-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.module-card{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;}
.module-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-border);}
.module-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 42px;}
.module-icon.indigo{background:var(--accent-soft);color:var(--accent);}
.module-icon.teal{background:var(--teal-soft);color:var(--teal);}
.module-icon.violet{background:var(--purple-soft);color:var(--purple);}
.module-icon.amber{background:var(--amber-soft);color:var(--amber);}
.module-icon.emerald{background:var(--green-soft);color:var(--green);}
.module-icon.sky{background:var(--blue-soft);color:var(--blue);}
.module-icon.rose{background:var(--red-soft);color:var(--red);}
.module-icon.slate{background:var(--slate-soft);color:var(--slate);}
.module-name{font-size:15.5px;font-weight:680;letter-spacing:-.015em;}
.module-tagline{font-size:12px;color:var(--text-3);}
.module-desc{font-size:13px;color:var(--text-2);line-height:1.55;flex:1;}
.module-stats{display:flex;gap:16px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;}
.module-stat .v{font-size:17px;font-weight:680;font-variant-numeric:tabular-nums;line-height:1.2;}
.module-stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:650;}
.module-stat.amber .v{color:var(--amber);}
.module-stat.red .v{color:var(--red);}
.module-stat.green .v{color:var(--green);}
.feed-row{display:flex;gap:11px;padding:10px 16px;border-bottom:1px solid var(--border);align-items:flex-start;cursor:pointer;}
.feed-row:last-child{border-bottom:none;}
.feed-row:hover{background:var(--surface-2);}
/* ---------- kanban ---------- */
.board{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;align-items:flex-start;}
.board-col{flex:0 0 274px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;max-height:calc(100vh - 250px);}
.board-col.over{border-color:var(--accent);background:var(--accent-soft);}
.board-col-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0;}
.board-col-head .t{font-weight:650;font-size:12.5px;}
.board-list{padding:9px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;min-height:70px;}
.board-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:11px;cursor:grab;box-shadow:var(--shadow-sm);}
.board-card:hover{border-color:var(--accent-border);}
.board-card.dragging{opacity:.45;}
.board-card .ttl{font-weight:600;font-size:13px;line-height:1.35;margin:5px 0 7px;}
/* ---------- timeline ---------- */
.timeline{overflow-x:auto;overflow-y:hidden;}
.tl-grid{position:relative;min-width:760px;}
.tl-head{display:flex;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2;}
.tl-month{flex:1;padding:8px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:650;border-left:1px solid var(--border);text-align:center;}
.tl-row{display:flex;align-items:center;border-bottom:1px solid var(--border);min-height:42px;}
.tl-label{flex:0 0 230px;padding:8px 12px;font-size:12.5px;overflow:hidden;}
.tl-track{flex:1;position:relative;height:42px;}
.tl-bar{position:absolute;top:11px;height:20px;border-radius:6px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:650;color:#fff;cursor:pointer;white-space:nowrap;overflow:hidden;min-width:24px;}
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);opacity:.7;z-index:1;}
.tl-gridline{position:absolute;top:0;bottom:0;width:1px;background:var(--border);}
/* ---------- calendar ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--border);border-top:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.cal-dow{padding:8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:650;background:var(--surface-2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;}
.cal-cell{min-height:104px;padding:6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:4px;}
.cal-cell.other{background:var(--surface-2);}
.cal-cell.today{background:var(--accent-soft);}
.cal-date{font-size:11.5px;font-weight:650;color:var(--text-3);}
.cal-cell.today .cal-date{color:var(--accent);}
.cal-item{font-size:11px;padding:3px 6px;border-radius:5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid transparent;}
/* ---------- graph ---------- */
.graph-wrap{position:relative;background:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0) 0 0/18px 18px,var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.graph-toolbar{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:2;}
.graph-legend{position:absolute;left:10px;bottom:10px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:11.5px;color:var(--text-2);display:flex;flex-direction:column;gap:5px;z-index:2;opacity:.96;}
.graph-legend .lg{display:flex;align-items:center;gap:7px;}
.graph-legend i{width:10px;height:10px;border-radius:3px;display:block;}
svg.graph{display:block;cursor:grab;}
svg.graph.dragging{cursor:grabbing;}
svg.graph text{user-select:none;pointer-events:none;}
.gnode{cursor:pointer;}
/* ---------- tools: split button with a link dropdown ---------- */
.tool-link{display:inline-flex;align-items:stretch;position:relative;}
.tool-link .go{
display:inline-flex;align-items:center;gap:7px;padding:7px 12px;font-size:13px;font-weight:600;
border:1px solid var(--border-strong);border-right-width:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);
background:var(--surface);box-shadow:var(--shadow-sm);max-width:280px;}
.tool-link .go:hover{background:var(--surface-3);}
.tool-link .go .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tool-link .caret{
display:inline-flex;align-items:center;padding:0 8px;border:1px solid var(--border-strong);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--surface);cursor:pointer;
color:var(--text-3);box-shadow:var(--shadow-sm);}
.tool-link .caret:hover{background:var(--surface-3);color:var(--text);}
.tool-link .caret.open{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border);}
.tool-link.solo .go{border-right-width:1px;border-radius:var(--radius-sm);}
.tool-menu{
position:absolute;top:calc(100% + 5px);right:0;min-width:270px;max-width:340px;z-index:70;
background:var(--surface);border:1px solid var(--border);border-radius:10px;
box-shadow:var(--shadow-lg);overflow:hidden;}
.tool-menu-head{padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);
font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:650;}
.tool-menu a{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;border-bottom:1px solid var(--border);}
.tool-menu a:last-child{border-bottom:none;}
.tool-menu a:hover{background:var(--surface-3);}
.tool-menu .ml{font-weight:600;font-size:13px;}
.tool-menu .mu{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tool-menu .mn{font-size:11px;color:var(--text-2);margin-top:2px;}
.tool-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);}
.tool-row:last-child{border-bottom:none;}
.tool-row:hover{background:var(--surface-2);}
.tool-icon{width:34px;height:34px;border-radius:9px;flex:0 0 34px;display:flex;align-items:center;
justify-content:center;background:var(--blue-soft);color:var(--blue);}
.tool-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
padding:14px;display:flex;flex-direction:column;gap:10px;}
.tool-card:hover{border-color:var(--accent-border);}
/* ---------- change management ---------- */
.stepper{display:flex;align-items:center;gap:0;overflow-x:auto;overflow-y:hidden;padding:4px 0;}
.step{display:flex;align-items:center;gap:7px;padding:6px 12px;font-size:12px;font-weight:600;
color:var(--text-3);white-space:nowrap;position:relative;}
.step .bullet{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);
display:flex;align-items:center;justify-content:center;font-size:10px;flex:0 0 20px;background:var(--surface);}
.step.done{color:var(--green);}
.step.done .bullet{border-color:var(--green);background:var(--green-soft);color:var(--green);}
.step.current{color:var(--accent);}
.step.current .bullet{border-color:var(--accent);background:var(--accent);color:#fff;}
.step.off{opacity:.55;}
.step-line{flex:1;height:2px;background:var(--border);min-width:14px;}
.step-line.done{background:var(--green);}
.approval-stage{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;}
.approval-stage.current{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft);}
.approval-stage-head{padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.approver-row{display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--border);}
.approver-row:last-child{border-bottom:none;}
.decision{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;
padding:2px 9px;border-radius:999px;border:1px solid transparent;}
.decision.Approved{background:var(--green-soft);color:var(--green);border-color:var(--green-border);}
.decision.Rejected{background:var(--red-soft);color:var(--red);border-color:var(--red-border);}
.decision.Pending{background:var(--slate-soft);color:var(--slate);border-color:var(--slate-border);}
.decision.Skipped{background:var(--slate-soft);color:var(--text-3);}
.risk{display:inline-flex;padding:1px 8px;border-radius:5px;font-size:11px;font-weight:700;}
.risk-Low{background:var(--green-soft);color:var(--green);}
.risk-Medium{background:var(--amber-soft);color:var(--amber);}
.risk-High{background:var(--red-soft);color:var(--red);}
.ctype{display:inline-flex;padding:1px 8px;border-radius:5px;font-size:11px;font-weight:700;}
.ctype-Standard{background:var(--slate-soft);color:var(--slate);}
.ctype-Normal{background:var(--blue-soft);color:var(--blue);}
.ctype-Major{background:var(--purple-soft);color:var(--purple);}
.ctype-Emergency{background:var(--red-soft);color:var(--red);}
.freeze-band{background:repeating-linear-gradient(45deg,var(--red-soft),var(--red-soft) 6px,
transparent 6px,transparent 12px);border:1px solid var(--red-border);}
.cal-freeze{font-size:10px;color:var(--red);font-weight:650;margin-bottom:2px;}
/* ---------- notifications ---------- */
.bell{position:relative;}
.bell-dot{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
background:var(--red);color:#fff;font-size:10px;font-weight:750;display:flex;align-items:center;
justify-content:center;border:2px solid var(--surface);}
.notif-menu{position:absolute;right:0;top:calc(100% + 6px);width:400px;max-width:calc(100vw - 32px);
background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);
z-index:70;overflow:hidden;display:flex;flex-direction:column;max-height:70vh;}
.notif-head{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;}
.notif-list{overflow-y:auto;}
.notif{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.notif:last-child{border-bottom:none;}
.notif:hover{background:var(--surface-2);}
.notif.unread{background:var(--accent-soft);}
.notif.unread:hover{background:var(--accent-soft);filter:brightness(.98);}
.notif-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;margin-top:6px;}
.notif-dot.info{background:var(--accent);}
.notif-dot.warn{background:var(--amber);}
.notif-dot.good{background:var(--green);}
.notif-dot.bad{background:var(--red);}
.notif-title{font-weight:600;font-size:13.5px;line-height:1.35;}
.notif-body{font-size:12.5px;color:var(--text-2);margin-top:3px;white-space:pre-wrap;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pref-row{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--border);}
.pref-row:last-child{border-bottom:none;}
.pref-toggle{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);cursor:pointer;}
/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,var(--accent-soft) 0%,var(--bg) 60%);}
.login-card{width:100%;max-width:410px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:30px;}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.login-brand .brand-mark{width:42px;height:42px;flex-basis:42px;}
.login-title{font-size:19px;font-weight:700;letter-spacing:-.025em;}
.login-sub{font-size:12.5px;color:var(--text-3);}
.login-hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3);line-height:1.7;}
/* ---------- misc ---------- */
.divider{height:1px;background:var(--border);margin:16px 0;}
.pill-list{display:flex;flex-wrap:wrap;gap:6px;}
.kv-block{display:grid;grid-template-columns:160px 1fr;gap:9px 14px;font-size:13.5px;}
.kv-block dt{color:var(--text-3);font-size:12.5px;}
.kv-block dd{margin:0;}
.toast-stack{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:300;
display:flex;flex-direction:column;gap:8px;align-items:center;max-width:80vw;}
.toast{display:flex;align-items:center;gap:10px;background:#12161f;color:#fff;padding:9px 10px 9px 18px;
border-radius:999px;font-size:13px;box-shadow:var(--shadow-lg);white-space:nowrap;}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.toast.bad{background:#8f2a1e;}
.toast-action{flex:0 0 auto;background:rgba(255,255,255,.14);color:#fff;border:none;border-radius:999px;
padding:5px 12px;font-size:12.5px;font-weight:650;cursor:pointer;}
.toast-action:hover{background:rgba(255,255,255,.24);}
.toast-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
border-radius:50%;border:none;background:none;color:rgba(255,255,255,.6);cursor:pointer;}
.toast-close:hover{background:rgba(255,255,255,.14);color:#fff;}
.sub-head{font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:18px 0 9px;}
.sub-head:first-child{margin-top:0;}
.warn-box{background:var(--amber-soft);border:1px solid var(--amber-border);color:var(--amber);padding:10px 13px;border-radius:var(--radius-sm);font-size:13px;}
.info-box{background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);padding:10px 13px;border-radius:var(--radius-sm);font-size:13px;}
.readonly-banner{display:flex;align-items:center;gap:9px;background:var(--slate-soft);border:1px solid var(--slate-border);color:var(--slate);padding:8px 13px;border-radius:var(--radius-sm);font-size:12.5px;margin-bottom:14px;}
.scroll-y{overflow-y:auto;}
.spinner{width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-full{height:100vh;display:flex;align-items:center;justify-content:center;gap:11px;color:var(--text-3);}
.comment{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--border);}
.comment:last-child{border-bottom:none;}
.comment-body{white-space:pre-wrap;font-size:13.5px;color:var(--text-2);line-height:1.6;margin-top:3px;}
.comment.internal{background:var(--amber-soft);border-radius:8px;padding:12px;border-bottom:none;margin-bottom:8px;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:content-box;border:3px solid transparent;}
.sidebar::-webkit-scrollbar-thumb{background:var(--sidebar-3);background-clip:content-box;border:3px solid transparent;}
@media print{.sidebar,.topbar,.btn,.tabs,.icon-btn{display:none!important;}.content{overflow:visible;}}