/* Geist, self-hosted */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-latin.woff2) format('woff2')}
/* Lumos Now. Layout: fixed left rail + fluid work area. Dark-first: the interface is night, what matters is lit by one warm "lumen" accent, kept separate from status colours. */
:root{
  --bg:#09090b; --surface:#111114; --surface-2:#17171b; --sunken:#0d0d10; --line:#232328; --line-2:#34343b;
  --fg:#f4f1ea; --fg-2:#b5b0a7; --fg-3:#7d7972;
  --lumen:#ffcf6e; --lumen-hi:#fff2d2; --lumen-glow:rgba(255,207,110,.34);
  --accent:#ffcf6e; --accent-soft:rgba(255,207,110,.11); --accent-fg:#161107;
  --note:#1d1910; --note-line:#5a4822; --note-fg:#ead39d;
  --good:#4ad48c; --warn:#ff9f50; --crit:#ff5f5f; --info:#62a8ff;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500; --c5:#d55181; --c6:#2f9a2f;
  --p0:#ff5252; --p1:#ff8f5a; --p2:#3987e5; --p3:#6d6a64;
  --st-new:#62a8ff; --st-prog:#9a8cff; --st-pend:#ff9f50; --st-third:#c8914a; --st-mon:#2bc1a0; --st-res:#4ad48c; --st-closed:#6d6a64;
  --act-1:#16243b; --act-2:#1c5cab; --act-3:#3987e5; --act-4:#9ec5f4;
  --load-free:#173322; --load-light:#2f9150; --load-busy:#e29a2c; --load-full:#e5484d;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.4);
  --f-display:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Geist","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
/* Daylight: optional, switched in the app */
:root.day{
  --bg:#f5f4f0; --surface:#ffffff; --surface-2:#f9f8f5; --sunken:#ebe9e3; --line:#e2dfd8; --line-2:#cdc9c0;
  --fg:#17150f; --fg-2:#56524a; --fg-3:#8a857b;
  --lumen:#b9780a; --lumen-hi:#f3c35a; --lumen-glow:rgba(201,138,18,.28);
  --accent:#17150f; --accent-soft:rgba(201,138,18,.12); --accent-fg:#ffe3a6;
  --note:#fff6d9; --note-line:#e8c25a; --note-fg:#6a4c00;
  --good:#10803a; --warn:#b85e00; --crit:#c43232; --info:#2a6fd0;
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4; --c6:#008300;
  --p0:#d03b3b; --p1:#ec835a; --p2:#2a78d6; --p3:#8e97a8;
  --st-new:#2a78d6; --st-prog:#6a4fd6; --st-pend:#d98e00; --st-third:#a8742c; --st-mon:#12917a; --st-res:#1f9a3a; --st-closed:#8e97a8;
  --act-1:#cde2fb; --act-2:#86b6ef; --act-3:#3987e5; --act-4:#1c5cab;
  --load-free:#cdeccd; --load-light:#6cc56c; --load-busy:#f2b53a; --load-full:#d03b3b;
  --shadow:0 1px 2px rgba(19,25,36,.05),0 6px 20px rgba(19,25,36,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--f-display);font-weight:650;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:26px;line-height:1.2}
h2{font-size:17px;line-height:1.3}
h3{font-size:14px;font-family:var(--f-body);font-weight:600}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--fg-3)}
.sub{color:var(--fg-2)}
.small{font-size:12.5px}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.demo-strip{background:var(--sunken);color:var(--fg-2);font-size:12px;padding:6px 16px;text-align:center;border-bottom:1px solid var(--line)}

/* staff shell */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:calc(100% - 31px)}
.rail{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:18px;position:sticky;top:env(safe-area-inset-top,0px);height:calc(100vh - 31px);height:calc(100dvh - 31px)}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--fg);display:grid;place-items:center}
.brand .mark i{width:10px;height:10px;border:2px solid var(--bg);border-radius:2px;display:block}
.brand b{font-family:var(--f-display);font-size:17px;font-weight:650}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:8px;color:var(--fg-2);cursor:pointer;font-weight:500}
.nav button:hover{background:var(--surface-2);color:var(--fg)}
.nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.nav .count{font:500 11.5px var(--f-mono);background:var(--sunken);color:var(--fg-2);padding:1px 7px;border-radius:99px}
.nav button[aria-current="page"] .count{background:var(--surface);color:var(--accent)}
.rail .who{margin-top:auto;border-top:1px solid var(--line);padding:14px 8px 0;display:flex;flex-direction:column;gap:8px}
.who .me{display:flex;gap:10px;align-items:center;min-width:0}
.who .me div{min-width:0}
.who .me b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .me span{font-size:12px;color:var(--fg-3)}
.avatar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 11.5px var(--f-body);color:#fff;background:var(--av,#667)}
.avatar.sm{width:22px;height:22px;font-size:9.5px}
.main{padding-block:26px 60px;padding-inline:32px;min-width:0;max-width:1320px;width:100%}

/* generic */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:16px}
.page-head{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
.page-head p{margin:4px 0 0;color:var(--fg-2)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.panel > h2,.panel-h{margin-bottom:14px}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel-h h2{margin:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);padding:7px 12px;border-radius:8px;cursor:pointer;font-weight:500;font-size:13.5px;white-space:nowrap}
.btn:hover{border-color:var(--fg-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:none;color:var(--fg-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--fg)}
.btn.note-btn{background:var(--note);border-color:var(--note-line);color:var(--note-fg)}
.link{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-weight:500;text-align:left}
.link:hover{text-decoration:underline}
.back{background:none;border:0;padding:0;color:var(--fg-3);cursor:pointer;font-size:13px;margin-bottom:10px}
.back:hover{color:var(--fg)}
.seg{display:inline-flex;background:var(--sunken);border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:5px 12px;border-radius:7px;cursor:pointer;color:var(--fg-2);font-weight:500;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
select,input[type=text],input[type=email],input[type=password],input[type=number],textarea{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;min-width:0}
textarea{width:100%;resize:vertical;line-height:1.5}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--fg-2)}
label.f > input,label.f > select,label.f > textarea{font-weight:400;font-size:14px;color:var(--fg)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters input[type=text]{flex:1 1 200px}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.tile .k{font-size:12px;color:var(--fg-3);font-weight:500}
.tile .v{font:600 24px/1.25 var(--f-display);margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile .d{font-size:12px;color:var(--fg-2);margin-top:2px}
.up{color:var(--good)} .down{color:var(--crit)}

/* tables */
.tbl-wrap{overflow-x:auto;margin:0 -18px;padding:0 18px}
table{width:100%;border-collapse:collapse}
th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--surface-2)}
.t-subj{font-weight:500;color:var(--fg)}
.t-meta{font-size:12px;color:var(--fg-3)}
.id{font:500 12px var(--f-mono);color:var(--fg-3)}

/* pills */
.pri{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--f-mono);padding:2px 7px;border-radius:5px;white-space:nowrap;background:color-mix(in srgb,var(--pc) 16%,transparent);color:var(--fg)}
.pri::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--pc)}
.pri.p0{--pc:var(--p0);background:var(--p0);color:#fff}
.pri.p0::before{background:#fff}
.pri.p1{--pc:var(--p1)} .pri.p2{--pc:var(--p2)} .pri.p3{--pc:var(--p3)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:2px 9px 2px 7px;border-radius:99px;white-space:nowrap;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--fg)}
.st i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:1px 8px;border-radius:5px;border:1px solid var(--line);color:var(--fg-2);white-space:nowrap;background:var(--surface)}
.chip i{width:7px;height:7px;border-radius:2px;background:var(--c)}
.flag{font-size:12px;font-weight:500;white-space:nowrap}
.flag.bad{color:var(--crit)} .flag.ok{color:var(--good)} .flag.soon{color:var(--warn)}

/* attention list */
.att{display:flex;flex-direction:column}
.att button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;width:100%}
.att button:last-child{border-bottom:0}
.att button:hover{background:var(--surface-2)}
.att .l2{grid-column:2/4;display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--fg-3)}
.att .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}

.hbar{display:grid;grid-template-columns:130px minmax(0,1fr) 64px;gap:10px;align-items:center;font-size:13px;padding:5px 0}
.hbar .trk{height:10px;background:var(--sunken);border-radius:5px;overflow:hidden}
.hbar .trk div{height:100%;border-radius:5px;background:var(--c,var(--c1))}
.hbar .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ticket page */
.t-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.t-head{margin-bottom:18px}
.t-head h1{margin:4px 0 10px}
.thread{display:flex;flex-direction:column;gap:12px}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.msg.cust{border-left:3px solid var(--fg-3)}
.msg.staff{border-left:3px solid var(--accent)}
.msg.note{background:var(--note);border-color:var(--note-line);border-left:3px solid var(--note-line)}
.msg .mh{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}
.msg .mh .row{gap:8px}
.msg .route{font-size:12px;color:var(--fg-3);word-break:break-all}
.msg .body{white-space:pre-wrap;overflow-wrap:anywhere}
.msg.note .tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--note-fg)}
.msg.note .route,.msg.note .muted{color:var(--note-fg);opacity:.8}
.ev{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:var(--fg-3);padding:2px 0}
.ev::before,.ev::after{content:"";flex:1 1 20px;max-width:80px;height:1px;background:var(--line)}
.composer{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:6px}
.composer.is-note{background:var(--note);border-color:var(--note-line)}
.composer .tabs{display:flex;gap:4px;margin-bottom:10px}
.composer .tabs button{border:1px solid transparent;background:none;padding:5px 10px;border-radius:7px;cursor:pointer;font-weight:500;color:var(--fg-2);font-size:13px}
.composer .tabs button[aria-pressed="true"]{background:var(--surface-2);border-color:var(--line);color:var(--fg)}
.composer.is-note .tabs button[aria-pressed="true"]{background:var(--surface);border-color:var(--note-line)}
.composer .foot{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:10px}
.side{display:flex;flex-direction:column;gap:14px}
.side .panel{padding:16px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;font-size:13px;align-items:center}
.kv dt{color:var(--fg-3)}
.kv dd{margin:0;text-align:right;min-width:0}
.kv select{width:100%}
.log{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.log:last-child{border-bottom:0}

/* customer page */
.c-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:18px}
.c-head .facts{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--fg-2);font-size:13px;margin-top:8px}
.tabs-bar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tabs-bar button{border:0;background:none;padding:9px 14px;cursor:pointer;color:var(--fg-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs-bar button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.formula{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:8px 18px;font-size:13px}
.formula dt{font-weight:600}
.formula dd{margin:0;font-family:var(--f-mono);font-size:12.5px;color:var(--fg-2)}
.gantt{display:flex;flex-direction:column;gap:8px}
.gantt .gr{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:center;font-size:13px}
.gantt .gtrack{position:relative;height:18px;background:var(--surface-2);border-radius:4px}
.gantt .gbar{position:absolute;top:3px;bottom:3px;border-radius:4px;background:var(--c);min-width:4px}
.gantt .gbar.proj{background:repeating-linear-gradient(135deg,var(--c) 0 5px,color-mix(in srgb,var(--c) 55%,transparent) 5px 8px)}
.gantt .axis{display:flex;justify-content:space-between;font:11px var(--f-mono);color:var(--fg-3);margin-left:212px}
.lock{padding:36px 18px;text-align:center;color:var(--fg-2)}

/* charts */
.chart{position:relative;width:100%}
.chart svg{display:block;overflow:visible}
.chart text{font:11px var(--f-mono);fill:var(--fg-3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--fg-2);margin-bottom:8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.legend i.ring{background:var(--surface);border:2px solid var(--fg-3);border-radius:50%}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--fg);color:var(--bg);padding:8px 10px;border-radius:8px;font-size:12.5px;line-height:1.45;max-width:280px;box-shadow:var(--shadow)}
.tip b{font-weight:600}
.tip .tr{display:flex;justify-content:space-between;gap:14px}
.tip .tr i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:6px}
details.tv{margin-top:10px;font-size:13px}
details.tv summary{cursor:pointer;color:var(--fg-3);font-size:12.5px}
details.tv .tbl-wrap{max-height:280px;overflow:auto;margin-top:8px}

/* portal */
.portal-top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.portal-top .in{max-width:980px;margin:0 auto;padding:12px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.portal-top nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.portal-top nav button{border:0;background:none;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--fg-2);font-weight:500}
.portal-top nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.portal{max-width:980px;margin:0 auto;padding-block:28px 60px;padding-inline:16px}
.pcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;text-align:left;width:100%}
.pcard:hover{border-color:var(--line-2)}
.pcard.wait{border-color:var(--st-pend);box-shadow:inset 3px 0 0 var(--st-pend)}
.prio-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.prio-pick label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:13px}
.prio-pick label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.prio-pick input{margin-top:3px}
.prio-pick small{display:block;color:var(--fg-2);font-size:12.5px;margin-top:2px}

/* login */
.login{min-height:calc(100% - 31px);display:grid;place-items:center;padding-block:40px;padding-inline:16px}
.login-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:860px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.login-card > div{padding:32px}
.login-card .demo{background:var(--surface-2);border-left:1px solid var(--line)}
.acct{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;margin-bottom:8px}
.acct:hover{border-color:var(--accent)}
.acct b{font-weight:600;display:block;font-size:13.5px}
.acct span{font-size:12px;color:var(--fg-3)}
.err{color:var(--crit);font-size:13px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13.5px;z-index:60;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.empty{padding:26px;text-align:center;color:var(--fg-3);font-size:13px}

@media (max-width:1080px){ .t-layout{grid-template-columns:minmax(0,1fr)} .g-main{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 16px;gap:10px;border-right:0;border-bottom:1px solid var(--line)}
  .nav{flex-direction:row;overflow-x:auto;flex:1 1 100%;order:3}
  .nav button{width:auto;white-space:nowrap}
  .rail .who{margin:0 0 0 auto;border:0;padding:0;flex-direction:row;align-items:center}
  .rail .who .me div{display:none}
  .main{padding-inline:16px;padding-block:18px 48px}
  .g2{grid-template-columns:minmax(0,1fr)}
  .login-card{grid-template-columns:minmax(0,1fr)}
  .login-card .demo{border-left:0;border-top:1px solid var(--line)}
  .gantt .gr{grid-template-columns:minmax(0,1fr)}
  .gantt .axis{margin-left:0}
  .prio-pick{grid-template-columns:minmax(0,1fr)}
  .hbar{grid-template-columns:100px minmax(0,1fr) 56px}
  h1{font-size:22px}
}

/* prospects */
.nav .count.hot{background:var(--st-pend);color:#1a1200}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger{border-color:var(--crit);color:var(--crit)}
.tier{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border-radius:5px;font:600 11.5px var(--f-mono);border:1px solid var(--line-2);color:var(--fg-3);background:var(--surface)}
.tier.tA{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tier.tB{color:var(--fg);border-color:var(--fg-3)}
.stars{color:var(--c4);letter-spacing:1px;white-space:nowrap}
.stars .off{color:var(--line-2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 11px;font-size:12.5px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--fg-2);white-space:nowrap}
.fchip:hover{border-color:var(--line-2)}
.fchip[aria-pressed="true"]{border-color:var(--fg);color:var(--fg);background:var(--surface-2)}
.fchip i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.fchip b{font:500 11.5px var(--f-mono);color:var(--fg-3)}
.banner{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:13.5px;background:var(--surface)}
.banner.bad{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 8%,var(--surface))}
.banner.warn{border-color:var(--st-pend);background:color-mix(in srgb,var(--st-pend) 10%,var(--surface))}
.why{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.why p{margin:4px 0 0;font:500 16.5px/1.45 var(--f-display);max-width:80ch;text-wrap:pretty}
.why.notready{border-left-color:var(--st-pend)}
.nextcard.bad{border-color:var(--crit)}
.nextcard.soon{border-color:var(--st-pend)}
.nextcard .nx{font:600 17px/1.35 var(--f-display);margin:4px 0}
.p-layout{grid-template-columns:minmax(0,1fr) 340px}
.act{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:12px;padding:12px 16px;min-width:0}
.act.a-call{border-left-color:var(--c1)} .act.a-email{border-left-color:var(--c2)} .act.a-meeting{border-left-color:var(--c3)} .act.a-note{border-left-color:var(--note-line);background:var(--note)} .act.a-research{border-left-color:var(--fg-3)}
.act .mh{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.atype{font:600 10.5px var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--sunken);color:var(--fg-2)}
.said{white-space:pre-wrap;margin:8px 0 0;overflow-wrap:anywhere}
.agreed{margin-top:8px;padding:6px 10px;background:var(--surface-2);border-radius:8px}
.act.a-note .agreed{background:color-mix(in srgb,var(--surface) 60%,transparent)}
.script p{margin:0 0 8px;max-width:72ch}
.script .eyebrow{margin:16px 0 6px}
.script .eyebrow:first-child{margin-top:0}
.script mark{background:var(--accent-soft);color:var(--fg);padding:0 1px;border-radius:3px}
.hbar.wide{grid-template-columns:minmax(120px,210px) minmax(0,1fr) 40px}
[hidden]{display:none!important}
.script mark.miss{background:color-mix(in srgb,var(--st-pend) 22%,transparent)}
.script details{border-top:1px solid var(--line);padding:8px 0}
.script summary{cursor:pointer;font-weight:500;color:var(--fg-2)}
.script details p,.script details ul{margin-top:8px}
.quote{border-left:3px solid var(--accent);padding:2px 0 2px 12px;margin:6px 0;font-weight:500}
.tpl{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.tpl textarea{font-size:13px}
.report{border:1px solid var(--line-2);border-radius:12px;padding:22px;background:var(--surface-2);max-width:560px;margin-bottom:10px}
.report h3{margin:16px 0 6px}
.report p{margin:0}
.report ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.rrows{display:flex;flex-direction:column;gap:6px}
.rrow{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line-2);padding-bottom:6px}
.meter{height:6px;background:var(--sunken);border-radius:3px;overflow:hidden;margin-top:10px}
.meter div{height:100%;background:var(--fg-3);border-radius:3px}
.meter.ok div{background:var(--good)}
.kpi{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(80px,auto);gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.kpi > :last-child{text-align:right}
.diag-main{font:600 17px/1.4 var(--f-display);margin:0 0 6px}
.chk{font-size:13px;color:var(--fg-3);padding:2px 0}
.chk.ok{color:var(--fg)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fgrid.fg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fgrid .full{grid-column:1/-1}
.objbox{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
ul.pl{margin:6px 0;padding-left:18px}
ul.pl li{margin:3px 0}
.objgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.objcard{border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px}
.audit-edit{display:flex;flex-direction:column}
.arow{display:grid;grid-template-columns:220px auto;align-items:center;gap:12px;padding:4px 0;border-bottom:1px solid var(--line)}
.arow:last-child{border-bottom:0}
.starpick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end}
.starpick input{position:absolute;opacity:0;width:1px;height:1px}
.starpick label{font-size:22px;line-height:1;color:var(--line-2);cursor:pointer;padding:2px}
.starpick input:checked ~ label,.starpick label:hover,.starpick label:hover ~ label{color:var(--c4)}
.starpick input:focus-visible + label{outline:2px solid var(--accent);border-radius:4px}
.rseg{display:inline-flex;background:var(--sunken);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap;align-self:flex-start}
.rseg label{position:relative;cursor:pointer}
.rseg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rseg span{display:block;padding:5px 13px;border-radius:7px;font-size:13px;font-weight:500;color:var(--fg-2)}
.rseg input:checked + span{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rseg input:disabled + span{opacity:.4;cursor:not-allowed}
.rseg input:focus-visible + span{outline:2px solid var(--accent)}
.qrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 2px;cursor:pointer}
.qrow:hover{background:var(--surface-2)}
.qrow:last-child{border-bottom:0}
.qrow b{display:block;font-weight:500}
.qwhy{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due-h{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.att .ttl .sub{font-weight:400}
@media (max-width:1080px){ .p-layout{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){ .fgrid,.fgrid.fg3{grid-template-columns:minmax(0,1fr)} .arow{grid-template-columns:minmax(0,1fr)} .kpi{grid-template-columns:minmax(0,1fr) auto} .kpi > :last-child{grid-column:1/-1;text-align:left} }

/* dashboard & calendar */
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start;margin-top:6px}
.cal-wrap{overflow-x:auto;padding:6px 4px}
.cal{display:grid;--cs:18px;grid-template-columns:32px repeat(var(--weeks),var(--cs));grid-template-rows:16px repeat(7,var(--cs));gap:3px;width:max-content}
.cal .mlab{grid-row:1;font:11px var(--f-mono);color:var(--fg-3);white-space:nowrap;align-self:end}
.cal .dlab{grid-column:1;font:10.5px/18px var(--f-mono);color:var(--fg-3)}
.cd{display:grid;place-items:center;width:var(--cs);height:var(--cs);border-radius:4px;border:0;padding:0;cursor:pointer;background:var(--sunken)}
i.cd{display:inline-grid;width:12px;height:12px;border-radius:3px;cursor:default;vertical-align:-2px}
.cd.a0{background:var(--sunken)} .cd.a1{background:var(--act-1)} .cd.a2{background:var(--act-2)} .cd.a3{background:var(--act-3)} .cd.a4{background:var(--act-4)}
.cd.free{background:var(--load-free)} .cd.light{background:var(--load-light)} .cd.busy{background:var(--load-busy)} .cd.full{background:var(--load-full)}
.cd.full::after{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
i.cd.full::after{width:4px;height:4px}
.cd.we{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.cd.today{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--fg)}
i.cd.today{background:var(--sunken)}
.cd.sel,.cd.today.sel{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent)}
button.cd:hover{filter:brightness(.9)}
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;color:var(--fg-2);margin-top:12px;align-items:center}
.cl-group{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.cl-item{display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.daypanel{border-left:1px solid var(--line);padding-left:20px;min-width:0;max-height:600px;overflow:auto}
.loadbar{display:block;height:8px;background:var(--sunken);border-radius:4px;overflow:hidden;margin:10px 0 6px}
.loadbar > *{display:block;height:100%;border-radius:4px;background:var(--load-light)}
.loadbar.free > *{background:var(--load-free)} .loadbar.busy > *{background:var(--load-busy)} .loadbar.full > *{background:var(--load-full)}
.hbar.mini{grid-template-columns:70px minmax(0,1fr) 54px;padding:2px 0;font-size:12.5px}
.hbar .trk div.light{background:var(--load-light)} .hbar .trk div.busy{background:var(--load-busy)} .hbar .trk div.full{background:var(--load-full)}
.dp-h{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2);margin:14px 0 4px}
.dp-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:6px 2px;cursor:pointer}
.dp-row:hover{background:var(--surface-2)}
.dp-row b{display:block;font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-what{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.wa-day{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--load-free);border-radius:10px;padding:10px 12px;cursor:pointer;min-width:0}
.wa-day:hover{border-color:var(--line-2)}
.wa-day.light{border-top-color:var(--load-light)} .wa-day.busy{border-top-color:var(--load-busy)} .wa-day.full{border-top-color:var(--load-full)}
.wa-day.sel{outline:2px solid var(--accent);outline-offset:1px}
.wa-d{font-size:12.5px;color:var(--fg-2)}
.wa-d b{font:600 18px var(--f-display);color:var(--fg)}
.wa-day .loadbar{margin:4px 0 2px}
.wa-l{font-weight:600;font-size:13px}
.wa-c{display:flex;flex-direction:column}
.compbar{display:flex;gap:2px;height:30px;border-radius:6px;overflow:hidden;margin:4px 0 12px}
.compbar button{border:0;padding:0;background:var(--c);cursor:pointer;min-width:3px}
.compbar button:hover{filter:brightness(1.12)}
.complist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.cl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;background:none;border:0;padding:6px 2px;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;font-size:13px}
.cl i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.cl:hover{background:var(--surface-2)}
.need{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0 10px 12px;border-bottom:1px solid var(--line);border-left:3px solid var(--line-2)}
.need.bad{border-left-color:var(--crit)} .need.warn{border-left-color:var(--st-pend)}
.need:last-child{border-bottom:0}
.headline{font:500 18px/1.45 var(--f-display);margin:0 0 6px;max-width:75ch;text-wrap:pretty}
.tile.flat{background:var(--surface-2)}
.legend i.line{height:3px;width:14px;border-radius:2px}
.legend i.dash{height:0;width:16px;border-radius:0;background:none;border-top:2px dashed var(--c)}
@media (max-width:1080px){ .cal-layout{grid-template-columns:minmax(0,1fr)} .daypanel{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px;max-height:none} }
@media (max-width:820px){ .wa{grid-template-columns:repeat(2,minmax(0,1fr))} .complist{grid-template-columns:minmax(0,1fr)} .need{flex-wrap:wrap} .headline{font-size:16px} }

/* ticket overview */
.sboard{display:grid;grid-template-columns:2fr 2fr 1fr 2fr;gap:16px}
.sgroup{min-width:0}
.sg-h{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-2);margin-bottom:6px;padding:0 2px}
.sg-tiles{display:grid;gap:8px}
.stile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:10px;padding:10px 12px;cursor:pointer;min-width:0}
.stile:hover{box-shadow:var(--shadow)}
.stile .k{font-size:12.5px;color:var(--fg-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stile .v{font:600 28px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.stile .d{font-size:11.5px;color:var(--fg-3)}
.mx td,.mx th{padding:7px 6px}
.mx th{white-space:normal;line-height:1.25;vertical-align:bottom;min-width:62px}
.nw{white-space:nowrap}
.mxc{min-width:36px;border:0;border-radius:6px;padding:4px 8px;font:600 13px var(--f-mono);cursor:pointer;background:color-mix(in srgb,var(--act-3) var(--a),transparent);color:var(--fg)}
.mxc:hover{outline:2px solid var(--accent)}
.mx tr.tot td{border-top:1px solid var(--line-2);border-bottom:0}
.st-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:5px;vertical-align:1px}
.pbar{display:flex;height:100%;gap:1px;border-radius:5px;overflow:hidden}
.pbar span{background:var(--c);min-width:3px}
.gauge{background:var(--surface-2);border-radius:10px;padding:12px 14px}
.gauge .k{font-size:12px;color:var(--fg-3)}
.gauge .v{font:600 28px/1.2 var(--f-display)}
.gauge .meter{margin:6px 0}
.rowbar{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 30px 70px;gap:10px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 2px;cursor:pointer;text-align:left;font-size:13px}
.rowbar:last-child{border-bottom:0}
.rowbar .trk{height:10px;border-radius:5px;overflow:hidden;background:var(--sunken)}
.rowbar:hover{background:var(--surface-2)}
.rowbar .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowbar > :last-child{text-align:right}
.svc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1180px){ .svc{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .svc{grid-template-columns:repeat(2,minmax(0,1fr))} }
.svc-i{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:10px;padding:12px}
.svc-i .v{font:600 24px/1.2 var(--f-display)}
.svc-i .trk{display:block;width:100%;height:6px;border-radius:3px;overflow:hidden;background:var(--sunken)}
.cd.fut{background:transparent;cursor:default}
.cd.p0::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--p0);box-shadow:0 0 0 1.5px var(--surface)}
@media (max-width:1180px){ .sboard{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .sboard{grid-template-columns:minmax(0,1fr)} .rowbar{grid-template-columns:minmax(0,1fr) 70px 24px 56px} }

/* incident / request, team workload, AI */
.cat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:1px 8px 1px 6px;border-radius:5px;white-space:nowrap;color:var(--fg);background:color-mix(in srgb,var(--k) 14%,transparent)}
.cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k)}
.cat.inc{--k:var(--c2)} .cat.req{--k:var(--c1)}
.tw-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--fg-2);margin:4px 0 6px}
.tw-legend span{display:inline-flex;align-items:center;gap:6px}
.tw-legend .u{width:14px;height:14px;font-size:0;cursor:default}
.tw-row{display:grid;grid-template-columns:210px minmax(0,1fr) repeat(5,64px) 120px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.tw-row:last-child{border-bottom:0}
.tw-row.unas{background:color-mix(in srgb,var(--crit) 5%,transparent)}
.tw-who{display:flex;gap:10px;align-items:center;min-width:0}
.tw-who b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-who span{font-size:12px;color:var(--fg-3)}
.tw-units{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}
.u{width:24px;height:24px;border-radius:6px;border:0;padding:0;display:inline-grid;place-items:center;font:600 11.5px var(--f-mono);color:#fff;cursor:pointer;flex:none}
.u.inc{background:var(--c2)} .u.req{background:var(--c1)}
.u.wait{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 3px,transparent 3px 7px)}
button.u:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.u.done{width:12px;height:12px;border-radius:3px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg-3);cursor:default}
.tw-sep{width:1px;height:20px;background:var(--line-2);margin:0 6px}
.tw-n{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.tw-n b{font:600 17px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.tw-n > span{font-size:11px;color:var(--fg-3);white-space:nowrap}
.tw-spark{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tw-spark > span{font-size:10.5px;color:var(--fg-3);text-align:right}
.catcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer}
.catcard:hover{border-color:var(--line-2)}
.catcard .v{font:600 24px/1.2 var(--f-display)}
.ai-mark{display:inline-grid;place-items:center;font:700 10px var(--f-mono);letter-spacing:.04em;color:var(--accent-fg);background:var(--accent);border-radius:5px;padding:2px 5px;margin-right:4px;vertical-align:2px}
.ai-strip{border:1px dashed var(--accent);background:var(--accent-soft);color:var(--fg);border-radius:9px;padding:6px 12px;cursor:pointer;font-size:13px;font-weight:500}
.ai-inline{border-color:var(--accent)}
.ai-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.aic{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.aic.compact{border:0;border-left:0;padding:0;background:none}
.aic.accepted{border-left-color:var(--good)} .aic.rejected{border-left-color:var(--crit);opacity:.9}
.aic h3{font-size:15px;font-family:var(--f-display);font-weight:600}
.aic-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.aic-why{margin:0;padding-left:18px;font-size:13px;color:var(--fg-2);display:flex;flex-direction:column;gap:3px}
.aic-act{font-size:13px;background:var(--surface-2);border-radius:8px;padding:7px 10px}
.aic-res{font-size:12.5px;padding:7px 10px;border-radius:8px}
.aic-res.ok{background:color-mix(in srgb,var(--good) 10%,transparent)} .aic-res.bad{background:color-mix(in srgb,var(--crit) 8%,transparent)}
.aic-rej{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border-radius:8px;padding:10px}
.aic-rej .fchip input{margin:0}
.conf{font-size:11.5px;font-weight:500;padding:1px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.conf.c-high{border-color:var(--good);color:var(--good)} .conf.c-low{color:var(--fg-3)}
.chk-row{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:3px 0;cursor:pointer}
.chk-row input{margin-top:3px}
pre.code{font:12px/1.5 var(--f-mono);background:var(--sunken);border-radius:8px;padding:10px 12px;overflow-x:auto;margin:0;color:var(--fg-2)}
@media (max-width:1180px){ .tw-row{grid-template-columns:190px minmax(0,1fr) repeat(3,58px)} .tw-row > div:nth-child(6),.tw-row > div:nth-child(7),.tw-row > div:nth-child(8){display:none} }
@media (max-width:1080px){ .ai-layout{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){ .tw-row{grid-template-columns:minmax(0,1fr) repeat(3,auto)} .tw-units{grid-column:1/-1;order:9} }

/* customer portal v2 */
.preview-bar{background:var(--accent);color:var(--accent-fg);padding:8px 16px;display:flex;gap:10px 16px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:13px;position:sticky;top:env(safe-area-inset-top,0px);z-index:6}
.preview-bar select{max-width:220px}
.preview-bar select,.preview-bar .btn{color:var(--fg);background:var(--surface);border-color:transparent}
.dp-row.wide{grid-template-columns:auto minmax(0,1fr) auto}
.preview-bar ~ .portal-top{top:calc(env(safe-area-inset-top,0px) + 44px)}
.portal-top nav .count{font:500 11px var(--f-mono);background:var(--sunken);padding:1px 6px;border-radius:99px;margin-left:4px;color:var(--fg-2)}
.pact-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.pact{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-left:5px solid var(--k);background:var(--surface);border-radius:12px;padding:16px 18px;cursor:pointer;color:var(--fg-2)}
.pact.inc{--k:var(--c2)} .pact.req{--k:var(--c1)}
.pact-t{font:600 18px/1.3 var(--f-display);color:var(--fg)}
.pact:hover{box-shadow:var(--shadow)}
.attn{border:1px solid var(--st-pend);background:color-mix(in srgb,var(--st-pend) 10%,var(--surface));border-radius:12px;padding:12px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.attn-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer;width:100%}
.pcard2{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.pcard2.wait{border-color:var(--st-pend);box-shadow:inset 3px 0 0 var(--st-pend)}
.pcard2:hover{border-color:var(--line-2)}
.pc-t{display:block;margin-top:4px}
.stepper{list-style:none;margin:0;padding:0;display:flex}
.stepper li{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative;font-size:11.5px;color:var(--fg-3);min-width:0}
.stepper li::after{content:"";position:absolute;top:5px;left:14px;right:2px;height:2px;background:var(--line)}
.stepper li.done::after{background:var(--good)}
.stepper li:last-child::after{display:none}
.stepper .dot{width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-2);position:relative;z-index:1}
.stepper li.done .dot{background:var(--good);box-shadow:none}
.stepper li.cur .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stepper li.cur.wait .dot{background:var(--st-pend);box-shadow:0 0 0 3px color-mix(in srgb,var(--st-pend) 30%,transparent)}
.stepper li.cur .lbl{color:var(--fg);font-weight:600}
.stepper .lbl{padding-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.svcst{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.svcst:last-child,.tmember:last-of-type{border-bottom:0}
.svcst b{display:block;font-size:13.5px}
.svcst .sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdot{width:10px;height:10px;border-radius:50%}
.sdot.ok{background:var(--good)} .sdot.warn{background:var(--st-pend)} .sdot.bad{background:var(--crit)} .sdot.mon{background:var(--st-mon)}
.tmember{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.tmember b,.tmember span span,.tmember > span > span{display:block}
.csat-box{border-color:var(--accent)}
.csat-pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.csat-pick label{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border:1px solid var(--line-2);border-radius:8px;padding:6px 2px}
.csat-pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.csat-pick span{font:600 16px var(--f-display)}
.csat-pick small{font-size:10px;color:var(--fg-3);text-align:center;line-height:1.2}
.csat-pick label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.csat-pick label:has(input:focus-visible){outline:2px solid var(--accent)}
@media (max-width:820px){ .pact-row{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ .stepper li:not(.cur) .lbl{visibility:hidden} .preview-bar ~ .portal-top{position:static} }

/* ===== Lumos Now: brand layer ===== */
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);letter-spacing:-.003em}
h1,h2,h3{letter-spacing:-.022em}
h1{font-size:28px;font-weight:600}
h2{font-weight:600}
.demo-strip{background:transparent;color:var(--fg-3);border-bottom:1px solid var(--line);font-size:11.5px}
::selection{background:var(--accent-soft);color:var(--fg)}
/* logo */
.lockup{display:inline-flex;align-items:center;gap:9px;color:var(--fg)}
.lmark{width:28px;height:28px;flex:none;overflow:visible;filter:drop-shadow(0 0 6px var(--lumen-glow))}
.lmark .orbit{transform-origin:16px 16px;animation:orbit 14s linear infinite}
.lockup:hover .orbit{animation-duration:2.4s}
.lword{font:600 18px/1 var(--f-display);letter-spacing:-.035em;white-space:nowrap}
.lword em{font-style:normal;font-weight:500;color:var(--lumen)}
.lockup.mini{gap:5px}.lockup.mini .lmark{width:15px;height:15px}.lockup.mini .lword{font-size:12px}
.spark-ico{width:1em;height:1em;vertical-align:-.13em;flex:none;filter:drop-shadow(0 0 5px var(--lumen-glow))}
.spark-ico path{fill:var(--lumen)}
/* rail */
.rail{background:linear-gradient(180deg,var(--sunken),var(--bg) 70%);border-right:1px solid var(--line)}
.brand{padding:2px 8px 8px}
.nav{position:relative}
.nav-ind{position:absolute;left:0;right:0;top:0;height:36px;border-radius:9px;background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--lumen),0 0 26px -10px var(--lumen-glow);transition:transform .5s cubic-bezier(.2,.85,.2,1),height .3s;pointer-events:none;z-index:0}
.nav button{position:relative;z-index:1;justify-content:flex-start;gap:10px;padding:9px 10px}
.nav button .lbl{flex:1}
.nav button[aria-current="page"]{background:transparent;color:var(--fg)}
.nav button[aria-current="page"] .ico{color:var(--lumen);filter:drop-shadow(0 0 5px var(--lumen-glow))}
.nav button:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.nav .count.hot{background:var(--lumen);color:var(--accent-fg);box-shadow:0 0 12px -2px var(--lumen-glow)}
.nav .count.risk{background:color-mix(in srgb,var(--crit) 22%,transparent);color:var(--crit)}
.nav-sep{height:1px;background:var(--line);margin:10px 8px}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail .who{gap:10px}
.rail-foot{display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap}
.rail-foot .btn{padding:5px 8px;font-size:12.5px}
.acct .avatar{color:#fff;font-size:11.5px}
.by{font-size:11px;color:var(--fg-3)}
/* surfaces */
.panel,.tile,.login-card{background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 2.6%,transparent),transparent 55%),var(--surface)}
.tile .v{font-weight:600;letter-spacing:-.035em}
.btn{background:var(--surface-2);border-color:var(--line-2);border-radius:9px;transition:transform .15s,box-shadow .25s,background .2s,border-color .2s}
.btn:hover{border-color:color-mix(in srgb,var(--lumen) 45%,var(--line-2))}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);box-shadow:0 0 0 1px color-mix(in srgb,var(--lumen) 40%,transparent),0 8px 26px -10px var(--lumen-glow)}
.btn.primary:hover{filter:none;box-shadow:0 0 0 1px var(--lumen),0 10px 34px -8px var(--lumen-glow)}
.btn.ghost{background:transparent}
.tabs-bar button[aria-selected="true"]{border-bottom-color:var(--lumen)}
.seg button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--line-2)}
.link{color:var(--lumen)}
a{color:var(--lumen)}
.pcard2,.stile,.pact,.wa-day,.catcard,.acct,.pcard,.svc-i,.sig{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.pcard2:hover,.stile:hover,.pact:hover,.wa-day:hover,.catcard:hover,.acct:hover,.pcard:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--lumen) 25%,transparent)}
.pri.p0{box-shadow:0 0 12px -2px color-mix(in srgb,var(--p0) 70%,transparent)}
.toast{background:var(--surface-2);color:var(--fg);border:1px solid var(--line-2);box-shadow:0 0 0 1px color-mix(in srgb,var(--lumen) 18%,transparent),var(--shadow)}
.toast.show{animation:toastIn .4s cubic-bezier(.2,.85,.2,1)}
.tip{border:1px solid var(--line-2)}
/* beam */
.main{position:relative}
.beam{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;pointer-events:none;z-index:4}
.beam::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,var(--lumen),transparent);transform:translateX(-120%);opacity:0}
.anim .beam::after{animation:beam 1s cubic-bezier(.4,0,.2,1) both}
/* command */
.cmd-head{margin:4px 0 22px}
.now-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lumen);box-shadow:0 0 10px var(--lumen);margin-right:8px;vertical-align:1px;animation:breathe 2.4s ease-in-out infinite}
.hero-q{font:600 clamp(32px,4.6vw,56px)/1.04 var(--f-display);letter-spacing:-.045em;margin:12px 0 10px;text-wrap:balance}
.glow{color:var(--lumen);text-shadow:0 0 30px var(--lumen-glow)}
.signals{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.sig{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;row-gap:3px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;position:relative;overflow:hidden;color:var(--fg)}
.sig::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 0% 0%,color-mix(in srgb,var(--k) 15%,transparent),transparent 62%);pointer-events:none}
.sig-n{grid-row:1/4;font:600 44px/1 var(--f-display);color:var(--k);letter-spacing:-.05em;min-width:46px;text-shadow:0 0 26px color-mix(in srgb,var(--k) 45%,transparent);font-variant-numeric:tabular-nums}
.sig-t{font-weight:600;font-size:15px;line-height:1.3}
.sig-s{font-size:12.5px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sig-a{font-size:11px;color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.sig.s-crit{--k:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,var(--line));animation:critPulse 3s ease-in-out infinite}
.sig.s-attn{--k:var(--warn)} .sig.s-ai{--k:var(--lumen)} .sig.s-info{--k:var(--info)}
.sig:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--k) 60%,var(--line))}
.caught{display:flex;gap:10px;align-items:center;font-size:16px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 14px}
.sec-h h2.big{font-size:23px;letter-spacing:-.03em}
.day-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.tl{position:relative;padding-left:24px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:1px}
.tl-i{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 8px;border-radius:9px;width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--fg)}
.tl-i:hover{background:var(--surface-2)}
.tl-i::before{content:"";position:absolute;left:-22px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--k)}
.tl-i.past{opacity:.5}.tl-i.past::before{background:var(--k)}
.tl-i.k-meeting{--k:var(--c3)}.tl-i.k-call{--k:var(--info)}.tl-i.k-ticket{--k:var(--warn)}.tl-i.k-late{--k:var(--crit)}.tl-i.k-ai{--k:var(--lumen)}
.tl-i.k-late{opacity:1}
.tl-t{font:500 13px var(--f-mono);color:var(--fg-2)}
.tl-l{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-s{display:block;font-size:12px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-k{font-size:11px;color:var(--k);font-weight:600;letter-spacing:.04em;white-space:nowrap}
.now-line{position:relative;margin:8px 0 8px -24px;display:flex;align-items:center;gap:10px;font:600 11px var(--f-mono);letter-spacing:.14em;color:var(--lumen)}
.now-line::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--lumen);box-shadow:0 0 0 4px var(--accent-soft),0 0 20px var(--lumen);animation:breathe 2.4s ease-in-out infinite}
.now-line::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--lumen),transparent)}
.tl-any{margin-top:10px;background:var(--surface-2);border:1px dashed var(--line-2);border-radius:9px;padding:9px 12px;color:var(--fg-2);cursor:pointer;width:100%;text-align:left}
.tl-any b{color:var(--fg)}
.mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:6px}
.mini-stats > div{display:flex;flex-direction:column;border-left:2px solid var(--line-2);padding-left:10px}
.mini-stats .v{font:600 26px/1.15 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mini-stats .k{font-size:12px;color:var(--fg-3)}
.hchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:1px 9px 1px 7px;border-radius:99px;white-space:nowrap;background:color-mix(in srgb,var(--k) 14%,transparent);color:var(--fg)}
.hchip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k);box-shadow:0 0 8px var(--k)}
.hchip.h-ok{--k:var(--good)}.hchip.h-watch{--k:var(--warn)}.hchip.h-risk{--k:var(--crit)}
/* lumos ai */
.aic{border-left-color:var(--lumen)}
.aic.leaving{animation:leave .3s cubic-bezier(.4,0,1,1) forwards}
.ai-inline{border-color:color-mix(in srgb,var(--lumen) 45%,var(--line));box-shadow:0 0 30px -14px var(--lumen-glow)}
.ai-strip{border-color:color-mix(in srgb,var(--lumen) 55%,transparent);background:var(--accent-soft);color:var(--fg)}
.ai-tag{font-size:13px;color:var(--fg-2);margin:4px 0 0}
/* portal */
.pbrand{display:flex;flex-direction:column;gap:2px;min-width:0}
.pclient{font:600 17px/1.1 var(--f-display);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppow{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--fg-3)}
.psum{display:block;margin-top:6px;font-size:14px;color:var(--fg-2)}
.portal-top{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pfoot{max-width:980px;margin:0 auto;padding:0 16px 40px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--fg-3)}
/* login */
.login{position:relative;overflow:hidden;isolation:isolate}
.login::before{content:"";position:absolute;width:1000px;height:1000px;left:50%;top:-35%;margin-left:-500px;background:radial-gradient(closest-side,color-mix(in srgb,var(--lumen) 22%,transparent),transparent 70%);animation:drift 16s ease-in-out infinite alternate;pointer-events:none;z-index:-1}
.login-card{border-color:var(--line-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px color-mix(in srgb,var(--lumen) 10%,transparent)}
.login-h{font:600 32px/1.08 var(--f-display);letter-spacing:-.04em;margin:26px 0 8px;text-wrap:balance}
.login-card .demo{background:var(--surface-2)}
/* keyframes */
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes beam{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(260%);opacity:0}}
@keyframes critPulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--crit) 30%,transparent),0 0 34px -8px color-mix(in srgb,var(--crit) 55%,transparent)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes leave{to{opacity:0;transform:translateX(28px) scale(.98)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes drift{from{transform:translate(-20%,0)}to{transform:translate(20%,12%)}}
/* motion on navigation (the .anim class is set only when the view changes) */
.anim .main > :not(.beam),.anim .portal > *,.anim .login-card{animation:rise .6s cubic-bezier(.2,.75,.2,1) both}
.anim .main > :nth-child(3){animation-delay:.05s}.anim .main > :nth-child(4){animation-delay:.1s}.anim .main > :nth-child(5){animation-delay:.15s}.anim .main > :nth-child(6){animation-delay:.2s}.anim .main > :nth-child(7){animation-delay:.24s}.anim .main > :nth-child(n+8){animation-delay:.28s}
.anim .portal > :nth-child(2){animation-delay:.05s}.anim .portal > :nth-child(3){animation-delay:.1s}.anim .portal > :nth-child(4){animation-delay:.15s}.anim .portal > :nth-child(n+5){animation-delay:.2s}
.anim .tiles > *,.anim .signals > *,.anim .sboard > *,.anim .wa > *,.anim .pact-row > *,.anim .stack > *,.anim .att > *,.anim .tl > *{animation:rise .5s cubic-bezier(.2,.75,.2,1) both}
.anim :is(.tiles,.signals,.sboard,.wa,.pact-row,.stack,.att,.tl) > :nth-child(1){animation-delay:.1s}
.anim :is(.tiles,.signals,.sboard,.wa,.pact-row,.stack,.att,.tl) > :nth-child(2){animation-delay:.15s}
.anim :is(.tiles,.signals,.sboard,.wa,.pact-row,.stack,.att,.tl) > :nth-child(3){animation-delay:.2s}
.anim :is(.tiles,.signals,.sboard,.wa,.pact-row,.stack,.att,.tl) > :nth-child(4){animation-delay:.25s}
.anim :is(.tiles,.signals,.sboard,.wa,.pact-row,.stack,.att,.tl) > :nth-child(5){animation-delay:.3s}
.anim :is(.tiles,.signals,.sboard,.wa,.pact-row,.stack,.att,.tl) > :nth-child(6){animation-delay:.34s}
.anim :is(.tiles,.signals,.sboard,.wa,.pact-row,.stack,.att,.tl) > :nth-child(n+7){animation-delay:.38s}
.anim .chart .bar{transform-box:fill-box;transform-origin:50% 100%;animation:growY .75s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,0ms)}
.anim .chart .ln{stroke-dasharray:1;animation:draw 1.2s cubic-bezier(.4,0,.2,1) .15s both}
.anim .chart .area{animation:fadeIn 1s .5s both}
.anim .chart .dotend,.anim .chart .sdot{transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,1.1s)}
.anim .cal .cd{animation:pop .4s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--c,0) * 18ms + .1s)}
.anim .u{animation:pop .4s cubic-bezier(.3,1.5,.5,1) .25s both}
.anim .meter > div,.anim .hbar .trk > div,.anim .loadbar > *,.anim .pbar,.anim .compbar,.anim .gantt .gbar,.anim .stepper li::after{transform-origin:left;animation:growX .9s cubic-bezier(.2,.75,.2,1) .2s both}
.anim .stepper .dot{animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
.anim .stepper li:nth-child(2) .dot{animation-delay:.15s}.anim .stepper li:nth-child(3) .dot{animation-delay:.3s}.anim .stepper li:nth-child(4) .dot{animation-delay:.45s}.anim .stepper li:nth-child(5) .dot{animation-delay:.6s}
.anim .mxc{animation:pop .4s cubic-bezier(.3,1.5,.5,1) .2s both}
#calday,#tcalday{animation:fadeIn .3s both}
@media (max-width:1080px){ .day-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){ .rail .by{display:none} .rail-foot{flex-wrap:nowrap} .nav-ind{display:none} .nav button[aria-current="page"]{background:var(--accent-soft)} .hero-q{font-size:34px} .sig-n{font-size:36px} }

.portal-top nav button{display:inline-flex;align-items:center;gap:7px;position:relative}
.portal-top nav .ico{width:16px;height:16px}
/* ===== sun / moon switch ===== */
.theme-tg{position:relative;width:60px;height:32px;flex:none;border-radius:99px;border:1px solid #2c3150;padding:0;cursor:pointer;overflow:hidden;background:linear-gradient(135deg,#171c38,#0a0c17);box-shadow:inset 0 1px 4px rgba(0,0,0,.65);transition:background .55s,border-color .55s,box-shadow .55s}
:root.day .theme-tg{background:linear-gradient(135deg,#ffeab3,#ffc261);border-color:#e7b153;box-shadow:inset 0 1px 4px rgba(150,90,0,.25)}
.tg-stars{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(1.3px 1.3px at 37px 8px,#fff 50%,transparent 60%),radial-gradient(1px 1px at 46px 21px,#fff 50%,transparent 60%),
 radial-gradient(1.5px 1.5px at 30px 21px,#fff 50%,transparent 60%),radial-gradient(1px 1px at 52px 10px,#cfd6ff 50%,transparent 60%),
 radial-gradient(1px 1px at 42px 14px,#fff 50%,transparent 60%);opacity:.95;transition:opacity .45s,transform .7s cubic-bezier(.4,0,.2,1);animation:twinkle 3.4s ease-in-out infinite}
.tg-cloud{position:absolute;left:8px;top:8px;width:20px;height:9px;border-radius:9px;background:rgba(255,255,255,.85);box-shadow:7px -4px 0 -1px rgba(255,255,255,.85),13px 1px 0 -2px rgba(255,255,255,.75);opacity:0;transform:translateX(-14px);transition:opacity .45s .1s,transform .7s cubic-bezier(.4,0,.2,1) .05s;pointer-events:none}
:root.day .tg-stars{opacity:0;transform:translateY(10px)}
:root.day .tg-cloud{opacity:1;transform:none}
.tg-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#262b40;box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14),0 0 12px rgba(200,210,255,.18);transition:transform .6s cubic-bezier(.5,1.55,.45,1),background .5s,box-shadow .5s}
:root.day .tg-knob{transform:translateX(28px);background:#fff7e2;box-shadow:0 2px 8px rgba(170,100,0,.35),0 0 16px rgba(255,190,70,.75)}
.tg-knob svg{width:20px;height:20px;overflow:visible;transition:transform .7s cubic-bezier(.4,1.4,.5,1)}
:root.day .tg-knob svg{transform:rotate(180deg)}
.tg-core{fill:#ece8de;transform-origin:12px 12px;transition:transform .55s cubic-bezier(.4,1.4,.5,1),fill .5s}
:root.day .tg-core{fill:#f2a20c;transform:scale(.62)}
.tg-cut{transition:transform .55s cubic-bezier(.4,0,.2,1)}
:root.day .tg-cut{transform:translate(11px,-11px)}
.tg-rays{fill:none;stroke:#f2a20c;stroke-width:2;stroke-linecap:round;transform-origin:12px 12px;transform:scale(.2) rotate(-90deg);opacity:0;transition:transform .6s cubic-bezier(.4,1.5,.5,1) .05s,opacity .35s}
:root.day .tg-rays{transform:none;opacity:1}
.theme-tg:hover .tg-knob{box-shadow:0 2px 6px rgba(0,0,0,.55),0 0 18px rgba(200,210,255,.4)}
:root.day .theme-tg:hover .tg-knob{box-shadow:0 2px 8px rgba(170,100,0,.35),0 0 24px rgba(255,190,70,.95)}
.theme-tg:active .tg-knob{width:28px}
:root.day .theme-tg:active .tg-knob{transform:translateX(24px)}
.theme-tg:focus-visible{outline:2px solid var(--lumen);outline-offset:3px}
@keyframes twinkle{0%,100%{opacity:.95}50%{opacity:.55}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.login-tg{position:absolute;top:16px;right:16px;z-index:2}
.rail-foot{align-items:center}
.mob-act{display:none}
/* account sheet (phones) */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);animation:fadeIn .25s both}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-top:1px solid var(--line-2);border-radius:20px 20px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;box-shadow:0 -20px 60px -20px rgba(0,0,0,.7);animation:sheetUp .42s cubic-bezier(.2,.9,.2,1) both}
.sheet-grab{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:0 auto 10px}
.sheet-who{display:flex;gap:12px;align-items:center;padding:4px 0 12px;border-bottom:1px solid var(--line)}
.sheet-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 4px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);font-size:15px;text-align:left;cursor:pointer}
.sheet-row .grow{flex:1}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
/* ===== phones ===== */
@media (max-width:820px){
 .demo-strip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 16px;font-size:10.5px}
 .app{display:block}
 .rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;height:auto;padding:10px 16px;background:color-mix(in srgb,var(--bg) 94%,transparent);border-right:0;border-bottom:1px solid var(--line)}
 .rail .brand{flex:1;padding:0;min-width:0}
 .rail .who{display:none}
 .mob-act{display:flex;align-items:center;gap:12px}
 .mob-me{background:none;border:0;padding:0;cursor:pointer;border-radius:50%;line-height:0}
 .mob-me .avatar{width:34px;height:34px;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line-2)}
 .nav{position:fixed;left:0;right:0;bottom:0;z-index:40;order:0;flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;overflow:visible;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 97%,transparent);border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px rgba(0,0,0,.5)}
 .nav-sep,.nav button[data-go="team"]{display:none}
 .nav button{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px 6px;font-size:10.5px;font-weight:500;letter-spacing:0;border-radius:12px;width:auto;white-space:nowrap;min-width:0;min-height:52px;color:var(--fg-3)}
 .nav button .lbl{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .nav button .ico{width:22px;height:22px}
 .nav .count{position:absolute;top:3px;left:calc(50% + 5px);margin:0;font-size:9.5px;line-height:15px;padding:0 5px;min-width:16px;text-align:center}
 .nav .count:not(.hot):not(.risk){display:none}
 .nav button[aria-current="page"]{background:var(--accent-soft);color:var(--fg)}
 .nav button[aria-current="page"]::after{content:"";position:absolute;top:-7px;left:30%;right:30%;height:2px;border-radius:2px;background:var(--lumen);box-shadow:0 0 12px var(--lumen)}
 .main{padding-inline:16px;padding-block:18px calc(96px + env(safe-area-inset-bottom,0px))}
 .beam{top:0}
 input,select,textarea{font-size:16px}
 h1,.page-head h1{font-size:24px}
 .t-head h1{font-size:22px}
 .page-head{align-items:flex-start;gap:10px;margin-bottom:16px}
 .page-head p{font-size:13.5px}
 .hero-q{font-size:clamp(30px,9vw,40px);margin:10px 0 6px}
 .signals{grid-template-columns:minmax(0,1fr);gap:10px}
 .sig{padding:14px 16px}
 .sig-n{font-size:34px;min-width:40px}
 .sec-h{margin:26px 0 12px}
 .sec-h h2.big{font-size:20px}
 .tl{padding-left:20px}
 .tl-i{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:8px 4px}
 .tl-k{display:none}
 .now-line{margin-left:-20px}
 .mini-stats .v{font-size:22px}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tile{padding:12px 14px}
 .tile .v{font-size:21px}
 .panel{padding:14px;border-radius:14px}
 .tbl-wrap{margin:0 -14px;padding:0 14px}
 .filters{gap:8px}
 .filters > *{flex:1 1 140px;min-width:0}
 .filters input[type=text]{flex-basis:100%}
 .filters .seg{flex-basis:100%}
 .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
 .seg button{white-space:nowrap}
 .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
 .tabs-bar{scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
 .formula{grid-template-columns:minmax(0,1fr);gap:2px 0}
 .formula dd{margin-bottom:8px}
 .spread{gap:10px}
 .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .composer .foot{flex-direction:column;align-items:stretch}
 .composer .foot .btn{justify-content:center}
 .kv{gap:8px 10px}
 .c-head .row,.page-head > .row{width:100%}
 .c-head .row .btn,.page-head > .row .btn{flex:1;justify-content:center}
 .cal{--cs:15px}
 .daypanel{max-height:none}
 .wa-d b{font-size:16px}
 .tw-row{padding:10px 0}
 .ai-layout{gap:14px}
 .login-card > div{padding:22px}
 .login-h{font-size:27px}
 /* portal */
 .portal-top{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 96%,transparent)}
 .portal-top .in{flex-wrap:nowrap;gap:10px;padding:10px 16px}
 .portal-top nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 97%,transparent);border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px rgba(0,0,0,.5)}
 .portal-top nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;padding:7px 2px 6px;min-height:52px;border-radius:12px;color:var(--fg-3)}
 .portal-top nav button[aria-current="page"]{color:var(--fg)}
 .portal-top nav button[aria-current="page"]::after{content:"";position:absolute;top:-7px;left:32%;right:32%;height:2px;border-radius:2px;background:var(--lumen);box-shadow:0 0 12px var(--lumen)}
 .portal-top nav .count{position:absolute;top:3px;left:calc(50% + 5px);margin:0}
 .p-user-txt,.d-only{display:none}
 .pbrand{flex:1}
 .pclient{font-size:16px}
 .portal{padding-block:20px calc(96px + env(safe-area-inset-bottom,0px))}
 .pfoot{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
 .preview-bar{position:static;font-size:12px}
 .preview-bar ~ .portal-top{top:env(safe-area-inset-top,0px)}
 .pact{padding:14px 16px}
 .pact-t{font-size:16.5px}
 .stepper .lbl{font-size:10.5px}
 .nav,.portal-top nav{background:var(--surface)}
 .cmd-head .page-head{flex-wrap:nowrap;align-items:center;width:100%}
 .cmd-head .page-head .eyebrow{min-width:0;font-size:10.5px}
 .cmd-head .page-head .btn{flex:none;padding:7px 12px;font-size:13px}
 .ppow{white-space:nowrap}
 .stepper li.cur .lbl{overflow:visible;max-width:none}
 .stepper li.cur:last-child .lbl{transform:translateX(calc(-100% + 12px))}
}
@media (max-width:640px){
 table.rt thead{display:none}
 table.rt,table.rt tbody{display:block}
 table.rt tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
 table.rt td{display:inline-flex;align-items:center;gap:5px;border:0;padding:0;min-width:0!important;white-space:normal!important;text-align:left!important}
 table.rt td:first-child,table.rt td.full-m{flex:1 1 100%;display:block}
 table.rt td[data-l]::before{content:attr(data-l);font:500 11px var(--f-body);color:var(--fg-3);letter-spacing:.02em}
 table.rt tr.click:hover td{background:none}
 table.rt tr.click:active{border-color:color-mix(in srgb,var(--lumen) 40%,var(--line))}
 .tbl-wrap:has(> table.rt){margin:0;padding:0;overflow:visible}
}
@media (max-width:380px){ .nav button .lbl{font-size:9.5px} .tiles{grid-template-columns:minmax(0,1fr)} }

/* ===== owner, access, accounts, escalations, notifications, search, legal ===== */
input[type=tel],input[type=search]{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;min-width:0}
input:disabled{opacity:.6;cursor:not-allowed}
kbd{font:500 11px var(--f-mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--fg-2);background:var(--surface-2)}
.ico{flex:none}
/* avatars */
.avatar{background-size:cover;background-position:center}
.avatar.lg{width:64px;height:64px;font-size:21px;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line-2)}
/* rail tools */
.rail-tools{display:flex;gap:6px;align-items:center;margin:-6px 0 -4px}
.srch{flex:1;display:flex;align-items:center;gap:8px;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:6px 8px 6px 10px;color:var(--fg-3);cursor:pointer;font-size:13px;transition:border-color .2s,color .2s}
.srch:hover{border-color:color-mix(in srgb,var(--lumen) 40%,var(--line-2));color:var(--fg-2)}
.srch span{flex:1;text-align:left}
.srch .ico,.bell .ico,.mob-ic .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bell{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg-2);cursor:pointer}
.bell:hover{color:var(--fg);border-color:var(--line-2)}
.bdot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--lumen);color:var(--accent-fg);font:600 10px/17px var(--f-mono);text-align:center;box-shadow:0 0 0 2px var(--bg),0 0 14px -2px var(--lumen-glow);animation:bdot 2.4s ease-in-out infinite}
@keyframes bdot{50%{box-shadow:0 0 0 2px var(--bg),0 0 18px 1px var(--lumen-glow)}}
.who .me{background:none;border:0;padding:6px;margin:-6px;border-radius:10px;cursor:pointer;text-align:left;color:inherit;width:calc(100% + 12px)}
.who .me:hover{background:var(--surface-2)}
.who .me div span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .me .avatar{color:#fff;font-size:11.5px}
/* popovers */
.pop-bg{position:fixed;inset:0;z-index:70;background:transparent}
.pop-bg.dim{background:rgba(0,0,0,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .2s both}
:root.day .pop-bg.dim{background:rgba(30,25,15,.22)}
@keyframes fadeIn{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.notif-pop{position:fixed;z-index:71;top:64px;left:256px;width:min(400px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 24px 60px -18px rgba(0,0,0,.6);animation:popIn .22s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.np-h,.np-f{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.np-f{border-bottom:0;border-top:1px solid var(--line)}
.np-list{overflow-y:auto;flex:1}
.np-x{background:none;border:0;color:var(--fg-3);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:6px}
.np-x:hover{color:var(--fg);background:var(--surface-2)}
.np-i{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 16px;cursor:pointer;color:var(--fg);position:relative}
.np-i:hover{background:var(--surface-2)}
.np-i.unread::after{content:"";position:absolute;right:14px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--lumen);box-shadow:0 0 8px var(--lumen-glow)}
.np-i:not(.unread){opacity:.72}
.np-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--fg-2)}
.np-ic .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.np-ic.k-esc{background:var(--accent-soft);color:var(--lumen)}
.np-i.urgent .np-ic{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.np-ic.k-ticket{color:var(--p0)}
.np-t{min-width:0;display:flex;flex-direction:column;gap:1px;padding-right:12px}
.np-t b{font-weight:600;font-size:13.5px}
.np-t span{font-size:12.5px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.np-t em{font-style:normal;font-size:11.5px;color:var(--fg-3)}
.search-pop{position:fixed;z-index:71;top:12vh;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 30px 90px -20px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--lumen) 12%,transparent);overflow:hidden;animation:spIn .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes spIn{from{opacity:0;transform:translate(-50%,-8px) scale(.98)}}
.sp-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sp-in .ico{width:20px;height:20px;fill:none;stroke:var(--lumen);stroke-width:1.8;stroke-linecap:round}
.sp-in input{flex:1;border:0;background:none;font-size:17px;padding:2px 0;outline:none;min-width:0}
.sp-in input::-webkit-search-cancel-button{display:none}
.sp-res{max-height:min(460px,60vh);overflow-y:auto;padding:6px}
.sr-g{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:600;padding:10px 10px 4px}
.sr-i{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;color:var(--fg)}
.sr-i:hover,.sr-i.sel{background:var(--accent-soft)}
.sr-i .ico{width:17px;height:17px;fill:none;stroke:var(--fg-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr-i span{min-width:0;display:flex;flex-direction:column}
.sr-i b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-i span span{font-size:12px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-hint{font-size:12px;color:var(--fg-3);padding:10px}
/* footer */
.app-foot{margin-top:56px;padding:20px 0 4px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;font-size:12px;color:var(--fg-3)}
.app-foot.wide{max-width:980px;margin:40px auto 0;padding:20px 16px 36px}
.af-brand{display:flex;align-items:center;gap:10px}
.app-foot nav{display:flex;flex-wrap:wrap;gap:2px 4px}
.app-foot nav button{background:none;border:0;color:var(--fg-2);cursor:pointer;padding:4px 7px;border-radius:6px;font-size:12.5px}
.app-foot nav button:hover{color:var(--fg);background:var(--surface-2)}
.af-meta{display:flex;align-items:center;gap:12px}
.af-status{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--fg-2);cursor:pointer;font-size:12px;padding:0}
.af-status i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent)}
.pub-top{border-bottom:1px solid var(--line);background:var(--surface)}
.pub-top .in{max-width:980px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.pub-main{max-width:980px;margin:0 auto;padding:28px 16px 0}
.login-links{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:10px}
.login-links button{background:none;border:0;padding:0;color:var(--fg-3);font-size:12px;cursor:pointer}
.login-links button:hover{color:var(--fg)}
.lg-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* legal */
.legal-head{max-width:720px;margin-bottom:26px}
.legal-head h1{font-size:clamp(28px,4vw,40px);margin:6px 0 8px;letter-spacing:-.025em}
.legal-head p{margin:0 0 6px;font-size:15px}
.tmpl-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 14px;border:1px dashed color-mix(in srgb,var(--lumen) 55%,var(--line-2));border-radius:10px;background:var(--accent-soft);font-size:12.5px;color:var(--fg-2)}
.tmpl-note .ico{width:16px;height:16px;fill:none;stroke:var(--lumen);stroke-width:1.7;stroke-linecap:round;margin-top:1px}
.fill{background:var(--accent-soft);border-bottom:1.5px dashed var(--lumen);padding:0 3px;border-radius:3px;color:var(--fg)}
.legal{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
.legal.one{grid-template-columns:minmax(0,1fr)}
.legal.one .prose{max-width:860px}
.toc{position:sticky;top:20px;display:flex;flex-direction:column;gap:2px;font-size:13px}
.toc a{color:var(--fg-2);text-decoration:none;padding:4px 10px;border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--fg);border-left-color:var(--lumen)}
.prose{max-width:720px;font-size:14.5px;line-height:1.65;color:var(--fg-2)}
.prose section{scroll-margin-top:80px;padding-bottom:6px}
.prose h2{color:var(--fg);font-size:19px;margin:26px 0 8px}
.prose section:first-of-type h2{margin-top:0}
.prose b{color:var(--fg);font-weight:600}
.prose ul{padding-left:20px;margin:8px 0}
.prose li{margin:5px 0}
.prose table{font-size:13.5px}
.prose td{vertical-align:top}
.prose .link{font-size:inherit}
.legal-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.sec-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:26px}
.sc{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface)}
.sc .ico{width:20px;height:20px;fill:none;stroke:var(--lumen);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:8px}
.sc b{display:block;margin-bottom:3px}
.sc p{margin:0;font-size:13px}
.status-hero{display:flex;align-items:center;gap:16px;padding:20px 22px;margin-bottom:16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));background:radial-gradient(120% 140% at 0 0,color-mix(in srgb,var(--good) 14%,transparent),transparent 60%),var(--surface)}
.sh-dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--good);box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 22%,transparent);animation:shp 2.4s ease-in-out infinite}
@keyframes shp{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--good) 8%,transparent)}}
.up-row{padding:10px 0;border-bottom:1px solid var(--line)}
.up-h{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:13.5px}
.up-bars{display:flex;gap:2px;height:28px}
.up-bars i,.up-leg i{flex:1;border-radius:2px;background:var(--good);opacity:.85}
.up-bars i:hover{opacity:1;transform:scaleY(1.12)}
.up-bars i.d,.up-leg i.d{background:var(--warn)} .up-bars i.m,.up-leg i.m{background:var(--info)}
.up-leg{display:flex;gap:16px;margin-top:10px}
.up-leg span{display:inline-flex;align-items:center;gap:6px}
.up-leg i{display:inline-block;flex:none;width:10px;height:10px}
.pi{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pi:last-child{border-bottom:0}
.clog{display:flex;flex-direction:column;gap:0;max-width:760px;border-left:2px solid var(--line);margin-left:6px}
.cl-i{position:relative;padding:4px 0 22px 26px}
.cl-i::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-2)}
.cl-i.latest::before{background:var(--lumen);box-shadow:0 0 0 4px var(--accent-soft),0 0 14px var(--lumen-glow)}
.cl-v{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-v .mono{font-size:15px;color:var(--fg);font-weight:600}
.cl-i ul{margin:6px 0 0;padding-left:18px;color:var(--fg-2)}
.cl-i li{margin:3px 0}
/* lock */
.lock .ico{width:26px;height:26px;fill:none;stroke:var(--lumen);stroke-width:1.6;stroke-linecap:round;display:block;margin:0 auto 10px}
.lock p{max-width:440px;margin:6px auto 14px}
.btn .ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.link .ico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;vertical-align:-2px}
.ai-nr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--fg-3);padding:8px 10px;border:1px dashed var(--line-2);border-radius:9px}
.ai-nr > .ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
/* escalations */
.esc-mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--accent-soft);vertical-align:-3px;margin-left:4px}
.esc-mark .ico{width:12px;height:12px;fill:none;stroke:var(--lumen);stroke-width:2.2;stroke-linecap:round}
.etype{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;white-space:nowrap}
.etype.adv{background:color-mix(in srgb,var(--info) 15%,transparent);color:var(--info)}
.etype.tko{background:var(--accent-soft);color:var(--lumen)}
.needc{font-size:12px;font-weight:500;white-space:nowrap;color:var(--fg-2)}
.needc::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--fg-3);vertical-align:1px}
.needc.n-now{color:var(--crit)} .needc.n-now::before{background:var(--crit);box-shadow:0 0 8px var(--crit)}
.needc.n-today::before{background:var(--warn)}
.esc-banner{position:relative;border-radius:14px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--lumen) 40%,var(--line));background:radial-gradient(120% 120% at 0 0,color-mix(in srgb,var(--lumen) 12%,transparent),transparent 60%),var(--surface);box-shadow:0 18px 50px -30px var(--lumen-glow);overflow:hidden}
.esc-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--lumen-hi),var(--lumen))}
.eb-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.eb-badge{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:13.5px;color:var(--fg)}
.eb-badge .ico{width:16px;height:16px;fill:none;stroke:var(--lumen);stroke-width:2;stroke-linecap:round;animation:escUp 1.8s ease-in-out infinite}
@keyframes escUp{50%{transform:translateY(-2px)}}
.eb-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.eb-ask{white-space:pre-wrap;font-size:14.5px;line-height:1.55;color:var(--fg);padding:10px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.eb-tried{font-size:13px;color:var(--fg-2);margin-top:8px}
.eb-tried b{color:var(--fg);font-weight:600;margin-right:4px}
.eb-form{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.eb-form textarea{width:100%;resize:vertical}
.eb-foot{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.eb-pulse{width:9px;height:9px;border-radius:50%;background:var(--lumen);box-shadow:0 0 0 0 var(--lumen-glow);animation:ebp 1.8s ease-out infinite}
@keyframes ebp{0%{box-shadow:0 0 0 0 var(--lumen-glow)}100%{box-shadow:0 0 0 10px transparent}}
.eb-foot .btn{margin-left:auto}
.msg.note.esc{background:color-mix(in srgb,var(--lumen) 7%,var(--surface));border-color:color-mix(in srgb,var(--lumen) 30%,var(--line));border-left:3px solid var(--lumen)}
.msg.note.esc .tag{color:var(--lumen)}
.msg.note.esc-advice,.msg.note.esc-took{box-shadow:0 0 0 1px color-mix(in srgb,var(--lumen) 20%,transparent),0 14px 40px -26px var(--lumen-glow)}
.msg.note.esc .body{color:var(--fg)}
.esc-cta{border-color:color-mix(in srgb,var(--lumen) 28%,var(--line))}
.esc-cta.off{border-color:var(--line)}
.ec-h{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ec-h h3{margin:0}
.esc-2{display:grid;gap:8px}
.esc-2 button{display:flex;flex-direction:column;gap:2px;text-align:left;padding:11px 13px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface-2);cursor:pointer;color:var(--fg);transition:border-color .2s,transform .15s,box-shadow .25s}
.esc-2 button:hover{border-color:var(--lumen);box-shadow:0 10px 28px -16px var(--lumen-glow);transform:translateY(-1px)}
.esc-2 b{font-weight:600}
.esc-2 span{font-size:12.5px;color:var(--fg-2)}
.esc-seg{width:100%}
.esc-seg button{flex:1}
.need-pick{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.need-pick legend{font-size:12.5px;font-weight:600;color:var(--fg-2);margin-bottom:6px;padding:0}
.need-pick label{flex:1 1 auto;cursor:pointer}
.need-pick input{position:absolute;opacity:0;pointer-events:none}
.need-pick span{display:block;text-align:center;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;font-size:12.5px;white-space:nowrap}
.need-pick input:checked + span{border-color:var(--lumen);background:var(--accent-soft);color:var(--fg)}
.need-pick input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.eh{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.esc-cta .eh:first-child,.panel > .eh{margin-top:0;border-top:0;padding-top:0}
.eh-i{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:5px 0;flex-wrap:wrap}
.esc-intro{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;background:radial-gradient(120% 140% at 0 0,var(--accent-soft),transparent 60%),var(--surface)}
.esc-intro > div:first-child{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft)}
.esc-intro .ico{width:22px;height:22px;fill:none;stroke:var(--lumen);stroke-width:2;stroke-linecap:round}
.esc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.esc-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 16px;border-radius:13px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--fg);transition:border-color .2s,transform .15s,box-shadow .25s;min-width:0}
.esc-card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow)}
.esc-card.st-open{border-color:color-mix(in srgb,var(--lumen) 35%,var(--line));background:radial-gradient(120% 100% at 0 0,color-mix(in srgb,var(--lumen) 8%,transparent),transparent 60%),var(--surface)}
.ec-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ec-t{font-weight:600;font-size:14.5px}
.ec-ask,.ec-rep{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--fg-2);margin-top:4px}
.ec-ask b{color:var(--fg);font-weight:600}
.ec-rep{padding:8px 10px;border-radius:9px;background:var(--surface-2);border-left:2px solid var(--lumen)}
.tabs-bar .count.hot{font:600 10.5px var(--f-mono);background:var(--lumen);color:var(--accent-fg);padding:1px 6px;border-radius:99px;margin-left:4px}
/* switches */
.sw-t{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;transition:background .25s;margin:0;vertical-align:middle}
.sw-t::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .32s cubic-bezier(.3,1.4,.5,1)}
.sw-t:checked{background:var(--lumen);box-shadow:0 0 14px -4px var(--lumen-glow)}
.sw-t:checked::after{transform:translateX(16px)}
.sw-t:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tg-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer}
.tg-row:last-child{border-bottom:0}
/* team */
.perm-tbl th.c,.perm-tbl td.c{text-align:center}
.perm-tbl tr.sel td{background:var(--accent-soft)}
.perm-tbl tr.susp td{opacity:.55}
.pc{display:inline-flex;align-items:center;gap:3px;font-weight:600;color:var(--fg-3)}
.pc.on{color:var(--good)} .pc.warn{color:var(--warn)}
.pc.own{color:var(--lumen)}
.pc .ico{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.ustat{font-size:12px;font-weight:500;white-space:nowrap}
.ustat::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--good);vertical-align:1px}
.ustat.u-suspended{color:var(--crit)} .ustat.u-suspended::before{background:var(--crit)}
.ustat.u-invited{color:var(--fg-2)} .ustat.u-invited::before{background:var(--info)}
.req-panel{border-color:color-mix(in srgb,var(--lumen) 35%,var(--line));margin-bottom:16px}
.req-panel h2{display:flex;align-items:center;gap:8px}
.req-panel h2 .ico{width:18px;height:18px;fill:none;stroke:var(--lumen);stroke-width:1.8}
.areq{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.req-note{margin-top:6px;font-size:13px;color:var(--fg-2);font-style:italic}
.invite-f{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.member{margin-top:16px;border-color:color-mix(in srgb,var(--lumen) 30%,var(--line));animation:rise .45s cubic-bezier(.2,.75,.2,1) both;scroll-margin-top:80px}
.alog{display:flex;flex-direction:column;gap:10px}
.al-i{display:flex;gap:10px;align-items:flex-start}
/* account */
.acc-hero{display:flex;gap:18px;align-items:center;margin-bottom:16px;background:radial-gradient(100% 140% at 0 0,var(--accent-soft),transparent 60%),var(--surface)}
.acc-hero h2{font-size:21px}
.own-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--accent-soft);color:var(--lumen);border:1px solid color-mix(in srgb,var(--lumen) 35%,transparent)}
.own-chip .ico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.chip.ok{color:var(--good)} .chip.warn{color:var(--warn)}
.acc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.av-edit{display:flex;gap:18px;align-items:center}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.sw{width:24px;height:24px;border-radius:50%;border:0;background:var(--sw);cursor:pointer;box-shadow:0 0 0 2px var(--surface),0 0 0 3px transparent;transition:transform .2s,box-shadow .2s}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--lumen)}
.pw-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:-4px}
.pw-bar i{height:5px;border-radius:3px;background:var(--line-2);transition:background .3s}
.pw-bar.s1 i:nth-child(-n+1){background:var(--crit)}
.pw-bar.s2 i:nth-child(-n+2){background:var(--warn)}
.pw-bar.s3 i:nth-child(-n+3){background:var(--lumen)}
.pw-bar.s4 i:nth-child(-n+4),.pw-bar.s5 i{background:var(--good)}
.pw-l{margin-top:4px;color:var(--fg-2);font-weight:500}
.pw-rules{list-style:none;padding:0;margin:6px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;color:var(--fg-3)}
.pw-rules li.ok{color:var(--good)}
.codes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px}
.codes span{padding:6px;text-align:center;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px}
.tfa-steps{padding-left:18px;margin:0 0 12px;color:var(--fg-2)}
.tfa-steps li{margin:4px 0}
.tfa-key{margin:6px 0;padding:8px 12px;border-radius:8px;background:var(--surface-2);border:1px dashed var(--line-2);font-size:14px;letter-spacing:.08em;color:var(--fg);word-break:break-all}
.sess{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sess:last-child{border-bottom:0}
.sess-ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--fg-2)}
.sess-ic .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.acc-perm{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.ap-ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--fg-3)}
.ap-ic .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acc-perm.on .ap-ic{background:var(--accent-soft);color:var(--lumen)}
.req-form{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0 12px;border-bottom:1px solid var(--line)}
.req-form input{flex:1 1 180px}
.p-me{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px 6px;margin:-4px -6px;border-radius:10px;cursor:pointer;color:inherit;text-align:left}
.p-me:hover{background:var(--surface-2)}
.mob-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--fg-2);cursor:pointer;position:relative;padding:0}
.sheet-row .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fg-ok{padding:14px;border-radius:10px;background:color-mix(in srgb,var(--good) 10%,transparent);border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));font-size:13.5px}
@media (max-width:1080px){ .acc-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){
 .rail-tools{display:none}
 .mob-act{gap:8px}
 .mob-act .bell{width:34px;height:34px;border-radius:50%}
 .notif-pop{left:0;right:0;top:auto;bottom:0;width:auto;max-height:78vh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:sheetUp .32s cubic-bezier(.2,.8,.2,1) both}
 .pop-bg{background:rgba(0,0,0,.45)}
 .search-pop{top:10px;border-radius:14px}
 .sp-in input{font-size:16px}
 .legal{grid-template-columns:minmax(0,1fr);gap:0}
 .toc{display:none}
 .sec-cards{grid-template-columns:minmax(0,1fr)}
 .app-foot{flex-direction:column;align-items:flex-start;margin-top:40px}
 .app-foot.wide{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
 .pub-main + .app-foot.wide{padding-bottom:36px}
 .esc-grid{grid-template-columns:minmax(0,1fr)}
 .acc-hero{flex-direction:column;align-items:flex-start;gap:12px}
 .av-edit{align-items:flex-start}
 .pw-rules{grid-template-columns:minmax(0,1fr)}
 .codes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pi{grid-template-columns:minmax(0,1fr);gap:2px}
 .up-bars{gap:1px;height:24px}
 .p-me .avatar{width:34px;height:34px}
}
@media (max-width:640px){
 .perm-tbl tr{gap:10px 14px}
 .perm-tbl td.c{flex-direction:column;align-items:center;gap:4px;min-width:52px!important}
 .perm-tbl td.c[data-l]::before{font-size:10.5px}
 .perm-tbl td.r{margin-left:auto}
 .eb-foot .btn{margin-left:0}
 .areq{flex-wrap:wrap}
 .areq > div[style]{flex:1 1 calc(100% - 52px)!important}
 .areq > .row{width:100%;justify-content:flex-end}
}
@media (max-width:380px){ .mob-act .theme-tg{display:none} }

/* portal in the app shell */
.preview-bar.pv-app{position:relative}
.preview-bar.pv-app + .app .rail{height:calc(100vh - 31px - 56px);height:calc(100dvh - 31px - 56px)}
.pco{display:flex;align-items:center;gap:10px;padding:10px;margin:-4px 0 -2px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);min-width:0}
.pco-mark{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:700 12.5px var(--f-display);color:var(--accent-fg);background:linear-gradient(135deg,var(--lumen-hi),var(--lumen));box-shadow:0 6px 18px -8px var(--lumen-glow)}
.pco b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pco span span{display:block;font-size:11.5px;color:var(--fg-3)}
.phelp{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--c2) 45%,var(--line));background:color-mix(in srgb,var(--c2) 6%,transparent);font-size:12.5px;color:var(--fg-2)}
.phelp b{color:var(--fg);font-size:13px}
.phelp .btn{align-self:flex-start;margin-top:2px}
.is-portal .rail .who{margin-top:0}
.portal-main .page-head h1,.portal-main .t-head h1{letter-spacing:-.02em}
@media (max-width:820px){
 .pco,.phelp{display:none}
 .is-portal .mob-act .theme-tg{display:inline-flex}
}

.m-only{display:none}
input[type=date],input[type=datetime-local],input[type=time]{background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;min-width:0;color-scheme:inherit}
.svc-row b{display:block}
@media (max-width:820px){ .m-only{display:inline} }
@media (hover:none){ .nav button:not([aria-current]):hover{background:transparent;color:var(--fg-3)} }

/* ===== live alerts ===== */
#popz{position:fixed;top:18px;right:18px;z-index:90;display:flex;flex-direction:column;gap:10px;width:min(370px,calc(100vw - 24px));pointer-events:none}
.popn{pointer-events:auto;position:relative;display:flex;gap:12px;padding:14px 16px 16px 18px;border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2);box-shadow:0 22px 50px -18px rgba(0,0,0,.65),0 0 0 1px color-mix(in srgb,var(--lumen) 10%,transparent);overflow:hidden;animation:popSlide .55s cubic-bezier(.2,1.25,.3,1) both}
.popn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--lumen-hi),var(--lumen))}
.popn.urgent::before{background:var(--crit)}
.popn.urgent{border-color:color-mix(in srgb,var(--crit) 40%,var(--line-2))}
.popn.out{animation:popOut .3s ease-in both}
@keyframes popSlide{from{opacity:0;transform:translateX(48px) scale(.96)}}
@keyframes popOut{to{opacity:0;transform:translateX(48px) scale(.98)}}
.pn-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--lumen)}
.pn-ic .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.urgent .pn-ic{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit);animation:pnPulse 1.6s ease-in-out infinite}
@keyframes pnPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--crit) 12%,transparent)}}
.pn-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.pn-top{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);font-weight:600;padding-right:20px}
.urgent .pn-top span:first-child{color:var(--crit)}
.pn-t{text-transform:none;letter-spacing:0;font-weight:500}
.pn-b b{font-size:14px;font-weight:600;color:var(--fg)}
.pn-s{font-size:12.5px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pn-a{display:flex;gap:6px;margin-top:9px}
.pn-x{position:absolute;top:8px;right:8px;background:none;border:0;color:var(--fg-3);cursor:pointer;font-size:12px;padding:3px 6px;border-radius:6px}
.pn-x:hover{color:var(--fg);background:var(--surface-2)}
.pn-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lumen);transform-origin:left;animation:pnBar 9s linear forwards;opacity:.75}
.urgent .pn-bar{background:var(--crit)}
.popn:hover .pn-bar{animation-play-state:paused}
@keyframes pnBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.bell.ring .ico{animation:bellRing .9s ease-in-out 2;transform-origin:50% 15%}
@keyframes bellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
/* ===== Lumos AI, custom ===== */
.ai-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:26px 30px;margin-bottom:16px;border-radius:18px;border:1px solid color-mix(in srgb,var(--lumen) 30%,var(--line));background:radial-gradient(90% 160% at 0% 50%,color-mix(in srgb,var(--lumen) 14%,transparent),transparent 58%),var(--surface)}
.ai-hero h1{font-size:30px;margin:4px 0 2px;letter-spacing:-.02em}
.ai-lead{font-size:17px;color:var(--fg);margin:0 0 4px;font-weight:500}
.ai-hero .ai-tag{max-width:640px}
.ai-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12.5px;color:var(--fg-3)}
.ai-meta b{color:var(--fg-2);font-weight:600}
.eng-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent);margin-right:8px;vertical-align:1px}
.scanning .eng-dot{background:var(--lumen);animation:ebp 1s ease-out infinite}
.ai-run .spark-ico{width:14px;height:14px;fill:currentColor}
.orb{position:relative;width:112px;height:112px;flex:none}
.orb i{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--lumen) 55%,transparent)}
.orb .r1{border-top-color:transparent;animation:orbSpin 9s linear infinite}
.orb .r2{inset:14px;border-color:color-mix(in srgb,var(--lumen) 38%,transparent);border-left-color:transparent;animation:orbSpin 6s linear infinite reverse}
.orb .r3{inset:27px;border-style:dashed;border-color:color-mix(in srgb,var(--lumen) 30%,transparent);animation:orbSpin 16s linear infinite}
.orb .core{position:absolute;inset:38px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,var(--lumen-hi),var(--lumen) 62%);box-shadow:0 0 28px var(--lumen-glow),0 0 70px var(--lumen-glow);animation:corePulse 3.2s ease-in-out infinite}
.orb .core .spark-ico{width:17px;height:17px;fill:#2a1c00}
.orb .sat{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--lumen-hi);box-shadow:0 0 10px var(--lumen)}
.orb .s1{animation:sat1 5s linear infinite}
.orb .s2{width:5px;height:5px;margin:-2.5px;opacity:.85;animation:sat2 8s linear infinite}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes corePulse{50%{transform:scale(1.09);box-shadow:0 0 40px var(--lumen-glow),0 0 96px var(--lumen-glow)}}
@keyframes sat1{from{transform:rotate(0deg) translateX(56px)}to{transform:rotate(360deg) translateX(56px)}}
@keyframes sat2{from{transform:rotate(200deg) translateX(42px)}to{transform:rotate(-160deg) translateX(42px)}}
.scanning .orb .r1{animation-duration:1.1s}.scanning .orb .r2{animation-duration:.8s}.scanning .orb .r3{animation-duration:2s}
.scanning .orb .s1{animation-duration:.9s}.scanning .orb .s2{animation-duration:1.3s}.scanning .orb .core{animation-duration:.7s}
.ai-hero.scanning::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--lumen) 16%,transparent) 50%,transparent 70%);animation:aiSweep 1.2s linear infinite}
@keyframes aiSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.scanning #ai-scan-line{color:var(--lumen);font-family:var(--f-mono);font-size:12.5px}
.eng h3{display:flex;align-items:center;gap:7px}
.eng h3 .spark-ico{width:14px;height:14px;fill:var(--lumen)}
.learn{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.lr-r{flex:none;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit);white-space:nowrap}
@media (max-width:820px){
 #popz{top:calc(84px + env(safe-area-inset-top,0px));left:12px;right:12px;width:auto}
 @keyframes popSlide{from{opacity:0;transform:translateY(-24px) scale(.97)}}
 @keyframes popOut{to{opacity:0;transform:translateY(-16px)}}
 .ai-hero{grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px}
 .orb{transform:scale(.62);margin:-21px}
 .ai-run{grid-column:1/-1;justify-content:center}
 .ai-hero h1{font-size:24px}
}

/* subtle live bell */
.bdot{animation:none}
.bell.live{color:var(--fg);border-color:color-mix(in srgb,var(--lumen) 45%,var(--line))}
.bell.live::before{content:"";position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;border:2px solid var(--lumen);pointer-events:none;animation:liveRing 2s ease-out infinite}
.bell.live .ico{filter:drop-shadow(0 0 4px var(--lumen-glow))}
@keyframes liveRing{from{transform:scale(.85);opacity:.9}to{transform:scale(2.3);opacity:0}}
/* avatar collection */
.avatar.ava{padding:0;overflow:hidden}
.avatar.ava svg{width:100%;height:100%;display:block}
.av-big{position:relative;background:none;border:0;padding:0;cursor:pointer;border-radius:50%;line-height:0;flex:none}
.av-big .avatar.lg{transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.av-big:hover .avatar.lg{transform:scale(1.06);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--lumen),0 10px 30px -8px var(--lumen-glow)}
.av-edit-ic{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font-size:12px;line-height:1;box-shadow:0 0 0 2px var(--surface)}
.ava-pop{position:fixed;z-index:71;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:24px;box-shadow:0 40px 100px -30px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--lumen) 12%,transparent);animation:avaIn .32s cubic-bezier(.2,1.1,.3,1) both}
@keyframes avaIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
.ava-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.ava-h h2{font-size:22px}
.ava-h p{margin:4px 0 0}
.ava-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px}
.ava-tile{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--fg-2);font-size:13px;font-weight:500}
.ava-art{display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--line);transition:transform .28s cubic-bezier(.3,1.5,.5,1),box-shadow .25s}
.ava-art svg{width:100%;height:100%;display:block}
.ava-tile:hover .ava-art,.ava-tile:focus-visible .ava-art{transform:scale(1.09) translateY(-3px);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--lumen),0 16px 34px -10px var(--lumen-glow)}
.ava-tile:hover,.ava-tile.on{color:var(--fg)}
.ava-tile.on .ava-art{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--lumen)}
.ava-tile.on span:last-child::after{content:" ✓";color:var(--lumen)}
.ava-tile:focus-visible{outline:none}
.ava-f{display:flex;gap:8px;justify-content:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:820px){ .ava-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .ava-art{width:78px;height:78px} .ava-pop{padding:18px} }

@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }

/* ===== production additions ===== */
.login.solo .login-card{grid-template-columns:minmax(0,1fr);max-width:480px}
body.busy{cursor:progress}
body.busy .btn.primary{opacity:.85}
.atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.att-f{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-f:hover{border-color:var(--lumen)}
.att-pick{display:inline-flex;gap:8px;align-items:center;margin:8px 0 2px;color:var(--fg-2);cursor:pointer}
.att-pick input{font-size:12px;max-width:240px}
.tfa-qr{margin:10px 0 6px;display:inline-block;padding:8px;background:#fff;border-radius:10px;border:1px solid var(--line)}
.tfa-qr img{display:block}
.svc-form h3{font-size:15px}
a.btn{text-decoration:none}
.grow{flex:1 1 auto}
@media (max-width:640px){.att-pick input{max-width:170px}}