:root{color-scheme:light;--blue:#0356C5;--bg:#F3F7FD;--card:#fff;--ink:#10244a;--mute:#5a6b8c;--line:#dce6f5;--tint:#eef4fc;--grid:#dce6f5;--panel:#e6eefa;--nav:#e6eefa;--ponk:#10244a;--pmute:#5a6b8c;--prow:#ffffff;--prow2:#f2f7ff;--pseg:rgba(16,36,74,.08);--qab:rgba(3,86,197,.12);--qaink:#013a86;--detbg:linear-gradient(150deg,#ffffff,#e8f1fd);--detink:#10244a;--detmute:#4a5f85;--detchip:rgba(3,86,197,.08);--detline:rgba(3,86,197,.18);--pri:#0356C5;--pri2:#013a86;--amb:#ffb938;--grn:#0356C5;--red:#ec4c5a;--cor:#ff7a59;--shadow:0 1px 2px rgba(15,34,48,.04),0 10px 26px -14px rgba(15,34,48,.18);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--blue:#8FB4FF;--bg:#0F172A;--card:#1E293B;--ink:#e4eefb;--mute:#a9bed4;--line:#33415c;--grid:#35507a;--tint:#273549;--panel:#131F33;--nav:#131F33;--ponk:#e8f0fc;--pmute:#b9cbe4;--prow:rgba(255,255,255,.06);--prow2:rgba(255,255,255,.1);--pseg:rgba(255,255,255,.08);--qab:rgba(255,255,255,.14);--qaink:#fff;--detbg:linear-gradient(150deg,#0460d8,#03419b 70%,#0a1f4d);--detink:#fff;--detmute:#d7e6fb;--detchip:rgba(0,0,0,.18);--detline:rgba(255,255,255,.2);--pri:#2f6fe0;--pri2:#1e4fb0;--amb:#ffc65c;--grn:#5b8def;--red:#ff7b87;--cor:#ff8f70;--shadow:0 12px 30px -14px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{color-scheme:dark;--blue:#8FB4FF;--bg:#0F172A;--card:#1E293B;--ink:#e4eefb;--mute:#a9bed4;--line:#33415c;--grid:#35507a;--tint:#273549;--panel:#131F33;--nav:#131F33;--ponk:#e8f0fc;--pmute:#b9cbe4;--prow:rgba(255,255,255,.06);--prow2:rgba(255,255,255,.1);--pseg:rgba(255,255,255,.08);--qab:rgba(255,255,255,.14);--qaink:#fff;--detbg:linear-gradient(150deg,#0460d8,#03419b 70%,#0a1f4d);--detink:#fff;--detmute:#d7e6fb;--detchip:rgba(0,0,0,.18);--detline:rgba(255,255,255,.2);--pri:#2f6fe0;--pri2:#1e4fb0;--amb:#ffc65c;--grn:#5b8def;--red:#ff7b87;--cor:#ff8f70;--shadow:0 12px 30px -14px rgba(0,0,0,.7)}
html{height:100%}*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 420px at 10% -10%,#bcd7ff88,transparent),var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
[data-theme="dark"] body{background:radial-gradient(900px 420px at 10% -10%,#0a2a5e55,transparent),var(--bg)}
.wrap{max-width:1200px;margin:0 auto;padding:12px 16px 32px}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:18px}.acts{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;white-space:nowrap}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--mute);white-space:nowrap}
.logo{width:36px;height:36px;border-radius:12px;flex:none;background:linear-gradient(135deg,var(--pri),var(--pri2));display:grid;place-items:center}
nav{background:var(--nav);padding:4px;border-radius:999px;display:flex;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none;box-shadow:var(--shadow)}
nav button{border:0;background:none;color:var(--pmute);padding:7px 10px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
nav button:hover{color:var(--ponk)}nav button[aria-selected="true"]{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.ib{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;position:relative;color:var(--ink);font-size:17px;flex:none}
.ib svg{width:16px;height:16px}.ib i{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--cor);border:2px solid var(--card)}
.av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffd9a0,#ffb3c6);display:grid;place-items:center;font-weight:800;color:#5a2a3a;flex:none}
:focus-visible{outline:3px solid var(--amb);outline-offset:2px}
.panel{display:none}.panel.on{display:block;animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.on{animation:none}}
.top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px}
.ttl{display:flex;gap:14px;align-items:center}
.back{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:18px;cursor:pointer;flex:none}
h1{font-size:25px;letter-spacing:-.025em;margin:0;font-weight:800;line-height:1.15}.sub{color:var(--mute);margin:2px 0 0}
.btn{border:0;border-radius:14px;padding:9px 18px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 10px 22px -10px var(--pri)}
.btn.s{padding:6px 12px;font-size:12px;background:var(--tint);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn.w{background:transparent;color:#0356C5;box-shadow:none;border:2px solid rgba(3,86,197,.5)}.btn.w:hover{background:rgba(3,86,197,.08);box-shadow:none;transform:translateY(-1px)}.btn.w:active{background:rgba(3,86,197,.15);box-shadow:none}.btn.g{background:rgba(3,86,197,.12);color:#013a86;box-shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.w{color:#fff;border-color:rgba(255,255,255,.7)}:root:not([data-theme="light"]) .btn.w:hover{background:rgba(255,255,255,.14)}:root:not([data-theme="light"]) .btn.w:active{background:rgba(255,255,255,.22)}:root:not([data-theme="light"]) .btn.g{background:rgba(255,255,255,.16);color:#fff}}
:root[data-theme="dark"] .btn.w{color:#fff;border-color:rgba(255,255,255,.7)}:root[data-theme="dark"] .btn.w:hover{background:rgba(255,255,255,.14)}:root[data-theme="dark"] .btn.w:active{background:rgba(255,255,255,.22)}:root[data-theme="dark"] .btn.g{background:rgba(255,255,255,.16);color:#fff}.btn.soft{background:#ffe3bd;color:#5a3400;box-shadow:none}
.grid{display:grid;gap:12px;margin-bottom:14px}.k4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1.3fr 1fr}.g3{grid-template-columns:1.3fr 1fr 1fr}
.card{background:var(--card);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);border:1px solid var(--line);min-width:0}
.card h3{margin:0 0 10px;font-size:14.5px}.card h3 small{font-weight:500;color:var(--mute);margin-left:6px}
.kpi .row1{display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-weight:600;font-size:12.5px;margin-bottom:4px}
.kpi .chip{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.kpi .num{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.kpi .d{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px}
.kpi svg.mini{width:100%;height:34px;margin-top:8px;display:block}
.stack{display:flex;margin-top:8px}.stack span{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);margin-left:-8px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#3a2230}.stack span:first-child{margin:0}
.up{background:#dce9ff;color:#0356C5}.dn{background:#fde2e5;color:#bf3041}.nu{background:var(--tint);color:var(--mute)}
.pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.p-r{background:#fde2e5;color:#bf3041}.p-y{background:#fff0d1;color:#8a5a00}.p-g{background:#dce9ff;color:#0356C5}
[data-theme="dark"] .p-r,[data-theme="dark"] .dn{background:#4a2230;color:#ffb3bb}[data-theme="dark"] .p-y{background:#40330f;color:#ffd98a}[data-theme="dark"] .p-g,[data-theme="dark"] .up{background:#16283f;color:#9dc1ff}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:13px}
.filters b{display:inline-flex;align-items:center;gap:8px;font-weight:700}.filters b i{background:var(--pri);color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-style:normal;font-size:11px}
.filters select,.filters input{width:auto;min-width:130px;flex:1;max-width:220px;border-radius:12px;background:var(--card);padding:8px 12px}
.big{background:var(--panel);border-radius:22px;padding:22px;display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;margin-bottom:16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.lhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:var(--ponk);flex-wrap:wrap;gap:8px}.lhead h3{margin:0;font-size:15px;color:var(--ponk)}
.seg{display:flex;background:var(--pseg);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:none;color:var(--pmute);font:inherit;font-weight:600;font-size:12px;padding:5px 10px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:#013a86}
.slist{display:grid;gap:10px;align-content:start}
.srow{display:flex;gap:10px;align-items:center;width:100%;padding:13px 14px;border-radius:14px;border:0;background:var(--prow);color:var(--ponk);font:inherit;text-align:left;cursor:pointer}
.srow:hover{background:var(--prow2)}.srow[aria-pressed="true"]{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 10px 24px -12px #000}
.srow .t{flex:1;min-width:0}.srow b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srow small{display:block;font-size:12px;color:var(--pmute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srow[aria-pressed="true"] small{color:#d7e6fb}
.srow .av{width:32px;height:32px;font-size:13px}
.det{background:var(--detbg);border:1px solid var(--detline);border-radius:18px;padding:22px;color:var(--detink);display:flex;flex-direction:column;gap:12px;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
.det::-webkit-scrollbar{display:none;width:0;height:0}
.det .hd{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.det .hd .av{width:44px;height:44px;font-size:17px}
.det h2{margin:0;font-size:18px}.det .m{color:var(--detmute);font-size:12px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.chips div{background:var(--detchip);border-radius:12px;padding:9px 10px;font-size:11.5px;color:var(--detmute)}.chips b{display:block;font-size:17px;color:var(--detink)}
.nt{list-style:none;margin:0;padding:0;display:grid;gap:6px}.nt li{background:var(--detchip);padding:8px 10px;border-radius:10px;font-size:12.5px}.nt li small{display:block;color:var(--detmute)}
.dash{border:2px dashed var(--detline);border-radius:12px;background:var(--detchip);color:var(--detink);font:inherit;font-size:13px;font-weight:600;padding:10px;cursor:pointer}
.ft{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--detline);padding-top:10px}.ft .m b{display:block;color:var(--detink);font-size:14px}
.item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:var(--tint);margin-bottom:8px;flex-wrap:wrap;font-size:13px}.item .t{flex:1;min-width:120px}.item small{display:block;color:var(--mute)}
.empty{text-align:center;color:var(--mute);padding:12px}
.chart{width:100%;height:auto;display:block}.chart circle{fill:var(--card)}
.bars{display:flex;align-items:flex-end;gap:12px;height:140px}.bars div{flex:1;text-align:center;font-size:12px;color:var(--mute);height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.bars span{display:block;border-radius:12px;background:linear-gradient(var(--pri2),var(--pri));margin-bottom:8px}.bars .a span{background:linear-gradient(#ffd27a,var(--amb))}
.ring{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}.ring svg{width:112px;height:112px;transform:rotate(-90deg)}
.lg div{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px}.lg b{width:10px;height:10px;border-radius:3px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px}th{color:var(--mute);font-weight:600;font-size:12px}tr:last-child td{border:0}
.lock{display:inline-flex;gap:6px;background:var(--tint);border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-size:12.5px;font-weight:600;margin-bottom:12px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%}
label{display:block;font-weight:600;margin:12px 0 5px;font-size:13px}.frm{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
[data-theme="dark"] .phone{background:transparent}
[data-theme="dark"] .pc{background:rgba(12,20,38,.78);border-color:rgba(158,176,206,.22);box-shadow:0 8px 20px -12px rgba(0,0,0,.6)}
[data-theme="dark"] .pc h3{color:var(--ink)}
[data-theme="dark"] .pc .sub{color:var(--mute)}
[data-theme="dark"] .phone .item{background:#111d36;border:0}
[data-theme="dark"] .phone .item small{color:var(--mute)}
[data-theme="dark"] .phone input[type=text],[data-theme="dark"] .phone input[type=search],[data-theme="dark"] .phone input:not([type]),[data-theme="dark"] .phone textarea{background:#0d1830;border-color:#2b3a55;color:var(--ink)}
[data-theme="dark"] .licb{color:#9dc1ff}
[data-theme="dark"] .art{min-height:44px;background:#111d36;color:var(--ink)}
[data-theme="dark"] .art svg{color:#9db8dd}
[data-theme="dark"] .ds-name,[data-theme="dark"] .qtag,[data-theme="dark"] .stab.act,[data-theme="dark"] .ibx-menuit:hover,[data-theme="dark"] .ibx-btn{color:#8FB4FF}[data-theme="dark"] .ibx-btn{border-color:#8FB4FF}
[data-theme="dark"] .phone h1{color:#f6dee7}
[data-theme="dark"] .stu-mode{color:#f2b8c9;border-color:rgba(255,255,255,.22)}
[data-theme="dark"] .stu-mode.act{color:#a02c55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .licb{color:#9dc1ff}:root:not([data-theme="light"]) .ds-name,:root:not([data-theme="light"]) .qtag,:root:not([data-theme="light"]) .ibx-menuit:hover,:root:not([data-theme="light"]) .ibx-btn{color:#8FB4FF}:root:not([data-theme="light"]) .ibx-btn{border-color:#8FB4FF}}
.opts{display:grid;gap:7px;margin:10px 0}.opts label{display:flex;gap:9px;align-items:center;font-weight:500;margin:0;padding:10px 12px;border-radius:12px;background:#fff3e6;color:#2a2340}.opts input{width:auto}
dialog .opts label{background:var(--tint);color:var(--ink)}
.log{padding:0;margin:0}.log li{list-style:none;display:flex;gap:12px;padding:10px 0;font-size:13px;border-bottom:1px solid var(--line)}.log li:last-child{border:0}.log i{width:10px;height:10px;border-radius:50%;background:var(--pri);margin-top:6px;flex:none}.log small{display:block;color:var(--mute)}
dialog{border:0;border-radius:18px;padding:18px;max-width:440px;width:92%;background:var(--card);color:var(--ink)}dialog::backdrop{background:rgba(5,16,20,.62);backdrop-filter:blur(3px)}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:#0a1830;color:#fff;padding:10px 16px;font-size:13px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:9}.toast.s{opacity:1;transform:translateX(-50%)}
.prog{height:7px;border-radius:9px;background:var(--line);margin-top:10px;overflow:hidden}.prog i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--pri),var(--pri2))}
.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;max-width:820px;margin:0 auto}.side{display:grid;gap:16px}
.chk{list-style:none;padding:0;margin:0;display:grid;gap:12px}.chk li{display:flex;gap:10px;align-items:flex-start}.chk li::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--tint);color:var(--pri);display:grid;place-items:center;font-weight:800;flex:none;font-size:12px}
.tb{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.tb .lock{margin:0}.tbf{display:flex;gap:10px;flex:1;justify-content:flex-end;min-width:240px}.tbf input,.tbf select{width:auto;flex:1;max-width:220px;border-radius:999px}
tbody tr:hover{background:var(--tint)}
.sw{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;font-size:13px;border-bottom:1px solid var(--line)}.sw:last-child{border:0}.sw small{display:block;color:var(--mute)}
.sw input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;padding:0;border:0;flex:none;transition:.2s}.sw input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.sw input:checked{background:var(--pri)}.sw input:checked::after{left:23px}
.foot{text-align:center;color:var(--mute);font-size:11.5px;margin:0 0 24px}
.btn{transition:transform .15s ease,box-shadow .15s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px var(--pri),0 0 0 4px rgba(3,86,197,.18)}.btn:active{transform:translateY(1px) scale(.97);box-shadow:0 4px 10px -6px var(--pri),inset 0 2px 8px rgba(0,0,0,.3)}
[data-theme="dark"] .btn:hover{box-shadow:0 16px 30px -10px var(--pri),0 0 0 4px rgba(61,123,239,.4)}.btn.s:hover{border-color:var(--pri);box-shadow:none}.btn[disabled]{opacity:.85;cursor:default;transform:none}
.btn.s,.seg button,.filters select,.filters input,.tbf input,.tbf select{min-height:38px}
.work{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;margin-bottom:14px;align-items:start}.work .big{margin:0}
.side2{padding:12px}.tabs2{display:flex;gap:6px;margin-bottom:10px;background:var(--tint);padding:4px;border-radius:999px}.tabs2 button{flex:1;border:0;background:none;color:var(--mute);font:inherit;font-size:13px;font-weight:700;border-radius:999px;cursor:pointer;min-height:36px}.tabs2 button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}.tabs2 i{font-style:normal;background:var(--cor);color:#fff;border-radius:99px;padding:1px 7px;font-size:11px;margin-left:4px}
.empty svg{color:var(--mute);margin-bottom:6px}
.sr{position:relative}.qa{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;gap:4px;background:var(--card);border:1px solid var(--line);padding:3px;border-radius:999px;box-shadow:0 8px 20px -6px #000}.sr:hover .qa,.sr:focus-within .qa{display:flex}.sr:hover .pill,.sr:focus-within .pill{visibility:hidden}
.qa button{width:36px;height:36px;border:0;border-radius:50%;background:var(--qab);color:var(--qaink);font-size:15px;cursor:pointer}.qa button:hover{background:var(--pri);color:#fff}.qa button[disabled]{background:var(--pri);cursor:default;color:#fff}
.det{max-height:560px;overflow-y:auto}.det>*{flex:none}.sh{font-weight:700;color:var(--detink);font-size:13px;margin-bottom:4px}.m2{margin:0;color:var(--detmute);font-size:13px}
[data-theme="dark"] .big{border-color:#2b3f66}[data-theme="dark"] .chart path[stroke]{filter:drop-shadow(0 0 5px #3d7befaa)}
svg.mini path.glowline{filter:drop-shadow(0 0 4px rgba(255,107,61,.8))}
[data-theme="dark"] svg.mini path.glowline{stroke:#ff8a5c;filter:drop-shadow(0 0 7px rgba(255,122,69,.95))}
[data-theme="dark"] .chart text{fill:var(--mute)}
.gs{position:relative}.gs input{width:220px;border-radius:12px;background:var(--card);min-height:44px;padding:8px 14px}.gr,.npop{position:absolute;right:0;top:46px;width:min(380px,92vw);background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:8px;z-index:20}.gr[hidden],.npop[hidden]{display:none}@media (max-width:700px){.gr,.npop{position:fixed;right:8px;left:8px;top:60px;width:auto;max-height:70vh;overflow:auto}}
.nwrap{position:relative}.nph{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px}
.ni{display:flex;gap:10px;width:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;padding:7px 9px;border-radius:12px;cursor:pointer;min-height:38px;align-items:center}.ni:hover{background:var(--tint)}.ni i{font-style:normal;width:36px;height:36px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex:none;position:static;border:0}.ni small{display:block;color:var(--mute)}
@media (max-width:760px){.gs{display:none}}
.fab{position:fixed;right:20px;bottom:calc(22px + env(safe-area-inset-bottom,0px));width:50px;height:50px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--cor),#ff9d3d);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 14px 30px -10px #ff7a59;z-index:8}.fab:hover{transform:scale(1.06)}
dialog .hint{display:block;color:var(--mute);font-size:12px;margin-top:6px}
dialog.full{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:0;background:var(--bg)}.wsin{max-width:1040px;margin:0 auto;padding:16px 20px}.wsh{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}.wsh h2{margin:0;font-size:20px}.wsh .m{color:var(--mute);font-size:12.5px}.tmr{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 14px}
.wsg{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}@media (max-width:800px){.wsg{grid-template-columns:1fr}}.wsr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.wsr div{background:var(--tint);border-radius:12px;padding:8px 10px;color:var(--mute);font-size:12px}.wsr b{display:block;font-size:17px;color:var(--ink)}.hist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}.hist li{background:var(--tint);padding:8px 10px;border-radius:10px;font-size:13px}.hist small{display:block;color:var(--mute)}
@media (max-width:1020px){.work{grid-template-columns:1fr}}
@media (max-width:700px){.big{grid-template-columns:1fr}}
@media (max-width:1000px){.bar{grid-template-columns:1fr auto}nav{order:3;grid-column:1/-1;width:100%;justify-content:center}}
@media (max-width:900px){
 .bar{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
 .bar nav{min-width:0}
 .acts{min-width:0;flex-wrap:wrap}
 .gs{min-width:0;flex:0 1 140px}
 .gs input{width:100%;min-width:0}
 .top .cls-badge{white-space:normal}
 .ibx-search input{min-width:0}
 select#peran{max-width:104px}
}
@media (max-width:900px){.k4{grid-template-columns:1fr 1fr}.g2,.g3,.stage{grid-template-columns:1fr}.stage .phone{order:-1}.frm{grid-template-columns:1fr}}
@media (max-width:480px){.k4{grid-template-columns:1fr}h1{font-size:24px}.wrap{padding:14px 14px 40px}.brand small{display:none}.top .btn{width:100%}.big{padding:14px;border-radius:26px}.acts{gap:5px}.acts .role-label{display:none}}
@media print{nav,.bar,.btn{display:none}}

/* Revisi: teks panjang, micro-interaction halus */
.ni span{flex:1;min-width:0}
.ni b,.ni small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det h2{overflow-wrap:anywhere}
.det .hd>div{min-width:0}
.gr:not([hidden]),.npop:not([hidden]){animation:in .22s ease}
dialog[open]{animation:in .25s ease}
.slist .sr{animation:in .28s ease}
#tj:not([hidden]),#ta:not([hidden]){animation:in .28s ease}
.seg button,.tabs2 button{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
nav button{transition:color .2s ease,background .2s ease}
.srow{transition:background .2s ease}
.ib,.back{transition:transform .15s ease,box-shadow .15s ease}
.ib:hover,.back:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.art{transition:transform .15s ease,box-shadow .15s ease}
.art:hover{transform:translateY(-1px);box-shadow:0 8px 16px -10px rgba(60,30,60,.4)}
.dash{transition:background .2s ease}
.dash:hover{background:var(--detline)}
@media (prefers-reduced-motion:reduce){.gr:not([hidden]),.npop:not([hidden]),dialog[open],.slist .sr,#tj:not([hidden]),#ta:not([hidden]){animation:none}}

/* Revisi: ikon SVG pengganti glyph emoji */
.qa button{display:grid;place-items:center}.qa button svg{width:18px;height:18px}
.fab{display:grid;place-items:center}.fab svg{width:22px;height:22px}
.chip svg{width:14px;height:14px}
.ni i svg{width:16px;height:16px}
.lock svg{width:12px;height:12px}
.art svg{width:15px;height:15px;vertical-align:-2px;margin-right:2px}
.det .m svg,.wsh .m svg{width:12px;height:12px;vertical-align:-1px}
dialog h3 svg{width:15px;height:15px;vertical-align:-2px;margin-right:2px}

/* MOCKUP C: panel tengah putih/abu terang, teks mute lebih gelap, shadow konsisten, tombol utama paling mencolok */
:root[data-theme="light"]{--mute:#46577c;--pmute:#46577c;--detmute:#3f5378}
:root[data-theme="light"] .big{
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:22px;gap:18px;
}
:root[data-theme="light"] .big .slist{gap:8px}
:root[data-theme="light"] .big .srow{background:#f2f6fc;padding:11px 12px}
:root[data-theme="light"] .big .srow:hover{background:#e7effa}
:root[data-theme="light"] .big .srow[aria-pressed="true"]{background:linear-gradient(135deg,#0356C5,#013a86);color:#fff;box-shadow:0 10px 24px -10px rgba(1,42,110,.55)}
:root[data-theme="light"] .big .srow[aria-pressed="true"] small{color:#cfe2ff}
:root[data-theme="light"] .big .seg{background:#eef3fa}
:root[data-theme="light"] .big .seg button{color:#46577c}
:root[data-theme="light"] .big .seg button[aria-pressed="true"]{background:#0356C5;color:#fff}
:root[data-theme="light"] .big .det{
  background:#f7fafe;border:1px solid var(--line);box-shadow:var(--shadow);
  padding:22px;gap:12px;
}
:root[data-theme="light"] .side2{box-shadow:var(--shadow)}
:root[data-theme="light"] .btn:not(.s):not(.w):not(.g):not(.soft){
  background:linear-gradient(135deg,#0460d8,#013a86);
  box-shadow:0 12px 26px -8px rgba(3,86,197,.6),0 0 0 1px rgba(3,86,197,.12);
}

/* Revisi final: 7 poin user (hierarki tombol, kontras, spasi, badge, alignment, ikon KPI, FAB biru) */
/* 2. Kontras sub-teks: slate medium-gelap (#475569, keluarga slate yang diminta, lebih gelap dari contoh demi keterbacaan) */
:root[data-theme="light"]{--mute:#334155;--pmute:#334155;--detmute:#334155}
/* 1. Hierarki tombol di kartu detail: "Mulai Sesi" jadi solid primary, "Panggil Siswa" jadi outline sekunder */
.det .ft .btn.w{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border:0;box-shadow:0 10px 22px -10px rgba(3,86,197,.6)}
.det .ft .btn.w:hover{background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 14px 28px -10px rgba(3,86,197,.65)}
.det .ft .btn.g{background:transparent;color:#0356C5;border:2px solid rgba(3,86,197,.5);box-shadow:none}
.det .ft .btn.g:hover{background:rgba(3,86,197,.08);box-shadow:none}
:root[data-theme="dark"] .det .ft .btn.g{background:transparent;color:#cfe2ff;border:2px solid rgba(207,226,255,.55)}
:root[data-theme="dark"] .det .ft .btn.g:hover{background:rgba(207,226,255,.12);box-shadow:none}
/* 3. Spasi panel kiri: baris lebih lega */
:root[data-theme="light"] .big .slist{gap:10px}
:root[data-theme="light"] .big .srow{padding:13px 14px}
:root[data-theme="light"] .big .srow small{font-size:12px}
/* 4. Badge risiko pada baris terpilih (biru): putih solid dengan teks berwarna */
.srow[aria-pressed="true"] .pill{background:#fff}
[data-theme="dark"] .srow[aria-pressed="true"] .pill.p-r{background:#fff;color:#bf3041}
[data-theme="dark"] .srow[aria-pressed="true"] .pill.p-y{background:#fff;color:#8a5a00}
[data-theme="dark"] .srow[aria-pressed="true"] .pill.p-g{background:#fff;color:#0356C5}
/* 5. Alignment: jarak antar kolom seragam 24px; tombol kecil panel kanan diperbesar */
.work{gap:24px}
:root[data-theme="light"] .big{gap:24px}
.side2 .btn.s{padding:8px 16px;font-size:12.5px;min-height:44px}
/* 6. Ikon KPI: badge circle rata tengah dengan judul (align-items:center sudah ada; perhalus ukuran) */
.kpi .row1{align-items:center}
.kpi .chip{width:26px;height:26px}
/* 7. FAB oranye -> biru brand */
.fab{background:linear-gradient(135deg,#0460d8,#013a86);box-shadow:0 14px 30px -10px rgba(3,86,197,.65)}

/* Revisi: target klik/sentuh >=44px untuk kontrol kecil, visual tetap kompak via hit-area transparan */
@media (pointer:coarse){nav button,.seg button,.tabbtn,.ibx-chip,.ibx-mtab,.ibx-menuit,.ibx-btn,.ibx-qchip,.ibx-send,.pagination button,.k-row-actions button{min-height:44px}.pagination button{min-width:44px}}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn.s,.seg button,.tabs2 button,.ni,.ib,.back,nav button{position:relative}
.btn.s::after,.seg button::after,.ni::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.tabs2 button::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.ib::after,.back::after{content:"";position:absolute;inset:-3px}
nav button::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.filters select,.filters input,.tbf input,.tbf select,.gs input{min-height:44px}
.qa button{width:40px;height:40px;position:relative}
.qa button::after{content:"";position:absolute;inset:-2px}

/* Revisi Tugas 1 & 2 (30 Okt): sidebar dua kartu, kontras teks, tombol catatan, grafik biru, badge, isi donat */
/* T1.2 kolom kanan: Jadwal di atas, Pesan & Curhat Anonim di bawah */
.sidecol{display:grid;gap:24px;align-content:start}
.side2 .lhead{margin-bottom:10px}
.side2 h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.cnt{font-style:normal;background:var(--cor);color:#fff;border-radius:99px;padding:1px 7px;font-size:11px}
/* T1.4 tombol + Tambah catatan: tanpa garis putus-putus, latar biru sangat muda */
.dash{border:0;background:#e8f0fc;color:#013a86;font-weight:700}
.dash:hover{background:#d9e7fa}
[data-theme="dark"] .dash{background:rgba(255,255,255,.1);color:#d7e6fb}
[data-theme="dark"] .dash:hover{background:rgba(255,255,255,.16)}
/* T2.1 grafik batang satu keluarga biru (muda -> tua) */
.bars div:nth-child(1) span{background:linear-gradient(#a9c6f5,#8db2ee)}
.bars div:nth-child(2) span{background:linear-gradient(#5b8def,#4a7fe0)}
.bars div:nth-child(3) span{background:linear-gradient(#0460d8,#013a86)}
/* T2.2 teks delta KPI kepsek rata kiri sejajar angka */
#kepsek .kpi .d{background:none;padding-left:0;padding-right:0}
/* T2.3 badge: teks lebih gelap */
.p-y{color:#9a3412}
.p-g{color:#013a86}
/* T2.4 isi tengah donat */
.ringc{position:relative;display:grid;place-items:center}
.ringc-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.ringc-t b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1}
.ringc-t span{font-size:10px;font-weight:600;color:var(--mute);margin-top:3px}

/* Revisi 30 Okt (2): checklist profesional - token semantik, kontras AA, kedalaman, tipografi, FAB kalem */
/* Design tokens status semantik: dipakai persis sama di kedua mode, hanya brightness disesuaikan */
:root{--ok-bg:#dcf5e5;--ok-ink:#14663a;--warn-bg:#fff0d1;--warn-ink:#9a3412;--danger-bg:#fde2e5;--danger-ink:#bf3041}
:root[data-theme="dark"],:root:not([data-theme="light"]){--ok-bg:#16382a;--ok-ink:#8fe3b0;--warn-bg:#40330f;--warn-ink:#ffd98a;--danger-bg:#4a2230;--danger-ink:#ffb3bb}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--ok-bg:#dcf5e5;--ok-ink:#14663a;--warn-bg:#fff0d1;--warn-ink:#9a3412;--danger-bg:#fde2e5;--danger-ink:#bf3041}}
/* 2. Badge status: Rendah/Aman = hijau (bukan biru brand), Sedang = kuning, Tinggi = merah, sama di light & dark */
.p-g{background:var(--ok-bg);color:var(--ok-ink)}
.p-y{background:var(--warn-bg);color:var(--warn-ink)}
.p-r{background:var(--danger-bg);color:var(--danger-ink)}
[data-theme="dark"] .p-g{background:var(--ok-bg);color:var(--ok-ink)}
[data-theme="dark"] .p-y{background:var(--warn-bg);color:var(--warn-ink)}
[data-theme="dark"] .p-r{background:var(--danger-bg);color:var(--danger-ink)}
/* Badge pada baris siswa terpilih (biru): chip putih dengan teks warna status yang sama */
.srow[aria-pressed="true"] .pill.p-g,[data-theme="dark"] .srow[aria-pressed="true"] .pill.p-g{background:#fff;color:#14663a}
.srow[aria-pressed="true"] .pill.p-y,[data-theme="dark"] .srow[aria-pressed="true"] .pill.p-y{background:#fff;color:#9a3412}
.srow[aria-pressed="true"] .pill.p-r,[data-theme="dark"] .srow[aria-pressed="true"] .pill.p-r{background:#fff;color:#bf3041}
/* 1a. Kontras chips profil (mode terang): label slate gelap pekat, angka navy */
:root[data-theme="light"] .chips div,:root:not([data-theme="dark"]) .chips div{color:#2f3f5c}
.chips b{color:#0f1f3d;margin:0 0 4px}
[data-theme="dark"] .chips b{color:#fff}
/* 4. Tipografi: napas antara angka dan label di chips + label sedikit lebih besar */
.chips div{font-size:12px;line-height:1.45;padding:10px 11px}
/* 1b. Kontras mode gelap: keterangan waktu panel Pesan & Jadwal dinaikkan mendekati putih 70% */
[data-theme="dark"] .side2 .item small{color:#cfdaeb}
[data-theme="dark"] .ni small{color:#cfdaeb}
/* 3a. Kedalaman mode gelap: kartu detail diberi stroke biru terang + bayangan agar melayang */
[data-theme="dark"] .big .det{border:1px solid rgba(125,178,255,.55);box-shadow:0 18px 44px -16px rgba(0,0,0,.85),0 0 0 1px rgba(125,178,255,.14)}
/* 3b. Kedalaman mode terang: bayangan kartu sedikit lebih tebal di bawah */
:root{--shadow:0 1px 2px rgba(15,34,48,.06),0 16px 34px -14px rgba(15,34,48,.30)}
/* 5. FAB catatan cepat dibuat kalem: tidak menyaingi tombol Mulai Sesi, tetap >=44px */
.fab{background:var(--card);color:var(--mute);border:1px solid var(--line);box-shadow:var(--shadow)}
.fab:hover{color:var(--pri);border-color:var(--pri);transform:translateY(-2px)}
[data-theme="dark"] .fab{background:#0e1a2e;color:#b9cbe4;border-color:#2b3a55}
[data-theme="dark"] .fab:hover{color:#fff;border-color:#5b8def}
/* Koreksi cascade: angka chips mengikuti token tema (aman untuk mode otomatis), aturan terang hanya untuk konteks terang */
.chips b{color:var(--detink);margin:0 0 4px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chips div{color:var(--detmute)}:root:not([data-theme="light"]) .chips b{color:var(--detink)}:root:not([data-theme="light"]) .side2 .item small{color:#cfdaeb}:root:not([data-theme="light"]) .big .det{border:1px solid rgba(125,178,255,.55);box-shadow:0 18px 44px -16px rgba(0,0,0,.85),0 0 0 1px rgba(125,178,255,.14)}:root:not([data-theme="light"]) .fab{background:#0e1a2e;color:#b9cbe4;border-color:#2b3a55}}

/* Revisi 30 Okt (3): nyaman & profesional - tombol catatan tanpa garis, napas baris siswa, kartu gelap terpisah, label statistik dicerahkan */
/* Terang 1: tombol "+ Tambah catatan" = blok biru muda polos, tanpa garis sama sekali */
.dash{border:0;box-shadow:none;background:#e8f0fc;color:#013a86;font-weight:700;padding:11px 12px;border-radius:12px}
.dash:hover{background:#d9e7fa}
[data-theme="dark"] .dash{background:rgba(255,255,255,.12);color:#eaf2fd}
[data-theme="dark"] .dash:hover{background:rgba(255,255,255,.18)}
/* Terang 2: napas antara teks nama siswa (kiri) dan label status (kanan) agar tidak sesak; jarak avatar tetap, tambahan jarak khusus sebelum label */
.srow{gap:10px}
.srow .pill{flex:none;margin-left:8px}
/* Gelap 1: keterangan waktu di Pesan & Curhat Anonim, Jadwal, dan notifikasi dicerahkan (putih ~80%) */
[data-theme="dark"] .side2 .item small{color:#dbe4f2}
[data-theme="dark"] .ni small{color:#dbe4f2}
/* Gelap 2: setiap kartu diberi garis tepi abu-abu transparan agar terpisah dari latar */
[data-theme="dark"] .card{border-color:rgba(158,176,206,.34)}
[data-theme="dark"] .big{border-color:rgba(158,176,206,.38)}
[data-theme="dark"] .item{border:1px solid rgba(158,176,206,.16)}
[data-theme="dark"] .phone .item{border:0}
/* Gelap 3: label statistik di kotak biru profil (Sesi/Kehadiran/Tindak lanjut) dicerahkan */
[data-theme="dark"] .chips div{color:#eef4fd;font-weight:500}
[data-theme="dark"] .det .m,[data-theme="dark"] .nt li small{color:#e2ecfa}
/* Varian gelap otomatis (belum memilih tema eksplisit): aturan yang sama */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dash{background:rgba(255,255,255,.12);color:#eaf2fd}:root:not([data-theme="light"]) .dash:hover{background:rgba(255,255,255,.18)}:root:not([data-theme="light"]) .side2 .item small{color:#dbe4f2}:root:not([data-theme="light"]) .ni small{color:#dbe4f2}:root:not([data-theme="light"]) .card{border-color:rgba(158,176,206,.34)}:root:not([data-theme="light"]) .big{border-color:rgba(158,176,206,.38)}:root:not([data-theme="light"]) .item{border:1px solid rgba(158,176,206,.16)}:root:not([data-theme="light"]) .phone .item{border:0}:root:not([data-theme="light"]) .chips div{color:#eef4fd;font-weight:500}:root:not([data-theme="light"]) .det .m,:root:not([data-theme="light"]) .nt li small{color:#e2ecfa}}

/* Perbaikan 30 Okt (4): gutter antar kolom - baris siswa tidak boleh melebihi kolom 320px */
.sr{min-width:0}
.srow{min-width:0}

/* Revisi 30 Okt (5): layar Mulai Sesi - latar lebih bersih, kartu putih berbayang, border kotak catatan, label Sisa waktu, tag cepat */
:root:not([data-theme="dark"]) dialog.full{background:#f6f8fc}
:root:not([data-theme="dark"]) .wsin .card{background:#fff;box-shadow:0 2px 6px rgba(15,34,48,.06),0 14px 30px -16px rgba(15,34,48,.18)}
:root:not([data-theme="dark"]) .wsin textarea{background:#fff;border:1px solid #c9d6ec}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) dialog.full{background:var(--bg)}:root:not([data-theme="light"]) .wsin .card{background:var(--card);box-shadow:var(--shadow)}:root:not([data-theme="light"]) .wsin textarea{background:var(--tint);border-color:var(--line)}}
.tmr{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;padding:6px 16px;min-height:44px}
.tmr small{font-size:10.5px;font-weight:600;color:var(--mute);letter-spacing:.02em}
.qtags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.qtags>span{font-size:12px;color:var(--mute)}
.qtag{border:1px solid var(--line);background:var(--card);color:var(--pri2);border-radius:14px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.qtag:hover{border-color:var(--pri);background:var(--tint)}
[data-theme="dark"] .qtag{color:#9dc1ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .qtag{color:#9dc1ff}}
.dur{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 12px 0 10px;min-height:44px}
.dur input{border:0;background:transparent;width:48px;padding:9px 0;font:inherit;color:var(--ink);text-align:right}
.dur>span{font-size:12px;font-weight:600;color:var(--mute)}

[hidden]{display:none!important}
#peran{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--card,transparent);color:inherit;font:inherit}
@media print{.bar,.fab,.back,.foot,.btn{display:none!important}.panel{display:none!important}.panel.on{display:block!important}}

#lock{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ===== Lapisan animasi (motion layer) ===== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* 1. Hover: transisi warna halus 0.3 dtk */
.btn,.ib,.back,.art,.item,.srow,nav button,.seg button,.tabs2 button{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,filter .3s ease,transform .2s ease}
.btn:hover{filter:brightness(1.1)}
.item:hover,.srow:hover{filter:brightness(.97)}
/* 2. Entrance: fade-in + slide-up saat halaman dibuka */
.panel.on{animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
/* 3. Staggered: kartu muncul bergantian (--i diatur script) */
.panel.on .card{animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc((var(--i,0) + 1)*100ms)}
/* 4. Page transition antar halaman (View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease}
/* 5. Active state: tombol mengecil 95% saat ditekan */
.btn:active,.ib:active,.back:active,nav button:active,.seg button:active,.tabs2 button:active{transform:scale(.95);transition-duration:.08s}
@media (prefers-reduced-motion:reduce){.panel.on,.panel.on .card{animation:none}.btn:active,.ib:active,.back:active,nav button:active{transform:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Kanban */
.kb{display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:12px;overflow-x:auto;padding:4px 0}
.kcol{background:var(--tint);border:1px dashed var(--line);border-radius:14px;padding:10px;min-height:170px;transition:background-color .3s,border-color .3s}
.kcol.over{border-color:#0356C5;background:var(--panel)}
.kcol h4{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}.kcol h4 i{font-style:normal;font-size:12px;color:var(--mute)}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;cursor:grab;box-shadow:var(--shadow);transition:transform .2s,box-shadow .3s}
.kcard:hover{transform:translateY(-2px)}.kcard.drag{opacity:.4}.kcard p{margin:6px 0;color:var(--mute);font-size:13px}.kcard small{color:var(--mute)}
.kcard .mv{display:block;width:100%;margin-top:8px;font:inherit;font-size:12px;border-radius:8px;border:1px solid var(--line);background:var(--tint);color:inherit;padding:4px}
/* Chart & heatmap */
.cv{position:relative;height:210px}
.hm{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:320px}
.hc{aspect-ratio:1;border:0;border-radius:6px;cursor:pointer;position:relative;padding:0;transition:transform .2s}
.hc:hover,.hc:focus-visible{transform:scale(1.15);z-index:2}.hc.m0{background:#2fb67c}.hc.m1{background:#ffcf5c}.hc.m2{background:#ff6b6b}
.hc::after{content:attr(data-t);position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background:#0a1830;color:#fff;font-size:11px;padding:4px 8px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.hc:hover::after,.hc:focus-visible::after{opacity:1}
/* Toast di pojok kanan bawah (layar lebar) */
@media(min-width:700px){.toast{left:auto;right:20px;transform:translateY(20px)}.toast.s{transform:none}}
/* Rapor cetak A4 */
#rapor{display:none}
@media print{@page{size:A4;margin:18mm}body.rp>*:not(#rapor){display:none!important}body.rp{background:#fff!important}body.rp #rapor{display:block!important;color:#000;background:#fff;font:12pt/1.5 system-ui,sans-serif}.rt{width:100%;border-collapse:collapse;margin:8px 0 18px}.rt th,.rt td{border:1px solid #999;padding:6px 8px;text-align:left}.rt th{background:#eee;width:28%}.rm{color:#555;font-size:10pt}}

.licb{padding:6px 14px;text-align:center;font-size:12px;font-weight:600;background:var(--tint);color:var(--pri);border-bottom:1px solid var(--line)}.licb.bad{background:#ffe1de;color:#9b1c13}

#ulist{max-height:260px;overflow:auto;margin-top:8px}

/* Redesain sidecol: satu kartu dengan tab Jadwal / Pesan & Curhat */
.tabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px;padding-top:6px}
.tabbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;position:relative;border:1px solid var(--line);background:var(--tint);color:var(--mute);font:inherit;font-weight:700;font-size:12.5px;padding:8px 8px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;min-height:40px}
.tabbtn:hover{border-color:var(--pri)}
.tabbtn.act{background:var(--pri);border-color:var(--pri);color:#fff}
.tabbtn.act .cnt{background:rgba(255,255,255,.2);color:#fff}
.tabs #tjadd{margin-left:auto;flex:0 0 auto}
/* Panel samping (Jadwal/Pesan) sejajar dengan dasar kartu detail siswa: tinggi baris grid ditentukan kartu tengah, panel mengisi penuh lewat posisi absolut dan daftar menggulir di dalam */
.work{align-items:stretch}
.sidecol{display:flex;flex-direction:column;min-height:260px;position:relative}
.jadwal-card{margin-bottom:16px}.jadwal-card .lhead{margin-bottom:8px}.jadwal-card h3{display:flex;align-items:center;gap:6px}.jadwal-card #jad{max-height:300px;overflow:auto} /* Kartu Jadwal tampil langsung di Ruang Konseling guru (v8.6); sebelumnya terkubur di #guru-dash yang tersembunyi */
.tabpane{min-height:0}
.tabpane[hidden]{display:none}
#tab-jadwal:not([hidden]),#tab-pesan:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
#tj{flex:1;min-height:0;display:flex;flex-direction:column}
.big>div:first-child{display:flex;flex-direction:column;max-height:560px;min-height:0} /* kolom kiri (Peringatan Dini) dibatasi setinggi maks .det agar dasar kartu biru selalu sejajar dasar kolom kiri */
#sl{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
#jad,#ta{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--mute) transparent;padding-right:6px;padding-bottom:10px;overscroll-behavior:contain}
#jad::-webkit-scrollbar,#ta::-webkit-scrollbar{width:8px}
#jad::-webkit-scrollbar-thumb,#ta::-webkit-scrollbar-thumb{background:var(--mute);border-radius:8px}
#jad::-webkit-scrollbar-track,#ta::-webkit-scrollbar-track{background:transparent}
.tabbadge{position:absolute;top:-7px;right:-4px;background:var(--red);color:#fff;font-style:normal;font-size:9px;font-weight:800;border-radius:99px;padding:2px 7px;letter-spacing:.02em;box-shadow:0 1px 4px rgba(0,0,0,.25)}
#jad::-webkit-scrollbar,#ta::-webkit-scrollbar{width:6px}
@media (max-width:1020px){.sidecol{position:static;min-height:0}.jadwal-card #jad{max-height:min(420px,55vh)}}
#jad::-webkit-scrollbar-track,#ta::-webkit-scrollbar-track{background:transparent}
#jad::-webkit-scrollbar-thumb,#ta::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
/* "Belum dibahas": tanpa latar merah, teks abu-abu gelap */
.det p.m2{background:none;color:var(--mute);padding:0;border-radius:0}
/* ===== MODUL KONSELING ===== */
.crumb{font-size:12px;color:var(--mute);margin:7px 0 0}.crumb span{padding:0 6px;color:var(--line)}
.k-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.export-wrap{position:relative}.export-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:190px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.export-menu button{display:block;width:100%;border:0;background:none;text-align:left;color:var(--ink);padding:9px 10px;border-radius:8px;font:inherit;cursor:pointer}.export-menu button:hover{background:var(--tint)}
.konseling-card{padding:18px}.k-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.k-toolbar select,.k-toolbar input{width:auto;min-width:130px;flex:1;max-width:180px;border-radius:10px}.k-search{display:flex;align-items:center;gap:8px;flex:2;min-width:240px;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding-left:11px;color:var(--mute)}.k-search input{border:0;background:transparent;max-width:none;padding-left:0;flex:1;min-width:0;width:100%}.k-search input:focus{outline:0}.k-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;color:var(--mute);font-size:12px}.k-meta .lock{margin:0;font-size:11px;padding:4px 10px}.k-table-wrap{overflow:auto}.k-table{min-width:900px}.k-table th{background:var(--tint);padding:11px 10px}.k-table td{vertical-align:middle;padding:12px 10px}.k-table td:first-child,.k-table th:first-child{width:42px;text-align:center}.k-sub{display:block;color:var(--mute);font-size:11px;margin-top:2px}.k-badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.k-done{background:#dcf5e5;color:#14663a}.k-process{background:#fff0d1;color:#9a6500}.k-new{background:#dce9ff;color:#0356c5}.k-refer{background:#e8ebf0;color:#526174}.k-academic{background:#e2edff;color:#245ab2}.k-personal{background:#f0e5ff;color:#7444a8}.k-social{background:#dff7f1;color:#187866}.k-family{background:#ffe7d8;color:#a75025}.k-career{background:#fff1c9;color:#896b00}.k-row-actions{display:flex;gap:5px}.k-row-actions button{border:1px solid var(--line);background:var(--tint);color:var(--ink);border-radius:7px;padding:5px 7px;font:inherit;font-size:11px;cursor:pointer}.k-row-actions button:hover{background:var(--pri);color:#fff}.k-row-actions button.danger{color:#b43443}.k-empty{text-align:center;padding:44px 20px;color:var(--mute)}.k-empty h3{color:var(--ink);margin:8px 0 3px}.k-empty p{margin:0 auto 15px;max-width:360px}.k-empty-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin:auto;background:var(--tint);color:var(--pri);font-size:25px}.k-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:15px;color:var(--mute);font-size:12px}.pagination{display:flex;gap:4px}.pagination button{min-width:30px;height:30px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;cursor:pointer}.pagination button.active{background:var(--pri);border-color:var(--pri);color:#fff}.pagination button:disabled{opacity:.4;cursor:not-allowed}.k-perpage{display:flex;align-items:center;gap:5px;margin:0;font-size:12px}.k-perpage select{width:auto;padding:5px 8px}
.k-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.k-form-grid label{margin-top:10px}.k-full{grid-column:1/-1}.k-form-grid textarea{resize:vertical}.k-dialog-sub{color:var(--mute);font-size:12px}.k-error{display:block;color:#c13c4b;min-height:3px;font-size:11px}.k-check{display:flex;gap:8px;align-items:center;font-weight:500!important}.k-check input{width:auto}.k-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.k-danger{background:#c73748!important;box-shadow:none!important}.k-detail-head{display:flex;gap:10px;align-items:center;padding:10px;background:var(--tint);border-radius:12px}.k-detail-head small,.k-detail-grid small{display:block;color:var(--mute);font-size:11px}.k-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}.k-detail-grid>div{background:var(--tint);padding:9px;border-radius:10px}.k-detail-grid b{display:block;font-size:13px}.k-history{list-style:none;padding:0;margin:0;display:grid;gap:6px}.k-history li{display:flex;justify-content:space-between;gap:10px;background:var(--tint);padding:8px 10px;border-radius:8px;font-size:12px}.k-history span{color:var(--mute)}
@media(max-width:760px){.k-search{flex-basis:100%}.k-actions{width:100%}.k-actions>*{flex:1}.k-actions .btn{width:100%;padding-left:10px;padding-right:10px}.k-toolbar>*{max-width:none!important;width:100%!important}.k-search{min-width:0}.k-table-wrap{overflow:visible}.k-table,.k-table tbody{display:block;min-width:0}.k-table thead{display:none}.k-table tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:10px;margin-bottom:10px;box-shadow:var(--shadow)}.k-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border:0;padding:5px 0;white-space:normal;text-align:right}.k-table td:before{content:attr(data-label);font-weight:700;color:var(--mute);text-align:left}.k-table td:first-child{display:none}.k-table td[data-label="Nama Siswa"]{display:block;text-align:left;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:4px}.k-table td[data-label="Nama Siswa"]:before{display:none}.k-table td[data-label="Aksi"]{display:block;text-align:left;padding-top:9px}.k-table td[data-label="Aksi"]:before{display:none}.k-row-actions{justify-content:flex-end}.k-footer{align-items:flex-start;flex-direction:column}.pagination{align-self:center}.k-form-grid{grid-template-columns:1fr}.k-full{grid-column:auto}.k-detail-grid{grid-template-columns:1fr 1fr}.k-history li{display:block}.k-history span{display:block;margin-top:2px}}
@media print{.k-table{min-width:0}.k-table th,.k-table td{white-space:normal}.k-table-wrap{overflow:visible}}
/* ===== KONSELING TAHAP 1 POLISH ===== */
.k-table thead th{position:sticky;top:0;z-index:2}
.k-table tbody tr{transition:background .15s ease}
.k-table tbody tr:hover{background:var(--tint)}
.k-row-actions button{transition:background .15s ease,color .15s ease,border-color .15s ease}
.k-row-actions button:focus-visible,.pagination button:focus-visible,.export-menu button:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
#dlg::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
#dlg{max-height:88vh;overflow:auto;border-radius:16px}
#dform input.invalid,#dform select.invalid,#dform textarea.invalid{border-color:#c13c4b!important;background:rgba(193,60,75,.06)}
#dform input.invalid:focus,#dform select.invalid:focus,#dform textarea.invalid:focus{outline:2px solid rgba(193,60,75,.35);outline-offset:0}
.k-error{font-weight:600;margin-top:3px}
.export-menu button[data-export]:before{display:inline-block;width:18px}
@media (prefers-reduced-motion:reduce){.k-table tbody tr,.k-row-actions button{transition:none}}
/* ===== MODUL PERINGATAN DINI ===== */
.ew-actions{display:flex;gap:8px;flex-wrap:wrap}.ew-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.ew-summary-card{display:flex;align-items:center;gap:12px;padding:17px}.ew-summary-card small,.ew-summary-card span{display:block;color:var(--mute);font-size:11px}.ew-summary-card b{display:block;font-size:28px;line-height:1.15}.ew-summary-icon{width:40px!important;height:40px;border-radius:13px;display:grid!important;place-items:center;font-size:19px!important;font-weight:800}.ew-high .ew-summary-icon{background:#fde2e5;color:#bf3041}.ew-medium .ew-summary-icon{background:#fff0d1;color:#9a6500}.ew-safe .ew-summary-icon{background:#dcf5e5;color:#14663a}.ew-high b{color:#bf3041}.ew-medium b{color:#9a6500}.ew-safe b{color:#14663a}.ew-list-card{padding:18px}.ew-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.ew-list-head h3{margin:0}.ew-filter{display:flex;gap:8px}.ew-filter input,.ew-filter select{width:auto;min-width:170px;border-radius:10px}.ew-student-card{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;background:var(--card);box-shadow:0 6px 18px -14px rgba(15,34,48,.35)}.ew-student-card.ew-tinggi{border-left-color:#ec4c5a}.ew-student-card.ew-sedang{border-left-color:#ffb938}.ew-student-card.ew-aman{border-left-color:#2fb67c}.ew-student-main{display:flex;gap:11px;align-items:flex-start}.ew-student-info{flex:1;min-width:0}.ew-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.ew-name-row h3{font-size:15px;margin:0}.ew-student-info>small{display:block;color:var(--mute);margin-top:2px}.ew-risk-badge{font-size:11px;font-weight:800;white-space:nowrap}.ew-tinggi .ew-risk-badge{color:#bf3041}.ew-sedang .ew-risk-badge{color:#9a6500}.ew-aman .ew-risk-badge{color:#14663a}.ew-belum .ew-risk-badge{color:#475569}.ew-reasons{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.ew-reasons span{display:inline-block;background:var(--tint);border:1px solid var(--line);border-radius:7px;padding:4px 7px;color:var(--ink);font-size:11px}.ew-safe-reason{color:#14663a!important;background:#dcf5e5!important;border-color:#b9e6c8!important}.ew-actions-row{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.ew-actions-row .btn{padding:6px 10px;font-size:11px}.ew-ignore{color:#9a6500!important}.ew-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--tint);color:var(--mute);font-size:12px}.ew-note b{color:var(--ink);white-space:nowrap}.ew-settings-form{display:grid;gap:8px}.ew-setting-row{display:grid;grid-template-columns:1fr 100px 24px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);margin:0}.ew-setting-row:last-child{border-bottom:0}.ew-setting-row span:first-child b{display:block}.ew-setting-row small{display:block;color:var(--mute);font-weight:400;font-size:11px}.ew-setting-row input[type=number]{width:100%;padding:7px 9px}.ew-setting-row input[type=checkbox]{width:18px;height:18px}.ew-fixed-threshold{color:var(--mute);font-size:12px;text-align:right}
@media(max-width:760px){.ew-summary{grid-template-columns:1fr 1fr;gap:10px}.ew-summary-card{padding:12px 13px;gap:9px}.ew-summary-card b{font-size:22px}.ew-summary-icon{width:34px!important;height:34px;border-radius:11px;font-size:16px!important}.ew-list-head{display:block}.ew-filter{display:grid;grid-template-columns:1fr;margin-top:10px}.ew-filter input,.ew-filter select{width:100%;min-width:0}.ew-name-row{align-items:flex-start;display:block}.ew-risk-badge{display:block;margin-top:4px}.ew-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ew-actions-row .btn{padding:9px 10px;font-size:12px}.ew-actions-row .btn:first-child{grid-column:1/-1}.ew-note{display:block}.ew-note b{display:block;margin-bottom:4px}.ew-setting-row{grid-template-columns:1fr 84px 22px}.ew-setting-row small{line-height:1.35}}
/* ===== MODUL RISET & ANALISIS DATA ===== */
.an-actions{display:flex;gap:8px;flex-wrap:wrap}.an-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:14px}.an-filters>div{margin-right:auto}.an-filters small,.ds-toolbar small{display:block;color:var(--mute);font-size:11px;font-weight:400;margin-top:3px}.an-filters label{display:grid;gap:4px;font-size:10px;color:var(--mute);font-weight:700}.an-filters select,.an-filters input{min-width:145px}.an-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.an-chart-card{min-width:0}.an-chart-wide{grid-column:1/-1}.an-chart-wrap{height:280px;position:relative}.an-chart-wrap canvas{position:relative;z-index:1}.an-skeleton{position:absolute;inset:8px;border-radius:12px;background:linear-gradient(90deg,var(--tint) 25%,var(--line) 50%,var(--tint) 75%);background-size:200% 100%;animation:anShimmer 1.3s infinite}@keyframes anShimmer{to{background-position:-200% 0}}.an-report-note{display:flex;gap:8px;margin-top:14px;padding:12px 14px;font-size:12px}.an-report-note span{color:var(--mute)}.ds-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:14px}.ds-toolbar>div{margin-right:auto}.ds-toolbar input{min-width:210px}.ds-table-card{padding:0;overflow:hidden}.ds-table-wrap{overflow-x:auto}.ds-table{width:100%;border-collapse:collapse;min-width:650px}.ds-table th,.ds-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:12px}.ds-table th{color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:.05em;background:var(--tint)}.ds-table tr:hover td{background:var(--tint)}.ds-name{border:0;background:none;color:var(--blue);font:inherit;font-weight:800;cursor:pointer;padding:0;text-align:left}.ds-name:hover{text-decoration:underline}.ds-risk{display:inline-block;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800}.ds-tinggi{background:#fde2e5;color:#bf3041}.ds-sedang{background:#fff0d1;color:#9a6500}.ds-aman{background:#dcf5e5;color:#14663a}.ds-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;color:var(--mute);font-size:11px}.ds-pagination>div{display:flex;align-items:center;gap:6px}.ds-pagination .btn{padding:6px 9px;font-size:11px}.ds-pagination select{padding:6px 8px;font-size:11px}.ds-profile-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}.ds-profile-head h2{margin:0;font-size:20px}.ds-profile-head p{margin:3px 0 0;color:var(--mute);font-size:12px}.ds-profile-head>.ds-risk{margin-left:auto}.ds-profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.ds-stat{background:var(--tint);border-radius:10px;padding:11px;text-align:center}.ds-stat b{display:block;font-size:20px;color:var(--blue)}.ds-stat small{font-size:10px;color:var(--mute)}.ds-history{display:grid;gap:7px;max-height:180px;overflow:auto;margin-bottom:15px}.ds-history>div{padding:9px 10px;border:1px solid var(--line);border-radius:9px}.ds-history b,.ds-history small{display:block}.ds-history small{color:var(--mute);margin-top:3px;font-size:11px}.ds-violation{background:var(--tint);border-radius:10px;padding:11px;color:var(--ink)}#analytics-print{display:none}.print-report{font-family:Arial,sans-serif;color:#111;background:#fff;padding:20px}.print-report h1,.print-report h2{margin:0 0 6px}.print-report p{font-size:12px}.print-report table{border-collapse:collapse;width:100%;font-size:11px;margin-top:18px}.print-report th,.print-report td{border:1px solid #bbb;padding:6px;text-align:left}.print-sign{display:flex;justify-content:space-between;margin-top:70px;padding:0 50px}.print-sign span{border-top:1px solid #111;padding-top:6px;min-width:120px;text-align:center}
@media(max-width:760px){.an-charts{grid-template-columns:1fr}.an-chart-wide{grid-column:auto}.an-filters{align-items:stretch}.an-filters>div{width:100%}.an-filters select,.an-filters input{width:100%;min-width:0}.an-filters label{flex:1}.an-filters .btn{width:100%}.ds-toolbar{align-items:stretch}.ds-toolbar>div{width:100%}.ds-toolbar input,.ds-toolbar select{width:100%;min-width:0}.ds-pagination{display:grid;justify-content:stretch}.ds-pagination>div{justify-content:center}.ds-pagination>select{width:100%}.ds-profile-head{align-items:flex-start}.ds-profile-head>.ds-risk{margin-left:auto}.ds-profile-grid{gap:5px}.ds-stat{padding:8px 4px}.ds-stat b{font-size:17px}}
@media print{body.rpa>*:not(#analytics-print){display:none!important}body.rpa #analytics-print{display:block!important}body.rpa{background:#fff!important}.print-report{display:block!important}}
/* ===== RESET DATA ===== */
.demo-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:11px 14px;border:1px solid #f3c56b;border-radius:12px;background:#fff8e7;color:#7a5100}.demo-banner>div{display:flex;align-items:center;gap:9px}.demo-banner b{font-size:12px}.demo-banner span{font-size:11px;color:#956d28}.demo-reset,.reset-data-btn{color:#b52f3e!important;border-color:#efb1b8!important;background:#fff!important}.reset-warning{padding:4px 2px 10px;border-left:4px solid #d9364b;padding-left:12px}.reset-warning-icon{width:38px;height:38px;border-radius:12px;background:#fde2e5;color:#b52f3e;display:grid;place-items:center;font-weight:900;font-size:20px;margin-bottom:10px}.reset-warning h3{color:#a92839;margin:0 0 8px}.reset-warning p{line-height:1.55;color:var(--ink);font-size:13px}.k-danger{background:#d9364b!important;border-color:#d9364b!important;color:#fff!important}@media(max-width:760px){.demo-banner{align-items:stretch;display:block}.demo-banner>div{display:block;margin-bottom:9px}.demo-banner span{display:block;margin-top:3px}.demo-reset{width:100%}}
.an-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--mute);font-size:13px;padding:20px;background:var(--card);border:1px dashed var(--line);border-radius:12px}.an-empty[hidden]{display:none}
/* ===== RBAC / PROFIL SISWA ===== */
/* Gelembung chat pesan pribadi: pesan sendiri di kanan, diterima di kiri */
.cb{display:flex;flex-direction:column;gap:6px;max-height:330px;overflow-y:auto;padding:2px}
.cb-row{display:flex}
.cb-row.own{justify-content:flex-end}
.cb-b{max-width:78%;padding:8px 12px;border-radius:16px;font-size:13px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word;box-shadow:0 1px 2px rgba(15,34,48,.06)}
.cb-row.own .cb-b{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-bottom-right-radius:6px}
.cb-row.them .cb-b{background:var(--tint);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:6px}
.cb-from{display:block;font-size:10px;font-weight:700;opacity:.75;margin-bottom:2px}
.cb-w{display:block;font-size:10px;opacity:.65;margin-top:3px;text-align:right}
.cb-empty{color:var(--mute);font-size:12px;text-align:center;padding:14px 0}
.snotif-item{display:block;width:calc(100% - 8px);margin:0 4px 6px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--tint);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.snotif-item:hover{border-color:var(--pri)}
.role-readonly #tambah,.role-readonly [data-kedit],.role-readonly [data-kdelete]{display:none!important}.student-history{display:grid;gap:8px;max-height:330px;overflow:auto}.student-history>div{border:1px solid var(--line);border-radius:10px;padding:10px}.student-history b,.student-history small{display:block}.student-history small{margin-top:3px;color:var(--mute);font-size:11px}.student-history:empty:after{content:"Belum ada riwayat konseling.";color:var(--mute);font-size:12px}

.restrict-note{padding:12px 14px;margin-bottom:12px;border:1px solid var(--line);background:var(--tint);border-radius:12px;font-size:12px;color:var(--mute)}.restrict-note b{color:var(--ink)}.ew-asof{display:block;color:var(--mute);font-size:10px;margin-top:2px}.ew-config-note{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:12px;border:1px solid #f0d9a0;background:#fff7e0;border-radius:12px;font-size:12px;color:#7a5b00}.ew-config-note b{color:#7a5b00}.ew-na .ew-summary-icon{background:#e2e8f0;color:#475569}.ew-na b{color:#475569}.ew-student-card.ew-belum{border-left-color:#94a3b8}.ew-na-reason{color:#475569!important;background:#e2e8f0!important;border-color:#cbd5e1!important}.ds-belum{background:#e2e8f0;color:#475569}

/* Riwayat Pelanggaran: form catatan bertanggal di profil siswa */
.pel-form{margin-top:12px;border-top:1px solid var(--grid);padding-top:12px}
.pel-frm{margin:8px 0 10px}
.pel-frm .pel-ket{grid-column:1/-1}
.pel-del{padding:2px 10px;font-size:11px;margin-left:8px}

/* ===== Select senada tema + label peran ===== */
.role-label{font-size:12px;font-weight:700;color:var(--pmute);background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d8dae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
select:hover{border-color:var(--pri)}
select:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(3,86,197,.18)}
select:disabled{cursor:default;opacity:.6}
select[hidden]{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) select:focus{box-shadow:0 0 0 3px rgba(47,111,224,.3)}}
:root[data-theme="dark"] select:focus{box-shadow:0 0 0 3px rgba(47,111,224,.3)}
@media (hover:hover) and (pointer:fine){
@supports (appearance:base-select){
select,::picker(select){appearance:base-select}
select{background-image:none}
select::picker-icon{color:var(--mute);transition:transform .18s ease}
select:open::picker-icon{transform:rotate(180deg)}
select:open{border-color:var(--pri)}
::picker(select){background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px}
select option{font:inherit;font-size:13px;color:var(--ink);background:transparent;padding:8px 12px;border-radius:9px}
select option:hover,select option:focus-visible{background:var(--tint)}
select option:checked{background:var(--tint);color:var(--pri);font-weight:700}
select option::checkmark{color:var(--pri)}
}}

/* ===== Dropdown kustom fallback (browser tanpa appearance:base-select) ===== */
select.selfb-src{position:absolute!important;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important;min-width:0!important;padding:0!important;border:0!important;margin:0!important;opacity:0;pointer-events:none}
.selfb{position:relative;display:inline-block;vertical-align:middle;width:100%}
.selfb-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font:inherit;color:var(--ink);background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:9px 12px;min-height:38px;cursor:pointer;text-align:left;transition:border-color .18s ease,box-shadow .18s ease}
.selfb-btn:hover{border-color:var(--pri)}
.selfb-btn:focus-visible{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(3,86,197,.18)}
.selfb-btn[disabled]{opacity:.6;cursor:default}
.selfb-btn.selfb-err{border-color:#c13c4b}
.selfb-lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.selfb-chev{flex:none;width:12px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d8dae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .18s ease}
.selfb.open .selfb-chev{transform:rotate(180deg)}
.selfb.open .selfb-btn{border-color:var(--pri)}
.selfb-pop{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;max-height:262px;max-width:calc(100vw - 16px);overflow:auto;z-index:2147483000;min-width:160px}
.selfb-opt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:8px 12px;border-radius:9px;cursor:pointer}
.selfb-opt:hover,.selfb-opt.act{background:var(--tint)}
.selfb-opt.sel{background:var(--tint);color:var(--pri);font-weight:700}
.selfb-ck{width:14px;flex:none;text-align:center}
.selfb-opt.sel .selfb-ck:after{content:"\2713";color:var(--pri);font-weight:800}
.selfb-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selfb-opt.dis{opacity:.5;cursor:default}
.filters .selfb,.tbf .selfb{width:auto;min-width:130px;flex:1;max-width:220px}
.filters .selfb-btn,.tbf .selfb-btn{border-radius:14px;padding:8px 12px}
.k-toolbar .selfb{width:auto;min-width:130px;flex:1;max-width:180px}
.k-toolbar .selfb-btn{border-radius:10px}
.ew-filter .selfb{width:auto;min-width:170px}
.ew-filter .selfb-btn{border-radius:10px}
.an-filters .selfb{min-width:145px}
.k-perpage .selfb{width:auto}
.k-perpage .selfb-btn{padding:5px 8px;min-height:0}
.ds-pagination .selfb{width:auto}
.ds-pagination .selfb-btn{padding:6px 8px;font-size:11px;min-height:0}
@media(max-width:760px){
.filters .selfb,.tbf .selfb{min-width:100px}
.filters .selfb-btn,.tbf .selfb-btn{min-height:44px}
.ew-filter .selfb,.an-filters .selfb{width:100%;min-width:0}
}

/* ===== Kotak Masuk Pesan & Curhat (inbox master-detail, gaya glass sesuai mockup yang disetujui) ===== */
.ibx{margin-top:16px;padding:0;overflow:hidden}
.ibx-top{background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:10px 14px 10px}
.ibx-titlerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ibx-titlerow h3{margin:0;font-size:14px}
.ibx-titlerow .cnt{font-style:normal;background:var(--pri);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
.ibx-titlerow .tabbadge{background:var(--cor);color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:2px 8px}
.ibx-sp{flex:1}
.ibx-unread{font-size:12px;color:var(--mute);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}.ibx-unread b{color:var(--ink);font-weight:700}.ibx-bell{display:inline-flex;color:var(--mute)}
.ibx-badge{min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;margin-left:5px;line-height:1}.ibx-chip.act .ibx-badge{background:#fff;color:var(--pri)}
.ibx-search{margin-top:8px;display:flex;align-items:center;gap:8px;background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:7px 11px;color:var(--mute)}
.ibx-search input{border:0;outline:0;background:transparent;font:inherit;font-size:13px;width:100%;color:var(--ink)}
.ibx-search:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px rgba(3,86,197,.12)}
.ibx-filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ibx-filters{position:relative}
.ibx-pill{position:absolute;top:0;left:0;border-radius:12px;background:var(--pri);transition:transform .22s cubic-bezier(.3,.7,.3,1),width .22s cubic-bezier(.3,.7,.3,1),height .22s cubic-bezier(.3,.7,.3,1);pointer-events:none;z-index:0}
.ibx-chip{position:relative;z-index:1;border:1px solid var(--line);background:transparent;color:var(--mute);border-radius:12px;padding:4px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.ibx-chip.act{background:transparent;border-color:transparent;color:#fff}
.ibx-wrap{display:grid;grid-template-columns:320px 1fr;height:min(72vh,780px);min-height:480px}
.ibx-side{border-right:1px solid var(--line);overflow-y:auto;background:var(--card);padding:6px;display:flex;flex-direction:column;gap:3px;min-height:0}
.ibx-item{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;width:100%;text-align:left;border:1px solid transparent;border-left:4px solid transparent;background:none;padding:7px 8px 7px 5px;cursor:pointer;font:inherit;color:var(--ink);border-radius:10px}
.ibx-item:hover{background:var(--tint)}
.ibx-item.act{background:#EFF6FF;border-color:#C7DCFA;border-left-color:#0356C5}
.ibx-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.ibx-av.anon{background:#CBD8E6;color:#51637A}
.ibx-av svg{width:20px;height:20px}
.ibx-mid{min-width:0;display:flex;flex-direction:column}
.ibx-namerow{display:flex;align-items:center;gap:6px;min-width:0}
.ibx-namerow b{font-size:13.5px;color:#0F172A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-kls{font-size:12px;color:var(--mute);white-space:nowrap}
.ibx-prio{color:#DC2626;display:inline-grid;place-items:center;flex:none}
.ibx-prio svg{width:15px;height:15px}
.ibx-prev{display:block;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.ibx-tag{display:inline-block;width:fit-content;margin-top:3px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:#EFF6FF;color:#0356C5}
.ibx-tag.anon{background:#EEF2F7;color:var(--mute)}
.ibx-side2{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ibx-time{font-size:11px;color:#94A3B8;white-space:nowrap}
.ibx-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--pri);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.ibx-empty{padding:32px 16px;text-align:center;color:var(--mute);font-size:13px}
.ibx-chat{display:flex;flex-direction:column;background:#F8FAFC;min-width:0;min-height:0}
.ibx-chead{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-wrap:wrap}
.ibx-chead .ibx-av{width:36px;height:36px;font-size:13px}
.ibx-back{display:none;align-items:center;gap:4px;border:0;background:none;color:var(--pri);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;padding:4px 0}
.ibx-back svg{width:17px;height:17px}
.ibx-cmeta{min-width:0;flex:1}
.ibx-cmeta b{font-size:14px;display:flex;align-items:center;gap:6px}
.ibx-cmeta small{color:var(--mute);font-size:12px;display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-cacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ibx-btn{border:1px solid var(--pri);background:var(--card);color:var(--pri);border-radius:14px;padding:9px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ibx-btn svg{width:15px;height:15px}
.ibx-btn:hover{background:#EFF6FF}
.ibx-btn.soft{background:#EFF6FF;border-color:transparent}
.ibx-btn.soft:hover{background:#DCEBFD}
.ibx-done{display:inline-flex;align-items:center;gap:7px;background:#059669;color:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;cursor:default}
.ibx-done svg{width:15px;height:15px}
.ibx-of{display:none;position:relative}
.ibx-ofb{padding:9px 12px}
.ibx-menu{position:absolute;top:calc(100% + 6px);right:0;background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(226,232,240,.85);border-radius:12px;box-shadow:0 12px 32px rgba(15,31,56,.18);padding:6px;min-width:210px;z-index:45;display:flex;flex-direction:column;gap:2px}
.ibx-menuit{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;font:inherit;font-size:13px;font-weight:600;color:var(--ink);padding:9px 10px;border-radius:8px;cursor:pointer;width:100%}
.ibx-menuit svg{width:15px;height:15px;flex:none}
.ibx-menuit:hover{background:#EFF6FF;color:var(--pri)}
.ibx-msgs{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;min-height:0;scroll-padding-top:14px}.ibx-msgs>*{flex-shrink:0}
.ibx-dsep{display:flex;align-items:center;gap:12px;margin:6px 0 16px;color:var(--mute);font-size:11.5px;font-weight:600}
.ibx-dsep:before,.ibx-dsep:after{content:"";flex:1;height:1px;background:var(--line)}
.ibx-msgrow{display:flex;flex-direction:column;margin-bottom:14px;max-width:100%}
.ibx-msgrow.them{align-items:flex-start}
.ibx-msgrow.own{align-items:flex-end}
.ibx-bub{max-width:75%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;box-shadow:0 1px 2px rgba(15,31,56,.06)}
.ibx-msgrow.them .ibx-bub{background:var(--card);border:1px solid #E2E8F0;border-bottom-left-radius:4px;color:var(--ink)}
.ibx-msgrow.own .ibx-bub{background:#2563EB;color:#fff;border-bottom-right-radius:4px}
.ibx-msgrow.own .ibx-bub.note{background:#FEF9E7;color:#92400E;border:1px solid #F5E3A3;display:flex;flex-direction:column;gap:6px}
.ibx-nlabel{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#A16207}
.ibx-nlabel svg{width:13px;height:13px}
.ibx-ts{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;color:#94A3B8;padding:0 4px}
.ibx-composer{border-top:1px solid var(--line);background:var(--card);padding:12px 18px 14px}
.ibx-mtabs{display:inline-flex;background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;margin-bottom:10px}
.ibx-mtab{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--mute);padding:7px 16px;border-radius:999px;cursor:pointer}
.ibx-mtab.act{background:var(--pri);color:#fff}
.ibx-mtab.note.act{background:#B45309}
.ibx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ibx-qchip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--pri);background:#EFF6FF;border:1px solid #C7DCFA;border-radius:14px;padding:6px 12px;cursor:pointer}
.ibx-qchip svg{width:14px;height:14px}
.ibx-qchip:hover{background:#DCEBFD}
.ibx-crow{display:flex;gap:10px;align-items:center}
.ibx-clip{width:46px;height:46px;border:1px solid var(--line);background:var(--card);border-radius:50%;display:grid;place-items:center;color:var(--mute);flex:none;cursor:not-allowed;opacity:.6}
.ibx-clip svg{width:18px;height:18px}
.ibx-crow input{flex:1;min-width:0;border:1px solid var(--line);background:var(--tint);border-radius:14px;padding:12px 18px;font:inherit;font-size:14px;outline:0;color:var(--ink)}
.ibx-crow input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(3,86,197,.12);background:var(--card)}
.ibx-composer.note-mode .ibx-crow input{background:#FEF3C7;border-color:#FDE68A}
.ibx-composer.note-mode .ibx-crow input:focus{border-color:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.15);background:#FFFBEB}
.ibx-send{border:0;border-radius:14px;background:var(--pri);color:#fff;font:inherit;font-size:14px;font-weight:700;padding:12px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:none}
.ibx-send svg{width:16px;height:16px}
.ibx-send:hover{filter:brightness(.92)}
.ibx-send.note-btn{background:#D97706}
.ibx-send.note-btn:hover{background:#B45309}
.ibx-pnote{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--mute)}
.ibx-pnote svg{width:15px;height:15px;color:var(--pri);flex:none}
.ibx-static{padding:14px 16px;border-top:1px solid var(--line);background:var(--card);font-size:12.5px;color:var(--mute)}
.ibx-cempty{flex:1;display:grid;place-items:center;color:var(--mute);text-align:center;padding:32px}
.ibx-cempty svg{width:56px;height:56px;opacity:.4;margin-bottom:8px}
.ibx-pill-done{display:inline-block;background:#DCFCE7;color:#166534;border-radius:999px;font-size:11px;font-weight:700;padding:3px 10px}
:root[data-theme="dark"] .ibx-chat{background:#060f1f}
:root[data-theme="dark"] .ibx-item.act{background:rgba(47,111,224,.16);border-color:rgba(47,111,224,.4);border-left-color:#2f6fe0}
:root[data-theme="dark"] .ibx-namerow b{color:var(--ink)}
:root[data-theme="dark"] .ibx-tag{background:rgba(47,111,224,.16)}
:root[data-theme="dark"] .ibx-tag.anon{background:rgba(148,163,184,.12)}
:root[data-theme="dark"] .ibx-msgrow.own .ibx-bub.note{background:rgba(217,119,6,.25);color:#fcd34d;border-color:rgba(217,119,6,.45)}
:root[data-theme="dark"] .ibx-nlabel{color:#fcd34d}
:root[data-theme="dark"] .ibx-composer.note-mode .ibx-crow input{background:rgba(217,119,6,.15)}
:root[data-theme="dark"] .ibx-menu{background:rgba(15,23,42,.85);border-color:rgba(51,65,85,.9)}
:root[data-theme="dark"] .ibx-menuit:hover{background:rgba(47,111,224,.16)}
:root[data-theme="dark"] .ibx-btn.soft{background:rgba(47,111,224,.16)}
:root[data-theme="dark"] .ibx-qchip{background:rgba(47,111,224,.12);border-color:rgba(47,111,224,.35)}
:root[data-theme="dark"] .ibx-pill-done{background:rgba(22,163,74,.2);color:#86efac}
@media (max-width:900px){
 .ibx-wrap{grid-template-columns:1fr;height:calc(100dvh - 240px);min-height:420px}
 .ibx-side{border-right:0}
 .ibx-chat{display:none}
 .ibx-wrap.mchat{height:auto;min-height:0}
 .ibx-wrap.mchat .ibx-side{display:none}
 .panel.on:has(.ibx-wrap.mchat),.panel.on:has(.ibx-wrap.mchat) .card{animation:none}
.ibx-wrap.mchat .ibx-chat{display:flex;position:fixed;inset:0;z-index:1000;height:100vh;height:100dvh;background:#F8FAFC}
 :root[data-theme="dark"] .ibx-wrap.mchat .ibx-chat{background:#060f1f}
 .ibx-back{display:inline-flex}
 .ibx-chead{row-gap:6px}
 .ibx-chead .ibx-av{width:36px;height:36px;font-size:14px}
 .ibx-cmeta{flex:1 1 96px;min-width:96px}
 .ibx-cmeta b{white-space:normal;line-height:1.25}
 .ibx-cmeta small{white-space:normal}
 .ibx-cacts{margin-left:auto}
 .ibx-cacts .action-desktop{display:none}
 .ibx-of{display:inline-block;position:relative}
 .ibx-bub{max-width:85%}
 .ibx-send{padding:12px 14px}
 .ibx-clip{width:42px;height:42px}
}

/* v7.1: Ruang Konseling langsung terbuka ke kotak masuk - panel dasbor lama disembunyikan, data & fungsi tetap berjalan di latar */
#guru>.grid.k4,#guru>#rem,#guru>.filters,#guru>.work{display:none!important}


.ibx-chip{transition:background .15s,color .15s,border-color .15s}
@keyframes ibxpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ibx-badge{animation:ibxpop .18s ease-out}
.panel.on .pc{animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc((var(--i,0) + 1)*80ms)}
@media (prefers-reduced-motion:reduce){.panel.on .pc,.ibx-badge{animation:none}.stu-mode,.bigb,.ibx-chip,.ibx-pill{transition:none}}

/* v7.3: navigasi bawah siswa + tombol hapus percakapan */
.toast{z-index:90}
.ibx-of{display:inline-block;position:relative}
.ibx-ofb{padding:7px 10px}
.ibx-menuit.danger{color:#bf3041}
.ibx-menuit.danger:hover{background:#fde2e5;color:#a92839}
:root[data-theme="dark"] .ibx-menuit.danger{color:#ff9aa2}
:root[data-theme="dark"] .ibx-menuit.danger:hover{background:rgba(229,72,77,.16);color:#ffb3bb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ibx-menuit.danger{color:#ff9aa2}:root:not([data-theme="light"]) .ibx-menuit.danger:hover{background:rgba(229,72,77,.16);color:#ffb3bb}}
.ibx-sigpill{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;background:#fde4e4;color:#b42318;font-size:10.5px;font-weight:800;vertical-align:2px;white-space:nowrap}
.ibx-signote{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;flex:none;padding:9px 11px;border:1px solid #f3c2c2;background:#fdf0ef;color:#8c1d18;border-radius:12px;font-size:12.5px;line-height:1.45}.ibx-clean{display:flex;gap:9px;align-items:center;width:100%;margin:0 0 10px;padding:10px 12px;border-radius:14px;border:1px dashed #e3a9a4;background:#fdf0ef;color:#8c1d18;font:inherit;font-size:12px;font-weight:600;line-height:1.45;cursor:pointer;text-align:left;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.ibx-clean:active{transform:scale(.98)}.ibx-clean:disabled{opacity:.65;cursor:default}.ibx-clean .ibx-clean-ic{flex:none;display:grid;place-items:center}.ibx-clean u{font-weight:800}
.ibx-signote svg{width:16px;height:16px;flex:none;margin-top:1px;color:#c0362c}
[data-theme="dark"] .ibx-sigpill{background:#4a1414;color:#ffb4ab}
[data-theme="dark"] .ibx-signote{background:#2a1216;border-color:#5a2027;color:#f3b8b3}[data-theme="dark"] .ibx-clean{background:#2a1216;border-color:#5a2027;color:#f3b8b3}
[data-theme="dark"] .ibx-signote svg{color:#ff8a80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ibx-sigpill{background:#4a1414;color:#ffb4ab}:root:not([data-theme="light"]) .ibx-signote{background:#2a1216;border-color:#5a2027;color:#f3b8b3}:root:not([data-theme="light"]) .ibx-clean{background:#2a1216;border-color:#5a2027;color:#f3b8b3}:root:not([data-theme="light"]) .ibx-signote svg{color:#ff8a80}}

.ibx-namerow b{flex:0 1 auto;min-width:0}
.ibx-namerow .ibx-prio{flex:none}
.ibx-sigpill{flex:none}

/* Student app shell: viewport-locked layout, content scrolls above pinned bottom nav */

/* ===== Tampilan Siswa v8 - desain disetujui, animasi ringan vanilla ===== */
:root{--s-pri:#007AFF;--s-pri2:#005FCC;--s-text:#0066D6}
:root[data-theme="dark"]{--s-pri:#3B82F6;--s-pri2:#2563EB;--s-text:#60A5FA}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-pri:#3B82F6;--s-pri2:#2563EB;--s-text:#60A5FA}}
body[data-role="siswa"]{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(420px 300px at 85% -5%,rgba(255,196,214,.55),transparent 70%),radial-gradient(500px 380px at -10% 20%,rgba(178,214,255,.6),transparent 70%),radial-gradient(420px 320px at 90% 75%,rgba(203,225,255,.45),transparent 70%),#F8F9FA;color:#0F172A}
:root[data-theme="dark"] body[data-role="siswa"]{background:radial-gradient(420px 300px at 85% -5%,rgba(88,60,180,.28),transparent 70%),radial-gradient(500px 380px at -10% 20%,rgba(40,90,200,.30),transparent 70%),radial-gradient(420px 320px at 90% 75%,rgba(30,64,175,.22),transparent 70%),#0F172A;color:#F1F5F9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body[data-role="siswa"]{background:radial-gradient(420px 300px at 85% -5%,rgba(88,60,180,.28),transparent 70%),radial-gradient(500px 380px at -10% 20%,rgba(40,90,200,.30),transparent 70%),radial-gradient(420px 320px at 90% 75%,rgba(30,64,175,.22),transparent 70%),#0F172A;color:#F1F5F9}}
body[data-role="siswa"] .licb{flex:none}
body[data-role="siswa"] .bar{display:none}
body[data-role="siswa"] .wrap{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:none;padding:10px 10px 0}
body[data-role="siswa"] .foot{display:none}
body[data-role="siswa"] #siswa.on{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;animation:none}
body[data-role="siswa"] #siswa.on>.top{display:none}
body[data-role="siswa"] #student-stage{flex:1;min-height:0;display:flex;flex-direction:column;max-width:none;margin:0;width:100%}
body[data-role="siswa"] #student-stage .phone{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:760px;margin:0 auto;padding:0 12px}
body[data-role="siswa"] .stab-panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 2px 12px}
body[data-role="siswa"] .stab-panel[hidden]{display:none}
body[data-role="siswa"] #pg-card{flex:none;margin:0 2px 8px}
.shead{position:sticky;top:10px;z-index:30;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:7px 14px 7px 8px;box-shadow:0 8px 24px rgba(15,23,42,.07);margin:2px 2px 14px;flex:none}
.brand-ic{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#4EA1FF,var(--s-pri));display:grid;place-items:center;color:#fff;flex:none;overflow:hidden}
.brand-ic svg{width:19px;height:19px}
.brand-ic img{width:100%;height:100%;object-fit:cover;display:block}
.gh-t{min-width:0}
.gh-t b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;color:#0F172A}
.gh-t small{display:block;font-size:11px;color:#64748B;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.gh-sp{flex:1}
.avatar-sq{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#FFD9A0,#FF9DB4);display:grid;place-items:center;font-weight:800;font-size:14px;color:#7A3B12;flex:none}
.avatar-sq.big{width:58px;height:58px;border-radius:20px;font-size:23px}
.tgl{width:36px;height:36px;border-radius:999px;border:1px solid rgba(15,23,42,.08);background:rgba(255,255,255,.6);display:grid;place-items:center;color:#64748B;cursor:pointer;flex:none;padding:0}
.tgl svg{width:17px;height:17px}
.shead .nwrap{flex:none;position:relative}
.shead .nwrap .ib{width:36px;height:36px;background:transparent}
.stab-panel.pg-in{animation:pgIn .26s cubic-bezier(.22,.9,.3,1)}
@keyframes pgIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.hello{margin:4px 6px 14px}
.hello h1{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.18;color:#0F172A;margin:0}
.hello h1 span{background:linear-gradient(90deg,var(--s-pri),#7A5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.hello p{font-size:13px;color:#64748B;margin:5px 0 0;font-weight:500}
.mood{border-radius:26px;padding:18px;position:relative;overflow:hidden;background:linear-gradient(135deg,#FFE7C7,#FFD3DC 55%,#FFC7D6);box-shadow:0 16px 34px -14px rgba(255,150,140,.45);margin:0 2px 14px}
.mood h2{font-size:17px;font-weight:800;color:#4A1D33;margin:0;letter-spacing:-.01em}
.mood>p{font-size:12.5px;color:rgba(74,29,51,.72);margin:6px 0 12px;line-height:1.5;font-weight:500;max-width:280px}
.mood .deco{position:absolute;right:-18px;top:-18px;width:110px;height:110px;border-radius:36px;background:rgba(255,255,255,.35);transform:rotate(18deg);pointer-events:none}
.mood .deco2{position:absolute;right:34px;bottom:-30px;width:80px;height:80px;border-radius:26px;background:rgba(255,255,255,.25);transform:rotate(-12deg);pointer-events:none}
.mood .sbtn{display:inline-flex;align-items:center;gap:8px;background:var(--s-pri);color:#fff;border:0;border-radius:999px;padding:12px 18px;font:inherit;font-size:13.5px;font-weight:700;box-shadow:0 10px 22px -8px rgba(0,122,255,.55);cursor:pointer;min-height:44px;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.mood.quizing{background:#fff;box-shadow:0 12px 30px -14px rgba(15,23,42,.14)}
.mood.quizing .deco,.mood.quizing .deco2{display:none}
.phone .prog{height:auto;background:none;overflow:visible;margin:2px 2px 12px}
.prog .row{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:#64748B;margin-bottom:7px}
.prog .row b{color:var(--s-text)}
.prog .bar{height:7px;border-radius:999px;background:rgba(15,23,42,.08);overflow:hidden}
.prog .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4EA1FF,var(--s-pri));transition:width .3s ease}
.qcard h2{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.35;margin:0 0 14px;color:#0F172A}
.qcard .sub{margin:0 0 14px;color:#64748B;font-size:12.5px;line-height:1.5}
.opt{display:flex;align-items:center;gap:12px;border:1.5px solid rgba(15,23,42,.09);border-radius:16px;padding:12px 14px;margin-bottom:8px;font-size:13.5px;font-weight:600;color:#0F172A;min-height:44px;cursor:pointer;background:#fff;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .15s,background .15s;user-select:none}
.opt .radio{width:20px;height:20px;border-radius:999px;border:2px solid #C6D0DE;position:relative;flex:none}
.opt.sel{border-color:var(--s-pri);background:rgba(0,122,255,.06);color:var(--s-text)}
.opt.sel .radio{border-color:var(--s-pri)}
.opt.sel .radio:after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--s-pri);animation:radioPop .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes radioPop{from{transform:scale(0)}to{transform:scale(1)}}
.qnav{display:flex;gap:10px;margin-top:12px}
.qn-ghost,.qn-solid{flex:1;text-align:center;font:inherit;font-size:13.5px;font-weight:700;padding:12px;border-radius:999px;min-height:44px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.qn-ghost{color:#374151;background:#F3F4F6;border:1px solid #E5E7EB}
.qn-solid{color:#fff;background:var(--s-pri);border:0;box-shadow:0 10px 22px -8px rgba(0,122,255,.55)}
.qah{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 2px 14px}
.qa-card{background:#fff;border-radius:22px;padding:15px 14px;border:1px solid rgba(15,23,42,.05);box-shadow:0 10px 26px -14px rgba(15,23,42,.14);display:block;text-align:left;font:inherit;color:#0F172A;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.qa-card .ic{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;margin-bottom:9px}
.qa-card .ic.blue{background:#E5F1FF;color:#007AFF}
.qa-card .ic.rose{background:#FFE9F0;color:#E03E6B}
.qa-card b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.qa-card small{display:block;font-size:11px;color:#64748B;margin-top:3px;font-weight:500;line-height:1.4}
.phone .card{background:#fff;border-radius:22px;padding:15px 16px;box-shadow:0 10px 26px -14px rgba(15,23,42,.12);border:1px solid rgba(15,23,42,.05);margin:0 2px 12px}
.phone .card h3{font-size:14.5px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;display:flex;align-items:center;justify-content:space-between;color:#0F172A}
.phone .card .sub{color:#64748B}
.hlink{border:0;background:none;color:var(--s-text);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;padding:4px;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.hjp{padding:8px 2px}
.hjp b{display:block;font-size:13px;font-weight:700;color:#0F172A}
.hjp small{display:block;font-size:11px;color:#64748B;margin-top:2px;font-weight:500}
.hjp.empty small{font-size:12px}
.seg{position:relative;display:flex;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:4px;box-shadow:0 8px 20px -10px rgba(15,23,42,.12);margin:0 2px 12px}
.seg-pill{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:999px;background:linear-gradient(135deg,#2E93FF,var(--s-pri));box-shadow:0 8px 18px -6px rgba(0,122,255,.5);transition:transform .24s cubic-bezier(.3,.7,.3,1),width .24s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.stu-mode{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:#64748B;font:inherit;font-size:12.5px;font-weight:700;padding:10px 6px;border-radius:999px;min-height:44px;cursor:pointer;transition:color .18s,transform .18s cubic-bezier(.34,1.56,.64,1)}
.stu-mode svg{width:15px;height:15px;flex:none}
.stu-mode.act{color:#fff}
.bigcta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:linear-gradient(135deg,#2E93FF,var(--s-pri));color:#fff;border:0;border-radius:999px;padding:14px;font:inherit;font-size:14.5px;font-weight:800;box-shadow:0 14px 28px -10px rgba(0,122,255,.55);cursor:pointer;min-height:48px;margin:0 0 10px;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.bigcta svg{width:17px;height:17px;flex:none}
.privline{display:flex;gap:8px;align-items:center;justify-content:center;font-size:11.5px;color:#047857;font-weight:600;margin:0 6px 14px;text-align:center}
.privline svg{flex:none;color:#047857}
#sbr .item,#sbm .item{background:#fff;border-radius:20px;padding:13px 15px;box-shadow:0 8px 22px -12px rgba(15,23,42,.12);border:1px solid rgba(15,23,42,.05);margin-bottom:10px}
#sbr .item .t b,#sbm .item .t b{display:block;font-size:13.5px;font-weight:700;color:#0F172A;letter-spacing:-.005em}
#sbr .item .t small,#sbm .item .t small{display:block;font-size:10.5px;color:#64748B;font-weight:600;margin:5px 0 0}
#sbr .sbr-r,#sbm .sbr-r{margin-top:8px;background:#F2F7FF;border-radius:14px;padding:10px 12px;font-size:12.5px;color:#1E3A6E;line-height:1.5;font-weight:500}
#sbr .sbr-r b,#sbm .sbr-r b{display:block;font-size:11px;color:var(--s-text);margin-bottom:2px}
#sbr .hint,#sbm .hint{display:block;margin-top:8px;font-size:12px;color:#64748B;background:#F6F8FB;border-radius:14px;padding:9px 12px;font-weight:500}
#sbr .empty,#sbm .empty{background:#fff;border-radius:20px;padding:16px;border:1px solid rgba(15,23,42,.05);font-size:12.5px}
.phone .cb{gap:8px;max-height:38vh;padding:4px 2px}
.phone .cb-b{padding:10px 14px;border-radius:20px;font-size:13.5px;box-shadow:0 6px 16px -8px rgba(15,23,42,.12)}
.phone .cb-row.own .cb-b{background:linear-gradient(135deg,#2E93FF,var(--s-pri));color:#fff;border-bottom-right-radius:8px}
.phone .cb-row.them .cb-b{background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.06);color:#0F172A;border-bottom-left-radius:8px}
.phone .cb-row.pop .cb-b{animation:bPop .26s cubic-bezier(.34,1.56,.64,1)}
@keyframes bPop{from{opacity:0;transform:translateY(10px) scale(.7)}to{opacity:1;transform:none}}
.chat-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.chat-row input{flex:1;min-height:44px;border-radius:999px;border:1px solid rgba(15,23,42,.1);background:#fff;padding:10px 16px;font:inherit;font-size:13.5px;color:#0F172A;outline:none}
.chat-row input:focus{border-color:var(--s-pri)}
.send{width:44px;height:44px;flex:none;border-radius:999px;background:var(--s-pri);border:0;display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -6px rgba(0,122,255,.6);cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.send:disabled{opacity:.45;box-shadow:none}
.phone #jadwal-list .item.appt{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 10px 26px -14px rgba(15,23,42,.12);border:1px solid rgba(15,23,42,.05);margin:0 2px 12px}
.phone #jadwal-list .item .t b{display:block;font-size:14px;font-weight:800;color:#0F172A;letter-spacing:-.01em}
.phone #jadwal-list .item .t small{display:block;font-size:11.5px;color:#64748B;margin-top:2px;font-weight:500}
.phone #jadwal-list .chip{margin-left:auto;background:#F1F5F9;color:#475569;font-size:10.5px;font-weight:800;padding:5px 11px;border-radius:999px;flex:none}
[data-theme="dark"] .phone #jadwal-list .chip{background:rgba(255,255,255,.12);color:#cfdaeb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone #jadwal-list .chip{background:rgba(255,255,255,.12);color:#cfdaeb}}
.jad-empty{text-align:center}
.jad-empty .ei{width:64px;height:64px;border-radius:22px;background:rgba(0,122,255,.1);color:var(--s-pri);display:grid;place-items:center;margin:14px auto 12px}
.jad-empty h3{justify-content:center}
.jad-empty p{font-size:12.5px;color:#64748B;line-height:1.55;margin:4px 8px 10px}
#resch.bigw{width:100%;min-height:46px;border-radius:999px}
.phone .btn.soft{background:rgba(0,122,255,.12);color:var(--s-text);box-shadow:none;border:0;border-radius:999px;padding:11px 16px}
.pcard{background:#fff;border-radius:24px;padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px -14px rgba(15,23,42,.14);border:1px solid rgba(15,23,42,.05);margin:0 2px 14px}
.pcard small{display:block;font-size:12px;color:#64748B;font-weight:500;margin-top:2px}
.pcard b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;color:#0F172A}
.group-label{font-size:11px;font-weight:800;color:#64748B;text-transform:uppercase;letter-spacing:.06em;margin:0 8px 8px}
.group{background:#fff;border-radius:20px;box-shadow:0 10px 26px -14px rgba(15,23,42,.12);border:1px solid rgba(15,23,42,.05);overflow:hidden;margin:0 2px 14px}
.grow{display:flex;align-items:center;gap:12px;padding:13px 16px;width:100%;border:0;background:none;font:inherit;color:#0F172A;cursor:pointer;text-align:left;min-height:44px;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.grow+.grow{border-top:1px solid rgba(15,23,42,.06)}
.grow .gic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.grow b{flex:1;font-size:13.5px;font-weight:600}
.grow .chev{color:#C0CAD8;flex:none}
.stab-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100% - 28px));z-index:40;display:flex;padding:6px;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.6);box-shadow:0 14px 34px -12px rgba(15,23,42,.22)}
.fnav-pill{position:absolute;top:6px;left:0;height:calc(100% - 12px);border-radius:999px;background:var(--s-pri);transition:transform .24s cubic-bezier(.3,.7,.3,1),width .24s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.stab{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#64748B;font:inherit;font-size:10.5px;font-weight:700;padding:8px 2px 7px;border-radius:999px;min-height:44px;cursor:pointer;transition:color .18s,transform .18s cubic-bezier(.34,1.56,.64,1)}
.stab svg{width:21px;height:21px}
.phone .stab-nav .stab[aria-selected="true"]{background:none}.phone .stab-nav .stab.act{color:#fff}
body[data-role="siswa"] .stab-nav{position:static;transform:none;width:auto;flex:none;margin:4px 2px calc(10px + env(safe-area-inset-bottom,0px))}
.stage .phone{padding-bottom:96px}
body[data-role="siswa"] .stage .phone{padding-bottom:0}
.skb{background:linear-gradient(90deg,#E9EDF4 25%,#F6F8FC 50%,#E9EDF4 75%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite;border-radius:18px;height:54px;margin-bottom:12px}
@keyframes sk{to{background-position:-200% 0}}
.phone .btn{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.phone .btn:active,.phone .sbtn:active,.phone .bigcta:active,.phone .qa-card:active,.phone .opt:active,.phone .grow:active,.phone .send:active,.phone .tgl:active,.phone .hlink:active,.phone .stab:active{transform:scale(.96)}
@media (hover:hover){.phone .qa-card:hover,.phone .grow:hover,.phone .opt:hover{transform:scale(1.02)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.shead{background:#fff}.seg{background:#fff}.stab-nav{background:#fff}}
@media (prefers-reduced-motion:reduce){.stab-panel.pg-in,.phone .cb-row.pop .cb-b,.opt.sel .radio:after,.skb{animation:none}.fnav-pill,.seg-pill,.prog .bar i{transition:none}.phone .btn,.phone .sbtn,.phone .bigcta,.phone .qa-card,.phone .opt,.phone .grow,.phone .send,.phone .tgl,.phone .hlink,.phone .stab,.stu-mode{transition:none}.phone .btn:active,.phone .sbtn:active,.phone .bigcta:active,.phone .qa-card:active,.phone .opt:active,.phone .grow:active,.phone .send:active,.phone .tgl:active,.phone .hlink:active,.phone .stab:active{transform:none}}
/* gelap (siswa) */
:root[data-theme="dark"] .shead{background:rgba(30,41,59,.82);border-color:rgba(51,65,85,.5);box-shadow:0 8px 24px rgba(0,0,0,.4)}
:root[data-theme="dark"] .gh-t b{color:#F1F5F9}
:root[data-theme="dark"] .gh-t small{color:#94A3B8}
:root[data-theme="dark"] .tgl{background:rgba(51,65,85,.6);border-color:rgba(71,85,105,.6);color:#FBBF24}
:root[data-theme="dark"] .hello h1{color:#F1F5F9}
:root[data-theme="dark"] .hello p{color:#94A3B8}
:root[data-theme="dark"] .mood{background:linear-gradient(135deg,#3E2A3A,#2E3350);box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
:root[data-theme="dark"] .mood h2{color:#F8E3EC}
:root[data-theme="dark"] .mood>p{color:rgba(241,245,249,.72)}
:root[data-theme="dark"] .mood.quizing{background:#1E293B}
:root[data-theme="dark"] .mood.quizing h2{color:#F1F5F9}
:root[data-theme="dark"] .qcard h2{color:#F1F5F9}
:root[data-theme="dark"] .qcard .sub{color:#94A3B8}
:root[data-theme="dark"] .prog .row{color:#94A3B8}
:root[data-theme="dark"] .prog .bar{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .opt{background:#1E293B;border-color:rgba(148,163,184,.2);color:#F1F5F9}
:root[data-theme="dark"] .opt .radio{border-color:#475569}
:root[data-theme="dark"] .opt.sel{background:rgba(59,130,246,.15);border-color:var(--s-pri);color:var(--s-text)}
:root[data-theme="dark"] .qn-ghost{background:#273549;border-color:#33415C;color:#E2E8F0}
:root[data-theme="dark"] .qa-card{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .phone .card{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .pcard{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .group{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .qa-card b{color:#F1F5F9}
:root[data-theme="dark"] .phone .card h3{color:#F1F5F9}
:root[data-theme="dark"] .pcard b{color:#F1F5F9}
:root[data-theme="dark"] .hjp b{color:#F1F5F9}
:root[data-theme="dark"] .qa-card small{color:#94A3B8}
:root[data-theme="dark"] .phone .card .sub{color:#94A3B8}
:root[data-theme="dark"] .pcard small{color:#94A3B8}
:root[data-theme="dark"] .hjp small{color:#94A3B8}
:root[data-theme="dark"] .seg{background:rgba(30,41,59,.8);border-color:rgba(51,65,85,.5)}
:root[data-theme="dark"] .stu-mode{color:#94A3B8}
:root[data-theme="dark"] .stu-mode.act{color:#fff}:root[data-theme="dark"] .privline{color:#4ADE80}:root[data-theme="dark"] .privline svg{color:#4ADE80}
:root[data-theme="dark"] #sbr .item{background:#1E293B;border-color:rgba(51,65,85,.5)}
:root[data-theme="dark"] #sbm .item{background:#1E293B;border-color:rgba(51,65,85,.5)}
:root[data-theme="dark"] #sbr .empty{background:#1E293B;border-color:rgba(51,65,85,.5)}
:root[data-theme="dark"] #sbm .empty{background:#1E293B;border-color:rgba(51,65,85,.5)}
:root[data-theme="dark"] #sbr .item .t b{color:#F1F5F9}
:root[data-theme="dark"] #sbm .item .t b{color:#F1F5F9}
:root[data-theme="dark"] #sbr .item .t small{color:#94A3B8}
:root[data-theme="dark"] #sbm .item .t small{color:#94A3B8}
:root[data-theme="dark"] #sbr .sbr-r{background:#16283F;color:#DBE7FA}
:root[data-theme="dark"] #sbm .sbr-r{background:#16283F;color:#DBE7FA}
:root[data-theme="dark"] #sbr .sbr-r b{color:#60A5FA}
:root[data-theme="dark"] #sbm .sbr-r b{color:#60A5FA}
:root[data-theme="dark"] #sbr .hint{background:#273549;color:#94A3B8}
:root[data-theme="dark"] #sbm .hint{background:#273549;color:#94A3B8}
:root[data-theme="dark"] .phone .cb-row.them .cb-b{background:#1E293B;border-color:#33415C;color:#F1F5F9}
:root[data-theme="dark"] .chat-row input{background:#0D1830;border-color:#2B3A55;color:#F1F5F9}
:root[data-theme="dark"] .phone #jadwal-list .item.appt{background:#1E293B;border-color:rgba(51,65,85,.5)}
:root[data-theme="dark"] .phone #jadwal-list .item .t b{color:#F1F5F9}
:root[data-theme="dark"] .phone #jadwal-list .item .t small{color:#94A3B8}
:root[data-theme="dark"] .jad-empty p{color:#94A3B8}
:root[data-theme="dark"] .group-label{color:#94A3B8}
:root[data-theme="dark"] .grow{color:#F1F5F9}
:root[data-theme="dark"] .grow+.grow{border-top-color:rgba(148,163,184,.12)}
:root[data-theme="dark"] .grow .chev{color:#475569}
:root[data-theme="dark"] .stab-nav{background:rgba(30,41,59,.85);border-color:rgba(51,65,85,.5);box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}
:root[data-theme="dark"] .stab{color:#94A3B8}
:root[data-theme="dark"] .phone .stab-nav .stab.act{color:#fff}
:root[data-theme="dark"] .fnav-pill{background:var(--s-pri)}
:root[data-theme="dark"] .skb{background:linear-gradient(90deg,#273549 25%,#33415C 50%,#273549 75%);background-size:200% 100%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shead{background:rgba(30,41,59,.82);border-color:rgba(51,65,85,.5);box-shadow:0 8px 24px rgba(0,0,0,.4)}:root:not([data-theme="light"]) .gh-t b{color:#F1F5F9}:root:not([data-theme="light"]) .gh-t small{color:#94A3B8}:root:not([data-theme="light"]) .tgl{background:rgba(51,65,85,.6);border-color:rgba(71,85,105,.6);color:#FBBF24}:root:not([data-theme="light"]) .hello h1{color:#F1F5F9}:root:not([data-theme="light"]) .hello p{color:#94A3B8}:root:not([data-theme="light"]) .mood{background:linear-gradient(135deg,#3E2A3A,#2E3350);box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}:root:not([data-theme="light"]) .mood h2{color:#F8E3EC}:root:not([data-theme="light"]) .mood>p{color:rgba(241,245,249,.72)}:root:not([data-theme="light"]) .mood.quizing{background:#1E293B}:root:not([data-theme="light"]) .mood.quizing h2{color:#F1F5F9}:root:not([data-theme="light"]) .qcard h2{color:#F1F5F9}:root:not([data-theme="light"]) .qcard .sub{color:#94A3B8}:root:not([data-theme="light"]) .prog .row{color:#94A3B8}:root:not([data-theme="light"]) .prog .bar{background:rgba(255,255,255,.1)}:root:not([data-theme="light"]) .opt{background:#1E293B;border-color:rgba(148,163,184,.2);color:#F1F5F9}:root:not([data-theme="light"]) .opt .radio{border-color:#475569}:root:not([data-theme="light"]) .opt.sel{background:rgba(59,130,246,.15);border-color:var(--s-pri);color:var(--s-text)}:root:not([data-theme="light"]) .qn-ghost{background:#273549;border-color:#33415C;color:#E2E8F0}:root:not([data-theme="light"]) .qa-card{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}:root:not([data-theme="light"]) .phone .card{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}:root:not([data-theme="light"]) .pcard{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}:root:not([data-theme="light"]) .group{background:#1E293B;border-color:rgba(51,65,85,.5);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}:root:not([data-theme="light"]) .qa-card b{color:#F1F5F9}:root:not([data-theme="light"]) .phone .card h3{color:#F1F5F9}:root:not([data-theme="light"]) .pcard b{color:#F1F5F9}:root:not([data-theme="light"]) .hjp b{color:#F1F5F9}:root:not([data-theme="light"]) .qa-card small{color:#94A3B8}:root:not([data-theme="light"]) .phone .card .sub{color:#94A3B8}:root:not([data-theme="light"]) .pcard small{color:#94A3B8}:root:not([data-theme="light"]) .hjp small{color:#94A3B8}:root:not([data-theme="light"]) .seg{background:rgba(30,41,59,.8);border-color:rgba(51,65,85,.5)}:root:not([data-theme="light"]) .stu-mode{color:#94A3B8}:root:not([data-theme="light"]) .stu-mode.act{color:#fff}:root:not([data-theme="light"]) #sbr .item{background:#1E293B;border-color:rgba(51,65,85,.5)}:root:not([data-theme="light"]) #sbm .item{background:#1E293B;border-color:rgba(51,65,85,.5)}:root:not([data-theme="light"]) #sbr .empty{background:#1E293B;border-color:rgba(51,65,85,.5)}:root:not([data-theme="light"]) #sbm .empty{background:#1E293B;border-color:rgba(51,65,85,.5)}:root:not([data-theme="light"]) #sbr .item .t b{color:#F1F5F9}:root:not([data-theme="light"]) #sbm .item .t b{color:#F1F5F9}:root:not([data-theme="light"]) #sbr .item .t small{color:#94A3B8}:root:not([data-theme="light"]) #sbm .item .t small{color:#94A3B8}:root:not([data-theme="light"]) #sbr .sbr-r{background:#16283F;color:#DBE7FA}:root:not([data-theme="light"]) #sbm .sbr-r{background:#16283F;color:#DBE7FA}:root:not([data-theme="light"]) #sbr .sbr-r b{color:#60A5FA}:root:not([data-theme="light"]) #sbm .sbr-r b{color:#60A5FA}:root:not([data-theme="light"]) #sbr .hint{background:#273549;color:#94A3B8}:root:not([data-theme="light"]) #sbm .hint{background:#273549;color:#94A3B8}:root:not([data-theme="light"]) .phone .cb-row.them .cb-b{background:#1E293B;border-color:#33415C;color:#F1F5F9}:root:not([data-theme="light"]) .chat-row input{background:#0D1830;border-color:#2B3A55;color:#F1F5F9}:root:not([data-theme="light"]) .phone #jadwal-list .item.appt{background:#1E293B;border-color:rgba(51,65,85,.5)}:root:not([data-theme="light"]) .phone #jadwal-list .item .t b{color:#F1F5F9}:root:not([data-theme="light"]) .phone #jadwal-list .item .t small{color:#94A3B8}:root:not([data-theme="light"]) .jad-empty p{color:#94A3B8}:root:not([data-theme="light"]) .group-label{color:#94A3B8}:root:not([data-theme="light"]) .grow{color:#F1F5F9}:root:not([data-theme="light"]) .grow+.grow{border-top-color:rgba(148,163,184,.12)}:root:not([data-theme="light"]) .grow .chev{color:#475569}:root:not([data-theme="light"]) .stab-nav{background:rgba(30,41,59,.85);border-color:rgba(51,65,85,.5);box-shadow:0 14px 34px -12px rgba(0,0,0,.5)}:root:not([data-theme="light"]) .stab{color:#94A3B8}:root:not([data-theme="light"]) .phone .stab-nav .stab.act{color:#fff}:root:not([data-theme="light"]) .fnav-pill{background:var(--s-pri)}:root:not([data-theme="light"]) .skb{background:linear-gradient(90deg,#273549 25%,#33415C 50%,#273549 75%);background-size:200% 100%}:root:not([data-theme="light"]) .privline{color:#4ADE80}:root:not([data-theme="light"]) .privline svg{color:#4ADE80}}

/* v8: rapikan tampilan BK di HP (mode terang + gelap) - fungsi tidak berubah */
@media (max-width:1000px){
 nav{justify-content:flex-start;justify-content:safe center;padding-left:10px;padding-right:10px;scroll-padding-left:10px}
}
@media (max-width:900px){
 /* animasi rise meninggalkan transform pada kartu; itu menangkap position:fixed overlay chat sehingga ruang chat terjepit - matikan di HP */
 .panel.on .pc{animation:none}
 .ibx-wrap{height:calc(100dvh - 210px)}
 .ibx-msgs{padding:14px}
}
@media (max-width:480px){
 .bar{gap:8px;margin-bottom:12px}
 .acts{gap:6px}
 #peran{max-width:104px;text-overflow:ellipsis}
}

.phone .counter{text-align:right;font-size:11px;color:#64748B;font-weight:600;margin:6px 12px 0 0}
:root[data-theme="dark"] .phone .counter{color:#94A3B8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone .counter{color:#94A3B8}}
/* ew-polish-v9 */
:root[data-theme="dark"] .ew-high b,:root[data-theme="dark"] .ew-tinggi .ew-risk-badge{color:#ff8f9b}:root[data-theme="dark"] .ew-medium b,:root[data-theme="dark"] .ew-sedang .ew-risk-badge{color:#ffce6b}:root[data-theme="dark"] .ew-safe b,:root[data-theme="dark"] .ew-aman .ew-risk-badge{color:#4ade94}:root[data-theme="dark"] .ew-na b,:root[data-theme="dark"] .ew-belum .ew-risk-badge{color:#aebdd6}:root[data-theme="dark"] .ew-safe-reason{color:#9fe7c3!important;background:rgba(47,182,124,.14)!important;border-color:rgba(47,182,124,.35)!important}:root[data-theme="dark"] .ew-na-reason{color:#c6d2e8!important;background:rgba(148,163,184,.14)!important;border-color:rgba(148,163,184,.35)!important}:root[data-theme="dark"] .ds-belum{background:rgba(148,163,184,.18);color:#c6d2e8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ew-high b,:root:not([data-theme="light"]) .ew-tinggi .ew-risk-badge{color:#ff8f9b}:root:not([data-theme="light"]) .ew-medium b,:root:not([data-theme="light"]) .ew-sedang .ew-risk-badge{color:#ffce6b}:root:not([data-theme="light"]) .ew-safe b,:root:not([data-theme="light"]) .ew-aman .ew-risk-badge{color:#4ade94}:root:not([data-theme="light"]) .ew-na b,:root:not([data-theme="light"]) .ew-belum .ew-risk-badge{color:#aebdd6}:root:not([data-theme="light"]) .ew-safe-reason{color:#9fe7c3!important;background:rgba(47,182,124,.14)!important;border-color:rgba(47,182,124,.35)!important}:root:not([data-theme="light"]) .ew-na-reason{color:#c6d2e8!important;background:rgba(148,163,184,.14)!important;border-color:rgba(148,163,184,.35)!important}:root:not([data-theme="light"]) .ds-belum{background:rgba(148,163,184,.18);color:#c6d2e8}}

/* v8.4: lencana cakupan kelas untuk guru BK */
.cls-badge{display:inline-flex;align-items:center;gap:6px;background:var(--tint);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.cls-badge[hidden]{display:none}
/* v8.4: aksi pada baris akun pengguna membungkus rapi di layar sempit (tidak lagi terpotong horizontal) */
#ulist .k-row-actions{flex-wrap:wrap;flex:1 1 100%;margin-top:6px}
#ulist .k-row-actions button{white-space:normal;line-height:1.3;text-align:center;min-width:0}

/* Impor siswa: ringkasan validasi & hasil impor */
.imp-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 10px}
.imp-probs{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:2px 0 6px;background:var(--tint)}
.imp-res{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:10px;background:var(--card);max-height:220px;overflow:auto}
.imp-row{font-size:12.5px;color:var(--ink);padding:2px 0;line-height:1.45}
.imp-row.warn{color:var(--mute)}
.imp-row.ok{font-weight:700;margin-bottom:4px}
#s_csv{font-family:inherit}

.sp{position:relative}
.sp-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:var(--card);border:1px solid var(--line);border-radius:12px;max-height:230px;overflow:auto;box-shadow:var(--shadow);padding:4px}
.sp-opt{padding:9px 10px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--ink)}
.sp-opt small{display:block;color:var(--mute);font-size:11px;font-weight:400}
.sp-opt.act,.sp-opt:hover{background:var(--tint)}
.sp-empty{padding:10px;color:var(--mute);font-size:13px}
select.sp-hide{display:none!important}
.jact{display:flex;gap:6px;flex-wrap:wrap}
.joff{opacity:.65}
.k-extra summary{cursor:pointer;font-weight:700;color:var(--pri);margin:2px 0 12px;font-size:13px}
.k-more{display:contents}
.k-more[hidden]{display:none}
@media(max-width:760px){.k-more>*{max-width:none!important;width:100%!important}.jact .btn{flex:1}}

@media(max-width:760px){.ds-table-wrap{overflow:visible}.ds-table,.ds-table tbody{display:block;min-width:0}.ds-table thead{display:none}.ds-table tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:10px;margin:10px;box-shadow:var(--shadow)}.ds-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:5px 0;text-align:right}.ds-table td:before{content:attr(data-label);font-weight:700;color:var(--mute);text-align:left}.ds-table td:first-child{display:block;text-align:left;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:4px}.ds-table td:first-child:before{display:none}}

/* Baris aksi formulir: tombol membungkus rapi di layar sempit */
.act-row{display:flex;gap:10px;flex-wrap:wrap}
.act-row .btn{flex:1 1 150px;justify-content:center}
@media (min-width:720px){.act-row .btn{flex:0 0 auto}}

/* ===== v9: ruang konseling layar penuh, tab Jadwal, chip status ===== */
@media (min-width:1001px){
 body.chatfull{overflow:hidden}
 body.chatfull .wrap{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-top:12px;padding-bottom:10px}
 body.chatfull .wrap>.bar{flex-shrink:0}
 body.chatfull .wrap>.demo-banner{flex-shrink:0;margin:4px 0;padding:4px 12px}
 body.chatfull .wrap>.demo-banner b{font-size:11px}
 body.chatfull .wrap>.demo-banner span{font-size:10.5px}
 body.chatfull .wrap>.demo-banner .btn{padding:6px 12px;font-size:12px}
 body.chatfull #guru.panel.on{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 body.chatfull #guru .top{flex-shrink:0;margin-bottom:4px}
 body.chatfull #guru .top h1{font-size:16px;margin:0}
 body.chatfull #guru .top .sub{display:inline;margin:2px 0 0;font-size:12px}
 body.chatfull #guru .top .cls-badge{display:inline-block;margin:2px 0 0 8px}
 body.chatfull #guru .top .cls-badge{margin-top:4px;font-size:11px}
 body.chatfull #guru #inbox-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
 body.chatfull #guru #inbox-card.ibx{display:grid;grid-template-columns:330px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);margin-top:0}
 body.chatfull #guru #ibx-wrap.ibx-wrap{display:contents}
 body.chatfull #guru #inbox-card>.ibx-top{grid-column:1;grid-row:1;padding:8px 10px 6px;border-bottom:1px solid var(--line);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
 body.chatfull #guru .ibx-titlerow h3{display:none}
 body.chatfull #guru .ibx-top .ibx-search{margin-top:6px;padding:3px 10px}
 body.chatfull #guru .ibx-top .ibx-search input{font-size:12px}
 body.chatfull #guru .ibx-top .ibx-filters{margin-top:6px;gap:5px;flex-wrap:nowrap;overflow-x:auto}
 body.chatfull #guru .ibx-top .ibx-chip{padding:2px 9px;font-size:11px;white-space:nowrap}
 body.chatfull #guru .ibx-titlerow .ibx-sp{display:none}
 body.chatfull #guru #ibx-list.ibx-side{grid-column:1;grid-row:2;border-right:1px solid var(--line)}
 body.chatfull #guru #ibx-chat.ibx-chat{grid-column:2;grid-row:1/span 2;min-height:0;border-left:1px solid var(--line)}
 body.chatfull #guru .ibx-composer{padding:9px 14px 11px}
 body.chatfull #guru .ibx-mtabs{margin-bottom:7px}
 body.chatfull #guru .ibx-chips{margin-bottom:7px}
 body.chatfull #guru .ibx-pnote{margin:7px 0 0;font-size:11px}
 body.chatfull .foot{display:none}
}
@media (min-width:1001px) and (max-height:760px){
 body.chatfull .wrap{padding-top:12px;padding-bottom:10px}
 body.chatfull #guru .top{margin-bottom:8px}
 body.chatfull #guru .top h1{font-size:18px}
 body.chatfull #guru .ibx-chead{padding:5px 14px}
 body.chatfull #guru .ibx-chead .ibx-av{width:32px;height:32px}
 body.chatfull #guru .ibx-search{margin-top:6px;padding:5px 11px}
 body.chatfull #guru .ibx-filters{margin-top:6px}
 body.chatfull #guru .ibx-chead{padding:6px 14px}
 body.chatfull #guru .ibx-composer{padding:8px 14px 10px}
 body.chatfull #guru .ibx-mtabs{margin-bottom:6px;padding:2px}
 body.chatfull #guru .ibx-mtab{padding:5px 14px}
 body.chatfull #guru .ibx-chips{margin-bottom:6px;gap:6px}
 body.chatfull #guru .ibx-qchip{padding:4px 10px}
 body.chatfull #guru .ibx-crow input{padding:9px 16px}
 body.chatfull #guru .ibx-clip{width:40px;height:40px}
 body.chatfull #guru .ibx-pnote{display:none}
}
.ibx-st{display:inline-block;margin:2px 6px 0 0;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.01em}
.ibx-st.done{background:#E5F6EC;color:#177245}
.ibx-st.snz{background:#FCF0D2;color:#96690A}
.ibx-st.kons{background:#FCF0D2;color:#96690A}
.ibx-st.pri{background:#FBE3E3;color:#B3261E}
[data-theme="dark"] .ibx-st.done{background:#0e3524;color:#7ed7a5}
[data-theme="dark"] .ibx-st.snz{background:#3a2f10;color:#f0c96a}
[data-theme="dark"] .ibx-st.kons{background:#3a2f10;color:#f0c96a}
[data-theme="dark"] .ibx-st.pri{background:#3d1512;color:#f2a49e}
.jday{margin:12px 0 4px;font-size:12px;font-weight:700;color:#5b6b85}
[data-theme="dark"] .jday{color:#8fa3c4}

/* v11 */
.ibx-att{display:flex;gap:8px;align-items:center;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none;max-width:320px}
.ibx-att svg{flex:0 0 auto;color:var(--mute)}
.ibx-att span{display:flex;flex-direction:column;min-width:0}
.ibx-att b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-att small{color:var(--mute);font-size:11.5px}
.ibx-att:active{opacity:.8}
.cb-b .ibx-att{margin-top:6px}
#p360{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--card);border-left:1px solid var(--line);box-shadow:-12px 0 32px rgba(15,23,42,.18);z-index:60;display:flex;flex-direction:column}
#p360[hidden]{display:none}
.p360-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.p360-body{overflow:auto;padding:14px 16px 24px}
.hv-banner{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:#E5F6EC;color:#177245;font-size:13.5px;line-height:1.5;border:1px solid #bfe6cd}
.hv-banner b{display:block}
.hv-banner span{opacity:.85}
[data-theme="dark"] .hv-banner{background:#0e3524;color:#7ed7a5;border-color:#1d5238}
.ai-out{white-space:pre-wrap;background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;max-height:300px;overflow:auto}
.sdm-clip{flex:0 0 auto}


/* ================================================================
   v12 - Guru BK: tema navy/terang profesional + perbaikan terpotong
   Lingkup: hanya peran Guru BK (body[data-role="guru"]).
   ================================================================ */
/* --- token per tema (gelap: navy polos / terang: putih kantor) --- */
body[data-role="guru"]{--bg:#F3F5F9;--card:#FFFFFF;--line:#E2E7F0;--ink:#101828;--mute:#667085;--tint:#F8FAFC;--nav:#EEF2F7;--panel:#FFFFFF;--pri:#2F5BD0;--pri2:#2648AC;--v12-actx:#2F5BD0;--v12-acbg:rgba(47,91,208,.12);--v12-tint2:#EEF2F7;--v12-actbg:#FFFFFF;--v12-bub:#FFFFFF;--v12-dmb:#92400E;--v12-dms:rgba(146,64,14,.8)}
:root[data-theme="dark"] body[data-role="guru"]{--bg:#0B1220;--card:#111A2E;--line:#1E2A44;--ink:#E6EBF5;--mute:#8A97B1;--tint:#16213A;--nav:#0D1730;--panel:#111A2E;--pri:#3B6FE0;--pri2:#2F5BD0;--v12-actx:#5B8AF0;--v12-acbg:rgba(59,111,224,.14);--v12-tint2:#0D1730;--v12-actbg:rgba(255,255,255,.10);--v12-bub:#16213A;--v12-dmb:#FCD34D;--v12-dms:rgba(252,211,77,.75)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body[data-role="guru"]{--bg:#0B1220;--card:#111A2E;--line:#1E2A44;--ink:#E6EBF5;--mute:#8A97B1;--tint:#16213A;--nav:#0D1730;--panel:#111A2E;--pri:#3B6FE0;--pri2:#2F5BD0;--v12-actx:#5B8AF0;--v12-acbg:rgba(59,111,224,.14);--v12-tint2:#0D1730;--v12-actbg:rgba(255,255,255,.10);--v12-bub:#16213A;--v12-dmb:#FCD34D;--v12-dms:rgba(252,211,77,.75)}}
/* --- latar seragam: satu radial tipis kiri atas, tanpa pola lain --- */
body[data-role="guru"]{background:radial-gradient(ellipse at 8% 0%,rgba(47,91,208,.06),transparent 50%),#F3F5F9;background-attachment:fixed}
:root[data-theme="dark"] body[data-role="guru"]{background:radial-gradient(ellipse at 8% 0%,rgba(59,111,224,.10),transparent 50%),#0B1220;background-attachment:fixed}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body[data-role="guru"]{background:radial-gradient(ellipse at 8% 0%,rgba(59,111,224,.10),transparent 50%),#0B1220;background-attachment:fixed}}
/* --- navbar: hamburger kiri, menu kapsul, pill aktif aksen 12% --- */
body.chatfull[data-role="guru"] .bar{grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;min-height:56px}
body[data-role="guru"] .bar nav{min-width:0;justify-self:start;border:1px solid var(--line);box-shadow:none;background:var(--nav)}
body[data-role="guru"] nav button{padding:7px 12px;font-size:12.5px}
body[data-role="guru"] nav button[aria-selected="true"]{background:var(--v12-acbg);color:var(--v12-actx)}
body[data-role="guru"] .gs input{width:160px;min-height:38px}
.nav-ham{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;flex:none;padding:0}
.nav-ham svg{width:18px;height:18px}
body.chatfull[data-role="guru"] .nav-ham{display:inline-flex}
body[data-role="guru"] nav button[data-p="guru"]{position:relative;padding-right:28px!important}
body[data-role="guru"] .nav-badge{position:absolute;top:50%;right:7px;transform:translateY(-50%);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#DC2626;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;animation:v12nbpulse 1.8s ease-out infinite;pointer-events:none}
@keyframes v12nbpulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}70%{box-shadow:0 0 0 7px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
/* --- banner demo: tint oranye transparan + tombol ghost --- */
body[data-role="guru"] .demo-banner{background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.35);color:var(--v12-dmb)}
body[data-role="guru"] .demo-banner b{color:var(--v12-dmb)}
body[data-role="guru"] .demo-banner span{color:var(--v12-dms)}
body[data-role="guru"] .demo-banner .btn{background:transparent;border:1px solid rgba(217,119,6,.4);color:var(--v12-dmb);box-shadow:none}
body[data-role="guru"] .demo-banner .btn:hover{background:rgba(217,119,6,.08)}
body[data-role="guru"] .demo-banner .demo-reset{color:var(--v12-dmb)!important;border-color:rgba(217,119,6,.4)!important;background:transparent!important}body[data-role="guru"] .demo-banner .demo-reset:hover{background:rgba(217,119,6,.08)!important}
/* --- perbaikan terpotong: fallback vh + pengaman min-height --- */
body.chatfull{height:100vh;height:100dvh}
@media (min-width:1001px){body[data-role="guru"] .wrap{max-width:1400px}}
body.chatfull .wrap{height:100vh;height:100dvh}
body.chatfull #guru #ibx-list.ibx-side{min-height:0}
body.chatfull #guru #ibx-msgs{min-height:0}
/* --- Ruang Konseling (desktop, chatfull) --- */
@media (min-width:1001px){
 body.chatfull #guru #inbox-card.ibx{grid-template-columns:340px minmax(0,1fr);transition:grid-template-columns .3s ease;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
 body.chatfull #guru #inbox-card>.ibx-top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
 body.chatfull #guru #ibx-list.ibx-side{background:transparent;border-right:1px solid var(--line)}
 body.chatfull #guru #ibx-chat.ibx-chat{background:transparent;border-left:0}
 body.chatfull #guru .ibx-chead{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
 body.chatfull #guru .ibx-composer{background:transparent}
 /* filter dalam satu kapsul */
 body.chatfull #guru .ibx-top .ibx-filters{background:var(--v12-tint2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
 body.chatfull #guru .ibx-top .ibx-chip{border:0;border-radius:999px;padding:5px 11px}
 body.chatfull #guru .ibx-top .ibx-chip.act{color:var(--ink)}
 body.chatfull #guru .ibx-top .ibx-pill{background:var(--v12-actbg);border-radius:999px;box-shadow:0 1px 2px rgba(16,24,40,.10)}
 body.chatfull #guru .ibx-top .ibx-chip.act .ibx-badge{background:var(--pri);color:#fff}
 /* item daftar tanpa kotak; aktif: garis kiri darurat + aksen 8% */
 body.chatfull #guru .ibx-item{border:1px solid transparent;border-left:3px solid transparent;border-radius:12px}
 body.chatfull #guru .ibx-item:hover{background:var(--tint)}
 body.chatfull #guru .ibx-item.act{background:rgba(59,111,224,.08);border-color:transparent;border-left-color:#DC2626}
 body.chatfull #guru .ibx-item:has(.ibx-st.pri):not(.act){border-left-color:#DC2626}
 /* pill status: latar 12% warna status, teks warna status */
 body.chatfull #guru .ibx-st.pri{background:rgba(220,38,38,.12);color:#DC2626}
 body.chatfull #guru .ibx-st.kons{background:rgba(217,119,6,.12);color:#D97706}
 body.chatfull #guru .ibx-st.done{background:rgba(22,163,74,.12);color:#16A34A}
 body.chatfull #guru .ibx-st.snz{background:rgba(138,151,177,.15);color:var(--mute)}
 body.chatfull #guru .ibx-tag{background:rgba(138,151,177,.14);color:var(--mute)}
 body.chatfull #guru .ibx-tag.anon{background:rgba(138,151,177,.14);color:var(--mute)}
 /* header chat: ikon sekunder tanpa kotak, Tandai Selesai pill aksen */
 body.chatfull #guru .ibx-chead .ibx-btn{border-radius:999px;padding:7px 14px;font-size:12.5px;background:transparent;border:1px solid var(--line);color:var(--ink)}
 body.chatfull #guru .ibx-chead .ibx-btn:hover{background:var(--tint)}
 body.chatfull #guru .ibx-chead .ibx-btn.soft{background:transparent}
 body.chatfull #guru .ibx-chead .ibx-btn[data-act="case"],body.chatfull #guru .ibx-chead .ibx-btn[data-act="snooze"]{font-size:0;gap:0;padding:8px;background:transparent;border:0;box-shadow:none;color:var(--mute)}
 body.chatfull #guru .ibx-chead .ibx-btn[data-act="case"]:hover,body.chatfull #guru .ibx-chead .ibx-btn[data-act="snooze"]:hover{color:var(--ink)}
 body.chatfull #guru .ibx-chead .ibx-btn[data-act="case"] svg,body.chatfull #guru .ibx-chead .ibx-btn[data-act="snooze"] svg{width:18px;height:18px}
 body.chatfull #guru .ibx-chead .ibx-btn[data-act="done"]{background:var(--v12-acbg);border-color:transparent;color:var(--v12-actx)}
 /* banner darurat: tint 8%, garis kiri 4px */
 body.chatfull #guru .ibx-signote{background:rgba(220,38,38,.08);border:0;border-left:4px solid #DC2626;border-radius:10px;color:var(--ink);padding:12px 14px}
 body.chatfull #guru .ibx-signote b{color:#DC2626}
 body.chatfull #guru .ibx-signote svg{color:#DC2626}
 /* bubble: sudut lancip kiri atas, 75% */
 body.chatfull #guru .ibx-bub{max-width:75%;line-height:1.6;box-shadow:none}
 body.chatfull #guru .ibx-msgrow.them .ibx-bub{background:var(--v12-bub);border:1px solid var(--line);border-radius:16px;border-top-left-radius:4px}
 body.chatfull #guru .ibx-msgrow.own .ibx-bub{background:var(--pri);border-radius:16px;border-top-right-radius:4px}
 body.chatfull #guru .ibx-ts{font-size:11px;color:var(--mute)}
 /* input: satu kapsul, Kirim aksen di dalam */
 body.chatfull #guru .ibx-crow{gap:8px;background:var(--v12-bub);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 8px}
 body.chatfull #guru .ibx-crow input{border:0;background:transparent;box-shadow:none;border-radius:999px;padding:8px 10px;min-height:38px}
 body.chatfull #guru .ibx-crow input:focus{border:0;box-shadow:none;background:transparent}
 body.chatfull #guru .ibx-composer.note-mode .ibx-crow{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.35)}
 body.chatfull #guru .ibx-composer.note-mode .ibx-crow input{background:transparent}
 body.chatfull #guru .ibx-composer.note-mode .ibx-crow input:focus{border:0;box-shadow:none;background:transparent}
 body.chatfull #guru .ibx-send{border-radius:999px;background:var(--pri);padding:10px 20px}
 body.chatfull #guru .ibx-clip{border:0;background:transparent;width:38px;height:38px}
 body.chatfull #guru .ibx-qchip{background:transparent;border:1px solid rgba(59,111,224,.35);color:var(--v12-actx);border-radius:999px}
 body.chatfull #guru .ibx-qchip:hover{background:var(--v12-acbg)}
 /* daftar chat ditutup lewat hamburger */
 body.chatfull #guru #inbox-card.ibx.listhide{grid-template-columns:minmax(0,1fr)}
 body.chatfull #guru #inbox-card.listhide>.ibx-top,body.chatfull #guru #inbox-card.listhide #ibx-list{display:none}
 body.chatfull #guru #inbox-card.listhide #ibx-chat{grid-column:1;grid-row:1/span 2}
}
/* --- toast: kartu melayang kanan bawah --- */
body[data-role="guru"] .toast{left:auto;right:20px;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateY(20px);border-radius:14px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(16,24,40,.14);padding:10px 16px;z-index:2000}
body[data-role="guru"] .toast.s{transform:none}

/* v12b - demo banner ghost buttons (force, beats light-mode .btn gradient) */
body[data-role="guru"] .demo-banner .btn{background:transparent!important;box-shadow:none!important;border:1px solid rgba(217,119,6,.5)!important;color:var(--warn)!important;font-weight:700}
body[data-role="guru"] .demo-banner .btn:hover{background:rgba(217,119,6,.10)!important;transform:none;box-shadow:none!important}

/* v12c - toast pesan masuk dengan tombol Lihat (3 detik) */
body[data-role="guru"] #v12-toast{position:fixed;right:20px;bottom:calc(140px + env(safe-area-inset-bottom,0px));z-index:2001;display:flex;align-items:center;gap:10px;max-width:340px;padding:10px 12px 10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(16,24,40,.18);color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
body[data-role="guru"] #v12-toast.in{opacity:1;transform:none}
body[data-role="guru"] #v12-toast.out{opacity:0;transform:translateY(10px)}
body[data-role="guru"] #v12-toast .v12-toast-ic{color:var(--pri);display:inline-flex;flex:none}
body[data-role="guru"] #v12-toast .v12-toast-ic svg{width:18px;height:18px}
body[data-role="guru"] #v12-toast .v12-toast-tx{min-width:0;flex:1;display:block}
body[data-role="guru"] #v12-toast .v12-toast-tx b{display:block;font-size:12.5px}
body[data-role="guru"] #v12-toast .v12-toast-tx span{display:block;font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;margin-top:1px}
body[data-role="guru"] #v12-toast .v12-toast-btn{flex:none;border:0;border-radius:999px;padding:7px 14px;background:var(--pri);color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
body[data-role="guru"] #v12-toast .v12-toast-btn:hover{background:var(--pri2)}

/* v12d - FAB & navbar non-chat guru */
@media (min-width:1001px){
 body[data-role="guru"] .bar{grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;min-height:56px}
 body[data-role="guru"] .bar nav{justify-self:start}
 body[data-role="guru"] .acts>*{flex:none}
 body[data-role="guru"] .acts select#peran{width:auto;min-width:108px;max-width:none;flex:none}
 body[data-role="guru"] .acts .gs{flex:none}
 body[data-role="guru"] .acts .gs input{width:160px}
}
body.chatfull[data-role="guru"] .fab{bottom:calc(130px + env(safe-area-inset-bottom,0px))}
body[data-role="guru"] #v12-toast{bottom:calc(192px + env(safe-area-inset-bottom,0px))}

/* ================================================================
   v12e - bar atas stabil & pergantian menu halus (peran Guru BK)
   - Slot hamburger selalu dicadangkan di semua menu Guru BK, jadi
     logo, menu, dan tombol kanan tidak bergeser antar halaman.
   - Gutter scrollbar selalu ada: halaman tidak bergeser ketika
     scrollbar muncul atau hilang.
   - Satu animasi fade singkat untuk semua pergantian menu (animasi
     kartu bertingkat dimatikan agar tidak terlihat berkedip).
   - Tinggi chat layar penuh memperhitungkan banner lisensi di atas,
     sehingga bagian bawah chat tidak tenggelam.
   ================================================================ */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
@keyframes v12fade{from{opacity:0}to{opacity:1}}
body[data-role="guru"] .panel.on{animation:v12enter .28s cubic-bezier(.2,.7,.2,1)}
@keyframes v12enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body[data-role="guru"] .panel.on .card{animation:none}
@media (prefers-reduced-motion:reduce){body[data-role="guru"] .panel.on,body[data-role="guru"] .panel.on .card{animation:none}}
@media (min-width:1001px){
 body[data-role="guru"] .nav-ham{display:inline-flex;visibility:hidden}
 body.chatfull[data-role="guru"] .nav-ham{visibility:visible}
 body.chatfull{display:flex;flex-direction:column}
 body.chatfull .wrap{height:auto;flex:1 1 auto;min-height:0;width:100%}
}

/* v12f - latar area pesan sedikit lebih gelap dari header nama,
   sesuai mockup yang disetujui (dua tema tetap konsisten) */
body.chatfull[data-role="guru"] #guru .ibx-msgs{background:var(--bg)}
.ibx-cnt-note{font-size:10.5px;color:var(--mute);margin:4px 2px 0;line-height:1.35}

/* v12.2 - transisi warna tema halus (class dipasang sesaat saat ganti tema) */
html.theme-anim body,html.theme-anim .wrap,html.theme-anim .bar,html.theme-anim nav,html.theme-anim nav button,html.theme-anim .brand,html.theme-anim .brand small,html.theme-anim .acts,html.theme-anim .card,html.theme-anim .btn,html.theme-anim .ib,html.theme-anim input,html.theme-anim select,html.theme-anim textarea,html.theme-anim .panel,html.theme-anim h1,html.theme-anim h2,html.theme-anim h3,html.theme-anim p,html.theme-anim span,html.theme-anim .sub,html.theme-anim .ibx-item,html.theme-anim .ibx-bub,html.theme-anim .ibx-top,html.theme-anim .ibx-side,html.theme-anim .ibx-chat,html.theme-anim .ibx-chead,html.theme-anim .ibx-composer,html.theme-anim .ibx-crow,html.theme-anim .chip,html.theme-anim .ibx-chip,html.theme-anim .demo-banner,html.theme-anim table,html.theme-anim th,html.theme-anim td,html.theme-anim .seg,html.theme-anim .seg button,html.theme-anim dialog{transition-property:background-color,color,border-color,box-shadow;transition-duration:.3s;transition-timing-function:ease}
/* v12.2 - bar guru responsif: rampingkan dulu, lalu menu turun ke baris sendiri */
@media (min-width:1001px) and (max-width:1400px){
 body[data-role="guru"] .brand small{display:none}
 body[data-role="guru"] .gs input{width:110px}
 body[data-role="guru"] nav button{padding:7px 9px;font-size:12px}
 body[data-role="guru"] .bar,body.chatfull[data-role="guru"] .bar{gap:8px}
 body[data-role="guru"] .acts{gap:6px}
}
@media (min-width:1001px) and (max-width:1260px){
 body[data-role="guru"] .bar,body.chatfull[data-role="guru"] .bar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;min-height:0}
 body[data-role="guru"] .bar .acts{justify-self:end}
 body[data-role="guru"] .bar nav{order:4;grid-column:1/-1;width:100%;justify-content:center}
}

/* v12.2 - lonceng guru dihapus: popup-nya buntu untuk guru; indikator unread asli tetap di badge menu Guru BK & inbox. Lonceng siswa tidak tersentuh. */
body[data-role="guru"] .acts .nwrap{display:none}


/* Salinan demo promosi: pemilih peran saat bilah atas tersembunyi (mode siswa) */
#demo-rolebar{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:60;display:none;align-items:center;flex-wrap:nowrap;gap:6px;background:var(--card,#fff);color:var(--ink,#0f172a);border:1px solid var(--line,#e2e8f0);border-radius:999px;padding:6px 12px;font-size:12.5px;box-shadow:0 8px 28px rgba(2,6,23,.16);max-width:94vw;overflow-x:auto;white-space:nowrap}
body[data-role="siswa"] #demo-rolebar{display:flex}
#demo-rolebar span{opacity:.7;flex:none}
#demo-rolebar button{flex:none;border:1px solid var(--line,#e2e8f0);background:transparent;color:inherit;border-radius:999px;padding:5px 11px;font:inherit;cursor:pointer;white-space:nowrap}
#demo-rolebar button:hover{background:var(--pri,#2563eb);color:#fff;border-color:transparent}