:root{--bg:#f4f6fb;--surface:#fff;--text:#1f2937;--muted:#6b7280;--line:#e5e7eb;--primary:#2563eb;--primary-d:#1d4ed8;--side:#0f172a;--side-t:#cbd5e1;--radius:10px}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
h1,h2{margin:0 0 .6rem}
h2{font-size:1.05rem}
a{color:var(--primary)}
.muted{color:var(--muted)}
.text-center{text-align:center}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:1rem}
.card-narrow{width:100%;max-width:400px}
.card-form{max-width:480px}
.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.login-head{text-align:center;margin-bottom:1rem}
.login-head h1{font-size:1.3rem;margin-top:.5rem}
.login-head p{margin:0}

label{display:block;font-weight:600;margin:.85rem 0 .3rem}
.input{width:100%;padding:.65rem .75rem;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff}
.input:focus{outline:2px solid #bfdbfe;border-color:var(--primary)}
.btn{display:inline-block;padding:.65rem 1.1rem;border:0;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;margin-top:1rem}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-block{width:100%}

.alert{padding:.7rem .9rem;border-radius:8px;margin-bottom:1rem;font-size:.92rem}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--primary);color:#fff;font-weight:700}
.brand-mark-lg{width:48px;height:48px;font-size:1.4rem}
.brand-logo{width:32px;height:32px;object-fit:contain;border-radius:6px;background:#fff;flex:none}
.brand-logo-lg{width:72px;height:72px}
.logo-preview{display:block;max-width:120px;max-height:120px;margin:.4rem 0;border:1px solid var(--line);border-radius:8px;background:#fff;padding:4px}

.app{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--side);color:var(--side-t);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.6rem;padding:1rem;color:#fff;font-weight:700;border-bottom:1px solid #1e293b}
.nav{padding:.6rem;display:flex;flex-direction:column;gap:2px}
.nav-link{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;border-radius:8px;color:var(--side-t);text-decoration:none;font-size:.93rem}
.nav-link:hover{background:#1e293b;color:#fff}
.nav-link.active{background:var(--primary);color:#fff}
.nav-link.disabled{opacity:.45;cursor:default}
.nav-link.disabled:hover{background:transparent;color:var(--side-t)}
.nav-link small{font-size:.68rem;background:#1e293b;border-radius:99px;padding:.1rem .45rem}
.nav-logout{margin:0}
.nav-btn{width:100%;background:none;border:0;font:inherit;cursor:pointer;text-align:left}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.page-title{font-size:1.15rem;margin:0;flex:1}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;font-size:1.3rem;padding:.2rem .6rem;cursor:pointer}
.userbox{display:flex;flex-direction:column;text-align:right;line-height:1.2}
.userbox small{color:var(--muted)}
.content{padding:1.25rem;max-width:1200px;width:100%}
.overlay{display:none}

.grid{display:grid;gap:1rem}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:1rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-2 .card{margin-bottom:0}
.stat{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--radius);padding:.9rem 1rem;display:flex;flex-direction:column}
.stat-label{color:var(--muted);font-size:.85rem}
.stat-value{font-size:1.7rem;font-weight:700}
.stat-green{border-left-color:#16a34a}.stat-purple{border-left-color:#7c3aed}.stat-orange{border-left-color:#ea580c}
.stat-red{border-left-color:#dc2626}.stat-teal{border-left-color:#0d9488}

.item{padding:.55rem 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.item:last-child{border-bottom:0}
.item.row{flex-direction:row;justify-content:space-between}
.item p{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}

.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.table th{background:#f8fafc;font-weight:600}

@media (max-width:860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:20;transform:translateX(-100%);transition:transform .2s}
  body.menu-open .sidebar{transform:none}
  body.menu-open .overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:15}
  .menu-btn{display:block}
  .content{padding:.9rem}
  .userbox small{display:none}
}

/* ---- Fase 2: CRUD ---- */
.nav-group{padding:.7rem .8rem .25rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.nav-sub{padding-left:1.4rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem}
.toolbar .btn{margin-top:0}
.push-right{margin-left:auto;display:flex;gap:.5rem}
.input-sm{width:auto;min-width:130px;padding:.4rem .6rem;font-size:.9rem}
.btn-sm{padding:.35rem .7rem;font-size:.85rem;margin-top:0}
.btn-light{background:#eef2f7;color:#1f2937}
.btn-light:hover{background:#e2e8f0}
.btn-danger{background:#dc2626;color:#fff}
.btn-danger:hover{background:#b91c1c}
.actions{display:flex;gap:.35rem}
form.inline{display:inline;margin:0}
.badge{display:inline-block;padding:.1rem .55rem;border-radius:99px;font-size:.78rem;font-weight:600}
.badge-ok{background:#dcfce7;color:#166534}
.badge-off{background:#f1f5f9;color:#64748b}
.field-error{display:block;color:#b91c1c;margin-top:.2rem}
.form-actions{display:flex;gap:.5rem;margin-top:1rem}
.form-actions .btn{margin-top:0}
textarea.input{resize:vertical}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.9rem}
.pager nav{display:flex;gap:.25rem;align-items:center}
.pg{padding:.3rem .65rem;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--text);font-size:.88rem}
.pg.current{background:var(--primary);border-color:var(--primary);color:#fff}
.gap{color:var(--muted)}
.mt{margin-top:1.2rem}
code{background:#f1f5f9;padding:.05rem .35rem;border-radius:4px;font-size:.88em}
.alert{word-break:break-word}

/* ---- Fase 3: pembelajaran ---- */
.card-wide{max-width:900px}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 1rem}
.text-block{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;margin:.6rem 0;overflow-wrap:anywhere}
.video-wrap{position:relative;aspect-ratio:16/9;max-width:760px;margin:.8rem 0}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:8px}
.badge-warn{background:#fef3c7;color:#92400e}
.badge-bad{background:#fee2e2;color:#991b1b}
.input-num{width:80px;min-width:80px}
label.check{display:inline;font-weight:400;margin:0}
td.wrap{white-space:normal;min-width:140px}
details summary{cursor:pointer;color:var(--primary)}

/* ---- Fase 4: bank soal & quiz ---- */
[hidden]{display:none!important}
.soal-img{display:block;max-width:100%;max-height:260px;margin:.4rem 0;border:1px solid var(--line);border-radius:6px}
.opsi-row{display:flex;gap:.7rem;align-items:flex-start;margin:.5rem 0;padding:.5rem;border:1px solid var(--line);border-radius:8px}
.opsi-key{margin:0;white-space:nowrap;font-weight:400;padding-top:.45rem}
.opsi-body{flex:1;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.opsi-body .input-sm{width:100%}
.preview-q{padding:.8rem 0;border-bottom:1px solid var(--line)}
.preview-q:last-child{border-bottom:0}
.preview-opt{padding:.3rem .6rem;margin:.2rem 0;border-radius:6px}
.preview-opt.benar{background:#f0fdf4;border:1px solid #bbf7d0}
/* ---- Fase 3 (alur baru): materi berurutan + tracking ---- */
[hidden]{display:none!important}
.badge-info{background:#dbeafe;color:#1e40af}
.group-title{margin:1.2rem 0 .3rem;font-size:1rem}
.group-title:first-of-type{margin-top:.5rem}
.seq-no{display:inline-block;min-width:1.7rem;height:1.7rem;line-height:1.7rem;text-align:center;border-radius:99px;background:#e0e7ff;color:#3730a3;font-size:.8rem;font-weight:700;margin-right:.4rem}
.item.locked{opacity:.65}
.item.locked .seq-no{background:#f1f5f9;color:#64748b}
.pdf-frame{width:100%;height:75vh;min-height:420px;border:1px solid var(--line);border-radius:8px;background:#fff}
.progres-box{margin:.8rem 0}
progress.progres{width:100%;height:14px;accent-color:var(--primary)}

/* ---- Fase 5: mesin ujian ---- */
.uj-aturan{margin:.8rem 0 1rem;padding-left:1.2rem;color:var(--text)}
.uj-aturan li{margin:.3rem 0}
.uj-body{background:var(--bg)}
.uj-shell{max-width:1100px;margin:0 auto;padding:0 1rem 2rem}
.uj-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.8rem;padding:.7rem 0;background:var(--bg);border-bottom:1px solid var(--line)}
.uj-judul{flex:1;min-width:0;display:flex;flex-direction:column}
.uj-judul small{color:var(--muted)}
.uj-status{font-size:.82rem;color:var(--muted);max-width:42%;text-align:right}
.uj-status.ok{color:#166534}.uj-status.warn{color:#92400e}.uj-status.bad{color:#b91c1c;font-weight:600}
.uj-timer{font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:700;padding:.3rem .7rem;border-radius:8px;background:#e0f2fe;color:#075985}
.uj-timer.warn{background:#fef3c7;color:#92400e}
.uj-timer.crit{background:#fee2e2;color:#991b1b}
.uj-main{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:1rem;margin-top:1rem;align-items:start}
.uj-panel,.uj-side{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.1rem}
.uj-side{position:sticky;top:4.6rem}
.uj-side h3{margin:0 0 .6rem;font-size:.95rem}
.uj-soal-no{margin:0 0 .5rem;color:var(--muted);font-size:.85rem}
.uj-tanya{font-size:1.05rem;line-height:1.6;margin-bottom:.8rem}
.uj-opsi{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem .8rem;margin:.4rem 0;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:400}
.uj-opsi:hover{background:#f8fafc}
.uj-opsi:has(input:checked){border-color:var(--primary);background:#eff6ff}
.uj-opsi input{margin-top:.3rem}
.uj-huruf{font-weight:700;min-width:1.2rem}
.uj-opsi-isi{flex:1;line-height:1.5}
.uj-essay{min-height:180px;resize:vertical}
.uj-nav{display:flex;gap:.5rem;justify-content:space-between;margin-top:1.1rem;flex-wrap:wrap}
.uj-nav .btn{margin-top:0}
.uj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:.35rem;margin-bottom:.8rem}
.uj-num{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:.85rem;cursor:pointer}
.uj-num.dijawab{background:#dcfce7;border-color:#86efac}
.uj-num.ragu{background:#fef3c7;border-color:#fcd34d}
.uj-num.aktif{outline:2px solid var(--primary);outline-offset:1px}
.uj-legenda{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.uj-legenda .uj-num{min-height:14px;width:14px;cursor:default}
@media (max-width:760px){.uj-main{grid-template-columns:1fr}.uj-side{position:static;order:2}.uj-status{display:none}}

/* ---- Fase 5: pemantauan guru ---- */
.pantau-aktif{background:#fffbeb}
.pantau-diam{color:#b91c1c;font-weight:600}
.pantau-bar{display:inline-block;width:70px;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;vertical-align:middle}
.pantau-bar>span{display:block;height:100%;background:var(--primary)}
.pantau-bar.p0>span{width:0}.pantau-bar.p10>span{width:10%}.pantau-bar.p20>span{width:20%}.pantau-bar.p30>span{width:30%}.pantau-bar.p40>span{width:40%}
.pantau-bar.p50>span{width:50%}.pantau-bar.p60>span{width:60%}.pantau-bar.p70>span{width:70%}.pantau-bar.p80>span{width:80%}.pantau-bar.p90>span{width:90%}.pantau-bar.p100>span{width:100%}

/* ---- Fase 6: nilai, absensi, laporan ---- */
.num{text-align:right;font-variant-numeric:tabular-nums}
.sel-center{text-align:center}
.nilai-rendah{color:#b91c1c;font-weight:600}
.nilai-ok{color:#166534}
.bobot-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.bobot-form label{display:flex;flex-direction:column;font-size:.8rem;gap:.2rem}
.bobot-form .input{width:5rem}
.abs-radio{display:flex;gap:.9rem;flex-wrap:wrap}
.abs-radio label{display:inline-flex;gap:.3rem;align-items:center;font-weight:400}
.print-only{display:none}
.lap-kop{margin-bottom:1rem}
.lap-kop h2{margin:0}
.bar-h{display:inline-block;height:10px;background:var(--primary);border-radius:3px;vertical-align:middle}
.bar-h.w0{width:0}.bar-h.w10{width:10%}.bar-h.w20{width:20%}.bar-h.w30{width:30%}.bar-h.w40{width:40%}.bar-h.w50{width:50%}
.bar-h.w60{width:60%}.bar-h.w70{width:70%}.bar-h.w80{width:80%}.bar-h.w90{width:90%}.bar-h.w100{width:100%}
@media print{
  .sidebar,.topbar,.overlay,.no-print,.toolbar,.menu-btn,.flash{display:none !important}
  .app,.main,.content{display:block;max-width:none;padding:0;margin:0}
  body{background:#fff}
  .card{box-shadow:none;border:0;padding:0}
  .print-only{display:block}
  table{font-size:11px;page-break-inside:auto}
  tr{page-break-inside:avoid}
  .rapor-siswa{page-break-after:always}
}