/* Layout: Al Huda shell (white MENU sidebar + light work area + title block) with EOT teal brand; prototype bar on top */
:root{
  --bg:#f3f6f5;--card:#ffffff;--fg:#22302e;--mut:#66756f;--line:#e2e8e6;--hover:#eef4f3;
  --brand:#00635D;--brand-ink:#ffffff;--brand-soft:#e1f0ee;
  --ok:#1f7a45;--okb:#e2f4e9;--warn:#9a5b00;--warnb:#fdf0d9;--bad:#b3261e;--badb:#fbe8e6;--info:#2b5ea7;--infob:#e5eefa;--neu:#5b6865;--neub:#edf1f0;
  --demo:#3d2f7a;--demob:#efeafd;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--ar:"Amiri","Traditional Arabic",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101615;--card:#18201f;--fg:#e1eae8;--mut:#93a39f;--line:#2a3533;--hover:#1f2a28;
  --brand:#3fb5aa;--brand-ink:#08201e;--brand-soft:#173230;
  --ok:#7fd49b;--okb:#14291c;--warn:#f2b25e;--warnb:#33260f;--bad:#ff8f86;--badb:#3a1b18;--info:#94b8ff;--infob:#17233a;--neu:#a9b6b3;--neub:#222b2a;--demo:#c7b8ff;--demob:#251f3d;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101615;--card:#18201f;--fg:#e1eae8;--mut:#93a39f;--line:#2a3533;--hover:#1f2a28;
  --brand:#3fb5aa;--brand-ink:#08201e;--brand-soft:#173230;
  --ok:#7fd49b;--okb:#14291c;--warn:#f2b25e;--warnb:#33260f;--bad:#ff8f86;--badb:#3a1b18;--info:#94b8ff;--infob:#17233a;--neu:#a9b6b3;--neub:#222b2a;--demo:#c7b8ff;--demob:#251f3d;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}.sm{font-size:12px}
/* prototype bar */
.demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--demob);color:var(--demo);font-size:12.5px;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line)}
.demo b{letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.demo input[type=range]{width:160px;accent-color:var(--demo)}
.demo .lnk{background:none;border:1px solid currentColor;border-radius:20px;padding:1px 10px;color:var(--demo)}
.shell{display:flex;min-height:calc(100% - 34px)}
/* sidebar */
.sb{width:232px;flex:none;background:var(--card);border-right:1px solid var(--line);padding:14px 10px 20px;position:sticky;top:0;height:100vh;overflow:auto;z-index:30}
.brandrow{display:flex;align-items:center;gap:10px;margin:2px 8px 16px}
.logo{width:40px;height:40px;border-radius:10px;background:#fff;overflow:hidden;flex:none;color:var(--brand-ink);display:grid;place-items:center;font:700 18px var(--ar)}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.brandrow b{display:block;font-size:14px;line-height:1.1}.brandrow small{font-size:11px;color:var(--mut)}
.sb h6{margin:14px 10px 4px;font-size:10.5px;letter-spacing:.14em;color:var(--brand);text-transform:uppercase}
.mi{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--fg)}
.mi:hover{background:var(--hover)}
.mi.on{background:var(--brand);color:var(--brand-ink);font-weight:700}
.mi svg{width:16px;height:16px;flex:none;opacity:.8}
.mi .cnt{margin-left:auto;background:var(--bad);color:#fff;border-radius:10px;font:700 10px var(--sans);padding:1px 6px}
.mi.on .cnt{background:var(--brand-ink);color:var(--brand)}
.mi .tag{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--warn)}
.mw{flex:1;min-width:0;display:flex;flex-direction:column}
/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding-block:8px;padding-left:16px;padding-right:max(16px,env(safe-area-inset-right,0px))}
.top .sp{flex:1}
.ib{width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);position:relative}
.ib svg{width:17px;height:17px}
.ib i{position:absolute;top:-3px;right:-3px;background:var(--bad);color:#fff;font:700 9.5px var(--sans);font-style:normal;border-radius:10px;padding:1px 5px}
.clock{display:flex;flex-direction:column;align-items:flex-end;font-size:11px;line-height:1.25;padding:3px 10px;border:1px solid var(--line);border-radius:8px}
.clock b{font-size:12px}
.who{display:flex;align-items:center;gap:8px;padding-left:6px}
.av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:700;font-size:12px}
.who b{display:block;font-size:13px;line-height:1.1}.who small{color:var(--mut);font-size:11px}
.hm{display:none}
main{padding:20px 22px 60px;padding-right:max(22px,env(safe-area-inset-right,0px));max-width:1320px;width:100%}
/* page title block (Al Huda) */
.ph{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.ph .pi{width:48px;height:48px;border-radius:10px;background:var(--card);box-shadow:0 2px 10px rgba(0,40,36,.07);display:grid;place-items:center;color:var(--brand)}
.ph .pi svg{width:22px;height:22px}
.ph h1{margin:0;font-size:20px;font-weight:600;text-wrap:balance}
.ph p{margin:0;color:var(--mut);font-size:12.5px}
.ph .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px;min-width:0}
.card h3{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 .r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:11.5px;color:var(--mut)}
.kpi b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi small{font-size:10.5px;color:var(--mut)}
.kpi.alert b{color:var(--bad)}.kpi.good b{color:var(--ok)}
.bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.bar label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
input,select,textarea{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:7px 9px;max-width:100%}
textarea{width:100%;min-height:72px;resize:vertical}
.tw{overflow-x:auto;margin:0 -16px;padding:0 16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap;font-weight:700}
td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--hover)}
tr.now td{background:var(--brand-soft)}
.mono b,b.mono{white-space:nowrap}
.t2{display:block;font-size:11.5px;color:var(--mut)}
.btn{border:0;border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:700;background:var(--brand);color:var(--brand-ink);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn.s{padding:4px 9px;font-size:11.5px}
.btn.g{background:var(--neub);color:var(--fg)}
.btn.o{background:none;border:1px solid var(--line);color:var(--fg)}
.btn.d{background:var(--bad);color:#fff}
.btn.w{background:var(--warnb);color:var(--warn)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.lnk{background:none;border:0;padding:0;color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.c-ok{background:var(--okb);color:var(--ok)}.c-warn{background:var(--warnb);color:var(--warn)}.c-bad{background:var(--badb);color:var(--bad)}.c-info{background:var(--infob);color:var(--info)}.c-neu{background:var(--neub);color:var(--neu)}.c-brand{background:var(--brand-soft);color:var(--brand)}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.form label,.fl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut);font-weight:600}
.form .full{grid-column:1/-1}
.req::after{content:" *";color:var(--bad)}
.err{color:var(--bad);font-size:11.5px;font-weight:600}
.note{border-left:3px solid var(--warn);background:var(--warnb);color:var(--fg);padding:9px 12px;border-radius:0 8px 8px 0;font-size:12.5px;margin-bottom:14px}
.note.i{border-color:var(--info);background:var(--infob)}
.note.b{border-color:var(--bad);background:var(--badb)}
.empty{text-align:center;padding:26px 10px;color:var(--mut)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 22px}
.kv div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:5px 0;font-size:13px}
.kv span{color:var(--mut)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 13px;font-size:12.5px;font-weight:600}
.tabs button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
/* review notes */
.rv{border:1px dashed var(--demo);background:var(--demob);border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:12.5px;color:var(--fg)}
.rv b.h{color:var(--demo);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
.rv ul{margin:4px 0 0;padding-left:18px}
body.norv .rv{display:none}
/* steps */
.steps{display:flex;flex-direction:column;gap:0}
.st{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.st:first-child{border-top:0}
.st .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--neub);color:var(--neu)}
.st.done .n{background:var(--okb);color:var(--ok)}.st.open .n{background:var(--brand);color:var(--brand-ink)}.st.late .n{background:var(--badb);color:var(--bad)}
.st h4{margin:2px 0 2px;font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st p{margin:2px 0;font-size:12.5px;color:var(--mut)}
/* drawer & modal */
.ov{position:fixed;inset:0;background:rgba(5,20,18,.45);z-index:60;display:none}
.ov.open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(920px,100%);background:var(--bg);z-index:61;overflow:auto;transform:translateX(100%);transition:transform .2s;padding-bottom:env(safe-area-inset-bottom,0px);display:flex;flex-direction:column}
.drawer.open{transform:none}
.dh{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));display:flex;gap:10px;align-items:flex-start;z-index:2;flex-shrink:0}
.dh h2{margin:0;font-size:17px}.dh .x{margin-left:auto}
.db{padding:16px 20px 24px;flex:1}
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px 14px;overflow:auto}
.modal.open{display:flex}
.mc{background:var(--card);border-radius:12px;width:100%;max-width:min(920px,96vw);max-height:92vh;box-shadow:0 20px 60px rgba(0,0,0,.3);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.mc .mt{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.mc .mt h5{margin:0;font-size:16px}.mc .mt button{margin-left:auto}
.mc .mb{padding:20px 22px;overflow:auto;flex:1;min-height:0}
.mc .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex-shrink:0;background:var(--card);position:sticky;bottom:0}
.x{background:none;border:0;font-size:22px;line-height:1;color:var(--mut)}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:24px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;z-index:90;max-width:calc(100% - 32px)}
#toast.show{opacity:1}
/* popover */
.pop{position:absolute;right:0;top:44px;width:290px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);z-index:40;overflow:hidden}
.pop .ph2{background:var(--brand);color:var(--brand-ink);padding:14px;text-align:center}
.pop .ph2 b{display:block;font-size:15px}.pop .ph2 small{opacity:.85}
.pop .pb{padding:10px 14px;font-size:12.5px;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.pop .pf{padding:10px;text-align:center;border-top:1px solid var(--line)}
.rel{position:relative}
/* timetable */
.tt{border-collapse:separate;border-spacing:0;font-size:11.5px;min-width:860px}
.tt th{position:sticky;top:0;background:var(--card);z-index:1;text-align:center}
.tt td{border-top:1px solid var(--line);border-left:1px solid var(--line);padding:0;height:26px;text-align:center;vertical-align:middle}
.tt td.tm{border-left:0;padding:0 8px;text-align:right;color:var(--mut);font-family:var(--mono);white-space:nowrap;background:var(--card)}
.tt td.duty{background:var(--brand-soft)}
.tt td.off{background:repeating-linear-gradient(45deg,transparent 0 6px,var(--neub) 6px 7px)}
.slot{display:block;margin:1px 2px;padding:2px 4px;border-radius:5px;background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:11px;line-height:1.25;cursor:pointer;border:0;width:calc(100% - 4px);text-align:left}
.slot.c{background:var(--bad);color:#fff}
.slot.dst{box-shadow:inset 0 0 0 2px var(--warn)}
.slot small{display:block;font-weight:500;opacity:.9}
.ttw{max-height:560px;overflow:auto;margin:0 -16px;padding:0 16px}
/* materials */
.mat{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.book{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.cover{aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;font:700 34px/1.2 var(--ar);color:#fff;text-align:center;padding:10px}
.book .bb{padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.book .bb b{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.pg{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px;text-align:center;font-size:12px;cursor:pointer}
.pg .pv{aspect-ratio:3/4;background:var(--brand-soft);border-radius:5px;display:grid;grid-template-columns:repeat(3,1fr);place-items:center;font:700 18px var(--ar);color:var(--brand);margin-bottom:5px;padding:6px}
.big{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;direction:rtl;background:var(--brand-soft);padding:14px;border-radius:10px}
.big span{background:var(--card);border-radius:8px;aspect-ratio:1;display:grid;place-items:center;font:700 34px var(--ar);color:var(--fg)}
.subj{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.sj{border:1px solid var(--line);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.sj>label{display:flex;gap:8px;align-items:center;font-weight:700;font-size:13px;color:var(--fg)}
.prog{height:8px;background:var(--neub);border-radius:6px;overflow:hidden}.prog i{display:block;height:100%;background:var(--brand)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--mut);margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
/* dashboard + live classes */
.greet{background:var(--brand);color:var(--brand-ink);border-radius:12px;padding:18px 22px;margin-bottom:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.greet small{opacity:.85}.greet h2{margin:2px 0;font-size:22px}.greet .ar{margin-left:auto;font:700 28px var(--ar);opacity:.9}
.lcard{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px 16px;margin-bottom:12px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px}
.lcard.live{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.lcard .tb{border-right:2px solid var(--brand);padding-right:12px}
.lcard .tb b{display:block;font:600 17px var(--mono);white-space:nowrap}
.lcard h4{margin:0;font-size:15px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.wl{display:flex;flex-direction:column;gap:0}
.wl>div{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.wl>div:first-child{border-top:0}
.qa{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:10px 2px;text-align:left;font-weight:600}
.qa:first-child{border-top:0}.qa svg{width:17px;height:17px;color:var(--brand)}.qa:hover{color:var(--brand)}
body.sbc .sb{display:none}
/* simulated Zoom meeting (deliberately one dark look, like the real Zoom client) */
.zoom{position:fixed;inset:0;z-index:85;background:#1c1c1c;color:#f2f2f2;display:none;flex-direction:column}
.zoom.open{display:flex}
.zoom.light{background:#f5f6f6;color:#222}
.zt{display:flex;align-items:center;gap:10px;padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px));font-size:12.5px;background:#111;color:#eee;flex-wrap:wrap}
.zt .rec{color:#ff6b6b;font-weight:700}.zt .sp{flex:1}
.zs{flex:1;display:grid;place-items:center;position:relative;padding:16px;overflow:auto}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;width:min(920px,100%)}
.tile{aspect-ratio:16/10;max-width:100%;background:#2c2c2c;border-radius:10px;display:grid;place-items:center;position:relative;border:2px solid transparent}
.tile.talk{border-color:#3ddc84}
.tile .nm{position:absolute;left:8px;bottom:6px;font-size:12px;background:rgba(0,0,0,.55);color:#fff;padding:2px 7px;border-radius:4px}
.tile .bav{width:76px;height:76px;border-radius:50%;background:#00635D;color:#fff;display:grid;place-items:center;font-weight:800;font-size:24px}
.zb{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap;background:#111;padding:6px 10px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
.zb button{background:none;border:0;color:#ddd;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 9px;border-radius:8px;min-width:62px}
.zb button b{font-size:17px;line-height:1}
.zb button:hover{background:#2a2a2a}.zb button.off{color:#ff7b72}
.zb .leave{background:#d92d20;color:#fff;margin-left:12px}.zb .leave:hover{background:#b42318}
.zbox{background:#fff;color:#222;border-radius:12px;padding:24px 28px;text-align:center;max-width:400px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.zbox h3{margin:0 0 4px;font-size:17px}.zbox p{margin:4px 0;color:#555;font-size:13px}
.zbox .acts{justify-content:center;margin-top:14px}
.spin{width:30px;height:30px;border:3px solid #d5dbd9;border-top-color:#00635D;border-radius:50%;animation:sp 1s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}
.zdlg{position:absolute;top:18%;left:50%;transform:translateX(-50%);background:#fff;color:#222;border-radius:12px;padding:18px 20px;width:min(360px,calc(100% - 32px));box-shadow:0 10px 40px rgba(0,0,0,.4)}
.zdlg h4{margin:0 0 6px}.zdlg p{margin:0 0 12px;font-size:13px;color:#555}
.zside{position:absolute;right:12px;top:12px;bottom:12px;width:min(280px,calc(100% - 24px));background:#262626;border-radius:10px;padding:12px;font-size:13px;overflow:auto}
.pz{transform-origin:top center;transition:transform .15s}
@media (max-width:860px){
  .sb{position:fixed;left:0;top:0;bottom:0;transform:translateX(-105%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.25);padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .sb.o{transform:none}
  .hm{display:grid}
  .dsk,.top>b{display:none}
  .lcard{grid-template-columns:1fr}.lcard .tb{border-right:0;border-bottom:2px solid var(--brand);padding:0 0 8px}
  .zb button{min-width:48px;padding:5px 6px}
  .clock,.who div{display:none}
  main{padding:14px 16px 50px;padding-left:max(16px,env(safe-area-inset-left,0px))}
  .top{padding-left:max(12px,env(safe-area-inset-left,0px))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== shared additions used by Family panel (and future panels) ===== */
.kidsw{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kidsw button{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700}
.kidsw button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12.5px}
.cal b{font-size:10.5px;color:var(--mut);letter-spacing:.05em}
.cal button{border:0;background:none;border-radius:8px;padding:6px 0;position:relative;font-variant-numeric:tabular-nums}
.cal button:hover{background:var(--hover)}
.cal button.on{background:var(--brand);color:var(--brand-ink);font-weight:800}
.cal button.today{box-shadow:inset 0 0 0 2px var(--brand)}
.cal button.dot::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--brand)}
.cal button.on.dot::after{background:var(--brand-ink)}
.cal .wk{color:var(--bad)}
.cd{display:flex;gap:8px}.cd div{background:var(--brand-soft);border-radius:10px;padding:8px 12px;text-align:center;min-width:64px}
.cd b{display:block;font:700 26px var(--mono);color:var(--brand)}.cd span{font-size:10px;letter-spacing:.1em;color:var(--mut)}
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.days button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 10px;text-align:center;font-size:11px;min-width:58px}
.days button b{display:block;font-size:17px}
.days button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.slots button{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:8px 4px;font-weight:700;font-size:13px}
.slots button small{display:block;font-weight:500;font-size:10.5px;color:var(--mut)}
.slots button[disabled]{opacity:.5;text-decoration:line-through;cursor:not-allowed}
.slots button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.slots button.on small{color:var(--brand-ink)}
.dayrow{display:grid;grid-template-columns:140px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--line);font-size:13px}
.dayrow.has{background:var(--okb)}.dayrow.abs{background:var(--badb)}.dayrow.can{background:var(--neub)}
.thread{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.bub{padding:8px 11px;border-radius:12px;max-width:85%;background:var(--neub)}.bub.me{margin-left:auto;background:var(--brand-soft)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.toggle:first-child{border-top:0}
.sw{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:20px;background:var(--neub);position:relative;cursor:pointer;flex:none;border:1px solid var(--line)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.sw:checked{background:var(--brand);border-color:var(--brand)}.sw:checked::after{left:20px}
.cert{border:6px double var(--brand);border-radius:8px;padding:26px;text-align:center;background:var(--card)}
.cert h2{font:700 26px var(--ar);margin:6px 0}
.stars button{background:none;border:0;font-size:26px;color:var(--warn);padding:0 2px}
.srch{position:relative}.srch input{width:220px}
.srch .sug{position:absolute;top:38px;left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:45;max-height:300px;overflow:auto}
.srch .sug button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 12px;font-size:13px}
.srch .sug button:hover{background:var(--hover)}
@media (max-width:860px){.srch{display:none}.dayrow{grid-template-columns:1fr}}

/* ===== Management panel (Al Huda look) ===== */
:root{--t-teal:#138496;--t-green:#2f9e5b;--t-dark:#4a5054;--t-red:#c8233f;--t-yellow:#c98a00;--t-blue:#1683c7;--t-cyan:#0f7d8c;--hero:#2f9e5b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--t-teal:#1b7f8f;--t-green:#2a8a52;--t-dark:#3d4448;--t-red:#a92038;--t-yellow:#a77400;--t-blue:#16659a;--t-cyan:#126b77;--hero:#256f45}}
:root[data-theme="dark"]{--t-teal:#1b7f8f;--t-green:#2a8a52;--t-dark:#3d4448;--t-red:#a92038;--t-yellow:#a77400;--t-blue:#16659a;--t-cyan:#126b77;--hero:#256f45}
.tilewrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:16px}
.tiles6{display:grid;grid-template-columns:repeat(3,1fr);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,40,36,.08)}
.tl{border:0;color:#fff;padding:14px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;min-height:78px;justify-content:center;text-align:center}
.tl b{font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.tl:hover{filter:brightness(1.08)}.tl.sel{box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.tl.teal{background:var(--t-teal)}.tl.green{background:var(--t-green)}.tl.dark{background:var(--t-dark)}.tl.red{background:var(--t-red)}.tl.yellow{background:var(--t-yellow)}.tl.blue{background:var(--t-blue)}.tl.cyan{background:var(--t-cyan)}
tr.r-ok td{background:var(--okb)}tr.r-bad td{background:var(--badb)}tr.r-warn td{background:var(--warnb)}tr.r-info td{background:var(--infob)}tr.r-leave td{background:var(--demob)}
.hero{background:var(--hero);color:#fff;border-radius:12px;padding:20px;text-align:center;margin-bottom:0}
.hero .av{width:64px;height:64px;font-size:22px;margin:0 auto 8px;background:#fff;color:var(--hero)}
.hero h2{margin:0;font-size:20px}.hero .sm{opacity:.9}
.hero .badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.hero .badges span{background:rgba(0,0,0,.22);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700}
.hero .acts{justify-content:center;margin-top:10px}
.hero .hb{background:#fff;color:var(--hero);border:0;border-radius:6px;padding:6px 11px;font-size:12px;font-weight:700}
.hero .hb:hover{background:#eefaf2}
.hero .tabs{justify-content:center;margin:12px 0 0}
.hero .tabs button{background:rgba(0,0,0,.25);color:#fff;border-color:transparent}
.hero .tabs button.on{background:#fff;color:var(--hero)}
.heroin{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--card);padding:14px;margin-bottom:16px}
.mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--neub);border-radius:9px;padding:3px;margin:0 6px 10px}
.mode button{border:0;background:none;border-radius:7px;padding:6px 4px;font-size:12px;font-weight:700;color:var(--mut)}
.mode button.on{background:var(--brand);color:var(--brand-ink)}
.grp{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--fg);font-weight:600}
.grp:hover{background:var(--hover)}.grp svg{width:16px;height:16px;opacity:.8}.grp em{margin-left:auto;font-style:normal;opacity:.6}
.sub{padding-left:24px}.sub .mi{font-size:12.5px;padding:6px 10px}
.qbar{display:flex;gap:6px;flex-wrap:wrap;padding:6px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.qbar button{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:3px 10px;font-size:11.5px;font-weight:600;display:inline-flex;gap:5px;align-items:center;color:var(--fg)}
.qbar button i{font-style:normal;background:var(--brand);color:var(--brand-ink);border-radius:10px;padding:0 6px;font-size:10.5px}
.qbar button.hot i{background:var(--bad);color:#fff}
.qbar button:hover{border-color:var(--brand)}
.qbar button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.qbar button.on i{background:var(--brand-ink);color:var(--brand)}
.ro{display:flex;gap:8px;align-items:center;background:var(--infob);color:var(--info);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:700;margin-bottom:14px}
.meter{display:grid;grid-template-columns:120px 1fr 44px;gap:8px;align-items:center;font-size:12.5px;padding:4px 0}
.meter .bar{height:14px;background:var(--neub);border-radius:4px;overflow:hidden}.meter .bar i{display:block;height:100%;background:var(--brand)}
.meter .bar i.alt{background:var(--warn)}
.dd{position:relative;display:inline-block}
/* Fixed so table/card overflow no longer clips Actions; placeDd() sets top/left after render. */
.ddm{position:fixed;z-index:90;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.2);min-width:220px;max-width:min(320px,calc(100vw - 16px));max-height:min(70vh,480px);overflow:auto;padding:6px;visibility:hidden}
.ddm.ready{visibility:visible}
.ddm button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;font-size:13px;border-radius:7px;color:var(--fg);white-space:nowrap}
.ddm button:hover{background:var(--hover)}.ddm button.red{color:var(--bad)}
.calm{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calm div{border:1px solid var(--line);border-radius:7px;padding:6px;font-size:11.5px;min-height:62px;display:flex;flex-direction:column;gap:4px}
.calm div.off{background:var(--neub)}.calm div.abs{background:var(--badb)}
.ichips{display:flex;gap:4px;align-items:center}
.ib.sm2{width:30px;height:30px}
@media (max-width:860px){.tiles6{grid-template-columns:repeat(2,1fr)}.qbar{display:none}}
/* management mobile fit */
.mw{min-width:0}
.qbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}.qbar>button{flex:0 0 auto}
@media (max-width:900px){.ichips{display:none}.top .clock{display:none}.top .who>div{display:none}.top .srch{flex:1;min-width:0}.top .srch input{width:100%}}
.ro{display:flex;align-items:center;gap:8px}.ro svg{width:18px;height:18px;flex:0 0 auto}
/* ===== enrollment components ===== */
.ecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.ecard{all:unset;box-sizing:border-box;cursor:pointer;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--c,var(--brand));border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:3px;min-height:112px}
.ecard:hover,.ecard:focus-visible{box-shadow:0 0 0 3px var(--brand-soft)}
.ecard .ei{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}.ecard .ei svg{width:16px;height:16px}
.ecard small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}
.ecard b{font-size:24px;color:var(--c)}.ecard em{font-style:normal;font-size:11.5px;color:var(--mut)}
.ecard.bl{--c:#2f6fd0}.ecard.yl{--c:#b7791f}.ecard.gr{--c:#1f8a4c}.ecard.pu{--c:#7c4dce}.ecard.cy{--c:#0e8a9a}.ecard.rd{--c:#c8233f}.ecard.or{--c:#c2571a}
.tstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:12px}
.ts{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-left:4px solid var(--c,var(--brand));border-radius:8px;padding:8px 10px;background:color-mix(in srgb,var(--c) 7%,var(--card))}
.ts small{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700}.ts b{font-size:20px;color:var(--c)}
.ts.on{background:var(--brand);border-color:var(--brand);border-left-color:var(--brand);color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 28%,transparent);font-weight:800}
.ts:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px}
.ts-total{--c:#2f6fd0}.ts-taken{--c:#1f8a4c}.ts-pending{--c:#b7791f}.ts-waiting{--c:#2f6fd0}.ts-running{--c:#7c4dce}.ts-absent{--c:#c8233f}.ts-leave{--c:#c2571a}.ts-declined{--c:#6b7280}
.wz{display:flex;gap:4px;justify-content:center;margin:6px auto 16px;max-width:860px;flex-wrap:wrap}
.wst{all:unset;cursor:pointer;flex:1;min-width:90px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--mut);position:relative}
.wst span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:var(--card);font-size:13px}
.wst.on{color:var(--brand)}.wst.on span{border-color:var(--brand);background:var(--brand);color:#fff}
.wst.done{color:var(--ok)}.wst.done span{border-color:var(--ok);background:var(--ok);color:#fff}.wst[disabled]{cursor:default}
.kidbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0;background:color-mix(in srgb,var(--brand) 4%,var(--card))}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:8px}
.tcard{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:2px;background:var(--card)}
.tcard:hover{border-color:var(--brand)}.tcard.on{border:2px solid var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.tcard[disabled]{opacity:.5;cursor:not-allowed}
.tlist{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.trow{display:flex!important;flex-direction:row!important;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);color:var(--fg)!important;font-weight:500!important}.trow.dis{opacity:.55}
.ilist{display:flex;flex-direction:column;max-height:560px;overflow:auto}
.ilist>button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;align-items:flex-start;padding:9px 6px;border-bottom:1px solid var(--line);border-radius:6px}
.ilist>button:hover{background:var(--brand-soft)}.ilist>button.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}.ilist>button.un b{color:var(--brand)}
.ilist .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-top:4px}
.cmp{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}.cmp textarea{min-height:44px}
.tl2{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:6px}
.tl2>div{position:relative;padding:0 0 12px 14px;display:flex;flex-direction:column;font-size:13px}.tl2>div::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--brand)}
tr.lr td:first-child{box-shadow:inset 3px 0 0 var(--lc,transparent)}
tr.lr-new{--lc:#2f6fd0}tr.lr-contacted{--lc:#b7791f}tr.lr-followup{--lc:#7c4dce}tr.lr-qualified{--lc:#1f8a4c}tr.lr-trial1,tr.lr-trial2,tr.lr-trial3{--lc:#0e8a9a}tr.lr-converted{--lc:#1f8a4c}tr.lr-lost{--lc:#c8233f}
.ecards{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.ecards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.ecards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tagl{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}.tagl i{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:9px;background:var(--line);color:var(--mut)}
.tagl i.hot{background:#fde2e6;color:#b4232f}.tagl i.warm{background:#fdf1dc;color:#9a5b00}.tagl i.cold{background:#e3eefb;color:#2c5d9e}.tagl i.ret{background:var(--brand-soft);color:var(--brand)}
/* ===== QC / HR / Finance / Super Admin components ===== */
h3.sec{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:16px 0 6px}
.sl{display:grid;grid-template-columns:minmax(120px,1fr) 2fr 26px;gap:10px;align-items:center;font-size:13px;padding:2px 0}.sl input{width:100%;accent-color:var(--brand)}.sl b{text-align:right;color:var(--brand)}
.ring{display:flex;gap:14px;align-items:center;background:var(--brand-soft);border-radius:10px;padding:10px 12px;margin:8px 0}.ring>b{width:58px;height:58px;border-radius:50%;border:5px solid var(--brand);display:grid;place-items:center;font-size:18px;flex:0 0 auto}.ring span{font-size:12.5px;line-height:1.6}
.video{background:#0f2f49;color:#fff;border-radius:10px;height:130px;display:grid;place-items:center;font-size:28px;margin-bottom:8px;text-align:center}.video small{display:block;font-size:11px;opacity:.8}
.revg{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr);gap:16px}.revg textarea{width:100%;min-height:70px}
@media (max-width:760px){.revg{grid-template-columns:1fr}}
.modal .mc{max-height:92vh}
@media (min-width:900px){.drawer{width:min(960px,92vw)}.mc{max-width:min(960px,94vw)}}
.tiles8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-radius:10px;overflow:hidden}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.hub .card{margin:0}.hub h3{display:flex;gap:8px;align-items:center}
.pl{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}.pl div{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px}.pl b{display:block;font-size:14px}
.kan{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px}.kcol{background:var(--brand-soft);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:120px}.kcol>b{font-size:12px}
.kcard{all:unset;box-sizing:border-box;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;font-size:13px}.kcard:hover{border-color:var(--brand)}

/* ===================================================================================================
   EOT look, Google Ads style (Oct 2026): Inter, light grey work area, white bars, thin #dadce0 lines,
   soft-pill navigation, underline tabs, dense tables — with the EOT teal-green brand. Layout only.
   =================================================================================================== */
:root{--bg:#eef5f3;--card:#ffffff;--fg:#202124;--mut:#5f6368;--line:#d7e4e0;--line2:#e8f0ed;--hover:#e8f1ee;--brand:#00635D;--brand-ink:#fff;--brand-soft:#e3f1ef;--brand-gradient:linear-gradient(120deg,#003a36 0%,#00635D 52%,#0b7a72 100%);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--ar:"Noto Naskh Arabic","Amiri","Traditional Arabic",serif;
  --g-blue:#1a73e8;--g-red:#d93025;--g-yellow:#f9ab00;--g-green:#1e8e3e;--g-teal:#00796b;--g-purple:#8e24aa;--shadow:0 1px 2px rgba(60,64,67,.15),0 1px 3px 1px rgba(60,64,67,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111418;--card:#1b1f24;--fg:#e8eaed;--mut:#9aa0a6;--line:#3c4043;--line2:#2a2e33;--hover:#262a30;--brand:#4db6ac;--brand-ink:#0b1f1d;--brand-soft:#173230}}
:root[data-theme="dark"]{--bg:#111418;--card:#1b1f24;--fg:#e8eaed;--mut:#9aa0a6;--line:#3c4043;--line2:#2a2e33;--hover:#262a30;--brand:#4db6ac;--brand-ink:#0b1f1d;--brand-soft:#173230}
body{font:13.5px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
/* bars */
.top{min-height:56px;box-shadow:none;border-bottom:1px solid var(--line)}
.ib{background:transparent;color:var(--mut)}.ib:hover{background:var(--hover);color:var(--fg)}
.clock{border-color:var(--line);border-radius:6px}
.av{background:var(--brand)}
/* sidebar: Google Ads soft pill */
.sb{border-right:1px solid var(--line);padding-top:12px}
.sb h6{color:var(--mut);letter-spacing:.08em;font-weight:600}
.mi{border-radius:0 20px 20px 0;margin-left:-10px;padding-left:20px;width:calc(100% + 10px);font-weight:500}
.mi:hover{background:var(--hover)}
.mi.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.mi.on svg{opacity:1}
.grp{font-weight:600}
/* page title */
.ph .pi{box-shadow:none;border:1px solid var(--line);border-radius:8px;width:44px;height:44px}
.ph h1{font-size:22px;font-weight:500;letter-spacing:-.01em}
/* cards, kpis */
.card{border-radius:8px;border-color:var(--line)}
.card h3{font-size:14px;letter-spacing:0;text-transform:none;color:var(--fg);font-weight:600}
.kpi{border-radius:8px}
.kpi span{font-size:12px;font-weight:500}
.kpi b{font-size:26px;font-weight:500}
/* tables */
th{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--mut);border-bottom:1px solid var(--line);padding:10px 12px}
td{padding:11px 12px;border-top:1px solid var(--line2)}
tbody tr:hover{background:var(--hover)}
/* buttons, inputs */
.btn{border-radius:6px;font-weight:600;padding:7px 14px}
.btn.s{padding:4px 10px}
.btn.o{background:var(--card);border-color:var(--line);color:var(--brand)}
.btn.o:hover{background:var(--brand-soft)}
.btn:not(.o):not(.g):not(.d):not(.w):hover{filter:brightness(1.08)}
input,select,textarea{border-color:var(--line);border-radius:6px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
/* tabs: underline */
.tabs{gap:0;border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:9px 14px;color:var(--mut);font-weight:500;white-space:nowrap}
.tabs button:hover{color:var(--fg);background:var(--hover)}
.tabs button.on{background:none;border-bottom-color:var(--brand);color:var(--brand);font-weight:600}
.hero .tabs{border-bottom:0}.hero .tabs button{border-radius:20px;border:0;background:rgba(0,0,0,.2);color:#fff}.hero .tabs button.on{background:#fff;color:var(--hero)}
.chip{font-weight:600}
/* greeting banner */
.greet{background:var(--brand-gradient);border-radius:12px;padding:20px 24px;position:relative;overflow:hidden;color:#fff}
.greet h2{font-weight:600}
/* modal, popovers */
.mc{border-radius:12px;box-shadow:0 24px 38px 3px rgba(60,64,67,.15),0 9px 46px 8px rgba(60,64,67,.1)}
.pop,.ddm{box-shadow:var(--shadow)}
.pop .ph2{background:var(--brand)}
/* Google Ads metric tiles (coloured; click to show that line on the chart) */
.mtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:8px 8px 0 0;overflow:hidden}
.mtile{all:unset;box-sizing:border-box;cursor:pointer;padding:12px 14px 14px;color:#fff;display:flex;flex-direction:column;gap:4px;min-height:86px;position:relative}
.mtile span{font-size:13px;font-weight:500;display:flex;align-items:center;gap:4px}
.mtile b{font-size:28px;font-weight:400;line-height:1.1;font-variant-numeric:tabular-nums}
.mtile small{font-size:11.5px;opacity:.9}
.mtile.off{background:var(--card)!important;color:var(--fg);border-right:1px solid var(--line)}.mtile.off small{color:var(--mut)}
.mtile:focus-visible{outline:2px solid var(--fg);outline-offset:-3px}
.mt-blue{background:var(--g-blue)}.mt-red{background:var(--g-red)}.mt-yellow{background:var(--g-yellow);color:#202124}.mt-green{background:var(--g-green)}
.chartbox{border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;background:var(--card);padding:12px 14px 6px;margin-bottom:16px}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font:11px var(--sans);fill:var(--mut)}
.chart .gl{stroke:var(--line2)}.chart .ax{stroke:var(--line)}
.ctitle{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.ctitle .r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.clegend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:4px 0 2px}.clegend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.rangebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rangebar .seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.rangebar .seg button{border:0;background:var(--card);padding:6px 12px;font-size:12.5px;color:var(--mut);border-right:1px solid var(--line)}
.rangebar .seg button:last-child{border-right:0}.rangebar .seg button.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
@media (max-width:760px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ===== Family portal (new design) ===== */
.crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);padding:0 12px;border-left:1px solid var(--line);white-space:nowrap}
.crumb b{color:var(--fg);font-weight:600}.lnk2{background:none;border:0;padding:0;color:var(--mut);font:inherit}.lnk2:hover{color:var(--brand)}
.livebadge{display:inline-flex;align-items:center;gap:6px;border:1px solid #b7e1c3;background:#e9f7ee;color:#137333;border-radius:20px;padding:4px 11px;font-size:12px;font-weight:600}
.livebadge i{width:8px;height:8px;border-radius:50%;background:#1e8e3e;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,142,62,.5)}70%{box-shadow:0 0 0 7px rgba(30,142,62,0)}100%{box-shadow:0 0 0 0 rgba(30,142,62,0)}}
.fhero{position:relative;overflow:hidden;border-radius:12px;padding:22px 24px;margin-bottom:16px;color:#fff;display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;
  background:radial-gradient(90% 120% at 100% 0%,#0b7a72 0%,transparent 55%),var(--brand-gradient)}
.fhero .wm{position:absolute;right:-10px;top:-30px;font:700 150px/1 var(--ar);opacity:.07;pointer-events:none}
.fh-in{flex:1;min-width:260px;position:relative}
.fh-top{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12px;opacity:.9}.fh-top .ar{font:600 15px var(--ar)}.dotsep{opacity:.5}
.fhero h1{margin:8px 0 6px;font-size:26px;font-weight:600;letter-spacing:-.01em}
.fhero p{margin:0;opacity:.88;max-width:62ch;font-size:13.5px}
.fh-q{margin-top:12px;display:inline-flex;flex-wrap:wrap;gap:4px 10px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:7px 12px;font-size:12px}
.fh-q .ar{font:600 15px var(--ar)}
.fh-act{display:flex;gap:8px;flex-wrap:wrap;position:relative}
.fhb{background:#fff!important;color:#00524d!important;padding:9px 16px}.fhb2{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;padding:9px 16px}
.kpi2 .kh{display:flex;align-items:center;justify-content:space-between;gap:8px}.kpi2 .kh svg{width:18px;height:18px;color:var(--brand);opacity:.85}
.kpi2 small .lnk{font-size:11.5px}
.tfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px -16px -16px;padding:10px 16px;border-top:1px solid var(--line2);background:var(--bg);border-radius:0 0 8px 8px;font-size:12.5px;color:var(--mut)}
.tfoot svg{width:16px;height:16px;color:var(--brand)}.tfoot span{flex:1;min-width:200px}
.nextc{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:8px;padding:14px 16px;margin-bottom:16px}
.nextc h4{margin:8px 0 2px;font-size:16px}.nextc p{margin:2px 0}.nextc p svg{width:14px;height:14px;vertical-align:-2px;color:var(--brand)}
.cd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.cd div{background:var(--brand-soft);border-radius:8px;padding:8px 4px;text-align:center}.cd b{display:block;font:500 26px var(--mono);color:var(--brand)}.cd span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.qcard{margin:16px 8px 4px;padding:12px;border-radius:10px;background:var(--brand-soft);text-align:center}.qcard .ar{font:600 17px var(--ar);color:var(--brand)}.qcard small{display:block;color:var(--mut);font-size:11px;margin-top:4px}
@media (max-width:900px){.crumb{display:none}.livebadge{display:none}}
.kidsw{display:flex;flex-wrap:nowrap;gap:2px;border:1px solid var(--line);border-radius:20px;padding:2px;background:var(--card);overflow-x:auto;max-width:42vw}
.kidsw button{white-space:nowrap;border:0;background:none;border-radius:16px;padding:4px 11px;font-size:12px;font-weight:500;color:var(--mut)}
.kidsw button.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
@media (max-width:1180px){.top .clock{display:none}}
@media (max-width:1000px){.top .srch input{width:150px}}
.btn svg{width:16px;height:16px;flex:none}.btn.s svg{width:14px;height:14px}
/* ===== Super Admin overview ===== */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid3>.card{margin-bottom:16px}
@media (max-width:1100px){.grid3{grid-template-columns:1fr}}
.diag h3 svg{width:16px;height:16px;color:var(--mut)}
.diagrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin-top:8px;font-size:13px}
.diagrow .di{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fce8e6;color:var(--g-red);flex:none}.diagrow .di svg{width:15px;height:15px}
.ahtiles{grid-template-columns:repeat(6,minmax(0,1fr));border-radius:8px}
.ahtiles .tl{min-height:72px;font-weight:600}.ahtiles .tl b{font-size:22px;font-weight:600}
@media (max-width:900px){.ahtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ===== Family portal: owner's page designs ===== */
.famsb .fmi{border-radius:10px;margin:1px 0;width:100%;padding:9px 12px;gap:12px;font-size:14px;color:var(--fg)}
.famsb .fmi:hover{background:var(--hover)}
.famsb .fmi.on{background:#eef1f5;color:var(--fg);font-weight:600}
:root[data-theme="dark"] .famsb .fmi.on{background:var(--hover)}
.famsb .fmi>span:first-child{display:inline-grid;place-items:center}.famsb .fmi>span:first-child svg{width:19px;height:19px;opacity:1}
.famsb .fmi>span:nth-child(2){flex:1}
.famsb h6{color:var(--mut);font-size:11px;letter-spacing:.09em;margin:18px 12px 6px}
.i-blue{color:#1a73e8}.i-green{color:#0d9a6a}.i-purple{color:#9334e6}.i-orange{color:#e8710a}.i-teal{color:#0b8a9a}.i-indigo{color:#4f46e5}.i-red{color:#e8590c}.i-pink{color:#db2777}.i-grey{color:#5f6368}
.sbb{font-size:11px;font-weight:700;border-radius:10px;padding:1px 8px}.sbb.g{background:#d6f5e3;color:#0d7a4c}.sbb.p{background:#f3e8fd;color:#9334e6}.sbb.r{background:#fce8e6;color:#c5221f}
.sbt{font-size:12px;font-weight:700;color:#0d9a6a}
.dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.dhead h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.015em}.dhead p{margin:4px 0 0;color:var(--mut);font-size:14px}
.dact{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dact select{padding:8px 12px;border-radius:8px;min-width:180px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px;min-width:0}
.dcard .tw{margin:0 -22px;padding:0}
.dh3{margin:0 0 14px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--fg);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dh3 svg{width:18px;height:18px;color:var(--brand)}.dh3 .r{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.dtab th{font-size:11.5px;letter-spacing:.06em;color:var(--mut);background:#f8f9fa;padding:12px 16px;border-bottom:0}
:root[data-theme="dark"] .dtab th{background:var(--hover)}
.dtab td{padding:14px 16px;border-top:1px solid var(--line2);font-size:14px}
.dtab td b{font-weight:600}
.dbtn{border:1px solid transparent;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.2}
.dbtn svg{width:15px;height:15px}.dbtn[disabled]{opacity:.45;cursor:not-allowed}
.dbtn.green{background:#0f9d63;color:#fff}.dbtn.grey{background:#f1f3f4;color:var(--fg)}.dbtn.sky{background:#e8f4fd;color:#0b6bb5;border-color:#bfe0f8}
.dbtn.skyfill{background:#14a6e6;color:#fff}.dbtn.yellow{background:#fff8e1;color:#a05a00;border-color:#fde3a7}.dbtn.pink{background:#fdecef;color:#b3123a;border-color:#f8c9d4}
.dbtn.outline{background:var(--card);color:#0f8a5f;border-color:#a7e3c6}
:root[data-theme="dark"] .dbtn.grey{background:var(--hover)}
.btn.blue{background:#1a73e8;color:#fff}.btn.red{background:#e11d48;color:#fff}.lnk.blue,.clink{color:#1a73e8;text-decoration:none}
.clink{background:none;border:0;padding:0;font-weight:600;font-size:14px;text-align:left}.clink:hover{text-decoration:underline}
.cchip{display:inline-block;border-radius:6px;padding:3px 8px;font-size:13px;font-weight:500;line-height:1.35}
.tchip{display:inline-block;background:#d6f5e3;color:#0d7a4c;border-radius:5px;padding:2px 8px;font-size:11.5px;font-weight:700;letter-spacing:.04em}
.tchip.grey{background:#f1f3f4;color:var(--mut)}
.gchip{display:inline-block;background:#d6f5e3;color:#0d7a4c;border-radius:6px;padding:4px 10px;font-size:13px;font-weight:600;font-family:var(--mono)}
.gchip.soft{font-family:var(--sans);font-weight:500;background:#e6f4ea}
.kidpick{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 16px}.kidpick button{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:500}
.kidpick button.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:600}
.dseg{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--card)}
.dseg button{border:0;background:none;border-radius:9px;padding:7px 16px;font-size:14px;color:var(--fg)}.dseg button.on{background:#0f9d63;color:#fff;font-weight:600}
.ptabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.ptabs button:not(.btn){border:0;background:none;border-radius:20px;padding:7px 16px;font-size:14px;color:var(--fg)}.ptabs button.on{background:#d6f5e3;color:#0d7a4c;font-weight:600}
.scard{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:14px;flex-wrap:wrap}
.sdate{width:72px;height:72px;border-radius:12px;background:#f1f3f4;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.sdate small{font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.06em}.sdate b{font-size:26px;line-height:1.1}
.sdate.today{background:#e6f7ef;border:1px solid #a7e3c6}.sdate.today small,.sdate.today b{color:#0d7a4c}
.sbody{flex:1;min-width:240px}.sbody h4{margin:0 0 6px;font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.smeta{display:flex;gap:18px;flex-wrap:wrap;color:var(--mut);font-size:14px}.smeta span{display:inline-flex;align-items:center;gap:6px}.smeta svg{width:15px;height:15px}
.sact{display:flex;gap:8px;flex-wrap:wrap}.sact .btn{padding:9px 16px;font-size:14px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 18px}
.mhead b{font-size:14px;text-transform:uppercase;letter-spacing:.02em;line-height:1.35}.mhead span{color:#fff;border-radius:6px;padding:4px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.mbody{padding:20px 22px 22px;display:flex;flex-direction:column;gap:16px;flex:1}
.mcover{border:1px solid;border-radius:10px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px}
.mcover svg{width:40px;height:40px;color:#0f8a5f}.mcover b{font:600 19px var(--sans)}.mcover span{color:var(--mut);font-size:13px}
.mopen{justify-content:center;padding:11px;font-size:15px;text-decoration:none;color:#fff;border-radius:8px}
.dsec{border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:16px}.dsec h4{margin:0 0 10px;color:#0d6b52;font-size:17px}
.kv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.kv2 div{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--line2);font-size:14px}.kv2 span{color:var(--mut)}
@media (max-width:640px){.kv2{grid-template-columns:1fr}}
.pbar{display:flex;justify-content:space-between;margin-bottom:12px;font-size:15px}
.prog.big{height:12px;border-radius:8px}.prog.big i{background:#0f9d63}
.ktiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:18px}
.ktile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 12px;text-align:center;display:flex;flex-direction:column;gap:6px}
.ktile span{font-size:13px;color:var(--mut)}.ktile b{font-size:28px;font-weight:700}
.ktile b.g{color:#0f9d63}.ktile b.mu{color:var(--mut)}.ktile b.b{color:#1a73e8}.ktile b.y{color:#c27c0e}.ktile b.r{color:var(--bad)}
@media (max-width:1100px){.ktiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sinfo{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sinfo div{display:flex;flex-direction:column;gap:4px}.sinfo span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}.sinfo b{font-size:16px}
@media (max-width:1100px){.sinfo{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.pgrid .dcard{margin-bottom:22px}
@media (max-width:1100px){.pgrid{grid-template-columns:1fr}}
.pitem{margin-bottom:12px}.pitem>div:first-child{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}.pitem b{color:#0f9d63}.pitem .prog{height:9px}.pitem .prog i{background:#0f9d63}
.alist{display:flex;flex-direction:column;gap:10px}.alist div{display:flex;justify-content:space-between;gap:12px;background:#f8f9fa;border-radius:8px;padding:11px 14px;font-size:14px}
:root[data-theme="dark"] .alist div{background:var(--hover)}
.alist b{color:#0f9d63}.alist b.b{color:#1a73e8}.alist b.t{color:#0f8a5f}
.quote{background:#f8f9fa;border-radius:10px;padding:14px 16px;font-style:italic;font-size:14px;color:var(--fg)}
:root[data-theme="dark"] .quote{background:var(--hover)}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.rhead>div{display:flex;gap:10px;align-items:center}.rhead b{font-size:16px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}.rgrid b{font-size:16px;display:block}
.rlbl{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.rtot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.rtot b{font-size:24px;color:#0f9d63}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.sgrid{grid-template-columns:1fr}}
.scat b{font-size:14px;text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:8px}.scat b svg{width:18px;height:18px;color:var(--brand)}
.scat p{color:var(--mut);font-size:14px;margin:8px 0 12px}.scat .lnk{font-size:14px}
.scat.link{all:unset;box-sizing:border-box;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px;display:block}.scat.link:hover{border-color:var(--brand)}
.ttabs{display:inline-flex;gap:6px}.ttabs button{border:0;border-radius:6px;padding:4px 10px;background:#f1f3f4;font-size:13px}.ttabs button.on{font-weight:600}.ttabs button.on.g{background:#e6f4ea;color:#0d7a4c}
.prog.big,.pitem .prog{display:block!important;height:12px!important;background:var(--neub);border-radius:8px;overflow:hidden;padding:0!important}.pitem .prog{height:9px!important}
.prog.big>i,.pitem .prog>i{display:block!important;height:100%!important;border-radius:8px;background:#0f9d63}
/* ===== Teacher portal: owner's design ===== */
.sbb.y{background:#fef7e0;color:#b06000}
.tchip.g{background:#d6f5e3;color:#0d7a4c}.tchip.y{background:#fef7e0;color:#b06000}.tchip.r{background:#fce8e6;color:#c5221f}.tchip.b{background:#e8f0fe;color:#1a73e8}
.sbme{display:flex;align-items:center;gap:10px;margin:18px 4px 4px;padding:12px 8px 4px;border-top:1px solid var(--line)}.sbme>div{flex:1;min-width:0}.sbme b{display:block;font-size:13.5px}.sbme small{color:var(--mut);font-size:11.5px}
.sbme .av{background:#00635D;color:#fff}
.bpill{display:inline-flex;align-items:center;gap:8px;border:1px solid #a7e3c6;background:#e9f7ee;color:#0d6b52;border-radius:20px;padding:5px 12px;font-size:12.5px;white-space:nowrap}
.bpill .ar{font:600 15px var(--ar)}.bpill svg{width:14px;height:14px}.bpill b{font-family:var(--mono);font-weight:600}
:root[data-theme="dark"] .bpill{background:var(--hover);border-color:var(--line);color:var(--fg)}
@media (max-width:900px){.bpill{display:none}}
.gpill{display:inline-flex;align-items:center;gap:6px;border:1px solid #a7e3c6;background:#e9f7ee;color:#0d6b52;border-radius:8px;padding:4px 10px;font-size:12.5px;font-weight:600;white-space:nowrap}
.gpill svg{width:14px;height:14px}.gpill .ar{font:600 14px var(--ar)}.gpill.sm{font-size:12px;vertical-align:middle;margin-left:6px}
:root[data-theme="dark"] .gpill{background:var(--hover);border-color:var(--line);color:var(--fg)}
.thero{background:var(--brand-gradient);color:#fff;border:0;border-radius:14px;padding:20px 22px;margin-bottom:18px}
.thero .fh-top{opacity:1;color:rgba(255,255,255,.84)}.thero .fh-top svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.thero h1{margin:12px 0 6px;font-size:26px;font-weight:700;letter-spacing:-.015em}.thero p{margin:0;color:rgba(255,255,255,.88);font-size:14.5px}
.hq{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:#e9f7ee;border:1px solid #c7ecd6;border-radius:10px;padding:10px 14px;font-size:13px;color:#0d6b52}
.hq .ar{font:600 17px var(--ar)}.hq svg{width:16px;height:16px}
:root[data-theme="dark"] .hq{background:var(--hover);border-color:var(--line);color:var(--fg)}
.tkpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.tkpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tkpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tkpi>span{font-size:13px;color:var(--mut)}.tkpi>b{font-size:28px;font-weight:700;line-height:1.15}.tkpi>small{font-size:12.5px;color:#0f8a5f}
.tkpi>b.g{color:#0f9d63}.tkpi>b.r{color:var(--bad)}.tkpi>b.b{color:#1a73e8}
@media (max-width:1100px){.tkpis,.tkpis.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tkpis,.tkpis.three{grid-template-columns:1fr}}
.dseg.sm button{padding:4px 11px;font-size:12.5px}.dh3 .dseg{text-transform:none;letter-spacing:0}
.dh3 .r{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.dh3 input[type=date],.dh3 input[type=month]{padding:6px 8px;border-radius:8px}
.dsrch{padding:9px 12px;border-radius:10px;min-width:260px}
.dtab tr.now td{background:#f0faf4}:root[data-theme="dark"] .dtab tr.now td{background:var(--hover)}
.tgrid2 td,.tgrid2 th{text-align:center;padding:10px 8px}.tgrid2 td.tm,.tgrid2 th:first-child{text-align:left;white-space:nowrap}
.tgrid2 th.tday{color:#0d7a4c;background:#e6f7ef}
.tgc{display:block;width:100%;min-width:92px;border:0;border-radius:6px;background:#b5e655;color:#1f3d0c;font:600 12.5px var(--mono);padding:6px 6px;margin:2px 0;line-height:1.25}
.tgc small{display:block;font-weight:500;font-size:10.5px;opacity:.8}.tgc:hover{filter:brightness(.95)}.tgc.c{background:#f6b8b0;color:#7a1a10}.tgc.d{opacity:.55}
.tarch>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line2)}.tarch>div:first-child{border-top:0}.tarch>div>div{min-width:0}
.athero{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}.athero>div:first-child{flex:1;min-width:260px}.up{letter-spacing:.06em;font-weight:600}
.abig{display:flex;align-items:center;gap:10px;font:700 34px var(--mono);margin:6px 0 2px}.abig svg{width:30px;height:30px;color:var(--mut)}
.atoday{border:1px solid var(--line);border-radius:14px;padding:16px 22px;min-width:220px;align-self:flex-start;display:flex;flex-direction:column;gap:6px}
.atoday span{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--mut);display:flex;gap:6px;align-items:center}.atoday span svg{width:15px;height:15px}
.atoday b{font:700 30px var(--mono)}.atoday small{color:var(--mut)}
.acnt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.acnt>div{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.acnt small{display:block;color:var(--mut);font-size:13px}.acnt b{font-size:26px}
.ai{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}.ai svg{width:20px;height:20px}
.ai.g{background:#e6f4ea;color:#137333}.ai.y{background:#fef7e0;color:#b06000}.ai.r{background:#fce8e6;color:#c5221f}.ai.b{background:#e8f0fe;color:#1a73e8}
@media (max-width:900px){.acnt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ahist{display:flex;flex-direction:column}.ahrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line2);flex-wrap:wrap}
.ahx{border:0;background:none;width:24px;color:var(--mut);font-size:14px}.ahd{width:56px}.ahd b{display:block;font-size:14px}.ahd small{color:var(--mut)}
.ahi{flex:1;min-width:200px}.ahrow>b.mono{font-size:14px}
.ahsub{margin:0 0 10px 38px;padding:10px 14px;background:#f8f9fa;border-radius:10px;font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:4px}
:root[data-theme="dark"] .ahsub{background:var(--hover)}
/* ===== Super Admin: owner's design (dark sidebar, governance screens) ===== */
.sb.sadark{background:#06201d;border-right-color:#06201d;color:#cbd5d1}
.sadark .brandrow{border-bottom:1px solid rgba(255,255,255,.08)}.sadark .brandrow b{color:#fff}.sadark .brandrow small{color:#6ee7b7}
.sadark h6{color:#6b8a85;font-size:10.5px;letter-spacing:.1em;margin:18px 12px 6px}
.sadark .mi,.sadark .grp{color:#cbd5d1;border-radius:8px;width:100%}.sadark .mi svg,.sadark .grp svg{color:#8fb3ad;opacity:1}
.sadark .mi:hover,.sadark .grp:hover{background:rgba(255,255,255,.06);color:#fff}
.sadark .mi.on{background:rgba(16,185,129,.16);color:#6ee7b7;font-weight:600}.sadark .mi.on svg{color:#6ee7b7}
.sadark .mi>span:nth-child(2){flex:1}.sadark .sub{border-left:1px solid rgba(255,255,255,.1);margin-left:20px}.sadark .sub .mi{font-size:13px}
.sadark .grp{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 12px;font-size:13.5px;text-align:left}.sadark .grp>span:nth-child(2){flex:1}
.car{font-size:11px;opacity:.7}
.sab{font-size:10.5px;font-weight:700;border-radius:10px;padding:1px 7px;background:rgba(255,255,255,.1);color:#cbd5d1}
.sab.g{background:rgba(16,185,129,.2);color:#6ee7b7}.sab.r{background:#e11d48;color:#fff}.sab.y{background:rgba(245,158,11,.22);color:#fcd34d}
.sadark .sbme{border-top-color:rgba(255,255,255,.1)}.sadark .sbme b{color:#fff}.sadark .sbme small{color:#8fb3ad}.sadark .sbme .ib{color:#fca5a5}
.tkh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:600}
.tkh i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}.tkh svg{width:16px;height:16px}
.tkpi>b small{font-size:13px;font-weight:500}
.stiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stile{border:0;border-radius:12px;color:#fff;text-align:left;padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-height:96px;cursor:pointer}
.stile span{font-size:13px;font-weight:600;opacity:.95}.stile b{font-size:28px;font-weight:700;line-height:1.1}.stile small{font-size:11.5px;opacity:.85}
.stile:hover{filter:brightness(1.07)}.stile.sup{background:var(--card);color:var(--fg);border:2px dashed #10b981}.stile.sup b{color:#0f8a5f}
@media (max-width:1000px){.stiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:18px}
.room{background:var(--card);border:1px solid var(--line);border-top:4px solid #94a3b8;border-radius:14px;padding:16px 18px}
.room.g{border-top-color:#10b981}.room.y{border-top-color:#f59e0b}.room.r{border-top-color:#dc2626}.room.b{border-top-color:#0ea5e9}
.room h3{margin:8px 0 4px;font-size:16px}.room p{margin:0;color:var(--mut);font-size:13.5px}
.rmh{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--mut)}
.room.g .rmh span:first-child{color:#059669}.room.y .rmh span:first-child{color:#b45309}.room.r .rmh span:first-child{color:#dc2626}
.livedot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#dc2626;margin-right:10px;vertical-align:middle;animation:pulse 1.6s infinite}
.ctags{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px}.ctags span{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:500}
.funnel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.funnel div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.funnel span{display:block;font-size:12px;color:var(--mut)}.funnel b{font-size:24px}
.funnel b.g{color:#059669}.funnel b.y{color:#b45309}.funnel b.b{color:#1a73e8}.funnel b.r{color:#dc2626}
@media (max-width:1000px){.funnel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ilist2 .iro{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line2)}.ilist2 .iro:first-child{border-top:0}