:root { --navy:#17233f; --purple:#6748dc; --blue:#35aee6; --green:#2db77b; --red:#ef6577; --yellow:#ffd45e; --ink:#30294b; --muted:#746d88; --line:#e5def0; --paper:#fff; --canvas:#f6f4fb; --shadow:0 18px 45px rgba(48,36,88,.10); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 90% 2%,rgba(53,174,230,.12),transparent 28%),var(--canvas); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button { border:0; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.eyebrow { margin:0 0 5px; color:var(--purple); font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.18; }

.admin-login-page { display:grid; min-height:100vh; padding:22px; place-items:center; background:linear-gradient(135deg,#5f43d5,#4385e7 64%,#31b9d5); }
.admin-login-card { position:relative; width:min(470px,100%); padding:45px; border:5px solid rgba(255,255,255,.8); border-radius:30px; background:#fff; box-shadow:0 28px 75px rgba(28,21,68,.28); }
.admin-logo,.admin-brand>span { display:grid; width:56px; height:56px; place-items:center; border:4px solid #fff; border-radius:17px; color:#fff; background:#ff7466; box-shadow:0 5px 0 rgba(104,50,69,.16); font-weight:950; transform:rotate(-3deg); }
.admin-login-card h1 { margin:10px 0 8px; font-size:2.35rem; }
.admin-login-card>p:not(.eyebrow) { color:var(--muted); }
.back-student { position:absolute; top:18px; right:20px; color:var(--purple); font-size:.8rem; font-weight:800; text-decoration:none; }
label { display:block; margin:22px 0 7px; color:var(--muted); font-size:.82rem; font-weight:850; }
input,select { width:100%; min-height:48px; padding:11px 13px; border:2px solid var(--line); border-radius:13px; color:var(--ink); background:#fff; outline:none; }
input:focus,select:focus { border-color:var(--purple); box-shadow:0 0 0 4px rgba(103,72,220,.12); }
.admin-primary { width:100%; min-height:52px; margin-top:16px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#7456e7,#573ac8); box-shadow:0 5px 0 rgba(66,43,136,.18); font-weight:900; }
.form-status { min-height:22px; margin:10px 0 0; color:#bd4052; font-size:.82rem; text-align:center; }

.admin-topbar { position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:76px; padding:10px clamp(16px,4vw,54px); color:#fff; background:linear-gradient(100deg,#5f43d5,#4285e7 64%,#31b7d5); border-bottom:4px solid var(--yellow); box-shadow:0 8px 25px rgba(53,39,107,.16); }
.admin-brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.admin-brand>span { width:46px; height:46px; border-width:3px; border-radius:13px; }
.admin-brand small,.admin-brand b { display:block; }
.admin-brand small { color:#d8e8ff; font-size:.68rem; }
.live-controls { display:flex; align-items:center; gap:10px; }
.live-badge { padding:7px 10px; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:rgba(255,255,255,.14); font-size:.74rem; font-weight:850; }
.live-badge i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#78f0b2; box-shadow:0 0 0 5px rgba(120,240,178,.15); animation:livePulse 1.2s infinite alternate; }
@keyframes livePulse { to { opacity:.45; } }
.last-updated { color:#e4ecff; font-size:.72rem; }
.icon-action,.logout-button { min-height:38px; padding:7px 11px; border:1px solid rgba(255,255,255,.35); border-radius:11px; color:#fff; background:rgba(255,255,255,.12); font-weight:850; }
.icon-action { width:40px; font-size:1.25rem; }

.admin-content { width:min(1480px,calc(100% - 28px)); margin:28px auto 60px; }
.dashboard-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.dashboard-intro h1 { margin:0 0 5px; font-size:clamp(1.8rem,4vw,2.8rem); }
.dashboard-intro p:last-child { margin:0; color:var(--muted); }
.health-note { padding:10px 14px; border:2px solid #bce8d3; border-radius:14px; color:#207251; background:#edfff6; font-size:.8rem; font-weight:850; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:18px; }
.summary-card { position:relative; overflow:hidden; min-height:132px; padding:21px; border:1px solid var(--line); border-radius:21px; background:var(--paper); box-shadow:var(--shadow); }
.summary-card::after { position:absolute; right:-25px; bottom:-32px; width:105px; height:105px; border:18px solid currentColor; border-radius:50%; opacity:.07; content:""; }
.summary-card .summary-icon { display:grid; width:39px; height:39px; place-items:center; border-radius:12px; background:#eee9ff; font-size:1.2rem; }
.summary-card strong { display:block; margin:10px 0 1px; font-size:1.8rem; }
.summary-card span { color:var(--muted); font-size:.78rem; }
.summary-card.green { color:#20845a; }.summary-card.blue { color:#217faa; }.summary-card.orange { color:#b66b1b; }.summary-card.purple { color:#6046c4; }

.analytics-grid { display:grid; grid-template-columns:1.5fr .8fr; gap:18px; margin-bottom:18px; }
.dashboard-card { min-width:0; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow); }
.dashboard-card>header { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:17px; }
.dashboard-card h2 { margin:0; font-size:1.18rem; }
.trend-chip { padding:5px 9px; border-radius:999px; color:#1e7753; background:#e6f8ef; font-size:.73rem; font-weight:850; }
.line-chart { min-height:255px; }
.line-chart svg { display:block; width:100%; height:255px; overflow:visible; }
.chart-grid { stroke:#e9e4f1; stroke-width:1; }.chart-line { fill:none; stroke:#6748dc; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.chart-area { fill:url(#trendFill); }.chart-dot { fill:#fff; stroke:#6748dc; stroke-width:3; }.chart-label { fill:#8a829a; font-size:11px; text-anchor:middle; }
.donut-layout { display:flex; align-items:center; justify-content:center; gap:24px; min-height:255px; }
.accuracy-donut { display:grid; width:166px; height:166px; place-items:center; border-radius:50%; background:conic-gradient(var(--green) var(--accuracy,0%),#f3d9de 0); position:relative; }
.accuracy-donut::after { position:absolute; inset:24px; border-radius:50%; background:#fff; content:""; }
.accuracy-donut span { position:relative; z-index:1; font-size:1.8rem; font-weight:950; }
.donut-layout p { margin:8px 0; color:var(--muted); font-size:.8rem; }.donut-layout i { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; }.correct-dot { background:var(--green); }.wrong-dot { background:#f0a6b0; }
.donut-layout small { color:var(--muted); }
.weak-topic-chart { display:grid; gap:12px; }
.weak-bar { display:grid; grid-template-columns:minmax(115px,1fr) minmax(120px,1.5fr) 42px; align-items:center; gap:10px; }
.weak-bar label { margin:0; overflow:hidden; color:var(--ink); text-overflow:ellipsis; white-space:nowrap; }
.bar-track { height:13px; overflow:hidden; border-radius:99px; background:#f0edf5; }.bar-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ef6577,#ffb15d); }.weak-bar strong { font-size:.8rem; }
.activity-list { display:grid; max-height:310px; overflow:auto; }
.activity-item { display:grid; grid-template-columns:35px 1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid #eee9f4; }
.activity-item>span { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#eef8ff; }.activity-item b,.activity-item small { display:block; }.activity-item small { color:var(--muted); }.activity-item time { color:var(--muted); font-size:.68rem; }

.students-card { padding:0; overflow:hidden; }
.students-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:22px; }
.student-tools { display:grid; grid-template-columns:minmax(190px,1.4fr) minmax(120px,.7fr) minmax(165px,1fr); gap:8px; width:min(720px,100%); }
.table-scroll { overflow:auto; border-top:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width:1000px; }
th,td { padding:13px 14px; border-bottom:1px solid #eee9f4; text-align:left; font-size:.8rem; }
th { position:sticky; top:0; z-index:1; color:var(--muted); background:#faf8fd; font-size:.69rem; letter-spacing:.04em; text-transform:uppercase; }
tbody tr:hover { background:#fbfaff; }
.student-cell { display:flex; align-items:center; gap:10px; }.student-avatar { display:grid; flex:0 0 38px; height:38px; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(145deg,#7454df,#39addd); font-weight:900; }.student-cell b,.student-cell small { display:block; }.student-cell small { color:var(--muted); }
.mini-progress { width:105px; height:8px; overflow:hidden; border-radius:99px; background:#eeeaf4; }.mini-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6849d9,#34b2df); }
.accuracy-pill { padding:5px 8px; border-radius:999px; font-weight:900; }.accuracy-pill.good { color:#1f7754; background:#e4f7ed; }.accuracy-pill.mid { color:#986019; background:#fff1d8; }.accuracy-pill.low { color:#a93c4d; background:#fde9ed; }
.weak-tags { display:flex; max-width:250px; flex-wrap:wrap; gap:4px; }.weak-tags span { padding:3px 6px; border-radius:7px; color:#9a4050; background:#fff0f2; font-size:.67rem; }
.detail-button { padding:7px 10px; border-radius:10px; color:#573fc0; background:#eee9ff; font-weight:850; }
.table-caption { margin:0; padding:13px 22px; color:var(--muted); font-size:.75rem; }

.drawer-backdrop { position:fixed; inset:0; z-index:100; background:rgba(27,20,50,.52); backdrop-filter:blur(3px); }
.student-drawer { position:absolute; top:0; right:0; width:min(520px,100%); height:100%; padding:32px; overflow:auto; background:#fff; box-shadow:-20px 0 55px rgba(37,27,72,.18); animation:drawerIn .25s ease; }
@keyframes drawerIn { from { transform:translateX(100%); } }
.drawer-close { position:absolute; top:15px; right:18px; width:40px; height:40px; border-radius:50%; color:#5b48a5; background:#eee9ff; font-size:1.5rem; }
.detail-profile { display:flex; align-items:center; gap:14px; margin-bottom:22px; padding-right:42px; }.detail-profile .student-avatar { width:58px; height:58px; font-size:1.25rem; }.detail-profile h2 { margin:0 0 3px; }.detail-profile p { margin:0; color:var(--muted); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:24px; }.detail-grid>div { padding:13px; border:1px solid var(--line); border-radius:14px; background:#faf9fd; }.detail-grid strong,.detail-grid span { display:block; }.detail-grid strong { font-size:1.25rem; }.detail-grid span { color:var(--muted); font-size:.7rem; }
.detail-topic { margin-bottom:11px; }.detail-topic>div:first-child { display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; }.detail-topic small { color:var(--muted); }
.empty-state { padding:30px; color:var(--muted); text-align:center; }
.admin-loading { position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; gap:10px; background:rgba(246,244,251,.82); backdrop-filter:blur(3px); }.admin-loading span { width:25px; height:25px; border:3px solid #dcd4eb; border-top-color:var(--purple); border-radius:50%; animation:spin .7s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:1050px) { .summary-grid { grid-template-columns:1fr 1fr; }.analytics-grid { grid-template-columns:1fr; }.students-header { align-items:stretch; flex-direction:column; }.student-tools { width:100%; } }
@media (max-width:700px) { .admin-topbar { align-items:flex-start; flex-direction:column; }.live-controls { width:100%; flex-wrap:wrap; }.last-updated { margin-right:auto; }.admin-content { width:min(100% - 18px,1480px); margin-top:18px; }.dashboard-intro { align-items:flex-start; flex-direction:column; }.summary-grid { gap:9px; }.summary-card { min-height:115px; padding:15px; }.student-tools { grid-template-columns:1fr; }.students-header { padding:17px; }.admin-login-card { padding:38px 24px 28px; }.weak-bar { grid-template-columns:100px 1fr 38px; }.student-drawer { padding:28px 20px; } }
@media (max-width:430px) { .admin-brand small { display:none; }.summary-grid { grid-template-columns:1fr 1fr; }.summary-card strong { font-size:1.45rem; }.donut-layout { align-items:flex-start; flex-direction:column; }.detail-grid { grid-template-columns:1fr 1fr; } }