/* KOMTIK GMIST — shared design tokens & base styles (ported from product mockup) */
:root{
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;

  --purple-900:#3B0F73; --purple-700:#5B21B6; --purple-600:#6D28D9; --purple-500:#7C3AED; --purple-400:#9D6BF0; --purple-100:#EDE3FD; --purple-50:#F6F1FE;
  --orange-600:#C2410C; --orange-500:#F97316; --orange-400:#FB923C; --orange-100:#FFE7D4; --orange-50:#FFF3E8;
  --ink-900:#141413; --ink-800:#201F1E; --ink-700:#34322F; --ink-600:#56534D; --ink-500:#7A776F; --ink-300:#C9C5BC;
  --paper-0:#FFFFFF; --paper-50:#FAF9F7; --paper-100:#F3F1ED; --paper-200:#E8E5DF;

  --green-600:#15803D; --green-100:#DCFCE3; --red-600:#B91C1C; --red-100:#FEE2E2; --amber-600:#B45309; --amber-100:#FEF3C7; --blue-600:#1D4ED8; --blue-100:#DBEAFE;

  --bg: var(--paper-50);
  --surface: var(--paper-0);
  --surface-2: var(--paper-100);
  --border: var(--paper-200);
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-faint: var(--ink-500);
  --accent: var(--purple-600);
  --accent-ink: var(--paper-0);
  --accent-soft: var(--purple-50);
  --accent-soft-border: var(--purple-100);
  --warn: var(--orange-500);
  --warn-soft: var(--orange-50);
  --warn-soft-border: var(--orange-100);
  --shadow: 0 1px 2px rgba(20,20,19,0.04), 0 8px 24px -12px rgba(20,20,19,0.12);
}

[data-theme="dark"]{
  --bg:#121113;
  --surface:#1B1A1D;
  --surface-2:#232226;
  --border:#333136;
  --text:#F4F2EF;
  --text-muted:#B7B3AC;
  --text-faint:#8A8780;
  --accent: var(--purple-400);
  --accent-ink:#1B1A1D;
  --accent-soft:#2A2340;
  --accent-soft-border:#44376E;
  --warn: var(--orange-400);
  --warn-soft:#3A2715;
  --warn-soft-border:#5C3B18;
  --green-600:#4ADE80; --green-100:#143322;
  --red-600:#F87171; --red-100:#3B1618;
  --amber-600:#FBBF24; --amber-100:#3A2F10;
  --blue-600:#93C5FD; --blue-100:#162A4A;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}

*{box-sizing:border-box}
body{margin:0}
.uk-root{font-family:var(--font-sans); background:var(--bg); color:var(--text); min-height:100%; transition:background .15s ease, color .15s ease;}
.uk-root *{font-family:inherit}
.uk-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; font-size:14px; font-weight:600; padding:10px 16px; border:1px solid transparent; cursor:pointer; line-height:1.2; white-space:nowrap;
  -webkit-appearance:none; appearance:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.uk-btn-primary{background:var(--accent); color:var(--accent-ink);}
.uk-btn-primary:hover{filter:brightness(1.06);}
.uk-btn-outline{background:transparent; border-color:var(--border); color:var(--text);}
.uk-btn-outline:hover{background:var(--surface-2);}
.uk-btn-ghost{background:transparent; border-color:transparent; color:var(--text-muted);}
.uk-btn-ghost:hover{background:var(--surface-2); color:var(--text);}
.uk-btn-warn{background:var(--warn); color:#2A1300;}
.uk-btn-sm{padding:6px 12px; font-size:13px; border-radius:8px;}
.uk-btn:disabled{opacity:.45; cursor:not-allowed;}

.uk-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);}
.uk-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.01em;}
.uk-badge-purple{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-soft-border);}
.uk-badge-orange{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn-soft-border);}
.uk-badge-green{background:var(--green-100); color:var(--green-600); border:1px solid var(--green-100);}
.uk-badge-red{background:var(--red-100); color:var(--red-600); border:1px solid var(--red-100);}
.uk-badge-amber{background:var(--amber-100); color:var(--amber-600); border:1px solid var(--amber-100);}
.uk-badge-blue{background:var(--blue-100); color:var(--blue-600); border:1px solid var(--blue-100);}
.uk-badge-gray{background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);}

.uk-input, .uk-select{width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14px;}

/* Reset checkbox/radio sepenuhnya (termasuk Safari iOS/iPadOS yang
   menerapkan gaya native sendiri tanpa -webkit-appearance:none,
   bikin tampilannya beda/aneh dibanding Chrome Android) -- digambar
   ulang manual supaya konsisten di semua browser & device. */
input[type="radio"], input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:19px; height:19px; min-width:19px;
  border:1.5px solid var(--border); background:var(--surface);
  cursor:pointer; position:relative; flex:0 0 auto; margin:0;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
input[type="radio"]{border-radius:50%;}
input[type="checkbox"]{border-radius:5px;}
input[type="radio"]:checked, input[type="checkbox"]:checked{
  background:var(--accent); border-color:var(--accent);
}
input[type="radio"]:checked::after{
  content:""; position:absolute; top:5px; left:5px; width:7px; height:7px;
  border-radius:50%; background:var(--accent-ink);
}
input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:9px;
  border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg);
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}

.uk-input:focus, .uk-select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.uk-label{font-size:12.5px; font-weight:600; color:var(--text-muted); display:block; margin-top:14px; margin-bottom:6px;}
.uk-label:first-child{margin-top:0;}

.uk-table{width:100%; border-collapse:collapse; font-size:13.5px;}

/* Opsi jawaban (dipakai di halaman Review Soal) -- .correct menandai kunci
   jawaban secara JELAS (hijau + label), bukan sekadar beda warna samar,
   supaya reviewer langsung melihat kunci jawaban begitu soal dibuka. */
.uk-opt{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface); font-size:13.5px;}
.uk-opt.correct{background:var(--green-100); border-color:var(--green-600); color:var(--green-600); font-weight:700;}
.uk-opt.correct::after{content:"✓ Kunci Jawaban"; margin-left:auto; font-size:11px; font-weight:700; white-space:nowrap;}
.uk-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap;}
.uk-table td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
.uk-table tr:last-child td{border-bottom:none;}
.uk-table tbody tr:hover{background:var(--surface-2);}

.uk-sidebar{background:var(--surface); border-right:1px solid var(--border); width:248px; flex:0 0 248px; padding:20px 14px; display:flex; flex-direction:column; gap:4px;}
.uk-navitem{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--text-muted); cursor:pointer; border:1px solid transparent; text-decoration:none;}
.uk-navitem:hover{background:var(--surface-2); color:var(--text);}
.uk-navitem.active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft-border);}
.uk-navitem .dot{width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex:0 0 auto;}
.uk-navitem.active .dot{background:var(--accent);}

.uk-topbar{height:64px; flex:0 0 64px; border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:space-between; padding:0 22px;}
.uk-toggle{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:999px; padding:4px; background:var(--surface-2); cursor:pointer; width:56px; height:30px; position:relative;}
.uk-toggle .knob{width:22px; height:22px; border-radius:99px; background:var(--surface); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; transition:transform .18s ease; font-size:11px;}
.uk-toggle.on{background:var(--accent);}
.uk-toggle.on .knob{transform:translateX(26px);}

.uk-avatar{width:34px; height:34px; border-radius:99px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.uk-scroll{overflow-x:auto;}
.uk-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:9px; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); cursor:pointer;}
.uk-chip.active{background:var(--ink-900); color:#fff; border-color:var(--ink-900);}
[data-theme="dark"] .uk-chip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

::-webkit-scrollbar{height:10px; width:10px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:99px;}
::-webkit-scrollbar-track{background:transparent;}

.uk-field-error{color:var(--red-600); font-size:12px; margin-top:5px;}

.uk-pagination{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:16px; font-size:13px;}
.uk-pagination-info{color:var(--text-faint);}
.uk-pagination-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.uk-page-link{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none; font-weight:600; font-size:13px; line-height:1;}
a.uk-page-link:hover{background:var(--surface-2); border-color:var(--text-faint);}
.uk-page-link.uk-page-current{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); cursor:default;}
.uk-page-link.uk-page-disabled{color:var(--text-faint); background:transparent; border-color:transparent; cursor:not-allowed;}
.uk-page-link.uk-page-dots{border-color:transparent; background:transparent; color:var(--text-faint); cursor:default;}
.uk-alert{border-radius:10px; padding:11px 13px; font-size:13px; line-height:1.5;}
.uk-alert-red{background:var(--red-100); color:var(--red-600); border:1px solid var(--red-100);}