/* ================================================================
   Switchboard design system: the single stylesheet for the service desk,
   client portal, owner console and sign-in pages.
   Tokens: --bg --surface --surface-2 --ink --muted --line, --accent (+ -ink,
   -soft, -hover, -active), --side*, and the SLA colors --crit --warn --ok
   --info (+ -soft). Seven color themes via [data-palette]; night mode via
   [data-theme="dark"] or the system setting.
   ================================================================ */
:root{
  --bg:#f2f4f3; --surface:#ffffff; --surface-2:#eaeeec; --ink:#16201d; --muted:#5b6964; --line:#d6dcd9;
  --accent:#0d6b61; --accent-ink:#ffffff; --accent-soft:#d9eeea;
  --side:#11201c; --side-ink:#c9dbd5; --side-dim:#7f978f; --side-hi:#1d332d;
  --crit:#b8332a; --crit-soft:#f8e1de; --warn:#9a6512; --warn-soft:#f6ead3; --ok:#2b7448; --ok-soft:#dcefe2; --info:#2c5aa8; --info-soft:#dfe7f6;
  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1412; --surface:#141d1a; --surface-2:#1a2521; --ink:#e1eae6; --muted:#8d9f98; --line:#26332e;
  --accent:#3db3a2; --accent-ink:#06120f; --accent-soft:#16332e;
  --side:#090f0d; --side-ink:#c9dbd5; --side-dim:#6f857e; --side-hi:#16241f;
  --crit:#ec6d62; --crit-soft:#3a1c19; --warn:#e0a54a; --warn-soft:#352914; --ok:#5cc184; --ok-soft:#173022; --info:#7aa5ee; --info-soft:#18253d;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1412; --surface:#141d1a; --surface-2:#1a2521; --ink:#e1eae6; --muted:#8d9f98; --line:#26332e;
  --accent:#3db3a2; --accent-ink:#06120f; --accent-soft:#16332e;
  --side:#090f0d; --side-ink:#c9dbd5; --side-dim:#6f857e; --side-hi:#16241f;
  --crit:#ec6d62; --crit-soft:#3a1c19; --warn:#e0a54a; --warn-soft:#352914; --ok:#5cc184; --ok-soft:#173022; --info:#7aa5ee; --info-soft:#18253d;
  color-scheme:dark}
:root[data-palette="ocean"]{--accent:#1d5fa8;--accent-ink:#ffffff;--accent-soft:#dce8f6;--side:#0f1b2b;--side-hi:#1b2d45;--side-ink:#c8d7ea;--side-dim:#7f93ad}
@media (prefers-color-scheme: dark){:root[data-palette="ocean"]:not([data-theme="light"]){--accent:#5b9be6;--accent-ink:#06101c;--accent-soft:#142840;--side:#080e17;--side-hi:#14223a;--side-ink:#c8d7ea;--side-dim:#7f93ad}}
:root[data-palette="ocean"][data-theme="dark"]{--accent:#5b9be6;--accent-ink:#06101c;--accent-soft:#142840;--side:#080e17;--side-hi:#14223a;--side-ink:#c8d7ea;--side-dim:#7f93ad}
:root[data-palette="indigo"]{--accent:#4b44b8;--accent-ink:#ffffff;--accent-soft:#e4e2f8;--side:#17152e;--side-hi:#27244b;--side-ink:#d2cff0;--side-dim:#8d89b5}
@media (prefers-color-scheme: dark){:root[data-palette="indigo"]:not([data-theme="light"]){--accent:#8f88f0;--accent-ink:#0c0a1f;--accent-soft:#221f45;--side:#0b0a17;--side-hi:#1d1a38;--side-ink:#d2cff0;--side-dim:#8d89b5}}
:root[data-palette="indigo"][data-theme="dark"]{--accent:#8f88f0;--accent-ink:#0c0a1f;--accent-soft:#221f45;--side:#0b0a17;--side-hi:#1d1a38;--side-ink:#d2cff0;--side-dim:#8d89b5}
:root[data-palette="plum"]{--accent:#8a2f6e;--accent-ink:#ffffff;--accent-soft:#f5dfee;--side:#241020;--side-hi:#3a1a33;--side-ink:#ead0e2;--side-dim:#a8819b}
@media (prefers-color-scheme: dark){:root[data-palette="plum"]:not([data-theme="light"]){--accent:#e07ac0;--accent-ink:#1c0816;--accent-soft:#3a1631;--side:#120810;--side-hi:#2a1124;--side-ink:#ead0e2;--side-dim:#a8819b}}
:root[data-palette="plum"][data-theme="dark"]{--accent:#e07ac0;--accent-ink:#1c0816;--accent-soft:#3a1631;--side:#120810;--side-hi:#2a1124;--side-ink:#ead0e2;--side-dim:#a8819b}
:root[data-palette="ember"]{--accent:#b04a14;--accent-ink:#ffffff;--accent-soft:#fbe5d8;--side:#26150d;--side-hi:#3d2316;--side-ink:#f0d8c9;--side-dim:#b08f7e}
@media (prefers-color-scheme: dark){:root[data-palette="ember"]:not([data-theme="light"]){--accent:#f0874a;--accent-ink:#1d0c03;--accent-soft:#3b2112;--side:#120a06;--side-hi:#2b1a10;--side-ink:#f0d8c9;--side-dim:#b08f7e}}
:root[data-palette="ember"][data-theme="dark"]{--accent:#f0874a;--accent-ink:#1d0c03;--accent-soft:#3b2112;--side:#120a06;--side-hi:#2b1a10;--side-ink:#f0d8c9;--side-dim:#b08f7e}
:root[data-palette="forest"]{--accent:#3b6d1f;--accent-ink:#ffffff;--accent-soft:#e2efd6;--side:#142112;--side-hi:#23361f;--side-ink:#d2e3c9;--side-dim:#8aa182}
@media (prefers-color-scheme: dark){:root[data-palette="forest"]:not([data-theme="light"]){--accent:#8cc85a;--accent-ink:#0b1405;--accent-soft:#22351a;--side:#0a1008;--side-hi:#18261a;--side-ink:#d2e3c9;--side-dim:#8aa182}}
:root[data-palette="forest"][data-theme="dark"]{--accent:#8cc85a;--accent-ink:#0b1405;--accent-soft:#22351a;--side:#0a1008;--side-hi:#18261a;--side-ink:#d2e3c9;--side-dim:#8aa182}
:root[data-palette="graphite"]{--accent:#33404d;--accent-ink:#ffffff;--accent-soft:#e3e7eb;--side:#15191d;--side-hi:#262c33;--side-ink:#d3d8de;--side-dim:#8a939c}
@media (prefers-color-scheme: dark){:root[data-palette="graphite"]:not([data-theme="light"]){--accent:#a9b7c6;--accent-ink:#0e1216;--accent-soft:#252c34;--side:#0a0c0e;--side-hi:#1c2127;--side-ink:#d3d8de;--side-dim:#8a939c}}
:root[data-palette="graphite"][data-theme="dark"]{--accent:#a9b7c6;--accent-ink:#0e1216;--accent-soft:#252c34;--side:#0a0c0e;--side-hi:#1c2127;--side-ink:#d3d8de;--side-dim:#8a939c}
/* Button hover and pressed states: darker in day mode, lighter in night mode, per color theme. */
:root{--accent-hover:#0b5c53;--accent-active:#0a4f48}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent-hover:#5cbfb1;--accent-active:#77cabe}}
:root[data-theme="dark"]{--accent-hover:#5cbfb1;--accent-active:#77cabe}
:root[data-palette="ocean"]{--accent-hover:#195290;--accent-active:#15467c}
@media (prefers-color-scheme: dark){:root[data-palette="ocean"]:not([data-theme="light"]){--accent-hover:#75abea;--accent-active:#8cb9ee}}
:root[data-palette="ocean"][data-theme="dark"]{--accent-hover:#75abea;--accent-active:#8cb9ee}
:root[data-palette="indigo"]{--accent-hover:#403a9e;--accent-active:#383288}
@media (prefers-color-scheme: dark){:root[data-palette="indigo"]:not([data-theme="light"]){--accent-hover:#a19bf2;--accent-active:#b1acf4}}
:root[data-palette="indigo"][data-theme="dark"]{--accent-hover:#a19bf2;--accent-active:#b1acf4}
:root[data-palette="plum"]{--accent-hover:#77285f;--accent-active:#662351}
@media (prefers-color-scheme: dark){:root[data-palette="plum"]:not([data-theme="light"]){--accent-hover:#e58fca;--accent-active:#e9a2d3}}
:root[data-palette="plum"][data-theme="dark"]{--accent-hover:#e58fca;--accent-active:#e9a2d3}
:root[data-palette="ember"]{--accent-hover:#974011;--accent-active:#82370f}
@media (prefers-color-scheme: dark){:root[data-palette="ember"]:not([data-theme="light"]){--accent-hover:#f29a67;--accent-active:#f4ab80}}
:root[data-palette="ember"][data-theme="dark"]{--accent-hover:#f29a67;--accent-active:#f4ab80}
:root[data-palette="forest"]{--accent-hover:#335e1b;--accent-active:#2c5117}
@media (prefers-color-scheme: dark){:root[data-palette="forest"]:not([data-theme="light"]){--accent-hover:#9ed174;--accent-active:#aed88c}}
:root[data-palette="forest"][data-theme="dark"]{--accent-hover:#9ed174;--accent-active:#aed88c}
:root[data-palette="graphite"]{--accent-hover:#2c3742;--accent-active:#262f39}
@media (prefers-color-scheme: dark){:root[data-palette="graphite"]:not([data-theme="light"]){--accent-hover:#b7c3cf;--accent-active:#c3cdd7}}
:root[data-palette="graphite"][data-theme="dark"]{--accent-hover:#b7c3cf;--accent-active:#c3cdd7}
.swatches{display:flex;gap:5px;flex-wrap:wrap}
.side-foot .swatch{all:unset;display:inline-block;cursor:pointer;width:20px;height:20px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);position:relative}
.side-foot .swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--side),0 0 0 4px var(--side-ink)}
.side-foot .swatch:focus-visible{outline:2px solid var(--side-ink);outline-offset:3px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-size:.86em}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.app{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100%}

/* Sidebar */
.side{background:var(--side);color:var(--side-ink);padding-block:18px;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand-mark{width:30px;height:30px;border-radius:7px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-family:var(--mono);font-weight:500;font-size:13px}
.brand b{font-size:15px;letter-spacing:.01em;color:#fff}
.brand small{display:block;color:var(--side-dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--side-ink);font-weight:500}
.nav button:hover{background:var(--side-hi)}
.nav button.on{background:var(--side-hi);color:#fff;box-shadow:inset 2px 0 0 var(--accent)}
.nav button:focus-visible{outline:2px solid var(--accent)}
.nav .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--side-dim)}
.nav svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.side-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--side-dim);padding:0 10px;margin-bottom:6px}
.side-foot{margin-top:auto;font-size:12px;color:var(--side-dim);padding:0 10px;display:flex;flex-direction:column;gap:8px}
.side-foot button{all:unset;cursor:pointer;color:var(--side-ink);text-decoration:underline;text-underline-offset:3px;font-size:12px}

/* Main */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;padding-block:12px;padding-left:24px;padding-right:max(24px,env(safe-area-inset-right,0px))}
.search{position:relative;flex:1;max-width:520px}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.14);max-height:60vh;overflow:auto;z-index:20}
.results button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:baseline;width:100%;box-sizing:border-box;padding:9px 12px;border-bottom:1px solid var(--line)}
.results button:hover,.results button:focus-visible{background:var(--surface-2)}
.results .kind{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:74px;flex:none}
.content{padding-block:24px 48px;padding-left:24px;padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px;min-width:0}

/* Common */
.btn{border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:7px;cursor:pointer;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background-color .12s,border-color .12s,color .12s}
.btn:hover{border-color:var(--muted);background:var(--surface-2)}
.btn:active{background:var(--line)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled,.btn:disabled:hover{opacity:.45;cursor:not-allowed;background:var(--surface);border-color:var(--line)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.primary:active{background:var(--accent-active);border-color:var(--accent-active)}
.btn.primary:disabled,.btn.primary:disabled:hover{background:var(--accent);border-color:var(--accent)}
.btn.danger{color:var(--crit);border-color:var(--crit)}
.btn.danger:hover{background:var(--crit-soft)}
.btn.danger:active{background:var(--crit-soft);filter:saturate(1.3)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.linkish{all:unset;cursor:pointer;color:var(--accent);font-weight:500}
.linkish:hover{text-decoration:underline}
.linkish:focus-visible{outline:2px solid var(--accent)}
.head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.head h1{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.head p{margin:2px 0 0;color:var(--muted)}
.crumbs{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.panel-h h3{margin:0;font-size:16px;font-weight:600}
.panel-b{padding:14px 16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--surface-2)}
td.num,th.num{text-align:right}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.crit{background:var(--crit-soft);color:var(--crit)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.acc{background:var(--accent-soft);color:var(--accent)}
.pill.plain::before{display:none}
.pri{font-family:var(--mono);font-size:11.5px;font-weight:500;padding:2px 6px;border-radius:4px;border:1px solid currentColor}
.pri.P1{color:var(--crit)} .pri.P2{color:var(--warn)} .pri.P3{color:var(--info)} .pri.P4{color:var(--muted)}
.sla{font-size:12px;font-variant-numeric:tabular-nums}
.sla.over{color:var(--crit);font-weight:600}
.sla.soon{color:var(--warn);font-weight:600}
.sla.met{color:var(--ok);font-weight:600}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}

/* KPI strip */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;text-align:left}
button.kpi{cursor:pointer}
button.kpi:hover{border-color:var(--muted)}
.kpi span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi b{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi small{color:var(--muted)}
.kpi.kpi-alert b{color:var(--crit)}
.kpi.warnk b{color:var(--warn)}

/* bars */
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 34px;gap:10px;align-items:center;font-size:13px}
.bar-row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:10px;background:var(--surface-2);border-radius:5px;display:flex;overflow:hidden}
.bar-track i{display:block;height:100%}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.util{height:6px;width:96px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:5px}
.util i{display:block;height:100%;background:var(--accent)}
.util.over i{background:var(--crit)}
.util.spare i{background:var(--warn)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters select,.filters input,.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);padding:7px 10px;border-radius:7px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface);flex-wrap:wrap}
.seg button{all:unset;cursor:pointer;padding:6px 12px;font-weight:500;font-size:13px;color:var(--muted)}
.seg button.on{background:var(--accent-soft);color:var(--accent)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line)}
.co-search{max-width:640px}
.co-search .results .kind{width:84px}
@keyframes flashbg{from{background:var(--accent-soft)}to{background:transparent}}
@keyframes flashring{from{box-shadow:0 0 0 3px var(--accent)}to{box-shadow:0 0 0 3px transparent}}
.card.flash{animation:flashring 2.4s ease-out}
tr.flash td{animation:flashbg 2.4s ease-out}
.role-co .staff-only,.no-docedit .docs-edit,.no-billing .billing-only,.no-newticket .newticket{display:none!important}
.who{display:flex;flex-direction:column;gap:5px}
.who label{color:var(--side-dim)}
.who select{background:var(--side-hi);color:var(--side-ink);border:1px solid var(--side-hi);border-radius:6px;padding:6px 8px;font-size:12.5px;width:100%}
.chart{overflow-x:auto}
.cols{display:flex;gap:6px;min-width:460px;padding-top:6px;border-bottom:1px solid var(--line)}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.plot{height:150px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.plot .val{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:3px;white-space:nowrap}
.stack{width:72%;max-width:30px;display:flex;flex-direction:column;border-radius:3px 3px 0 0;overflow:hidden}
.stack .cov{background:var(--line)}
.stack .bil{background:var(--accent)}
.labs{display:flex;gap:6px;min-width:460px;padding-top:5px}
.labs span{flex:1 1 0;min-width:0;text-align:center;font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.25}
.labs span.now{color:var(--ink);font-weight:600}
.cam-row{display:grid;grid-template-columns:1.3fr 1fr 1.3fr 1fr 1fr auto;gap:6px;align-items:center}
.cam-row input,.ft-row input,.ft-row select{border:1px solid var(--line);background:var(--surface);padding:7px 9px;border-radius:7px;min-width:0;width:100%}
.ft-row{display:grid;grid-template-columns:2fr 1.6fr auto auto;gap:6px;align-items:center}
.pick b .pill{margin-left:6px;vertical-align:1px}
.cam-head span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cam-rows{display:flex;flex-direction:column;gap:6px}
table.cams td,table.cams th{padding:7px 8px;font-size:12.5px}
@media (max-width:640px){.cam-row{grid-template-columns:1fr 1fr}.cam-head{display:none}.cam-row button{grid-column:1/-1}}
.mfa-wrap{display:grid;place-items:start center;padding-top:8px}
.mfa-card{width:min(580px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:16px}
.mfa-card h1{margin:2px 0 2px;font-size:21px;font-weight:650;text-wrap:balance}
.qr{background:#ffffff;padding:10px;border-radius:8px;align-self:flex-start;line-height:0;border:1px solid var(--line)}
.qr img,.qr canvas{display:block}
.code-input{font-family:var(--mono);font-size:22px;letter-spacing:.25em;width:190px;max-width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.phone{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px;max-width:320px}
.mfa-gate .top,.mfa-gate #nav{visibility:hidden}
.inp{border:1px solid var(--line);background:var(--surface);padding:6px 9px;border-radius:6px;min-width:0}
.tpl-preview{white-space:pre-wrap;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:12px 14px;font-size:13.5px;max-height:320px;overflow:auto}
.timer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.timer .clock{font-family:var(--mono);font-size:18px;font-weight:500;min-width:62px;font-variant-numeric:tabular-nums}
.timer .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.timer.on{border-color:var(--crit)}
.timer.on .dot{background:var(--crit)}
@media (prefers-reduced-motion:no-preference){.timer.on .dot{animation:blink 1.2s ease-in-out infinite}}
@keyframes blink{50%{opacity:.25}}
#timer-chips{display:flex;gap:6px;flex-wrap:wrap}
#timer-chips button{all:unset;cursor:pointer;font-size:12px;padding:4px 9px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-variant-numeric:tabular-nums}
#timer-chips button:focus-visible{outline:2px solid var(--accent)}
#timer-chips .run{border-color:var(--crit);color:var(--crit)}
@media (max-width:860px){#timer-chips{display:none}}
.btn.icon{padding:7px 9px;line-height:0}
.lang-btn{font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:7px 10px}
.btn.icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.hero{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end;padding:22px 24px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,var(--accent-soft) 0%,var(--surface) 62%)}
.hero h1{margin:4px 0 6px;font-size:28px;font-weight:650;letter-spacing:-.02em;text-wrap:balance}
.hero p{margin:0;color:var(--muted);max-width:62ch}
.hero p b{color:var(--ink);font-weight:600}
.eyebrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.hero-side{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.hero-side{align-items:flex-start}}
.pulse{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.pulse i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pulse.crit{color:var(--crit)} .pulse.crit i{background:var(--crit)}
.pulse.warn{color:var(--warn)} .pulse.warn i{background:var(--warn)}
.pulse.ok{color:var(--ok)}
@media (prefers-reduced-motion:no-preference){.pulse.crit i{animation:blink 1.4s ease-in-out infinite}}
.kpi2{gap:6px;position:relative;overflow:hidden}
.kpi-top{display:flex;align-items:center;gap:8px}
.kpi .kpi-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);letter-spacing:0}
.kpi-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.tone-crit .kpi-ic{background:var(--crit-soft);color:var(--crit)} .tone-crit b{color:var(--crit)}
.tone-warn .kpi-ic{background:var(--warn-soft);color:var(--warn)} .tone-warn b{color:var(--warn)}
.tone-info .kpi-ic{background:var(--info-soft);color:var(--info)}
.spark-svg{width:100%;height:30px;display:block;color:var(--accent);margin-top:2px}
.spark-svg .ln{fill:none;stroke:currentColor;stroke-width:1.7;vector-effect:non-scaling-stroke}
.spark-svg .area{fill:currentColor;opacity:.13}
.spark-svg.crit{color:var(--crit)} .spark-svg.info{color:var(--info)}
.kpi .kpi-unit{font-size:15px;font-weight:500;color:var(--muted);margin-left:2px;letter-spacing:0;text-transform:none}
.tile{position:relative;display:flex;min-width:0}
.tile>.kpi{flex:1;min-width:0}
.tile .kpi-top{padding-right:30px}
.tile .tile-menu{position:absolute;top:10px;right:10px;z-index:3}
.tile-dots{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.tile-dots svg{width:18px;height:18px;fill:currentColor}
.tile-dots:hover,.tile-menu[open] .tile-dots{background:var(--surface-2);color:var(--ink)}
.tile-dots:focus-visible{outline:2px solid var(--accent)}
.tile-menu .menu{min-width:210px}
.tile-add{all:unset;box-sizing:border-box;cursor:pointer;border:1.5px dashed var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;color:var(--muted);font-weight:600;font-size:14px;text-align:center;padding:16px}
.tile-add:hover{border-color:var(--accent);color:var(--accent)}
.tile-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile-add-plus{font-size:26px;line-height:1;font-weight:400}
.modal-b.pick-list{display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0}
.pick-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pick-group .eyebrow{grid-column:1/-1}
@media (max-width:560px){.pick-group{grid-template-columns:1fr}}
.modal-b label.pick{display:flex;flex-direction:row;text-align:left;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-weight:400}
.modal-b .pick input[type=radio]{width:auto;flex:none;margin:3px 0 0;accent-color:var(--accent)}
.pick:hover{border-color:var(--accent)}
.pick:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pick>span{display:flex;flex-direction:column;gap:2px}
.dash-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.dash-kpis{grid-template-columns:1fr}}
.qbar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;margin-top:12px;margin-bottom:10px;background:var(--surface-2)}
.qbar i{display:block;min-width:4px}
.kpi .spark-cap{font-size:10.5px;letter-spacing:.04em;text-transform:none;color:var(--muted);font-weight:500}
.dash-a{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.g3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media (max-width:1000px){.dash-a{grid-template-columns:1fr}}
.alerts .alert:has(.pill.crit){box-shadow:inset 3px 0 0 var(--crit)}
.alerts .alert:has(.pill.warn){box-shadow:inset 3px 0 0 var(--warn)}
.alerts .alert:has(.pill.info){box-shadow:inset 3px 0 0 var(--info)}
.attn-chips{display:flex;gap:6px;flex-wrap:wrap}
.ring-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ring-wrap{position:relative;width:128px;height:128px;flex:none}
.ring{width:100%;height:100%}
.ring-bg{fill:none;stroke:var(--surface-2);stroke-width:10}
.ring-fg{fill:none;stroke-width:10;stroke-linecap:round;stroke:var(--ok)}
.ring-fg.warn{stroke:var(--warn)} .ring-fg.crit{stroke:var(--crit)}
.ring-txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-txt b{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ring-txt span{font-size:11px;color:var(--muted)}
.ring-stats{display:flex;flex-direction:column;gap:8px;min-width:150px;flex:1}
.ring-stats div{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.ring-stats b{font-variant-numeric:tabular-nums}
.pbar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--surface-2);gap:2px}
.pbar i{display:block;height:100%}
.act{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.act:last-child{border-bottom:0}
.act:hover{background:var(--surface-2)}
.av{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.av.sys{background:var(--surface-2);color:var(--muted)}
.act .txt{min-width:0;font-size:13px}
.act .snip{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.qrow td{vertical-align:middle}
.q-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.qaside{position:sticky;top:76px}
@media (max-width:1400px){.q-layout{grid-template-columns:1fr}.qaside{position:static;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.est-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px}
.est-top .field.full{grid-column:1/-1}
.est-top input,.est-top select,.est-top textarea{border:1px solid var(--line);background:var(--surface);padding:8px 10px;border-radius:7px}
.est-top textarea{min-height:84px;resize:vertical}
@media (max-width:760px){.est-top{grid-template-columns:1fr 1fr}.est-top .field{grid-column:1/-1!important}}
.est{min-width:960px}
.est td.mono,.est td.num{font-size:12.5px;white-space:nowrap}
.est th{padding:8px 6px;background:var(--surface-2)}
.est td{padding:5px 6px;vertical-align:middle;border-bottom:0}
.est .inp{padding:6px 8px;font-size:13px;width:100%}
.est .w-desc{min-width:170px}.est .w-type{min-width:116px}.est .w-code{min-width:100px}
.est .w-qty{width:56px;text-align:right}.est .w-unit{width:50px}.est .w-cost{width:80px;text-align:right}.w-mk{width:60px;text-align:right}
.est tr.sec td{background:var(--info-soft);padding-block:8px}
.est tr.sec .sec-name{font-weight:700;background:var(--surface)}
.est tr.ln:hover td{background:var(--surface-2)}
.est .mv{width:22px;padding:0 2px}
.mv .ic-btn{display:block;font-size:11px;padding:0 4px}
.ic-btn{all:unset;cursor:pointer;color:var(--muted);padding:3px 5px;border-radius:5px;line-height:1}
.ic-btn:hover{color:var(--ink);background:var(--surface-2)}
.ic-btn:focus-visible{outline:2px solid var(--accent)}
.est tr.sec-foot td{padding:6px 6px 14px;border-bottom:1px solid var(--line)}
.linkish.quiet{color:var(--muted);font-weight:500;margin-left:14px}
.est-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line)}
.est-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.send{background:var(--ok);border-color:var(--ok);color:var(--accent-ink)}
.more{position:relative}
.more summary{list-style:none}
.more summary::-webkit-details-marker{display:none}
.more .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 28px rgba(0,0,0,.18);display:flex;flex-direction:column;min-width:220px;z-index:15;padding:4px}
.more .menu button{all:unset;cursor:pointer;padding:9px 12px;border-radius:6px;font-size:13.5px}
.more .menu button:hover,.more .menu button:focus-visible{background:var(--surface-2)}
.danger-t{color:var(--crit)}
.allmk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 3px 3px 10px;background:var(--surface)}
.allmk .inp{padding:5px 7px}
.qside .eyebrow-s{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:16px 0 6px}
.qside .eyebrow-s:first-child{margin-top:0}
.qrow2{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;font-size:13.5px}
.qrow2 input{width:110px;text-align:right}
.qrow2.total{border-top:2px solid var(--ink);margin-top:8px;padding-top:10px;font-size:16px;font-weight:700}
.qrow2.sep{border-top:1px solid var(--line);margin-top:6px;padding-top:9px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tiles div{background:var(--info-soft);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tiles span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tiles b{font-size:18px;font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num-in{width:78px;text-align:right}
.qt{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.qt div{display:flex;justify-content:space-between;gap:10px}
.qt .big{font-size:15px;font-weight:600;border-top:1px solid var(--line);padding-top:8px}
.qt-int{font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.quote-doc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(18px,4vw,36px);max-width:860px;display:flex;flex-direction:column;gap:20px}
.qd-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:16px}
.qd-meta{text-align:right}
.qd-for{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.qd-title{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em}
.qd-totals{display:flex;flex-direction:column;gap:6px;align-self:flex-end;min-width:min(320px,100%)}
.qd-totals div{display:flex;justify-content:space-between;gap:12px}
.qd-totals .big{font-weight:650;font-size:15px;border-top:1px solid var(--line);padding-top:6px}
.qd-accept{border-top:1px solid var(--line);padding-top:16px}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.tabs button{all:unset;cursor:pointer;padding:9px 14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tabs .n{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:5px}

/* company header */
.co-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.avatar{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:17px;background:var(--accent-soft);color:var(--accent);flex:none}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 20px}
.fact>span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
.fact b{font-weight:500;overflow-wrap:anywhere}
.fact .big{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card.click{cursor:pointer}
.card.click:hover{border-color:var(--muted)}
.card h3{margin:0;font-size:15px;font-weight:600}
.card p{margin:0;color:var(--muted)}
.card .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card .stats{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.card .stats b{color:var(--ink);font-weight:600}
.note-body{white-space:pre-wrap;color:var(--ink)!important;font-size:13.5px}
.pin{color:var(--warn);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.cards.docs{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));align-items:start}
.kv{display:grid;grid-template-columns:minmax(0,128px) minmax(0,1fr);gap:7px 12px;margin:0;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.secret{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.secret .mono{background:var(--surface-2);padding:2px 6px;border-radius:4px}
.seg .n{font-family:var(--mono);font-size:11px;opacity:.7;margin-left:3px}
.pick{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.pick:hover{border-color:var(--muted)}
.pick:focus-visible{outline:2px solid var(--accent)}
.spark{display:flex;gap:2px;align-items:flex-end;height:30px;padding:2px 0}
.spark i{flex:1 1 0;min-width:2px;max-width:7px;background:var(--ok);border-radius:1px;opacity:.8}
.spark i.bad{background:var(--crit);opacity:1}
.dtype{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--accent)}

/* alerts list */
.alerts{display:flex;flex-direction:column}
.alert{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line)}
.alert:last-child{border-bottom:0}
.alert .what{min-width:0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}

/* ticket detail */
.tk{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.thread{display:flex;flex-direction:column}
.msg{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.msg:last-child{border-bottom:0}
.msg.internal{background:var(--warn-soft)}
.msg-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.msg-h b{font-weight:600}
.msg p{margin:0;white-space:pre-wrap;max-width:72ch}
.reply{padding:14px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.reply textarea{width:100%;min-height:88px;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:9px 11px;resize:vertical}
.reply-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.props{display:flex;flex-direction:column;gap:12px}
.prop label,.prop .lbl{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.prop select{width:100%;border:1px solid var(--line);background:var(--surface);padding:6px 9px;border-radius:7px}
.prop div{overflow-wrap:anywhere}
.slabox{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;align-items:baseline}
.slabox dt{color:var(--muted)}
.slabox dd{margin:0;text-align:right}
.timeform{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;align-items:end;padding:12px 16px;border-top:1px solid var(--line)}
.timeform input,.timeform select{width:100%;border:1px solid var(--line);background:var(--surface);padding:6px 9px;border-radius:7px}
.timeform .wide{grid-column:1/-1}
.chk{display:inline-flex;gap:6px;align-items:center;font-size:13px}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(6,12,10,.5);display:grid;place-items:center;z-index:50;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-h h2{margin:0;font-size:16px}
.modal-b{padding:16px 18px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.modal-b.block{display:flex;flex-direction:column;gap:14px}
.modal-f{display:flex;gap:8px;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.modal-f .r{display:flex;gap:8px;margin-left:auto}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;color:var(--muted)}
.field textarea{min-height:90px;resize:vertical}
.field .hint{font-size:11.5px;color:var(--muted)}
.x{all:unset;cursor:pointer;font-size:20px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:5px}
.x:focus-visible{outline:2px solid var(--accent)}
.confirm{grid-column:1/-1;background:var(--crit-soft);color:var(--crit);padding:10px 12px;border-radius:7px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.invoice-lines td{padding:7px 10px}
.total-row td{font-weight:700;border-top:2px solid var(--ink)}
.banner{background:var(--info-soft);color:var(--info);padding:10px 12px;border-radius:7px;font-size:13px}
.codebox{display:flex;gap:8px;align-items:stretch}
.codebox code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:var(--surface-2);padding:8px 10px;border-radius:6px;font-family:var(--mono);font-size:12px}
pre.payload{background:var(--surface-2);padding:10px 12px;border-radius:6px;overflow-x:auto;font-family:var(--mono);font-size:12px;margin:0}
.modal-b h4{margin:0;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.modal-b ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.toast{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;font-weight:500;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.example{font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--warn-soft);color:var(--warn);padding:3px 8px;border-radius:5px;font-weight:700;white-space:nowrap}

@media (max-width:860px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:12px;padding-block:10px;padding-right:max(16px,env(safe-area-inset-right,0px));padding-left:max(16px,env(safe-area-inset-left,0px));overflow-x:auto}
  .side-label,.side-foot,.brand small{display:none}
  .nav{flex-direction:row}
  .nav .count{display:none}
  .tk{grid-template-columns:1fr}
  .top,.content{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .modal-b{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){.btn,.kpi,.card{transition:border-color .15s,filter .15s}}
#bell-wrap{position:relative}
#bell-btn{position:relative}
#bell-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.bell-n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--crit);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1}
#bell-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(380px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.22);z-index:30;display:flex;flex-direction:column;max-height:min(520px,75vh)}
.bell-h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.bell-list{overflow:auto}
.bell-item{all:unset;box-sizing:border-box;width:100%;display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.bell-item:hover{background:var(--surface-2)}
.bell-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bell-item:not(.unread){opacity:.72}
.bell-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--ok)}
.bell-dot.crit{background:var(--crit)}
.bell-item:not(.unread) .bell-dot{background:var(--line)}
.bell-f{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 14px}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
#portal{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto}
.portal-open{overflow:hidden}
.portal-top{position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.portal-body{padding:24px 16px 64px}
.portal-entry{max-width:420px;margin:8vh auto 0}
.portal-sign{display:flex;flex-direction:column;gap:12px}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portal-sign .field input,.portal-sign .field textarea,.portal-entry .field input{width:100%;box-sizing:border-box}
.portal-err{background:var(--crit-soft);color:var(--crit);padding:8px 12px;border-radius:7px;font-size:13px}
.portal-decline{display:flex;flex-direction:column;gap:10px;align-items:flex-start;border-top:1px dashed var(--line);padding-top:12px}
.portal-decline .field{width:100%}
.portal-done{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px}
.portal-done.ok{background:var(--ok-soft);color:var(--ok)}
.portal-done.crit{background:var(--crit-soft);color:var(--crit)}
.portal-done span{color:var(--ink)}
#client-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between;background:var(--accent-soft);color:var(--ink);padding:10px 16px;border-bottom:1px solid var(--line);font-size:14px}
#client-banner[hidden]{display:none}
@media (max-width:640px){.portal-grid{grid-template-columns:1fr}#bell-panel{position:fixed;left:16px;right:16px;top:64px;width:auto}}

/* ================================================================
   Additions for the server-rendered app (links instead of buttons,
   forms, console, portal). Everything below uses the same tokens.
   ================================================================ */
body{margin:0}
html.tr-pending body{visibility:hidden}
h1,h2,h3,h4{color:var(--ink)}
p{margin:0}
a{text-decoration:none}
a:hover{text-decoration:underline}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--side-ink);font-weight:500;text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--side-hi);text-decoration:none}
.nav a.on{background:var(--side-hi);color:#fff;box-shadow:inset 2px 0 0 var(--accent)}
.nav a:focus-visible{outline:2px solid var(--accent)}
.nav a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side-group+.side-group{margin-top:16px}
.side{overflow-y:auto}
.brand{text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
.side-foot a{color:var(--side-ink);text-decoration:underline;text-underline-offset:3px}
.side-user b{display:block;color:var(--side-ink);font-size:13px;font-weight:600}
a.btn{color:var(--ink);text-decoration:none}
a.btn.primary{color:var(--accent-ink)}
a.btn.danger{color:var(--crit)}
a.btn:hover{text-decoration:none}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn .ic{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
a.linkish{text-decoration:none}
a.linkish:hover{text-decoration:underline}
.crumbs a{color:var(--accent);font-weight:500}
a.kpi,a.card,a.alert,a.act,a.bell-item{color:var(--ink);text-decoration:none}
a.kpi:hover{border-color:var(--muted)}
a.card.click:hover,a.act:hover,a.alert:hover{text-decoration:none}
a.alert:hover{background:var(--surface-2)}
.alert .what{flex:1 1 320px}
.tabs a{cursor:pointer;padding:9px 14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.tabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs a:hover{color:var(--ink);text-decoration:none}
.seg a,.seg label{cursor:pointer;padding:6px 12px;font-weight:500;font-size:13px;color:var(--muted);text-decoration:none}
.seg a.on,.seg label:has(input:checked){background:var(--accent-soft);color:var(--accent)}
.seg a:hover{color:var(--ink);text-decoration:none}
.seg a.on:hover{color:var(--accent)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
tr[data-href]{cursor:pointer}
tr[data-href]:hover td{background:var(--surface-2)}
td.subj{min-width:220px}
.tile[hidden]{display:none}
#timer-chips a{font-size:12px;padding:4px 9px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
#timer-chips a.run{border-color:var(--crit);color:var(--crit)}
#timer-chips a:hover{text-decoration:none;border-color:var(--muted)}
.bell-dot.warn{background:var(--warn)} .bell-dot.info{background:var(--info)}
.top .newticket .lbl{display:inline}

/* forms */
.inp,.form input:not([type=checkbox]):not([type=radio]):not([type=color]),.form select,.form textarea{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 10px;border-radius:7px;width:100%;min-width:0}
.form textarea{min-height:90px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus,.inp:focus,.filters input:focus,.filters select:focus,.reply textarea:focus,.prop select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.form.one{grid-template-columns:1fr}
.form.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form .full,.form .actions{grid-column:1/-1}
.form .actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.form .actions .grow{margin-right:auto}
.form .field label{font-size:12px;font-weight:600;color:var(--muted)}
.form .hint,.hint{font-size:11.5px;color:var(--muted)}
.req{color:var(--crit)}
.chk input,.form input[type=checkbox],.form input[type=radio]{accent-color:var(--accent);width:auto;margin:0}
.chk{cursor:pointer}
.errors{background:var(--crit-soft);color:var(--crit);padding:10px 12px;border-radius:7px;font-size:13px}
.notice{background:var(--info-soft);color:var(--info);padding:10px 12px;border-radius:7px;font-size:13px}
.notice.ok{background:var(--ok-soft);color:var(--ok)}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.notice.crit{background:var(--crit-soft);color:var(--crit)}
.notice a{color:inherit;text-decoration:underline}
.flashes{display:flex;flex-direction:column;gap:8px}
.inline-form{display:inline}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.split{grid-template-columns:1fr}}
.side-stack{display:grid;gap:16px;align-content:start}
.mt0{margin-top:0}
.nowrap{white-space:nowrap}
.right{text-align:right}
.big-num{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor}
.secret-val{font-family:var(--mono);background:var(--surface-2);padding:2px 6px;border-radius:4px;font-size:12.5px}
.modal{max-height:calc(100vh - 32px)}
.modal form{display:contents}
.scrim[hidden]{display:none}
dialog.modal-dlg{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:auto}
.banner-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:9px 24px;font-size:13.5px;font-weight:500}
.banner-bar.warn{background:var(--warn-soft);color:var(--warn)}
.banner-bar.crit{background:var(--crit-soft);color:var(--crit)}
.banner-bar.info{background:var(--info-soft);color:var(--info)}
.banner-bar.support{background:var(--warn);color:#fff}
.banner-bar.support a{color:#fff;text-decoration:underline}
.banner-bar a{color:inherit;text-decoration:underline}
.ann{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.ann.feature{box-shadow:inset 3px 0 0 var(--accent)}
.ann.warning{box-shadow:inset 3px 0 0 var(--warn)}
.ann.info{box-shadow:inset 3px 0 0 var(--info)}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 16px;text-align:center;color:var(--muted)}
.qrbox{background:#fff;padding:10px;border-radius:8px;display:inline-block;line-height:0;border:1px solid var(--line)}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--line);font-size:13px}
.usage{display:flex;flex-direction:column;gap:4px}
.usage .util{width:100%;height:8px}
.check-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.check-row:last-child{border-bottom:0}
.check-row .what{flex:1;min-width:0}
.matrix input{accent-color:var(--accent)}
.code{font-family:var(--mono);font-size:12px;background:var(--surface-2);padding:8px 10px;border-radius:6px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.print-only{display:none}
.doc-fields{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:7px 12px;margin:0;font-size:13px}
.doc-fields dt{color:var(--muted)}
.doc-fields dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}

/* auth pages */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:var(--side);background-image:radial-gradient(1200px 600px at 80% -10%,var(--side-hi),transparent 60%)}
.auth-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.35);padding:30px 30px 26px;display:flex;flex-direction:column;gap:16px}
.auth-card.wide{width:min(720px,100%)}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.auth-brand .brand-mark{width:44px;height:44px;border-radius:9px;font-size:16px}
.auth-brand h1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.01em}
.auth-brand p{color:var(--muted)}
.auth-links{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.auth-card .btn.primary{width:100%;justify-content:center;padding:10px}
.auth-tools{position:fixed;top:14px;right:16px;display:flex;gap:8px}
.plan-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.plan-pick label{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.plan-pick label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.plan-pick input{position:absolute;opacity:0}
.plan-pick b{font-size:14px}
.plan-pick .price{font-family:var(--mono);color:var(--accent);font-weight:500}

/* public quote page / printable invoice */
.doc-page{min-height:100vh;background:var(--bg);padding:28px 16px 64px}
.doc-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* console accent: owner console uses a distinct label */
.console-tag{display:inline-block;margin-top:2px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:1px 6px}

@media (max-width:860px){
  .nav{flex-direction:row}
  .side-groups{display:flex;gap:2px}
  .side-group+.side-group{margin-top:0}
  .top .newticket .lbl{display:none}
  .banner-bar{padding:9px 16px}
  .form,.form.three{grid-template-columns:1fr}
}
@media (max-width:640px){
  table.cards-sm thead{display:none}
  table.cards-sm tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  table.cards-sm td{display:block;border:0;padding:0}
  table.cards-sm td.subj{flex-basis:100%;order:-1}
  table.cards-sm tr:hover td{background:none}
  .auth-card{padding:22px 18px}
}
@media print{
  .side,.top,.no-print,.banner-bar{display:none!important}
  .app{display:block}
  .content{padding:0}
  body{background:#fff}
  .print-only{display:block}
}
.results a.res{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.results a.res:hover,.results a.res:focus-visible{background:var(--surface-2);text-decoration:none}
.results .empty{padding:14px}

/* Settings: one screen with a left-hand sub-menu */
.settings-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}
.settings-nav{position:sticky;top:76px;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px}
.settings-nav a{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:7px;color:var(--ink);text-decoration:none;transition:background-color .12s}
.settings-nav a svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.8;color:var(--muted)}
.settings-nav a b{display:block;font-weight:500}
.settings-nav a small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;margin-top:1px}
.settings-nav a:hover{background:var(--surface-2)}
.settings-nav a.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.settings-nav a.on b,.settings-nav a.on svg{color:var(--accent);font-weight:600}
.settings-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.settings-body{min-width:0}
.settings-body .tablewrap select{min-width:104px}
.settings-body .tablewrap input:not([type=checkbox]):not([type=radio]){min-width:72px}
@media (max-width:1500px){.settings-nav a small{display:none}.settings-nav a{align-items:center}.settings-nav a svg{margin-top:0}}
.settings-body>.panel:first-child,.settings-body>section:first-child,.settings-body>form:first-child,.settings-body>.grid:first-child,.settings-body>.notice:first-child{margin-top:0}
@media (max-width:900px){
  .settings-shell{grid-template-columns:1fr;gap:12px}
  .settings-nav{position:static;flex-direction:row;overflow-x:auto;padding:4px}
  .settings-nav a{flex:none;align-items:center;padding:7px 10px}
  .settings-nav a small{display:none}
}

/* Company web address input: [itzhone].triage42.com */
.input-suffix{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:7px;background:var(--surface);overflow:hidden}
.input-suffix:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.field .input-suffix input{border:0;border-radius:0;flex:1;min-width:0;box-shadow:none;outline:none;background:transparent}
.input-suffix>span{display:flex;align-items:center;padding:0 10px;color:var(--muted);background:var(--surface-2,var(--bg));border-left:1px solid var(--line);white-space:nowrap;font-size:13px}
.field .input-suffix input:focus,.field .input-suffix input:focus-visible{box-shadow:none;border:0;outline:none}

/* Two-step verification setup: pick an app */
.mfa-eyebrow{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.mfa-apps{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.mfa-apps form{margin:0}
.mfa-app{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.mfa-app span{font-size:13px;color:var(--muted)}
.mfa-app:hover{border-color:var(--accent);background:var(--accent-soft)}
.mfa-app:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-links form{display:inline;margin:0}
.mfa-admin{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.mfa-req{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
details.howto{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--surface)}
details.howto summary{cursor:pointer;font-weight:600}
details.howto[open] summary{margin-bottom:8px}
details.howto ol.steps{font-size:13.5px}

/* Email templates */
.tpl-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){.tpl-edit{grid-template-columns:1fr}}
.tpl-vars{display:flex;flex-wrap:wrap;gap:4px}
.tpl-preview-wrap iframe{width:100%;height:560px;border:1px solid var(--line);border-radius:8px;background:#fff}
.switch{position:relative;width:38px;height:22px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;padding:0;vertical-align:middle}
.switch span{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on span{left:18px}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}