:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --muted: #6b7280;
    --border: #dfe5ee;
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #0284c7;
    --shadow: 0 14px 35px rgba(15, 23, 42, .08);
    --radius: 18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%}
.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#111827 0%,#1f2937 100%);color:#fff;padding:24px 18px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:18px}
.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#818cf8,#4f46e5);color:#fff;font-weight:800;letter-spacing:.5px;box-shadow:0 10px 24px rgba(79,70,229,.35)}
.brand h1{font-size:16px;margin:0}.brand small{display:block;color:#cbd5e1;margin-top:2px}
.nav-group{margin:20px 0}.nav-label{text-transform:uppercase;letter-spacing:.12em;color:#94a3b8;font-size:10px;font-weight:700;padding:0 12px;margin-bottom:8px}
.nav-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;color:#dbe3ef;margin:4px 0;font-size:14px;transition:.2s ease}
.nav-link:hover,.nav-link.active{background:rgba(99,102,241,.18);color:#fff}.nav-link svg{width:18px;height:18px;flex:0 0 auto}
.main{min-width:0}.topbar{height:76px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:20}
.topbar-title h2{font-size:20px;margin:0}.topbar-title p{font-size:12px;color:var(--muted);margin:3px 0 0}.user-menu{display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e0e7ff;color:#3730a3;font-weight:800}.user-meta{line-height:1.2}.user-meta strong{display:block;font-size:13px}.user-meta span{font-size:11px;color:var(--muted)}
.content{padding:30px;max-width:1600px;margin:0 auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.page-head h1{font-size:28px;line-height:1.15;margin:0}.page-head p{color:var(--muted);margin:7px 0 0;max-width:760px}.actions{display:flex;gap:10px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.card + .card{margin-top:18px}.card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card-title h3{font-size:17px;margin:0}.card-title p{font-size:12px;color:var(--muted);margin:4px 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.stat-card .label{font-size:12px;color:var(--muted)}.stat-card .value{font-size:30px;font-weight:800;margin:7px 0 3px;letter-spacing:-.03em}.stat-card .hint{font-size:11px;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* Form controls v1.0.2: lebih besar, nyaman, dan konsisten di seluruh portal */
.form-stack{display:grid;gap:20px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
label{display:grid;gap:9px;font-size:14px;font-weight:700;color:#334155;line-height:1.35}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea{
    width:100%;
    min-height:52px;
    border:1.5px solid #cbd5e1;
    background:#fff;
    border-radius:14px;
    padding:13px 16px;
    color:#111827;
    font-size:15px;
    line-height:1.4;
    outline:none;
    box-shadow:0 2px 7px rgba(15,23,42,.045),inset 0 1px 0 rgba(255,255,255,.85);
    transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover{
    border-color:#a5b4fc;
    background:#fefeff;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
    border-color:#6366f1;
    background:#fff;
    box-shadow:0 0 0 4px rgba(99,102,241,.14),0 8px 22px rgba(79,70,229,.08);
}

input::placeholder,
textarea::placeholder{
    color:#94a3b8;
    opacity:1;
}

select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:46px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2364758b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:20px;
}

textarea{
    min-height:132px;
    resize:vertical;
    padding-top:14px;
}

input[type="file"]{
    min-height:56px;
    padding:7px 9px;
    color:#475569;
    cursor:pointer;
}

input[type="file"]::file-selector-button{
    min-height:40px;
    margin-right:12px;
    border:0;
    border-radius:10px;
    padding:9px 14px;
    background:#eef2ff;
    color:#4338ca;
    font-weight:750;
    cursor:pointer;
    transition:.18s ease;
}

input[type="file"]::file-selector-button:hover{
    background:#e0e7ff;
}

input[type="checkbox"],
input[type="radio"]{
    width:19px;
    height:19px;
    min-width:19px;
    margin:0;
    accent-color:var(--primary);
    cursor:pointer;
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly]{
    background:#f1f5f9;
    color:#64748b;
    cursor:not-allowed;
    box-shadow:none;
}

.help{font-size:12px;color:var(--muted);font-weight:500}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#64748b;margin-top:4px;padding-top:10px;border-top:1px dashed var(--border)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:11px;padding:10px 15px;font-weight:700;font-size:13px;cursor:pointer;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:#e2e8f0;color:#334155}.btn-danger{background:#fee2e2;color:#b91c1c}.btn-success{background:#d1fae5;color:#047857}.btn-outline{background:#fff;color:#334155;border:1px solid var(--border)}.btn-sm{padding:7px 10px;border-radius:9px;font-size:12px}.btn-block{width:100%}.btn svg{width:16px;height:16px}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:760px;background:#fff}th,td{padding:13px 14px;border-bottom:1px solid #edf1f6;text-align:left;font-size:13px;vertical-align:top}th{background:#f8fafc;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:1}tr:last-child td{border-bottom:none}tbody tr:hover{background:#fbfdff}.numeric{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.badge-success{background:#d1fae5;color:#047857}.badge-warning{background:#fef3c7;color:#92400e}.badge-danger{background:#fee2e2;color:#b91c1c}.badge-info{background:#e0f2fe;color:#0369a1}.badge-muted{background:#e5e7eb;color:#4b5563}
.alert{padding:13px 15px;border-radius:12px;margin-bottom:14px;font-size:13px;border:1px solid transparent}.alert-success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}.alert-danger{background:#fef2f2;color:#991b1b;border-color:#fecaca}.alert-warning{background:#fffbeb;color:#92400e;border-color:#fde68a}.alert-info{background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.empty{padding:38px 18px;text-align:center;color:var(--muted)}.empty strong{display:block;color:#334155;margin-bottom:5px}.muted{color:var(--muted)}.text-sm{font-size:12px}.text-right{text-align:right}.nowrap{white-space:nowrap}.progress{height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6366f1,#8b5cf6)}
.login-page,.auth-body{min-height:100vh;background:radial-gradient(circle at top left,#dbeafe 0,transparent 38%),radial-gradient(circle at bottom right,#ede9fe 0,transparent 38%),#f8fafc}.login-wrap,.install-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card,.install-card{width:min(100%,480px);background:rgba(255,255,255,.94);border:1px solid rgba(203,213,225,.9);border-radius:24px;box-shadow:0 30px 80px rgba(15,23,42,.15);padding:30px}.install-card{width:min(100%,720px)}.login-card h1,.install-card h1{font-size:25px;margin:18px 0 6px}.login-card .brand-mark,.install-card .brand-mark{margin:0 auto}.login-card > p,.install-card > p{text-align:center}.login-card h1,.install-card h1{text-align:center}
.test-hero{background:linear-gradient(135deg,#312e81,#4f46e5 55%,#7c3aed);color:#fff;border-radius:22px;padding:26px;box-shadow:0 20px 50px rgba(79,70,229,.25);margin-bottom:20px}.test-hero h1{margin:0 0 7px;font-size:26px}.test-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.test-meta span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);padding:7px 10px;border-radius:999px;font-size:12px}.chart-box{position:relative;min-height:310px}.membership-bars{display:grid;gap:9px}.membership-row{display:grid;grid-template-columns:145px 1fr 45px;align-items:center;gap:10px;font-size:12px}.membership-row .bar{height:10px;background:#e5e7eb;border-radius:99px;overflow:hidden}.membership-row .bar span{display:block;height:100%;background:#6366f1}
.kpi-list{display:grid;gap:10px}.kpi-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf1f6}.kpi-item:last-child{border-bottom:none}.kpi-item span{color:var(--muted);font-size:13px}.kpi-item strong{font-size:14px}
.mobile-toggle{display:none}.hide-desktop{display:none}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell{grid-template-columns:230px 1fr}}
@media(max-width:850px){.app-shell{display:block}.sidebar{position:fixed;left:-290px;z-index:50;width:270px;transition:.2s ease}.sidebar.open{left:0}.topbar{padding:0 18px}.mobile-toggle{display:inline-flex}.content{padding:20px}.form-grid,.form-grid-3,.grid-2,.grid-3{grid-template-columns:1fr}.page-head{display:block}.page-head .actions{margin-top:14px}.user-meta{display:none}.hide-desktop{display:block}}
@media(max-width:560px){.stats-grid,.grid-4{grid-template-columns:1fr}.content{padding:16px}.card{padding:17px}.topbar-title p{display:none}.page-head h1{font-size:23px}.login-card,.install-card{padding:22px}.membership-row{grid-template-columns:115px 1fr 38px}}
@media print{.sidebar,.topbar,.actions,.no-print,.btn{display:none!important}.app-shell{display:block}.content{padding:0;max-width:none}.card,.stat-card{box-shadow:none}.main{width:100%}body{background:#fff}}

/* v1.0.7 - Pemilih banyak kelas */
.class-picker-fieldset{
    margin:0;
    padding:20px;
    border:1.5px solid #dbe3ef;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
    min-width:0;
}
.class-picker-title{
    padding:0;
    font-size:15px;
    font-weight:800;
    color:#1e293b;
}
.class-picker-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.class-picker-actions{display:flex;gap:8px;flex-wrap:wrap}
.class-checkbox-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.class-checkbox-card{
    position:relative;
    display:flex;
    grid-template-columns:none;
    align-items:center;
    gap:12px;
    min-height:76px;
    padding:14px 46px 14px 14px;
    border:1.5px solid #d7dfec;
    border-radius:15px;
    background:#fff;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}
.class-checkbox-card:hover{
    transform:translateY(-1px);
    border-color:#a5b4fc;
    box-shadow:0 9px 22px rgba(79,70,229,.10);
}
.class-checkbox-card:has(input:checked){
    border-color:#6366f1;
    background:linear-gradient(135deg,#eef2ff,#f5f3ff);
    box-shadow:0 0 0 3px rgba(99,102,241,.10),0 10px 24px rgba(79,70,229,.10);
}
.class-checkbox-card input[type="checkbox"]{
    width:21px;
    height:21px;
    min-width:21px;
}
.class-checkbox-content{display:grid;gap:3px;min-width:0}
.class-checkbox-content strong{font-size:15px;color:#172033}
.class-checkbox-content small{font-size:12px;color:#64748b;font-weight:600}
.class-check-mark{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%) scale(.7);
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border-radius:999px;
    background:#4f46e5;
    color:#fff;
    opacity:0;
    transition:.18s ease;
}
.class-checkbox-card:has(input:checked) .class-check-mark{opacity:1;transform:translateY(-50%) scale(1)}
.class-selection-summary{
    margin-top:14px;
    padding:11px 13px;
    border-radius:12px;
    background:#f1f5f9;
    color:#475569;
    font-size:13px;
    font-weight:650;
}
.inline-check-label{
    display:flex;
    grid-template-columns:none;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:11px 14px;
    border:1px solid #dbe3ef;
    border-radius:13px;
    background:#f8fafc;
}
@media(max-width:1100px){.class-checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
    .class-picker-head{display:block}
    .class-picker-actions{margin-top:12px}
    .class-checkbox-grid{grid-template-columns:1fr}
    .class-picker-fieldset{padding:15px}
}

/* =========================================================
   v1.0.8 — Perapihan posisi teks pada seluruh kontrol form
   ========================================================= */

/* Teks input tidak lagi mewarisi font tebal dari elemen label. */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    box-sizing: border-box;
    font-weight: 550;
    letter-spacing: 0;
}

/* Input satu baris dan dropdown: tinggi pasti agar teks berada di tengah. */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
    height: 58px;
    min-height: 58px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 18px;
    line-height: normal;
    vertical-align: middle;
}

select {
    padding-right: 48px;
    background-position: right 16px center;
}

/* Area teks: jarak atas, kanan, bawah, dan kiri dibuat seimbang. */
textarea {
    min-height: 164px;
    padding: 17px 18px;
    line-height: 1.6;
    font-weight: 500;
    overflow-y: auto;
}

/* Placeholder tetap terbaca tetapi tidak terlalu menempel/tebal. */
input::placeholder,
textarea::placeholder {
    font-weight: 500;
    line-height: inherit;
}

/* Input file tetap besar, tetapi posisi teks dan tombolnya seimbang. */
input[type="file"] {
    min-height: 60px;
    padding: 8px 10px;
    line-height: 1.4;
    font-weight: 500;
}

input[type="file"]::file-selector-button {
    min-height: 42px;
    padding: 10px 16px;
}

/* Kontrol kecil dalam tabel tetap proporsional dan tidak melebar berlebihan. */
.table-wrap input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.table-wrap select {
    height: 48px;
    min-height: 48px;
    padding-left: 14px;
    font-size: 14px;
}

/* Tampilan ponsel tetap nyaman disentuh. */
@media (max-width: 560px) {
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select {
        height: 56px;
        min-height: 56px;
        padding-left: 16px;
    }

    textarea {
        min-height: 148px;
        padding: 15px 16px;
    }
}

/* =========================================================
   v1.0.9 — Hotfix padding teks seluruh kontrol form
   Dibuat lebih spesifik agar tidak ditimpa Tailwind Preflight.
   ========================================================= */

body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body select,
body textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    color: #172033 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Input satu baris: teks benar-benar berada di tengah vertikal. */
body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    line-height: 58px !important;
}

/* Dropdown: ruang kiri dan kanan konsisten. */
body select {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 50px 0 18px !important;
    line-height: 58px !important;
    background-position: right 16px center !important;
}

/* Textarea: teks tidak lagi menempel pada garis atas dan kiri. */
body textarea {
    display: block !important;
    min-height: 164px !important;
    padding: 16px 18px !important;
    line-height: 1.55 !important;
    text-indent: 0 !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    resize: vertical !important;
}

body input::placeholder,
body textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* Input file tetap proporsional. */
body input[type="file"] {
    min-height: 60px !important;
    padding: 8px 10px !important;
    line-height: 1.4 !important;
}

/* Kontrol pada tabel dibuat sedikit lebih ringkas. */
body .table-wrap input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body .table-wrap select {
    height: 48px !important;
    min-height: 48px !important;
    padding-left: 14px !important;
    font-size: 14px !important;
    line-height: 48px !important;
}

@media (max-width: 560px) {
    body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    body select {
        height: 56px !important;
        min-height: 56px !important;
        line-height: 56px !important;
    }

    body textarea {
        min-height: 148px !important;
        padding: 15px 16px !important;
    }
}


/* =========================================================
   v1.0.10 — Tombol kembali global di kiri atas dan kiri bawah
   ========================================================= */
.global-back-row {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.global-back-row-top {
    margin: 0 0 20px;
}

.global-back-row-bottom {
    margin: 26px 0 2px;
}

.global-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 16px 10px 11px;
    border: 1px solid #d8e0ec;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    color: #334155;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
    box-shadow: 0 7px 20px rgba(15,23,42,.07);
    transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, background .18s ease;
}

.global-back-button:hover {
    transform: translateX(-2px);
    border-color: #a5b4fc;
    background: #f8faff;
    color: #4338ca;
    box-shadow: 0 10px 24px rgba(79,70,229,.11);
}

.global-back-button:focus-visible {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99,102,241,.14), 0 10px 24px rgba(79,70,229,.11);
}

.global-back-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 560px) {
    .global-back-row-top { margin-bottom: 16px; }
    .global-back-row-bottom { margin-top: 20px; }
    .global-back-button {
        min-height: 42px;
        padding: 9px 14px 9px 10px;
        font-size: 13px;
    }
}