:root {
    --utama: #1d4ed8;
    --utama-gelap: #1e3a8a;
    --aksen: #0ea5e9;
    --latar: #f4f7fb;
    --permukaan: #ffffff;
    --teks: #172033;
    --redup: #64748b;
    --garis: #dbe3ef;
    --sukses: #15803d;
    --bahaya: #b91c1c;
    --peringatan: #a16207;
    --radius: 16px;
    --bayangan: 0 14px 38px rgba(15, 37, 87, .09);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
    margin: 0;
    background: var(--latar);
    color: var(--teks);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    line-height: 1.55;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.layar-publik {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(300px, 42%) 1fr;
}
.panel-merek {
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 7vw, 88px);
    color: #fff;
    background: linear-gradient(145deg, #0f2557, #112f6e 56%, #0b1f49);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.panel-merek::before,
.panel-merek::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.panel-merek::before { width: 340px; height: 340px; right: -140px; top: -110px; }
.panel-merek::after { width: 220px; height: 220px; left: -100px; bottom: -80px; }
.logo-teks {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.logo-lambang {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid; place-items: center;
    font-weight: 800;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
}
.panel-merek h1 {
    margin: 28px 0 12px;
    max-width: 620px;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -.04em;
}
.panel-merek p { max-width: 620px; color: rgba(255,255,255,.78); font-size: 17px; }
.label-versi {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: 12px;
}
.panel-formulir {
    padding: clamp(24px, 6vw, 76px);
    display: grid;
    place-items: center;
}
.kartu-formulir { width: min(100%, 720px); }
.kartu-formulir.kecil { width: min(100%, 460px); }
.judul-halaman h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; }
.judul-halaman p { margin: 8px 0 28px; color: var(--redup); }
.bagian-formulir {
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    box-shadow: var(--bayangan);
    padding: 24px;
    margin-bottom: 18px;
}
.bagian-formulir h3 { margin: 0 0 18px; font-size: 17px; }
.grid-formulir {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.grup { display: grid; gap: 7px; }
.grup.penuh { grid-column: 1 / -1; }
.grup label { font-weight: 650; font-size: 13px; }
.grup input, .grup textarea, .grup select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    color: var(--teks);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.grup textarea { min-height: 88px; resize: vertical; }
.grup input:focus, .grup textarea:focus, .grup select:focus {
    border-color: var(--utama);
    box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
.petunjuk { color: var(--redup); font-size: 12px; }
.galat-input { color: var(--bahaya); font-size: 12px; }
.tombol {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    padding: 10px 17px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.tombol-utama { color: #fff; background: linear-gradient(135deg, var(--utama), var(--aksen)); }
.tombol-utama:hover { filter: brightness(.96); }
.tombol-penuh { width: 100%; }
.notifikasi {
    border-radius: 12px;
    padding: 13px 15px;
    margin-bottom: 18px;
    border: 1px solid;
}
.notifikasi-galat { color: #7f1d1d; border-color: #fecaca; background: #fef2f2; }
.notifikasi-sukses { color: #14532d; border-color: #bbf7d0; background: #f0fdf4; }
.daftar-syarat {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
}
.daftar-syarat li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.status-bulat {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; color: #fff;
}
.status-ok { background: var(--sukses); }
.status-gagal { background: var(--bahaya); }

.kerangka {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
}
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 16px;
    color: #fff;
    background: linear-gradient(180deg, #0f2557, #112f6e 55%, #0b1f49);
}
.sidebar .logo-teks { padding: 0 8px 24px; }
.menu-label {
    padding: 18px 12px 8px;
    color: rgba(255,255,255,.48);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.menu {
    display: grid;
    gap: 5px;
}
.menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 11px;
    text-decoration: none;
    color: rgba(255,255,255,.76);
}
.menu a:hover, .menu a.aktif {
    color: #fff;
    background: rgba(14,165,233,.20);
}
.area-utama { min-width: 0; }
.topbar {
    min-height: 72px;
    background: #fff;
    border-bottom: 1px solid var(--garis);
    padding: 12px clamp(18px, 4vw, 38px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.identitas-pengguna { display: flex; align-items: center; gap: 10px; }
.avatar {
    width: 40px; height: 40px;
    border-radius: 13px;
    background: #dbeafe;
    color: var(--utama-gelap);
    display: grid; place-items: center;
    font-weight: 800;
}
.identitas-pengguna strong, .identitas-pengguna small { display: block; }
.identitas-pengguna small { color: var(--redup); }
.tombol-keluar {
    border: 1px solid var(--garis);
    background: #fff;
    min-height: 38px;
    border-radius: 10px;
    padding: 7px 12px;
}
.konten { padding: clamp(20px, 4vw, 38px); }
.kepala-konten {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.kepala-konten h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.035em; }
.kepala-konten p { margin: 6px 0 0; color: var(--redup); }
.pill {
    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid var(--garis);
    border-radius: 999px;
    background: #fff;
    color: var(--redup);
    font-size: 12px;
}
.grid-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.kartu {
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15,37,87,.05);
}
.kpi { padding: 20px; }
.kpi .angka { font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.kpi .nama { color: var(--redup); font-size: 13px; }
.grid-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 20px;
}
.kartu-isi { padding: 22px; }
.kartu-isi h2 { margin: 0 0 16px; font-size: 18px; }
.daftar-tahap { display: grid; gap: 12px; }
.tahap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px;
    border: 1px solid var(--garis);
    border-radius: 12px;
}
.nomor-tahap {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: #dbeafe;
    color: var(--utama-gelap);
    font-weight: 800;
}
.tahap strong { display: block; }
.tahap small { color: var(--redup); }
.tabel-responsif { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }
th { color: var(--redup); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.keadaan-kosong { padding: 30px; text-align: center; color: var(--redup); }
.hanya-mobile { display: none; }

@media (max-width: 980px) {
    .layar-publik { grid-template-columns: 1fr; }
    .panel-merek { min-height: 320px; }
    .kerangka { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        z-index: 20;
        width: 270px;
        transform: translateX(-100%);
        transition: transform .2s;
    }
    body.menu-terbuka .sidebar { transform: translateX(0); }
    .hanya-mobile { display: inline-flex; }
    .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-dashboard { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .grid-formulir, .grid-kpi { grid-template-columns: 1fr; }
    .panel-formulir { padding: 18px; align-items: start; }
    .bagian-formulir { padding: 18px; }
    .topbar { padding: 10px 16px; }
    .konten { padding: 18px; }
    .kepala-konten { align-items: flex-start; flex-direction: column; }
    .identitas-pengguna .teks-identitas { display: none; }
}

/* Komponen Data Induk v0.2 */
.topbar-kiri,.topbar-kanan,.judul-dengan-aksi,.aksi-baris,.aksi-formulir,.baris-filter{display:flex;align-items:center;gap:12px}
.topbar-kanan{margin-left:auto}.nama-halaman-topbar{display:block}.teks-redup{display:block;color:var(--redup);font-size:12px}.teks-bahaya{color:var(--bahaya)!important}
.versi-sidebar{position:absolute;left:20px;right:20px;bottom:16px;color:rgba(255,255,255,.45);font-size:11px;text-align:center}.sidebar{padding-bottom:56px;overflow-y:auto}.menu a{gap:10px}.menu a>span:first-child{width:20px;text-align:center}.menu-badge{margin-left:auto;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.12);font-size:9px}
.tombol-sekunder{color:var(--teks);background:#fff;border:1px solid var(--garis)}.tombol-sekunder:hover{background:#f8fafc}.aksi-formulir{margin-top:22px;flex-wrap:wrap}.jarak-atas{margin-top:20px}.jarak-atas-kecil{margin-top:14px}
.grid-dua{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid-data-form{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:20px}.grid-ringkasan-enam{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.ringkasan-mini{padding:16px;text-decoration:none;transition:.16s transform,.16s border-color}.ringkasan-mini:hover{transform:translateY(-2px);border-color:#93c5fd}.ringkasan-mini.aktif{border-color:var(--utama);box-shadow:0 0 0 2px rgba(29,78,216,.08)}.ringkasan-mini strong{display:block;font-size:25px}.ringkasan-mini span{display:block;color:var(--redup);font-size:11px;line-height:1.25;margin-top:4px}
.tab-scroll{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px}.tab-item{white-space:nowrap;text-decoration:none;padding:9px 13px;border:1px solid var(--garis);background:#fff;border-radius:10px;color:var(--redup);font-size:12px;font-weight:700}.tab-item.aktif{color:#fff;border-color:var(--utama);background:var(--utama)}
.baris-filter{align-items:end;display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(150px,.7fr));gap:12px;margin-bottom:20px;padding:15px;background:#f8fafc;border:1px solid var(--garis);border-radius:12px}.baris-filter .grup-aksi{align-self:end}.baris-filter .grup-aksi .tombol{width:100%}
.judul-kartu,.judul-dengan-aksi{justify-content:space-between}.judul-kartu h2,.judul-dengan-aksi h2{margin:0}.judul-dengan-aksi p{margin:4px 0 0}.angka-progres{font-size:28px;color:var(--utama)}
.badge{display:inline-flex;align-items:center;width:fit-content;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;text-decoration:none;margin:2px 3px 2px 0}.badge-sukses{color:#166534;background:#dcfce7}.badge-netral{color:#475569;background:#e2e8f0}.badge-bahaya{color:#991b1b;background:#fee2e2}.badge-info{color:#1e40af;background:#dbeafe}
.aksi-baris{align-items:flex-start;flex-wrap:wrap}.aksi-baris form{margin:0}.tautan-aksi{appearance:none;border:0;background:transparent;color:var(--utama);font:inherit;font-weight:700;font-size:12px;padding:0;text-decoration:none;cursor:pointer}.tautan-aksi:hover{text-decoration:underline}
td small.teks-redup{margin-top:3px}.pilihan-kartu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pilihan-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--garis);border-radius:11px;background:#fff;cursor:pointer}.pilihan-item:hover{border-color:#93c5fd}.pilihan-item input{width:17px;height:17px;margin-top:2px}.pilihan-item span{min-width:0}.pilihan-item strong,.pilihan-item small{display:block}.pilihan-item small{color:var(--redup);font-size:11px}.daftar-pilih-siswa{display:grid;gap:8px;max-height:480px;overflow:auto;margin-top:15px;padding-right:4px}
.paginasi{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}.paginasi a{min-width:36px;height:36px;display:grid;place-items:center;text-decoration:none;border:1px solid var(--garis);border-radius:9px;background:#fff;color:var(--redup);font-size:12px;font-weight:700}.paginasi a.aktif{color:#fff;background:var(--utama);border-color:var(--utama)}
.batang-progres{height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden}.batang-progres span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--utama),var(--aksen))}.tahap-tautan{text-decoration:none;color:inherit}.tahap-tautan:hover{border-color:#93c5fd;background:#f8fbff}.nomor-tahap.selesai{color:#fff;background:var(--sukses)}
.grid-kpi-enam{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-kpi-dua{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px}.grid-kpi-dua .kpi{border:1px solid var(--garis);border-radius:12px}.daftar-sederhana{margin:0;padding-left:18px}.daftar-sederhana li{margin:6px 0}.daftar-sederhana code{font-size:12px;color:#334155}
.kartu-isi>h2:first-child{margin-top:0}.kartu-isi p.teks-redup{font-size:13px}.grup input[type="checkbox"]{min-height:auto}.tabel-responsif table{min-width:720px}

@media (max-width:1200px){.grid-kpi-enam{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-ringkasan-enam{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-data-form{grid-template-columns:1fr}.baris-filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid-dua,.pilihan-kartu{grid-template-columns:1fr}.grid-kpi-enam,.grid-ringkasan-enam{grid-template-columns:repeat(2,minmax(0,1fr))}.baris-filter{grid-template-columns:1fr}.topbar-kanan .identitas-pengguna{display:none}.topbar{gap:8px}.nama-halaman-topbar{font-size:13px}.aksi-formulir{align-items:stretch}.aksi-formulir .tombol{width:100%}}
@media (max-width:420px){.grid-kpi-enam,.grid-ringkasan-enam{grid-template-columns:1fr 1fr}.ringkasan-mini{padding:12px}.ringkasan-mini strong{font-size:21px}}
.grid-peran-izin{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px}.daftar-peran{align-self:start;position:sticky;top:92px}.peran-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;margin-bottom:7px;border:1px solid var(--garis);border-radius:11px;text-decoration:none}.peran-item:hover,.peran-item.aktif{border-color:#93c5fd;background:#eff6ff}.peran-item strong,.peran-item small{display:block}.peran-item small{color:var(--redup);font-size:10px}.kelompok-izin{display:grid;gap:22px;margin-top:20px}.kelompok-izin section{padding-top:4px}.judul-kelompok-izin{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.judul-kelompok-izin h3{margin:0;font-size:15px}
@media(max-width:900px){.grid-peran-izin{grid-template-columns:1fr}.daftar-peran{position:static}}

/* Fondasi 3 — Kelas Pembelajaran dan Operasional Akademik */
.notifikasi-info{color:#1e3a8a;border-color:#bfdbfe;background:#eff6ff}.tombol-bahaya{color:#fff;background:var(--bahaya)}
.grid-kpi-delapan{grid-template-columns:repeat(8,minmax(0,1fr))}.grid-kpi-delapan .angka{font-size:27px}
.grid-kelas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.kartu-kelas{overflow:hidden}.sampul-kelas{min-height:118px;padding:20px;color:#fff;background:linear-gradient(135deg,#0f2557,#1d4ed8 65%,#0ea5e9);display:flex;align-items:center;gap:14px}.sampul-kelas>span{width:48px;height:48px;border:1px solid rgba(255,255,255,.28);border-radius:14px;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.12)}.sampul-kelas small,.sampul-kelas strong{display:block}.sampul-kelas small{color:rgba(255,255,255,.7);font-size:11px}.sampul-kelas strong{font-size:17px}.kartu-kelas-isi{padding:18px}.kartu-kelas h2{font-size:17px;margin:0}.statistik-kelas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}.statistik-kelas span{padding:9px;border-radius:9px;background:#f8fafc;color:var(--redup);font-size:11px}.statistik-kelas strong{color:var(--teks);font-size:15px;margin-right:3px}
.kepala-workspace{align-items:center}.tab-workspace{display:flex;gap:8px;overflow:auto;margin:-4px 0 22px;padding-bottom:5px}.tab-workspace a{white-space:nowrap;text-decoration:none;padding:10px 14px;border:1px solid var(--garis);border-radius:10px;background:#fff;color:var(--redup);font-size:12px;font-weight:800}.tab-workspace a:hover,.tab-workspace a.aktif{color:#fff;background:var(--utama);border-color:var(--utama)}
.daftar-agenda,.daftar-orang{display:grid;gap:10px}.agenda-item,.orang-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--garis);border-radius:12px;background:#fff}.agenda-item strong,.agenda-item small,.orang-item strong,.orang-item small{display:block}.agenda-item small,.orang-item small{color:var(--redup);font-size:11px}.agenda-hari{width:70px;flex:0 0 70px;padding:8px;border-radius:9px;background:#eff6ff;color:var(--utama-gelap);font-size:11px;font-weight:900;text-align:center}.agenda-tautan{text-decoration:none}.agenda-tautan:hover{border-color:#93c5fd;background:#f8fbff}.tanggal-agenda{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:#eff6ff;display:grid;place-items:center;align-content:center;color:var(--utama-gelap)}.tanggal-agenda strong,.tanggal-agenda small{line-height:1}.tanggal-agenda strong{font-size:18px}.tanggal-agenda small{text-transform:uppercase;font-size:9px;margin-top:3px}.avatar.mini{width:38px;height:38px;border-radius:11px}.vertikal{align-content:start}
.select-mini,.aksi-baris select{min-height:34px;border:1px solid var(--garis);border-radius:8px;background:#fff;padding:5px 8px;font-size:11px}.baris-filter-lima{grid-template-columns:minmax(200px,1.2fr) repeat(3,minmax(135px,.7fr)) minmax(120px,.5fr)}
.jadwal-mingguan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.kolom-hari{display:grid;align-content:start;gap:10px}.kolom-hari h2{font-size:16px;margin:0 0 2px}.slot-jadwal{display:flex;gap:12px;padding:14px;border:1px solid var(--garis);border-radius:12px;background:#f8fafc}.waktu-slot{width:54px;flex:0 0 54px;text-align:center;padding-right:10px;border-right:1px solid var(--garis)}.waktu-slot strong,.waktu-slot small,.isi-slot strong,.isi-slot span,.isi-slot small{display:block}.waktu-slot strong{color:var(--utama);font-size:14px}.waktu-slot small,.isi-slot small{color:var(--redup);font-size:10px}.isi-slot{min-width:0}.isi-slot span{font-size:12px;margin:2px 0}.isi-slot strong{font-size:13px}
.linimasa-kalender{display:grid;gap:14px}.item-kalender{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;padding:16px;border:1px solid var(--garis);border-radius:13px}.tanggal-kalender{display:grid;align-content:center;text-align:center;padding:12px;border-radius:11px;background:#eff6ff;color:var(--utama-gelap)}.tanggal-kalender strong{font-size:28px;line-height:1}.tanggal-kalender small{font-size:10px;text-transform:uppercase;margin-top:5px}.isi-kalender h2{font-size:18px;margin:5px 0}.isi-kalender p{margin:6px 0;color:var(--redup);font-size:13px}
fieldset{border:0;padding:0;margin:0;min-width:0}fieldset:disabled{opacity:.78}fieldset:disabled input,fieldset:disabled textarea,fieldset:disabled select{background:#f1f5f9}.tabel-responsif td form{margin:0}
@media(max-width:1350px){.grid-kpi-delapan{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-kelas{grid-template-columns:repeat(2,minmax(0,1fr))}.jadwal-mingguan{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.grid-kelas,.jadwal-mingguan{grid-template-columns:1fr}.baris-filter-lima{grid-template-columns:repeat(2,minmax(0,1fr))}.item-kalender{grid-template-columns:70px minmax(0,1fr)}}
@media(max-width:620px){.grid-kpi-delapan{grid-template-columns:repeat(2,minmax(0,1fr))}.baris-filter-lima{grid-template-columns:1fr}.tab-workspace{margin-left:-4px;margin-right:-4px}.item-kalender{grid-template-columns:1fr}.tanggal-kalender{display:flex;gap:6px;justify-content:flex-start;align-items:baseline}.tanggal-kalender strong{font-size:20px}}

/* Fondasi 4 — Konten Pembelajaran dan Progres */
.kartu-form{padding:24px}.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-form label{display:grid;align-content:start;gap:7px}.grid-form label>span,.bagian-form>h3,.form-unggah-ringkas label>span{font-size:12px;font-weight:800}.grid-form .span-2{grid-column:span 2}.cek-baris{display:flex!important;align-items:center!important;grid-auto-flow:column;justify-content:start;align-content:center!important;gap:9px!important;padding-top:26px}.cek-baris input{width:18px;height:18px;min-height:auto}.aksi-form{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.bagian-form{margin-top:22px;padding-top:20px;border-top:1px solid var(--garis)}.bagian-form h3{margin:0 0 5px;font-size:16px}.daftar-centang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px;max-height:340px;overflow:auto}.daftar-centang label{display:flex;align-items:flex-start;gap:9px;padding:11px;border:1px solid var(--garis);border-radius:10px}.daftar-centang input{width:17px;height:17px;min-height:auto;margin-top:2px}.daftar-centang strong,.daftar-centang small{display:block}.daftar-centang small{color:var(--redup);font-size:10px}.tombol-kecil{padding:7px 10px;font-size:11px;min-height:32px}
.ruang-konten-utama{display:grid;gap:18px}.ruang-konten-samping{display:grid;align-content:start;gap:18px}.modul-kartu{overflow:hidden}.modul-kartu>.judul-dengan-aksi{padding-bottom:14px;border-bottom:1px solid var(--garis)}.keadaan-kosong.ringkas{padding:18px}.daftar-materi{display:grid;margin-top:8px}.materi-item{display:flex;align-items:center;gap:13px;padding:14px 4px;border-bottom:1px solid var(--garis)}.materi-item:last-child{border-bottom:0}.materi-terkunci{opacity:.72}.nomor-materi{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:10px;background:#eff6ff;color:var(--utama);font-weight:900}.materi-info{min-width:0;flex:1}.baris-judul-materi{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.materi-info small{display:block;color:var(--redup);margin-top:3px}.aksi-materi{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.progress-ringkas{height:8px;margin-top:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}.progress-ringkas span{display:block;height:100%;background:linear-gradient(90deg,var(--utama),var(--aksen));border-radius:inherit}.progress-ringkas.kecil{height:6px;max-width:230px}.progress-dengan-angka{display:flex;align-items:center;gap:10px}.progress-dengan-angka .progress-ringkas{flex:1;min-width:100px;margin:0}.badge-peringatan{color:#92400e;background:#fef3c7}.daftar-pengumuman-ringkas{display:grid;gap:10px}.pengumuman-ringkas{display:grid;gap:3px;padding:11px;border-left:3px solid #cbd5e1;background:#f8fafc;border-radius:0 10px 10px 0}.pengumuman-ringkas.penting{border-left-color:#f59e0b;background:#fffbeb}.pengumuman-ringkas small,.pengumuman-ringkas span{color:var(--redup);font-size:10px}.pengumuman-ringkas strong{font-size:12px}
.meta-materi{display:flex;gap:5px;flex-wrap:wrap}.ringkasan-materi{padding:16px;border-radius:12px;background:#eff6ff;color:#1e3a8a;font-weight:600}.isi-materi{font-size:15px;line-height:1.75;white-space:normal;overflow-wrap:anywhere}.kartu-tautan-eksternal{display:flex;align-items:center;gap:13px;margin-top:24px;padding:16px;border:1px solid #bfdbfe;border-radius:13px;background:#eff6ff;text-decoration:none}.kartu-tautan-eksternal>span{font-size:24px;color:var(--utama)}.kartu-tautan-eksternal strong,.kartu-tautan-eksternal small{display:block}.kartu-tautan-eksternal small{color:var(--redup);overflow-wrap:anywhere}.daftar-lampiran{display:grid;gap:9px}.lampiran-item{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid var(--garis);border-radius:10px}.lampiran-item>div{min-width:0;flex:1}.lampiran-item strong,.lampiran-item small{display:block}.lampiran-item strong{font-size:12px;overflow-wrap:anywhere}.lampiran-item small{color:var(--redup);font-size:10px}.lampiran-item form{margin:0}.form-unggah-ringkas{display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--garis)}.form-unggah-ringkas label{display:grid;gap:6px}.pusat-aksi-progres{display:flex;align-items:center;justify-content:space-between;gap:20px}.pusat-aksi-progres h2{margin-bottom:4px}
.daftar-pengumuman-besar{display:grid;gap:16px}.pengumuman-besar{border-left:4px solid #cbd5e1}.pengumuman-besar.penting{border-left-color:#f59e0b}.isi-pengumuman{margin-top:16px;line-height:1.65}.meta-jadwal{margin-top:15px;padding-top:12px;border-top:1px solid var(--garis);color:var(--redup);font-size:11px}.form-inline{display:flex;align-items:center;gap:7px}.form-inline select{min-width:150px;min-height:34px}
@media(max-width:900px){.daftar-centang{grid-template-columns:1fr}.materi-item{align-items:flex-start;flex-wrap:wrap}.aksi-materi{width:100%;justify-content:flex-start;padding-left:45px}.pusat-aksi-progres{align-items:flex-start;flex-direction:column}.pusat-aksi-progres form,.pusat-aksi-progres .tombol{width:100%}}
@media(max-width:620px){.grid-form{grid-template-columns:1fr}.grid-form .span-2{grid-column:span 1}.cek-baris{padding-top:4px}.kartu-form{padding:18px}.materi-item{padding:13px 0}.aksi-materi{padding-left:0}.lampiran-item{align-items:flex-start;flex-wrap:wrap}.lampiran-item>div{flex-basis:100%}.form-inline{align-items:stretch;flex-direction:column}.form-inline select,.form-inline .tombol{width:100%}}
.kartu-lanjut-belajar{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid #bfdbfe;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f8fbff);text-decoration:none}.kartu-lanjut-belajar .ikon-lanjut{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:14px;background:var(--utama);color:#fff}.kartu-lanjut-belajar>div{min-width:0;flex:1}.kartu-lanjut-belajar strong,.kartu-lanjut-belajar small{display:block}.kartu-lanjut-belajar small{color:var(--redup);font-size:11px}.kartu-lanjut-belajar strong{margin-top:4px;font-size:16px}.daftar-pengumuman-ringkas a{text-decoration:none;color:inherit}.daftar-pengumuman-ringkas a:hover{border-left-color:var(--utama);background:#eff6ff}

/* Fondasi 5 — tugas, pengumpulan, rubrik, dan penilaian */
.grid-kartu-tugas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:18px}.tugas-kartu{display:flex;flex-direction:column;gap:14px}.tugas-kartu h2{margin:.55rem 0 .2rem}.meta-tugas{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.82rem;color:var(--muted,#64748b)}.meta-tugas.besar{margin-top:18px;padding-top:14px;border-top:1px solid #e2e8f0}.teks-bahaya{color:#b91c1c!important;font-weight:700}.rubrik-ringkas{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #e2e8f0}.nilai-besar{font-size:2.6rem;font-weight:800;line-height:1;margin:18px 0}.nilai-besar small{font-size:1rem;color:#64748b}.nilai-panel{text-align:center}.alur-komentar{display:grid;gap:12px;margin:14px 0}.komentar-item{padding:14px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0}.komentar-item p{margin:.5rem 0}.komentar-item small{color:#64748b}.komentar-revisi{background:#fff7ed;border-color:#fdba74}.form-komentar{display:grid;gap:10px}.form-inline-akademik{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.form-inline-akademik label{flex:1;min-width:240px}.tabel-responsif input[type=number],.tabel-responsif input[type=text]{min-width:110px;width:100%}@media(max-width:720px){.grid-kartu-tugas{grid-template-columns:1fr}.form-inline-akademik{display:grid}.nilai-besar{font-size:2rem}}

/* Fondasi 6 — Bank Soal, Kuis, dan CBT */
.cbt-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.cbt-header h1{margin:7px 0 2px}.timer-cbt{min-width:155px;padding:14px 18px;border:1px solid #bfdbfe;border-radius:14px;background:#eff6ff;text-align:center}.timer-cbt small,.timer-cbt strong{display:block}.timer-cbt strong{font-size:26px;color:var(--utama-gelap);font-variant-numeric:tabular-nums}.timer-cbt.kritis{background:#fef2f2;border-color:#fecaca}.timer-cbt.kritis strong{color:#b91c1c}.layout-cbt{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}.daftar-soal-cbt{display:grid;gap:18px}.navigasi-cbt{position:sticky;top:84px}.judul-soal-cbt{display:flex;align-items:center;gap:11px}.judul-soal-cbt>div{flex:1}.judul-soal-cbt strong,.judul-soal-cbt small{display:block}.judul-soal-cbt small{color:var(--redup)}.pertanyaan-cbt{margin:18px 0;font-size:15px;line-height:1.7;white-space:normal}.opsi-cbt{display:grid;gap:10px}.opsi-cbt label{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--garis);border-radius:11px;cursor:pointer}.opsi-cbt label:hover{border-color:#93c5fd;background:#f8fbff}.opsi-cbt input{width:18px;height:18px;min-height:auto;margin-top:2px}.opsi-cbt span{display:flex;gap:10px;line-height:1.45}.opsi-cbt b{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:8px;background:#e2e8f0}.cbt-ragu{padding-top:12px}.status-simpan{display:block;color:var(--redup);margin-top:8px}.grid-nomor-cbt{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:12px 0 16px}.grid-nomor-cbt a{height:38px;display:grid;place-items:center;border:1px solid var(--garis);border-radius:9px;text-decoration:none;color:var(--teks);font-weight:800;background:#fff}.grid-nomor-cbt a.terjawab{background:#dcfce7;border-color:#86efac;color:#166534}.grid-nomor-cbt a.ragu{background:#fef3c7;border-color:#fcd34d;color:#92400e}.legenda-cbt{display:grid;gap:6px;margin-bottom:18px;font-size:11px;color:var(--redup)}.legenda-cbt span{display:flex;align-items:center;gap:7px}.legenda-cbt i{width:13px;height:13px;border:1px solid var(--garis);border-radius:4px;background:#fff}.legenda-cbt i.terjawab{background:#dcfce7;border-color:#86efac}.legenda-cbt i.ragu{background:#fef3c7;border-color:#fcd34d}.jawaban-hasil{padding:14px;border-radius:11px;background:#f8fafc;border:1px solid var(--garis);line-height:1.6}.pembahasan-cbt{margin-top:14px;padding:12px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff}.pembahasan-cbt summary{cursor:pointer;font-weight:800}.pembahasan-cbt>div{margin-top:10px;line-height:1.65}
@media(max-width:920px){.layout-cbt{grid-template-columns:1fr}.navigasi-cbt{position:static;order:-1}.cbt-header{align-items:flex-start}.grid-nomor-cbt{grid-template-columns:repeat(10,1fr)}}
@media(max-width:620px){.cbt-header{flex-direction:column}.timer-cbt{width:100%}.grid-nomor-cbt{grid-template-columns:repeat(5,1fr)}.pertanyaan-cbt{font-size:14px}.opsi-cbt label{padding:10px}}

/* Fondasi 8 */
.ikon-badge-besar{font-size:3rem;line-height:1;text-align:center;margin:.5rem 0}.badge-kartu{text-align:center}.konten-artikel h2{margin-top:1.4rem}.konten-artikel p{line-height:1.75}.formulir-besar>label{display:block;margin-top:1rem}.formulir-besar textarea{width:100%}.notifikasi-peringatan{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}.tombol-bahaya{background:#b91c1c;color:#fff;border-color:#b91c1c}@media print{.sidebar,.topbar,.tombol,.tab-workspace{display:none!important}.area-utama,.konten{margin:0!important;padding:0!important}.kartu{box-shadow:none!important}}

/* Fondasi 10 — komunikasi, notifikasi, dan portal orang tua */
.badge-menu{margin-left:auto;background:#ef4444;color:#fff;border-radius:999px;padding:1px 7px;font-size:11px}.ikon-topbar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #dbe4f0;border-radius:12px;text-decoration:none;color:#1e3a8a;background:#fff}.ikon-topbar span{position:absolute;right:-5px;top:-7px;background:#dc2626;color:#fff;border-radius:999px;min-width:19px;height:19px;padding:0 5px;font-size:10px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}.kartu-komunikasi{display:flex;gap:14px;align-items:flex-start}.avatar-mini{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e0e7ff;color:#1e3a8a;font-weight:800;flex:0 0 auto}.gelembung-pesan{max-width:78%;padding:12px 14px;border-radius:16px;background:#f1f5f9;margin:9px 0}.gelembung-pesan.milik-sendiri{margin-left:auto;background:#dbeafe}.daftar-pesan{max-height:58vh;overflow:auto;padding:8px}.nomor-notifikasi{width:12px;height:12px;border-radius:50%;background:#2563eb;display:inline-block}.notifikasi-item-belum{border-left:4px solid #2563eb;background:#f8fbff}.ringkasan-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}.ringkasan-kpi .kartu{padding:16px}.nilai-kpi{font-size:1.7rem;font-weight:800;color:#1e3a8a}.topik-tersemat{border-left:4px solid #f59e0b}.konten-diskusi{white-space:pre-wrap;line-height:1.65}.balasan-bertingkat{margin-left:38px;border-left:2px solid #dbe4f0;padding-left:14px}.grid-komunikasi{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px}@media(max-width:900px){.grid-komunikasi{grid-template-columns:1fr}.gelembung-pesan{max-width:94%}}

/* Fondasi 11 — Analitik dan Peringatan Dini */
.metrik-baris{margin:0 0 16px}.metrik-baris>div:first-child{display:flex;justify-content:space-between;gap:16px;margin-bottom:7px}.batang{height:10px;background:#e8edf5;border-radius:999px;overflow:hidden}.batang span{display:block;height:100%;background:linear-gradient(90deg,#1d4ed8,#0ea5e9);border-radius:inherit}.badge-risiko-aman{background:#dcfce7;color:#166534}.badge-risiko-perhatian{background:#fef3c7;color:#92400e}.badge-risiko-tinggi{background:#fed7aa;color:#9a3412}.badge-risiko-kritis{background:#fee2e2;color:#991b1b}.baris-risiko-terpicu{background:#fff7ed}.kotak-tindak-lanjut{border:1px solid #e2e8f0;border-radius:14px;padding:16px;margin-top:12px}.distraktor{display:block;padding:3px 7px;border-radius:7px;margin:3px 0;background:#f1f5f9}.distraktor-kunci{background:#dcfce7;color:#166534}.distraktor-efektif{background:#dbeafe;color:#1e40af}.distraktor-lemah{background:#fee2e2;color:#991b1b}.input-berpasangan{display:flex;align-items:center;gap:8px}.input-berpasangan input{min-width:90px}.ikon-kpi{font-size:1.2rem;color:#2563eb}.daftar-ringkas{display:grid;gap:8px}.baris-ringkas{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eef2f7;color:inherit;text-decoration:none}.baris-ringkas span:first-child{display:grid}.baris-ringkas small{color:#64748b}.aksi-kepala{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.aksi-kepala form{margin:0}
@media(max-width:760px){.baris-ringkas{align-items:flex-start;flex-direction:column}.aksi-kepala{width:100%}.aksi-kepala .tombol,.aksi-kepala form,.aksi-kepala form .tombol{width:100%}}

.input-kecil{min-height:34px;max-width:150px;border:1px solid var(--garis);border-radius:8px;padding:5px 8px;background:#fff}.status-baik{color:var(--sukses)}

/* ==========================================================
   LMS SMK SATYA PRAJA 2 PETARUKAN — Inventory Visual Language + Excel Center
   Tema administrasi modern LMS SMK SATYA PRAJA 2 PETARUKAN
   ========================================================== */
:root{
    --utama:#1d4ed8;--utama-gelap:#1e3a8a;--aksen:#0ea5e9;--latar:#f4f7fb;
    --teks:#172033;--redup:#64748b;--garis:#e5eaf2;--sukses:#16a34a;
    --peringatan:#d97706;--bahaya:#dc2626;--radius:16px;
}
body{font-family:Poppins,Inter,"Segoe UI",Arial,sans-serif;background:var(--latar);font-size:.94rem}
.area-utama{background:linear-gradient(180deg,#f8fbff 0,#f4f7fb 100%);min-height:100vh}
.sidebar{background:linear-gradient(180deg,#0f2557 0%,#112f6e 50%,#0b1f49 100%);box-shadow:4px 0 22px rgba(15,23,42,.08)}
.sidebar .logo-teks{border-bottom:1px solid rgba(255,255,255,.1);margin:0 -2px 8px;padding:0 10px 20px}
.logo-lambang{background:#fff;color:#1d4ed8;border-color:#fff;box-shadow:0 5px 16px rgba(0,0,0,.16)}
.menu-label{font-size:.7rem;letter-spacing:.09em;color:#93c5fd;font-weight:700;padding-top:16px}
.menu{gap:2px}.menu a{border-radius:10px;margin:1px 0;color:#d7e5ff;transition:.18s ease}.menu a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(1px)}
.menu a.aktif{background:linear-gradient(135deg,#2563eb,#0ea5e9);box-shadow:0 8px 18px rgba(14,165,233,.25);color:#fff}
.menu a>span:first-child{display:inline-flex;align-items:center;justify-content:center}
.versi-sidebar{color:rgba(255,255,255,.55)}
.inventory-topbar{min-height:58px;padding:9px clamp(18px,4vw,38px);border-bottom:1px solid rgba(15,23,42,.06);box-shadow:0 3px 16px rgba(15,23,42,.05);position:sticky;top:0;z-index:12}
.navbar-app-name{font-weight:700;color:var(--utama);letter-spacing:.01em}.navbar-date{color:var(--redup);font-size:.84rem;display:inline-flex;gap:7px;align-items:center}
.navbar-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#e0f2fe);border:2px solid #fff;box-shadow:0 2px 8px rgba(15,23,42,.1)}
.identitas-pengguna strong{font-size:.82rem}.identitas-pengguna small{font-size:.72rem}.tombol-logout{display:inline-flex;gap:7px;align-items:center}
.ikon-topbar{width:36px;height:36px;border-radius:10px;color:#334155}.ikon-topbar:hover{color:#1d4ed8;background:#f8fbff}
.konten{padding-top:26px}
.kartu{border:1px solid rgba(226,232,240,.78);border-radius:16px;box-shadow:0 8px 25px rgba(15,23,42,.06);overflow:hidden}
.kartu-isi{padding:1.2rem}.kartu-isi h2{font-size:.98rem;color:#263246}
.kepala-konten,.content-header-panel{position:relative;background:transparent;color:var(--teks);padding:0 0 0 62px;border-radius:0;margin:8px 0 22px;box-shadow:none;min-height:50px;display:flex;flex-direction:column;justify-content:center}
.kepala-konten:before,.content-header-panel:before{content:"\f007";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:1px;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dbeafe,#e0f2fe);color:#1d4ed8;font-size:1.08rem}
.kepala-konten h1,.content-header-panel h1{font-size:1.55rem;font-weight:750;margin:0;color:var(--teks);line-height:1.25;letter-spacing:-.02em}
.kepala-konten p,.content-header-panel p{color:var(--redup);font-size:.88rem;margin:4px 0 0}
.content-header-panel.page-excel:before{content:"\f1c3"}.content-header-panel .judul-dengan-aksi{width:100%;justify-content:space-between;align-items:center;flex-wrap:wrap}
.grup input,.grup textarea,.grup select,.input,.select{min-height:44px;border-radius:10px;border-color:#dbe3ef;color:#263246;background:#fff}.grup input:focus,.grup textarea:focus,.grup select:focus{border-color:#60a5fa;box-shadow:0 0 0 .18rem rgba(37,99,235,.12)}
.tombol{border-radius:10px;font-weight:600;transition:all .18s ease}.tombol:hover{transform:translateY(-1px)}
.tombol-utama{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.tombol-sukses{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border:1px solid #16a34a}
.tombol-outline-sukses{color:#15803d;background:#fff;border:1px solid #86efac}.tombol-outline-sukses:hover{background:#f0fdf4}
.tombol-outline-bahaya{color:#b91c1c;background:#fff;border:1px solid #fecaca}.tombol-outline-bahaya:hover{background:#fef2f2}
.tabel-responsif{border-radius:12px}.inventory-table,.tabel-responsif table{color:#263246;margin-bottom:0}.inventory-table thead th,.tabel-responsif table thead th{border-top:0;border-bottom:1px solid #dfe6f0;background:#f8fafc;color:#475569;font-size:.72rem;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap;padding:.82rem .75rem}.inventory-table td,.tabel-responsif table td{vertical-align:middle;border-bottom:1px solid #edf1f7;padding:.78rem .75rem}.inventory-table tbody tr:hover,.tabel-responsif table tbody tr:hover{background:#f8fbff}
.badge{border-radius:999px;padding:.45em .72em;font-weight:600}.badge-peringatan{color:#92400e;background:#fef3c7}.badge-info{color:#1e40af;background:#dbeafe}
.notifikasi{border:0;border-radius:12px;display:flex;gap:9px;align-items:flex-start;box-shadow:0 5px 16px rgba(15,23,42,.04)}
.pill{border-color:#dbe3ef;box-shadow:0 2px 8px rgba(15,23,42,.03)}

/* Pusat Data Excel */
.excel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.excel-module-card{padding:20px;position:relative;min-height:190px;background:#fff}.excel-module-card:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-48px;top:-48px;background:rgba(37,99,235,.045)}
.excel-module-head{display:flex;align-items:flex-start;gap:14px;position:relative;z-index:1}.excel-module-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dbeafe,#e0f2fe);color:#1d4ed8;font-size:1.05rem}.excel-module-head h2{font-size:1rem;margin:1px 0 5px}.excel-module-head p{font-size:.78rem;line-height:1.55;color:var(--redup);margin:0}.excel-actions{margin-top:18px;position:relative;z-index:1;flex-wrap:wrap}.excel-actions .tombol{gap:6px}.card-heading-flex{display:flex;align-items:center;justify-content:space-between;gap:16px}.card-heading-flex h2{margin-bottom:2px}.card-heading-flex p{margin:0}.back-link{display:inline-flex;gap:7px;align-items:center;color:#1d4ed8;text-decoration:none;font-size:.8rem;font-weight:600;margin-bottom:5px}.excel-import-layout{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}.excel-security-note{display:flex;gap:12px;padding:13px 15px;border-radius:12px;background:#eff6ff;color:#1e3a8a;border:1px solid #bfdbfe}.excel-security-note>i{font-size:1.2rem;margin-top:2px}.excel-security-note strong,.excel-security-note small{display:block}.excel-security-note small{color:#475569;margin-top:3px}.excel-rules{padding-left:21px;margin:0;display:grid;gap:10px;color:#475569;font-size:.84rem}.excel-rules code{background:#f1f5f9;padding:2px 5px;border-radius:5px;color:#1e3a8a}

@media(max-width:1100px){.excel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.excel-grid,.excel-import-layout{grid-template-columns:1fr}.kepala-konten,.content-header-panel{padding-left:56px}.kepala-konten:before,.content-header-panel:before{width:42px;height:42px}.kepala-konten h1,.content-header-panel h1{font-size:1.28rem}.navbar-date{display:none}.tombol-logout span{display:none}.content-header-panel .judul-dengan-aksi{align-items:flex-start}.excel-module-card{min-height:0}}
@media print{.sidebar,.topbar{display:none!important}.kerangka{grid-template-columns:1fr}.konten{padding:0}.kepala-konten,.content-header-panel{padding-left:0}.kepala-konten:before,.content-header-panel:before{display:none}.kartu{box-shadow:none}}
/* Sidebar modern LMS SMK SATYA PRAJA 2 PETARUKAN */
.inventory-brand{display:flex!important;align-items:center;gap:11px;text-decoration:none;color:#fff}
.inventory-brand small{display:block;color:rgba(255,255,255,.55);font-size:.68rem;margin-top:2px}
.sidebar-user-panel{display:flex;align-items:center;gap:10px;margin:10px 4px 4px;padding:12px 8px 14px;border-bottom:1px solid rgba(255,255,255,.10);min-width:0}
.sidebar-user-panel>div{min-width:0}.sidebar-user-panel strong,.sidebar-user-panel small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-panel strong{font-size:.79rem;color:#fff;font-weight:600}.sidebar-user-panel small{font-size:.67rem;color:#93c5fd;margin-top:2px}
.sidebar-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.24);box-shadow:none}
.menu a i{font-size:.93rem;width:18px}.menu a.aktif i{filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}

/* Dashboard produksi V1.0 */
.grid-kpi-produksi{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}.kpi-produksi{position:relative;min-height:132px;overflow:hidden}.kpi-produksi .ikon-kpi{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:#eff6ff;margin-bottom:12px}.kpi-produksi .angka{font-size:29px}.kpi-produksi small{display:block;margin-top:5px}.dashboard-hero{flex-direction:row;align-items:center;justify-content:space-between;gap:18px}.dashboard-hero>div{min-width:0}
@media(max-width:1450px){.grid-kpi-produksi{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:820px){.grid-kpi-produksi{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-hero{flex-direction:column;align-items:flex-start}}@media(max-width:440px){.grid-kpi-produksi{grid-template-columns:1fr 1fr}.kpi-produksi{min-height:118px;padding:16px}.kpi-produksi .angka{font-size:25px}}


/* Konsistensi formulir universal — UAT R3
   Catatan: input tanpa atribut type tetap ditangkap sebagai text field. */
.konten :where(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="url"],input[type="search"],input[type="tel"],input[type="file"],select,textarea),
.panel-formulir :where(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="url"],input[type="search"],input[type="tel"],input[type="file"],select,textarea){
    width:100%;min-height:44px;box-sizing:border-box;border:1px solid #dbe3ef;border-radius:12px;padding:10px 12px;background:#fff;color:var(--teks);font:inherit;outline:none;box-shadow:0 1px 2px rgba(15,23,42,.025);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
}
.konten textarea,.panel-formulir textarea{min-height:104px;resize:vertical;line-height:1.5}
.konten select[multiple],.panel-formulir select[multiple]{min-height:120px}
.konten input[type="file"],.panel-formulir input[type="file"]{padding:7px 9px;background:#f8fafc}
.konten input[type="file"]::file-selector-button,.panel-formulir input[type="file"]::file-selector-button{margin-right:10px;border:0;border-radius:10px;padding:7px 11px;background:#eaf2ff;color:#1e40af;font-weight:700;cursor:pointer}
.konten :where(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="url"],input[type="search"],input[type="tel"],input[type="file"],select,textarea)::placeholder,
.panel-formulir :where(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="url"],input[type="search"],input[type="tel"],input[type="file"],select,textarea)::placeholder{color:#94a3b8;opacity:1}
.konten :where(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="url"],input[type="search"],input[type="tel"],input[type="file"],select,textarea):focus,
.panel-formulir :where(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="url"],input[type="search"],input[type="tel"],input[type="file"],select,textarea):focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.12);background:#fff}
.konten :where(input,select,textarea):disabled,.konten :where(input,textarea)[readonly],.panel-formulir :where(input,select,textarea):disabled,.panel-formulir :where(input,textarea)[readonly]{background:#f1f5f9;color:#64748b;cursor:not-allowed}
.konten :where(input[type="checkbox"],input[type="radio"]),.panel-formulir :where(input[type="checkbox"],input[type="radio"]){accent-color:var(--utama);width:17px;height:17px;vertical-align:middle}
/* Field kompak boleh lebih pendek, tetapi tetap memakai bahasa visual/radius yang sama. */
.konten .aksi-baris select,.konten .select-mini,.konten .input-kecil{border-radius:12px}
.form-grid,.grid-form,.grid-formulir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid>label,.grid-form>label,.grid-formulir>.grup,.kartu form>label{min-width:0}
.form-grid>label,.grid-form>label,.kartu form>label{display:grid;gap:7px;color:#334155;font-size:12px;font-weight:700}
.form-grid>.penuh,.grid-form>.penuh,.grid-form>.span-2,.grid-formulir>.penuh,.form-grid>.span-2{grid-column:1/-1}
.grup label,.form-grid label>span,.grid-form label>span{color:#334155;font-size:12px;font-weight:700}
.grup small,.form-grid label>small,.grid-form label>small{color:var(--redup);font-weight:400;line-height:1.45}
.baris-filter :where(input[type="text"],input[type="search"],input[type="date"],select),.aksi-baris :where(input[type="number"],input[type="text"],select),.input-kecil{width:auto;min-width:90px}
.tabel-responsif td form:not(.form-grid):not(.grid-form):not(.grid-formulir){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tabel-responsif td form :where(input[type="text"],input[type="email"],input[type="number"],input[type="date"],select){min-width:135px;flex:1 1 135px}
.footer-aplikasi{margin-top:auto;padding:18px 28px 22px;border-top:1px solid #e5eaf1;color:#7b8798;font-size:11px;text-align:center;display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;background:rgba(255,255,255,.72)}
.footer-aplikasi b{color:#64748b}.footer-pemisah{color:#cbd5e1}.area-utama{min-height:100vh;display:flex;flex-direction:column}.konten{flex:1 0 auto}
@media(max-width:620px){.form-grid,.grid-form,.grid-formulir{grid-template-columns:1fr}.form-grid>.penuh,.grid-form>.penuh,.grid-form>.span-2,.grid-formulir>.penuh,.form-grid>.span-2{grid-column:auto}.footer-aplikasi{padding:16px 18px}.footer-pemisah{display:none}.footer-aplikasi span{width:100%}}
.detail-teknis{margin-top:14px;padding:12px 14px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc}.detail-teknis summary{cursor:pointer;font-weight:700;color:#334155}.detail-teknis code{display:block;overflow:auto;margin:10px 0;padding:10px 12px;border-radius:8px;background:#0f172a;color:#e2e8f0;font-size:12px;white-space:nowrap}
.konten label:has(>input[type="checkbox"]),.konten label:has(>input[type="radio"]){display:flex;align-items:center;gap:8px;min-height:36px;font-size:12px;font-weight:600;color:#475569}.konten label:has(>input[type="checkbox"]) input,.konten label:has(>input[type="radio"]) input{flex:0 0 auto;margin:0}
/* Komponen utilitas yang sebelumnya belum memiliki style eksplisit */
.tombol-primer{color:#fff;background:linear-gradient(135deg,var(--utama),var(--aksen));border-color:transparent}.tombol-primer:hover{filter:brightness(.96)}
.kepala-halaman{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.kepala-halaman h1{margin-bottom:5px}.kepala-halaman p{margin:0;color:var(--redup)}
.alert{padding:12px 14px;border:1px solid var(--garis);border-radius:10px;margin:10px 0;font-size:13px;line-height:1.55}.alert.sukses{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.alert.galat{background:#fef2f2;border-color:#fecaca;color:#991b1b}.alert.peringatan{background:#fff7ed;border-color:#fed7aa;color:#9a3412}.alert.informasi{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}
.baris-daftar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--garis)}.baris-daftar:last-child{border-bottom:0}.baris-daftar>div{min-width:0}.baris-daftar strong,.baris-daftar small{display:block}.baris-daftar small{margin-top:3px;color:var(--redup);word-break:break-word}.baris-daftar form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.baris-daftar form :where(input,select){width:auto;min-width:120px}
.jarak-bawah{margin-bottom:16px}.baris-sebar{display:flex;align-items:center;justify-content:space-between;gap:12px}.baris-tautan{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--garis)}.pilihan-centang{display:flex!important;align-items:center!important;gap:8px!important}.statistik strong{display:block;font-size:26px;margin-top:4px}.statistik small{color:var(--redup)}
@media(max-width:720px){.kepala-halaman,.baris-daftar,.baris-sebar,.baris-tautan{align-items:stretch;flex-direction:column}.baris-daftar form{width:100%}.baris-daftar form :where(input,select){width:100%}}
.daftar-rinci{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:9px 14px;margin:0}.daftar-rinci dt{font-size:12px;font-weight:700;color:var(--redup)}.daftar-rinci dd{margin:0;color:var(--teks);word-break:break-word}.teks-bantu{margin:7px 0 0;color:var(--redup);font-size:12px;line-height:1.5}
.grid-kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.grid-kartu.empat{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.grid-kartu.empat .kartu{padding:18px}
.form-jawaban-cbt{display:grid;gap:12px}.soal-cbt{scroll-margin-top:90px}.materi-pembaca{min-width:0}
@media(max-width:900px){.grid-kartu.empat{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.daftar-rinci{grid-template-columns:1fr;gap:3px}.daftar-rinci dd{margin-bottom:9px}.grid-kartu.empat{grid-template-columns:1fr}}


/* Sidebar UAT: posisi menu dipertahankan dan versi tidak menutupi menu terbawah */
.sidebar{scrollbar-gutter:stable;overscroll-behavior:contain;padding-bottom:22px}
.versi-sidebar{position:static;left:auto;right:auto;bottom:auto;margin-top:18px;padding:13px 8px 3px;border-top:1px solid rgba(255,255,255,.08);text-align:center}

/* =========================================================
   CUSTOM LOGIN WHITE-LABEL — LMS SMK SATYA PRAJA 2 PETARUKAN
   ========================================================= */
body.halaman-login-sekolah {
    min-height: 100vh;
    background: #eef3f9;
}

.login-sekolah {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(520px, 58%) minmax(420px, 42%);
    background: #eef3f9;
}

.login-visual {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(30px, 4.5vw, 68px);
    isolation: isolate;
}

.login-foto-sekolah {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
    z-index: -3;
    transform: scale(1.015);
}

.login-lapisan {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(5, 22, 52, .52) 0%, rgba(6, 29, 67, .34) 34%, rgba(6, 27, 64, .78) 100%),
        linear-gradient(90deg, rgba(10, 45, 98, .42), rgba(4, 18, 43, .08));
}

.login-visual::after {
    content: "";
    position: absolute;
    inset: auto -110px -150px auto;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 0 0 48px rgba(255,255,255,.035),
        0 0 0 96px rgba(255,255,255,.025);
    z-index: -1;
}

.login-identitas-sekolah {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: 100%;
    padding: 11px 17px 11px 11px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    background: rgba(7, 31, 72, .42);
    box-shadow: 0 14px 38px rgba(0,0,0,.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.login-logo-sekolah {
    width: 58px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.25));
}

.login-identitas-sekolah strong,
.login-identitas-sekolah span {
    display: block;
}

.login-identitas-sekolah strong {
    margin-top: 4px;
    font-size: clamp(15px, 1.35vw, 21px);
    line-height: 1.2;
    letter-spacing: .035em;
}

.login-keterangan-kecil {
    color: rgba(255,255,255,.76);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.login-pesan-merek {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: auto 0 clamp(30px, 4vh, 60px);
}

.login-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.12);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-pesan-merek h1 {
    margin: 17px 0 15px;
    max-width: 780px;
    font-size: clamp(38px, 5.2vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
    text-shadow: 0 3px 18px rgba(0,0,0,.28);
}

.login-pesan-merek p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: clamp(14px, 1.3vw, 18px);
    line-height: 1.65;
}

.login-fitur-ringkas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.login-fitur-ringkas span {
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(8, 28, 62, .34);
    color: rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.login-versi {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.64);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .04em;
}

.login-panel-formulir {
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(28px, 5vw, 72px);
    background:
        radial-gradient(circle at 100% 0, rgba(37,99,235,.08), transparent 28%),
        radial-gradient(circle at 0 100%, rgba(14,165,233,.06), transparent 30%),
        #f7f9fc;
}

.kartu-login-sekolah {
    width: min(100%, 470px);
    padding: clamp(26px, 3vw, 40px);
    border: 1px solid #dce5f1;
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 70px rgba(27, 57, 104, .12);
}

.login-logo-mobile {
    display: none;
    align-items: center;
    gap: 11px;
    margin-bottom: 24px;
}

.login-logo-mobile img {
    width: 48px;
    height: 60px;
    object-fit: contain;
}

.login-logo-mobile strong,
.login-logo-mobile span {
    display: block;
}

.login-logo-mobile strong {
    color: #173a75;
    font-size: 14px;
    line-height: 1.2;
}

.login-logo-mobile span {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
}

.judul-login-sekolah {
    margin-bottom: 28px;
}

.login-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.judul-login-sekolah h2 {
    margin: 0;
    color: #172033;
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.judul-login-sekolah p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.65;
}

.form-login-sekolah {
    display: grid;
    gap: 18px;
}

.grup-login {
    display: grid;
    gap: 8px;
}

.grup-login label {
    color: #344155;
    font-size: 12px;
    font-weight: 750;
}

.input-login {
    position: relative;
    display: flex;
    align-items: center;
}

.input-login input {
    width: 100%;
    min-height: 52px;
    padding: 12px 44px 12px 44px;
    border: 1px solid #ced8e6;
    border-radius: 13px;
    outline: none;
    background: #fbfdff;
    color: #172033;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.input-login input::placeholder {
    color: #9aa8ba;
}

.input-login input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.10);
}

.ikon-input {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 1;
    width: 20px;
    height: 20px;
    color: #7890ad;
    transform: translateY(-50%);
    pointer-events: none;
}

.ikon-input svg,
.tombol-lihat-sandi svg,
.tombol-login-sekolah svg {
    width: 100%;
    height: 100%;
}

.tombol-lihat-sandi {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #71839b;
    transform: translateY(-50%);
}

.tombol-lihat-sandi:hover,
.tombol-lihat-sandi:focus-visible {
    background: #edf4ff;
    color: #2563eb;
    outline: none;
}

.tombol-login-sekolah {
    width: 100%;
    min-height: 52px;
    margin-top: 2px;
    padding: 12px 17px;
    border: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #0ea5e9);
    box-shadow: 0 12px 24px rgba(37,99,235,.22);
    font-weight: 800;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.tombol-login-sekolah svg {
    width: 19px;
    height: 19px;
}

.tombol-login-sekolah:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(37,99,235,.27);
    filter: saturate(1.05);
}

.tombol-login-sekolah:active {
    transform: translateY(0);
}

.kartu-login-sekolah .notifikasi {
    margin-bottom: 18px;
    border-radius: 12px;
}

.login-bantuan {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e6edf5;
    color: #7b899d;
    font-size: 11px;
}

.login-bantuan span:last-child {
    color: #43546a;
    font-weight: 700;
    text-align: right;
}

.login-footer-sekolah {
    margin-top: 28px;
    color: #98a4b4;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 1100px) {
    .login-sekolah {
        grid-template-columns: minmax(450px, 54%) minmax(400px, 46%);
    }
    .login-pesan-merek h1 {
        font-size: clamp(36px, 5vw, 58px);
    }
}

@media (max-width: 900px) {
    .login-sekolah {
        grid-template-columns: 1fr;
    }
    .login-visual {
        min-height: 330px;
        padding: 28px;
    }
    .login-identitas-sekolah {
        padding: 8px 13px 8px 8px;
    }
    .login-logo-sekolah {
        width: 44px;
        height: 55px;
    }
    .login-keterangan-kecil,
    .login-fitur-ringkas,
    .login-versi {
        display: none;
    }
    .login-pesan-merek {
        margin: auto 0 0;
        max-width: 620px;
    }
    .login-pesan-merek h1 {
        margin: 10px 0 8px;
        font-size: clamp(34px, 8vw, 54px);
    }
    .login-pesan-merek p {
        max-width: 590px;
        font-size: 14px;
    }
    .login-panel-formulir {
        min-height: auto;
        padding: 34px 22px 46px;
    }
}

@media (max-width: 560px) {
    .login-visual {
        min-height: 245px;
        padding: 18px;
    }
    .login-identitas-sekolah {
        display: none;
    }
    .login-pesan-merek h1 {
        font-size: 35px;
        line-height: 1.02;
    }
    .login-pesan-merek p {
        display: none;
    }
    .login-badge {
        font-size: 9px;
    }
    .login-panel-formulir {
        padding: 18px 14px 30px;
        place-items: start center;
    }
    .kartu-login-sekolah {
        margin-top: -42px;
        position: relative;
        z-index: 3;
        padding: 24px 20px;
        border-radius: 20px;
    }
    .login-logo-mobile {
        display: flex;
    }
    .judul-login-sekolah {
        margin-bottom: 23px;
    }
    .judul-login-sekolah h2 {
        font-size: 30px;
    }
    .login-bantuan {
        display: block;
        line-height: 1.6;
    }
    .login-bantuan span {
        display: block;
    }
    .login-bantuan span:last-child {
        text-align: left;
    }
}

/* Learning Path berbasis kompetensi — LMS SMK SATYA PRAJA 2 PETARUKAN */
.learning-path-admin{align-items:start}.learning-path-editor{overflow:hidden}.learning-path-list{display:grid;gap:12px;margin-top:18px}.learning-path-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:15px;border:1px solid var(--garis);border-radius:14px;background:#fff}.learning-path-number{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eaf2ff;color:#1d4ed8;font-weight:900}.learning-path-body{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px}.learning-path-head{min-width:0}.learning-path-head strong,.learning-path-head small{display:block}.learning-path-head strong{margin:7px 0 3px;font-size:15px}.learning-path-head small{color:var(--redup);line-height:1.45}.learning-path-step.selesai{border-color:#bbf7d0;background:#f7fff9}.learning-path-step.selesai .learning-path-number{background:#dcfce7;color:#166534}.learning-path-step.sekarang{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.07)}.learning-path-step.terkunci{background:#f8fafc;opacity:.76}.learning-path-step.terkunci .learning-path-number{background:#e2e8f0;color:#64748b}.learning-path-row-locked{opacity:.74;background:#f8fafc}.learning-path-editor .tautan-aksi:disabled{opacity:.35;cursor:not-allowed;text-decoration:none}.learning-path-student>.judul-dengan-aksi{margin-bottom:4px}
@media(max-width:720px){.learning-path-body{align-items:stretch;flex-direction:column}.learning-path-step{grid-template-columns:40px minmax(0,1fr);gap:10px}.learning-path-number{width:36px;height:36px;border-radius:11px}.learning-path-admin{grid-template-columns:1fr}}
.learning-path-kpi{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
@media(max-width:620px){.learning-path-kpi{grid-template-columns:1fr 1fr;max-width:none}}

/* =========================================================
   AJAX INTERACTIVE SEARCH/FILTER + UI POLISH — V1.0
   Native fetch(), debounce, partial render, shared-hosting friendly.
   ========================================================= */
.ajax-progress{position:fixed;z-index:9999;top:0;left:0;right:0;height:3px;pointer-events:none;opacity:0;overflow:hidden;background:transparent;transition:opacity .12s ease}.ajax-progress.aktif{opacity:1}.ajax-progress span{display:block;width:38%;height:100%;background:linear-gradient(90deg,#1d4ed8,#0ea5e9,#1d4ed8);border-radius:999px;transform:translateX(-120%)}.ajax-progress.aktif span{animation:ekreasiAjaxProgress 1s ease-in-out infinite}@keyframes ekreasiAjaxProgress{0%{transform:translateX(-120%)}60%{transform:translateX(170%)}100%{transform:translateX(290%)}}
.konten{position:relative}.konten.ajax-memuat{opacity:.76;transition:opacity .12s ease}.konten:not(.ajax-memuat){transition:opacity .16s ease}.ajax-status-global{position:fixed;z-index:60;top:86px;right:24px;max-width:min(340px,calc(100vw - 36px));padding:9px 13px;border:1px solid #bfdbfe;border-radius:11px;background:#eff6ff;color:#1e40af;box-shadow:0 10px 30px rgba(15,37,87,.12);font-size:11px;font-weight:750;animation:ekreasiToastMasuk .18s ease}.ajax-status-global.sukses{border-color:#bbf7d0;background:#f0fdf4;color:#166534}.ajax-status-global.menghilang{opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}@keyframes ekreasiToastMasuk{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
form[data-ekreasi-ajax="1"]{position:relative}form[data-ekreasi-ajax="1"] input[name="cari"],form[data-ekreasi-ajax="1"] input[name="q"],form[data-ekreasi-ajax="1"] input[name="pencarian"]{background-image:linear-gradient(transparent,transparent);padding-right:38px}form[data-ekreasi-ajax="1"] input[name="cari"]:focus,form[data-ekreasi-ajax="1"] input[name="q"]:focus,form[data-ekreasi-ajax="1"] input[name="pencarian"]:focus{background-color:#fff}

/* Filter cards that previously looked like ordinary forms */
.form-filter-kompak{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.form-filter-kompak>label{flex:1 1 210px;margin:0}.form-filter-kompak>.grid-form{flex:1 1 100%;margin:0}.form-filter-kompak>.tombol{flex:0 0 auto}.form-filter-kompak .grid-form+.tombol{margin-top:2px}

/* Harmonisasi visual untuk halaman daftar, filter dan tabel */
.kartu-isi>h2:first-child,.kartu-isi>h3:first-child{margin-top:0}.kartu-isi>h2{letter-spacing:-.015em}.kartu-isi>p:first-of-type{max-width:1050px}
.konten hr{height:1px;border:0;background:#e5eaf1;margin:22px 0}
.tabel-responsif{max-width:100%;border-radius:12px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tabel-responsif::-webkit-scrollbar{height:9px;width:9px}.tabel-responsif::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.tabel-responsif table{background:#fff}.tabel-responsif thead th{background:#f8fafc;color:#526174;font-weight:800;white-space:nowrap}.tabel-responsif tbody tr{transition:background .12s ease}.tabel-responsif tbody tr:hover{background:#fbfdff}.tabel-responsif td{word-break:normal}.tabel-responsif td>strong:first-child{line-height:1.35}.tabel-responsif td>small{line-height:1.4}
.paginasi{align-items:center}.paginasi a{transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease}.paginasi a:hover{border-color:#93c5fd;background:#eff6ff;color:#1d4ed8;transform:translateY(-1px)}.paginasi a.aktif:hover{background:var(--utama);color:#fff;transform:none}
.baris-filter{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.baris-filter label,.form-inline label{min-width:0}.baris-filter .grup label,.form-inline label>span{display:block;margin-bottom:6px;color:#475569;font-size:11px;font-weight:800}.baris-filter .tombol,.form-inline .tombol{white-space:nowrap}
.aksi-kepala,.judul-dengan-aksi{min-width:0}.judul-dengan-aksi>div:first-child{min-width:0}.kepala-konten h1{overflow-wrap:anywhere}.kepala-konten p{max-width:960px}
.keadaan-kosong{border-radius:12px;background:linear-gradient(180deg,#fbfdff,#f8fafc)}

/* Status risiko eksplisit agar badge dinamis selalu proporsional */
.badge-risiko-aman,.badge-risiko-perhatian,.badge-risiko-tinggi,.badge-risiko-kritis{display:inline-flex;align-items:center;width:fit-content;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.2}

/* Responsif: filter dan tabel tetap nyaman di tablet/HP */
@media(max-width:900px){.ajax-status-global{top:78px;right:16px}.form-filter-kompak{align-items:stretch}.form-filter-kompak>.tombol{width:100%}}
@media(max-width:620px){.ajax-status-global{top:70px;left:12px;right:12px;max-width:none;text-align:center}.baris-filter{padding:13px}.baris-filter .grup-aksi,.baris-filter .grup-aksi .tombol{width:100%}.form-inline{width:100%}.tabel-responsif{margin-left:-4px;margin-right:-4px}.judul-dengan-aksi{align-items:flex-start;flex-direction:column}.judul-dengan-aksi>.aksi-baris,.judul-dengan-aksi>form{width:100%}.judul-dengan-aksi>form.aksi-baris input{flex:1 1 180px}.kepala-konten .aksi-kepala{width:100%}.kepala-konten .aksi-kepala>.tombol,.kepala-konten .aksi-kepala>form{flex:1 1 auto}.kepala-konten .aksi-kepala>form .tombol{width:100%}}
@media(prefers-reduced-motion:reduce){.ajax-progress span,.ajax-status-global{animation:none!important}.paginasi a,.konten{transition:none!important}}

/* =========================================================
   SMART ASSISTANT LMS — Asisten Pembelajaran & Akademik Cerdas
   ========================================================= */
.smart-assistant{position:fixed;right:24px;bottom:24px;z-index:1200;font-family:Inter,"Segoe UI",Arial,sans-serif}
.smart-fab{width:58px;height:58px;border:0;border-radius:19px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#123cbd,#2563eb 58%,#0ea5e9);box-shadow:0 16px 36px rgba(29,78,216,.32);font-size:23px;transition:transform .18s ease,box-shadow .18s ease;position:relative}
.smart-fab:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(29,78,216,.38)}
.smart-fab::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(37,99,235,.25);border-radius:23px;animation:smartPulse 2.4s ease-out infinite}
@keyframes smartPulse{0%{transform:scale(.94);opacity:.7}70%,100%{transform:scale(1.16);opacity:0}}
.smart-panel{position:absolute;right:0;bottom:72px;width:min(390px,calc(100vw - 28px));height:min(650px,calc(100vh - 115px));background:#fff;border:1px solid #dce6f3;border-radius:24px;box-shadow:0 28px 80px rgba(15,37,87,.22);overflow:hidden;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom right;transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none}
.smart-assistant.terbuka .smart-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.smart-assistant.terbuka .smart-fab{transform:rotate(3deg) scale(.94)}
.smart-header{padding:17px 18px;color:#fff;background:linear-gradient(135deg,#102b68,#1648c5 58%,#0b91da);display:flex;align-items:center;gap:12px;position:relative;overflow:hidden}
.smart-header::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-95px;background:rgba(255,255,255,.11)}
.smart-header-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);font-size:18px;flex:0 0 auto}
.smart-header-text{min-width:0;flex:1}.smart-header-text strong{display:block;font-size:14px;line-height:1.2}.smart-header-text small{display:block;margin-top:3px;color:rgba(255,255,255,.78);font-size:10.5px}.smart-online{display:inline-flex!important;align-items:center;gap:5px}.smart-online::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.14)}
.smart-header-actions{display:flex;align-items:center;gap:4px;position:relative;z-index:2}.smart-icon-btn{width:34px;height:34px;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;color:rgba(255,255,255,.84)}.smart-icon-btn:hover,.smart-icon-btn.aktif{background:rgba(255,255,255,.15);color:#fff}.smart-icon-btn:disabled{opacity:.35;cursor:not-allowed}
.smart-messages{flex:1;overflow:auto;padding:18px 14px 12px;background:linear-gradient(180deg,#f8fbff 0,#fff 34%);scroll-behavior:smooth;overscroll-behavior:contain}.smart-messages::-webkit-scrollbar{width:6px}.smart-messages::-webkit-scrollbar-thumb{background:#d9e3f0;border-radius:99px}
.smart-msg{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}.smart-msg-user{justify-content:flex-end}.smart-msg-avatar{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,#1d4ed8,#0ea5e9);font-size:11px;box-shadow:0 5px 12px rgba(37,99,235,.18)}
.smart-msg-bubble{max-width:82%;padding:10px 12px;border-radius:15px;background:#fff;border:1px solid #e1e8f2;box-shadow:0 4px 12px rgba(15,37,87,.045);color:#273449;font-size:12px;line-height:1.55}.smart-msg-bubble p{margin:0;white-space:pre-line}.smart-msg-user .smart-msg-bubble{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border-color:transparent;border-bottom-right-radius:5px}.smart-msg-assistant .smart-msg-bubble{border-bottom-left-radius:5px}
.smart-msg-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid #edf1f6}.smart-msg-link{display:inline-flex;align-items:center;max-width:100%;padding:5px 8px;border-radius:8px;text-decoration:none;background:#eff6ff;color:#1d4ed8;font-size:10px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-msg-link:hover{background:#dbeafe}
.smart-suggestions{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 10px;background:#fff;border-top:1px solid #eef2f7;scrollbar-width:none}.smart-suggestions:empty{display:none}.smart-suggestions::-webkit-scrollbar{display:none}.smart-saran{flex:0 0 auto;border:1px solid #cfe0fb;border-radius:999px;background:#f7fbff;color:#2450a4;padding:6px 9px;font-size:10px;font-weight:700;white-space:nowrap}.smart-saran:hover{background:#eaf3ff;border-color:#9fc3fb}
.smart-composer{display:flex;align-items:flex-end;gap:7px;padding:10px 12px 12px;border-top:1px solid #e8edf5;background:#fff}.smart-input-wrap{position:relative;flex:1;min-width:0}.smart-input{display:block;width:100%;height:44px;max-height:100px;resize:none;border:1px solid #d5dfec;border-radius:14px;padding:11px 42px 10px 12px;background:#fbfdff;color:#172033;outline:none;font-size:12px;line-height:1.45}.smart-input:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.smart-mic{position:absolute;right:5px;top:5px;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#68809e}.smart-mic:hover{background:#edf4ff;color:#2563eb}.smart-mic.mendengar{color:#dc2626;background:#fee2e2;animation:smartMic 1s infinite alternate}@keyframes smartMic{to{transform:scale(1.08)}}
.smart-send{width:44px;height:44px;border:0;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1d4ed8,#0ea5e9);box-shadow:0 8px 18px rgba(37,99,235,.22)}.smart-send:hover{filter:brightness(.97)}.smart-send:disabled{opacity:.55;cursor:wait;box-shadow:none}
.smart-footer-note{display:flex;align-items:center;justify-content:center;gap:6px 12px;flex-wrap:wrap;text-align:center;padding:0 12px 9px;background:#fff;color:#94a3b8;font-size:9px}.smart-footer-note i{margin-right:4px;color:#64748b}.smart-voice-hint{color:#64748b;font-weight:700}.smart-mic.siap-kirim{color:#2563eb;background:#dbeafe}.smart-assistant.menunggu-kirim-suara .smart-input{border-color:#93c5fd;background:#f8fbff}
.smart-typing{display:flex;align-items:center;gap:4px;min-width:48px}.smart-typing span{width:5px;height:5px;border-radius:50%;background:#91a4bd;animation:smartDot 1.15s ease-in-out infinite}.smart-typing span:nth-child(2){animation-delay:.15s}.smart-typing span:nth-child(3){animation-delay:.3s}@keyframes smartDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.memproses .smart-fab::after{animation-duration:.8s}
@media(max-width:620px){.smart-assistant{right:12px;bottom:14px}.smart-fab{width:54px;height:54px;border-radius:17px}.smart-panel{position:fixed;left:10px;right:10px;bottom:76px;width:auto;height:min(72vh,650px);border-radius:22px;transform-origin:bottom center}.smart-msg-bubble{max-width:86%}}
@media(max-width:420px){.smart-panel{left:0;right:0;bottom:0;height:min(84vh,720px);border-radius:22px 22px 0 0}.smart-assistant.terbuka .smart-fab{opacity:0;pointer-events:none}.smart-header{padding:15px}.smart-messages{padding-left:10px;padding-right:10px}}

/* =========================================================
   SMART ASSISTANT — AUTO KIRIM TOGGLE (DEFENSIVE UI)
   Dibuat kompatibel dengan layout lama: kontrol dapat diinjeksi JS.
   ========================================================= */
.smart-footer-note{display:block;text-align:left;padding:0 12px 10px;background:#fff;color:#94a3b8;font-size:9px}
.smart-auto-send-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -2px 8px;padding:8px 10px;border:1px solid #dce7f5;border-radius:12px;background:linear-gradient(180deg,#f8fbff,#f3f7fd)}
.smart-auto-send-caption{display:inline-flex;align-items:center;gap:6px;min-width:0;color:#40546f;font-size:9.5px;font-weight:800;line-height:1.25}
.smart-auto-send-caption i{margin:0;color:#2563eb;font-size:11px}
.smart-auto-send-toggle{appearance:none;border:1px solid #cbd5e1;border-radius:999px;background:#eef2f7;color:#64748b;min-height:30px;padding:3px 5px 3px 9px;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:9px;font-weight:900;line-height:1;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;flex:0 0 auto}
.smart-auto-send-toggle:hover{border-color:#9ebfea;background:#eef6ff;color:#2456a8}
.smart-auto-send-toggle.aktif{border-color:#93c5fd;background:#dbeafe;color:#1d4ed8;box-shadow:0 2px 8px rgba(37,99,235,.10)}
.smart-auto-send-toggle:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.smart-auto-send-label{display:inline-flex;align-items:center;white-space:nowrap;min-width:20px;justify-content:center}
.smart-switch-track{width:31px;height:18px;padding:2px;border-radius:999px;background:#94a3b8;display:flex;align-items:center;transition:background .16s ease;flex:0 0 auto}
.smart-switch-track>span{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.28);transform:translateX(0);transition:transform .16s ease}
.smart-auto-send-toggle.aktif .smart-switch-track{background:#2563eb}
.smart-auto-send-toggle.aktif .smart-switch-track>span{transform:translateX(13px)}
.smart-footer-meta{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:0 3px;text-align:center}
.smart-readonly-note{flex:1 1 auto}.smart-footer-meta i{margin-right:4px;color:#64748b}.smart-voice-hint{color:#64748b;font-weight:700}
@media(max-width:420px){.smart-footer-note{padding-left:10px;padding-right:10px}.smart-auto-send-row{padding:7px 9px}.smart-auto-send-caption{font-size:9px}.smart-footer-meta{justify-content:center}.smart-readonly-note{flex:1 1 100%;text-align:center}.smart-voice-hint{font-size:8.5px}}


/* =========================================================
   WHITE-LABEL BRANDING — LMS SMK SATYA PRAJA 2 PETARUKAN
   ========================================================= */
body.halaman-login-sekolah{--login-primary:#1d4ed8;--login-accent:#0ea5e9}
.login-visual.tanpa-foto{background:radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--login-accent) 35%,transparent),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--login-primary) 82%,#08162f),color-mix(in srgb,var(--login-primary) 62%,#07162f) 56%,#07162f)}
.login-visual.tanpa-foto .login-lapisan{background:linear-gradient(180deg,rgba(5,22,52,.18),rgba(5,22,52,.38))}
.login-eyebrow{color:var(--login-primary)}
.input-login input:focus{border-color:var(--login-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--login-primary) 12%,transparent)}
.tombol-lihat-sandi:hover,.tombol-lihat-sandi:focus-visible{color:var(--login-primary)}
.tombol-login-sekolah{background:linear-gradient(135deg,var(--login-primary),color-mix(in srgb,var(--login-primary) 76%,var(--login-accent)) 55%,var(--login-accent));box-shadow:0 12px 24px color-mix(in srgb,var(--login-primary) 22%,transparent)}
.tombol-login-sekolah:hover{box-shadow:0 15px 30px color-mix(in srgb,var(--login-primary) 27%,transparent)}
.login-identitas-sekolah strong{max-width:min(620px,54vw);overflow-wrap:anywhere}
.login-keterangan-kecil{max-width:min(620px,54vw);overflow-wrap:anywhere}
.login-pesan-merek h1{overflow-wrap:anywhere}
.login-logo-sekolah,.login-logo-mobile img{background:rgba(255,255,255,.06);border-radius:10px}

.input-warna-branding{display:grid;grid-template-columns:52px minmax(0,1fr);gap:9px;align-items:center}
.input-warna-branding input[type="color"]{width:52px!important;min-width:52px!important;height:44px;padding:3px;border:1px solid var(--garis);border-radius:12px;background:#fff;cursor:pointer}
.input-warna-branding input[type="text"]{min-width:0}
.grid-branding-sekolah{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.branding-preview-card{min-width:0;padding:16px;border:1px solid var(--garis);border-radius:14px;background:#f8fafc;display:grid;gap:12px}
.branding-preview-logo{height:150px;display:grid;place-items:center;border:1px dashed #cbd5e1;border-radius:12px;background:#fff;overflow:hidden}
.branding-preview-logo img{max-width:86%;max-height:125px;object-fit:contain}
.branding-preview-foto{height:180px;border:1px dashed #cbd5e1;border-radius:12px;background:#fff;overflow:hidden;display:grid;place-items:center}
.branding-preview-foto img{width:100%;height:100%;object-fit:cover}
.branding-preview-foto.kosong{text-align:center;color:var(--redup);padding:16px}.branding-preview-foto.kosong strong,.branding-preview-foto.kosong small{display:block}.branding-preview-foto.kosong small{margin-top:4px}
.branding-installer>.petunjuk{display:block;margin:-8px 0 18px}
@media(max-width:760px){.grid-branding-sekolah{grid-template-columns:1fr}.input-warna-branding{grid-template-columns:48px minmax(0,1fr)}}

/* =========================================================
   LMS SATYA PRAJA 2 LOGIN EXPERIENCE V2 — MASTER STANDARD
   ========================================================= */
body.halaman-login-sekolah{overflow-x:hidden;background:#eef3f9}.login-sekolah.login-v2{grid-template-columns:minmax(0,60%) minmax(360px,40%);background:#f5f8fc}.login-v2 .login-visual{padding:32px 40px 30px;justify-content:flex-start}.login-v2 .login-foto-sekolah{object-position:center center;transform:none}.login-v2 .login-lapisan{background:linear-gradient(90deg,rgba(4,21,54,.86) 0%,rgba(5,34,80,.62) 42%,rgba(5,30,72,.18) 78%,rgba(4,18,45,.08) 100%),linear-gradient(180deg,rgba(4,20,50,.25),rgba(3,21,53,.72))}.login-product-mark{position:relative;z-index:2;display:flex;align-items:center;gap:11px;color:#fff}.login-product-mark img{width:42px;height:42px}.login-product-mark strong{font-size:14px;letter-spacing:-.01em}.login-v2-message{margin:auto 0 18px;max-width:760px}.login-v2-message .login-badge{padding:6px 10px;font-size:9px}.login-v2-message h1{margin:13px 0 7px;font-size:clamp(31px,3.2vw,48px);line-height:1.04;letter-spacing:-.035em}.login-v2-message .login-v2-headline{margin:0 0 8px;color:#fff;font-size:14px;font-weight:700;line-height:1.45}.login-v2-message p:last-child{max-width:640px;font-size:12px;line-height:1.55;color:rgba(255,255,255,.78)}.login-v2-features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:4px;padding:14px 16px;border:1px solid rgba(255,255,255,.22);border-radius:15px;background:rgba(8,33,74,.50);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 35px rgba(0,0,0,.14)}.login-v2-features>div{min-width:0;display:grid;grid-template-columns:32px 1fr;gap:9px;padding:1px 12px}.login-v2-features>div+div{border-left:1px solid rgba(255,255,255,.18)}.login-v2-features>div>span{color:#36bdf5;font-size:22px}.login-v2-features p{margin:0}.login-v2-features strong,.login-v2-features small{display:block}.login-v2-features strong{font-size:11px}.login-v2-features small{margin-top:3px;color:rgba(255,255,255,.72);font-size:9px;line-height:1.4}.login-v2 .login-panel-formulir{padding:28px;background:radial-gradient(circle at 100% 0,rgba(37,99,235,.065),transparent 30%),#f8fafc}.login-v2-column{width:min(100%,390px);display:grid;gap:11px}.login-v2-card.kartu-login-sekolah{width:100%;padding:25px 26px;border-radius:18px;box-shadow:0 18px 48px rgba(30,55,95,.12)}.login-v2-brand.login-logo-mobile{display:flex;margin-bottom:20px}.login-v2-brand img{width:42px;height:48px}.login-v2-brand strong{font-size:14px;color:#133269}.login-v2-brand span{font-size:9px;letter-spacing:.08em}.login-v2-card .judul-login-sekolah{margin-bottom:20px;text-align:center}.login-v2-card .login-eyebrow{margin-bottom:6px;font-size:9px}.login-v2-card .judul-login-sekolah h2{font-size:27px}.login-v2-card .judul-login-sekolah p{margin-top:7px;font-size:11px;line-height:1.5}.login-v2-card .form-login-sekolah{gap:13px}.login-v2-card .grup-login{gap:6px}.login-v2-card .grup-login label{font-size:10px}.login-v2-card .input-login input{min-height:45px;padding-top:9px;padding-bottom:9px;font-size:12px;border-radius:10px}.login-v2-card .tombol-login-sekolah{min-height:45px;border-radius:10px;font-size:12px}.login-v2-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#718097;font-size:9px}.login-v2-meta label{display:flex;align-items:center;gap:6px}.login-v2-meta input{margin:0}.login-v2-support{padding:10px 12px;border:1px solid #dde6f1;border-radius:10px;background:#fff;color:#6f7d91;font-size:9px;text-align:center}.login-v2-support strong{color:#1d4ed8}.login-v2-column>.login-footer-sekolah{margin:0;color:#9aa5b4;font-size:9px}.login-v2 .login-visual.tanpa-foto{background:radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--login-accent) 36%,transparent),transparent 32%),linear-gradient(145deg,color-mix(in srgb,var(--login-primary) 86%,#07172f),color-mix(in srgb,var(--login-primary) 62%,#06162f) 58%,#06162f)}
@media(max-width:1100px){.login-sekolah.login-v2{grid-template-columns:minmax(0,56%) minmax(390px,44%)}.login-v2 .login-visual{padding:28px}.login-v2-message h1{font-size:35px}.login-v2-features{grid-template-columns:1fr;padding:10px 13px}.login-v2-features>div{grid-template-columns:28px 1fr;padding:8px 4px}.login-v2-features>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.15)}}
@media(max-width:900px){.login-sekolah.login-v2{grid-template-columns:1fr}.login-v2 .login-visual{min-height:330px;padding:24px}.login-v2-message{margin:auto 0 0}.login-v2-message h1{font-size:34px}.login-v2-message p:last-child{display:none}.login-v2-features{display:none}.login-v2 .login-panel-formulir{min-height:auto;padding:28px 18px 40px}.login-v2-column{width:min(100%,460px)}.login-v2-card.kartu-login-sekolah{margin:0}}
@media(max-width:560px){.login-v2 .login-visual{min-height:230px;padding:17px}.login-product-mark img{width:32px;height:32px}.login-product-mark strong{font-size:11px}.login-v2-message h1{font-size:27px;margin-bottom:5px}.login-v2-message .login-v2-headline{font-size:11px}.login-v2-message .login-badge{font-size:8px}.login-v2 .login-panel-formulir{padding:0 12px 24px;place-items:start center}.login-v2-card.kartu-login-sekolah{margin-top:-28px;padding:22px 18px;border-radius:18px}.login-v2-card .judul-login-sekolah h2{font-size:25px}.login-v2-brand.login-logo-mobile{margin-bottom:16px}.login-v2-support{font-size:8.5px}}
@media(max-width:360px){.login-v2-card.kartu-login-sekolah{padding:19px 14px}.login-v2-meta{align-items:flex-start;flex-direction:column}.login-v2-message h1{font-size:24px}}

/* RUI V1.0 — page-level safety and adaptive tables */
html,body{max-width:100%;overflow-x:hidden}.area-utama,.konten,.kartu,.kartu-isi,.grid-formulir{min-width:0}.ek-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}.ek-table-scroll>table{min-width:680px}.formulir-responsif,.grid-formulir{max-width:100%}@media(max-width:767px){.grid-formulir{grid-template-columns:1fr!important}.grid-formulir>.penuh{grid-column:auto!important}.aksi-formulir,.kepala-konten,.judul-kartu{flex-wrap:wrap}.aksi-formulir .tombol{min-height:42px}.modal,.dialog{max-width:calc(100vw - 24px)!important}}

/* =========================================================
   LMS SATYA PRAJA 2 UI FIX — INDEPENDENT SIDEBAR / CONTENT SCROLL
   Desktop: sidebar dan area utama memiliki scroll masing-masing.
   Mobile: sidebar overlay tetap memiliki scroll sendiri.
   ========================================================= */
@media (min-width: 981px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .kerangka {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .sidebar {
        position: relative;
        top: auto;
        height: 100vh;
        height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .area-utama {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }
}

@media (max-width: 980px) {
    .sidebar {
        height: 100vh;
        height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.menu-terbuka {
        overflow: hidden;
    }
}

/* ========================================================================== */
/* LMS SATYA PRAJA 2 PRODUCT EXPERIENCE BASELINE R3.9.2 — DYNAMIC 5 THEME            */
/* ========================================================================== */
html[data-theme="green_gold"]{
    --utama:#14532d;--utama-gelap:#0b3b20;--aksen:#d4a72c;--latar:#f5f8f3;--permukaan:#fff;
    --teks:#17251b;--redup:#68766b;--garis:#dde7dd;--tema-sidebar-1:#0b3b20;--tema-sidebar-2:#14532d;--tema-sidebar-3:#082d19;
    --tema-lembut:#eef7ef;--tema-border:#cde0cf;--tema-shadow:rgba(20,83,45,.16)
}
html[data-theme="royal_blue"]{
    --utama:#155eef;--utama-gelap:#0b2f78;--aksen:#00b8d9;--latar:#f4f7fb;--permukaan:#fff;
    --teks:#172033;--redup:#64748b;--garis:#dbe3ef;--tema-sidebar-1:#0b1f3a;--tema-sidebar-2:#102c52;--tema-sidebar-3:#08172d;
    --tema-lembut:#eff6ff;--tema-border:#cfe0fb;--tema-shadow:rgba(21,94,239,.18)
}
html[data-theme="amethyst"]{
    --utama:#7c3aed;--utama-gelap:#4c1d95;--aksen:#c084fc;--latar:#faf7ff;--permukaan:#fff;
    --teks:#241b31;--redup:#746a81;--garis:#e8def3;--tema-sidebar-1:#35125f;--tema-sidebar-2:#55208e;--tema-sidebar-3:#2b0e50;
    --tema-lembut:#f6efff;--tema-border:#ddc8f6;--tema-shadow:rgba(124,58,237,.18)
}
html[data-theme="maroon_gold"]{
    --utama:#9f2525;--utama-gelap:#661717;--aksen:#d4a72c;--latar:#fff8f4;--permukaan:#fff;
    --teks:#2e1d1d;--redup:#7b6965;--garis:#eddeda;--tema-sidebar-1:#541717;--tema-sidebar-2:#7a1f1f;--tema-sidebar-3:#451010;
    --tema-lembut:#fff1ec;--tema-border:#eccfc7;--tema-shadow:rgba(159,37,37,.17)
}
html[data-theme="teal_cyan"]{
    --utama:#0e7490;--utama-gelap:#155e75;--aksen:#22d3ee;--latar:#f2fbfc;--permukaan:#fff;
    --teks:#173036;--redup:#647a7f;--garis:#d7eaed;--tema-sidebar-1:#0c4a5b;--tema-sidebar-2:#0e7490;--tema-sidebar-3:#083b49;
    --tema-lembut:#eaf9fb;--tema-border:#c5e7ec;--tema-shadow:rgba(14,116,144,.18)
}
html[data-theme] .sidebar{background:linear-gradient(180deg,var(--tema-sidebar-1) 0%,var(--tema-sidebar-2) 52%,var(--tema-sidebar-3) 100%)}
html[data-theme] .menu a.aktif{background:linear-gradient(135deg,var(--utama),color-mix(in srgb,var(--aksen) 78%,var(--utama)));box-shadow:0 8px 18px var(--tema-shadow)}
html[data-theme] .logo-lambang,html[data-theme] .navbar-avatar,html[data-theme] .ikon-kpi{background:linear-gradient(135deg,var(--utama),var(--aksen))}
html[data-theme] .tombol-utama,html[data-theme] .smart-send{background:linear-gradient(135deg,var(--utama),var(--aksen));box-shadow:0 8px 18px var(--tema-shadow)}
html[data-theme] .smart-fab{background:linear-gradient(145deg,var(--utama),var(--aksen));box-shadow:0 12px 30px var(--tema-shadow)}
html[data-theme] .smart-msg-user .smart-msg-bubble{background:linear-gradient(135deg,var(--utama),color-mix(in srgb,var(--utama) 82%,var(--aksen)))}
html[data-theme] .smart-msg-link{background:var(--tema-lembut);color:var(--utama)}
html[data-theme] .smart-saran{border-color:var(--tema-border);background:color-mix(in srgb,var(--tema-lembut) 70%,#fff);color:var(--utama-gelap)}
html[data-theme] .kartu-lanjut-belajar{border-color:var(--tema-border);background:linear-gradient(135deg,var(--tema-lembut),#fff)}
html[data-theme] .kartu-lanjut-belajar .ikon-lanjut{background:var(--utama)}
html[data-theme] .kepala-konten:before,html[data-theme] .content-header-panel:before{background:linear-gradient(135deg,color-mix(in srgb,var(--utama) 16%,#fff),color-mix(in srgb,var(--aksen) 14%,#fff));color:var(--utama)}

.theme-switcher{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:4px 8px;border:1px solid var(--garis);border-radius:11px;background:#fff;color:var(--redup)}
.theme-switcher>i{color:var(--utama);font-size:12px}.theme-switcher select{min-width:112px;max-width:145px;border:0;outline:0;background:transparent;color:var(--teks);font-size:10px;font-weight:700;cursor:pointer;padding:3px 2px}
.theme-save-state{display:none;font-size:9px}.theme-switcher.menyimpan .theme-save-state{display:inline;color:var(--redup)}.theme-switcher.gagal{border-color:#fecaca;background:#fff7f7}
@media(max-width:1050px){.theme-switcher select{max-width:110px}.navbar-date{display:none}}
@media(max-width:760px){.theme-switcher{padding:4px 6px}.theme-switcher select{width:28px;min-width:28px;max-width:28px;color:transparent}.theme-switcher select option{color:#172033}.theme-switcher>i{font-size:14px}}
.sa-self-test-result{margin-top:13px;padding:12px 14px;border:1px solid var(--garis);border-radius:12px;background:#fbfdff;font-size:12px}.sa-self-test-result strong{display:block;margin-bottom:7px}.sa-self-test-result ul{margin:0;padding-left:18px}.sa-self-test-result li{margin:4px 0}.sa-self-test-result .pass{color:var(--sukses);font-weight:800}.sa-self-test-result .fail{color:var(--bahaya);font-weight:800}

/* R3.9.2 PX — harmonisasi komponen legacy agar mengikuti tema aktif. */
html[data-theme] .ajax-progress span{background:linear-gradient(90deg,var(--utama),var(--aksen),var(--utama))}
html[data-theme] .ajax-status-global{border-color:var(--tema-border);background:var(--tema-lembut);color:var(--utama-gelap);box-shadow:0 10px 30px var(--tema-shadow)}
html[data-theme] .paginasi a:hover{border-color:var(--tema-border);background:var(--tema-lembut);color:var(--utama)}
html[data-theme] .learning-path-number{background:var(--tema-lembut);color:var(--utama)}
html[data-theme] .learning-path-step.sekarang{border-color:var(--tema-border);box-shadow:0 0 0 3px var(--tema-shadow)}
html[data-theme] .smart-header{background:linear-gradient(135deg,var(--utama-gelap),var(--utama) 58%,var(--aksen))}
html[data-theme] .smart-header-icon{background:color-mix(in srgb,#fff 16%,transparent)}
html[data-theme] .smart-fab::after{border-color:color-mix(in srgb,var(--utama) 28%,transparent)}
html[data-theme] .smart-panel{border-color:var(--tema-border);box-shadow:0 28px 80px var(--tema-shadow)}
html[data-theme] .smart-msg-avatar{background:var(--tema-lembut);color:var(--utama)}
html[data-theme] .smart-input:focus{border-color:var(--tema-border);box-shadow:0 0 0 3px var(--tema-shadow)}
html[data-theme] a{accent-color:var(--utama)}
html[data-theme] input:focus,html[data-theme] select:focus,html[data-theme] textarea:focus{border-color:var(--utama)}

/* RC2.1 SA PARITY — Keuangan R3.9.2 UX/Wake/Branding */
/* =========================================================
   SMART ASSISTANT LMS — FINANCE UX (adaptasi LMS)
   ========================================================= */
.smart-assistant{position:fixed;right:24px;bottom:24px;z-index:1200;font-family:Inter,"Segoe UI",Arial,sans-serif}
.smart-fab{width:58px;height:58px;border:0;border-radius:19px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#123cbd,#2563eb 58%,#0ea5e9);box-shadow:0 16px 36px rgba(29,78,216,.32);font-size:23px;font-weight:900;transition:transform .18s ease,box-shadow .18s ease;position:relative;cursor:pointer;overflow:hidden}.smart-fab img{width:78%;height:78%;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(255,255,255,.14))}
.smart-fab:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(29,78,216,.38)}
.smart-fab::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(37,99,235,.25);border-radius:23px;animation:smartPulse 2.4s ease-out infinite}
@keyframes smartPulse{0%{transform:scale(.94);opacity:.7}70%,100%{transform:scale(1.16);opacity:0}}
.smart-panel{position:absolute;right:0;bottom:72px;width:min(390px,calc(100vw - 28px));height:min(650px,calc(100vh - 115px));background:#fff;border:1px solid #dce6f3;border-radius:24px;box-shadow:0 28px 80px rgba(15,37,87,.22);overflow:hidden;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:bottom right;transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none}
.smart-assistant.terbuka .smart-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.smart-assistant.terbuka .smart-fab{transform:rotate(3deg) scale(.94)}
.smart-header{padding:17px 18px;color:#fff;background:linear-gradient(135deg,#102b68,#1648c5 58%,#0b91da);display:flex;align-items:center;gap:12px;position:relative;overflow:hidden}
.smart-header::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-95px;background:rgba(255,255,255,.11)}
.smart-header-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);font-size:18px;flex:0 0 auto;font-weight:900;padding:5px}.smart-header-icon img{width:100%;height:100%;object-fit:contain;display:block}
.smart-header-text{min-width:0;flex:1}.smart-header-text strong{display:block;font-size:14px;line-height:1.2}.smart-header-text small{display:block;margin-top:3px;color:rgba(255,255,255,.78);font-size:10.5px}.smart-online{display:inline-flex!important;align-items:center;gap:5px}.smart-online::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.14)}.smart-online.smart-connection-checking::before{background:#facc15;box-shadow:0 0 0 3px rgba(250,204,21,.14)}.smart-online.smart-connection-error{color:#ffe4e6!important}.smart-online.smart-connection-error::before{background:#fb7185;box-shadow:0 0 0 3px rgba(251,113,133,.14)}.smart-online.smart-connection-ok::before{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.14)}
.smart-header-actions{display:flex;align-items:center;gap:4px;position:relative;z-index:2}.smart-icon-btn{width:34px;height:34px;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;color:rgba(255,255,255,.9);font-size:15px;line-height:1;cursor:pointer}.smart-icon-btn:hover,.smart-icon-btn.aktif{background:rgba(255,255,255,.15);color:#fff}.smart-icon-btn:disabled{opacity:.35;cursor:not-allowed}
.smart-messages{flex:1;overflow:auto;padding:18px 14px 12px;background:linear-gradient(180deg,#f8fbff 0,#fff 34%);scroll-behavior:smooth;overscroll-behavior:contain}.smart-messages::-webkit-scrollbar{width:6px}.smart-messages::-webkit-scrollbar-thumb{background:#d9e3f0;border-radius:99px}
.smart-msg{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}.smart-msg-user{justify-content:flex-end}.smart-msg-avatar{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,#1d4ed8,#0ea5e9);font-size:11px;font-weight:900;box-shadow:0 5px 12px rgba(37,99,235,.18);overflow:hidden;padding:2px}.smart-msg-avatar img{width:100%;height:100%;object-fit:contain;display:block}
.smart-msg-bubble{max-width:82%;padding:10px 12px;border-radius:15px;background:#fff;border:1px solid #e1e8f2;box-shadow:0 4px 12px rgba(15,37,87,.045);color:#273449;font-size:12px;line-height:1.55}.smart-msg-bubble p{margin:0;white-space:pre-line}.smart-msg-user .smart-msg-bubble{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border-color:transparent;border-bottom-right-radius:5px}.smart-msg-assistant .smart-msg-bubble{border-bottom-left-radius:5px}
.smart-msg-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid #edf1f6}.smart-msg-link{display:inline-flex;align-items:center;max-width:100%;padding:5px 8px;border-radius:8px;text-decoration:none;background:#eff6ff;color:#1d4ed8;font-size:10px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-msg-link:hover{background:#dbeafe}
.smart-suggestions{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 10px;background:#fff;border-top:1px solid #eef2f7;scrollbar-width:none}.smart-suggestions:empty{display:none}.smart-suggestions::-webkit-scrollbar{display:none}.smart-saran{flex:0 0 auto;border:1px solid #cfe0fb;border-radius:999px;background:#f7fbff;color:#2450a4;padding:6px 9px;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer}.smart-saran:hover{background:#eaf3ff;border-color:#9fc3fb}
.smart-composer{display:flex;align-items:flex-end;gap:7px;padding:10px 12px 12px;border-top:1px solid #e8edf5;background:#fff}.smart-input-wrap{position:relative;flex:1;min-width:0}.smart-input{display:block;width:100%;height:44px;max-height:100px;resize:none;border:1px solid #d5dfec;border-radius:14px;padding:11px 42px 10px 12px;background:#fbfdff;color:#172033;outline:none;font:inherit;font-size:12px;line-height:1.45}.smart-input:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.smart-mic{position:absolute;right:5px;top:5px;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#68809e;font-size:15px;cursor:pointer}.smart-mic:hover{background:#edf4ff;color:#2563eb}.smart-mic.mendengar{color:#dc2626;background:#fee2e2;animation:smartMic 1s infinite alternate}@keyframes smartMic{to{transform:scale(1.08)}}
.smart-send{width:44px;height:44px;border:0;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1d4ed8,#0ea5e9);box-shadow:0 8px 18px rgba(37,99,235,.22);font-size:16px;cursor:pointer}.smart-send:hover{filter:brightness(.97)}.smart-send:disabled{opacity:.55;cursor:wait;box-shadow:none}
.smart-footer-note{display:block;text-align:left;padding:0 12px 10px;background:#fff;color:#94a3b8;font-size:9px}.smart-auto-send-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -2px 8px;padding:8px 10px;border:1px solid #dce7f5;border-radius:12px;background:linear-gradient(180deg,#f8fbff,#f3f7fd)}
.smart-auto-send-caption{display:inline-flex;align-items:center;gap:6px;min-width:0;color:#40546f;font-size:9.5px;font-weight:800;line-height:1.25}.smart-auto-send-toggle{appearance:none;border:1px solid #cbd5e1;border-radius:999px;background:#eef2f7;color:#64748b;min-height:30px;padding:3px 5px 3px 9px;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:9px;font-weight:900;line-height:1;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;flex:0 0 auto}.smart-auto-send-toggle:hover{border-color:#9ebfea;background:#eef6ff;color:#2456a8}.smart-auto-send-toggle.aktif{border-color:#93c5fd;background:#dbeafe;color:#1d4ed8;box-shadow:0 2px 8px rgba(37,99,235,.10)}.smart-auto-send-toggle:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.smart-auto-send-label{display:inline-flex;align-items:center;white-space:nowrap;min-width:20px;justify-content:center}.smart-switch-track{width:31px;height:18px;padding:2px;border-radius:999px;background:#94a3b8;display:flex;align-items:center;transition:background .16s ease;flex:0 0 auto}.smart-switch-track>span{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.28);transform:translateX(0);transition:transform .16s ease}.smart-auto-send-toggle.aktif .smart-switch-track{background:#2563eb}.smart-auto-send-toggle.aktif .smart-switch-track>span{transform:translateX(13px)}
.smart-footer-meta{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:0 3px;text-align:center}.smart-readonly-note{flex:1 1 auto}.smart-voice-hint{color:#64748b;font-weight:700}.smart-mic.siap-kirim{color:#2563eb;background:#dbeafe}.smart-assistant.menunggu-kirim-suara .smart-input{border-color:#93c5fd;background:#f8fbff}
.smart-typing{display:flex;align-items:center;gap:4px;min-width:48px}.smart-typing span{width:5px;height:5px;border-radius:50%;background:#91a4bd;animation:smartDot 1.15s ease-in-out infinite}.smart-typing span:nth-child(2){animation-delay:.15s}.smart-typing span:nth-child(3){animation-delay:.3s}@keyframes smartDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.smart-assistant.memproses .smart-fab::after{animation-duration:.8s}
@media(max-width:620px){.smart-assistant{right:12px;bottom:14px}.smart-fab{width:54px;height:54px;border-radius:17px}.smart-panel{position:fixed;left:10px;right:10px;bottom:76px;width:auto;height:min(72vh,650px);border-radius:22px;transform-origin:bottom center}.smart-msg-bubble{max-width:86%}}
@media(max-width:420px){.smart-panel{left:0;right:0;bottom:0;height:min(84vh,720px);border-radius:22px 22px 0 0}.smart-assistant.terbuka .smart-fab{opacity:0;pointer-events:none}.smart-header{padding:15px}.smart-messages{padding-left:10px;padding-right:10px}.smart-footer-note{padding-left:10px;padding-right:10px}.smart-auto-send-row{padding:7px 9px}.smart-auto-send-caption{font-size:9px}.smart-footer-meta{justify-content:center}.smart-readonly-note{flex:1 1 100%;text-align:center}.smart-voice-hint{font-size:8.5px}}
@media print{.smart-assistant{display:none!important}}
/* Smart Assistant rilis wake word & hands-free — wake word & hands-free navigator */
.smart-wake-toggle{border:0;background:transparent;color:#475569;font:inherit;font-weight:800;padding:0;cursor:pointer}.smart-wake-toggle.aktif{color:#0f766e}.smart-wake-toggle:disabled{opacity:.55;cursor:not-allowed}.smart-wake-status{color:#64748b;font-weight:700}.smart-assistant.wake-standby .smart-fab::before{content:"";position:absolute;right:5px;top:5px;width:10px;height:10px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.17);animation:smartWakeBlink 1.8s ease-in-out infinite}@keyframes smartWakeBlink{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.12)}}
@media(max-width:420px){.smart-wake-toggle,.smart-wake-status{font-size:8.5px}}

/* =========================================================
   OFFICIAL SA BRANDING — compact loading / processing state
   ========================================================= */
.smart-processing{align-items:center}.smart-processing-avatar{animation:smartBrandBreathe 1.35s ease-in-out infinite}.smart-processing-bubble{min-width:176px;background:linear-gradient(180deg,#ffffff,#f8fbff);border-color:#cfe0fb;box-shadow:0 8px 20px rgba(37,99,235,.08)}.smart-processing-title{font-size:10px;font-weight:800;color:#1e40af;margin-bottom:3px}.smart-processing-line{display:flex;align-items:center;gap:7px;color:#64748b;font-size:10.5px}.smart-processing-text{white-space:nowrap}.smart-processing-line .smart-typing{display:inline-flex;align-items:center;gap:3px;padding:0;background:transparent;border:0;box-shadow:none}.smart-processing-line .smart-typing span{width:4px;height:4px;border-radius:99px;background:#2563eb;animation:smartDot 1.15s ease-in-out infinite}.smart-processing-line .smart-typing span:nth-child(2){animation-delay:.15s}.smart-processing-line .smart-typing span:nth-child(3){animation-delay:.3s}@keyframes smartBrandBreathe{0%,100%{transform:scale(1);filter:drop-shadow(0 3px 8px rgba(37,99,235,.10))}50%{transform:scale(1.07);filter:drop-shadow(0 5px 12px rgba(37,99,235,.24))}}

/* === RC2.2 Badge Experience ============================================== */
.badge-hero{position:relative;overflow:hidden;min-height:230px;margin-bottom:20px;padding:30px clamp(24px,4vw,48px);border-radius:24px;color:#fff;background:linear-gradient(135deg,var(--utama-gelap),var(--utama) 54%,var(--aksen));box-shadow:0 24px 54px rgba(15,37,87,.18);display:flex;align-items:center;justify-content:space-between;gap:24px}
.badge-hero::before{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:-120px;top:-190px;box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025)}
.badge-hero::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,transparent,rgba(255,220,112,.95),transparent)}
.badge-hero-copy{position:relative;z-index:2;max-width:720px}.badge-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);border-radius:999px;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.badge-hero h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.035em;margin:16px 0 10px}.badge-hero p{max-width:660px;margin:0;color:rgba(255,255,255,.82);font-size:1rem}.badge-hero-motto{margin-top:22px;display:inline-flex;gap:8px;align-items:center;font-size:.82rem;font-weight:750;color:#fff3bf}
.badge-hero-medal{position:relative;z-index:2;width:160px;height:170px;flex:0 0 160px;display:grid;place-items:center}.badge-hero-ribbon{position:absolute;top:82px;width:42px;height:82px;background:linear-gradient(180deg,#f8d36a,#c99720);clip-path:polygon(0 0,100% 0,86% 100%,50% 78%,14% 100%)}.badge-hero-ribbon.kiri{left:43px;transform:rotate(15deg)}.badge-hero-ribbon.kanan{right:43px;transform:rotate(-15deg)}.badge-hero-medal-ring{position:relative;z-index:2;width:116px;height:116px;border-radius:50%;display:grid;place-items:center;font-size:3.3rem;color:#8a5c00;background:radial-gradient(circle at 35% 28%,#fff8ce 0 13%,#ffd66d 34%,#d99d21 74%,#8f5c00 100%);border:7px solid rgba(255,255,255,.7);box-shadow:0 16px 35px rgba(0,0,0,.23),inset 0 0 0 5px rgba(126,77,0,.28)}
.badge-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 24px}.badge-stat-card{min-height:92px;background:var(--permukaan);border:1px solid var(--garis);border-radius:18px;padding:17px 19px;display:flex;align-items:center;gap:14px;box-shadow:0 10px 26px rgba(15,37,87,.055)}.badge-stat-icon{width:48px;height:48px;flex:0 0 48px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--utama) 11%,#fff);color:var(--utama);font-size:1.25rem}.badge-stat-card strong{display:block;font-size:1.45rem;line-height:1.15;letter-spacing:-.02em}.badge-stat-card small{display:block;margin-top:4px;color:var(--redup)}.badge-stat-highlight{border-color:rgba(202,151,32,.3);background:linear-gradient(135deg,var(--permukaan),#fff9e9)}.badge-stat-highlight .badge-stat-icon{color:#9a6800;background:#fff1bd}
.badge-create-panel{margin-bottom:26px}.badge-create-panel summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}.badge-create-panel summary::-webkit-details-marker{display:none}.badge-create-panel summary>span{font-size:1rem;font-weight:800;display:flex;align-items:center;gap:9px}.badge-create-panel summary>small{color:var(--redup)}.badge-create-form{margin-top:20px;padding-top:20px;border-top:1px solid var(--garis)}
.badge-section-heading{margin:28px 0 12px;display:flex;align-items:end;justify-content:space-between;gap:24px}.badge-section-heading h2,.badge-history-head h2{margin:2px 0 0}.badge-section-heading p{max-width:580px;margin:0;color:var(--redup);text-align:right}.badge-section-kicker{font-size:.68rem;font-weight:900;letter-spacing:.15em;color:var(--utama)}
.badge-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.badge-achievement-card{--badge-a:#2563eb;--badge-b:#1e40af;--badge-glow:rgba(37,99,235,.22);position:relative;overflow:hidden;min-height:425px;border-radius:24px;border:1px solid color-mix(in srgb,var(--badge-a) 24%,#dce4ef);background:linear-gradient(155deg,color-mix(in srgb,var(--badge-a) 7%,#fff),#fff 43%,color-mix(in srgb,var(--badge-a) 5%,#fff));box-shadow:0 18px 42px rgba(15,37,87,.085);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}.badge-achievement-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px var(--badge-glow)}.badge-prestasi-biru{--badge-a:#2563eb;--badge-b:#1d4ed8;--badge-glow:rgba(37,99,235,.2)}.badge-prestasi-ungu{--badge-a:#7c3aed;--badge-b:#5b21b6;--badge-glow:rgba(124,58,237,.2)}.badge-prestasi-hijau{--badge-a:#059669;--badge-b:#047857;--badge-glow:rgba(5,150,105,.19)}.badge-prestasi-marun{--badge-a:#be123c;--badge-b:#881337;--badge-glow:rgba(190,18,60,.18)}.badge-prestasi-teal{--badge-a:#0891b2;--badge-b:#0e7490;--badge-glow:rgba(8,145,178,.19)}.badge-prestasi-emas{--badge-a:#d19a24;--badge-b:#9a6500;--badge-glow:rgba(209,154,36,.25);background:linear-gradient(155deg,#fff9e8,#fff 43%,#fff6d9)}
.badge-card-shine{position:absolute;width:190px;height:440px;top:-160px;right:-95px;transform:rotate(28deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);opacity:.36;pointer-events:none}.badge-medal-wrap{height:145px;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,var(--badge-b),var(--badge-a));border-bottom:1px solid rgba(255,255,255,.25)}.badge-medal-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.19),transparent 38%),linear-gradient(120deg,transparent 40%,rgba(255,255,255,.08) 41%,transparent 63%)}.badge-ribbon{position:absolute;top:74px;width:38px;height:70px;background:linear-gradient(180deg,#f6d56e,#bd8611);clip-path:polygon(0 0,100% 0,85% 100%,50% 78%,15% 100%)}.badge-ribbon-left{left:calc(50% - 42px);transform:rotate(12deg)}.badge-ribbon-right{right:calc(50% - 42px);transform:rotate(-12deg)}.badge-medal{z-index:2;width:96px;height:96px;border-radius:50%;padding:6px;background:linear-gradient(145deg,#fff4b8,#c99422);box-shadow:0 12px 24px rgba(0,0,0,.22)}.badge-medal-inner{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 27%,#fff 0 8%,#ffe8a3 26%,#e5ae39 68%,#a36a00 100%);border:3px solid rgba(255,255,255,.76);color:#694500;font-size:2rem;text-shadow:0 1px rgba(255,255,255,.5)}.badge-glyph{font-size:2rem;font-weight:900}.badge-achievement-body{padding:20px 20px 18px;flex:1}.badge-code-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.badge-code-pill,.badge-earned-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:.67rem;font-weight:850;letter-spacing:.04em}.badge-code-pill{background:color-mix(in srgb,var(--badge-a) 10%,#fff);color:var(--badge-b);border:1px solid color-mix(in srgb,var(--badge-a) 18%,#fff)}.badge-earned-pill.earned{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.badge-earned-pill.locked{background:#f1f5f9;color:#64748b;border:1px solid #dbe3ef}.badge-achievement-body h3{font-size:1.28rem;margin:12px 0 6px}.badge-achievement-body p{margin:0;color:var(--redup);font-size:.9rem;min-height:48px}.badge-achievement-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.badge-achievement-meta span{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:9px;background:#f8fafc;border:1px solid #e5eaf1;color:#566277;font-size:.74rem;font-weight:650}.badge-belum-diraih{filter:saturate(.35);opacity:.78}.badge-belum-diraih:hover{filter:saturate(.7);opacity:.95}
.badge-award-form{padding:16px 18px 18px;border-top:1px solid color-mix(in srgb,var(--badge-a) 15%,#e5e7eb);background:color-mix(in srgb,var(--badge-a) 3.5%,#fff);display:grid;gap:9px}.badge-award-title{display:flex;align-items:center;gap:10px;color:var(--badge-b)}.badge-award-title>i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--badge-a) 12%,#fff)}.badge-award-title span{display:grid}.badge-award-title small{font-size:.7rem;color:var(--redup);font-weight:500}.badge-award-form select,.badge-award-form input{width:100%;min-height:40px;border:1px solid #d6dfeb;border-radius:10px;background:#fff;padding:8px 10px;color:var(--teks)}.badge-award-button{background:linear-gradient(135deg,var(--badge-b),var(--badge-a));color:#fff;border:0}
.badge-history-card{overflow:hidden}.badge-history-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}.badge-history-count{padding:6px 10px;border-radius:999px;background:#f1f5f9;color:#566277;font-size:.74rem;font-weight:800}.badge-history-table table{min-width:920px}.badge-history-table thead th{background:#f8fafc}.badge-table-award{display:flex;align-items:center;gap:10px}.badge-table-icon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;color:#7a5200;background:linear-gradient(145deg,#fff4b0,#d5a02e);border:2px solid #ffe498}.badge-table-award div{display:grid}.badge-table-award small{color:var(--redup)}.badge-student-cell{display:flex;align-items:center;gap:9px}.badge-reason{display:block;max-width:360px;white-space:normal;line-height:1.45}.badge-date{white-space:nowrap;color:#566277}.badge-date i{margin-right:5px;color:var(--utama)}
@media(max-width:900px){.badge-stat-grid{grid-template-columns:1fr 1fr}.badge-stat-highlight{grid-column:1/-1}.badge-section-heading{align-items:start;flex-direction:column;gap:6px}.badge-section-heading p{text-align:left}.badge-hero-medal{transform:scale(.88);transform-origin:right center}}
@media(max-width:640px){.badge-hero{min-height:auto;padding:26px 22px}.badge-hero-medal{display:none}.badge-stat-grid{grid-template-columns:1fr}.badge-stat-highlight{grid-column:auto}.badge-gallery{grid-template-columns:1fr}.badge-history-head{align-items:start;flex-direction:column}.badge-create-panel summary>small{display:none}}
@media print{.badge-hero{color:#111;background:#fff!important;box-shadow:none;border:1px solid #ddd}.badge-hero-medal,.badge-create-panel,.badge-award-form,.badge-card-shine{display:none!important}.badge-achievement-card{break-inside:avoid;box-shadow:none}.badge-belum-diraih{display:none}}

/* =========================================================
   RC2.4 — CERTIFICATE PRESTIGE + UNIVERSAL REPORT SETTINGS
   ========================================================= */
.report-setting-panel{margin-top:24px;padding-top:22px;border-top:1px solid var(--garis,#e5e7eb)}
.report-line-setting{margin-top:4px}.report-line-control{display:grid;grid-template-columns:minmax(0,1fr) 78px auto auto auto;gap:8px;align-items:center}.report-line-control>label{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--garis,#dbe3ed);border-radius:9px;background:var(--permukaan,#fff);cursor:pointer}.report-line-control>label input{position:absolute;opacity:0;pointer-events:none}.report-line-control>label:has(input:checked){background:color-mix(in srgb,var(--utama,#2563eb) 10%,#fff);border-color:color-mix(in srgb,var(--utama,#2563eb) 35%,#dbe3ed);color:var(--utama,#2563eb)}.report-size-input{text-align:center}
.report-header-preview{position:relative;margin:18px 0 22px;border:1px dashed #aebbd0;border-radius:16px;padding:18px 24px 16px;background:#fff;color:#111;text-align:center;overflow:hidden}.report-header-preview>small{display:block;margin-bottom:10px;color:#7b8798;font-size:9px;font-weight:800;letter-spacing:.12em}.report-preview-logo{position:absolute;left:18px;top:48px;width:58px;height:58px;border:1px solid #cbd5e1;border-radius:10px;display:grid;place-items:center;font-size:9px;font-weight:800;color:#64748b;background:#f8fafc}.report-preview-lines{max-width:760px;margin:0 auto;padding-bottom:10px;border-bottom:4px double #111}.report-preview-lines>div{line-height:1.16;margin:2px 0}.report-signature-config{margin-top:10px}.report-signature-config>h3{margin-bottom:4px}.report-signer-card{border:1px solid var(--garis,#dbe3ed);border-radius:14px;padding:14px;background:color-mix(in srgb,var(--permukaan,#fff) 96%,var(--utama,#2563eb))}.report-signer-card legend{padding:0 7px;font-weight:800;color:var(--utama,#2563eb)}.report-signer-card label{display:grid;gap:6px;margin-bottom:10px}.report-signer-card .report-enable{display:flex;align-items:center;gap:7px;font-weight:800}.report-signer-card .report-enable input{width:auto}.grid-tiga{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.certificate-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:190px;margin-bottom:20px;padding:30px 34px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#0f2853 0%,#173f82 58%,#9b6e15 145%);box-shadow:0 20px 48px rgba(15,40,83,.18)}.certificate-hero::before{content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-140px;top:-180px;box-shadow:0 0 0 44px rgba(255,255,255,.035),0 0 0 88px rgba(255,255,255,.025)}.certificate-hero>div{position:relative;z-index:2}.certificate-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.09);font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.certificate-hero h1{margin:13px 0 8px;font-size:clamp(2rem,4vw,3rem);line-height:1.05}.certificate-hero p{max-width:760px;margin:0;color:rgba(255,255,255,.82);line-height:1.65}.certificate-hero-seal{width:124px;height:124px;flex:0 0 124px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:5px;color:#7a5200;background:radial-gradient(circle at 35% 28%,#fffbe1,#f3d575 45%,#c18a1d 100%);border:7px solid rgba(255,255,255,.7);box-shadow:0 16px 32px rgba(0,0,0,.22),inset 0 0 0 4px rgba(110,72,0,.22);transform:rotate(-6deg)}.certificate-hero-seal i{font-size:2rem}.certificate-hero-seal strong{font-size:.72rem;letter-spacing:.08em}.certificate-submit summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px}.certificate-submit summary::-webkit-details-marker{display:none}.certificate-submit summary strong{display:flex;align-items:center;gap:8px}.certificate-submit summary small{color:var(--redup,#64748b)}.certificate-submit form{margin-top:18px;padding-top:18px;border-top:1px solid var(--garis,#e5e7eb)}.certificate-list-card table{min-width:980px}.certificate-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.certificate-actions form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.certificate-actions form select,.certificate-actions form input{min-height:34px;border:1px solid var(--garis,#dbe3ed);border-radius:8px;padding:6px 8px;background:#fff}.certificate-list-card td strong+small{display:block;margin-top:3px;color:var(--redup,#64748b)}
@media(max-width:920px){.grid-tiga{grid-template-columns:1fr}.report-line-control{grid-template-columns:minmax(0,1fr) 70px repeat(3,36px)}.certificate-hero-seal{transform:scale(.82) rotate(-6deg)}}
@media(max-width:640px){.certificate-hero{padding:24px 22px;min-height:auto}.certificate-hero-seal{display:none}.certificate-submit summary small{display:none}.report-line-control{grid-template-columns:1fr 70px;}.report-line-control>label{grid-row:2}.report-preview-logo{display:none}}

/* RC2.5 - Dedicated report settings + Reporting Center */
.report-settings-page{display:grid;gap:0}.report-setting-panel{overflow:visible}.check-line{display:flex!important;align-items:center;gap:9px;font-weight:600}.check-line input{width:auto!important;margin:0}.report-line-control{display:grid;grid-template-columns:minmax(240px,1fr) 78px auto auto auto;gap:8px;align-items:center}.report-line-control>label{display:flex;align-items:center;justify-content:center;min-width:40px;height:42px;border:1px solid var(--garis,#dce4ef);border-radius:10px;background:var(--permukaan,#fff);cursor:pointer}.report-line-control>label input{width:auto;margin-right:5px}.report-size-input{min-width:0}.report-preview-paper{max-width:900px;margin:16px auto 0;padding:22px 28px 30px;background:#fff;border:1px solid #d8e0ea;border-radius:14px;box-shadow:0 14px 34px rgba(15,23,42,.08);color:#111827}.report-preview-head{display:grid;grid-template-columns:92px 1fr 92px;align-items:center;gap:14px}.report-preview-logo{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:12px;background:#f8fafc;border:1px dashed #cbd5e1;color:#94a3b8;font-size:12px}.report-preview-logo img{max-width:76px;max-height:76px;object-fit:contain}.report-preview-lines{text-align:center}.report-preview-lines>div{line-height:1.2;margin:2px 0}.report-preview-rule{margin-top:10px;border-top:4px double #111827}.report-preview-title{text-align:center;margin-top:18px;font-weight:800;letter-spacing:.06em}.report-sign-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.report-sign-card{padding:16px;border:1px solid var(--garis,#dce4ef);border-radius:14px;background:color-mix(in srgb,var(--permukaan,#fff) 94%,var(--utama,#2563eb));display:grid;gap:11px}.report-sign-card label{display:grid;gap:6px;font-size:.88rem}.report-sign-card .check-line{display:flex}.sticky-save-bar{position:sticky;bottom:12px;z-index:5;margin-top:18px;padding:13px 16px;border:1px solid var(--garis,#dce4ef);border-radius:14px;background:color-mix(in srgb,var(--permukaan,#fff) 94%,transparent);backdrop-filter:blur(10px);box-shadow:0 12px 28px rgba(15,23,42,.12);display:flex;align-items:center;justify-content:space-between;gap:16px}.sticky-save-bar span{font-size:.84rem;color:var(--redup,#64748b)}
.report-center-hero{border-radius:22px;padding:22px 26px;background:linear-gradient(135deg,var(--utama,#2563eb),color-mix(in srgb,var(--utama,#2563eb) 64%,#111827));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 18px 36px color-mix(in srgb,var(--utama,#2563eb) 20%,transparent)}.report-center-hero>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center}.report-center-hero>div:first-child>i{grid-row:1/3;font-size:2.2rem}.report-center-hero strong{font-size:1.1rem}.report-center-hero span{font-size:.82rem;opacity:.82}.report-center-stamp{border:1px solid rgba(255,255,255,.5);border-radius:50%;width:82px;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;letter-spacing:.08em;text-align:center}.report-center-stamp small{font-size:.52rem;letter-spacing:.04em}.report-center-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}.report-center-card{position:relative;display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:15px;padding:19px;border:1px solid var(--garis,#dce4ef);border-radius:17px;background:var(--permukaan,#fff);color:var(--teks,#111827);text-decoration:none;box-shadow:0 8px 22px rgba(15,23,42,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.report-center-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,23,42,.09);border-color:color-mix(in srgb,var(--utama,#2563eb) 45%,var(--garis,#dce4ef))}.report-center-icon{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--utama,#2563eb) 12%,#fff);color:var(--utama,#2563eb);font-size:1.35rem}.report-center-card h2{font-size:1rem;margin:0 0 5px}.report-center-card p{font-size:.82rem;line-height:1.55;color:var(--redup,#64748b);margin:0 0 6px}.report-center-card small{font-size:.72rem;color:var(--redup,#64748b)}.report-center-arrow{color:var(--redup,#94a3b8)}.report-filter-bar{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.report-filter-bar label{display:grid;gap:5px;min-width:170px}.report-filter-bar label span{font-size:.78rem;font-weight:700;color:var(--redup,#64748b)}.report-data-table table{min-width:880px}.report-data-table td{vertical-align:top}.report-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media(max-width:900px){.report-sign-grid{grid-template-columns:1fr}.report-line-control{grid-template-columns:1fr 72px repeat(3,42px)}.report-preview-head{grid-template-columns:70px 1fr 70px}.report-preview-logo{width:64px;height:64px}.sticky-save-bar{position:static;align-items:stretch;flex-direction:column}.report-center-grid{grid-template-columns:1fr}}@media(max-width:640px){.report-line-control{grid-template-columns:1fr 68px}.report-line-control>label{grid-row:auto}.report-preview-paper{padding:16px}.report-preview-head{grid-template-columns:1fr}.report-preview-logo{margin:auto}.report-preview-spacer{display:none}.report-center-hero{align-items:flex-start}.report-center-stamp{display:none}.report-center-card{grid-template-columns:48px 1fr}.report-center-icon{width:48px;height:48px}.report-center-arrow{display:none}}

.report-settings-callout{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;border:1px solid color-mix(in srgb,var(--utama,#2563eb) 24%,var(--garis,#dce4ef));border-radius:14px;background:color-mix(in srgb,var(--utama,#2563eb) 6%,var(--permukaan,#fff))}.report-settings-callout strong{display:block;margin-bottom:3px}.report-settings-callout p{margin:0}.report-settings-callout .tombol{flex:0 0 auto}@media(max-width:720px){.report-settings-callout{align-items:stretch;flex-direction:column}}

/* RC3.5.2 — Kop Preview Logo UX Fix */
.report-settings-preview-logo[hidden]{display:none!important}
.report-settings-preview-logo{position:static!important;left:auto!important;top:auto!important;width:84px;height:84px;border-radius:12px;background:#f8fafc;border:1px solid #d9e2ee;color:#64748b;display:flex;align-items:center;justify-content:center;text-align:center;padding:7px;font-size:11px;line-height:1.3}
.report-settings-preview-logo img{display:block;max-width:72px;max-height:72px;object-fit:contain}
.report-settings-preview-logo small{font-size:10px;line-height:1.35;color:#64748b}
.report-preview-head.report-preview-no-logo .report-preview-lines{grid-column:2}
@media(max-width:900px){.report-settings-preview-logo{width:64px;height:64px}.report-settings-preview-logo img{max-width:54px;max-height:54px}}
@media(max-width:640px){.report-settings-preview-logo{margin:auto}.report-settings-preview-logo[hidden]{display:none!important}.report-preview-head.report-preview-no-logo .report-preview-lines{grid-column:auto}}

/* =========================================================
   RC3.7 — Universal Page Header Alignment Fix
   Semua header halaman: ikon kiri -> judul/deskripsi rata kiri -> aksi kanan.
   ========================================================= */
.kepala-konten{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    justify-content:stretch!important;
    column-gap:20px!important;
    row-gap:10px!important;
    padding:0 0 0 62px!important;
    min-height:50px;
    text-align:left!important;
}
.kepala-konten>div:first-child{
    min-width:0;
    max-width:100%;
    width:auto;
    justify-self:start;
    align-self:start;
    text-align:left!important;
}
.kepala-konten>div:first-child h1,
.kepala-konten>div:first-child p,
.kepala-konten>div:first-child .pill{
    text-align:left!important;
}
.kepala-konten>:not(:first-child){
    grid-column:2;
    justify-self:end;
    align-self:center;
    max-width:100%;
}
.kepala-konten>.aksi-kepala,
.kepala-konten>.aksi-baris{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    width:auto;
}
.kepala-konten>form:not(:first-child){
    width:auto;
}

/* Pusat Data Excel memakai wrapper berbeda, tetapi mengikuti pola visual yang sama. */
.content-header-panel{
    display:block!important;
    padding:0 0 0 62px!important;
    min-height:50px;
    text-align:left!important;
}
.content-header-panel>.judul-dengan-aksi{
    display:flex!important;
    width:100%;
    justify-content:space-between!important;
    align-items:flex-start!important;
    gap:20px;
    text-align:left!important;
}
.content-header-panel>.judul-dengan-aksi>div:first-child{
    min-width:0;
    text-align:left!important;
}
.content-header-panel h1,
.content-header-panel p,
.content-header-panel .pill,
.content-header-panel .back-link{
    text-align:left!important;
}

@media(max-width:760px){
    .kepala-konten{
        grid-template-columns:minmax(0,1fr)!important;
        padding-left:56px!important;
        column-gap:0!important;
        row-gap:10px!important;
    }
    .kepala-konten>:not(:first-child){
        grid-column:1;
        justify-self:start;
        align-self:start;
    }
    .kepala-konten>.aksi-kepala,
    .kepala-konten>.aksi-baris,
    .kepala-konten>form:not(:first-child){
        width:100%;
        justify-content:flex-start;
    }
    .content-header-panel{
        padding-left:56px!important;
    }
    .content-header-panel>.judul-dengan-aksi{
        flex-direction:column;
        align-items:flex-start!important;
        gap:10px;
    }
    .content-header-panel>.judul-dengan-aksi>.aksi-baris,
    .content-header-panel>.judul-dengan-aksi>a.tombol{
        width:100%;
        justify-content:flex-start;
    }
}

/* =========================================================
   SMK SATYA PRAJA 2 PETARUKAN — LOGIN PHOTO CLARITY HOTFIX
   Membuat foto gedung lebih terang/jelas tanpa mengurangi
   keterbacaan teks putih pada sisi kiri.
   ========================================================= */
.login-v2 .login-foto-sekolah{
    filter: brightness(1.13) contrast(1.04) saturate(1.08);
}

.login-v2 .login-lapisan{
    background:
        linear-gradient(90deg,
            rgba(4,21,54,.54) 0%,
            rgba(5,34,80,.34) 42%,
            rgba(5,30,72,.10) 76%,
            rgba(4,18,45,.03) 100%),
        linear-gradient(180deg,
            rgba(4,20,50,.08) 0%,
            rgba(3,21,53,.24) 70%,
            rgba(3,21,53,.48) 100%);
}

/* Sedikit bayangan teks agar tetap terbaca pada foto yang lebih terang */
.login-v2-message h1,
.login-v2-message .login-v2-headline,
.login-v2-message p,
.login-v2-message .login-badge{
    text-shadow: 0 2px 10px rgba(0,0,0,.38);
}

/* Card fitur dibuat sedikit lebih transparan agar foto tetap terlihat */
.login-v2-features{
    background: rgba(8,33,74,.38);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

@media(max-width:900px){
    .login-v2 .login-lapisan{
        background:
            linear-gradient(180deg,
                rgba(4,21,54,.18) 0%,
                rgba(4,21,54,.30) 58%,
                rgba(3,21,53,.54) 100%);
    }
}