:root{--bg:#f0f1f2;--surf:#fff;--ink:#1c2733;--mut:#5f6b7a;--line:#dfe2e6;--side:#2b2780;--sidet:#dedcf7;--acc:#4f46e5;--acct:#fff;--soft:#ecebfd;--warn:#a85d00;--warnb:#fdeccf;--bad:#c4332b;--badb:#fbe6e4;--ok:#1f7a45;--okb:#dff3e6;--hd1:#2b2780;--hd2:#4f46e5;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#11161c;--surf:#1a222b;--ink:#e8eef4;--mut:#95a3b2;--line:#2b3744;--side:#171548;--sidet:#cfcdf5;--acc:#9a96f7;--acct:#14123f;--soft:#25235a;--warn:#f0b35a;--warnb:#3a2c12;--bad:#f0877d;--badb:#3d1f1c;--ok:#6fd49a;--okb:#14321f;--hd1:#171548;--hd2:#3a35a8}
:root[data-theme="dark"]{--bg:#11161c;--surf:#1a222b;--ink:#e8eef4;--mut:#95a3b2;--line:#2b3744;--side:#171548;--sidet:#cfcdf5;--acc:#9a96f7;--acct:#14123f;--soft:#25235a;--warn:#f0b35a;--warnb:#3a2c12;--bad:#f0877d;--badb:#3d1f1c;--ok:#6fd49a;--okb:#14321f;--hd1:#171548;--hd2:#3a35a8}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 Figtree,system-ui,sans-serif;background:var(--bg);color:var(--ink);display:flex;min-height:100vh}
h1,h2{font-family:Fraunces,Georgia,serif;font-weight:600;margin:0}
h1{font-size:28px}h2{font-size:18px}
nav{width:220px;background:var(--side);color:var(--sidet);padding:20px 12px;flex:none;position:sticky;top:0;height:100vh}
.brand{font:600 20px Fraunces,Georgia,serif;color:#fff;padding:0 10px 20px}
nav a{display:block;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;font-weight:500;margin-bottom:2px}
nav a.on{background:rgba(255,255,255,.12);color:#fff}
nav a:hover{background:rgba(255,255,255,.07)}
.hbg{display:none}
.toprow{display:flex;align-items:center;gap:8px}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:inherit;cursor:pointer;flex:none}
.bell svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bell .bdg{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.lnstats{display:grid;gap:14px}
.lnstat{display:flex;gap:16px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:10px}
.lnstat .grow{min-width:0}
.lnring{flex:none}
.lnring text{font:700 15px Figtree,system-ui,sans-serif;fill:var(--ink)}
.lnstat details{margin-top:6px}
.lnstat details summary{cursor:pointer}
.lnstat details .row{padding:4px 0;border-top:0}
.navlist{display:contents}
.navback{display:none}
main{flex:1;min-width:0;padding:28px 32px;max-width:1100px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.sub{color:var(--mut);margin:2px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:20px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stat b{display:block;font:600 30px Fraunces,Georgia,serif}
.stat span{color:var(--mut);font-size:13px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.av{width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--acc);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.grow{flex:1 1 auto;min-width:0}.grow small{color:var(--mut);display:block}
.acctmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.acctbtns{display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-end}
/* One shared grid for the whole list, not a grid per row: each .acctrow is display:contents so its three
   cells become direct children of .acctlist's grid, landing in the same columns on every row. That's what
   actually keeps the buttons aligned (a grid per row only aligns itself, not with its neighbors) and lets
   the button column size itself once, to whichever row needs the most room, instead of per row. */
.acctlist{display:grid;grid-template-columns:minmax(120px,260px) minmax(110px,200px) max-content;align-items:center;column-gap:16px}
.acctrow{display:contents}
.acctrow>*{padding:10px 0;border-top:1px solid var(--line)}
.acctrow:first-child>*{border-top:0}
.acctrow>.grow{min-width:0}
@media(max-width:900px){.acctlist{grid-template-columns:1fr}.acctrow>.acctmeta,.acctrow>.acctbtns{border-top:0}.acctbtns{flex-wrap:wrap;justify-content:flex-start}}
.kreact{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.reactBtn{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px;line-height:1.6;cursor:pointer}
.reactBtn.on{background:var(--acc);color:var(--acct);border-color:var(--acc)}
button,select,input{font:inherit;color:var(--ink)}
.btn{background:var(--acc);color:var(--acct);border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--acc);border:1px solid var(--line)}
.btn.sm{padding:4px 10px;font-size:13px}
.btn.bad{background:var(--badb);color:var(--bad)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input,select{background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.bar input{max-width:280px}.bar select{max-width:180px}
.tw{overflow-x:auto}
@media(min-width:561px){.tw.stick table td:nth-child(2){white-space:normal;max-width:360px;word-break:break-word}}
.tw.stick table td:last-child,.tw.stick table th:last-child{position:sticky;right:0;background:var(--surf);box-shadow:-6px 0 6px -6px rgba(0,0,0,.2)}
table{width:100%;border-collapse:collapse;background:var(--surf);border:1px solid var(--line);border-radius:12px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--mut);font-weight:600;font-size:13px}
tr.c{cursor:pointer}tr.c:hover{background:var(--soft)}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--soft);color:var(--acc)}
.tag.p{background:var(--warnb);color:var(--warn)}.tag.a{background:var(--okb);color:var(--ok)}.tag.d{background:var(--badb);color:var(--bad)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px;align-items:end}
.form label{font-size:13px;color:var(--mut);display:block;margin-bottom:3px}
.form>*{min-width:0}
input[type=date],input[type=time],input[type=datetime-local]{width:0;min-width:100%;max-width:100%;box-sizing:border-box}
.pipe{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:12px;overflow-x:auto}
.pipe h2{font-size:15px;margin-bottom:10px}
.cand{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
.cand small{color:var(--mut);display:block}
.cand .btn{margin-top:6px}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--surf);color:var(--ink);padding:22px;width:min(420px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dl{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;margin:14px 0}dt{color:var(--mut)}dd{margin:0}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
textarea{width:100%;background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;color:var(--ink)}
.num{text-align:center}.tot td{font-weight:700;background:var(--soft)}
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.stages div{border-left:3px solid var(--acc);padding:2px 12px}.stages b{font:600 24px Fraunces,Georgia,serif;display:block}.stages span{color:var(--mut);font-size:13px}
.fb{padding:10px 0;border-top:1px solid var(--line)}.fb:first-of-type{border-top:0}.fb small{color:var(--mut)}
.mgr label[for=te],.mgr #te,.mgr label[for=ff],.mgr #ff,.emp .adm,.emp label[for=tse],.emp #tse,.emp label[for=te],.emp #te,.emp label[for=ff],.emp #ff{display:none!important}
.role{display:flex;gap:4px;margin:0 6px 12px;background:rgba(255,255,255,.08);padding:3px;border-radius:9px}.role button{flex:1;background:none;border:0;color:var(--sidet);padding:6px;border-radius:7px;font-weight:600;cursor:pointer}.role button.on{background:#fff;color:#12303a}
#who{padding:0 6px 14px}#who select{background:rgba(255,255,255,.12);color:#fff;border:0}#who option{color:#000}
.wsw{display:flex;align-items:center;gap:8px}
.hc{width:68px;text-align:center;padding:7px 4px}
.gate nav{display:none}.gate main{max-width:none}
body{display:block;font-family:Inter,system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--hd1);z-index:30}
h1,h2{font-family:inherit;font-weight:600}h1{font-size:26px}h2{font-size:17px}
nav{display:flex;align-items:center;gap:2px;width:auto;height:auto;padding:0 16px;min-height:56px;background:linear-gradient(90deg,var(--hd1),var(--hd2));color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;overflow-x:auto}
.brand{padding:0 18px 0 0;font:700 19px Inter,system-ui,sans-serif;display:flex;align-items:center;white-space:nowrap;color:#fff}
.brand::before{content:"";width:26px;height:26px;border-radius:7px;background:url(logo.svg) center/contain no-repeat;margin-right:9px;flex:none}
nav a{padding:18px 12px;border-radius:0;border-bottom:3px solid transparent;margin:0;white-space:nowrap;color:#fff}
nav a.on{background:none;border-bottom-color:#f0603c;font-weight:600}
nav a:hover{background:rgba(255,255,255,.1)}
#who{order:99;margin-left:auto;padding:0 0 0 16px}
.who{display:flex;align-items:center;gap:10px;color:#fff;font-size:13px;white-space:nowrap}.who b{display:block;line-height:1.2}.who .em{display:block;opacity:.8;font-size:12px}.who .av{background:#fff;color:#2b2780}.who .tag{background:rgba(255,255,255,.18);color:#fff}
main{max-width:1200px;margin:0 auto;width:100%;padding:24px 28px}
.gate main{max-width:none}
.card{border-radius:8px;box-shadow:0 1px 2px rgba(16,32,52,.06)}
.btn{border-radius:999px;padding:8px 18px}.btn.sm{padding:4px 12px}
input,select,textarea{border-radius:6px}
table{border-radius:8px;overflow:hidden}
th{background:var(--bg);color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.stat b{font:700 28px Inter,system-ui,sans-serif}.stages b{font:700 24px Inter,system-ui,sans-serif}
.wk{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.wk a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;background:var(--surf);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,32,52,.06)}
.wk a:hover{border-color:var(--acc);box-shadow:0 2px 8px rgba(8,117,225,.2)}
.wk i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.wk svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){nav{padding:0 8px}main{padding:18px 14px}.who .em{display:none}.brand{padding-right:8px}}
@media(max-width:560px){th,td{padding:8px 10px;font-size:13px}th{font-size:11px}}
.org,.org ul{list-style:none;margin:0;padding:0}.org ul{padding-left:28px;margin-left:18px;border-left:2px solid var(--line)}.org li{margin:8px 0}
.org summary{list-style:none;display:flex;align-items:center}.org summary::-webkit-details-marker{display:none}
.oc{display:inline-flex;align-items:center;gap:10px;text-align:left;background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;color:var(--ink)}.oc:hover{border-color:var(--acc)}.oc small{display:block;color:var(--mut)}.oc.me{border-color:#f0603c;box-shadow:0 0 0 2px rgba(240,96,60,.25)}
.tg{padding:6px 10px;color:var(--mut);cursor:pointer}details:not([open])>summary .tg{display:inline-block;transform:rotate(-90deg)}
.pb{height:8px;border-radius:99px;background:var(--line);overflow:hidden}.pb i{display:block;height:100%;background:var(--acc)}
body{display:flex;align-items:flex-start}
nav{flex-direction:column;align-items:stretch;gap:0;width:244px;flex:none;height:100vh;top:0;padding:14px 10px;background:linear-gradient(180deg,var(--hd1),var(--hd2));overflow-x:hidden;overflow-y:auto}
.brand{padding:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.toprow{padding:6px 10px 14px}
.nl{font-size:11px;text-transform:uppercase;letter-spacing:.09em;opacity:.7;padding:16px 12px 4px;color:#fff}
nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border-bottom:0;margin:1px 0}
nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
nav a.on{background:rgba(255,255,255,.2);border-bottom:0;font-weight:600}
nav a:hover{background:rgba(255,255,255,.12)}
#who{order:0;margin:auto 0 0;padding:14px 4px 4px;border-top:1px solid rgba(255,255,255,.22)}
.who{align-items:flex-start}.who>div{flex:1;min-width:0}.who b,.who .em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who .tag{flex:none}
main{flex:1;min-width:0;max-width:1240px;margin:0;width:auto}
.gate main{max-width:none;margin:0 auto}
.avl{display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;width:48px;height:48px;flex:none;font-size:16px}
.avl.sm{width:38px;height:38px;font-size:13px}.avl.lg{width:92px;height:92px;font-size:30px}
.oc2{display:flex;align-items:center;gap:10px;text-align:left;background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--ink);font:inherit;min-width:0;width:100%}
.oc2:hover{border-color:var(--acc);box-shadow:0 2px 8px rgba(8,117,225,.18)}
.oc2.me{border-color:#f0603c;box-shadow:0 0 0 2px rgba(240,96,60,.25)}
.oc2 .ot{display:block;min-width:0;flex:1}.oc2 .ot b,.oc2 .ot small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc2 small{color:var(--mut);font-size:12px}
.ostack{display:flex;flex-direction:column;align-items:center;max-width:820px;margin:0 auto}
.ostack>.oc2{max-width:340px}
.vl{width:2px;height:22px;background:var(--line);margin:0 auto}
.ofocus{display:flex;align-items:center;gap:18px;flex-wrap:wrap;width:100%;background:var(--surf);border:2px solid var(--acc);border-radius:14px;padding:20px 22px;box-shadow:0 4px 14px rgba(8,117,225,.15)}
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;width:100%}
.oh2{font-size:15px;margin:2px 0 10px;text-align:center;color:var(--mut);font-weight:600}
.peers{width:100%;margin:14px 0 0}.peers summary{cursor:pointer;color:var(--acc);font-weight:600;text-align:center;margin-bottom:10px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surf)}.seg button{border:0;background:none;padding:6px 16px;cursor:pointer;font-weight:600;color:var(--mut)}.seg button.on{background:var(--acc);color:var(--acct)}
.wsw select{width:auto;min-width:180px}
.tree{overflow-x:auto;padding:8px 4px 20px;text-align:center}
.tree ul{display:flex;justify-content:safe center;padding:20px 0 0;margin:0;position:relative;list-style:none}
.tree>ul{padding-top:0}
.tree li{position:relative;padding:20px 6px 0;list-style:none}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;right:50%;border-top:2px solid var(--line);width:50%;height:20px}
.tree li::after{right:auto;left:50%;border-left:2px solid var(--line)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:0}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--line);border-radius:0 6px 0 0}
.tree li:first-child::after{border-radius:6px 0 0 0}
.tree ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid var(--line);height:20px}
.tree>ul>li{padding-top:0}.tree>ul>li::before,.tree>ul>li::after{display:none}
.tree .oc2{flex-direction:column;align-items:stretch;text-align:center;width:176px;padding:12px 8px;margin:0 auto}
.tree .oc2 .avl{align-self:center}
.phead{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.tstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.tstats b{display:block;font:700 26px Inter,system-ui,sans-serif}.tstats span{color:var(--mut);font-size:12px}
.lk{background:none;border:0;color:var(--acc);cursor:pointer;padding:0;font:inherit;font-weight:600;text-align:left}
a{color:var(--acc)}nav a{color:#fff}
@media(max-width:760px){
body{flex-direction:column;align-items:stretch}
nav{flex-direction:row;width:100%;height:auto;position:sticky;top:env(safe-area-inset-top,0px);padding:6px 10px;align-items:center;overflow:visible;z-index:40}
.hbg{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;margin-right:8px;border:0;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;padding:0;cursor:pointer;position:relative;z-index:42}
.hbg svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.brand{padding:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.toprow{flex:1;min-width:0;padding:0}
.navlist{display:flex;flex-direction:column;position:fixed;top:0;left:0;width:272px;max-width:82vw;height:100vh;height:100dvh;padding:14px 10px;padding-top:calc(14px + env(safe-area-inset-top,0px));background:linear-gradient(180deg,var(--hd1),var(--hd2));transform:translateX(-100%);transition:transform .22s ease;z-index:41;overflow-y:auto;box-shadow:2px 0 24px rgba(0,0,0,.35)}
body.navopen .navlist{transform:translateX(0)}
.navlist a.macct{display:flex;margin-top:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
nav a{white-space:nowrap;padding:12px 10px}
.navback{display:none;position:fixed;inset:0;background:rgba(8,10,16,.52);z-index:39}
body.navopen .navback{display:block}
main{padding:16px 12px;width:100%}
.tstats{grid-template-columns:repeat(2,1fr)}
.ofocus{flex-direction:column;text-align:center}
.ofocus .grow{flex:none;width:100%;min-width:0}
.ofocus h2{font-size:19px;overflow-wrap:break-word}
}
/* a long name must wrap at word breaks, never get squeezed down to one letter per line
   by a sibling (like the "View profile" button) that does not shrink in a flex row */
.who>div,.ofocus .grow,.oc2 .ot{overflow-wrap:break-word}
img.avl{object-fit:cover;display:block;background:var(--soft)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);color:var(--acc);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;margin:3px 6px 3px 0}.chip small{opacity:.75;font-weight:500}.chip.ed{padding-right:6px}.chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:17px;line-height:1;padding:0 4px}
.gcard{max-width:440px;margin:10vh auto}.gfoot{max-width:440px;margin:-6vh auto 6vh;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--mut)}.gfoot a{color:inherit}.gthm{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;cursor:pointer}.gthm svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.gfoot [data-install-ios]{flex-basis:100%;text-align:center}.gcard h1{font-size:24px;text-align:center}.gcard .sub{text-align:center}.brand2::before{content:"";display:block;width:56px;height:56px;margin:0 auto 10px;background:url(logo.svg) center/contain no-repeat}.brand2{font-weight:700;color:var(--pri,#4f46e5);text-align:center;margin-bottom:10px;font-size:18px}
.gerr{color:var(--bad,#c0392b);min-height:1.2em;margin-top:8px;text-align:center;font-size:14px}.key{font:600 18px/1.4 monospace;word-break:break-all;text-align:center;margin:10px 0;user-select:all}
.lk{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0;opacity:.8}.whoact{font-size:12px;margin:6px 0 0 4px}.h3{font-size:15px;margin:16px 0 6px}

.seg{display:inline-flex;gap:0;border:1px solid var(--line,#d0d7de);border-radius:8px;overflow:hidden}.seg .btn{border-radius:0;margin:0}
.wkh td{background:var(--soft,#eef3f9);padding-top:10px}.we td{opacity:.75}

.seg{border:1px solid #4f46e5;background:#fff}.seg button{background:#fff!important;color:#4f46e5!important;border:0!important;font-weight:600;padding:8px 18px;min-height:36px;cursor:pointer}
.seg button[aria-pressed="true"]{background:#4f46e5!important;color:#fff!important}
.ver{font-size:11px;opacity:.7;margin-left:6px;font-weight:400}

.cal{display:block}.calh,.calr{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calh div{font-size:12px;font-weight:600;text-transform:uppercase;opacity:.65;padding:4px 6px}
.calw{margin-top:10px}.calwb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.calwb .grow{flex:1}
.cald{border:1px solid #dde3ea;border-radius:8px;padding:6px;min-height:92px;background:#fff;display:flex;flex-direction:column;gap:4px}
.cald.we{background:#f6f8fa}.cald.out{background:transparent;border-style:dashed;opacity:.45}.cald.today{border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5}
.cald .dh{display:flex;justify-content:space-between;align-items:center}.cald .dn{font-weight:700;font-size:13px}.cald .dt{font-size:11px;background:#e8f1fb;color:#0a5cb0;border-radius:10px;padding:1px 7px;font-weight:600}
.holnote{display:block;font-size:10px;font-weight:600;color:var(--warn,#9a5b00);background:#fdf3e1;border-radius:6px;padding:1px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
th .holnote{font-weight:500;margin:3px auto 0;max-width:92px;background:none;padding:0;text-align:center}
.pc{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11px;font-weight:400;margin:0}.pc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pc input.hc{width:48px;padding:3px 4px;font-size:12px;min-height:0;height:26px;text-align:right}
@media(max-width:820px){.calh{display:none}.calr{grid-template-columns:1fr}.cald.out{display:none}.cald{min-height:0}}

.hform{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}

.cfgwrap{margin-top:16px}
.cfgform{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.cset{padding:16px 0;border-top:1px solid var(--line)}
.cset-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.cset-h h3{margin:0;font-size:15px}.cset-h .sub{font-size:13px}
.cset-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--acc);font-weight:700;font-size:13px;display:grid;place-items:center}
.cset-b{padding-left:36px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.fgrid .wide{grid-column:1/-1}
.fld label{display:block;font-size:13px;color:var(--mut);margin-bottom:4px}
.logorow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.logobox{width:180px;height:72px;border:1px dashed var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.logobox img{max-width:100%;max-height:100%}
.savebar{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0 0;margin-top:6px;border-top:1px solid var(--line);background:var(--surf)}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.cset-b{padding-left:0}}
.logoact .btn{width:auto;display:inline-block}



.cfgwrap.locked .logoact,.cfgwrap.locked .logoact *{display:none}
input:disabled,select:disabled,textarea:disabled{background:var(--bg);color:var(--ink);opacity:.9;cursor:default}

.kvg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.kv{display:flex;flex-direction:column;gap:3px;min-width:0}.kv.wide{grid-column:1/-1}
.kv>span{font-size:13px;color:var(--mut)}.kv>b{font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere}.kv>i{color:var(--mut);font-style:normal}
.kvimg{align-self:flex-start;max-height:76px;max-width:240px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px}
@media (max-width:560px){.kvg{grid-template-columns:1fr}}
.logobox img{width:100%;height:100%;object-fit:contain}
.logobox{position:relative}.logobox img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}
.cfgform>.row>.grow{min-width:220px}

.fgrid,.kvg{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cset-b{padding-left:36px}
@media (max-width:560px){.cset-b{padding-left:0}}

/* ---- Performance module (layout from the approved prototype, using the app's colours) ---- */
.pf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}

.pf-head .sub{margin-left:0}
.pf-chip{border:1px solid var(--line);border-radius:10px;padding:8px 16px;background:var(--surf);font-size:14px}
.pf-tabs{display:flex;gap:6px;margin:14px 0 16px;overflow:auto;padding-bottom:2px}
/* Same pill tabs as every other screen (subTabs in app.js: .btn.sm / .btn.sm.ghost). */
.pf-tabs button{background:transparent;color:var(--acc);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.pf-tabs button.on{background:var(--acc);color:var(--acct);border-color:var(--acc)}
.pf-top,.pf-mid,.pf-bot{display:grid;gap:16px;margin-bottom:16px}
.pf-top{grid-template-columns:1.57fr 1fr}.pf-mid{grid-template-columns:1.18fr 1fr}.pf-bot{grid-template-columns:1fr 1.06fr}
.pf-card{background:var(--surf);border:1px solid var(--line);border-radius:13px;padding:18px 20px;min-width:0}
.pf-card h2{font-size:18px;font-weight:600;font-family:inherit;margin:0}
.pf-title{display:flex;align-items:center;gap:12px;margin-bottom:10px}.pf-title .ic{font-size:22px;color:var(--acc);line-height:1}
.pf-title small{display:block;color:var(--mut);font-size:12px;font-weight:400}
.pf-id{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.pf-id .row{display:flex;align-items:center;gap:14px;border:0;padding:0}
.pf-id .av{width:54px;height:54px;font-size:19px}
.pf-id h2{font-size:19px}.pf-id small{color:var(--mut);font-size:13px}
.pf-pill{display:inline-block;border-radius:7px;padding:3px 10px;font-size:12px;font-weight:600;background:var(--soft);color:var(--acc);white-space:nowrap}
.pf-pill.ok{background:var(--okb);color:var(--ok)}.pf-pill.warn{background:var(--warnb);color:#8a4b00}
.pf-scores{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-box{position:relative;border:1px solid var(--line);border-radius:11px;padding:12px 16px;min-height:140px;overflow:hidden}
.pf-box h3{font-size:14px;font-weight:600;margin:0;position:relative;z-index:1}.pf-box h3 span{color:var(--acc);margin-right:8px}
.pf-big{font-size:38px;font-weight:700;line-height:1.35;letter-spacing:-1px}.pf-big small{font-size:22px;font-weight:500;color:var(--mut);letter-spacing:0}
.pf-note{color:var(--ok);font-size:13px}.pf-box small.m{color:var(--mut);font-size:11px;display:block}
.pf-spark{position:absolute;right:8px;bottom:0;width:42%;height:56px}
.pf-ring{float:right;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ok) var(--p),var(--line) 0);margin-top:14px}
.pf-ring b{display:grid;place-items:center;background:var(--surf);width:55px;height:55px;border-radius:50%;font-size:18px}
.pf-tl{margin-top:12px}.pf-tl-row{display:flex;align-items:center;gap:14px;position:relative;min-height:38px;font-size:14px}
.pf-tl-row:not(:last-child):before{content:'';position:absolute;left:11px;top:26px;bottom:-6px;width:2px;background:var(--line)}
.pf-dot{width:24px;height:24px;border:3px solid var(--line);border-radius:50%;background:var(--surf);display:grid;place-items:center;flex:none;z-index:1;font-size:12px}
.pf-tl-row.done .pf-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.pf-tl-row.cur .pf-dot{border-color:var(--acc);box-shadow:0 0 0 5px var(--soft);color:var(--acc)}
.pf-tl-row small{margin-left:auto;font-size:12px;color:var(--mut)}
.pf-cat{display:grid;grid-template-columns:26px 180px 1fr 46px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.pf-cat:last-child{border:0}.pf-cat .ic{color:var(--acc);font-size:19px}.pf-cat b{text-align:right}
.pf-bar{height:8px;border-radius:9px;background:var(--line);overflow:hidden}.pf-bar i{display:block;height:100%;border-radius:9px;background:var(--fill,var(--acc))}
.pf-cap{font-size:11px;color:var(--mut);margin:-4px 0 6px 36px}
.pf-goal{display:flex;gap:14px;align-items:center;padding:9px 0;font-size:14px;border-bottom:1px solid var(--line)}.pf-goal:last-child{border:0}
.pf-goal .t{flex:1;background:none;border:0;text-align:left;padding:0;cursor:pointer;color:inherit;font:inherit}
.pf-check{border:3px solid var(--line);border-radius:50%;width:24px;height:24px;flex:none;display:grid;place-items:center;font-size:13px}
.pf-check.done{background:var(--ok);border-color:var(--ok);color:#fff}.pf-check.part{border-top-color:var(--acc)}
.pf-link{border:0;background:none;color:var(--acc);padding:0;font-weight:500;cursor:pointer;font:inherit}
.pf-dev{margin:8px 0 0;padding-left:28px}.pf-dev li{padding:4px 0;font-size:14px}
.pf-quote{border:1px solid var(--line);background:var(--bg);padding:10px 14px;border-radius:9px;font-size:14px;margin:8px 0}
.pf-rev{display:flex;gap:12px;align-items:center;font-size:12px}.pf-rev .av{width:32px;height:32px;font-size:12px}
.pf-act{display:flex;gap:12px;align-items:center;margin:8px 0 16px;font-size:12px;flex-wrap:wrap;color:var(--mut)}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.pf-stat{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:16px 18px}.pf-stat small{font-size:11px;color:var(--mut);letter-spacing:.4px;text-transform:uppercase}.pf-stat strong{display:block;font-size:28px;margin:6px 0 2px;letter-spacing:-1px}
.pf-bar2{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.pf-bar2 input{flex:1;min-width:170px}.pf-bar2 input,.pf-bar2 select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surf)}
.pf-tw{overflow:auto}.pf-tw table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}
.pf-tw th{font-size:11px;letter-spacing:.5px;color:var(--mut);background:var(--bg);padding:11px 12px;text-transform:uppercase}.pf-tw td{padding:13px 12px;border-bottom:1px solid var(--line);font-size:13px}.pf-tw td small{display:block;color:var(--mut)}
.pf-exp{display:inline-block;border-radius:6px;padding:4px 9px;font-size:12px;font-weight:650;white-space:nowrap}
.pf-b0{background:#fdeadf;color:#a33f1f}.pf-b1{background:#e6eefc;color:#25509f}.pf-b2{background:#dff3e6;color:#1b6b40}.pf-b3{background:#efe8fc;color:#6940a8}.pf-bx{background:var(--bg);color:var(--mut)}
:root[data-theme="dark"] .pf-b0{background:#44261b;color:#f2a98d}:root[data-theme="dark"] .pf-b1{background:#1d2c4a;color:#9db9ee}:root[data-theme="dark"] .pf-b2{background:#14321f;color:#7fd6a3}:root[data-theme="dark"] .pf-b3{background:#2d2250;color:#c3a9f0}
:root[data-theme="dark"] .pf-b0{background:#44261b;color:#f2a98d}:root[data-theme="dark"] .pf-b1{background:#1d2c4a;color:#9db9ee}:root[data-theme="dark"] .pf-b2{background:#14321f;color:#7fd6a3}:root[data-theme="dark"] .pf-b3{background:#2d2250;color:#c3a9f0}
.pf-panel{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin:14px 0}
.pf-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.pf-scale>div{border:2px solid transparent;border-radius:8px;padding:6px 3px;text-align:center}.pf-scale .chosen{border-color:var(--acc);background:var(--surf)}.pf-scale small{display:block;font-size:11px;margin-top:5px;color:var(--mut)}.pf-scale .pf-exp{font-size:10px;padding:4px 5px}
.pf-hist{display:flex;align-items:flex-end;gap:16px;height:150px;margin:16px 0}.pf-hist>div{flex:1;text-align:center;font-size:11px;min-width:0}.pf-hist i{display:block;background:var(--acc);opacity:.75;border-radius:6px 6px 0 0;width:60%;margin:auto}.pf-hist b{display:block;margin:4px}
.pf-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:16px}
.pf-empty{padding:34px;text-align:center;color:var(--mut)}
.pf-dlg h3{font-size:14px;margin:14px 0 4px}.pf-dlg textarea{width:100%;min-height:64px;resize:vertical;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surf)}
.pf-dlg label{display:block;font-size:12px;font-weight:600;margin:10px 0 4px}.pf-dlg select,.pf-dlg input[type=number],.pf-dlg input[type=date],.pf-dlg input[type=text]{padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surf);max-width:100%}
.pf-dlg details{border:1px solid var(--line);border-radius:8px;margin:8px 0;padding:10px 12px}.pf-dlg summary{cursor:pointer;font-weight:600}
.pf-dlg .pf-catbox{padding:12px 0;border-bottom:1px solid var(--line)}.pf-dlg .pf-catbox p{font-size:12px;color:var(--mut);margin:2px 0 6px}
.pf-dlg .pf-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;position:sticky;bottom:-1px;background:var(--surf);padding:12px 0 2px;border-top:1px solid var(--line)}
.pf-info{background:var(--soft);border-left:3px solid var(--acc);padding:10px 14px;font-size:12px;margin:10px 0;border-radius:3px}
.pf-goaled{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}.pf-goaled input[type=text]{width:100%}
@media(max-width:1000px){.pf-top,.pf-mid,.pf-bot,.pf-cols{grid-template-columns:1fr}.pf-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.pf-head .sub{margin-left:0}.pf-scores{gap:8px}.pf-box{padding:10px}.pf-big{font-size:28px}.pf-big small{font-size:18px}.pf-cat{grid-template-columns:20px 112px 1fr 38px;gap:6px;font-size:12px}.pf-cap{margin-left:26px}.pf-tabs button{padding:6px 12px;font-size:13px}.pf-scale{grid-template-columns:repeat(2,1fr)}.pf-ring{width:52px;height:52px;margin-top:20px}.pf-ring b{width:40px;height:40px;font-size:13px}.pf-card{padding:14px}.pf-goal{font-size:12px;gap:10px}}
.btn:disabled{opacity:.45;cursor:not-allowed}
.pf-bar2 input{flex:1 1 220px;width:auto;min-width:170px}.pf-bar2 select{width:auto;flex:0 1 auto}
@media(max-width:650px){.pf-bar2 input,.pf-bar2 select{width:100%;flex:1 1 100%}}
.toast{z-index:2147483647;max-width:min(560px,90vw);text-align:center}
.pf-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.pf-row:first-of-type{border-top:0}
.pf-tbl{width:100%;border-collapse:collapse;font-size:14px}
.pf-tbl th,.pf-tbl td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
.pf-tbl thead th{font-size:12px;color:var(--mut,inherit)}
/* phones: controls wrap instead of pushing the page wider; long names break */
.wsw{flex-wrap:wrap;max-width:100%}
.seg{max-width:100%;flex-wrap:wrap}
@media(max-width:560px){.wsw select{min-width:0;flex:1 1 140px}.seg button{padding:6px 10px}}
h1,h2,h3,.sub,.pf-row b{overflow-wrap:anywhere}
:root[data-theme="dark"] .pf-pill.warn{color:var(--warn)}
:root[data-theme="dark"] .pf-pill.warn{color:var(--warn)}

/* Admin: section navigation beside the content on wide screens, a scrollable tab row on phones */
.admshell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
.admnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}
.admnav button{text-align:left;border:0;background:none;color:var(--ink);padding:9px 12px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
.admnav button:hover{background:var(--soft)}
.admnav button.on{background:var(--acc);color:var(--acct)}
.admnav button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.admbody>.card:first-child,.admbody>.grid:first-child{margin-top:0}
@media(max-width:760px){.admshell{grid-template-columns:minmax(0,1fr)}.admnav{flex-direction:row;overflow-x:auto;position:static;gap:4px;padding-bottom:4px}.admnav button{white-space:nowrap}}
.audf{grid-template-columns:2fr 1fr auto auto;align-items:end}@media(max-width:1100px){.audf{grid-template-columns:1fr}}
.spfilt{grid-template-columns:2fr 1fr auto!important}@media(max-width:1100px){.spfilt{grid-template-columns:1fr!important}}
@media(max-width:1100px){.form{grid-template-columns:1fr!important}.form>*{grid-column:auto!important}}
.tw{max-width:100%}
.admbody,.admnav{min-width:0}

/* installed app: keep content clear of the phone's notch and home bar */
@media (display-mode: standalone){body{padding-bottom:env(safe-area-inset-bottom)}}
.whoact .lk[hidden],.whoact [hidden]{display:none}

/* phones hide the account block in the menu, so give them an Account link that opens My account */
nav a.macct{display:none}
/* A wide table inside a card scrolls sideways; a soft shadow at the edge that still has columns says so
   (the cover gradients scroll with the content and hide the shadow once that edge is reached). */
.card .tw{background:linear-gradient(to right,var(--surf) 30%,transparent) left center/40px 100% no-repeat local,linear-gradient(to left,var(--surf) 30%,transparent) right center/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.16),transparent) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.16),transparent) right center/14px 100% no-repeat scroll}
/* Ten-column tables (Leave liability) fit a laptop screen with tighter side padding. */
table.cmp th,table.cmp td{padding-left:9px;padding-right:9px}
.card .tw>table{background:transparent}
/* ---- App shell redesign (shell.js) ---- */
.nbdg{margin-left:auto;background:#fff;color:#3b35c4;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;line-height:16px}
.navlist a{align-items:center}
.hubbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.hubbar a.btn{text-decoration:none;display:inline-block}
.qa{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.qa button{display:flex;align-items:center;gap:8px;background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.qa button:hover{border-color:var(--acc)}
.qa svg{width:16px;height:16px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.home .col{display:flex;flex-direction:column;gap:16px;min-width:0}
.home .card{margin:0}
.ibx{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.ibx+.ibx{border-top:1px solid var(--line)}
.ibx .grow{min-width:0;flex:1}
.ibx .meta{color:var(--mut);font-size:13px;margin-top:2px}
.ibx-a{display:flex;gap:6px;flex-shrink:0;align-items:center}
.ibx-a a.btn{text-decoration:none}
.kind{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;vertical-align:1px}
.k-ts{color:#3b35c4;background:#ecebfd}.k-to{color:#a3410f;background:#fdeadf}.k-rb{color:#7a4a0f;background:#fbf0dc}.k-pu{color:#1d4ea8;background:#e3edfc}.k-tk{color:#0e6b6b;background:#dff3f2}.k-le{color:#5b3aa8;background:#efe8fd}.k-bn{color:#8a2366;background:#fbe4f1}
:root[data-theme="dark"] .kind{background:rgba(255,255,255,.08)!important;color:var(--ink)!important}
@media(max-width:760px){.home{grid-template-columns:minmax(0,1fr)}.ibx{flex-wrap:wrap}.ibx-a{width:100%;padding-left:48px}}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--mut);text-decoration:underline;cursor:pointer}
.lnk:hover{color:var(--bad)}
.ibx .kreact{margin-top:6px}
.dirbar{flex-wrap:wrap;align-items:center}
.dirbar select{width:auto}
.tgl{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin:0 0 0 auto;cursor:pointer;white-space:nowrap}
.tgl input{position:absolute;opacity:0;width:1px;height:1px}
.tgl i{width:34px;height:20px;border-radius:999px;background:#cfd5dc;position:relative;display:inline-block;transition:background .15s}
.tgl i:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.tgl input:checked+i{background:var(--acc)}
.tgl input:checked+i:after{left:17px}
.tgl input:focus-visible+i{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:760px){.tgl{margin-left:0}}
.note{background:var(--soft,#ecebfd);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px}
.tocal{display:grid;font-size:11px;align-items:center;min-width:760px}
.tocal .h{color:var(--mut);text-align:center;padding:4px 0;font-weight:600}
.tocal .h.we{opacity:.5}
.tocal .h.td{color:var(--acc)}
.tocal .n{padding:7px 8px 7px 0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tocal .c{height:28px;border-left:1px solid var(--line);position:relative}
.tocal .c.we{background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(127,127,127,.09) 4px 8px)}
.tocal .c.td{background-color:rgba(79,70,229,.08)}
.tocal .c span{position:absolute;inset:5px 1px;border-radius:4px;background:var(--c)}
.tocal .c span.pend,.toleg i.pend{background:repeating-linear-gradient(135deg,var(--c) 0 3px,transparent 3px 6px);border:1.5px solid var(--c);opacity:.8}
.tocal .c span.hol,.toleg i.hol{background:#9aa5b1;opacity:.55}
.toleg{display:flex;gap:14px;font-size:12px;color:var(--mut);margin-top:12px;flex-wrap:wrap}
.toleg i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px;box-sizing:border-box}
@media(max-width:760px){.tocal{--nc:92px;min-width:720px}}
.amenu{position:relative}
.amenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.amenu summary::-webkit-details-marker{display:none}
.amenu summary:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.amenu .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surf);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(16,32,52,.18);padding:6px;min-width:220px;z-index:20;display:flex;flex-direction:column}
.amenu .menu button{background:none;border:0;text-align:left;padding:9px 10px;border-radius:6px;font:inherit;color:var(--ink);cursor:pointer}
.amenu .menu button:hover,.amenu .menu button:focus-visible{background:var(--bg)}
.amenu .menu button.bad{color:var(--bad,#b42318)}
.amenu .menu button:disabled{opacity:.45;cursor:not-allowed}
.amenu .menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
#bbar{display:none}
@media(max-width:760px){
  #bbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;justify-content:space-around;background:var(--surf);border-top:1px solid var(--line);padding:6px 0 calc(8px + env(safe-area-inset-bottom))}
  #bbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--mut);text-decoration:none;font-weight:600;min-width:56px;padding:2px 0}
  #bbar a.on{color:var(--acc)}
  #bbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  body:not(.gate):not(.landing) main,body:not(.gate):not(.landing) #app{padding-bottom:84px}
  body.gate #bbar,body.landing #bbar,body.navopen #bbar,body.print #bbar{display:none}
}
@media print{#bbar{display:none!important}}
@media(max-width:760px){body:not(.gate):not(.landing) #toast{bottom:88px}}
@media(max-width:760px){.qa{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:2px 0 4px;scrollbar-width:none}.qa::-webkit-scrollbar{display:none}.qa button{flex:none}}
/* Light/dark switch sits beside the bell (theme.js); keep room for the brand and version */
.toprow{gap:4px}.toprow .brand{margin-right:2px}
/* Time zones (shell.js) */
.tzl{display:flex;align-items:center;gap:6px;margin-top:4px}.tzl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.tzcur b{font-size:20px}.tzcur .sub{margin-top:4px}
/* Cash flow (spending.js) */
:root{--cf-in:#1baf7a;--cf-pay:#6250d6;--cf-exp:#eb6834}:root[data-theme="dark"]{--cf-in:#199e70;--cf-pay:#9085e9;--cf-exp:#d95926}
.cfbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cfbar .seg{display:inline-flex;background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:3px}
.cfbar .seg button{border:0!important;background:none!important;box-shadow:none!important;font:600 13px Inter,system-ui,sans-serif;padding:7px 12px;border-radius:7px;color:var(--mut)!important;cursor:pointer;margin:0}
.cfbar .seg button.on{background:var(--ink)!important;color:var(--surf)!important}
.cfk{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.cfk .stat{display:flex;flex-direction:column;gap:2px}
.cfk .stat span{font-size:13px;color:var(--mut);font-weight:600}.cfk .stat b{font-size:26px;letter-spacing:-.02em}.cfk .stat small{font-size:12px;color:var(--mut)}.cfk .stat small.warnt{color:var(--warn);font-weight:600}
.cfc{margin-bottom:16px}.cfh{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.cflg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink)}.cflg span{display:flex;align-items:center;gap:6px}
.cflg i,.cftip i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}.cflg i.ln,.cftip i.ln{height:2px;width:14px;border-radius:0;background:var(--ink)}
.cfplot{position:relative;margin-top:10px}.cfplot svg{width:100%;height:auto;display:block}.cfhit{outline:none;cursor:default}.cfhit:focus-visible{stroke:var(--acc);stroke-width:2}
.cftip{position:absolute;top:6px;background:var(--surf);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(20,20,40,.12);padding:10px 12px;font-size:12px;min-width:200px;pointer-events:none}
.cftip b{display:block;margin-bottom:6px;font-size:13px}.cftip div{display:flex;align-items:center;gap:8px;padding:2px 0}.cftip span{margin-left:auto;padding-left:12px;font-weight:700;font-variant-numeric:tabular-nums}.cftip .sep{border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
.cf2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.agr{display:grid;grid-template-columns:130px 1fr 110px;gap:10px;align-items:center;padding:6px 0;font-size:13px}.agr.cat{grid-template-columns:170px 1fr 110px 34px}
.agr b{text-align:right;font-variant-numeric:tabular-nums}.agr small{color:var(--mut);text-align:right}.agb{height:10px;background:var(--bg);border-radius:5px;overflow:hidden}.agb i{display:block;height:100%;border-radius:5px}
.aglist{border-top:1px solid var(--line);margin-top:12px;padding-top:6px}.aglist>div{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.aglist>div:last-child{border:0}.aglist small{display:block}
@media(max-width:760px){.cfk{grid-template-columns:1fr 1fr}.cf2{grid-template-columns:1fr}.cfk .stat b{font-size:20px}.agr{grid-template-columns:110px 1fr 96px}.agr.cat{grid-template-columns:110px 1fr 96px}.agr.cat small{display:none}.cftip{min-width:170px}}
/* One-time bonuses (bonuses.js) */
.k-bo{color:#5b2bb5;background:#efe7fd}:root[data-theme="dark"] .k-bo{color:#c9b5ff!important;background:rgba(155,120,255,.16)!important}
.bnwarn{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--warnb);color:var(--ink);font-size:13px}
.bnacts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:150px}.bnacts .btn{margin:0}
/* Timesheet header: period on the left, view switches fixed on the right (same in weekly and monthly) */
.tstop{margin-bottom:12px}.tsbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.tssub{margin:0 0 18px}
.tsbar .tsnav b{min-width:178px;text-align:center}.tsbar .tsctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
@media(max-width:760px){.tsbar .tsctl{margin-left:0;width:100%}.tsbar .tsnav{width:100%;justify-content:space-between}.tsbar .tsnav b{min-width:0}}
/* Wide numeric tables: headers may wrap onto two lines and cells are a little tighter, so they fit a desktop screen */
table.fit th{white-space:normal;vertical-align:bottom;line-height:1.25;min-width:64px}
table.fit th,table.fit td{padding-left:10px;padding-right:10px}
table.fit td:first-child{white-space:normal;min-width:130px}
table.fit th{font-size:11px;letter-spacing:.02em;min-width:0}
table.fit th,table.fit td{padding-left:8px;padding-right:8px}
table.fit td:first-child,table.fit th:first-child{padding-left:14px}
table.fit td{white-space:normal}table.fit td.num,table.fit td .tag{white-space:nowrap}
.offnote{color:#3f3aa8;background:#ecebfd}.offnote.pend{color:var(--mut);background:var(--bg)}th .offnote{background:none}:root[data-theme="dark"] .offnote{color:#c9c6ff;background:rgba(155,150,247,.15)}

.mfaqr{display:flex;justify-content:center;margin:10px 0 0}.mfaqr svg{border-radius:8px;border:1px solid var(--line);max-width:100%;height:auto}
.reccodes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px;margin:12px auto;padding:12px 16px 12px 36px;max-width:340px;background:var(--soft,#f4f4f8);border-radius:10px;font-size:15px}.reccodes code{letter-spacing:.04em}
.ssob{display:grid;gap:8px;margin-top:14px}.ssobtn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}.ssobtn svg{width:18px;height:18px}.ssoor{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:13px;color:var(--mut)}.ssoor::before,.ssoor::after{content:"";flex:1;border-top:1px solid var(--line)}
/* the menu's own link style (nav a: block, padded, hover box) must not reach these small text links */
nav .whohelp a,.whohelp a{display:inline;padding:0;margin:0;border:0;border-radius:0;background:none;color:inherit;opacity:.85;font-size:13px;font-weight:400;text-decoration:underline}nav .whohelp a:hover,.whohelp a:hover{opacity:1;background:none}

/* Roles under the name, one small tag each, wrapping onto a second line when there are several (a single
   tag beside the name ran past the menu's edge with two or three roles). */
.who .whoroles{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;white-space:normal}
.who .whoroles .tag{font-size:11px;padding:2px 8px;line-height:1.4}

/* Home shortcuts: tiles with a coloured round icon, three to a row (two on the narrowest phones) */
.htiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:0 0 20px}
.htile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:22px 10px 18px;font:inherit;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(20,22,58,.06);transition:border-color .15s,transform .15s}
.htile:hover{border-color:var(--acc)}.htile:active{transform:scale(.98)}
.htile:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.hti{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hti svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.htl{font-weight:700;font-size:16px;text-align:center}
@media(max-width:560px){.htiles{grid-template-columns:repeat(3,1fr);gap:10px}.htile{padding:16px 6px 14px;gap:10px;border-radius:14px}.hti{width:52px;height:52px}.hti svg{width:24px;height:24px}.htl{font-size:14px}}
@media(max-width:340px){.htiles{grid-template-columns:repeat(2,1fr)}}
.pacts{display:flex;flex-direction:column;gap:8px}
@media(max-width:560px){.phead .pacts{width:100%}}