/* Laman admin BlackFox (Fasa 1, baca sahaja). Palet & fon ikut app: #0F172A #7C3AED #22D3EE #A78BFA #EDE9FE, Inter. */
:root{--n0:#0F172A;--n1:#7C3AED;--n2:#22D3EE;--n3:#A78BFA;--n4:#EDE9FE;--tx:#f4f4f5;--mu:rgba(237,233,254,.62);--mu2:rgba(237,233,254,.42);
--br:rgba(237,233,254,.16);--card:rgba(30,27,75,.42);--hijau:#34d399;--kuning:#fbbf24;--merah:#fb7185;--kelabu:#94a3b8;
--fi:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;color:var(--tx);font:14px/1.45 var(--fi);-webkit-font-smoothing:antialiased;overflow-x:hidden;
background:linear-gradient(160deg,#0b0614 0%,#0F172A 45%,#1e1b4b 100%) fixed;
padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
main{max-width:720px;margin:0 auto;padding:16px 16px 28px}
h1{font-size:20px;font-weight:700;letter-spacing:-.01em}
.kecil{display:block;font-size:12px;color:var(--mu)}
.atas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ikon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--br);background:var(--card)}
.ikon:active{transform:scale(.95)}
.ikon.putar svg{animation:putar .8s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.kad{border:1px solid var(--br);border-radius:20px;background:var(--card);padding:14px 16px}
.lama{margin:0 0 10px;padding:8px 12px;border-radius:12px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#fde68a;font-size:12.5px}
.lama[hidden]{display:none}
.lampu{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.lampu b{display:block;font-size:20px;font-weight:800;letter-spacing:.02em}
.titik{flex:none;width:44px;height:44px;border-radius:50%;background:var(--kelabu);box-shadow:0 0 0 6px rgba(148,163,184,.16)}
.lampu.hijau .titik{background:var(--hijau);box-shadow:0 0 0 6px rgba(52,211,153,.18),0 0 24px rgba(52,211,153,.55)}
.lampu.kuning .titik{background:var(--kuning);box-shadow:0 0 0 6px rgba(251,191,36,.18),0 0 24px rgba(251,191,36,.5)}
.lampu.merah .titik{background:var(--merah);box-shadow:0 0 0 6px rgba(251,113,133,.2),0 0 24px rgba(251,113,133,.55)}
.lampu.hijau b{color:var(--hijau)}.lampu.kuning b{color:var(--kuning)}.lampu.merah b{color:var(--merah)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.kpi b{display:block;margin:2px 0;font-size:24px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,var(--n2),var(--n3));-webkit-background-clip:text;background-clip:text;color:transparent}
.amaran{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;margin-bottom:10px;padding:8px 14px;text-align:left;border-radius:14px;border:1px solid rgba(251,113,133,.45);background:rgba(251,113,133,.12);color:#fecdd3;font-weight:600}
.amaran[hidden],.amaranList[hidden]{display:none}
.amaran.kuning{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.1);color:#fde68a}
.amaranList{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.amaranList li{padding:8px 12px;border-radius:12px;border:1px solid var(--br);background:var(--card);font-size:13px;border-left:4px solid var(--kelabu)}
.amaranList li.merah{border-left-color:var(--merah)}.amaranList li.kuning{border-left-color:var(--kuning)}.amaranList li.info{border-left-color:var(--n2)}
.cari{margin:14px 0 10px}
#q{width:100%;min-height:46px;padding:0 14px;border-radius:14px;border:1px solid var(--br);background:rgba(15,23,42,.55);color:var(--tx);font:inherit;font-size:16px;text-transform:uppercase}
#q::placeholder{text-transform:none;color:var(--mu2)}
#q:focus{outline:2px solid var(--n3);outline-offset:1px}
.chip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chip::-webkit-scrollbar{display:none}
.chip button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--br);background:rgba(15,23,42,.45);color:var(--mu);font-weight:600;font-size:13px;white-space:nowrap}
.chip button i{font-style:normal;margin-left:4px;color:var(--mu2)}
.chip button.on{color:#0F172A;border-color:transparent;background:radial-gradient(120% 140% at 30% 20%,#fff,#EDE9FE 45%,#c4b5fd)}
.chip button.on i{color:#4c1d95}
.senarai{list-style:none;padding:0;display:grid;gap:8px}
.baris{border:1px solid var(--br);border-radius:16px;background:var(--card);overflow:hidden}
.baris>button{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;min-height:56px;padding:10px 14px;text-align:left}
.m{font-weight:700;font-size:15px;letter-spacing:.02em}
.p{font-size:12px;color:var(--mu)}
.lenc{align-self:center;grid-row:1/3;grid-column:2;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--br)}
.lenc.aktif{color:var(--hijau);border-color:rgba(52,211,153,.5)}
.lenc.tamat{color:var(--kuning);border-color:rgba(251,191,36,.5)}
.lenc.dikunci{color:var(--merah);border-color:rgba(251,113,133,.5)}
.bar{grid-column:1/3;height:6px;margin-top:6px;border-radius:999px;background:rgba(237,233,254,.1);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--n2),var(--n1))}
.bar.penuh i{background:linear-gradient(90deg,var(--n3),var(--merah))}
.on-sesi{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--hijau);box-shadow:0 0 8px var(--hijau);vertical-align:middle}
.butir{padding:0 14px 12px;color:var(--mu);font-size:13px;display:grid;gap:2px}
.butir[hidden]{display:none}
.kosong,.kaki{margin-top:14px;text-align:center;color:var(--mu2)}
.kosong[hidden]{display:none}
@media (min-width:760px){.senarai{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.ikon.putar svg{animation:none}.ikon:active{transform:none}}