/* ============================================================
   IMPORT FONT & IKON
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

/* ============================================================
   DESIGN TOKENS (ubah warna/ukuran cukup dari sini)
   ============================================================ */
:root {
    color-scheme: light dark;   /* scrollbar & kontrol bawaan ikut mode gelap */

    /* Warna utama (violet) */
    --primary: #8b5cf6;
    --primary-dark: #6d28d9;
    --primary-text: #6d28d9;          /* untuk teks/judul ungu di atas putih */
    --primary-soft: #f5f3ff;
    --primary-ring: rgba(139, 92, 246, 0.28);
    --focus: #4c1d95;                 /* garis fokus keyboard, 10.9:1 terhadap putih */

    /* Warna aksen (dipakai ikon & teks) */
    --c-violet: #7c3aed;
    --c-blue:   #2563eb;
    --c-pink:   #db2777;
    --c-amber:  #b45309;
    --c-green:  #15803d;
    --c-red:    #dc2626;
    --icon-color: #111111;

    /* Latar lembut untuk chip ikon (pasangan dari warna aksen di atas) */
    --c-violet-soft: #ede9fe;
    --c-blue-soft:   #dbeafe;
    --c-pink-soft:   #fce7f3;
    --c-amber-soft:  #fef3c7;

    /* Gradasi: semua cukup gelap agar teks putih lolos kontras 4.5:1 */
    --grad-bg:     linear-gradient(135deg, #5562d4 0%, #764ba2 100%);
    --grad-violet-deep: linear-gradient(150deg, #6d28d9 0%, #4c1d95 100%);
    --grad-violet: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    --grad-pink:   linear-gradient(135deg, #db2777 0%, #9d174d 100%);
    --grad-sky:    linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
    --grad-amber:  linear-gradient(135deg, #b45309 0%, #9a3412 100%);
    --grad-green:  linear-gradient(135deg, #047857 0%, #065f46 100%);

    /* Warna status */
    --success: #15803d;
    --success-soft: #dcfce7;
    --success-text: #166534;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --warning-text: #92400e;
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --danger-soft: #fee2e2;
    --danger-text: #991b1b;
    --info: #1d4ed8;
    --info-soft: #dbeafe;
    --info-text: #1e40af;

    /* Netral */
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-alt: #faf8ff;
    --border: #e9e5f5;
    --text: #1f1b2e;
    --text-muted: #4b4a5e;
    --text-light: #6b6a80;
    --gray: #4a4e69;
    --gray-dark: #373a52;
    --input-border: #8d88a6;          /* border input, 3.4:1 terhadap putih */
    --track: #ece8f7;                 /* latar progress bar */

    /* Typography */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: 0.8rem;
    --fs-sm: 0.9rem;
    --fs-base: 1rem;
    --fs-lg: 1.15rem;
    --fs-xl: 1.4rem;
    --fs-2xl: 1.9rem;
    --fs-3xl: 2.5rem;

    /* Bentuk & bayangan */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 6px rgba(31, 27, 46, 0.1);
    --shadow: 0 6px 18px rgba(31, 27, 46, 0.14);
    --shadow-lg: 0 12px 30px rgba(31, 27, 46, 0.22);

    /* Jarak */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

/* ============================================================
   BASE
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--grad-bg);
    background-attachment: fixed;
    min-height: 100vh;
    padding: 0;
}

h1, h2, h3, h4 {
    line-height: 1.3;
    font-weight: 700;
    color: var(--text);
}

h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

/* Placeholder terbaca di mode terang maupun gelap */
::placeholder {
    color: var(--text-light);
    opacity: 1;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-5) 20px 40px;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    background: var(--surface);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--primary-text);
    text-decoration: none;
    white-space: nowrap;
}

.navbar-menu {
    display: flex;
    gap: var(--space-1);
    flex: 1;
}

.navbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) 14px;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.navbar-link:hover {
    background: var(--primary-soft);
    color: var(--primary-text);
}

.navbar-link.active {
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: 600;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.navbar-user-info {
    text-align: right;
    line-height: 1.25;
}

.navbar-user-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

.navbar-user-role {
    font-size: var(--fs-xs);
    color: var(--text-light);
    text-transform: capitalize;
}

.navbar .btn {
    width: auto;
}

/* ============================================================
   PAGE HEADER (teks putih di atas latar ungu)
   ============================================================ */
.page-header {
    margin-bottom: var(--space-5);
}

.page-header h1 {
    font-size: var(--fs-2xl);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.page-header p {
    margin-top: var(--space-1);
    color: rgba(255, 255, 255, 0.92);
}

.page-header p strong {
    color: #fff;
}

/* ============================================================
   HEADER & CARD
   (.header masih dipakai halaman login)
   ============================================================ */
.header {
    background: var(--surface);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.header h1 {
    color: var(--primary-text);
    margin-bottom: var(--space-2);
    font-size: var(--fs-2xl);
}

.header p {
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.card {
    background: var(--surface);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}


/* ============================================================
   FORM
   ============================================================ */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--text);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

textarea {
    resize: vertical;
    font-family: inherit;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--grad-violet);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: var(--gray);
    color: #fff;
}

.btn-secondary:hover {
    background: var(--gray-dark);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--danger-dark);
}

.btn-light {
    background: #fff;
    color: var(--success);
}

.btn-light:hover {
    background: var(--success-soft);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}

.action-buttons {
    text-align: center;
    margin-top: var(--space-6);
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   SOAL
   ============================================================ */
.soal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.soal-header h3 {
    color: var(--primary-text);
}

.badge {
    display: inline-block;
    background: var(--success);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.badge-info { background: var(--info); }
.badge-danger { background: var(--danger); }

.pertanyaan {
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--surface-alt);
    border-radius: var(--radius);
}

.soal-content {
    line-height: 1.8;
}

.soal-content p {
    margin-bottom: var(--space-4);
}

.kata-kunci {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 10px 0;
}

.soal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ============================================================
   ALERT
   ============================================================ */
.alert {
    padding: var(--space-4) 20px;
    border-radius: var(--radius);
    margin-top: 20px;
}

.alert-error {
    background: var(--danger-soft);
    color: var(--danger-text);
    border: 1px solid #fecaca;
}

.alert-info {
    background: var(--info-soft);
    color: var(--info-text);
    border: 1px solid #bfdbfe;
}

.alert-success {
    background: var(--success-soft);
    color: var(--success-text);
    border: 1px solid #bbf7d0;
}

/* ============================================================
   HASIL PENILAIAN
   ============================================================ */
.result-card {
    text-align: center;
    background: var(--grad-violet);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.result-card h2 {
    color: #fff;
    margin-bottom: 20px;
}

.score-display {
    margin: 20px 0;
}

.final-score {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
}

.max-score {
    font-size: var(--fs-lg);
    opacity: 0.9;
}

.answer-box {
    background: var(--surface-alt);
    padding: 20px;
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
    line-height: 1.8;
}

.answer-box.reference {
    border-left-color: var(--success);
}

.detail-penilaian {
    margin-top: 20px;
}

.detail-item {
    margin-bottom: 20px;
}

.detail-label {
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text);
}

.progress-bar {
    background: var(--track);
    height: 28px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    background: var(--grad-violet);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    transition: width 0.5s ease;
}

.progress-fill.secondary {
    background: var(--grad-sky);
}

.progress-group {
    margin-bottom: var(--space-2);
}

.detail-value {
    text-align: right;
    font-weight: 600;
    color: var(--primary-text);
}

/* KATA KUNCI */
.kata-kunci-analisis {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge-keyword {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--fs-sm);
    border: 1px solid transparent;
}

.badge-keyword.success {
    background: var(--success-soft);
    color: var(--success-text);
    border-color: #bbf7d0;
}

.badge-keyword.error {
    background: var(--danger-soft);
    color: var(--danger-text);
    border-color: #fecaca;
}

/* ============================================================
   JAWABAN (SISI GURU & RIWAYAT)
   ============================================================ */
.jawaban-card {
    border-left: 4px solid var(--primary);
}

.jawaban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.jawaban-header h4 {
    color: var(--primary-text);
    font-size: var(--fs-lg);
}

.jawaban-header small {
    color: var(--text-light);
    display: block;
    margin-top: 5px;
}

.nilai-badge {
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.nilai-badge.success {
    background: var(--success);
    color: #fff;
}

.nilai-badge.warning {
    background: var(--warning-soft);
    color: var(--warning-text);
}

.nilai-badge.error {
    background: var(--danger);
    color: #fff;
}

.detail-penilaian-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: var(--surface-alt);
    border-radius: var(--radius);
}

.mini-item {
    text-align: center;
}

.mini-item span {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 5px;
}

.mini-item strong {
    font-size: var(--fs-xl);
    color: var(--primary-text);
}

/* ============================================================
   STATISTIK (kartu gradasi)
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: var(--space-6);
}

.stat-card {
    --grad: var(--grad-violet);
    text-align: center;
    background: var(--grad);
    color: #fff;
    padding: var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.stat-card h3 {
    margin-bottom: var(--space-3);
    font-size: var(--fs-base);
    font-weight: 600;
    color: #fff;
}

.stat-card p {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.95);
}

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

/* Urutan warna: 1 violet (default), 2 pink, 3 biru, 4 oranye */
.stat-card--success { --grad: var(--grad-pink); }
.stat-card--info    { --grad: var(--grad-sky); }
.stat-card--warning { --grad: var(--grad-amber); }

/* ============================================================
   MENU
   ============================================================ */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: var(--space-6);
}

.menu-card {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.menu-card h3 {
    color: var(--primary-text);
    margin-bottom: 10px;
}

.menu-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Gaya lama (menu di dalam header). Sudah tidak dipakai setelah
   semua halaman memakai navbar, boleh dihapus kalau pencarian
   'nav-links' dan 'btn-link' di folder modules/ sudah kosong. */
.nav-links {
    display: flex;
    gap: var(--space-3);
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-link {
    padding: 10px 20px;
    background: var(--surface-alt);
    color: var(--primary-text);
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid var(--border);
}

.btn-link:hover,
.btn-link.active {
    background: var(--grad-violet);
    border-color: transparent;
    color: #fff;
}

/* ============================================================
   INFO BOX
   ============================================================ */
.info-box {
    background: var(--grad-violet);
    color: #fff;
    padding: var(--space-5);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    margin-top: var(--space-6);
    box-shadow: var(--shadow);
}

.info-box h3 {
    color: #fff;
    margin-bottom: var(--space-4);
}

.info-box ul {
    list-style: none;
    padding-left: 0;
}

.info-box li {
    padding: var(--space-2) 0 var(--space-2) 25px;
    position: relative;
}

.info-box li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* ============================================================
   TEKS
   ============================================================ */
.text-muted {
    color: var(--text-muted);
    background: var(--surface-alt);
    padding: var(--space-4);
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
}

.text-small {
    font-size: var(--fs-sm);
    color: var(--text-light);
}

/* ============================================================
   UTILITAS (pengganti inline style)
   ============================================================ */
/* Judul bagian yang berada langsung di atas latar ungu */
.section-title {
    margin: var(--space-6) 0 var(--space-4);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.form-title    { color: var(--primary-text); margin-bottom: 20px; }

.hint     { color: var(--text-light); font-size: var(--fs-sm); }
.required { color: var(--danger); }
.link-strong { color: var(--primary-text); font-weight: 700; }
.answer-text { color: var(--text-muted); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.ml-5  { margin-left: 5px; }

/* Variasi kartu */
.card-accent {
    border-left: 4px solid var(--primary);
}

.card-summary {
    background: var(--surface-alt);
}

.card-summary p {
    margin: 0;
    text-align: center;
}

.card-success {
    background: var(--grad-green);
    color: #fff;
    text-align: center;
}

.card-success h2 { color: #fff; }
.card-success p  { margin: 20px 0; }

.card-success .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
}

.card-success .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.35);
}

.card-warning {
    background: var(--warning-soft);
    border-left: 4px solid var(--warning);
}

.card-warning h3,
.card-warning p {
    color: var(--warning-text);
}

.card-warning p { line-height: 1.8; }

/* Kotak catatan kecil */
.note {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    border-left: 4px solid;
}

.note-info {
    background: var(--info-soft);
    border-left-color: var(--info);
    color: var(--info-text);
}

.note-warning {
    background: var(--warning-soft);
    border-left-color: var(--warning);
    color: var(--warning-text);
}

/* Warna nilai (pengganti warna yang dihitung di PHP) */
.score-high { color: var(--success); }
.score-mid  { color: var(--c-amber); }
.score-low  { color: var(--danger); }

/* ============================================================
   IKON (Bootstrap Icons)
   ============================================================ */
.bi {
    line-height: 1;
}

/* Ikon di kartu putih dan navbar: hitam */
.card .bi,
.navbar-brand .bi,
.navbar-link .bi {
    color: var(--icon-color);
}

/* Ikon di atas latar gradasi: putih agar terbaca */
.result-card .bi,
.info-box .bi,
.card-success .bi,
.stat-card .bi {
    color: #fff;
}

/* Ikon di tombol dan lencana: ikut warna teksnya */
.btn .bi,
.badge .bi,
.badge-keyword .bi,
.nilai-badge .bi {
    color: inherit;
}

.stat-card h3 .bi {
    font-size: 1.1em;
}

.btn .bi,
.badge .bi,
.badge-keyword .bi {
    font-size: 0.95em;
}

/* ============================================================
   REGISTER / AUTH
   ============================================================ */
.register-card {
    max-width: 520px;
    margin: 40px auto;
}

.register-card .alert,
.auth-panel .alert {
    margin: 0 0 20px;
}

.error-list {
    margin: 8px 0 0 20px;
}

.btn-block {
    display: block;
    width: 100%;
}

.form-group .hint {
    display: block;
    margin-top: 6px;
}

/* Pilihan peran (kartu radio) */
.role-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.form-group label.role-option {
    display: block;
    margin-bottom: 0;
    position: relative;
    cursor: pointer;
}

.form-group .role-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
}

.role-option span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    transition: all 0.2s;
}

.role-option .bi {
    font-size: 1.6rem;
}

.role-option:hover span {
    border-color: var(--primary);
}

.role-option input:checked + span {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-text);
}

/* Tautan antar halaman login/register */
.auth-link {
    margin-top: var(--space-5);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.auth-link a {
    color: var(--primary-text);
    font-weight: 700;
}
/* ============================================================
   AUTH: HALAMAN LOGIN (dua kolom)
   ============================================================ */
.auth-page {
    display: grid;
    place-items: center;
    padding: var(--space-5) 16px;
}

.auth-layout {
    width: 100%;
    max-width: 960px;
    min-height: 580px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--surface);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* --- kolom kiri --- */
.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: 40px;
    color: #fff;
    background: var(--grad-violet-deep);
    overflow: hidden;
}

.auth-aside::before,
.auth-aside::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.auth-aside::before { width: 340px; height: 340px; right: -120px; top: -110px; }
.auth-aside::after  { width: 260px; height: 260px; left: -90px; bottom: -100px; }

.auth-aside > * { position: relative; z-index: 1; }

.auth-aside-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.auth-logo {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.35rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.auth-aside h2 {
    color: #fff;
    font-size: var(--fs-2xl);
    line-height: 1.25;
    margin-bottom: var(--space-3);
}

.auth-aside p {
    color: rgba(255, 255, 255, 0.92);
}

.auth-features {
    list-style: none;
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.auth-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.95);
}

.auth-features .bi {
    flex: none;
    margin-top: 2px;
    padding: 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    line-height: 1;
    font-size: 0.95rem;
}

.auth-illustration {
    position: relative;
    margin-top: auto;
    height: 150px;
}

.illus-sheet {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62%;
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border-radius: 14px 14px 0 0;
    box-shadow: var(--shadow-lg);
    transform: rotate(-3deg);
    transform-origin: bottom left;
}

.illus-line {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: #e5e0f7;
}
.illus-line--title { width: 55%; height: 10px; background: #c4b5fd; }
.illus-line--short { width: 70%; }

.illus-score {
    position: absolute;
    right: 6%;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--c-green);
    font-size: var(--fs-xl);
    font-weight: 700;
    box-shadow: var(--shadow-lg);
}

/* --- kolom kanan --- */
.auth-main {
    display: flex;
    align-items: center;
    padding: 48px 44px;
}

.auth-panel {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.auth-logo--form {
    display: none;                 /* tampil hanya di ponsel */
    margin-bottom: var(--space-4);
    background: var(--c-violet-soft);
    color: var(--c-violet);
}

.auth-panel h1 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-1);
}

.auth-sub {
    color: var(--text-muted);
    margin-bottom: var(--space-5);
}

/* input + tombol tampilkan password */
.input-group {
    position: relative;
}

.input-group input {
    padding-right: 48px;
}

.input-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-light);
    font-size: 1.1rem;
    cursor: pointer;
}

.input-toggle:hover { color: var(--primary-text); background: var(--primary-soft); }
.input-toggle .bi { color: inherit; }

/* kotak akun demo (bisa dibuka/ditutup) */
.demo-box {
    margin-top: var(--space-5);
    border: 1px dashed #cfc7ea;
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.demo-box summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.demo-box summary::-webkit-details-marker { display: none; }
.demo-box summary::after { content: "\25BE"; float: right; transition: transform 0.2s; }
.demo-box[open] summary::after { transform: rotate(180deg); }

.demo-box ul {
    list-style: none;
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.demo-box code {
    background: var(--primary-soft);
    color: var(--primary-text);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* ============================================================
   KARTU STATISTIK PUTIH (dashboard guru)
   Satu warna aksen per ikon: tambahkan --pink / --blue / --amber
   ============================================================ */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: var(--space-6);
}

.stat-tile {
    --tile-color: var(--c-violet);
    --tile-soft: var(--c-violet-soft);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
}

.stat-tile--pink  { --tile-color: var(--c-pink);  --tile-soft: var(--c-pink-soft); }
.stat-tile--blue  { --tile-color: var(--c-blue);  --tile-soft: var(--c-blue-soft); }
.stat-tile--amber { --tile-color: var(--c-amber); --tile-soft: var(--c-amber-soft); }

.stat-tile__icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tile-soft);
    margin-bottom: var(--space-3);
}

.stat-tile__icon .bi {
    color: var(--tile-color);
    font-size: 1.05rem;
}

.stat-tile__value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

.stat-tile__label {
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
}

/* ============================================================
   AKSI CEPAT (pengganti kartu menu besar)
   ============================================================ */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: var(--space-6);
}

.quick-action {
    --tile-color: var(--c-violet);
    --tile-soft: var(--c-violet-soft);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 16px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.quick-action--pink { --tile-color: var(--c-pink); --tile-soft: var(--c-pink-soft); }

.quick-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.quick-action__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tile-soft);
}

.quick-action__icon .bi {
    color: var(--tile-color);
    font-size: 1.05rem;
}

.quick-action__text strong {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.quick-action__text small {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-light);
    line-height: 1.4;
}

/* ============================================================
   TABEL RINGKAS
   ============================================================ */
.table-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.data-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-light);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-alt); }

.data-table .col-id     { width: 64px; font-weight: 600; color: var(--text-light); white-space: nowrap; }
.data-table .col-num    { text-align: center; white-space: nowrap; }
.data-table .col-action { text-align: right; white-space: nowrap; }
.data-table .cell-question { min-width: 220px; color: var(--text); }
.data-table .cell-meta { display: none; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-light); }

.data-table .btn { margin-left: 6px; }
.data-table .btn:first-child { margin-left: 0; }
.data-table .btn .bi { color: inherit; }

.btn-outline {
    background: transparent;
    color: var(--primary-text);
    border: 1px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary-soft);
}

.table-footer-link {
    display: block;
    padding: 12px 16px;
    text-align: right;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-text);
    text-decoration: none;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}

.table-footer-link:hover { text-decoration: underline; }
.table-footer-link .bi { color: inherit; }

.table-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .header h1,
    .page-header h1 {
        font-size: var(--fs-xl);
    }

    .final-score {
        font-size: 3rem;
    }

    .stats-grid,
    .menu-grid {
        grid-template-columns: 1fr;
    }

    .action-buttons,
    .soal-actions,
    .btn-group {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .nav-links {
        flex-direction: column;
    }

    .btn-link {
        width: 100%;
        text-align: center;
    }

    /* Navbar di layar kecil: menu turun ke baris kedua */
    .navbar-inner {
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        padding-top: 10px;
    }

    .navbar-menu {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: var(--space-2);
    }

    .navbar-user {
        margin-left: auto;
    }

    .navbar-user-info {
        display: none;
    }
}
/* Penyesuaian login, kartu statistik, dan tabel di ponsel */
@media (max-width: 768px) {
    .auth-page {
        padding: 16px 12px;
    }

    .auth-layout {
        grid-template-columns: 1fr;       /* satu kolom */
        min-height: 0;
        border-radius: 20px;
    }

    .auth-aside { display: none; }

    .auth-main { padding: 32px 22px 28px; }
    .auth-logo--form { display: inline-grid; }

    .stat-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-tile { padding: 16px; }
    .stat-tile__value { font-size: 1.8rem; }

    .quick-actions { grid-template-columns: 1fr; }

    /* tabel: sembunyikan kolom Skor/Jawaban dan teks tombol agar kolom Aksi tetap terlihat */
    .data-table .btn { width: auto; padding: 8px 10px; }
    .data-table .col-skor,
    .data-table .col-jml,
    .btn-label { display: none; }
    .data-table .cell-meta { display: block; }
    .data-table .col-id { width: 44px; }
    .data-table .cell-question { min-width: 0; }
    .data-table th,
    .data-table td { padding: 10px 10px; }

    /* navbar: menu turun ke baris kedua (flex: 1 bawaan menimpa width: 100%) */
    .navbar-menu { flex: 0 0 100%; }
}

@media (max-width: 380px) {
    .stat-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    body {
        background: #fff;
    }

    .navbar,
    .btn,
    .action-buttons {
        display: none;
    }

    .page-header h1,
    .page-header p,
    .section-title {
        color: #000;
        text-shadow: none;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
}
/* ============================================================
   FORM SOAL DUA KOLOM
   ============================================================ */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--space-5);
}

.form-col { min-width: 0; }

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Chip kata kunci */
.chip-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    min-height: 32px;
}

.chip-preview:empty::before {
    content: "Kata kunci akan tampil di sini";
    font-size: var(--fs-xs);
    color: var(--text-light);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-text);
    border: 1px solid #ddd6fe;
    font-size: var(--fs-sm);
    font-weight: 500;
}
/* ============================================================
   KUIS SISWA
   ============================================================ */

/* Progress di atas */
.quiz-progress { padding: var(--space-4) var(--space-5); }

.quiz-progress__label {
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.quiz-progress__label strong { color: var(--primary-text); }

.quiz-progress__bar {
    height: 10px;
    margin-bottom: 0;
}

/* Nomor soal */
.soal-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.soal-number {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--grad-violet);
    color: #fff;
    font-weight: 700;
}

.soal-of {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-light);
}

/* Textarea jawaban (sebelumnya belum punya gaya karena tidak ada di .form-group) */
.soal-card textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.soal-card textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

/* Status draft + penghitung karakter: kecil dan tenang */
.answer-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--text-light);
}

.char-counter {
    margin: 0;
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--text-light);
}

/* Bar kirim yang menempel di bawah layar */
.submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding: 12px var(--space-4);
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 16px rgba(31, 27, 46, 0.14);
}

.submit-bar__info {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.submit-bar__info strong { color: var(--primary-text); }

.submit-bar .btn { width: auto; }
/* ============================================================
   HASIL PENILAIAN (lingkaran skor, jawaban vs kunci)
   ============================================================ */

/* Lingkaran skor */
.score-ring {
    position: relative;
    width: 160px;
    height: 160px;
    margin: var(--space-4) auto;
}

.score-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);   /* mulai dari jam 12 */
}

.score-ring__track,
.score-ring__bar {
    fill: none;
    stroke-width: 10;
}

.score-ring__track { stroke: rgba(255, 255, 255, 0.25); }

.score-ring__bar {
    stroke: #fff;
    stroke-linecap: round;
    animation: ring-fill 1s ease-out;
}

@keyframes ring-fill {
    from { stroke-dashoffset: 339.292; }   /* = keliling lingkaran r=54 */
}

.score-ring__value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.score-ring__number { font-size: 2.2rem; font-weight: 700; }
.score-ring__max    { font-size: var(--fs-xs); opacity: 0.9; }

/* Status lulus / tidak lulus */
.result-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.result-status.lulus       { color: var(--success-text); }
.result-status.tidak-lulus { color: var(--danger-text); }

.result-card .result-status .bi { color: inherit; }

.result-hint {
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    opacity: 0.9;
}

/* Jawaban Anda & Kunci Jawaban berdampingan */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.compare-grid .card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.compare-grid .answer-box { flex: 1; }

@media (min-width: 768px) {
    .compare-grid { grid-template-columns: 1fr 1fr; }
}

/* Teks khusus pembaca layar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Kartu soal ringkas di dashboard siswa */
.soal-preview {
    line-height: 1.7;
    color: var(--text);
}

.soal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.soal-footer .btn { width: auto; }

/* Grup radio: fieldset tampil seperti .form-group biasa */
fieldset.form-group {
    border: 0;
    min-width: 0;
}

fieldset.form-group legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--text);
}

/* ============================================================
   FOKUS KEYBOARD
   ============================================================ */
/* Aturan dasar untuk semua elemen interaktif */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Input & textarea: garis dekat dengan kotaknya */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.soal-card textarea:focus-visible {
    outline-offset: 1px;
}

/* Kartu pilihan peran: garis di sekeliling kartu, bukan radio yang tersembunyi */
.role-option input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* Di atas latar gradasi gelap: outline putih agar tetap terlihat */
.result-card :focus-visible,
.card-success :focus-visible,
.info-box :focus-visible { outline-color: #fff; }

/* ============================================================
   DIALOG KONFIRMASI (pengganti confirm() bawaan browser)
   Dibuat otomatis oleh main.js. Memakai token warna, jadi
   otomatis ikut mode gelap.
   ============================================================ */
.confirm-dialog {
    margin: auto;               /* wajib: reset "* { margin: 0 }" membuat dialog menempel di pojok */
    width: min(420px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.confirm-dialog::backdrop {
    background: rgba(17, 12, 40, 0.6);
    backdrop-filter: blur(3px);
}

.confirm-dialog[open] {
    animation: confirm-in 0.18s ease-out;
}

.confirm-dialog[open]::backdrop {
    animation: confirm-fade 0.18s ease-out;
}

@keyframes confirm-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes confirm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Halaman di belakang dialog tidak ikut ter-scroll */
html:has(.confirm-dialog[open]) {
    overflow: hidden;
}

.confirm-body {
    padding: var(--space-6) var(--space-5) var(--space-4);
    text-align: center;
}

.confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.6rem;
    background: var(--primary-soft);
    color: var(--primary-text);
}

.confirm-icon .bi { color: inherit; }

.confirm-dialog--danger .confirm-icon {
    background: var(--danger-soft);
    color: var(--danger-text);
}

.confirm-title {
    margin-bottom: var(--space-2);
    font-size: var(--fs-xl);
}

.confirm-message {
    color: var(--text-muted);
    line-height: 1.6;
}

.confirm-actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.confirm-actions .btn {
    flex: 1;
    width: auto;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .confirm-dialog[open],
    .confirm-dialog[open]::backdrop { animation: none; }
}

/* ============================================================
   KURANGI GERAKAN (untuk pengguna yang mengaktifkannya di sistem)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* Semua transisi dan animasi dibuat instan.
       Animasi lingkaran skor tetap berakhir di nilai akhirnya. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Matikan juga gerak "terangkat" saat kursor di atas elemen */
    .btn-primary:hover,
    .menu-card:hover,
    .quick-action:hover {
        transform: none;
    }
}

/* ============================================================
   MODE GELAP (otomatis mengikuti pengaturan sistem/browser)
   Harus berada PALING BAWAH agar bisa menimpa token di :root.
   ============================================================ */
@media screen and (prefers-color-scheme: dark) {
    :root {
        --primary: #a78bfa;
        --primary-text: #c4b5fd;
        --primary-soft: #2a2347;
        --primary-ring: rgba(167, 139, 250, 0.45);
        --focus: #c4b5fd;
        --icon-color: #e5e7eb;

        --c-violet: #a78bfa;  --c-violet-soft: #2d2550;
        --c-blue:   #60a5fa;  --c-blue-soft:   #1e2a4a;
        --c-pink:   #f472b6;  --c-pink-soft:   #4a1d38;
        --c-amber:  #fbbf24;  --c-amber-soft:  #4a3410;

        --grad-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);

        --success-soft: #14352a;  --success-text: #86efac;
        --warning-soft: #3a2e0f;  --warning-text: #fcd34d;
        --danger-soft:  #3b1a1f;  --danger-text:  #fca5a5;
        --info-soft:    #1b2a4a;  --info-text:    #93c5fd;

        --bg: #0f0e17;
        --surface: #1c1a2b;
        --surface-alt: #242238;
        --border: #342f52;
        --text: #ece9f7;
        --text-muted: #c3bfd9;
        --text-light: #a29fba;

        --input-border: #8a85a6;
        --track: #342f52;

        --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
        --shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.6);
    }

    /* Warna status yang dipakai sebagai TEKS di atas permukaan gelap.
       (--success dan --danger sengaja tidak diubah karena dipakai
       sebagai latar tombol/badge dengan teks putih.) */
    .score-high { color: #4ade80; }
    .score-mid  { color: #fbbf24; }
    .score-low  { color: #f87171; }
    .required   { color: #f87171; }

    /* Border pastel bawaan terlalu terang di atas latar gelap */
    .alert-error   { border-color: #7f1d1d; }
    .alert-info    { border-color: #1e3a8a; }
    .alert-success { border-color: #14532d; }

    .badge-keyword.success { border-color: #166534; }
    .badge-keyword.error   { border-color: #991b1b; }
    .chip                  { border-color: #4b3f87; }
    .demo-box              { border-color: #4b4570; }

    .submit-bar { box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.55); }
}