/* Project Tracker Solution - design system. Light / dark / system themes; animations respect reduced-motion. */
:root{
  --bg:#f3f5fb;--bg2:#e9edf8;--panel:#ffffff;--panel2:#f8f9fd;--glass:rgba(255,255,255,.72);--ink:#141a2e;--mut:#5b6784;--line:#e1e6f2;
  --pri:#4f5bff;--pri2:#3b46e0;--pri-soft:rgba(79,91,255,.12);--acc:#ff8a3d;--acc2:#ffb347;--ok:#12a36b;--warn:#c98100;--bad:#e5484d;--info:#2f8fff;
  --sel:#eef0ff;--r:14px;--r2:10px;--sh:0 1px 2px rgba(24,32,70,.06),0 8px 24px rgba(24,32,70,.07);--sh2:0 2px 4px rgba(24,32,70,.08),0 18px 40px rgba(24,32,70,.14);
  --grad:linear-gradient(135deg,#4f5bff 0%,#8b5cf6 55%,#d946ef 100%);--grad2:linear-gradient(135deg,#ff8a3d,#ff5d8f);--top:rgba(255,255,255,.78);--side:rgba(255,255,255,.82);
  --ring:0 0 0 3px rgba(79,91,255,.28);--pillok-bg:#d9f5e8;--pillok-fg:#0b6a45;--pillw-bg:#fff0cc;--pillw-fg:#7a4b00;--pillb-bg:#fde0e0;--pillb-fg:#9b1c22;--pilln-bg:#e6e9f5;--pilln-fg:#3a4663;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0b0f1c;--bg2:#111833;--panel:#141a2e;--panel2:#10162a;--glass:rgba(20,26,46,.72);--ink:#e8ecfa;--mut:#98a3c4;--line:#252e4d;
  --pri:#7c89ff;--pri2:#a1abff;--pri-soft:rgba(124,137,255,.16);--acc:#ffa05c;--acc2:#ffc47a;--ok:#3ddc97;--warn:#f0b84a;--bad:#ff7a7f;--info:#5aa9ff;
  --sel:#1b2347;--sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);--sh2:0 2px 4px rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.55);
  --grad:linear-gradient(135deg,#5b67ff 0%,#8b5cf6 55%,#d946ef 100%);--top:rgba(14,19,36,.78);--side:rgba(14,19,36,.82);--ring:0 0 0 3px rgba(124,137,255,.38);
  --pillok-bg:#123d2c;--pillok-fg:#7cebb8;--pillw-bg:#45360c;--pillw-fg:#f4d27a;--pillb-bg:#4a1c20;--pillb-fg:#ffb0b3;--pilln-bg:#252e4d;--pilln-fg:#b9c3e6;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=dark]){
    --bg:#0b0f1c;--bg2:#111833;--panel:#141a2e;--panel2:#10162a;--glass:rgba(20,26,46,.72);--ink:#e8ecfa;--mut:#98a3c4;--line:#252e4d;
    --pri:#7c89ff;--pri2:#a1abff;--pri-soft:rgba(124,137,255,.16);--acc:#ffa05c;--acc2:#ffc47a;--ok:#3ddc97;--warn:#f0b84a;--bad:#ff7a7f;--info:#5aa9ff;
    --sel:#1b2347;--sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);--sh2:0 2px 4px rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.55);
    --grad:linear-gradient(135deg,#5b67ff 0%,#8b5cf6 55%,#d946ef 100%);--top:rgba(14,19,36,.78);--side:rgba(14,19,36,.82);--ring:0 0 0 3px rgba(124,137,255,.38);
    --pillok-bg:#123d2c;--pillok-fg:#7cebb8;--pillw-bg:#45360c;--pillw-fg:#f4d27a;--pillb-bg:#4a1c20;--pillb-fg:#ffb0b3;--pilln-bg:#252e4d;--pilln-fg:#b9c3e6;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}html,body{margin:0;height:100%}
html{transition:background-color .35s}
body{font:14px/1.5 "Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 520px at 8% -8%,var(--pri-soft),transparent 60%),radial-gradient(800px 480px at 105% 4%,rgba(255,138,61,.10),transparent 60%),radial-gradient(700px 500px at 60% 112%,rgba(217,70,239,.08),transparent 60%)}
h1{font-size:22px;margin:0;letter-spacing:-.2px}h2{font-size:16px;margin:0 0 10px;letter-spacing:-.1px}h3{font-size:14px;margin:0 0 6px}
a{color:var(--pri2);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--pri-soft)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.boot{padding:60px;text-align:center;color:var(--mut)}
.ic{display:inline-flex;width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- shell */
.shell{display:grid;grid-template-columns:268px 1fr;grid-template-rows:60px 1fr;height:100vh;transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1)}
.shell.nonav{grid-template-columns:0 1fr}.shell.nonav .side{transform:translateX(-100%);opacity:0;pointer-events:none}
.top{grid-column:1/3;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--top);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--line);position:relative;z-index:20}
.top .grow{flex:1}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.2px;color:var(--ink);text-decoration:none!important}
.logo{display:block}.logo svg{display:block;width:100%;height:100%}.brandmark .logo{width:34px;height:34px;flex:none;filter:drop-shadow(0 4px 10px rgba(79,91,255,.4))}
.brandmark small{display:block;font-size:11px;font-weight:500;color:var(--mut);letter-spacing:.3px;margin-top:-2px}
.brandmark b{display:block;line-height:1.1;font-size:15px}
.top .iconbtn,.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.iconbtn:hover{background:var(--pri-soft);border-color:var(--line)}.iconbtn:active{transform:scale(.92)}
.iconbtn .ic{width:19px;height:19px}
.cmdk{display:flex;align-items:center;gap:8px;min-width:230px;height:38px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--mut);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.cmdk:hover{border-color:var(--pri);box-shadow:var(--ring)}.cmdk kbd{margin-left:auto;font:11px ui-monospace,Consolas,monospace;padding:2px 6px;border-radius:6px;border:1px solid var(--line);background:var(--panel)}
.seg{display:inline-flex;padding:3px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);gap:2px;position:relative}
.seg button{position:relative;z-index:1;width:32px;height:30px;border:0;border-radius:9px;background:transparent;color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .2s}
.seg button.on{color:#fff}.seg i{position:absolute;z-index:0;top:3px;left:3px;width:32px;height:30px;border-radius:9px;background:var(--grad);box-shadow:0 4px 12px rgba(79,91,255,.45);transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.seg button:not(.on):hover{color:var(--ink)}
.who{display:flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;border-radius:14px;cursor:pointer;border:1px solid transparent;background:transparent;text-align:left;transition:background .2s}
.who:hover{background:var(--pri-soft)}.who .av{width:34px;height:34px;border-radius:50%;background:var(--grad2);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,93,143,.4)}
.who .nm{font-size:13px;font-weight:600;line-height:1.15}.who .rl{font-size:11px;color:var(--mut)}
.menu{position:absolute;right:12px;top:56px;min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:6px;z-index:60;animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
.menu button,.menu a{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;border:0;background:none;cursor:pointer;color:var(--ink);text-align:left;text-decoration:none!important}
.menu button:hover,.menu a:hover{background:var(--pri-soft)}.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.menu .hd{padding:10px 12px 6px}.menu .hd b{display:block}.menu .hd span{color:var(--mut);font-size:12px}

.side{background:var(--side);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--line);overflow:auto;padding:12px 10px 0;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s}
.side .navs{flex:1}
.grp{margin-bottom:4px}
.grp>.gh{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:11px;background:transparent;color:var(--mut);font-weight:600;font-size:12px;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.grp>.gh:hover{background:var(--pri-soft);color:var(--ink)}.grp>.gh .ic{width:17px;height:17px}.grp>.gh .chev{margin-left:auto;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.grp.open>.gh .chev{transform:rotate(180deg)}.grp.open>.gh{color:var(--ink)}
.grp>.gb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
.grp.open>.gb{grid-template-rows:1fr}.grp>.gb>div{overflow:hidden;padding-left:14px;margin-left:18px;border-left:1px dashed var(--line)}
.side a{position:relative;display:block;padding:7px 12px;margin:2px 0;border-radius:9px;color:var(--ink);transition:background .18s,transform .18s,color .18s}
.side a:hover{background:var(--pri-soft);text-decoration:none;transform:translateX(3px)}
.side a.on{background:var(--grad);color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(79,91,255,.35)}
.side .foot{margin:10px -10px 0;padding:12px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut);position:sticky;bottom:0;background:var(--panel);z-index:2}
.side .navall{display:block;width:100%;text-align:right;background:none;border:0;color:var(--pri2);font:inherit;font-size:11.5px;cursor:pointer;padding:0 4px 6px}.side .navall:hover{text-decoration:underline}
.side .foot b{color:var(--ink)}.side .foot a{display:inline;padding:0;margin:0;color:var(--pri2);background:none!important;box-shadow:none!important;transform:none!important}

.main{overflow:auto;padding:22px 26px 70px;scroll-behavior:smooth}
.main.enter>*{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both}
.main.enter>*:nth-child(2){animation-delay:.05s}.main.enter>*:nth-child(3){animation-delay:.1s}.main.enter>*:nth-child(4){animation-delay:.15s}.main.enter>*:nth-child(5){animation-delay:.2s}.main.enter>*:nth-child(n+6){animation-delay:.25s}
.page-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.page-h .grow{flex:1}
.sub{color:var(--mut);font-size:13px}
@media (max-width:900px){
  .shell,.shell.nonav{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:60px;bottom:0;width:290px;z-index:30;transform:translateX(-100%);box-shadow:none}.side.open{transform:none;box-shadow:var(--sh2)}.shell.nonav .side{opacity:1;pointer-events:auto}
  .main{padding:14px 12px 70px}.cmdk{min-width:0}.cmdk span:not(.ic),.cmdk kbd,.who .tx,.brandmark small{display:none}.top{padding:0 10px;gap:6px}
}
@media (max-width:560px){.seg button{width:28px}.seg i{width:28px}.brandmark b{font-size:13px;white-space:nowrap}.cmdk{min-width:0;width:38px;padding:0;justify-content:center}.brandmark>div{min-width:0}.brandmark b{overflow:hidden;text-overflow:ellipsis;max-width:120px}}

/* phone top bar: nothing may overflow (audited 320-560 px) */
@media (max-width:560px){
  .top{gap:5px;padding:0 8px}.top>*{flex:none}.top .brandmark{flex:1 1 0;min-width:0;overflow:hidden}.top .brandmark>div{min-width:0}.top .brandmark b{max-width:100%}
  .top .grow{display:none}.cmdk{flex:none;width:38px}
  .seg{padding:3px}.seg i{display:none}.seg button:not(.on){display:none}.seg button.on{width:34px;background:var(--grad);box-shadow:0 3px 10px rgba(79,91,255,.4)}
  .who{padding:0;border-radius:50%}
  .cochip{flex:none;max-width:56px}
}
@media (max-width:380px){.top .brandmark{display:none}.top .grow{display:block;flex:1}}

/* ---------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border:1px solid var(--line);background:var(--panel);border-radius:11px;cursor:pointer;white-space:nowrap;font-weight:500;position:relative;overflow:hidden;transition:transform .15s,box-shadow .2s,border-color .2s,background .2s}
.btn:hover{border-color:var(--pri);box-shadow:0 4px 14px rgba(79,91,255,.16);transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.97)}
.btn.pri{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(79,91,255,.38)}.btn.pri:hover{box-shadow:0 10px 26px rgba(79,91,255,.5);filter:brightness(1.06)}
.btn.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,transparent)}.btn.bad:hover{background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:var(--bad)}
.btn.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,transparent)}.btn.sm{padding:4px 10px;font-size:12px;border-radius:9px}.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn .rip{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=month],input[type=password],input[type=email],select,textarea{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);transition:border-color .2s,box-shadow .2s,background .2s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:var(--ring);background:var(--panel)}
textarea{min-height:68px;resize:vertical}input[type=checkbox]{width:17px;height:17px;accent-color:var(--pri)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin-bottom:16px;transition:box-shadow .25s,transform .25s,border-color .25s}
.card:hover{box-shadow:var(--sh2)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:0 1 auto}
.fld{display:flex;flex-direction:column;gap:4px;min-width:140px}.fld label{font-size:12px;color:var(--mut);font-weight:500}.fld .help{font-size:11px;color:var(--mut)}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.grid2 .wide{grid-column:1/-1}
.req::after{content:" *";color:var(--bad)}
.err{color:var(--bad);font-size:12.5px}.field-err input,.field-err select,.field-err textarea{border-color:var(--bad)}
.muted{color:var(--mut)}.right{text-align:right}.nowrap{white-space:nowrap}
.empty{padding:36px;text-align:center;color:var(--mut)}
.empty:not(.card)::before{content:"";display:block;width:30px;height:30px;margin:0 auto 10px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--pri);animation:spin .8s linear infinite}
.card.empty::before{display:none}
.pager{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--mut)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}.tabs button{border:0;background:none;padding:9px 16px;cursor:pointer;border-bottom:2px solid transparent;color:var(--mut);border-radius:10px 10px 0 0;transition:color .2s,background .2s,border-color .2s}.tabs button:hover{background:var(--pri-soft);color:var(--ink)}.tabs button.on{color:var(--pri2);border-bottom-color:var(--pri);font-weight:600}

/* collapsible cards (auto-applied to every card that starts with a heading) */
.card.cx>.cx-h{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;margin-bottom:0}
.card.cx>.cx-h::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg) translateY(-2px);transition:transform .3s cubic-bezier(.4,0,.2,1);flex:none}
.card.cx.shut>.cx-h::after{transform:rotate(-45deg)}
.card.cx>.cx-h:hover{color:var(--pri2)}
.card.cx>.cx-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);margin-top:10px}
.card.cx.shut>.cx-body{grid-template-rows:0fr;margin-top:0}.card.cx>.cx-body>.cx-in{overflow:hidden;min-height:0}
.card.cx.shut>.cx-body>.cx-in{visibility:hidden;transition:visibility 0s .34s}

/* ---------------------------------------------------------------- tables */
.tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel)}
table{border-collapse:collapse;width:100%}th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{position:sticky;top:0;background:var(--panel2);font-size:11.5px;color:var(--mut);white-space:nowrap;cursor:default;z-index:1;text-transform:uppercase;letter-spacing:.5px;font-weight:600}th.sort{cursor:pointer}th.sort:hover{color:var(--pri2)}
tbody tr{transition:background .15s}tr:hover td{background:var(--sel)}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}td.act{white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.tw.tall{max-height:calc(100vh - 280px)}
tfoot td{font-weight:600;background:var(--panel2)}
.main.enter tbody tr{animation:fadeUp .4s cubic-bezier(.2,.8,.2,1) both}.main.enter tbody tr:nth-child(1){animation-delay:.04s}.main.enter tbody tr:nth-child(2){animation-delay:.07s}.main.enter tbody tr:nth-child(3){animation-delay:.10s}.main.enter tbody tr:nth-child(4){animation-delay:.13s}.main.enter tbody tr:nth-child(5){animation-delay:.16s}.main.enter tbody tr:nth-child(6){animation-delay:.19s}.main.enter tbody tr:nth-child(n+7){animation-delay:.22s}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--pilln-bg);color:var(--pilln-fg)}
.pill.Approved,.pill.Paid,.pill.Active,.pill.Closed,.pill.ok{background:var(--pillok-bg);color:var(--pillok-fg)}
.pill.Submitted,.pill.Open,.pill.warn{background:var(--pillw-bg);color:var(--pillw-fg)}
.pill.Rejected,.pill.bad,.pill.Inactive{background:var(--pillb-bg);color:var(--pillb-fg)}
.pill.Draft,.pill.Superseded{background:var(--pilln-bg);color:var(--pilln-fg)}

/* ---------------------------------------------------------------- modal + toast */
.ov{position:fixed;inset:0;background:rgba(8,12,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:5vh 12px;overflow:auto;z-index:50;animation:fadeIn .2s}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);width:min(860px,100%);max-height:90vh;display:flex;flex-direction:column;animation:pop .28s cubic-bezier(.2,.9,.3,1.15)}
.modal.sm{width:min(470px,100%)}.modal.lg{width:min(1100px,100%)}
.modal>header{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}.modal>header h2{margin:0;flex:1}
.modal>.body{padding:16px 18px;overflow:auto}.modal>footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:90}
.toast{background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:12px;box-shadow:var(--sh2);max-width:400px;animation:toastIn .35s cubic-bezier(.2,.9,.3,1.2);border-left:4px solid var(--pri)}.toast.bad{border-left-color:var(--bad)}.toast.ok{border-left-color:var(--ok)}

/* ---------------------------------------------------------------- dashboard bits */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.kpi{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:var(--grad);opacity:.10;transition:transform .5s,opacity .3s}.kpi:hover::after{transform:scale(1.5);opacity:.16}
.kpi b{display:block;font-size:26px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.kpi span{color:var(--mut);font-size:12.5px}
.kpi .ic{position:absolute;right:14px;top:14px;width:22px;height:22px;color:var(--pri);opacity:.8}
.bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden;min-width:90px}.bar i{display:block;height:100%;background:var(--grad);border-radius:6px;animation:grow 1s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
.spark{display:flex;align-items:flex-end;gap:4px;height:80px}.spark i{flex:1;background:var(--grad);min-height:3px;border-radius:4px 4px 0 0;opacity:.9;transform-origin:bottom;animation:rise .8s cubic-bezier(.2,.8,.2,1) both;transition:opacity .2s}.spark i:hover{opacity:1;filter:brightness(1.15)}
.spark i:nth-child(2){animation-delay:.04s}.spark i:nth-child(3){animation-delay:.08s}.spark i:nth-child(4){animation-delay:.12s}.spark i:nth-child(5){animation-delay:.16s}.spark i:nth-child(6){animation-delay:.2s}.spark i:nth-child(7){animation-delay:.24s}.spark i:nth-child(n+8){animation-delay:.3s}

/* ---------------------------------------------------------------- home */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:34px 34px 30px;color:#fff;background:var(--grad);background-size:200% 200%;animation:gradShift 14s ease infinite;box-shadow:0 20px 50px rgba(79,91,255,.35);margin-bottom:20px}
.hero .blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.hero .b1{width:260px;height:260px;right:-60px;top:-80px;background:#ffb347;animation:float 9s ease-in-out infinite}.hero .b2{width:220px;height:220px;right:22%;bottom:-120px;background:#22d3ee;animation:float 11s ease-in-out infinite reverse}.hero .b3{width:180px;height:180px;left:-50px;bottom:-60px;background:#ff5d8f;animation:float 13s ease-in-out infinite}
.hero .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 70% 30%,#000,transparent 70%)}
.hero>*{position:relative}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);font-size:12px;font-weight:600;letter-spacing:.4px}
.hero .eyebrow i{width:8px;height:8px;border-radius:50%;background:#7dffb8;box-shadow:0 0 0 0 rgba(125,255,184,.7);animation:pulse 2s infinite}
.hero h1{font-size:clamp(26px,4vw,40px);margin:14px 0 6px;letter-spacing:-.8px;line-height:1.1}
.hero p{margin:0;opacity:.92;max-width:640px;font-size:15px}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.hero .btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(8px)}.hero .btn:hover{background:rgba(255,255,255,.3);border-color:#fff}.hero .btn.solid{background:#fff;color:#3b46e0;border-color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.hero .clock{position:absolute;right:30px;top:26px;text-align:right;font-variant-numeric:tabular-nums}.hero .clock b{display:block;font-size:30px;letter-spacing:-1px}.hero .clock span{opacity:.85;font-size:12.5px}
@media (max-width:700px){.hero{padding:24px 20px}.hero .clock{position:static;text-align:left;margin-top:14px}}
.sect{margin-bottom:6px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);color:var(--ink)!important;text-decoration:none!important;overflow:hidden;transition:transform .28s cubic-bezier(.2,.9,.3,1.2),box-shadow .28s,border-color .28s;animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
.tile:hover{transform:translateY(-5px) scale(1.015);box-shadow:var(--sh2);border-color:var(--pri)}
.tile .ti{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--grad);box-shadow:0 8px 18px rgba(79,91,255,.35);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.tile:hover .ti{transform:rotate(-8deg) scale(1.1)}.tile .ti .ic{width:21px;height:21px}
.tile b{font-size:14.5px}.tile span.d{color:var(--mut);font-size:12.5px;line-height:1.35}
.tile .go{position:absolute;right:14px;top:16px;color:var(--mut);opacity:0;transform:translateX(-6px);transition:all .25s}.tile:hover .go{opacity:1;transform:none;color:var(--pri)}
.tile.c1 .ti{background:linear-gradient(135deg,#4f5bff,#8b5cf6)}.tile.c2 .ti{background:linear-gradient(135deg,#ff8a3d,#ff5d8f)}.tile.c3 .ti{background:linear-gradient(135deg,#12a36b,#22d3ee)}.tile.c4 .ti{background:linear-gradient(135deg,#2f8fff,#6366f1)}.tile.c5 .ti{background:linear-gradient(135deg,#d946ef,#ff5d8f)}.tile.c6 .ti{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.tile:nth-child(2){animation-delay:.04s}.tile:nth-child(3){animation-delay:.08s}.tile:nth-child(4){animation-delay:.12s}.tile:nth-child(5){animation-delay:.16s}.tile:nth-child(6){animation-delay:.2s}.tile:nth-child(7){animation-delay:.24s}.tile:nth-child(n+8){animation-delay:.28s}
.attn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink)!important;text-decoration:none!important;transition:background .2s,transform .2s}
.attn:hover{background:var(--pri-soft);transform:translateX(4px)}.attn .n{min-width:34px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--pillw-bg);color:var(--pillw-fg)}
.ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--pri) calc(var(--p)*1%),var(--line) 0);display:flex;align-items:center;justify-content:center;flex:none;transition:--p 1s}
.ring::before{content:attr(data-t);width:50px;height:50px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.projrow{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--ink)!important;text-decoration:none!important;transition:background .2s}.projrow:last-child{border-bottom:0}.projrow:hover{background:var(--sel);border-radius:12px}
.brandfoot{margin-top:26px;padding:22px;border-radius:var(--r);border:1px dashed var(--line);display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--mut);font-size:13px}
.brandfoot b{color:var(--ink)}.brandfoot a{color:var(--pri2)}.brandfoot .lk{display:inline-flex;align-items:center;gap:6px;margin-right:16px}

/* ---------------------------------------------------------------- login */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;position:relative;overflow:hidden}
.auth .aurora{position:absolute;inset:0;z-index:0;background:var(--grad);background-size:220% 220%;animation:gradShift 16s ease infinite}
.auth .brandpane{position:relative;z-index:1;color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.auth .brandpane .blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.5}.auth .b1{width:340px;height:340px;right:-80px;top:-60px;background:#ffb347;animation:float 10s ease-in-out infinite}.auth .b2{width:300px;height:300px;left:10%;bottom:-120px;background:#22d3ee;animation:float 12s ease-in-out infinite reverse}.auth .b3{width:220px;height:220px;left:-60px;top:30%;background:#ff5d8f;animation:float 14s ease-in-out infinite}
.auth .brandpane::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at 30% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(circle at 30% 40%,#000,transparent 75%);pointer-events:none}
.auth .brandpane>*{position:relative;z-index:1}
.auth .big{font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-1.5px;font-weight:800;margin:22px 0 14px}
.auth .big em{font-style:normal;background:linear-gradient(90deg,#fff,#ffe1b0);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth .lead{font-size:16px;opacity:.92;max-width:480px}
.auth .feats{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:26px;max-width:520px}
.auth .feats div{display:flex;align-items:center;gap:9px;font-size:13.5px;opacity:0;animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) forwards}
.auth .feats div:nth-child(1){animation-delay:.3s}.auth .feats div:nth-child(2){animation-delay:.4s}.auth .feats div:nth-child(3){animation-delay:.5s}.auth .feats div:nth-child(4){animation-delay:.6s}.auth .feats div:nth-child(5){animation-delay:.7s}.auth .feats div:nth-child(6){animation-delay:.8s}
.auth .feats .ic{background:rgba(255,255,255,.2);border-radius:8px;padding:4px;width:26px;height:26px}
.auth .by{font-size:13px;opacity:.92;line-height:1.7}.auth .by a{color:#fff;text-decoration:underline}
.auth .formpane{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:30px;background:var(--bg)}
.auth .formpane .tt{position:absolute;right:20px;top:18px}
.auth .box{width:min(420px,100%);animation:pop .55s cubic-bezier(.2,.9,.3,1.15) both}
.auth .box h1{font-size:28px;letter-spacing:-.6px;margin-bottom:4px}.auth .box .fld{margin-top:14px}.auth .box .btn.pri{width:100%;padding:12px;font-size:15px;margin-top:20px}
.auth .box .minifoot{margin-top:28px;font-size:12px;color:var(--mut);text-align:center;line-height:1.7}.auth .box .minifoot a{color:var(--pri2)}
.auth .box .mob{display:none}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth .brandpane{display:none}.auth .box .mob{display:flex;margin-bottom:22px}.auth .formpane{background:transparent;padding:20px}.auth .aurora{opacity:.18}}

.cochip{display:flex;align-items:center;gap:8px;height:38px;max-width:240px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.cochip:hover{border-color:var(--pri);box-shadow:var(--ring)}.cochip .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13px}.cochip .ic{width:16px;height:16px;color:var(--pri)}
@media (max-width:900px){.cochip .tx{display:none}.cochip{padding:0 9px}}
/* ---------------------------------------------------------------- command palette */
.pal{width:min(620px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);overflow:hidden;animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
.pal input{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:16px 18px!important;font-size:16px;box-shadow:none!important;background:transparent!important}
.pal .list{max-height:52vh;overflow:auto;padding:6px}.pal .it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer}.pal .it .g{margin-left:auto;font-size:11.5px;color:var(--mut)}.pal .it.on,.pal .it:hover{background:var(--pri-soft)}.pal .it.on{outline:1px solid var(--pri)}
.pal .none{padding:24px;text-align:center;color:var(--mut)}

/* ---------------------------------------------------------------- misc legacy */
.pm td,.pm th{padding:5px 9px;text-align:center}.pm td:first-child,.pm th:first-child{text-align:left}.pm tr.grp td{background:var(--panel2);font-weight:600;text-align:left}
.mx td,.mx th{padding:4px 5px;text-align:center;font-size:12px;min-width:30px}.mx td:first-child,.mx th:first-child{text-align:left;min-width:150px;position:sticky;left:0;background:var(--panel)}
.mx .P{color:var(--ok);font-weight:600}.mx .A{color:var(--bad);font-weight:600}.mx .off{background:var(--panel2)}.mx td.c{cursor:pointer}
.sug{position:absolute;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);max-height:260px;overflow:auto;min-width:240px;animation:pop .15s}.sug div{padding:8px 12px;cursor:pointer}.sug div:hover,.sug div.on{background:var(--sel)}
.rel{position:relative}
pre.sql{background:var(--panel2);padding:10px;border-radius:10px;overflow:auto;border:1px solid var(--line)}
.about .row2{display:flex;align-items:center;gap:10px;margin:8px 0}
.about .big{display:flex;gap:14px;align-items:center;margin-bottom:12px}.about .big .logo{width:56px;height:56px}

/* ---------------------------------------------------------------- keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.95)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rip{to{transform:scale(4);opacity:0}}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,22px) scale(1.12)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(125,255,184,.7)}70%{box-shadow:0 0 0 10px rgba(125,255,184,0)}100%{box-shadow:0 0 0 0 rgba(125,255,184,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media print{.side,.top,.page-h .btn,.noprint,.hero,.brandfoot{display:none!important}.shell{display:block}.main{overflow:visible}body{background:#fff;color:#000}body::before{display:none}.card,.tw{box-shadow:none}}

/* company picker */
.copick{display:grid;gap:10px}
.coitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line,#d8dee9);border-radius:14px;background:var(--card,transparent);color:inherit;cursor:pointer;font:inherit;opacity:0;transform:translateY(8px);animation:coin .45s ease forwards;transition:border-color .2s,transform .2s,box-shadow .2s}
.coitem:hover,.coitem:focus-visible{border-color:var(--pri,#2f6fed);transform:translateY(-2px);box-shadow:0 6px 18px rgba(47,111,237,.18);outline:none}
.coitem .nm{flex:1;font-weight:600}
.coitem small{opacity:.65}
@keyframes coin{to{opacity:1;transform:none}}

/* geo check-in */
.ckcard{text-align:center;padding:22px 16px}
.ckstat{display:flex;gap:8px;align-items:center;justify-content:center;font-weight:600;margin-bottom:14px}
.ckstat .dot{width:10px;height:10px;border-radius:50%;background:#9aa4b2}.ckstat .dot.on{background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:ckp 1.8s infinite}
@keyframes ckp{70%{box-shadow:0 0 0 12px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.ckbtn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:min(78vw,220px);aspect-ratio:1;border-radius:50%;border:0;color:#fff;font:inherit;cursor:pointer;transition:transform .2s,filter .2s;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.ckbtn.in{background:linear-gradient(135deg,#16a34a,#0ea5a4)}.ckbtn.out{background:linear-gradient(135deg,#ea580c,#dc2626)}
.ckbtn:active{transform:scale(.96)}.ckbtn b{font-size:1.25rem}.ckbtn small{opacity:.85;font-size:.78rem}.ckbtn svg{width:34px;height:34px}
.ckbtn .ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid currentColor;opacity:.25;animation:ckr 2.4s ease-out infinite}
.ckbtn.in .ring{color:#16a34a}.ckbtn.out .ring{color:#ea580c}.ckbtn.busy{filter:grayscale(.5);pointer-events:none}
@keyframes ckr{0%{transform:scale(.96);opacity:.45}100%{transform:scale(1.14);opacity:0}}
.ckmsg{min-height:22px;margin-top:14px;font-size:.92rem}.ckmsg.bad{color:#dc2626;font-weight:600}
.warnbox{border-left:4px solid #f59e0b}.warnbox div+div{margin-top:6px}
.devs{display:grid;gap:8px}.dev{display:flex;gap:10px;align-items:center}.dev span{flex:1}.dev small{opacity:.65}
@media (prefers-reduced-motion:reduce){.ckbtn .ring,.ckstat .dot.on{animation:none}}

/* project tracker */
.trk-bar{align-items:center;gap:10px;margin-bottom:12px}.trk-bar input{max-width:240px}
.trk-chips{display:flex;gap:6px;flex-wrap:wrap}.trk-chips .chip{border:1px solid var(--line);background:var(--panel);color:inherit;border-radius:99px;padding:6px 12px;cursor:pointer;font:inherit;display:inline-flex;gap:8px;align-items:center;transition:all .2s}
.trk-chips .chip b{background:var(--pri-soft);border-radius:99px;padding:0 8px;font-size:.78rem}.trk-chips .chip.on{background:var(--grad);color:#fff;border-color:transparent}.trk-chips .chip.on b{background:rgba(255,255,255,.25)}
.trk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.trk-card{text-align:left;font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;box-shadow:var(--sh);opacity:0;transform:translateY(10px);animation:coin .5s ease forwards;transition:transform .2s,box-shadow .2s,border-color .2s}
.trk-card:hover,.trk-card:focus-visible{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--pri);outline:none}
.tc-h{display:flex;gap:12px;align-items:center}.tc-t{flex:1;min-width:0;display:flex;flex-direction:column}.tc-t span,.tc-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-t small{color:var(--mut)}
.tc-b{margin-top:14px}.tc-b .two{display:flex;justify-content:space-between;font-size:.85rem;color:var(--mut)}.tc-b .two b{color:var(--ink)}
.dual{position:relative;height:10px;border-radius:99px;background:var(--bg2);margin:8px 0;overflow:hidden}.dual i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.dual .sch{background:repeating-linear-gradient(45deg,var(--line),var(--line) 4px,transparent 4px,transparent 8px);opacity:.9}.dual .prg{height:6px;top:2px}
.tc-f{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--mut)}
.trk-rag{--c:var(--mut);display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:99px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}.trk-rag:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.trk-ring{position:relative;display:inline-block;flex:none}.trk-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.trk-ring circle{fill:none;stroke-width:8}.trk-ring .bg{stroke:var(--bg2)}.trk-ring .fg{stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}.trk-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.95rem}
.trk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.trk-kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh)}.trk-kpi span{font-size:.78rem;color:var(--mut)}.trk-kpi b{font-size:1.4rem}.trk-kpi small{color:var(--mut)}
.trk-kpi.ok b{color:var(--ok)}.trk-kpi.warn b{color:var(--warn)}.trk-kpi.bad b{color:var(--bad)}
.trk-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.trk-chart svg{width:100%;height:auto;display:block}.trk-chart .gl{stroke:var(--line);stroke-width:1}.trk-chart .ax{fill:var(--mut);font-size:11px}.trk-chart .today{stroke:var(--acc);stroke-dasharray:4 4}
.trk-chart .ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.trk-chart .ln.pl{stroke:var(--mut);stroke-dasharray:7 5}.trk-chart .ln.ac{stroke:var(--pri)}.trk-chart .cross{stroke:var(--mut);stroke-width:1}.trk-chart .dp{fill:var(--mut)}.trk-chart .da{fill:var(--pri)}.trk-chart .bar{fill:var(--pri);opacity:.85;transition:opacity .15s}.trk-chart .bar:hover{opacity:1;fill:var(--acc)}
.trk-leg{display:flex;gap:14px;margin-bottom:6px;flex-wrap:wrap}.trk-leg .lg{background:none;border:0;color:inherit;font:inherit;display:inline-flex;gap:6px;align-items:center;cursor:pointer;padding:2px 4px}.trk-leg .lg i{width:18px;height:4px;border-radius:2px}.trk-leg .lg.planned i{background:var(--mut)}.trk-leg .lg.actual i{background:var(--pri)}.trk-leg .lg.td i{background:var(--acc)}.trk-leg .lg[aria-pressed=false]{opacity:.4;text-decoration:line-through}
.trk-tip{position:fixed;z-index:9999;display:none;pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:var(--sh2);font-size:.82rem;line-height:1.5;max-width:260px}.trk-tip .k{display:inline-block;width:10px;height:4px;margin-right:6px;border-radius:2px}.trk-tip .k.pl{background:var(--mut)}.trk-tip .k.ac{background:var(--pri)}
.trk-bars{display:grid;gap:8px;margin-top:8px}.brow{display:grid;grid-template-columns:minmax(80px,130px) 1fr 52px;gap:10px;align-items:center;background:none;border:0;color:inherit;font:inherit;text-align:left;padding:4px;border-radius:8px;cursor:pointer}.brow:hover{background:var(--pri-soft)}.brow.static{cursor:default}.brow.static:hover{background:none}
.brow .bt{height:12px;background:var(--bg2);border-radius:99px;overflow:hidden}.brow .bt i{display:block;height:100%;border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1)}.brow b{text-align:right}.brow .bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-donut{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.dsvg{position:relative;width:170px;height:170px;flex:none}.dsvg svg{width:100%;height:100%}.dsvg .seg{fill:none;stroke-width:22;cursor:pointer;transition:stroke-width .2s}.dsvg .seg:hover{stroke-width:27}
.dsvg .dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}.dsvg .dc b{font-size:1.5rem}.dsvg .dc span{font-size:.75rem;color:var(--mut);max-width:80px}
.dleg{flex:1;min-width:160px;display:grid;gap:4px}.dleg button{display:flex;gap:8px;align-items:center;background:none;border:0;color:inherit;font:inherit;padding:4px 6px;border-radius:8px;cursor:pointer;text-align:left}.dleg button:hover{background:var(--pri-soft)}.dleg i{width:10px;height:10px;border-radius:3px}.dleg span{flex:1}
.trk-gantt{display:grid;gap:6px;overflow-x:auto}.gr,.gh{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;min-width:420px}.gn{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt{position:relative;height:22px;background:var(--bg2);border-radius:6px}.gh .gt{background:none;display:flex;justify-content:space-between;height:auto}.gh em{font-style:normal;font-size:.72rem;color:var(--mut)}
.gbar{position:absolute;height:8px;border-radius:4px}.gbar.plan{top:2px;background:var(--mut);opacity:.55}.gbar.act{bottom:2px;background:var(--pri)}.gtoday{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--acc);z-index:2}
.trk-mini{position:relative;display:inline-block;min-width:90px;padding:0 6px;border-radius:6px;background:var(--bg2);overflow:hidden;font-size:.8rem}.trk-mini i{position:absolute;left:0;top:0;bottom:0;background:var(--pri-soft);border-right:2px solid var(--pri)}
@media (prefers-reduced-motion:reduce){.trk-card{animation:none;opacity:1;transform:none}.trk-ring .fg,.brow .bt i,.dual i{transition:none}}

.pwwrap{position:relative;display:block;width:100%}.pwwrap input{padding-right:40px}
.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--mut);cursor:pointer;padding:6px;border-radius:8px;display:flex}.pweye:hover{color:var(--pri);background:var(--panel2)}
.navbadge{margin-left:auto;background:#e5484d;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.side a{display:flex;align-items:center}
.regline{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;text-align:center}
.chk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;cursor:pointer}

.misframe{width:100%;height:calc(100vh - 330px);min-height:480px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:12px}
.misreps{display:grid;grid-template-columns:1fr 1fr;gap:8px}@media(max-width:700px){.misreps{grid-template-columns:1fr}}
.misrep{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--panel2)}
.warnbox{background:rgba(229,72,77,.08);border:1px solid rgba(229,72,77,.35);color:var(--bad);padding:9px 12px;border-radius:10px;font-size:13px}
.pillrow{display:flex;gap:6px;align-items:center}
/* organisation chart */
.orgwrap{display:grid;grid-template-columns:1fr 330px;gap:14px;align-items:start}@media(max-width:1000px){.orgwrap{grid-template-columns:1fr}}
.orgscroll{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 10px 24px;min-height:360px;max-height:calc(100vh - 300px)}
.orgtree,.orgtree ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}.orgtree ul{padding-top:22px;position:relative}
.orgtree li{position:relative;padding:22px 8px 0;display:flex;flex-direction:column;align-items:center}.orgtree>li{padding-top:0}
.orgtree li::before,.orgtree li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:22px;border-top:2px solid var(--line)}.orgtree li::after{right:auto;left:50%;border-left:2px solid var(--line)}
.orgtree li:only-child::before,.orgtree li:only-child::after{display:none}.orgtree li:only-child{padding-top:0}.orgtree>li::before,.orgtree>li::after{display:none}
.orgtree li:first-child::before,.orgtree li:last-child::after{border:0}.orgtree li:last-child::before{border-right:2px solid var(--line);border-radius:0 8px 0 0}.orgtree li:first-child::after{border-radius:8px 0 0 0}
.orgtree ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid var(--line);height:22px}
.orgtree li:only-child>ul{padding-top:22px}
.orgnode{display:flex;flex-direction:column;align-items:center;gap:4px}
.orgcard{display:flex;align-items:center;gap:8px;min-width:170px;max-width:230px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);cursor:pointer;position:relative;transition:box-shadow .2s,transform .2s,border-color .2s}
.orgcard:hover{box-shadow:0 6px 18px rgba(60,70,200,.18);transform:translateY(-2px)}.orgcard.sel{border-color:var(--pri);box-shadow:0 0 0 3px rgba(79,91,255,.2)}.orgcard.off{opacity:.55}.orgcard.hit{background:rgba(255,200,60,.25)}
.orgav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#4f5bff,#d946ef);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}.orgav.lg{width:48px;height:48px;font-size:16px}
.orgtx{display:flex;flex-direction:column;min-width:0}.orgtx b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.orgtx small{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orgcnt{position:absolute;top:-8px;right:-8px;background:var(--pri);color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:1px 6px}
.orgtog{border:1px solid var(--line);background:var(--panel);border-radius:99px;font-size:11px;padding:0 8px;cursor:pointer;color:var(--mut)}.orgtog:hover{color:var(--pri)}
.orgside{position:sticky;top:70px}.orghd{display:flex;gap:10px;align-items:center}.orgmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.orgmeta div{background:var(--panel2);border-radius:10px;padding:8px;text-align:center}.orgmeta small{display:block;font-size:11px;color:var(--mut)}.orgmeta b{font-size:18px}
.orgchain{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px}.orgchain a::after{content:" ›";color:var(--mut)}.orgchain span{font-weight:700}
.orglist{display:flex;flex-direction:column;gap:2px;margin-top:4px}.orglist a{display:flex;justify-content:space-between;padding:5px 8px;border-radius:8px;font-size:13px}.orglist a:hover{background:var(--panel2)}.orglist small{color:var(--mut)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:6px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}.kpi small{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}.kpi b{font-size:22px}.kpi span{font-size:11px;color:var(--mut)}
/* live dashboard */
.lv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:12px 0}
.lv-k{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
a.lv-k:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(60,70,200,.14);border-color:var(--pri)}
.lv-k.warn{border-color:var(--warn)}.lv-k.bad{border-color:var(--bad)}
.lv-kh{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.04em}.lv-kh .ic{width:16px;height:16px}.lv-kh span:nth-child(2){flex:1}
.lv-k b{font-size:26px;line-height:1.2}.lv-ks{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}.lv-ks small{color:var(--mut);font-size:11px}
.lv-d{font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px}.lv-d.good{background:var(--pillok-bg);color:var(--pillok-fg)}.lv-d.bad{background:var(--pillb-bg);color:var(--pillb-fg)}.lv-d.flat,.lv-d.up{background:var(--pilln-bg);color:var(--pilln-fg)}
.lv-seg{display:flex;width:90px;height:8px;border-radius:99px;overflow:hidden;gap:2px}.lv-seg i{display:block}
.lv-bar{gap:12px;margin:6px 0;align-items:center}.lv-seg2{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:3px}.lv-seg2 button{border:0;background:none;padding:6px 14px;border-radius:9px;cursor:pointer;color:var(--mut);font-weight:600}.lv-seg2 button.on{background:var(--pri);color:#fff}
.lv-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(18,163,107,.6);animation:lvp 2s infinite}.lv-dot.off{background:var(--mut);animation:none}.lv-dot.pulse{background:var(--pri)}
@keyframes lvp{0%{box-shadow:0 0 0 0 rgba(18,163,107,.55)}70%{box-shadow:0 0 0 8px rgba(18,163,107,0)}100%{box-shadow:0 0 0 0 rgba(18,163,107,0)}}
.lv-chart svg{width:100%;height:200px;display:block}
.lv-hb{display:flex;flex-direction:column;gap:7px}.lv-hbr{display:grid;grid-template-columns:minmax(70px,120px) 1fr auto;gap:8px;align-items:center;font-size:12px}.lv-hbr .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lv-hbr .bar{height:10px;background:var(--panel2);border-radius:99px;overflow:hidden}.lv-hbr .bar i{display:block;height:100%;border-radius:99px;transition:width .6s}.lv-hbr .vl{font-weight:600;font-variant-numeric:tabular-nums}
.lv-cols{display:flex;align-items:flex-end;gap:5px;height:120px}.lv-cols i{flex:1;background:linear-gradient(180deg,var(--pri),#8b5cf6);border-radius:5px 5px 2px 2px;min-width:6px;transition:height .5s}.lv-cols i:hover{filter:brightness(1.2)}
.lv-alerts{display:flex;flex-direction:column;gap:6px}.lv-al{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;background:var(--panel2);color:inherit;font-size:13px;border-left:4px solid var(--mut)}.lv-al span{flex:1}.lv-al.bad{border-left-color:var(--bad)}.lv-al.warn{border-left-color:var(--warn)}.lv-al.info{border-left-color:var(--info)}.lv-al:hover{background:var(--panel)}.lv-al i{display:none}
.lv-ok{color:var(--ok);font-size:13px;padding:6px 2px}
.lv-feed{display:flex;flex-direction:column}.lv-fi{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}.lv-fi:last-child{border:0}.lv-fi .ic{width:28px;height:28px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--pri)}.lv-fi small{color:var(--mut)}
.lv-pb{position:relative;height:10px;background:var(--panel2);border-radius:99px;overflow:hidden}.lv-pb i{position:absolute;left:0;top:0;bottom:0;border-radius:99px}.lv-pb .sch{background:rgba(120,130,160,.28)}.lv-pb .prg{height:6px;top:2px}
.lv-rag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;color:#fff;background:var(--c)}

.trk-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.tc-sp{display:flex;align-items:center;justify-content:space-between;margin:8px 0 4px;font-size:12px}.tc-sp small{color:var(--mut)}
.trk-tl{padding:14px 16px 18px;overflow:hidden}.tl-axis{position:relative;height:20px;margin-left:90px;border-bottom:1px solid var(--line);font-size:11px;color:var(--mut)}.tl-axis span{position:absolute;transform:translateX(-2px);white-space:nowrap}
.tl-row{display:flex;align-items:center;gap:10px;margin-top:10px}.tl-nm{width:80px;font-weight:700;flex:none;overflow:hidden;text-overflow:ellipsis}.tl-track{position:relative;flex:1;height:26px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),var(--line) calc(100%/12 - 1px) calc(100%/12));border-radius:8px}
.tl-bar{position:absolute;top:3px;height:20px;border-radius:7px;background:rgba(120,130,160,.28);overflow:hidden;cursor:pointer}.tl-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:7px 0 0 7px;opacity:.9}.tl-bar span{position:relative;font-size:11px;font-weight:700;padding-left:8px;line-height:20px}
.tl-today{position:absolute;top:-4px;bottom:-4px;border-left:2px dashed var(--bad)}
a.lv-k,a.lv-k:hover{text-decoration:none}a.lv-k b,a.lv-k span,a.lv-k small{text-decoration:none}
.lv-bar select,.trk-bar select{width:auto;min-width:190px}.trk-bar input[type=search]{width:220px}

.orgtree{width:max-content;min-width:100%}.orgtree.flat{width:auto;flex-wrap:wrap;gap:12px 0}.orgtree.flat>li{padding:0 6px}

/* touch targets: at least 36 px tall on phones / tablets */
@media (pointer:coarse),(max-width:900px){
  .btn.sm{min-height:36px}.navall{min-height:36px;display:flex;align-items:center}.side .foot a{display:inline-block;padding:9px 2px}
  .iconbtn,.cmdk,.who{min-height:38px}.pager .btn,.pg .btn{min-height:36px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:38px}
}
@media (max-width:900px){
  .btn{white-space:normal;line-height:1.25}.seg button,.seg button.on{height:34px}.pweye{width:38px;height:38px}
  .auth a,.auth .lnk{display:inline-block;padding:8px 2px}
  .rolelist a,.roles a,.rl a{display:block;padding:9px 6px}
}
@media (max-width:900px){.card a[href="#"]{display:inline-block;padding:9px 2px}}
@media (max-width:900px){.shell,.shell.nonav{grid-template-columns:minmax(0,1fr)}.main{min-width:0}}
@media (max-width:1100px){.who .tx{display:none}.who{padding-right:4px}.cmdk{min-width:170px}}
@media (max-width:1100px) and (min-width:901px){.cmdk{min-width:150px}}
@media (pointer:coarse),(max-width:900px){
  .btn,html[data-view] .btn{min-height:40px}.seg button,.seg button.on{min-width:34px;min-height:36px}.pweye{min-width:38px;min-height:38px}
  .auth .foot a,.side .foot a,.hero a:not(.btn),.card a:not(.btn){padding-top:8px;padding-bottom:8px}
  a:not(.btn):not(.di):not(.osap){min-height:32px}
}
@media (max-width:560px){.modal>footer .btn{flex:1 1 40%}.modal>footer .btn.pri{flex-basis:100%;order:-1}.modal>.body{padding:14px}.modal{max-height:94vh}}

.rolelay{align-items:flex-start;flex-wrap:nowrap}@media (max-width:800px){.rolelay{flex-wrap:wrap}.rolelay>*{flex:1 1 100%!important;min-width:0!important}}
@media (max-width:900px){.tw select{min-width:84px}.tw input[type=time]{min-width:112px}}
input[type=search]{padding:8px 11px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);min-width:0;max-width:100%}
@media (max-width:560px){input[type=search]{width:100%}}
@media (max-width:1100px){.auth a:not(.btn){display:inline-block;padding:9px 3px}}