/* ==========================================================================
   PetroSkill Tasks — design system v3
   Century Gothic, light + dark themes (CSS variables), floating sidebar,
   soft cards, pill controls. One stylesheet for the whole app.
   Theme: <html data-theme="light|dark">, chosen in the top bar (System / Light / Dark).
   ========================================================================== */
@font-face{font-family:'Century Gothic';src:local('Century Gothic'),local('CenturyGothic'),url(/fonts/CenturyGothic-Regular.otf) format('opentype');font-weight:400 500;font-display:swap}
@font-face{font-family:'Century Gothic';src:local('Century Gothic Bold'),local('CenturyGothic-Bold'),url(/fonts/CenturyGothic-Bold.otf) format('opentype');font-weight:600 900;font-display:swap}

:root{
  color-scheme:light;
  --font:'Century Gothic','CenturyGothic','AppleGothic','URW Gothic','Futura',system-ui,sans-serif;
  /* surfaces */
  --bg:#f3f6fb;--bg-2:#eaf0f7;--card:#ffffff;--card-2:#f6f8fc;--card-3:#eef3f9;--hover:#f1f5fb;
  --line:#e2e8f1;--line-2:#cfd9e6;
  /* text */
  --tx:#0e1c30;--tx-2:#33465f;--mu:#66768c;--mu-2:#94a3b8;--heading:#042c53;
  /* brand */
  --navy:#042c53;--navy-2:#0d4377;--primary:#0d4377;--primary-tx:#fff;--primary-soft:#e4eefa;--link:#1b5fae;
  --amb:#f89a20;--amb-2:#e3850a;--amb-soft:#fff2df;--amb-tx:#9a5a00;
  --red:#d64541;--red-soft:#fdeceb;--red-tx:#a8302c;
  --grn:#1e9a6a;--grn-soft:#e3f5ed;--grn-tx:#17704e;
  --blu:#2f6fd0;--blu-soft:#e6effc;--blu-tx:#245aa8;
  --vio:#7a5af5;--vio-soft:#efeafe;
  /* chart series (validated categorical slots 1-4) */
  --s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;
  /* sidebar */
  --side:#042c53;--side-2:#0a3a6a;--side-tx:#c4d4e8;--side-mu:#8aa3c2;--side-line:rgba(255,255,255,.1);
  /* shape */
  --r-xs:8px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(15,35,65,.05),0 1px 1px rgba(15,35,65,.03);
  --sh-2:0 1px 2px rgba(15,35,65,.04),0 10px 30px -12px rgba(15,35,65,.14);
  --sh-pop:0 24px 60px -16px rgba(8,25,50,.35),0 4px 14px rgba(8,25,50,.1);
  --ring:0 0 0 3px rgba(27,95,174,.22);
  --ctl:40px;--ctl-sm:34px;--sb:260px;--sb-c:84px;
  /* legacy names used by inline styles in scripts */
  --ink:var(--heading);--ink2:var(--navy-2)
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#080f1b;--bg-2:#0d1626;--card:#0f192a;--card-2:#142035;--card-3:#19273e;--hover:#17243a;
  --line:#1e2c43;--line-2:#2b3d59;
  --tx:#e6edf7;--tx-2:#c3cfe0;--mu:#8b9bb2;--mu-2:#64748b;--heading:#f1f5fb;
  --primary:#3d84e0;--primary-tx:#fff;--primary-soft:#14294a;--link:#7cb1f5;
  --amb:#f9a43a;--amb-2:#f39418;--amb-soft:#33240f;--amb-tx:#f7c07a;
  --red:#ef6461;--red-soft:#3a1717;--red-tx:#f6a3a0;
  --grn:#2fbf86;--grn-soft:#0f2e23;--grn-tx:#7fdcb5;
  --blu:#5b9cf0;--blu-soft:#132a4b;--blu-tx:#a3c7f7;
  --vio:#9b85ff;--vio-soft:#221c44;
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;
  --side:#0b1525;--side-2:#14233b;--side-tx:#b9c7da;--side-mu:#73849c;--side-line:rgba(255,255,255,.07);
  --sh-1:none;--sh-2:0 0 0 1px rgba(255,255,255,.02);--sh-pop:0 30px 70px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);
  --ring:0 0 0 3px rgba(91,156,240,.3);--ink2:#7cb1f5
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:14px/1.55 var(--font);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none}
body.theme-anim,body.theme-anim *{transition:background-color .25s ease,border-color .25s ease,color .15s ease!important}
h1,h2,h3,h4{font-weight:700;color:var(--heading);letter-spacing:-.01em;line-height:1.25}
h3{font-size:16px}h4{font-size:14px}
a{color:var(--link)}
img{max-width:100%}svg{flex:none}
::selection{background:rgba(248,154,32,.3)}
:focus{outline:none}:focus-visible{outline:2px solid var(--link);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none}
small{font-size:12px}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--mu);font-size:12.5px}
.empty{color:var(--mu);padding:18px;text-align:center;font-size:13px}
.err{color:var(--red);font-size:13px;margin:0 0 8px}.err:empty{display:none}.err2{color:var(--red);font-size:12px}
.hide,[hidden]{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}

/* ---------------- forms ---------------- */
label{display:block;font-weight:600;font-size:12.5px;color:var(--tx-2)}
input,select,textarea{display:block;width:100%;min-height:var(--ctl);margin:5px 0 14px;padding:9px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--tx);font-size:14px;font-weight:500;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background:var(--card-2)}
input:hover,select:hover,textarea:hover{border-color:var(--mu-2)}
input:focus,select:focus,textarea:focus{border-color:var(--link);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{opacity:.7;background:var(--card-3);cursor:not-allowed}
input::placeholder,textarea::placeholder{color:var(--mu-2)}
textarea{min-height:0;line-height:1.5;resize:vertical}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
input[type=checkbox],input[type=radio]{display:inline-block;width:17px;height:17px;min-height:0;margin:0;padding:0;-webkit-appearance:auto;appearance:auto;accent-color:var(--primary);box-shadow:none;flex:none}
input[type=date]{-webkit-appearance:auto;appearance:auto;cursor:pointer}
input[type=range]{-webkit-appearance:auto;appearance:auto;width:100%;min-height:0;height:auto;padding:0;border:0;background:transparent!important;box-shadow:none!important;accent-color:var(--amb);cursor:pointer}
[data-theme=dark] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8)}
input[type=file]{padding:7px 10px;font-size:13px}
.ck{display:inline-flex;align-items:center;gap:8px;margin:0 18px 8px 0;font-weight:500;font-size:13.5px;color:var(--tx);min-height:28px;cursor:pointer}
.pick{margin:5px 0 14px;padding:6px 10px;max-height:150px;overflow:auto;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card)}
[data-theme=dark] .pick{background:var(--card-2)}
.pick label{display:flex;align-items:center;gap:9px;padding:6px 2px;margin:0;font-weight:500;font-size:13.5px;color:var(--tx);cursor:pointer}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}.g2>div:empty{display:none}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.save-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---------------- buttons ---------------- */
.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl);min-height:var(--ctl);padding:0 18px;border:1px solid transparent;border-radius:var(--r-pill);background:var(--primary);color:var(--primary-tx);font-size:13.5px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;vertical-align:middle;transition:filter .15s,background .15s,box-shadow .15s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.amb{background:var(--amb);color:#1d1203;box-shadow:0 6px 16px -6px rgba(248,154,32,.6)}
.btn.grn{background:var(--grn);color:#fff}.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:var(--card);color:var(--tx);border-color:var(--line-2);font-weight:600}
[data-theme=dark] .btn.ghost{background:var(--card-2)}
.btn.soft{background:var(--primary-soft);color:var(--link)}
.btn.danger,.btn.ghost.danger,.btn.ghost[data-ax=delete],#adel,#bdel{color:var(--red)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
@media(hover:hover){.btn:hover{filter:brightness(1.07)}.btn.ghost:hover{background:var(--hover);border-color:var(--mu-2);filter:none}}
.dh .btn,.row>.btn,.fh .btn,.cal-h .btn,.ph .btn,.ua .btn,.fbar .btn{height:var(--ctl-sm);min-height:var(--ctl-sm);padding:0 15px;font-size:13px}
.icon-btn{display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--tx-2);position:relative;transition:background .15s,border-color .15s}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.icon-btn:hover{background:var(--hover);border-color:var(--line-2);color:var(--tx)}}
.x{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--red);font-size:20px;line-height:1}
@media(hover:hover){.x:hover{background:var(--red-soft)}}

/* ---------------- chips & status ---------------- */
.chip{display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:0 10px;border-radius:var(--r-pill);background:var(--card-3);color:var(--tx-2);font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap}
.chip.warn{margin:0;padding:0 10px;border:0;font-size:11.5px;border-radius:var(--r-pill)}
.chip.late{background:var(--red-soft);color:var(--red-tx)}.chip.ok{background:var(--grn-soft);color:var(--grn-tx)}.chip.warn{background:var(--amb-soft);color:var(--amb-tx)}.chip.info{background:var(--blu-soft);color:var(--blu-tx)}
.chip.p-high{background:var(--red-soft);color:var(--red-tx)}.chip.p-medium{background:var(--amb-soft);color:var(--amb-tx)}.chip.p-low{background:var(--blu-soft);color:var(--blu-tx)}
.sb{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;background:var(--card-3);color:var(--mu);line-height:1;white-space:nowrap}
.sb::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.s-Submitted{background:var(--amb-soft);color:var(--amb-tx)}.s-Reviewed{background:var(--blu-soft);color:var(--blu-tx)}.s-Approved{background:var(--grn-soft);color:var(--grn-tx)}.s-Rejected{background:var(--red-soft);color:var(--red-tx)}.s-Paid{background:var(--primary);color:#fff}
.bref{display:inline-flex;align-items:center;margin-left:6px;padding:2px 10px;border-radius:var(--r-pill);background:var(--blu-soft);color:var(--blu-tx);font-size:12px;font-weight:700;cursor:pointer}
.kbd,kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:var(--card-2);color:var(--mu);font:600 11px/1 var(--font)}

/* ==========================================================================
   LOGIN
   ========================================================================== */
#login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,1fr);background:var(--bg)}
.lg-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px;color:#d7e4f4;
  background:radial-gradient(900px 600px at -10% -20%,#1a5c9e 0,transparent 55%),radial-gradient(700px 500px at 110% 120%,rgba(248,154,32,.35) 0,transparent 55%),linear-gradient(160deg,#042c53,#021a33)}
.lg-brand::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 80%);pointer-events:none}
.lg-brand img{width:210px;position:relative;z-index:1}
.lg-copy{position:relative;z-index:1;max-width:460px}
.lg-copy h1{margin:0 0 14px;font-size:38px;line-height:1.15;color:#fff;letter-spacing:-.02em}
.lg-copy h1 span{color:var(--amb)}
.lg-copy p{margin:0 0 26px;color:#a9bfd9;font-size:15px}
.lg-feats{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.lg-feats li{display:flex;align-items:center;gap:12px;font-size:14px;color:#d7e4f4}
.lg-feats i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:var(--amb);font-style:normal}
.lg-feats svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg-foot{position:relative;z-index:1;font-size:12px;color:#7f97b5}
.lg-side{display:grid;place-items:center;padding:32px 24px;position:relative}
.lg-card{width:min(400px,100%)}
.lg-card .lg-mobile{display:none;width:190px;margin:0 0 26px}
.lg-card h2{margin:0 0 6px;font-size:26px;letter-spacing:-.02em}
.lg-card .lead{margin:0 0 26px;color:var(--mu)}
.lg-card .btn{width:100%;height:46px;min-height:46px;font-size:14.5px;margin-top:4px}
.lg-theme{position:absolute;top:18px;right:18px}
.pw-wrap{position:relative}.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;background:none;color:var(--mu);border-radius:8px}
.pw-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.mf-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;border-radius:16px;background:var(--primary-soft);color:var(--link)}
.mf-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:6px 0 16px}
.otp input{height:56px;margin:0;padding:0;text-align:center;font-size:24px;font-weight:700;border-radius:12px;letter-spacing:0}
.otp-one{font-size:20px!important;letter-spacing:.3em;text-align:center;font-weight:700;height:52px}
.mf-alt{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-top:18px;font-size:13px}
.linkbtn{background:none;border:0;padding:4px 2px;color:var(--link);font-weight:600;font-size:13px;text-decoration:none}
@media(hover:hover){.linkbtn:hover{text-decoration:underline}}
.linkbtn[disabled]{color:var(--mu);cursor:default;text-decoration:none}
.mf-tabs{display:flex;gap:6px;padding:4px;margin:0 0 18px;background:var(--card-3);border-radius:var(--r-pill)}
.mf-tabs button{flex:1;height:34px;border:0;border-radius:var(--r-pill);background:none;color:var(--mu);font-weight:600;font-size:12.5px}
.mf-tabs button.on{background:var(--card);color:var(--tx);box-shadow:var(--sh-1)}
.remember{margin:4px 0 14px}
@media(max-width:900px){#login{grid-template-columns:1fr}.lg-brand{display:none}.lg-card .lg-mobile{display:block}}
[data-theme=light] .lg-card .lg-mobile.dk,[data-theme=dark] .lg-card .lg-mobile.lt{display:none!important}

/* ==========================================================================
   APP SHELL
   ========================================================================== */
#app{display:none;min-height:100vh;min-height:100dvh}#app.on{display:flex}
aside{position:sticky;top:0;flex:none;z-index:20;display:flex;flex-direction:column;width:var(--sb);height:100vh;height:100dvh;padding:18px 12px 14px;background:var(--side);color:var(--side-tx);overflow:hidden;border-right:1px solid var(--side-line);transition:width .22s ease,transform .25s ease,visibility 0s}
[data-theme=light] aside{background:linear-gradient(180deg,#042c53 0%,#03223f 100%)}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;min-height:52px}
.brand img{width:168px;display:block}
.brand-mark{display:none;width:44px;height:44px;margin:0 auto;border-radius:12px;background:url(/logo-light.png) no-repeat;background-size:264px auto;background-position:-19px 3px}
.brand .brand-sub{display:none}
.collapse-nav{position:absolute;top:24px;right:-1px;transform:translateX(50%);display:none}
.side-sec{margin:14px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--side-mu)}
aside nav{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0 -4px;padding:0 4px}
aside nav::-webkit-scrollbar{display:none}
aside nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:42px;margin:2px 0;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:var(--side-tx);font-size:13.5px;font-weight:500;text-align:left;transition:background .15s,color .15s}
aside nav button.on{background:rgba(255,255,255,.1);color:#fff;font-weight:700}
aside nav button.on::before{content:"";position:absolute;left:-4px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--amb)}
aside nav button.on .nav-icon{color:var(--amb)}
@media(hover:hover){aside nav button:not(.on):hover{background:rgba(255,255,255,.06);color:#fff}}
.nav-icon{display:grid;place-items:center;width:22px;height:22px;flex:none}
.nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-label{flex:1;min-width:0;line-height:1.25}
.nav-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--amb);color:#1d1203;font-size:11px;font-weight:800;line-height:20px;text-align:center}
.me{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 8px 2px;border-top:1px solid var(--side-line)}
.side-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--amb),#ffb95c);color:#1d1203;font-weight:800;font-size:13px;cursor:pointer}
.side-user-copy{flex:1;min-width:0;line-height:1.3}
.side-user-copy b{display:block;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-copy span{display:block;color:var(--side-mu);font-size:11.5px}
.me .me-acts{display:flex;gap:4px}
.me button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:none;color:var(--side-tx)}
.me button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.me button:hover{background:rgba(255,255,255,.08);color:#fff}}
.side-collapse{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;margin-top:6px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--side-mu);font-size:12.5px;font-weight:600}
.side-collapse svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
@media(hover:hover){.side-collapse:hover{background:rgba(255,255,255,.06);color:#fff}}
@media(min-width:801px){
  body.sidebar-collapsed aside{width:var(--sb-c)}
  body.sidebar-collapsed .brand img,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .side-sec,body.sidebar-collapsed .side-user-copy,body.sidebar-collapsed .me .me-acts,body.sidebar-collapsed .side-collapse b,body.sidebar-collapsed .nav-count{display:none!important}
  body.sidebar-collapsed .brand{justify-content:center;padding:2px 0 16px}
  body.sidebar-collapsed .brand-mark{display:block}
  body.sidebar-collapsed aside nav button{justify-content:center;padding:8px 0}
  body.sidebar-collapsed .me{justify-content:center;padding:12px 0 2px}
  body.sidebar-collapsed .side-collapse{justify-content:center;padding:0}
  body.sidebar-collapsed .side-collapse svg{transform:rotate(180deg)}
  body.sidebar-collapsed aside nav button.on::before{left:0}
}
#scrim{display:none}
main{flex:1;min-width:0;padding:0 32px 40px}
.top{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:10px;margin:0 -32px 22px;padding:16px 32px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent}
.top.scrolled{border-bottom-color:var(--line)}
.top-title{flex:1;min-width:0}
.top h2{margin:0;font-size:22px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sub{display:block;margin-top:1px;color:var(--mu);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burger{display:none}
.search-btn{display:flex;align-items:center;gap:10px;width:260px;height:var(--ctl);padding:0 8px 0 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--mu);font-size:13px;text-align:left}
.search-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-btn span{flex:1}
@media(hover:hover){.search-btn:hover{border-color:var(--line-2);background:var(--hover)}}
.bell i{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;font-style:normal;line-height:19px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
#nt{min-width:0}
/* notifications popover */
#notes{position:fixed;right:24px;top:70px;z-index:30;display:none;width:380px;max-height:min(520px,70vh);overflow:auto;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop)}
#notes .nh{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 10px;font-weight:700;color:var(--heading)}
#notes>div:not(.nh){position:relative;padding:11px 12px 11px 28px;border-radius:12px;font-size:13px;color:var(--tx-2)}
#notes>div:not(.nh)::before{content:"";position:absolute;left:12px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--line-2)}
#notes>div.u{background:var(--amb-soft);color:var(--tx)}#notes>div.u::before{background:var(--amb)}
#notes small{display:block;margin-top:3px;color:var(--mu);font-size:11.5px}
#notes div[data-open],#notes div[data-auth],#notes div[data-bud]{cursor:pointer}
@media(hover:hover){#notes div[data-open]:hover,#notes div[data-auth]:hover,#notes div[data-bud]:hover{background:var(--hover)}}
/* theme menu */
.menu{position:absolute;z-index:40;min-width:180px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-pop)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--tx);font-size:13.5px;font-weight:500;text-align:left}
.menu button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--mu)}
.menu button.on{background:var(--primary-soft);color:var(--link);font-weight:700}.menu button.on svg{color:var(--link)}
@media(hover:hover){.menu button:not(.on):hover{background:var(--hover)}}

/* ==========================================================================
   CARDS, PANELS, STATS
   ========================================================================== */
.panel{margin-bottom:18px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.panel>h3{margin:0 0 14px}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ph h3{margin:0;flex:1 1 auto;min-width:0}.ph h3 small{margin-left:6px;color:var(--mu);font-weight:500}
.ph .meta{margin-top:3px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.two>.panel,.three>.panel{margin-bottom:0}
.three{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;margin-bottom:18px}
.stats,.target-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.stat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.stat::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--line-2)}
.stat.r::before{background:var(--red)}.stat.a::before{background:var(--amb)}.stat.g::before{background:var(--grn)}.stat.b::before{background:var(--blu)}
.stat b{order:2;display:block;color:var(--heading);font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat>span{order:1;color:var(--mu);font-size:12.5px;font-weight:600}
.stat>span~span{order:3;font-weight:500;font-size:12px}
.stat .ic{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--card-3);color:var(--mu)}
.stat.r .ic{background:var(--red-soft);color:var(--red)}.stat.a .ic{background:var(--amb-soft);color:var(--amb-2)}.stat.g .ic{background:var(--grn-soft);color:var(--grn)}.stat.b .ic{background:var(--blu-soft);color:var(--blu)}
.stat .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stat em{order:4;font-style:normal;font-size:12px;color:var(--mu);margin-top:4px}
.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}
.row .n{flex:1;min-width:0}
.bar{flex:1;height:8px;border-radius:20px;background:var(--card-3);overflow:hidden}.bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--blu),var(--grn))}
.av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--primary-soft);color:var(--link);font-weight:800;font-size:12.5px}
.warn{margin:8px 0;padding:11px 14px;border-radius:var(--r-md);background:var(--amb-soft);color:var(--tx);font-size:13px;border:1px solid color-mix(in srgb,var(--amb) 30%,transparent)}
.note{margin:8px 0;padding:11px 14px;border-radius:var(--r-md);background:var(--blu-soft);color:var(--tx);font-size:13px}
.okbox{margin:8px 0;padding:11px 14px;border-radius:var(--r-md);background:var(--grn-soft);color:var(--tx);font-size:13px}

/* greeting hero (overview) */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px;padding:24px 26px;border-radius:var(--r-xl);color:#fff;
  background:radial-gradient(500px 260px at 100% 0,rgba(248,154,32,.35),transparent 60%),linear-gradient(135deg,#0d4377,#042c53)}
[data-theme=dark] .hero{background:radial-gradient(500px 260px at 100% 0,rgba(248,154,32,.22),transparent 60%),linear-gradient(135deg,#123a68,#0b1d35);border:1px solid var(--line)}
.hero h3{margin:0 0 4px;color:#fff;font-size:21px}.hero p{margin:0;color:#b8cbe3;font-size:13.5px}
.hero .hero-acts{display:flex;gap:8px;flex-wrap:wrap}
.hero .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
@media(hover:hover){.hero .btn.ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32);color:#fff}}
.ring{--p:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--amb) calc(var(--p)*1%),rgba(255,255,255,.15) 0);flex:none}
.ring b{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#0a3560;font-size:15px}
[data-theme=dark] .ring b{background:#10294a}
.hero-l{display:flex;align-items:center;gap:18px}

/* charts (overview) */
.chart{width:100%}.chart svg{display:block;width:100%;height:auto;overflow:visible}
.ch-grid{stroke:var(--line);stroke-width:1}.ch-ax{fill:var(--mu);font-size:11px;font-family:var(--font)}
.ch-bar{fill:var(--s1)}.ch-hit{fill:transparent}
.ch-g:hover .ch-bar{filter:brightness(1.12)}
.ch-val{fill:var(--tx-2);font-size:11px;font-weight:700;font-family:var(--font)}
.seg-bar{display:flex;gap:2px;height:14px;margin:6px 0 16px;border-radius:7px;overflow:hidden;background:var(--card-3)}
.seg-bar i{display:block;height:100%;min-width:4px}
.seg-bar i:first-child{border-radius:7px 0 0 7px}.seg-bar i:last-child{border-radius:0 7px 7px 0}
.seg-legend{display:grid;gap:4px}
.seg-legend div{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:10px;font-size:13.5px}
.seg-legend i{width:10px;height:10px;border-radius:3px;flex:none}.seg-legend b{margin-left:auto;font-variant-numeric:tabular-nums}.seg-legend small{width:44px;text-align:right;color:var(--mu)}
#ftip{position:fixed;z-index:1100;pointer-events:none;padding:8px 11px;border-radius:10px;background:#0f1c30;color:#eef3fa;font-size:12px;line-height:1.45;white-space:pre-line;box-shadow:var(--sh-pop);opacity:0;transition:opacity .1s}
[data-theme=dark] #ftip{background:#22324d}
#ftip.on{opacity:1}
.mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mini-stats div{padding:12px 14px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.mini-stats small{display:block;color:var(--mu);font-weight:600}.mini-stats b{display:block;margin-top:2px;font-size:17px;color:var(--heading);font-variant-numeric:tabular-nums}
@media(max-width:800px){.mini-stats{grid-template-columns:1fr}}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 0 10px;font-size:12px;color:var(--mu)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut-legend{display:grid;gap:8px;flex:1;min-width:150px}
.donut-legend div{display:flex;align-items:center;gap:9px;font-size:13px}.donut-legend i{width:10px;height:10px;border-radius:3px}.donut-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.up-list .urow2{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 -12px;border-radius:12px;cursor:pointer}
@media(hover:hover){.up-list .urow2:hover{background:var(--hover)}}
.urow2 .d{display:grid;place-items:center;flex:none;width:44px;height:46px;border-radius:12px;background:var(--card-3);line-height:1.05;text-align:center}
.urow2 .d b{display:block;font-size:16px;color:var(--heading)}.urow2 .d small{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--mu)}
.urow2 .d.late{background:var(--red-soft)}.urow2 .d.late b,.urow2 .d.late small{color:var(--red-tx)}
.urow2 .d.tdy{background:var(--amb-soft)}.urow2 .d.tdy b,.urow2 .d.tdy small{color:var(--amb-tx)}
.urow2 .t{flex:1;min-width:0}.urow2 .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;color:var(--tx)}.urow2 .t small{color:var(--mu)}

/* ==========================================================================
   BOARD
   ========================================================================== */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .grow{flex:1}
.toolbar input,.toolbar select{width:auto;height:var(--ctl-sm);min-height:var(--ctl-sm);margin:0;padding:0 12px;font-size:13px;border-radius:var(--r-pill)}
.toolbar select{padding-right:32px;background-position:right 11px center}
.toolbar .q{position:relative;flex:0 1 260px}
.toolbar .q input{width:100%;padding-left:34px}
.toolbar .q svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round;pointer-events:none}
.seg2{display:inline-flex;gap:2px;padding:3px;background:var(--card-3);border-radius:var(--r-pill)}
.seg2 button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;border-radius:var(--r-pill);background:none;color:var(--mu);font-size:12.5px;font-weight:600}
.seg2 button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seg2 button.on{background:var(--card);color:var(--tx);box-shadow:var(--sh-1)}
.fpill{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-sm);padding:0 13px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);color:var(--tx-2);font-size:12.5px;font-weight:600}
.fpill.on{background:var(--primary-soft);border-color:transparent;color:var(--link)}
.cols{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:16px;align-items:start;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.col{display:flex;flex-direction:column;gap:10px;min-height:220px;padding:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);transition:outline-color .15s}
[data-theme=dark] .col{background:#0b1422}
.col.over{outline:2px dashed var(--amb);outline-offset:-2px}
.col h4{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 6px 2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.col h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mu-2);flex:none}
.col[data-s=in_progress] h4::before{background:var(--blu)}.col[data-s=review] h4::before{background:var(--vio)}.col[data-s=done] h4::before{background:var(--grn)}
.col h4 .ct{margin-right:auto;flex:1}
.col h4 span:not(.ct){display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:99px;background:var(--card);color:var(--mu);font-size:11.5px;font-weight:700;letter-spacing:0}
.col .empty{margin:6px 0;padding:26px 10px;border:1.5px dashed var(--line-2);border-radius:var(--r-md);font-size:12.5px}
@media(min-width:901px){.col{max-height:calc(100vh - 210px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
.task{position:relative;display:flex;flex-direction:column;gap:9px;margin:0;padding:13px 14px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s}
.task::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--line-2)}
.task.high::before{background:var(--red)}.task.medium::before{background:var(--amb)}.task.low::before{background:var(--blu)}
@media(hover:hover){.task:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-1px)}}
.task.dragging{opacity:.5}
.task .tk-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.task>b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:14px;line-height:1.35;color:var(--tx)}
.task .snip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--mu);font-size:12.5px;line-height:1.45}
.task .foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.task .avs{display:inline-flex;align-items:center}
.mini{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:-7px;border:2px solid var(--card);border-radius:50%;background:var(--primary-soft);color:var(--link);font-size:10px;font-weight:800}
.mini:first-child{margin-left:0}.mini.more{background:var(--card-3);color:var(--mu)}
.task .un{color:var(--mu);font-size:12px}
.task .sub{display:flex;gap:10px;color:var(--mu);font-size:11.5px;margin-top:-2px}
.task .sub span{display:inline-flex;align-items:center;gap:4px}
.task .sub svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.task .cprog{height:4px;border-radius:4px;background:var(--card-3);overflow:hidden}.task .cprog i{display:block;height:100%;background:var(--grn);border-radius:4px}
.task .rowact{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.task .go{flex:1;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card-2);color:var(--tx-2);font-size:12px;font-weight:600;white-space:nowrap}
@media(hover:hover){.task .go:hover{background:var(--primary-soft);border-color:transparent;color:var(--link)}}
.task .more{position:relative;flex:none;margin-left:auto}
.task .more .dots{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card-2);color:var(--mu);font-size:15px;line-height:1}
.task .more>.acts{display:none}
.task .more.open{z-index:6}.task .more.open>.acts{display:flex}
.acts{position:absolute;right:0;top:36px;z-index:5;flex-direction:column;gap:2px;min-width:160px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-pop)}
.acts button{display:flex;align-items:center;height:34px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--tx);font-size:13px;font-weight:500;text-align:left;white-space:nowrap}
.acts button[data-del]{color:var(--red)}
@media(hover:hover){.acts button:hover{background:var(--hover)}}
.col .showall{align-self:center;height:30px;padding:0 16px;border:1px dashed var(--line-2);border-radius:var(--r-pill);background:none;color:var(--mu);font-size:12px;font-weight:600}
/* list view */
.tlist td{cursor:pointer}.tlist td b{color:var(--tx)}
.tlist .pdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--blu)}.tlist .pdot.high{background:var(--red)}.tlist .pdot.medium{background:var(--amb)}
.tlist th[data-sort]{cursor:pointer;user-select:none}.tlist th[data-sort]:hover{color:var(--tx)}
.tlist th .ar{opacity:.6;margin-left:4px}

/* ==========================================================================
   TABLES & FILTER BARS
   ========================================================================== */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0}
th{padding:10px 12px;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mu);background:var(--card-2);border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{border-radius:12px 0 0 12px}th:last-child{border-radius:0 12px 12px 0}
td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr[data-az],tr[data-bz],tr[data-tk]{cursor:pointer}
tr[data-az] td:first-child,tr[data-az] td:nth-child(2){white-space:nowrap}
@media(hover:hover){tbody tr:hover td{background:var(--hover)}}
.fbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin-bottom:16px}
.fbar .seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--card-3);border-radius:var(--r-pill)}
.fbar .fc{height:30px;padding:0 14px;border:0;border-radius:var(--r-pill);background:none;color:var(--mu);font-size:12.5px;font-weight:600}
.fbar .fc.on{background:var(--card);color:var(--tx);box-shadow:var(--sh-1)}
[data-theme=dark] .fbar .fc.on{background:var(--card-2)}
.fbar .end{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fbar input{width:260px;height:var(--ctl-sm);min-height:var(--ctl-sm);margin:0;padding:0 14px;border-radius:var(--r-pill);font-size:13px}

/* ==========================================================================
   CALENDAR
   ========================================================================== */
.cal-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cal-h h3{flex:1;min-width:150px;margin:0 6px;font-size:18px}
.cal-h select{width:auto;min-width:170px;height:var(--ctl-sm);min-height:var(--ctl-sm);margin:0;padding:0 34px 0 14px;font-size:13px;border-radius:var(--r-pill)}
.cal-h .btn[data-cal=prev],.cal-h .btn[data-cal=next]{width:var(--ctl-sm);padding:0;font-size:18px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{padding:6px 8px;color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cd{display:flex;flex-direction:column;gap:6px;min-height:92px;padding:8px 9px;overflow:hidden;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:box-shadow .12s,border-color .12s}
.cd.off{background:transparent;border-style:dashed;opacity:.5;cursor:default}
.cd .ch{display:flex;align-items:center;justify-content:space-between;gap:4px}
.cd b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--tx-2);font-size:12px}
.cd.tdy{background:var(--amb-soft);border-color:color-mix(in srgb,var(--amb) 50%,transparent)}.cd.tdy b{background:var(--amb);color:#1d1203}
.cd.sel{border-color:var(--link);box-shadow:var(--ring)}
.cd.has:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.cn{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--card);color:var(--tx-2);font-size:11px;font-weight:700;line-height:20px;text-align:center}.cn.late{background:var(--red-soft);color:var(--red-tx)}
.dots{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.dots em{font-style:normal;font-size:10px;font-weight:700;color:var(--mu)}
.dt{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--blu);border:0}
.dt.hi{background:var(--amb)}.dt.late{background:var(--red)}.dt.done{background:var(--grn)}
.cleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px}.cleg span{display:inline-flex;align-items:center;gap:6px}
.cday h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cday .frow.cr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;padding:11px 13px;margin-bottom:6px;background:var(--card-2);border:1px solid var(--line);border-radius:12px;cursor:pointer}
@media(hover:hover){.cday .frow.cr:hover{border-color:var(--line-2);background:var(--hover)}}
.cday .frow.cr b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cday .frow.cr small{grid-column:2/-1;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   DIALOGS
   ========================================================================== */
dialog{width:min(480px,94vw);max-height:calc(100dvh - 32px);padding:26px;overflow-y:auto;overscroll-behavior:contain;background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-pop)}
dialog[open]{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
dialog::backdrop{background:rgba(3,14,30,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog h3{margin-top:0;font-size:19px}
#dd{width:min(720px,96vw)}#ad,#bd{width:min(940px,97vw)}#sd{width:min(560px,96vw)}
.dh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.dh>div:first-child{min-width:0;flex:1}.dh h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;line-height:1.3}
.dlg-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px}
.dlg-actions .btn{min-width:110px}
.bar2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.bar2 [data-ax=delete],.bar2 #adel,.bar2 #bdel,.bar2 [data-bx=delete]{margin-left:auto}
.sec{margin:24px 0 12px;padding:0 0 8px;background:none;color:var(--heading);border-bottom:1px solid var(--line);border-radius:0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.it th{background:var(--card-2)}.it td{padding:4px 5px;border-bottom:0}.it input{margin:0;min-height:36px;padding:6px 9px;min-width:70px;font-size:13.5px}
.it td:nth-child(2) input{min-width:170px}.it td:nth-child(7) input{min-width:110px}.lt{text-align:center;white-space:nowrap;font-weight:700}
.tot{width:min(320px,100%);margin:12px 0 0 auto}.tot div{display:flex;justify-content:space-between;padding:5px 0;color:var(--tx-2)}
.tot .big{margin-top:4px;padding-top:9px;border-top:2px solid var(--line-2);color:var(--heading);font-size:16px}
.fxn{margin-top:2px;color:var(--mu);font-size:12px;text-align:right}
.words{margin:12px 0;padding:11px 14px;border-radius:var(--r-md);background:var(--card-2);font-size:13px}.words small{display:block;font-weight:700;color:var(--heading)}
.trail{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.trail div{padding:12px 14px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.trail small{display:block;color:var(--mu)}.trail b{display:block}.trail span{color:var(--mu);font-size:12px}
.rej{margin-top:10px;padding:11px 14px;border-radius:var(--r-md);background:var(--red-soft);color:var(--red-tx)}
.tl{position:relative;padding-left:4px}.tl>div{position:relative;display:flex;gap:12px;padding:7px 0}
.tl>div:not(:last-child)::after{content:"";position:absolute;left:4.5px;top:22px;bottom:-8px;width:1px;background:var(--line-2)}
.tl i{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--amb);box-shadow:0 0 0 3px var(--amb-soft)}.tl small{display:block;color:var(--mu)}
details{margin-top:12px}summary{cursor:pointer;font-weight:600;color:var(--link)}
.amt{margin-bottom:14px;padding:20px 22px;border-radius:var(--r-lg);color:#fff;background:radial-gradient(400px 200px at 100% 0,rgba(248,154,32,.3),transparent 60%),linear-gradient(135deg,#0d4377,#042c53)}
.amt small{display:block;color:#a8c0dd;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.amt b{display:block;font-size:32px;line-height:1.25}.amt span{color:var(--amb);font-size:13px}
.amt .fx{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);font-weight:700;font-size:15px}
.amt .fx small{display:inline;margin-left:8px;color:#a8c0dd;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.kv{padding:11px 14px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}.kv small{display:block;color:var(--mu)}.kv b{display:block;word-break:break-word}
/* task detail */
.task-desc{margin:12px 0 16px;padding:14px 16px;border-radius:var(--r-md);background:var(--card-2);white-space:pre-wrap;color:var(--tx-2)}
.thread{max-height:280px;overflow:auto;margin:8px 0 12px;padding:14px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.msg{max-width:85%;margin-bottom:12px}.msg small{color:var(--mu)}
.msg p{margin:3px 0 0;padding:9px 13px;border-radius:14px 14px 14px 4px;background:var(--card);border:1px solid var(--line);white-space:pre-wrap}
.msg.mine{margin-left:auto;text-align:right}.msg.mine p{border-radius:14px 14px 4px 14px;background:var(--primary);border-color:transparent;color:#fff;text-align:left}
.comp{display:flex;align-items:flex-end;gap:10px}.comp textarea{flex:1;min-width:0;margin:0}.comp .btn{flex:none}
.fsec{margin:16px 0 8px}.fh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.fh h4{margin:0}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;margin-bottom:6px;border-radius:12px;background:var(--card-2);border:1px solid var(--line)}
.frow a{font-weight:600;word-break:break-all}.frow small{flex:1;min-width:140px;color:var(--mu)}
.frow button{height:28px;padding:0 12px;border:1px solid color-mix(in srgb,var(--red) 35%,transparent);border-radius:var(--r-pill);background:none;color:var(--red);font-size:12px;font-weight:600}
.frow[data-open]{cursor:pointer}
/* checklist */
.checks{margin:6px 0 4px}
.ckl-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.ckl-head h4{margin:0}.ckl-head .bar{max-width:160px}.ckl-head small{color:var(--mu)}
.ckl{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:10px}
@media(hover:hover){.ckl:hover{background:var(--hover)}.ckl:hover .ckx{opacity:1}}
.ckl span{flex:1;min-width:0;font-size:13.5px}.ckl.done span{color:var(--mu);text-decoration:line-through}
.ckl small{color:var(--mu);font-size:11px}
.ckx{opacity:0;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--mu);font-size:16px;line-height:1}
@media(hover:none){.ckx{opacity:1}}
.ckadd{display:flex;gap:8px;margin-top:6px}.ckadd input{margin:0;height:var(--ctl-sm);min-height:var(--ctl-sm)}.ckadd .btn{height:var(--ctl-sm);min-height:var(--ctl-sm)}

/* ==========================================================================
   TEAM, SETTINGS, SECURITY
   ========================================================================== */
.urow .n{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.urow .n b{color:var(--tx)}
.ua{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.tabs{display:flex;gap:4px;margin:-4px 0 18px;padding:4px;background:var(--card-3);border-radius:var(--r-pill);width:max-content;max-width:100%;overflow-x:auto}
.tabs button{height:32px;padding:0 16px;border:0;border-radius:var(--r-pill);background:none;color:var(--mu);font-size:13px;font-weight:600;white-space:nowrap}
.tabs button.on{background:var(--card);color:var(--tx);box-shadow:var(--sh-1)}
.opt{display:flex;gap:14px;align-items:flex-start;padding:16px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-2)}
.opt .oi{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--link)}
.opt .oi svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.opt .ob{flex:1;min-width:0}.opt .ob b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--tx)}.opt .ob p{margin:3px 0 0;color:var(--mu);font-size:13px}
.opt .oa{flex:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.opt.on{border-color:color-mix(in srgb,var(--grn) 40%,transparent)}.opt.on .oi{background:var(--grn-soft);color:var(--grn)}
.radio-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 14px}
.radio-cards label{display:flex;flex-direction:column;gap:4px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card-2);cursor:pointer;font-weight:500}
.radio-cards label b{display:flex;align-items:center;gap:8px;color:var(--tx);font-size:13.5px}.radio-cards label small{color:var(--mu)}
.radio-cards label:has(input:checked){border-color:var(--link);background:var(--primary-soft)}
.qr{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:14px 0}
.qr .qrbox{flex:none;padding:10px;border-radius:16px;background:#fff;border:1px solid var(--line);line-height:0}
.qr .qrbox svg{width:180px;height:180px}
.qr .qrside{flex:1;min-width:200px}
.secret{display:flex;align-items:center;gap:8px;margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:var(--card-2);border:1px dashed var(--line-2);font:700 14px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;word-break:break-all}
.secret button{margin-left:auto;flex:none}
.steps{margin:0;padding-left:20px;color:var(--tx-2);font-size:13.5px}.steps li{margin-bottom:6px}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0;padding:14px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.codes code{font:700 14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;letter-spacing:.08em;color:var(--tx)}
.loginlog td{font-size:12.5px}.loginlog .okd{color:var(--grn)}.loginlog .bad{color:var(--red)}
.badge2{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--grn-tx)}
.badge2.off{color:var(--mu)}.badge2 svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   TARGET COUNTER
   ========================================================================== */
.target-panel{padding:20px}
.targets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:14px}
.target-card{padding:16px;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.target-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.target-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--amb-2)}
.target-head h3{margin:3px 0 0;font-size:15px;line-height:1.3}
.target-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin-bottom:12px}
.target-counts>div{padding:8px 9px;border-radius:10px;background:var(--card)}
.target-counts small{display:block;margin-bottom:2px;color:var(--mu);font-size:9px;font-weight:800;letter-spacing:.07em}
.target-counts b{display:block;font-size:16px;line-height:1.2;color:var(--heading)}
.target-counts .money{background:var(--amb-soft)}.target-counts .money b{font-size:12px;color:var(--amb-tx)}
.target-progress-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;color:var(--mu);font-size:12px}.target-progress-top b{color:var(--heading)}
.target-track{height:8px;border-radius:99px;background:var(--card-3);overflow:hidden}.target-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blu),var(--amb));transition:width .35s ease}
.target-caption{margin-top:6px;color:var(--mu);font-size:12px}
.target-money{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--mu);font-size:12px}
.target-money span{display:flex;flex-direction:column;gap:2px}.target-money b{color:var(--heading)}
.target-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.target-actions .btn{height:32px;min-height:32px;padding:0 13px;font-size:12px}
.target-state{padding:5px 10px;border-radius:20px;background:var(--blu-soft);color:var(--blu-tx);font-size:11px;font-weight:700;white-space:nowrap}
.target-state.met{background:var(--grn-soft);color:var(--grn-tx)}.target-state.late,.target-state.soon{background:var(--amb-soft);color:var(--amb-tx)}.target-state.miss{background:var(--red-soft);color:var(--red-tx)}
.target-deadline{margin-top:10px;color:var(--mu);font-size:12px}.target-deadline b{color:var(--heading)}
.target-summary-box{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blu)}
.target-summary-box.met{border-left-color:var(--grn)}.target-summary-box.late{border-left-color:var(--amb)}.target-summary-box.miss{border-left-color:var(--red)}
.tsb-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.tsb-head b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--heading)}.tsb-head span{font-size:13px;line-height:1.4}
.target-summary-box dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:0}
.target-summary-box dt{color:var(--mu);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.target-summary-box dd{margin:1px 0 0;font-size:12.5px;font-weight:600}
.rc-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.rc-chip{max-width:100%;padding:7px 13px;border:1px solid var(--line-2);border-radius:99px;background:var(--card);color:var(--mu);font-size:12px;font-weight:600;text-align:left}
.rc-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.rc-link{padding:6px 4px;border:0;background:none;color:var(--link);font-size:12px;font-weight:700;text-decoration:underline}
.rc-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:6px;color:var(--mu);font-size:12px}.rc-legend span{display:flex;align-items:center;gap:6px}
.rc-legend .lg{display:inline-block;width:14px;height:10px;border-radius:3px}.lg.bar{background:var(--blu)}.lg.ghost{border:1.5px dashed var(--blu);background:color-mix(in srgb,var(--blu) 10%,transparent)}.lg.mark{width:16px;height:0;border-top:2.5px solid var(--amb);border-radius:0}
#revchart{width:100%;overflow-x:auto}#revchart svg{display:block;max-width:none}
.rc-grid{stroke:var(--line);stroke-width:1}.rc-ax{fill:var(--mu);font-size:11px;font-family:var(--font)}.rc-name{fill:var(--tx);font-weight:600}.rc-sub{font-size:10.5px}
.rc-bar{fill:var(--blu)}.rc-bar.hit{fill:var(--grn)}.rc-ghost{fill:color-mix(in srgb,var(--blu) 8%,transparent);stroke:var(--blu);stroke-width:1.5;stroke-dasharray:4 3}
.rc-mark{stroke:var(--amb);stroke-width:2.5;stroke-linecap:round}.rc-dia{fill:var(--amb)}.rc-val{fill:var(--tx);font-size:12px;font-weight:700;font-family:var(--font)}

/* ==========================================================================
   COMMAND PALETTE, TOASTS, SHORTCUTS
   ========================================================================== */
#cp{width:min(640px,94vw);padding:0;overflow:hidden;margin-top:12vh}
#cp[open]{display:flex;flex-direction:column;max-height:70vh}
.cp-in{display:flex;align-items:center;gap:10px;padding:6px 16px;border-bottom:1px solid var(--line)}
.cp-in svg{width:19px;height:19px;fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round}
.cp-in input{margin:0;border:0;box-shadow:none!important;background:transparent!important;font-size:16px;height:52px;padding:0}
.cp-list{overflow:auto;padding:8px}
.cp-g{padding:10px 10px 4px;color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cp-it{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--tx);text-align:left;font-size:13.5px}
.cp-it .ci{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:var(--card-3);color:var(--mu)}
.cp-it .ci svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cp-it .ct{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-it small{color:var(--mu);flex:none}
.cp-it.on{background:var(--primary-soft)}.cp-it.on .ci{background:var(--primary);color:#fff}
.cp-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);color:var(--mu);font-size:11.5px}
.cp-foot span{display:inline-flex;align-items:center;gap:6px}
#toasts{position:fixed;left:50%;bottom:24px;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);pointer-events:none;width:min(460px,92vw)}
.toast{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 14px;border-radius:14px;background:#0f1c30;color:#eef3fa;box-shadow:var(--sh-pop);font-size:13.5px;pointer-events:auto;animation:tin .22s ease-out;white-space:pre-line}
[data-theme=dark] .toast{background:#1d2c45;border:1px solid var(--line-2)}
.toast i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--grn);color:#fff;font-style:normal;font-size:13px;font-weight:800}
.toast.err i{background:var(--red)}.toast.info i{background:var(--blu)}
.toast span{flex:1}.toast button{flex:none;border:0;background:none;color:#9fb3cc;font-size:16px;line-height:1;padding:0 2px}
.toast.out{opacity:0;transform:translateY(6px);transition:all .2s}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kb-list{display:grid;gap:10px}.kb-list div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px}.kb-list span{display:flex;gap:4px}

/* ==========================================================================
   TUTOR ADMINISTRATION + TUTOR PORTAL
   ========================================================================== */
.mod-badge{margin:-6px 8px 12px;padding:7px 12px;border-radius:10px;background:rgba(248,154,32,.12);border:1px solid rgba(248,154,32,.25);color:#ffc27a;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
@media(min-width:801px){body.sidebar-collapsed .mod-badge{display:none}}
.stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1700px){.stats.six{grid-template-columns:repeat(6,minmax(0,1fr))}}
.stats.six .stat>span{padding-right:46px}
@media(max-width:800px){.stats.six .stat>span{padding-right:0}.stats.six .stat b{font-size:22px;word-break:break-word}}
@media(max-width:800px){.stats.six{grid-template-columns:1fr 1fr}}
button.stat{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
@media(hover:hover){button.stat:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-1px)}}
button.stat:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.stats.six .stat b{font-size:26px}
.pcell{display:flex;align-items:center;gap:10px;min-width:0}.pcell b{display:block;color:var(--tx);font-size:13.5px}.pcell small{display:block;color:var(--mu);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.pcell .av{width:34px;height:34px;border-radius:11px;font-size:12px}
.row.clickable{cursor:pointer;margin:0 -10px;padding:11px 10px;border-radius:12px;border-bottom-color:transparent}
@media(hover:hover){.row.clickable:hover{background:var(--hover)}}
.stars{color:var(--amb);letter-spacing:1px;white-space:nowrap}.stars i{font-style:normal;color:var(--line-2)}
.review{padding:14px 0;border-bottom:1px solid var(--line)}.review:last-child{border-bottom:0}
.review>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.review p{margin:6px 0 4px;color:var(--tx-2);white-space:pre-wrap}
.btn.sm,a.btn.sm{height:30px;min-height:30px;padding:0 11px;font-size:12px;margin-left:4px}
.upl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}.upl select,.upl input{width:auto;margin:0;min-height:var(--ctl-sm);height:var(--ctl-sm)}.upl input[type=file]{flex:1;min-width:200px;height:auto;padding:4px 8px}
.upl .btn{height:var(--ctl-sm);min-height:var(--ctl-sm)}
.gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(800px 500px at 0 0,rgba(13,67,119,.18),transparent 60%),var(--bg)}
.gate-card{width:min(420px,100%);padding:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-pop)}
.gate-card .lg-mobile{width:180px;margin-bottom:22px}.gate-card h2{margin:0 0 6px}.gate-card .lead{color:var(--mu);margin:0 0 22px}
[data-theme=light] .gate-card .lg-mobile.dk,[data-theme=dark] .gate-card .lg-mobile.lt,[data-theme=light] .apply-head .lg-mobile.dk,[data-theme=dark] .apply-head .lg-mobile.lt{display:none!important}
.kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amb-2)}
.apply-page{min-height:100vh;min-height:100dvh;padding:28px 16px 60px;background:radial-gradient(900px 500px at 100% -10%,rgba(248,154,32,.14),transparent 60%),radial-gradient(800px 500px at -10% 0,rgba(13,67,119,.16),transparent 60%),var(--bg)}
.apply-wrap{width:min(760px,100%);margin:0 auto}.apply-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.apply-page .panel{padding:30px}.apply-page .lead{color:var(--mu);margin:0 0 22px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.lg-card .lg-mobile + .lg-mobile + .kicker{margin-top:0}

/* tutor tasks shown on the team board (read-only) */
.task.tutor-task{border-style:dashed;background:color-mix(in srgb,var(--blu-soft) 45%,var(--card));cursor:pointer}
.task.tutor-task .chip.info{gap:5px}.task.tutor-task .chip .mini{width:16px;height:16px;border:0;margin:0 0 0 -4px}
.tt-open{font-size:11.5px;font-weight:700;color:var(--link)}

/* profile photos */
img.avi{display:block;object-fit:cover;padding:0;background:var(--card-3)}
.side-avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.side-avatar:has(img){background:none;padding:0;overflow:hidden}
.photo-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.photo-card .av{width:96px;height:96px;border-radius:24px;font-size:28px;box-shadow:0 0 0 4px var(--card),0 0 0 5px var(--line)}
.photo-card .pc-b{flex:1;min-width:200px}.photo-card .pc-b b{font-size:16px;color:var(--tx)}.photo-card .pc-b p{margin:4px 0 10px;color:var(--mu);font-size:13px}
#uiphoto{width:min(420px,94vw)}.ph-stage{display:grid;place-items:center;margin:8px 0 12px}
.ph-stage canvas{width:min(320px,80vw);height:auto;aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;background:var(--card-3);box-shadow:0 0 0 4px var(--card),0 0 0 6px var(--line-2)}
.ph-stage canvas:active{cursor:grabbing}.ph-zoom input{padding:0;min-height:0;margin:8px 0;accent-color:var(--amb)}.ph-q{min-height:20px;font-size:12.5px}
.task .mini.avi{width:24px;height:24px}
.av.av-lg{width:56px;height:56px;border-radius:16px;font-size:18px}

/* money: dollars + home currency */
.m2{display:inline-flex;flex-direction:column;align-items:inherit;line-height:1.2}
.stat .m2 b,.m2 b{order:0}.stat .m2 small,.m2 small{order:1}.m2 small{color:var(--mu);font-size:11.5px;font-weight:600;margin-top:2px}
td .m2{align-items:flex-end}.stat .m2 b{font-size:inherit}.stat .m2 small{font-size:12.5px}
.row .m2{align-items:flex-end;margin-left:auto}
/* row action menu */
.rmenu{display:inline-block;position:relative;vertical-align:middle}
.rm-btn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--mu);font-size:16px;line-height:1;letter-spacing:1px}
[data-theme=dark] .rm-btn{background:var(--card-2)}
@media(hover:hover){.rm-btn:hover{background:var(--hover-2);color:var(--tx);border-color:var(--line-2)}}
.rm-btn[aria-expanded=true]{background:var(--hover-2);color:var(--tx);border-color:var(--line-2)}
.rm-btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.rpop{position:fixed;z-index:1200;min-width:190px;max-width:260px}
.rpop a{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 12px;border-radius:10px;color:var(--tx);font-size:13.5px;font-weight:500;text-decoration:none}
.rpop .danger{color:var(--red)!important}.rpop hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
@media(hover:hover){.rpop a:hover{background:var(--hover)}.rpop .danger:hover{background:var(--danger-hover)!important}}
.rpop button:focus-visible,.rpop a:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.ract{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap}
/* grouped side menu */
.side-sec:first-child{margin-top:4px}
/* task board (tutors) */
.task .tk-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.task .who{font-size:11.5px;color:var(--mu)}
.thread2{max-height:300px;overflow:auto;margin:8px 0 12px;padding:12px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.thread2 .msg.them p{background:var(--card)}
/* settings page */
.set-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}
.set-nav{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.set-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--tx-2);font-weight:600;font-size:13.5px;text-decoration:none}
.set-nav a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--mu)}
@media(hover:hover){.set-nav a:hover{background:var(--hover);color:var(--tx)}}
.set-nav a.on{background:var(--primary-soft);color:var(--link)}.set-nav a.on svg{color:var(--link)}
.set-sec{scroll-margin-top:90px}
.pay-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 16px}
.pay-cards label{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card-2);cursor:pointer;font-weight:600;color:var(--tx)}
.pay-cards label small{color:var(--mu);font-weight:500}
.pay-cards label .pi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--primary-soft);color:var(--link)}
.pay-cards label .pi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pay-cards input{position:absolute;opacity:0;pointer-events:none}
.pay-cards label:has(input:checked){border-color:var(--link);background:var(--primary-soft)}
.pay-cards label:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}
@media(hover:hover){.pay-cards label:hover{border-color:var(--line-2)}}
.fx-preview{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;margin:4px 0 14px;border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.fx-preview b{font-size:20px;color:var(--heading)}.fx-preview small{color:var(--mu)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.switch:last-child{border-bottom:0}
.switch b{display:block;color:var(--tx);font-size:13.5px}.switch small{color:var(--mu)}
.tgl{position:relative;flex:none;width:44px;height:26px}.tgl input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.tgl i{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .15s}.tgl i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.tgl input:checked+i{background:var(--grn)}.tgl input:checked+i::after{transform:translateX(18px)}.tgl input:focus-visible+i{outline:2px solid var(--link);outline-offset:2px}
@media(max-width:1000px){.set-grid{grid-template-columns:1fr}.set-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}.set-nav a{white-space:nowrap}}
@media(max-width:800px){.pay-cards{grid-template-columns:1fr 1fr}}
/* tables -> cards on phones */
@media(max-width:800px){
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt tr{margin:0 0 10px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card-2)}
  table.rt td{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:6px 0!important;border:0;text-align:right!important;max-width:none!important;white-space:normal!important;min-height:0}
  table.rt td::before{content:attr(data-label);flex:none;max-width:42%;padding-top:2px;color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:left}
  table.rt td[data-label=""]::before,table.rt td:first-child::before{display:none}
  table.rt td:first-child{display:block;text-align:left!important;padding-bottom:9px!important;margin-bottom:3px;border-bottom:1px solid var(--line)}
  table.rt td[data-label=""]{justify-content:flex-end}
  table.rt td:empty{display:none}
  table.rt tbody tr:hover td{background:transparent}
  .tw:has(table.rt){overflow:visible}
  .panel:has(> .tw > table.rt),.panel:has(> div > .tw > table.rt){background:transparent;border:0;box-shadow:none;padding:0}
  .panel:has(> .tw > table.rt) .fbar,.panel:has(> div > .tw > table.rt) .fbar{margin-bottom:12px}
  .pcell small{max-width:220px}
}

/* ==========================================================================
   INTERACTION STATES (hover / focus / pressed / disabled) — one place, both themes.
   Everything uses theme variables, so dark mode gets its own tuned colours.
   ========================================================================== */
:root{--hover-2:#e8eef7;--press:#dfe7f2;--danger-hover:#fbe3e2}
[data-theme=dark]{--hover-2:#1c2b44;--press:#22344f;--danger-hover:#3d1b1c}
a{text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px}
@media(hover:hover){
  a:hover{color:color-mix(in srgb,var(--link) 80%,var(--tx))}
  .btn.ghost.danger:hover,.btn.ghost[data-ax=delete]:hover,#adel:hover,#bdel:hover,.btn.ghost[data-bx=delete]:hover{background:var(--danger-hover);border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
  .btn.soft:hover{filter:none;background:color-mix(in srgb,var(--primary-soft) 70%,var(--primary) 18%)}
  .btn.amb:hover{filter:none;background:var(--amb-2)}
  .fbar .fc:not(.on):hover,.seg2 button:not(.on):hover,.tabs button:not(.on):hover,.mf-tabs button:not(.on):hover{background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--tx)}
  .fpill:not(.on):hover{background:var(--hover);border-color:var(--mu-2);color:var(--tx)}.fpill.on:hover{filter:brightness(1.05)}
  .rc-chip:not(.on):hover{background:var(--hover);border-color:var(--mu-2);color:var(--tx)}.rc-chip.on:hover{filter:brightness(1.08)}
  .rc-link:hover,.linkbtn:not([disabled]):hover{color:color-mix(in srgb,var(--link) 80%,var(--tx))}
  .cp-it:not(.on):hover{background:var(--hover)}
  .col .showall:hover{background:var(--card);border-color:var(--mu-2);color:var(--tx)}
  .task .more .dots:hover,.task .more.open .dots{background:var(--hover-2);color:var(--tx)}
  .frow button:hover{background:var(--danger-hover)}
  .ckx:hover{background:var(--danger-hover);color:var(--red)}
  .bref:hover{filter:brightness(1.08);text-decoration:underline}
  .pw-eye:hover{background:var(--hover);color:var(--tx)}
  .radio-cards label:hover{border-color:var(--line-2);background:var(--hover)}
  .radio-cards label:has(input:checked):hover{background:var(--primary-soft)}
  .opt:hover{border-color:var(--line-2)}
  .seg-legend div:hover{background:var(--hover)}
  .cd:not(.off):hover{border-color:var(--line-2)}
  .row.urow:hover{background:transparent}
  .target-card:hover{border-color:var(--line-2)}
  .kv:hover,.trail div:hover{border-color:var(--line-2)}
  .navlink:hover{background:rgba(255,255,255,.06);color:#fff}
  .theme-sw:hover{background:var(--hover)}
}
/* pressed */
.btn.ghost:active,.icon-btn:active,.search-btn:active,.fpill:active,.rc-chip:active,.task .go:active,.acts button:active,.menu button:active,.cp-it:active{background:var(--press)}
.task:active{transform:none}
/* keyboard focus: visible ring on every control, tuned per theme */
.btn:focus-visible,.icon-btn:focus-visible,.search-btn:focus-visible,.fc:focus-visible,.seg2 button:focus-visible,.tabs button:focus-visible,.mf-tabs button:focus-visible,.fpill:focus-visible,.rc-chip:focus-visible,.task:focus-visible,.cp-it:focus-visible,.menu button:focus-visible,.linkbtn:focus-visible,.navlink:focus-visible,aside nav button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
aside :focus-visible{outline-color:var(--amb)!important}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* disabled never lights up */
.btn[disabled],.btn[disabled]:hover,.linkbtn[disabled]{filter:none!important;transform:none!important;box-shadow:none}
.btn.ghost[disabled]:hover{background:var(--card);border-color:var(--line-2)}
[data-theme=dark] .btn.ghost[disabled]:hover{background:var(--card-2)}
/* browser autofill: keep our colours instead of Chrome's yellow / white */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--tx);caret-color:var(--tx);-webkit-box-shadow:0 0 0 1000px var(--card) inset;transition:background-color 9999s}
[data-theme=dark] input:-webkit-autofill,[data-theme=dark] input:-webkit-autofill:hover,[data-theme=dark] input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--card-2) inset}
input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--card) inset,var(--ring)}
/* file picker button */
input[type=file]::file-selector-button{margin-right:12px;padding:6px 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card-2);color:var(--tx);font:600 12.5px var(--font);cursor:pointer}
@media(hover:hover){input[type=file]::file-selector-button:hover{background:var(--hover-2)}}
/* native select dropdown list in dark mode */
[data-theme=dark] option,[data-theme=dark] optgroup{background:var(--card-2);color:var(--tx)}
/* sidebar link to another module */
.navlink{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;margin:2px 0;padding:8px 12px;border-radius:12px;color:var(--side-tx);font-size:13.5px;font-weight:500;text-decoration:none}
.navlink .nav-ext{font-size:12px;opacity:.6}
@media(min-width:801px){body.sidebar-collapsed .navlink{justify-content:center;padding:8px 0}body.sidebar-collapsed .navlink .nav-label,body.sidebar-collapsed .navlink .nav-ext{display:none}}
/* table rows that open something */
tbody tr[data-az]:focus-within td,tbody tr[data-bz]:focus-within td,tbody tr[data-tk]:focus-within td{background:var(--hover)}
@media(hover:hover){[data-theme=dark] tbody tr:hover td{background:var(--hover-2)}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){.search-btn{width:auto}.search-btn span,.search-btn .kbd{display:none}.three{grid-template-columns:1fr}}
@media(max-width:800px){
  body.nav-open{overflow:hidden}
  #app.on{display:block}
  aside{position:fixed;top:0;left:0;bottom:0;height:auto;width:min(290px,84vw);z-index:40;border-radius:0 22px 22px 0;transform:translateX(-102%);visibility:hidden;padding:calc(18px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));transition:transform .25s ease,visibility 0s .25s}
  body.nav-open aside{transform:none;visibility:visible;box-shadow:16px 0 50px rgba(0,0,0,.35);transition:transform .25s ease,visibility 0s}
  .side-collapse,.brand-mark{display:none!important}
  #scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(3,14,30,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
  body.nav-open #scrim{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
  main{padding:0 max(14px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .top{margin:0 calc(-1*max(14px,env(safe-area-inset-right))) 16px calc(-1*max(14px,env(safe-area-inset-left)));padding:calc(10px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));gap:8px;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
  .burger{display:inline-grid}
  .top h2{font-size:18px}.top .sub{display:none}
  #nt{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;height:50px;padding:0 22px;box-shadow:0 10px 28px -6px rgba(248,154,32,.7)}
  #notes{left:12px;right:12px;top:calc(64px + env(safe-area-inset-top));width:auto}
  .two,.three{grid-template-columns:1fr}
  .stats,.target-summary{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:14px 16px}.stat b{font-size:24px}.stat .ic{display:none}
  .panel{padding:16px;border-radius:16px}
  .cols{grid-template-columns:repeat(4,minmax(260px,84vw));scroll-snap-type:x mandatory;margin-right:calc(-1*max(14px,env(safe-area-inset-right)));padding-right:14px}.col{scroll-snap-align:start}
  .toolbar .q{flex:1 1 100%}.toolbar .grow{display:none}
  .fbar{flex-direction:column;align-items:stretch}.fbar .end{display:grid;grid-template-columns:1fr 1fr}.fbar input{grid-column:1/-1;width:100%}.fbar .btn{width:100%}
  input,select,textarea{font-size:16px}
  .g2,.g3{grid-template-columns:1fr;gap:0}
  .radio-cards{grid-template-columns:1fr}
  dialog[open]{margin:auto auto 0;width:100vw!important;max-width:100vw;max-height:calc(100dvh - 12px - env(safe-area-inset-top))!important;border-radius:24px 24px 0 0;padding:20px calc(18px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));animation:sheet .22s ease-out}
  #cp[open]{margin:10px auto auto;border-radius:18px;width:calc(100vw - 20px)!important;max-height:80dvh!important;padding:0;animation:pop .18s ease-out}
  @keyframes sheet{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
  .dlg-actions,.bar2{display:grid;grid-template-columns:1fr 1fr}.dlg-actions .btn,.bar2 .btn,.bar2 a.btn{width:100%;min-width:0}
  .bar2 [data-ax=delete],.bar2 #adel,.bar2 #bdel,.bar2 [data-bx=delete]{margin-left:0;grid-column:1/-1}
  .thread{max-height:38dvh}.msg{max-width:92%}
  .row{flex-wrap:wrap}.urow{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px 12px;align-items:start}.urow .ua{grid-column:2;justify-content:flex-start}
  .cal{gap:3px}.cd{min-height:58px;padding:5px 4px;gap:4px;align-items:center;border-radius:10px}.cd .ch{justify-content:center;width:100%}.cn{display:none}
  .dots{justify-content:center;gap:3px}.dt{width:7px;height:7px}.dots em{display:none}.dots .dt:nth-child(n+5){display:none}
  .cday .frow.cr{grid-template-columns:auto minmax(0,1fr) auto}.cday .frow.cr .chip:nth-of-type(1){display:none}
  .cal-h h3{flex:1 1 100%;order:-1;margin:0 0 4px}.cal-h select{flex:1 1 100%;order:9}
  .targets-grid{grid-template-columns:1fr}.target-money{flex-direction:column}.target-summary-box dl{grid-template-columns:1fr}
  .opt{flex-wrap:wrap}.opt .oa{width:100%}.opt .oa .btn{flex:1}
  .otp input{height:50px;font-size:21px}
}
@media(pointer:coarse){.btn,a.btn{height:44px;min-height:44px}.dh .btn,.ph .btn,.fbar .btn,.cal-h .btn,.ua .btn{height:40px;min-height:40px}.icon-btn{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{aside,.top,#notes,#toasts{display:none!important}main{padding:0}.panel{box-shadow:none}}