/**
 * TKA Studio — styles.css (v5.0 — Exact Match dengan JS)
 * © 2026 Ekwan Nugroho — Wonogiri
 */

/* =========================================================
   1. TOKENS (NAMA SAMA PERSIS DENGAN JS)
   ========================================================= */
:root {
  --navy-900: #0a1628;
  --navy-800: #0f1e35;
  --navy-700: #1e3a8a;
  --primary: #1e40af;
  --primary-dark: #1e3a8a;
  --primary-light: #dbeafe;
  --primary-mid: #3b82f6;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;

  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;

  --surface: #f8fafc;
  --surface-card: #ffffff;
  --surface-muted: #f1f5f9;

  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --text: #0f172a;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --text-invert: #ffffff;
    /* v5.3 additions */
  --brand-50: #eff6ff;
  --brand-700: #1d4ed8;
  --danger-light: #fee2e2;

  --radius-sm: 8px;
  --radius-card: 16px;
  --radius-input: 10px;
  --radius-badge: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(30, 64, 175, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(30, 64, 175, 0.08);
  --shadow-lift: 0 8px 24px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(30, 64, 175, 0.12);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12), 0 40px 80px rgba(30, 64, 175, 0.16);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 200ms;
  --duration-slow: 400ms;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  overflow-x: hidden;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber-400); outline-offset: 2px; border-radius: 6px;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.2; color: var(--navy-900); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   3. UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.font-monospace, .font-mono { font-family: 'SF Mono', Menlo, Consolas, monospace; }
.pre-wrap { white-space: pre-wrap; }
.w-full { width: 100%; }
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.mr-1 { margin-right: var(--space-1); } .ml-6 { margin-left: var(--space-6); }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.btn-primary, .btn-secondary, .btn-danger, .btn-warning {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  border-radius: var(--radius-input); transition: all var(--duration) var(--ease);
  min-height: 44px;
}
.btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30, 64, 175, 0.3); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--surface-card); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface-muted); border-color: var(--text-muted); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #b45309; }
.btn-large { height: 52px; padding: 0 24px; font-size: 15px; font-weight: 700; width: 100%; }
.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 12px; }

.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease);
}
.btn-back:hover { background: var(--surface-muted); color: var(--text); }

/* =========================================================
   5. FORMS
   ========================================================= */
.form-section {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--space-5);
  margin-bottom: var(--space-4); box-shadow: var(--shadow-sm);
}
.form-section-header {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border); color: var(--primary);
}
.form-section-header h2 { font-size: 14px; font-weight: 700; color: var(--navy-900); }
.form-section-body { display: flex; flex-direction: column; gap: var(--space-4); }

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text); }
.form-hint { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 14px; font-size: 14px; font-family: inherit;
  color: var(--text); background: var(--surface-card);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-input);
  transition: all var(--duration) var(--ease);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--primary-mid); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 540px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }

.radio-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.radio-card {
  flex: 1; min-width: 90px; padding: 12px 16px;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-card); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-input); transition: all var(--duration) var(--ease);
  text-align: center;
}
.radio-card.active { color: var(--primary); background: var(--primary-light); border-color: var(--primary-mid); }

.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--text); font-weight: 500; }
.checkbox-label input { width: 18px; height: 18px; accent-color: var(--primary); }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border-strong); border-radius: var(--radius-input); overflow: hidden; background: var(--surface-card); }
.stepper-btn { width: 38px; height: 40px; font-size: 18px; font-weight: 600; color: var(--text-muted); }
.stepper-btn:hover:not(:disabled) { background: var(--surface-muted); color: var(--primary); }
.stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper-input { width: 56px; height: 40px; text-align: center; font-size: 15px; font-weight: 700; border: none; background: var(--surface-card); color: var(--text); font-family: inherit; -moz-appearance: textfield; }
.stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.komposisi-list { display: flex; flex-direction: column; gap: var(--space-3); }
.komposisi-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.komposisi-row:last-child { border-bottom: none; padding-bottom: 0; }
.komposisi-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; flex: 1; flex-wrap: wrap; color: var(--text); }
.komposisi-label .form-hint { display: block; width: 100%; margin-left: 24px; font-weight: 400; }
.komposisi-total { padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); text-align: right; font-weight: 500; }
.komposisi-total b { color: var(--primary); font-weight: 800; font-size: 16px; }

/* =========================================================
   6. PAGE LAYOUT
   ========================================================= */
.page { padding: var(--space-4); min-height: 100vh; background: var(--surface); }
.page-shell { max-width: 720px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-12); }
.page-shell-wide { max-width: 1120px; }
.page-header { margin-bottom: var(--space-6); }
.page-title { font-size: 28px; font-weight: 800; color: var(--navy-900); margin: var(--space-3) 0 var(--space-1); letter-spacing: -0.03em; line-height: 1.15; }
.page-subtitle { color: var(--text-muted); font-size: 14px; margin: 0; }

@media (min-width: 768px) {
  .page { padding: var(--space-5); }
  .page-title { font-size: 32px; }
}
@media (min-width: 1024px) {
  .page { padding: var(--space-6); }
  .page-title { font-size: 36px; }
}

/* =========================================================
   7. APP SHELL (SIDEBAR)
   ========================================================= */
.app-layout { min-height: 100vh; background: var(--surface); }

.app-main { min-height: 100vh; display: flex; flex-direction: column; }
.app-main .page { padding: var(--space-5) var(--space-4) var(--space-12); flex: 1; }

.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 260px;
  background: var(--navy-900); color: #cbd5e1;
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--space-3);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.25s var(--ease);
  overflow-y: auto;
}
.app-sidebar.drawer-open { transform: translateX(0); }

.app-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99;
}

.app-mobile-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.app-mobile-menu-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text); }
.app-mobile-menu-btn:hover { background: var(--surface-muted); }
.app-mobile-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy-900); font-size: 15px; }

@media (min-width: 1024px) {
  .app-sidebar { transform: translateX(0); }
  .app-main { margin-left: 260px; width: calc(100% - 260px); }
  .app-mobile-header { display: none; }
  .app-main .page { padding: var(--space-8) var(--space-6) var(--space-12); }
}

/* Sidebar content */
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px var(--space-3); cursor: pointer; }
.sidebar-brand:hover { opacity: 0.85; }
.sidebar-logo { width: 38px; height: 38px; border-radius: 10px; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-brand-name { color: white; font-weight: 800; font-size: 15px; line-height: 1.2; }
.sidebar-brand-sub { color: var(--text-subtle); font-size: 11px; margin-top: 2px; }

.sidebar-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: var(--space-3) var(--space-2); }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sidebar-section { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.sidebar-section-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; margin-bottom: 4px; }

.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: #cbd5e1; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: all 0.15s var(--ease);
  white-space: nowrap; overflow: hidden;
}
.sidebar-item:hover { background: rgba(255, 255, 255, 0.06); color: white; }
.sidebar-item.active { background: var(--primary); color: white; font-weight: 600; box-shadow: 0 4px 12px rgba(30, 64, 175, 0.35); }
.sidebar-item svg { flex-shrink: 0; }
.sidebar-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.sidebar-footer {
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; gap: 8px;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-mid); color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-name { color: white; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-sub { color: var(--text-subtle); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sidebar-logout { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); flex-shrink: 0; transition: all 0.15s; }
.sidebar-logout:hover { background: rgba(220, 38, 38, 0.25); color: #fca5a5; }

/* =========================================================
   8. CARDS (PUSTAKA / EXPERT LIST)
   ========================================================= */
.pustaka-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .pustaka-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.pustaka-card {
  display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--space-4);
  box-shadow: var(--shadow-sm); transition: all var(--duration) var(--ease);
}
.pustaka-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.pustaka-card-header { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
.pustaka-card-body { flex: 1; margin-bottom: var(--space-3); }
.pustaka-card-actions { display: flex; gap: 6px; margin-top: var(--space-2); }
.pustaka-card-actions button { flex: 1; }

.badge-pg { background: var(--primary-light); color: var(--primary); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.badge-muted { background: var(--surface-muted); color: var(--text-muted); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.badge-mcma { background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.badge-bs { background: #ede9fe; color: #5b21b6; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }

/* Empty State */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-4); text-align: center; background: var(--surface-card); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-card); color: var(--text-muted); }
.empty-state svg { color: var(--text-subtle); }
.empty-state p { margin: 0; font-size: 14px; }
.empty-state h3 { color: var(--navy-900); }

/* =========================================================
   9. PREVIEW — SOAL CARDS
   ========================================================= */
.soal-list { display: flex; flex-direction: column; gap: var(--space-4); }

.soal-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--duration) var(--ease); }
.soal-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.soal-card.has-warning { border-color: rgba(217, 119, 6, 0.3); }

.soal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.soal-header-left { display: flex; align-items: center; gap: var(--space-2); }
.soal-number { font-size: 12px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.soal-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-badge); font-size: 11px; font-weight: 700; }
.soal-badge.badge-pg { background: var(--primary-light); color: var(--primary); }
.soal-badge.badge-mcma { background: #fef3c7; color: #92400e; }
.soal-badge.badge-bs { background: #ede9fe; color: #5b21b6; }

.soal-actions { display: flex; gap: 2px; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-muted); transition: all var(--duration) var(--ease); }
.icon-btn:hover { background: var(--surface-card); color: var(--primary); }
.icon-btn.icon-danger:hover { background: #fee2e2; color: var(--danger); }

.soal-warning { display: flex; gap: 8px; padding: 10px var(--space-4); background: #fffbeb; color: #92400e; font-size: 12px; border-bottom: 1px solid #fcd34d; }

.soal-body { padding: var(--space-4); }
.soal-question { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--text); margin-bottom: var(--space-3); white-space: pre-wrap; }

.soal-img-badge { display: flex; gap: 6px; padding: 8px 12px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-sm); font-size: 12px; margin-bottom: var(--space-3); border: 1px solid rgba(30, 64, 175, 0.1); }

.soal-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.soal-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-card); }
.soal-option.correct { border-color: var(--success); background: #f0fdf4; }
.soal-option-letter { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-muted); font-size: 11px; font-weight: 700; color: var(--text-muted); }
.soal-option.correct .soal-option-letter { background: var(--success); color: white; }
.soal-option-text { flex: 1; }
.soal-option-check { color: var(--success); flex-shrink: 0; }

.soal-explanation { display: flex; gap: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); background: var(--surface-muted); border-radius: var(--radius-sm); line-height: 1.55; border-left: 3px solid var(--primary-light); }

/* Option Indicator (MCMA checkbox) */
.option-indicator {
  width: 22px; height: 22px; border: 2px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.2s; margin-right: 12px; background: white;
}
.option-indicator.checkbox { border-radius: 4px; }
.option-indicator.checkbox.active { background: var(--primary-mid); border-color: var(--primary-mid); color: white; }

/* Tabel B/S */
.bs-table-wrapper { overflow-x: auto; margin-bottom: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.bs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: white; }
.bs-table th { background: var(--surface-muted); padding: 10px 12px; text-align: left; font-weight: 700; color: var(--text-muted); border-bottom: 2px solid var(--border-strong); font-size: 12px; }
.bs-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bs-table tr:last-child td { border-bottom: none; }
.bs-table .bs-letter { font-weight: 700; color: var(--text-muted); text-align: center; }
.bs-table .bs-radio { text-align: center; }
.radio-circle { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); position: relative; background: white; }
.radio-circle.active { border-color: var(--primary-mid); }
.radio-circle.active::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--primary-mid); }

/* Edit Mode */
.edit-mode { display: flex; flex-direction: column; gap: var(--space-3); }
.edit-textarea { width: 100%; padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.55; color: var(--text); background: var(--surface-card); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); resize: vertical; }
.edit-textarea:focus { outline: none; border-color: var(--primary-mid); }
.edit-input { flex: 1; padding: 8px 10px; font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface-card); border: 1.5px solid var(--border-strong); border-radius: 6px; }
.edit-input:focus { outline: none; border-color: var(--primary-mid); }
.edit-options { display: flex; flex-direction: column; gap: 6px; }
.edit-option-row { display: flex; align-items: center; gap: 8px; }
.edit-option-key { width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface-muted); border: 1.5px solid var(--border); transition: all var(--duration) var(--ease); }
.edit-option-key.active { background: var(--success); color: white; border-color: var(--success); }
.edit-bs-list { display: flex; flex-direction: column; gap: 6px; }
.edit-bs-row { display: flex; align-items: center; gap: 6px; }
.edit-bs-num { font-size: 12px; color: var(--text-muted); font-weight: 600; min-width: 18px; }
.edit-bs-toggle { width: 30px; height: 30px; font-size: 12px; font-weight: 700; border-radius: 6px; color: var(--text-muted); background: var(--surface-muted); border: 1.5px solid var(--border); }
.edit-bs-toggle.active-true { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.edit-bs-toggle.active-false { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.edit-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* Filter Bar */
.filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); gap: 8px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-pill); transition: all var(--duration) var(--ease); }
.filter-chip:hover { border-color: var(--primary-mid); color: var(--primary); }
.filter-chip.active { color: white; background: var(--primary); border-color: transparent; }
.filter-count { font-size: 11px; padding: 1px 6px; background: var(--surface-muted); border-radius: 10px; font-weight: 700; }
.filter-chip.active .filter-count { background: rgba(255, 255, 255, 0.25); color: white; }
.print-btn { white-space: nowrap; }

.sticky-bottom { position: sticky; bottom: 0; background: linear-gradient(to top, var(--surface) 70%, transparent); padding: var(--space-4) 0; margin-top: var(--space-6); z-index: 10; }

/* Result Cards */
.result-card { border-radius: var(--radius-card); padding: var(--space-5); margin-bottom: var(--space-4); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.result-success { background: #f0fdf4; border-color: #bbf7d0; }
.result-warning { background: #fffbeb; border-color: #fde68a; }
.result-error { background: #fef2f2; border-color: #fecaca; }
.result-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.result-header h2 { font-size: 15px; font-weight: 700; color: var(--navy-900); }
.error-list { margin: var(--space-2) 0; padding-left: 20px; color: var(--danger); font-size: 13px; font-weight: 500; }
.error-list li { margin-bottom: 6px; }

/* Steps List (dipakai di result/export) */
.steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.step-line { display: flex; gap: 12px; font-size: 14px; line-height: 1.55; align-items: flex-start; }
.step-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-weight: 800; font-size: 12px; }

/* Paste Textarea */
.paste-box { margin-bottom: var(--space-4); }
.paste-textarea { width: 100%; min-height: 300px; padding: 16px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; color: var(--text); background: var(--surface-card); border: 1.5px solid var(--border-strong); border-radius: var(--radius-card); resize: vertical; transition: all var(--duration) var(--ease); }
.paste-textarea:focus { outline: none; border-color: var(--primary-mid); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }

/* Export Sections */
.export-section { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.export-section-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--primary); }
.export-section-header h2 { font-size: 14px; font-weight: 700; color: var(--navy-900); }
.export-summary { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) 0; }
.summary-item { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.summary-value { font-size: 16px; font-weight: 700; color: var(--text); }
.summary-value-sm { font-size: 13px; font-weight: 600; }
.export-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.export-instructions .steps-list { font-size: 13px; }
.export-instructions .step-num { width: 22px; height: 22px; font-size: 11px; }

/* =========================================================
   10. STEPPER NAVIGATION (WIZARD)
   ========================================================= */
.stepper-container {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.stepper-container::-webkit-scrollbar { display: none; }
.stepper-item { display: flex; align-items: center; gap: 8px; color: var(--text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); flex-shrink: 0; transition: all var(--duration) var(--ease); }
.stepper-item:hover:not(.locked) { background: var(--surface-muted); }
.stepper-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--surface-muted); border: 1.5px solid var(--border); color: var(--text-muted); }
.stepper-label { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.stepper-icon { opacity: 0.7; }
.stepper-item.active { color: var(--primary); background: var(--primary-light); }
.stepper-item.active .stepper-circle { background: var(--primary); color: white; border-color: transparent; }
.stepper-item.done .stepper-circle { background: var(--success); color: white; border-color: var(--success); }
.stepper-item.done { color: var(--success); }
.stepper-item.locked { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 600px) {
  .stepper-label { display: none; }
  .stepper-container { justify-content: center; gap: 16px; }
  .stepper-item { padding: var(--space-2); }
}

/* =========================================================
   11. MODALS
   ========================================================= */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 1000; padding: 0;
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: var(--space-4); } }

.modal {
  width: 100%; max-width: 560px; max-height: 90dvh;
  background: var(--surface-card);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}
@media (min-width: 640px) { .modal { border-radius: 20px; max-height: 85dvh; } }

.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.modal-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--navy-900); }
.modal-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-muted); }
.modal-close:hover { background: var(--surface); color: var(--text); }
.modal-body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.modal-footer { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); flex-direction: column; background: var(--surface-muted); }
@media (min-width: 480px) { .modal-footer { flex-direction: row; justify-content: flex-end; } }

.confirm-modal { max-width: 420px; text-align: center; padding: 40px 32px 32px; border-radius: 24px; }
.confirm-icon-wrapper { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.confirm-icon-wrapper.danger { background: #fee2e2; color: var(--danger); box-shadow: 0 0 0 8px #fef2f2; }
.confirm-icon-wrapper.info { background: var(--primary-light); color: var(--primary); box-shadow: 0 0 0 8px #eff6ff; }
.confirm-title { font-size: 22px; font-weight: 800; margin: 0 0 12px; color: var(--navy-900); }
.confirm-message { font-size: 14px; color: var(--text-muted); margin: 0 0 28px; line-height: 1.6; }
.confirm-actions { display: flex; gap: 12px; justify-content: center; }
.confirm-actions button { flex: 1; height: 48px; border-radius: var(--radius-input); font-weight: 600; font-size: 14px; }

/* Password Box (in modal) */
.password-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; margin: 16px 0; background: var(--primary-light); border: 1px solid rgba(30, 64, 175, 0.15); border-radius: var(--radius-input); font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 18px; font-weight: 600; color: var(--primary); }
.password-box button { color: var(--primary); padding: 6px; border-radius: 6px; }
.info-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

/* AI Links */
.ai-links { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ai-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-light); border: 1px solid rgba(30, 64, 175, 0.15); border-radius: var(--radius-badge); }
.ai-link:hover { background: white; border-color: var(--primary-mid); }

/* =========================================================
   12. TOASTS
   ========================================================= */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-card); background: white; box-shadow: var(--shadow-xl); border-left: 4px solid var(--primary); pointer-events: auto; min-width: 280px; max-width: 400px; }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--primary); }
.toast-msg { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.toast-close { color: var(--text-muted); padding: 4px; border-radius: 4px; }
.toast-close:hover { background: var(--surface-muted); color: var(--text); }
@media (max-width: 640px) { .toast-container { bottom: 16px; right: 16px; left: 16px; } .toast { min-width: 0; width: 100%; } }

/* =========================================================
   13. AUTH PAGES
   ========================================================= */
.auth-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(251, 191, 36, 0.08) 0%, transparent 50%), var(--surface); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface-card); border: 1px solid var(--border); border-radius: 20px; padding: var(--space-6); box-shadow: var(--shadow-lift); }

/* Alerts */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; font-weight: 500; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* =========================================================
   14. LANDING PAGE
   ========================================================= */
.landing { min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface); }
.landing-main { background: var(--surface); flex: 1; }

.landing-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 20px 0; background: transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-header.scrolled { background: rgba(10, 22, 40, 0.85); backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); padding: 12px 0; }
.header-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.landing-header .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: white; cursor: pointer; }
.header-nav { display: none; gap: var(--space-6); }
@media (min-width: 768px) { .header-nav { display: flex; } .header-nav a { color: rgba(255, 255, 255, 0.75); font-weight: 500; font-size: 14px; transition: color 0.2s; } .header-nav a:hover { color: white; } }
.btn-nav-login { background: white; color: var(--navy-900); padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn-nav-login:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2); }

/* Hero */
.hero-section { background: var(--navy-900); color: white; padding: 160px 0 100px; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; }
.hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); }
.hero-bg-glow { position: absolute; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 65%); top: -300px; right: -200px; filter: blur(60px); }
.hero-bg-glow-2 { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, 0.12) 0%, transparent 65%); bottom: -200px; left: -150px; filter: blur(60px); }
.hero-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; width: 100%; }
@media (min-width: 1024px) { .hero-container { grid-template-columns: 1.1fr 0.9fr; gap: 80px; } }
.hero-copy { text-align: center; }
@media (min-width: 1024px) { .hero-copy { text-align: left; } }

.badge-hero { display: inline-flex; align-items: center; gap: 8px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); color: var(--amber-400); padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; margin-bottom: var(--space-5); }
.badge-hero .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-400); }

.hero-title { font-size: 48px; font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 var(--space-4); color: white; }
@media (min-width: 1024px) { .hero-title { font-size: 64px; } }
.hero-title .highlight { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0 auto var(--space-6); max-width: 540px; }
@media (min-width: 1024px) { .hero-desc { margin-left: 0; margin-right: 0; } }

.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); justify-content: center; }
@media (min-width: 1024px) { .hero-actions { justify-content: flex-start; } }
.cta-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-8); background: white; color: var(--navy-900); font-weight: 700; font-size: 15px; border-radius: var(--radius-input); transition: all var(--duration) var(--ease); }
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 255, 255, 0.2); }
.hero-guide-link { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: var(--space-6); }
.hero-guide-link a { color: var(--amber-400); font-weight: 600; text-decoration: underline; }
.hero-trust { display: flex; gap: var(--space-4); justify-content: center; font-size: 13px; color: rgba(255, 255, 255, 0.6); flex-wrap: wrap; }
@media (min-width: 1024px) { .hero-trust { justify-content: flex-start; } }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }

/* Hero Visual (3D Cards) */
.hero-visual { position: relative; width: 100%; height: 450px; perspective: 1200px; display: none; }
@media (min-width: 1024px) { .hero-visual { display: block; } }

.v-card { position: absolute; background: white; border-radius: 16px; padding: 20px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); color: var(--text); }
.v-card-math { top: 0; left: 0; width: 280px; transform: rotateY(-10deg) rotateX(5deg); z-index: 2; }
.v-card-bs { top: 120px; right: 0; width: 260px; transform: rotateY(10deg) rotateX(-5deg); z-index: 3; }
.v-card-mcma { bottom: 0; left: 40px; width: 280px; transform: rotateY(-5deg) rotateX(10deg); z-index: 1; }

.v-header { margin-bottom: 12px; }
.v-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
.v-q { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--navy-900); }
.v-math-box { background: var(--surface-muted); padding: 12px; border-radius: 8px; text-align: center; font-family: 'Times New Roman', serif; font-style: italic; font-size: 20px; color: var(--primary); margin-bottom: 12px; border: 1px solid var(--border); }
.v-opts { display: flex; flex-direction: column; gap: 8px; }
.v-opt { font-size: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: white; }
.v-opt.correct { border-color: var(--success); background: #f0fdf4; font-weight: 700; color: var(--success); }
.v-bs-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.v-bs-row:last-child { border: none; }
.v-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: inline-block; position: relative; }
.v-radio.active { border-color: var(--primary); }
.v-radio.active::after { content: ''; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.v-checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 8px; color: var(--text); }
.v-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border-strong); display: inline-block; }
.v-checkbox.active { background: var(--primary); border-color: var(--primary); }

/* Landing Sections */
.section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
.section-pain { background: var(--surface); padding: 100px 0 80px; border-radius: 32px 32px 0 0; margin-top: -40px; position: relative; z-index: 10; }
.section-steps, .section-features, .section-creator, .section-faq, .section-ekosistem { padding: 80px 0; border-top: 1px solid var(--border); }
.section-header { text-align: center; margin-bottom: var(--space-10); }
.section-header h2 { font-size: 28px; font-weight: 800; color: var(--navy-900); margin-bottom: var(--space-2); }
@media (min-width: 768px) { .section-header h2 { font-size: 36px; } }
.section-header p { color: var(--text-muted); font-size: 16px; max-width: 600px; margin: 0 auto; }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.feature-card { background: white; border: 1px solid var(--border); border-radius: 16px; padding: 32px; text-align: center; box-shadow: var(--shadow-sm); }
.feature-icon-wrapper { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.feature-card h3 { font-size: 18px; font-weight: 700; color: var(--navy-900); margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

.step-card { background: white; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.step-visual { height: 140px; background: var(--surface-muted); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.step-content { padding: 24px; text-align: center; flex: 1; }
.step-num-hero { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: white; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.step-card h3 { font-size: 18px; font-weight: 700; color: var(--navy-900); margin-bottom: 8px; }
.step-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* Mockups (Visual 3 Langkah) */
.mock-form { width: 80%; display: flex; flex-direction: column; gap: 8px; }
.mock-input { height: 24px; background: white; border: 1px solid var(--border-strong); border-radius: 4px; }
.mock-btn { height: 28px; background: var(--primary); border-radius: 4px; margin-top: 4px; color: white; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.mock-chat { width: 80%; display: flex; flex-direction: column; gap: 8px; }
.mock-chat-bubble { height: 24px; border-radius: 12px; }
.mock-chat-bubble.user { width: 60%; background: var(--primary-light); align-self: flex-end; border-bottom-right-radius: 4px; }
.mock-chat-bubble.bot { width: 90%; background: white; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.mock-chat-bubble.bot.short { width: 70%; }
.mock-export { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mock-download-btn { display: flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--primary); color: var(--primary); padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; }

/* Ekosistem */
.bridge-flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 768px) { .bridge-flow { flex-direction: row; gap: var(--space-8); } }
.bridge-node { background: var(--surface-card); border: 1px solid var(--border); border-radius: 20px; padding: var(--space-6); text-align: center; flex: 1; max-width: 280px; box-shadow: var(--shadow-sm); }
.bridge-node h3 { font-size: 20px; font-weight: 800; margin: var(--space-3) 0 var(--space-2); color: var(--navy-900); }
.bridge-node p { font-size: 14px; color: var(--text-muted); margin: 0; }
.bridge-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.bridge-arrow { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; }

/* FAQ */
.faq-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); }
.faq-item summary { font-weight: 700; font-size: 16px; color: var(--navy-900); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 24px; color: var(--primary); font-weight: 400; transition: transform 0.3s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 12px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* Footer Public */
.landing-footer { background: var(--navy-900); color: #cbd5e1; padding: 64px var(--space-4) 32px; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8); }
.footer-brand { display: flex; align-items: flex-start; gap: var(--space-4); max-width: 400px; }
.logo-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--primary); color: white; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.footer-title { color: white; font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.footer-desc { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
.footer-links { display: flex; gap: var(--space-10); }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col-title { color: white; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.footer-col a { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.footer-col a:hover { color: var(--amber-400); }
.footer-copy { text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--space-6); max-width: 1200px; margin: 0 auto; }

/* =========================================================
   15. PRINT
   ========================================================= */
@media print {
  body { background: white !important; color: black; }
  .no-print, .stepper-container, .page-header, .filter-bar, .form-actions, .soal-actions, .soal-warning, .result-card, .export-actions, .export-instructions, .sticky-bottom, .landing-header, .landing-footer, .app-sidebar, .app-mobile-header { display: none !important; }
  .page { background: white !important; min-height: 0 !important; padding: 0 !important; }
  .app-main { margin-left: 0 !important; width: 100% !important; }
  .page-shell { padding: 0 !important; max-width: 100% !important; }
  .soal-card { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; margin-bottom: 16px; }
  .soal-option.correct { border-color: #ccc !important; background: transparent !important; }
  .soal-option-check { display: none !important; }
}

/* =========================================================
   16. RESPONSIVE (FINAL)
   ========================================================= */
@media (max-width: 640px) {
  .page-title { font-size: 24px; }
  .page-subtitle { font-size: 13px; }
  .hero-title { font-size: 34px; }
  .hero-desc { font-size: 15px; }
  .hero-section { padding: 120px 0 80px; }
  .pustaka-card-actions { flex-direction: column; }
  .soal-question { font-size: 14px; }
  .form-input, .form-select, .form-textarea, .paste-textarea, .edit-input, .edit-textarea, .stepper-input { font-size: 16px; }
}

/* PWA Safe Area */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* =========================================================
   FIX v5.1 — STEPPER, PUSTAKA SEARCH, EXPERT CARD
   ========================================================= */

/* --- 1. STEPPER KONSISTEN --- */
.stepper-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-6);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.stepper-container::-webkit-scrollbar { display: none; }

.stepper-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  flex: 1;
  max-width: 180px;
  transition: all var(--duration) var(--ease);
}
.stepper-item:hover:not(.locked) { background: var(--surface-muted); }

/* --- 2. PUSTAKA SEARCH & FILTER (YANG HILANG) --- */
.search-filter-wrapper {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-main-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-input);
  padding: 12px 16px;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}
.search-main-box:focus-within {
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.search-main-box input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.filter-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 4px;
}
.filter-chip-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}
.filter-select {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}
.filter-select:hover { background: var(--border); }
.filter-select:focus { border-color: var(--primary-mid); background: white; }
.btn-reset-filter {
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  transition: background 0.2s;
}
.btn-reset-filter:hover { background: #fca5a5; }
.cart-badge-inline {
  background: var(--amber-400);
  color: var(--navy-900);
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
}

/* --- 3. EXPERT CARD (LEBIH PREMIUM) --- */
.expert-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.expert-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}
.expert-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--primary-mid);
}
.expert-card.is-done::before {
  background: var(--success);
}
.expert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.expert-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.expert-card-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.expert-progress-bg {
  height: 8px;
  background: var(--surface-muted);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 16px;
  margin-bottom: 12px;
}
.expert-progress-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease-out;
}

/* Fix tombol di expert card */
.expert-card .pustaka-card-actions {
  display: flex;
  gap: 8px;
}
.expert-card .pustaka-card-actions button { flex: 1; }

/* =========================================================
   ADAPTIVE LAYOUT v5.4 — Perluas grid, bukan zoom
   Base sizing DIPERTAHANKAN. Hanya container & kolom yang diatur.
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* =========================================================
   TABLET (≥ 640px)
   ========================================================= */
@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .page-shell { max-width: 760px; }
  .page-shell-wide { max-width: 1080px; }
}

/* =========================================================
   DESKTOP (≥ 1024px) — PERLUAS KONTAINER & GRID SAJA
   ========================================================= */
@media (min-width: 1024px) {
  /* ---- Container lebih lebar ---- */
  .page-shell {
    max-width: 900px;
    padding: var(--space-6) var(--space-6) var(--space-12);
  }
  .page-shell-wide {
    max-width: 1280px;
    padding: var(--space-6) var(--space-6) var(--space-12);
  }
  .app-main .page {
    padding: var(--space-6) var(--space-6) var(--space-12);
  }

  /* ---- Landing containers ---- */
  .header-container,
  .hero-container,
  .section-container,
  .footer-container { max-width: 1280px; }

  /* ---- Preview: soal jadi 2 kolom (ruang dipakai, bukan di-zoom) ---- */
  .page-shell-wide .soal-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .soal-card:has(.edit-mode) { grid-column: 1 / -1; }

  /* ---- Pustaka & Expert grid multi-kolom ---- */
  .pustaka-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  /* ---- Landing grid ---- */
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

  /* ---- Hero sedikit lebih lega di desain hero SAJA (bukan body) ---- */
  .hero-section { padding: 140px 0 100px; }
  /* Hero title TIDAK dibesarkan — biar konsisten */

  /* ---- Landing sections spacing sedikit lebih lega ---- */
  .section-steps, .section-features, .section-creator,
  .section-faq, .section-ekosistem { padding: 80px 0; }
  .section-pain { padding: 80px 0 60px; }
}

/* =========================================================
   LARGE (≥ 1280px) — Pustaka jadi 3 kolom, container lebih lega
   ========================================================= */
@media (min-width: 1280px) {
  .page-shell { max-width: 980px; }
  .page-shell-wide { max-width: 1440px; }
  .header-container,
  .hero-container,
  .section-container,
  .footer-container { max-width: 1360px; }

  .pustaka-grid { grid-template-columns: repeat(3, 1fr); }
  .page-shell-wide .soal-list { gap: var(--space-5); }
}

/* =========================================================
   PUSTAKA CARD — Author Pill & Download Count
   (Gunakan di pages/pustaka.js)
   ========================================================= */

/* Row untuk meta penulis & download */
.pustaka-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

/* Pill penulis (dengan avatar lingkaran) */
.author-pill,
.pustaka-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(30, 64, 175, 0.15);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary-dark);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
  color: white;
  font-size: 9.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(30, 64, 175, 0.2);
}

/* Pill jumlah download */
.download-count,
.pustaka-downloads {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #fff7ed;
  border: 1px solid rgba(194, 65, 12, 0.15);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #c2410c;
  font-variant-numeric: tabular-nums;
}
.download-count svg,
.pustaka-downloads svg { opacity: 0.9; }

/* Footer pustaka card (opsional, untuk tombol aksi) */
.pustaka-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

/* =========================================================
   EXPERT CARD — Selaras dengan Pustaka
   ========================================================= */

.expert-card {
  padding: 20px 20px 20px 24px; /* padding kiri lebih besar untuk border accent */
}

.expert-card-header { margin-bottom: 12px; }
.expert-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Badge "Selesai" kecil untuk project yang sudah selesai */
.badge-done {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.expert-card-body {
  flex: 1;
  margin-bottom: 4px;
}

/* Meta topik */
.expert-card .expert-card-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 14px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

/* Progress header */
.expert-card-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.expert-progress-pct {
  color: var(--primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.expert-card.is-done .expert-progress-pct { color: var(--success); }

/* Footer stats */
.expert-card-footer {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  border-top: 1px dashed var(--border);
}
.expert-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--surface-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.expert-stat svg { opacity: 0.75; flex-shrink: 0; }

/* Actions */
.expert-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.expert-card-actions .btn-primary { flex: 1; }
.expert-card-actions .btn-danger {
  flex-shrink: 0;
  width: auto;
  padding: 6px 12px;
}

/* =========================================================
   PUSTAKA — Supplementary (v5.4.1)
   ========================================================= */

/* Body card — fleksibel, grow agar actions selalu di bawah */
.pustaka-card-body {
  flex: 1;
  margin-bottom: 12px;
}

/* Teks soal — base (sebelumnya hanya ada di media query) */
.pustaka-q {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Preview meta (di modal detail) */
.pustaka-preview-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Preview footer (di modal detail) */
.pustaka-preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================
   BUILD PAGE POLISH (v5.5)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Top nav */
.build-topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Hero card */
.build-hero {
  position: relative;
  padding: 18px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}
.build-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-mid) 0%, var(--amber-400) 100%);
}
.build-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.build-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
  flex-shrink: 0;
}
.build-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 2px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.build-hero-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Config chips */
.build-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.config-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid rgba(30, 64, 175, 0.1);
  white-space: nowrap;
}
.config-chip svg { opacity: 0.85; flex-shrink: 0; }

/* Recipe bar */
.recipe-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.recipe-bar-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.recipe-bar-content {
  flex: 1;
  min-width: 140px;
}
.recipe-bar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.2;
}
.recipe-bar-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.recipe-bar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.recipe-bar-actions .form-select {
  min-width: 160px;
  padding: 8px 12px;
  font-size: 13px;
  height: auto;
}

/* Section badge */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Difficulty cards */
.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.difficulty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: var(--surface-card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-input);
  text-align: left;
  transition: all var(--duration) var(--ease);
  cursor: pointer;
  font-family: inherit;
}
.difficulty-card:hover {
  border-color: var(--primary-mid);
  background: var(--primary-light);
}
.difficulty-card.active {
  background: var(--primary-light);
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.difficulty-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.difficulty-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.2;
}
.difficulty-card.active .difficulty-card-title {
  color: var(--primary-dark);
}
.difficulty-card-code {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  background: var(--surface-muted);
  color: var(--text-muted);
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.difficulty-card.active .difficulty-card-code {
  background: var(--primary);
  color: white;
}
.difficulty-card-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Komposisi visual bar */
.komposisi-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-muted);
  margin-bottom: 12px;
}
.komposisi-bar-seg {
  transition: flex-basis 0.3s var(--ease);
  min-width: 2px;
}
.komposisi-bar-seg.is-pg   { background: linear-gradient(90deg, #3b82f6, #1e40af); }
.komposisi-bar-seg.is-mcma { background: linear-gradient(90deg, #fbbf24, #d97706); }
.komposisi-bar-seg.is-bs   { background: linear-gradient(90deg, #a78bfa, #7c3aed); }

.komposisi-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.komposisi-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.komposisi-legend-item b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.komposisi-legend-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.komposisi-legend-item .dot.is-pg   { background: #3b82f6; }
.komposisi-legend-item .dot.is-mcma { background: #f59e0b; }
.komposisi-legend-item .dot.is-bs   { background: #7c3aed; }

/* Build summary */
.build-summary {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.build-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: #065f46;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.build-summary-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.build-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}
.build-summary-stat span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.build-summary-stat b {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* CTA hint */
.build-cta-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  padding-top: 4px;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 520px) {
  .difficulty-grid { grid-template-columns: 1fr; }
  .recipe-bar-actions { width: 100%; }
  .recipe-bar-actions .form-select { flex: 1; }
  .build-summary-body { gap: 14px; }
  .build-hero-main { gap: 12px; }
  .build-hero-icon { width: 40px; height: 40px; border-radius: 10px; }
  .build-hero-title { font-size: 18px; }
}

@media (min-width: 1024px) {
  .build-hero { padding: 22px 24px; }
  .build-hero-icon { width: 48px; height: 48px; }
  .build-hero-title { font-size: 22px; }
  .difficulty-card { padding: 16px; }
}

/* =========================================================
   PREMIUM DESIGN SYSTEM (v6)
   Konsisten untuk semua halaman
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Page Hero (reusable) ---------- */
.page-hero-wrap { margin-bottom: 16px; }
.page-hero-topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.page-hero {
  position: relative;
  padding: 18px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.page-hero.accent-primary::before {
  background: linear-gradient(90deg, var(--primary-mid) 0%, var(--amber-400) 100%);
}
.page-hero.accent-success::before {
  background: linear-gradient(90deg, var(--success) 0%, #34d399 100%);
}
.page-hero.accent-warning::before {
  background: linear-gradient(90deg, var(--warning) 0%, var(--amber-400) 100%);
}

.page-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.page-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
  flex-shrink: 0;
}
.accent-primary .page-hero-icon {
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
}
.accent-success .page-hero-icon {
  background: linear-gradient(135deg, #10b981, var(--success));
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
.accent-warning .page-hero-icon {
  background: linear-gradient(135deg, var(--amber-400), var(--warning));
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}
.page-hero-copy { flex: 1; min-width: 0; }
.page-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 2px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page-hero-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.page-hero-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- Config chip (shared) ---------- */
.config-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid rgba(30, 64, 175, 0.1);
  white-space: nowrap;
}
.config-chip svg { opacity: 0.85; flex-shrink: 0; }
.config-chip.is-success {
  background: #ecfdf5;
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.15);
}
.config-chip.is-warning {
  background: #fef3c7;
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.15);
}

/* ---------- Empty state premium ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-card);
  color: var(--text-muted);
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.empty-state h3 {
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.empty-state p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 340px;
}

/* ---------- Result cards — polish ---------- */
.result-card {
  position: relative;
  overflow: hidden;
}
.result-card.result-success::before,
.result-card.result-warning::before,
.result-card.result-error::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
}
.result-card.result-success::before { background: var(--success); }
.result-card.result-warning::before { background: var(--warning); }
.result-card.result-error::before { background: var(--danger); }

/* ---------- Section header badges ---------- */
.form-section-header .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Advanced toggle — shared ---------- */
.advanced-toggle {
  display: flex;
  justify-content: center;
  margin: var(--space-3) 0;
}
.advanced-toggle .accordion-toggle {
  width: auto;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-card);
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--duration) var(--ease);
  font-family: inherit;
}
.advanced-toggle .accordion-toggle:hover {
  background: var(--primary-light);
  border-color: var(--primary-mid);
}

/* ---------- CTA hint ---------- */
.cta-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  padding-top: 4px;
  font-weight: 500;
}

/* ---------- Visual option cards (shared pattern) ---------- */
.option-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: var(--surface-card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-input);
  text-align: left;
  transition: all var(--duration) var(--ease);
  cursor: pointer;
  font-family: inherit;
}
.option-card:hover {
  border-color: var(--primary-mid);
  background: var(--primary-light);
}
.option-card.active {
  background: var(--primary-light);
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.option-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.option-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.2;
}
.option-card.active .option-card-title { color: var(--primary-dark); }
.option-card-code {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  background: var(--surface-muted);
  color: var(--text-muted);
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.option-card.active .option-card-code {
  background: var(--primary);
  color: white;
}
.option-card-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .page-hero { padding: 16px; }
  .page-hero-icon { width: 40px; height: 40px; border-radius: 10px; }
  .page-hero-title { font-size: 18px; }
  .option-cards-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .page-hero { padding: 22px 24px; }
  .page-hero-icon { width: 48px; height: 48px; }
  .page-hero-title { font-size: 22px; }
}

/* =========================================================
   AUTH + PAKET + CART POLISH (v6.1)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Auth premium ---------- */
.auth-wrap {
  background:
    radial-gradient(circle at 15% 0%, rgba(59, 130, 246, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(251, 191, 36, 0.10) 0%, transparent 45%),
    var(--surface);
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.auth-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.3);
}
.auth-brand-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.auth-brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

.auth-status-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
}
.auth-status-icon.is-success {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: var(--success);
  box-shadow: 0 0 0 8px rgba(220, 252, 231, 0.5);
}
.auth-status-icon.is-pending {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
  box-shadow: 0 0 0 8px rgba(254, 243, 199, 0.5);
}

.auth-info-box {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0;
  text-align: left;
}
.auth-info-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.auth-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.auth-info-item svg { flex-shrink: 0; margin-top: 2px; }
.auth-info-item.is-yes svg { color: var(--success); }
.auth-info-item.is-no svg { color: var(--danger); }

.auth-foot {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-foot a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.auth-foot a:hover { text-decoration: underline; }

/* ---------- Paket card (bank-soal) ---------- */
.paket-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
}
.paket-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--surface-muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.paket-stat.is-public {
  background: #ecfdf5;
  color: #065f46;
}
.paket-stat svg { opacity: 0.8; flex-shrink: 0; }

/* ---------- Cart sticky bar (kotak) ---------- */
.cart-sticky-bar {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--surface) 60%, transparent);
  padding: 16px 0;
  margin-top: auto;
  z-index: 10;
}
.cart-sticky-inner {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  box-shadow: var(--shadow-lift);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cart-sticky-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.cart-sticky-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cart-sticky-stat span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.cart-sticky-stat b {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cart-sticky-inner .btn-primary {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}

@media (max-width: 520px) {
  .cart-sticky-inner { flex-direction: column; }
  .cart-sticky-inner .btn-primary { max-width: none; width: 100%; }
  .auth-brand-mark { width: 44px; height: 44px; border-radius: 12px; }
  .auth-brand-name { font-size: 18px; }
}

/* =========================================================
   EXPORT PAGE PREMIUM (v6.2)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Export receipt (summary visual) ---------- */
.export-receipt {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.export-receipt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-mid) 0%, var(--amber-400) 100%);
}
.export-receipt-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.export-receipt-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
}
.export-receipt-headinfo { flex: 1; min-width: 0; }
.export-receipt-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.export-receipt-filename {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-900);
  word-break: break-all;
  line-height: 1.3;
}
.export-receipt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 14px;
}
.export-receipt-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.export-receipt-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.export-receipt-stat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.export-receipt-compo {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

/* ---------- Bridge CTA (dark premium) ---------- */
.export-bridge {
  position: relative;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--primary) 100%);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 16px;
  color: white;
  overflow: hidden;
}
.export-bridge::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, transparent 70%);
  top: -160px; right: -120px;
  pointer-events: none;
}
.export-bridge::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  pointer-events: none;
}
.export-bridge-head {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.export-bridge-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.export-bridge-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}
.export-bridge-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.export-bridge-actions .btn-primary {
  background: white;
  color: var(--primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  height: 52px;
  font-size: 15px;
}
.export-bridge-actions .btn-primary:hover:not(:disabled) {
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.export-bridge-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  height: 44px;
}
.export-bridge-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}
.export-bridge-split {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.export-bridge-split > button {
  flex: 1;
  min-width: 140px;
}
.export-bridge-divider {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}
.export-bridge .save-hint {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-input);
  padding: 14px 16px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}
.export-bridge .save-hint .btn-primary {
  background: white;
  color: var(--primary);
  margin-top: 10px;
  height: 40px;
  font-size: 13px;
}

/* ---------- Steps collapsible ---------- */
.export-steps-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.export-steps-details summary {
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--navy-900);
  font-size: 14px;
  user-select: none;
  transition: background var(--duration) var(--ease);
}
.export-steps-details summary:hover { background: var(--surface-muted); }
.export-steps-details summary::-webkit-details-marker { display: none; }
.export-steps-details summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--text-muted);
  font-size: 16px;
  transition: transform 0.2s;
}
.export-steps-details[open] summary::after { transform: rotate(180deg); }
.export-steps-details summary svg { color: var(--primary); flex-shrink: 0; }
.export-steps-details-body {
  padding: 0 20px 20px;
  border-top: 1px dashed var(--border);
  padding-top: 16px;
}

/* ---------- Success modal premium ---------- */
.export-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 0 8px rgba(220, 252, 231, 0.5);
}

/* ---------- Image warning polish ---------- */
.img-warning-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 12px 14px;
  background: white;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
}
.img-warning-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  color: #92400e;
}
.img-warning-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

@media (max-width: 520px) {
  .export-bridge { padding: 20px 16px; }
  .export-receipt-stats { grid-template-columns: 1fr 1fr; }
  .export-receipt-icon { width: 40px; height: 40px; border-radius: 10px; }
}

/* =========================================================
   LANDING PREMIUM POLISH (v7)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Hero CTA ghost (outline putih) ---------- */
.cta-button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-input);
  backdrop-filter: blur(8px);
  transition: all var(--duration) var(--ease);
  font-family: inherit;
  cursor: pointer;
}
.cta-button-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

/* Hero float badge */
.hero-float-badge {
  position: absolute;
  top: -12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  color: var(--navy-900);
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(251, 191, 36, 0.4);
  letter-spacing: -0.01em;
  animation: floatY 3s ease-in-out infinite;
}
.hero-float-badge svg { color: var(--amber-500); }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- Section eyebrow (label kecil di atas h2) ---------- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  margin-bottom: 12px;
  border: 1px solid rgba(30, 64, 175, 0.1);
}
.section-eyebrow svg { opacity: 0.85; }

/* Section header lebih lega */
.section-header { margin-bottom: var(--space-10); }
.section-header h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .section-header h2 { font-size: 36px; }
}
.section-header p {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- Bridge nodes polish ---------- */
.bridge-node {
  position: relative;
  transition: all var(--duration) var(--ease);
}
.bridge-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--primary-mid);
}
.bridge-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.bridge-icon.is-primary {
  background: linear-gradient(135deg, var(--primary-light), #bfdbfe);
  color: var(--primary);
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.2);
}
.bridge-icon.is-amber {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.2);
}
.bridge-node h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.bridge-node p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.bridge-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.bridge-chips .config-chip { font-size: 10.5px; padding: 3px 8px; }

/* Bridge arrow (dashed with label) */
.bridge-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  min-width: 100px;
}
.bridge-arrow-line {
  width: 100%;
  height: 0;
  border-top: 2px dashed var(--border-strong);
}
.bridge-arrow-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: white;
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 999px;
  border: 1.5px solid var(--primary-light);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .bridge-arrow {
    flex-direction: row;
    gap: 10px;
    min-width: 0;
    flex: 0 1 180px;
  }
  .bridge-arrow-line { flex: 1; }
}

/* Section CTA inline */
.section-cta-inline {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

/* ---------- Feature card tones ---------- */
.feature-card {
  position: relative;
  overflow: hidden;
  transition: all var(--duration) var(--ease);
  text-align: left;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.feature-card:hover::before { opacity: 1; }

.feature-card.tone-blue::before { background: linear-gradient(90deg, #3b82f6, #1e40af); }
.feature-card.tone-blue .feature-icon-wrapper {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: var(--primary);
}
.feature-card.tone-amber::before { background: linear-gradient(90deg, #fbbf24, #d97706); }
.feature-card.tone-amber .feature-icon-wrapper {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}
.feature-card.tone-purple::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.feature-card.tone-purple .feature-icon-wrapper {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
}
.feature-card.tone-green::before { background: linear-gradient(90deg, #34d399, #059669); }
.feature-card.tone-green .feature-icon-wrapper {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
}

.feature-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  transition: transform var(--duration) var(--ease);
}
.feature-card:hover .feature-icon-wrapper { transform: scale(1.08) rotate(-3deg); }
.feature-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.feature-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Creator card ---------- */
.section-creator { background: white; }
.creator-card {
  max-width: 620px;
  margin: 0 auto;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.creator-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-mid) 0%, var(--amber-400) 100%);
}
.creator-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  color: white;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.3);
  letter-spacing: 0.02em;
}
.creator-info { flex: 1; min-width: 0; }
.creator-info h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.creator-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.creator-meta svg { color: var(--primary); }
.creator-quote {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
  padding: 12px 14px;
  background: var(--surface-muted);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 14px;
}
.creator-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.creator-links a {
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.creator-links a:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
@media (max-width: 520px) {
  .creator-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
  }
  .creator-avatar { width: 56px; height: 56px; font-size: 20px; }
  .creator-meta { justify-content: center; display: flex; }
  .creator-links { justify-content: center; }
}

/* ---------- Final CTA ---------- */
.section-final-cta { padding: 60px 0 80px; background: white; }
.final-cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--primary) 100%);
  border-radius: 24px;
  padding: 60px 32px;
  text-align: center;
  color: white;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(10, 22, 40, 0.25);
}
.final-cta-bg-1 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  pointer-events: none;
}
.final-cta-bg-2 {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  pointer-events: none;
}
.final-cta-content { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.final-cta-card h2 {
  font-size: 28px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.final-cta-card p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 28px;
  line-height: 1.6;
}
.final-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.final-cta-actions .cta-button {
  height: 52px;
  padding: 0 28px;
  font-size: 15px;
}
@media (max-width: 520px) {
  .final-cta-card { padding: 44px 24px; }
  .final-cta-card h2 { font-size: 22px; }
  .final-cta-card p { font-size: 14px; }
  .final-cta-actions { flex-direction: column; }
  .final-cta-actions .cta-button,
  .final-cta-actions .cta-button-ghost { width: 100%; }
}

/* Landing section consistency */
.section-ekosistem { background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-steps { background: var(--surface); }
.section-features { background: white; border-top: 1px solid var(--border); }
.section-creator { border-top: 1px solid var(--border); }
.section-faq { background: var(--surface); border-top: 1px solid var(--border); }

/* Header nav link hover polish */
.header-nav a {
  position: relative;
  padding: 6px 2px;
}
.header-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--amber-400);
  transition: all var(--duration) var(--ease);
  transform: translateX(-50%);
}
.header-nav a:hover::after { width: 100%; }

/* Footer copy polish */
.footer-copy {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}
.footer-copy b { color: white; font-weight: 700; }

/* =========================================================
   PREVIEW EDIT MODAL + COPY CHIP + AVATAR (v7.1)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Copy Chip ---------- */
.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: white;
  border: 1px solid rgba(30, 64, 175, 0.2);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
}
.copy-chip:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30, 64, 175, 0.2);
}
.copy-chip.copied {
  background: #ecfdf5;
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: none;
}
.copy-chip.copied:hover {
  background: #d1fae5;
  color: #065f46;
  transform: none;
}
.copy-chip.error {
  background: #fef2f2;
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.3);
}
.copy-chip svg { flex-shrink: 0; }

/* ---------- Soal image badge restructure ---------- */
.soal-img-badge {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: var(--space-3);
  border: 1px solid rgba(30, 64, 175, 0.1);
}
.soal-img-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  line-height: 1.3;
  flex-wrap: wrap;
}
.soal-img-row b {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  background: rgba(30, 64, 175, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
}
.soal-img-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(30, 64, 175, 0.2);
  flex-wrap: wrap;
}
.soal-img-ref-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--primary-dark);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.soal-img-ref-text i {
  font-style: italic;
  font-weight: 500;
}

/* ---------- Soal Edit Modal ---------- */
.soal-edit-backdrop {
  z-index: 1100;
}
.soal-edit-modal {
  max-width: 680px;
  position: relative;
}
.soal-edit-modal .modal-title {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.soal-edit-modal .modal-title svg { flex-shrink: 0; }
.soal-edit-modal .modal-title .soal-badge {
  font-size: 10.5px;
  padding: 3px 8px;
}
.soal-edit-modal .modal-body {
  padding: 20px;
}
.soal-edit-modal .form-field { margin-bottom: 16px; }
.soal-edit-modal .form-field:last-child { margin-bottom: 0; }

/* Better textarea & input di dalam modal */
.soal-edit-modal .edit-textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface-card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 60px;
  transition: all var(--duration) var(--ease);
}
.soal-edit-modal .edit-textarea:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.soal-edit-modal .edit-input {
  flex: 1;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-card);
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  transition: all var(--duration) var(--ease);
}
.soal-edit-modal .edit-input:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Footer buttons */
.soal-edit-modal .modal-footer {
  gap: 10px;
}
.soal-edit-modal .modal-footer button {
  flex: 1;
  max-width: 200px;
}

/* ---------- Unsaved confirm overlay ---------- */
.soal-edit-confirm {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 3;
  border-radius: inherit;
  animation: fadeIn 0.2s var(--ease-out);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.soal-edit-confirm-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  animation: scaleIn 0.2s var(--ease-out);
}
@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.soal-edit-confirm-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.soal-edit-confirm-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.soal-edit-confirm-actions {
  display: flex;
  gap: 8px;
}
.soal-edit-confirm-actions button {
  flex: 1;
  height: 44px;
  font-size: 13px;
}

/* ---------- Creator Avatar (foto + fallback) ---------- */
.creator-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  color: white;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.3);
  letter-spacing: 0.02em;
  overflow: hidden;
  position: relative;
}
.creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.creator-avatar span {
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 640px) {
  .soal-edit-modal {
    max-height: 95dvh;
    border-radius: 20px 20px 0 0;
  }
  .soal-edit-modal .modal-body { padding: 16px; }
  .soal-edit-modal .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .soal-edit-modal .modal-footer button {
    max-width: none;
    width: 100%;
  }
  .soal-img-ref {
    flex-direction: column;
    align-items: flex-start;
  }
  .soal-img-ref-text { width: 100%; }
}
/* =========================================================
   EXPORT AUDIT FIX (v7.2)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- btn-glass: tombol di atas background gelap ---------- */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-input);
  transition: all var(--duration) var(--ease);
  min-height: 44px;
  font-family: inherit;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: white;
  backdrop-filter: blur(8px);
}
.btn-glass:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}
.btn-glass:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-glass.w-full { width: 100%; }

/* Override .btn-secondary khusus di dalam export-bridge agar tidak jadi putih */
.export-bridge .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: white;
  backdrop-filter: blur(8px);
}
.export-bridge .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- Chip purple untuk B/S ---------- */
.config-chip.is-purple {
  background: #ede9fe;
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.15);
}

/* ---------- Hint durasi/summary ---------- */
.field-hint-inline {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}
.field-hint-inline.is-warn { color: var(--warning); }
.field-hint-inline.is-info { color: var(--primary); }

/* ---------- Status info card (pending user) ---------- */
.export-status-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--radius-input);
  color: white;
  backdrop-filter: blur(8px);
}
.export-status-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.2);
  color: var(--amber-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.export-status-card-body {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.export-status-card-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  color: white;
}
.export-status-card-desc {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Settings acak: radio-card row di dalam form-field ---------- */
.export-bridge + .form-actions button { width: 100%; }

/* =========================================================
   TKA PLAYER — SISWA TRYOUT MANDIRI (v8)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Player Shell ---------- */
.player-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.player-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.player-back {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0; cursor: pointer;
  transition: all 0.2s; background: none; border: none;
}
.player-back:hover { background: var(--surface-muted); color: var(--text); }

.player-progress-info { flex: 1; min-width: 0; }
.player-progress-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  display: flex; gap: 6px; align-items: baseline;
}
.player-progress-label b { color: var(--text); font-weight: 800; font-size: 13px; }
.player-progress-bar {
  height: 4px; background: var(--surface-muted);
  border-radius: 2px; overflow: hidden; margin-top: 6px;
}
.player-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-mid), var(--primary));
  transition: width 0.3s var(--ease);
}

.player-timer {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: var(--primary-light); color: var(--primary);
  border-radius: 999px; font-size: 12.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.player-timer.warn { background: #fef3c7; color: #92400e; }
.player-timer.danger { background: #fee2e2; color: var(--danger); animation: pulseTimer 1s infinite; }
@keyframes pulseTimer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.player-content {
  flex: 1;
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.player-footer {
  position: sticky; bottom: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 720px; margin: 0 auto; width: 100%;
}
.player-nav-row { display: flex; gap: 8px; align-items: center; }
.player-nav-btn {
  flex: 1; height: 44px; border-radius: var(--radius-input);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-card); color: var(--text);
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.player-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.player-nav-btn:hover:not(:disabled) {
  border-color: var(--primary-mid); color: var(--primary); background: var(--primary-light);
}
.player-grid-btn {
  width: 44px; height: 44px; border-radius: var(--radius-input);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-card); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.player-grid-btn:hover { border-color: var(--primary-mid); color: var(--primary); }

/* ---------- Upload ---------- */
.upload-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-card);
  cursor: pointer; text-align: center;
  transition: all var(--duration) var(--ease);
}
.upload-dropzone:hover, .upload-dropzone.dragover {
  border-color: var(--primary-mid); background: var(--primary-light);
}
.upload-dropzone-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.upload-dropzone h3 { font-size: 16px; font-weight: 800; color: var(--navy-900); margin: 0; }
.upload-dropzone p { font-size: 13px; color: var(--text-muted); margin: 0; max-width: 340px; line-height: 1.5; }

.upload-paste-area {
  margin-top: 12px; padding: 12px;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-input);
}
.upload-paste-area textarea {
  width: 100%; padding: 10px;
  font-family: 'SF Mono', Menlo, monospace; font-size: 12px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  resize: vertical; min-height: 100px; font-family: 'SF Mono', monospace;
}

/* ---------- Briefing ---------- */
.briefing-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 20px;
  box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.briefing-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.briefing-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
.briefing-mode-card {
  padding: 14px; border: 2px solid var(--border-strong);
  border-radius: var(--radius-input); background: var(--surface-card);
  cursor: pointer; transition: all var(--duration) var(--ease);
  font-family: inherit; text-align: left;
}
.briefing-mode-card:hover { border-color: var(--primary-mid); }
.briefing-mode-card.active {
  border-color: var(--primary-mid); background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.briefing-mode-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: white; color: var(--primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.briefing-mode-title { font-size: 14px; font-weight: 800; color: var(--navy-900); margin-bottom: 4px; }
.briefing-mode-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

/* ---------- Question Runner ---------- */
.qr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qr-number { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.qr-question {
  font-size: 15.5px; line-height: 1.6; color: var(--text);
  margin-bottom: 18px; white-space: pre-wrap; font-weight: 500;
}
.qr-options { display: flex; flex-direction: column; gap: 8px; }
.qr-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface-card);
  border: 2px solid var(--border); border-radius: var(--radius-input);
  cursor: pointer; transition: all var(--duration) var(--ease);
  font-family: inherit; text-align: left; width: 100%;
  font-size: 14px; line-height: 1.5; color: var(--text);
}
.qr-option:hover:not(:disabled) { border-color: var(--primary-mid); background: var(--primary-light); }
.qr-option.selected { border-color: var(--primary); background: var(--primary-light); }
.qr-option.correct { border-color: var(--success); background: #f0fdf4; }
.qr-option.wrong { border-color: var(--danger); background: #fef2f2; }
.qr-option-key {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-muted); color: var(--text-muted);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--duration) var(--ease);
}
.qr-option.selected .qr-option-key { background: var(--primary); color: white; }
.qr-option.correct .qr-option-key { background: var(--success); color: white; }
.qr-option.wrong .qr-option-key { background: var(--danger); color: white; }
.qr-option.checkbox .qr-option-key { border-radius: 4px; }
.qr-option-text { flex: 1; }

.qr-bs-list { display: flex; flex-direction: column; gap: 10px; }
.qr-bs-item {
  background: var(--surface-card); border: 2px solid var(--border);
  border-radius: var(--radius-input); padding: 12px 14px;
}
.qr-bs-item.correct { border-color: var(--success); background: #f0fdf4; }
.qr-bs-item.wrong { border-color: var(--danger); background: #fef2f2; }
.qr-bs-teks { font-size: 14px; line-height: 1.5; margin-bottom: 10px; color: var(--text); }
.qr-bs-actions { display: flex; gap: 8px; }
.qr-bs-btn {
  flex: 1; height: 38px; border-radius: 8px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-muted);
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all var(--duration) var(--ease);
  font-family: inherit;
}
.qr-bs-btn.active-true { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.qr-bs-btn.active-false { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.qr-bs-btn:hover:not(:disabled) { border-color: var(--primary-mid); }
.qr-bs-key-info { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ---------- Grid modal ---------- */
.grid-bottom-sheet {
  position: fixed; inset: 0;
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.grid-sheet-content {
  width: 100%; max-width: 560px;
  background: white; border-radius: 20px 20px 0 0;
  padding: 20px; max-height: 80dvh; overflow-y: auto;
  animation: slideUp 0.25s var(--ease-out);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.grid-sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.grid-sheet-title { font-size: 16px; font-weight: 800; color: var(--navy-900); }
.grid-sheet-close {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.grid-sheet-numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.grid-num {
  aspect-ratio: 1; border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface-card); color: var(--text-muted);
  font-weight: 700; font-size: 13px;
  cursor: pointer; transition: all var(--duration) var(--ease);
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.grid-num.answered { background: var(--primary-light); color: var(--primary); border-color: var(--primary-mid); }
.grid-num.current {
  background: var(--primary); color: white; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
}
.grid-sheet-legend {
  display: flex; gap: 16px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.grid-sheet-legend span { display: inline-flex; align-items: center; gap: 6px; }
.grid-sheet-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* ---------- Score Report ---------- */
.score-hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--primary) 100%);
  border-radius: var(--radius-card);
  padding: 32px 24px; text-align: center; color: white;
  overflow: hidden; margin-bottom: 16px;
}
.score-hero::before {
  content: ''; position: absolute;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
  top: -150px; right: -100px;
}
.score-hero::after {
  content: ''; position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  bottom: -100px; left: -80px;
}
.score-hero > * { position: relative; z-index: 1; }
.score-hero-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7); font-weight: 700; margin-bottom: 8px;
}
.score-hero-value {
  font-size: 64px; font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; margin-bottom: 4px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.score-hero-total {
  font-size: 18px; color: rgba(255, 255, 255, 0.6);
  font-weight: 700; margin-bottom: 12px;
}
.score-hero-pct {
  display: inline-block; padding: 6px 14px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; font-size: 13px; font-weight: 700;
}

.score-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.score-stat {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-input); padding: 14px; text-align: center;
}
.score-stat-value { font-size: 20px; font-weight: 800; color: var(--navy-900); line-height: 1; margin-bottom: 4px; }
.score-stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.score-stat.correct { border-color: #bbf7d0; background: #f0fdf4; }
.score-stat.correct .score-stat-value { color: var(--success); }
.score-stat.wrong { border-color: #fecaca; background: #fef2f2; }
.score-stat.wrong .score-stat-value { color: var(--danger); }

.score-type-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.score-type-label {
  display: flex; align-items: center; gap: 5px;
  min-width: 70px; font-size: 12px; font-weight: 700; color: var(--text);
}
.score-type-bar { flex: 1; height: 8px; background: var(--surface-muted); border-radius: 4px; overflow: hidden; }
.score-type-fill { height: 100%; background: linear-gradient(90deg, var(--primary-mid), var(--primary)); transition: width 0.4s var(--ease); }
.score-type-value { font-size: 12px; font-weight: 800; color: var(--navy-900); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

.meta-strip {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--surface-muted); border-radius: var(--radius-input);
  font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.meta-strip span { display: inline-flex; align-items: center; gap: 4px; }

.review-list { display: flex; flex-direction: column; gap: 8px; }
.review-item {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-input); overflow: hidden;
  transition: all var(--duration) var(--ease);
}
.review-item.correct { border-left: 4px solid var(--success); }
.review-item.wrong { border-left: 4px solid var(--danger); }
.review-item.empty { border-left: 4px solid var(--text-subtle); }
.review-item summary {
  padding: 12px 14px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; user-select: none;
}
.review-item summary::-webkit-details-marker { display: none; }
.review-item summary::after {
  content: '▾'; margin-left: auto; color: var(--text-muted);
  transition: transform 0.2s;
}
.review-item[open] summary::after { transform: rotate(180deg); }
.review-item-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.review-item.correct .review-item-icon { background: #d1fae5; color: var(--success); }
.review-item.wrong .review-item-icon { background: #fee2e2; color: var(--danger); }
.review-item.empty .review-item-icon { background: var(--surface-muted); color: var(--text-subtle); }
.review-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.review-item-body { padding: 12px 14px 14px; border-top: 1px dashed var(--border); }

/* ---------- History ---------- */
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-input);
  transition: all var(--duration) var(--ease);
}
.history-item:hover { border-color: var(--primary-mid); }
.history-score-badge {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; flex-shrink: 0;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.history-score-badge small { font-size: 9px; font-weight: 600; margin-top: 2px; opacity: 0.7; }
.history-info { flex: 1; min-width: 0; }
.history-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.history-meta { font-size: 11px; color: var(--text-muted); }

/* ---------- Landing: Untuk Siswa ---------- */
.section-for-student { padding: 60px 0; background: white; border-top: 1px solid var(--border); }
.student-bridge-card {
  display: flex; gap: 16px; align-items: center;
  padding: 20px 22px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.student-bridge-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #10b981, var(--success));
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.25);
}
.student-bridge-body { flex: 1; min-width: 200px; }
.student-bridge-eyebrow {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: #065f46; margin-bottom: 4px;
}
.student-bridge-body h3 {
  font-size: 17px; font-weight: 800; color: var(--navy-900);
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.student-bridge-body h3 code {
  font-family: 'SF Mono', monospace; font-size: 14px;
  background: rgba(5, 150, 105, 0.15); padding: 1px 6px; border-radius: 4px;
}
.student-bridge-body p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.student-bridge-cta { flex-shrink: 0; }

@media (max-width: 640px) {
  .player-content { padding: 12px; }
  .player-footer { padding: 10px 12px; }
  .player-timer { font-size: 11.5px; padding: 5px 10px; }
  .score-hero { padding: 24px 18px; }
  .score-hero-value { font-size: 52px; }
  .qr-question { font-size: 15px; }
  .briefing-modes { grid-template-columns: 1fr; }
  .grid-sheet-numbers { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .student-bridge-card { flex-direction: column; text-align: center; }
  .student-bridge-cta { width: 100%; }
  .score-stats { gap: 6px; }
}

/* =========================================================
   TKA PLAYER v8.1 — Aligned dengan TKA Local Host
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Welcome / Briefing Card ---------- */
.player-welcome-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(circle at 15% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
    var(--surface);
}
.player-welcome-card {
  width: 100%;
  max-width: 480px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: var(--shadow-lift);
}
.player-welcome-header { text-align: center; margin-bottom: 20px; }
.player-welcome-kemen {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.player-welcome-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.player-welcome-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Dropzone */
.player-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px dashed var(--border-strong);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s var(--ease);
  margin-bottom: 12px;
}
.player-dropzone:hover,
.player-dropzone.dragover {
  border-color: var(--primary-mid);
  background: var(--primary-light);
}
.player-dropzone-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.player-dropzone-title { font-size: 15px; font-weight: 800; color: var(--navy-900); }
.player-dropzone-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* Image info pill */
.player-img-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 12px;
}
.player-img-clear {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.15);
  color: #065f46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  cursor: pointer;
  border: none;
}
.player-img-clear:hover { background: rgba(5, 150, 105, 0.3); }

/* Paste toggle */
.player-paste-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin: 8px 0;
}
.player-paste-toggle:hover { text-decoration: underline; }
.player-paste-area { margin-bottom: 12px; }
.player-paste-area textarea {
  width: 100%;
  padding: 10px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  resize: vertical;
  min-height: 100px;
}

/* Resume card */
.player-resume-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  margin-bottom: 14px;
}
.player-resume-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.player-resume-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player-resume-body b { font-size: 13px; color: var(--text); }
.player-resume-body span { font-size: 11.5px; color: #92400e; }
.player-resume-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* History preview */
.player-history-preview {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.player-history-preview-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.player-history-more {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--primary);
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
}
.player-history-more:hover { text-decoration: underline; }

/* Form fields (Briefing) */
.player-field { margin-bottom: 14px; }
.player-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.player-field input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--text);
  transition: all 0.2s;
}
.player-field input:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.player-welcome-copyright {
  text-align: center;
  font-size: 11px;
  color: var(--text-subtle);
  margin: 16px 0 0;
}

/* ---------- EXAM SHELL ---------- */
.player-exam-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.player-exam-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.player-exam-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-exam-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
  color: white;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: 0 3px 8px rgba(30, 64, 175, 0.25);
}
.player-exam-user { min-width: 0; }
.player-exam-user-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-exam-user-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-exam-header-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.player-exam-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.player-exam-timer.warn { background: #fef3c7; color: #92400e; }
.player-exam-timer.danger { background: #fee2e2; color: var(--danger); animation: pulseTimer 1s infinite; }
@keyframes pulseTimer { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }

.player-exam-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1.5px solid var(--border-strong);
  background: white;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.player-exam-menu-btn:hover { border-color: var(--primary-mid); color: var(--primary); }

.player-exam-progress {
  height: 3px;
  background: var(--surface-muted);
  position: sticky;
  top: 57px;
  z-index: 29;
}
.player-exam-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-mid), var(--primary));
  transition: width 0.3s var(--ease);
}

.player-exam-main {
  flex: 1;
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 100px;
}

.player-wacana-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(30, 64, 175, 0.15);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
  font-family: inherit;
}
.player-wacana-pill:hover { background: var(--primary); color: white; }

.player-exam-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.player-exam-nav,
.player-exam-ragu {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: white;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.player-exam-nav:hover:not(:disabled) { border-color: var(--primary-mid); color: var(--primary); background: var(--primary-light); }
.player-exam-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.player-exam-nav.primary {
  background: var(--primary);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2);
  flex: 1.4;
}
.player-exam-nav.primary:hover:not(:disabled) {
  background: var(--primary-dark);
  color: white;
}
.player-exam-ragu {
  flex: 0 0 auto;
  padding: 0 14px;
  min-width: 80px;
}
.player-exam-ragu.active {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

/* ---------- SIDEBAR DRAWER ---------- */
.player-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
.player-sidebar-drawer {
  width: 100%;
  max-width: 380px;
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  animation: slideInRight 0.25s var(--ease-out);
  overflow-y: auto;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.player-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.player-sidebar-head h3 { font-size: 16px; font-weight: 800; color: var(--navy-900); margin: 0; }
.player-sidebar-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.player-sidebar-close:hover { background: var(--surface-muted); }

.player-sidebar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.player-sidebar-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px;
  background: var(--surface-muted);
  border-radius: 10px;
}
.player-sidebar-stats b { font-size: 18px; font-weight: 800; color: var(--navy-900); line-height: 1; }
.player-sidebar-stats span { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

.player-sidebar-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  background: var(--surface-muted);
  border-radius: 8px;
  margin-bottom: 12px;
}
.player-sidebar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.player-sidebar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.player-sidebar-legend .dot-answered { background: var(--primary-light); border: 1px solid var(--primary-mid); }
.player-sidebar-legend .dot-ragu { background: #fef3c7; border: 1px solid #fcd34d; }
.player-sidebar-legend .dot-empty { background: var(--surface-card); border: 1px solid var(--border-strong); }
.player-sidebar-legend .dot-current { background: var(--primary); }

.player-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.player-nav-num {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface-card);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-nav-num.answered { background: var(--primary-light); color: var(--primary); border-color: var(--primary-mid); }
.player-nav-num.ragu { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.player-nav-num.current {
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
  transform: scale(1.05);
}
.player-nav-num.current.answered { background: var(--primary); color: white; border-color: var(--primary); }
.player-nav-num.current.ragu { background: #f59e0b; color: white; border-color: #f59e0b; }
.player-nav-num.current.empty { background: var(--primary); color: white; border-color: var(--primary); }
.player-nav-num:hover:not(.current) { border-color: var(--primary-mid); }

/* ---------- RAGU BADGE in QuestionRunner ---------- */
.qr-flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: auto;
}

/* ---------- IMAGE in QuestionRunner ---------- */
.qr-image-wrap {
  margin: 0 0 16px;
  padding: 10px;
  background: var(--surface-muted);
  border-radius: 10px;
  border: 1px solid var(--border);
  text-align: center;
}
.qr-image {
  max-width: 100%;
  max-height: 340px;
  border-radius: 6px;
  cursor: zoom-in;
  display: block;
  margin: 0 auto;
  transition: transform 0.2s;
}
.qr-image:hover { transform: scale(1.01); }
.qr-image-caption {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
  line-height: 1.4;
}

.qr-image-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.qr-image-placeholder-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: white;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qr-image-placeholder-body { flex: 1; min-width: 160px; }
.qr-image-placeholder-title {
  font-size: 12.5px;
  color: #92400e;
  margin-bottom: 2px;
  word-break: break-all;
}
.qr-image-placeholder-title b {
  font-family: 'SF Mono', Menlo, monospace;
  background: rgba(217, 119, 6, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11.5px;
}
.qr-image-placeholder-desc {
  font-size: 11px;
  color: #92400e;
  opacity: 0.8;
  line-height: 1.4;
}
.qr-image-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: white;
  border: 1px solid #fcd34d;
  color: #92400e;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.qr-image-search-btn:hover { background: #fef3c7; }

/* ---------- LIGHTBOX ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
  animation: fadeIn 0.2s var(--ease-out);
}
.lightbox-image {
  max-width: 95vw;
  max-height: 90dvh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

/* ---------- DONE VIEW ---------- */
.player-done-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(5, 150, 105, 0.1) 0%, transparent 50%),
    var(--surface);
}
.player-done-card {
  width: 100%;
  max-width: 440px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: var(--shadow-lift);
  text-align: center;
}
.player-done-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 0 8px rgba(220, 252, 231, 0.5);
}
.player-done-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0 0 4px;
}
.player-done-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.player-done-sub b { color: var(--text); font-weight: 700; }
.player-done-score {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--primary) 100%);
  border-radius: 16px;
  padding: 20px;
  color: white;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.player-done-score::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
  top: -100px;
  right: -60px;
}
.player-done-score > * { position: relative; }
.player-done-score-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  margin-bottom: 6px;
}
.player-done-score-value {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.player-done-score-value small {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}
.player-done-score-pct {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
}

.player-done-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}
.player-done-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 4px;
  background: var(--surface-muted);
  border-radius: 8px;
  text-align: center;
}
.player-done-stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.player-done-stat b {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.player-done-actions { display: flex; flex-direction: column; gap: 8px; }
.player-done-copyright {
  text-align: center;
  font-size: 11px;
  color: var(--text-subtle);
  margin: 16px 0 0;
}

/* ---------- REVIEW VIEW ---------- */
.player-review-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  min-height: 100dvh;
}
.player-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.player-review-header .btn-secondary {
  height: 36px;
  min-height: 0;
  padding: 6px 12px;
  font-size: 12px;
}
.player-review-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy-900);
  margin: 0;
  letter-spacing: -0.01em;
}
.player-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.player-review-score {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.player-review-score small {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 2px;
}

.review-list { display: flex; flex-direction: column; gap: 8px; }
.review-item {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  overflow: hidden;
  transition: all 0.2s;
}
.review-item.correct { border-left: 4px solid var(--success); }
.review-item.wrong { border-left: 4px solid var(--danger); }
.review-item.empty { border-left: 4px solid var(--text-subtle); }

.review-item-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.review-item-summary:hover { background: var(--surface-muted); }
.review-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-item.correct .review-item-icon { background: #d1fae5; color: var(--success); }
.review-item.wrong .review-item-icon { background: #fee2e2; color: var(--danger); }
.review-item.empty .review-item-icon { background: var(--surface-muted); color: var(--text-subtle); }
.review-item-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 28px;
  font-variant-numeric: tabular-nums;
}
.review-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-item-caret { color: var(--text-muted); flex-shrink: 0; }
.review-item-body { padding: 14px; border-top: 1px dashed var(--border); }

.player-review-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 520px) {
  .player-welcome-card { padding: 24px 20px; }
  .player-welcome-title { font-size: 20px; }
  .player-dropzone { padding: 24px 16px; }
  .player-exam-header { padding: 8px 12px; }
  .player-exam-user-name { font-size: 13px; }
  .player-exam-timer { font-size: 11.5px; padding: 5px 10px; }
  .player-exam-menu-btn { font-size: 11px; padding: 6px 10px; }
  .player-exam-nav-label { display: none; }
  .player-exam-nav, .player-exam-ragu { min-height: 44px; }
  .player-exam-footer { padding: 8px 12px; }
  .player-done-card { padding: 24px 20px; }
  .player-done-score-value { font-size: 48px; }
  .player-sidebar-drawer { max-width: none; border-radius: 20px 20px 0 0; height: auto; max-height: 85dvh; align-self: flex-end; }
  .player-nav-grid { grid-template-columns: repeat(5, 1fr); }
  .briefing-modes { grid-template-columns: 1fr; }
  .player-review-title { font-size: 16px; }
  .player-done-stats { grid-template-columns: 1fr 1fr; }
  .player-img-info { font-size: 11px; }
  .player-resume-card { flex-wrap: wrap; }
  .player-resume-actions { width: 100%; }
}
/* =========================================================
   STANDALONE PLAYER HINT + SHARE CARD (v8.2)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Hint di bottom WelcomeView (pengganti tombol kembali) */
.player-standalone-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-subtle);
  font-weight: 600;
  margin-top: 14px;
  padding: 8px;
  border-top: 1px dashed var(--border);
  letter-spacing: 0.02em;
}
.player-standalone-hint svg { opacity: 0.7; }

/* ---------- Export: Bagikan ke Siswa ---------- */
.export-share-card {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(30, 64, 175, 0.15);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.export-share-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.export-share-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(30, 64, 175, 0.2);
}
.export-share-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 3px;
  line-height: 1.2;
}
.export-share-desc {
  font-size: 12px;
  color: var(--primary-dark);
  line-height: 1.5;
}
.export-share-desc b { color: var(--primary); }

.export-share-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: white;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border: 1px solid rgba(30, 64, 175, 0.08);
}
.export-share-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.export-share-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.export-share-step b { color: var(--primary-dark); }

.export-share-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: white;
  border: 1.5px dashed rgba(30, 64, 175, 0.25);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.export-share-url {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.export-share-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(30, 64, 175, 0.2);
}
.export-share-copy-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.export-share-copy-btn.copied {
  background: var(--success);
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.25);
}

.export-share-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(30, 64, 175, 0.15);
  font-size: 11px;
  color: var(--primary-dark);
  font-weight: 500;
  line-height: 1.4;
}
.export-share-footer svg { flex-shrink: 0; opacity: 0.75; }

@media (max-width: 520px) {
  .export-share-link-row { flex-direction: column; align-items: stretch; }
  .export-share-copy-btn { justify-content: center; width: 100%; }
  .export-share-url { text-align: center; padding: 8px; }
}

/* =========================================================
   IMAGE TOOL (v9)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

.imgtool-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--primary-light);
  border: 1px solid rgba(30, 64, 175, 0.15);
  border-radius: var(--radius-input);
}
.imgtool-file-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: white;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.imgtool-file-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  font-family: 'SF Mono', Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imgtool-file-meta { font-size: 11.5px; color: var(--primary-dark); opacity: 0.75; margin-top: 2px; }

.imgtool-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.imgtool-image-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  overflow: hidden;
  transition: all var(--duration) var(--ease);
}
.imgtool-image-card:hover {
  border-color: var(--primary-mid);
  box-shadow: var(--shadow-sm);
}
.imgtool-image-preview {
  aspect-ratio: 4/3;
  background: var(--surface-muted);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imgtool-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imgtool-image-info { padding: 8px 10px 6px; }
.imgtool-image-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.imgtool-image-size { font-size: 10.5px; color: var(--text-muted); }
.imgtool-image-actions {
  display: flex;
  gap: 2px;
  padding: 4px 6px 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

.imgtool-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.imgtool-stat {
  padding: 10px 8px;
  border-radius: var(--radius-input);
  text-align: center;
  border: 1px solid var(--border);
}
.imgtool-stat.is-success { background: #ecfdf5; border-color: #bbf7d0; }
.imgtool-stat.is-warning { background: #fffbeb; border-color: #fcd34d; }
.imgtool-stat.is-neutral { background: var(--surface-muted); }
.imgtool-stat-value { font-size: 20px; font-weight: 900; color: var(--navy-900); line-height: 1; }
.imgtool-stat.is-success .imgtool-stat-value { color: var(--success); }
.imgtool-stat.is-warning .imgtool-stat-value { color: #92400e; }
.imgtool-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.imgtool-match-list { display: flex; flex-direction: column; gap: 6px; }
.imgtool-match-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border-left-width: 3px;
}
.imgtool-match-item.is-matched { border-left-color: var(--success); }
.imgtool-match-item.is-missing { border-left-color: var(--warning); background: #fffbeb; }
.imgtool-match-item.is-already { border-left-color: var(--primary-mid); }
.imgtool-match-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.imgtool-match-item.is-matched .imgtool-match-icon { background: #d1fae5; color: var(--success); }
.imgtool-match-item.is-missing .imgtool-match-icon { background: #fef3c7; color: #92400e; }
.imgtool-match-item.is-already .imgtool-match-icon { background: var(--primary-light); color: var(--primary); }
.imgtool-match-body { flex: 1; min-width: 0; }
.imgtool-match-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.imgtool-match-type {
  font-size: 9.5px;
  padding: 2px 5px;
  background: var(--surface-muted);
  color: var(--text-muted);
  border-radius: 3px;
  font-weight: 800;
}
.imgtool-match-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  word-break: break-all;
}
.imgtool-match-desc b {
  font-family: 'SF Mono', Menlo, monospace;
  color: var(--text);
  background: var(--surface-muted);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

.imgtool-success-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #ecfdf5;
  color: #065f46;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 520px) {
  .imgtool-image-grid { grid-template-columns: repeat(2, 1fr); }
  .imgtool-stats { gap: 6px; }
  .imgtool-stat-value { font-size: 17px; }
}
/* =========================================================
   IMAGE EDITOR in Preview Modal (v9.1)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* ---------- Image Preview di ViewMode ---------- */
.soal-img-preview {
  margin: 0 0 var(--space-3);
  padding: 8px;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.soal-img-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease);
}
.soal-img-thumb:hover { transform: scale(1.03); }
.soal-img-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.soal-img-caption-text {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.4;
}
.soal-img-filename {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'SF Mono', Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Image Editor di Modal ---------- */
.edit-img-editor {
  padding: 12px;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
}
.edit-img-preview {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
}
.edit-img-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
  background: var(--surface);
}
.edit-img-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}
.edit-img-actions .icon-btn {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.edit-img-actions .icon-btn:hover { background: var(--surface-muted); }
.edit-img-actions .icon-danger:hover { background: #fee2e2; }

.edit-img-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  padding: 0 4px;
}

.edit-img-warning {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: #fffbeb;
  color: #92400e;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.4;
}

.edit-img-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 24px 16px;
  background: white;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--duration) var(--ease);
}
.edit-img-upload-btn:hover:not(:disabled) {
  border-color: var(--primary-mid);
  background: var(--primary-light);
}
.edit-img-upload-btn:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 520px) {
  .soal-img-preview { flex-direction: column; }
  .soal-img-thumb { width: 100%; height: auto; max-height: 200px; }
  .edit-img-preview img { max-height: 180px; }
}
/* =========================================================
   AUTO-COMPRESS UI (v9.2)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Compress info di edit modal */
.edit-img-compress-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #065f46;
  line-height: 1.4;
  flex-wrap: wrap;
}
.edit-img-compress-info svg { flex-shrink: 0; color: var(--success); }
.edit-img-compress-info b {
  font-family: 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.edit-img-compress-badge {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--success);
  color: white;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.edit-img-skip-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #92400e;
  line-height: 1.4;
}

/* Compress badge di image-tool card */
.imgtool-save-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: var(--success);
  color: white;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}

.export-option-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.export-option-head {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.export-option-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.export-option-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 3px;
}
.export-option-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.export-option-desc code {
  font-family: 'SF Mono', Menlo, monospace;
  background: var(--surface-muted);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
}
.export-option-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.export-option-checkbox:hover { background: var(--surface-muted); }
.export-option-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  margin-top: 1px;
  flex-shrink: 0;
}
.export-option-checkbox > div {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.export-option-checkbox > div b { display: block; margin-bottom: 3px; }
.export-option-hint {
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 500;
}
/* =========================================================
   EXPORT DOWNLOAD PANEL v10.2 — Final Polish
   ========================================================= */

/* Panel Utama */
.export-download-panel {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--primary) 100%);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 22, 40, 0.25);
}
.export-download-panel::before {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
  top: -180px; right: -120px;
  pointer-events: none;
}
.export-download-panel > * { position: relative; z-index: 1; }

/* Header */
.export-download-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.export-download-header-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--amber-400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

/* PERBAIKAN: Paksa Judul jadi Putih */
.export-download-title { 
  font-size: 18px; 
  font-weight: 800; 
  margin: 0 0 2px 0; 
  color: #ffffff !important; /* <-- Ini kuncinya */
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.export-download-sub { 
  font-size: 13px; 
  color: rgba(255, 255, 255, 0.75); 
  margin: 0;
}

/* Cards Grid */
.export-download-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .export-download-cards { grid-template-columns: 1fr 1fr; }
}

/* Card Dasar */
.export-download-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 16px;
  border-radius: 16px;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  cursor: pointer;
}

/* Card 1: Local Host (Putih) */
.export-download-card.is-primary {
  background: white;
  color: var(--navy-900);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.export-download-card.is-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* Card 2: Player (Gelap Transparan) */
.export-download-card.is-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: white;
  backdrop-filter: blur(12px);
}
.export-download-card.is-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
}
.export-download-card.is-secondary.is-ready {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.08);
}
.export-download-card.is-secondary.is-ready:hover {
  border-color: rgba(16, 185, 129, 0.8);
  background: rgba(16, 185, 129, 0.15);
}

/* Badge Pojok Kanan Atas */
.export-download-card-badge {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.export-download-card.is-primary .export-download-card-badge {
  background: var(--primary-light);
  color: var(--primary);
}
.export-download-card-badge.is-success {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
}

/* Ikon Card */
.export-download-card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  transition: transform 0.25s;
}
.export-download-card:hover .export-download-card-icon {
  transform: scale(1.08) rotate(-4deg);
}
.export-download-card.is-primary .export-download-card-icon {
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
  color: white;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}
.export-download-card.is-secondary .export-download-card-icon {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.export-download-card.is-secondary.is-ready .export-download-card-icon {
  background: rgba(16, 185, 129, 0.25);
  color: #a7f3d0;
  border-color: rgba(16, 185, 129, 0.5);
}

/* Teks Card */
.export-download-card-title {
  font-size: 16px; font-weight: 800; margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.export-download-card.is-primary .export-download-card-title { color: var(--navy-900); }
.export-download-card.is-secondary .export-download-card-title { color: white; }

.export-download-card-desc {
  font-size: 12px; line-height: 1.5; margin: 0 0 14px; min-height: 36px;
}
.export-download-card.is-primary .export-download-card-desc { color: var(--text-muted); }
.export-download-card.is-secondary .export-download-card-desc { color: rgba(255,255,255,0.7); }

/* Fitur Pills */
.export-download-card-features {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
}
.export-download-feature {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.export-download-card.is-primary .export-download-feature {
  background: var(--surface-muted); color: var(--text-muted);
}
.export-download-card.is-primary .export-download-feature.is-success {
  background: #d1fae5; color: #065f46;
}
.export-download-card.is-secondary .export-download-feature {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9);
}
.export-download-card.is-secondary .export-download-feature.is-success {
  background: rgba(16, 185, 129, 0.25); color: #a7f3d0;
}
.export-download-card.is-secondary .export-download-feature.is-warning {
  background: rgba(251, 191, 36, 0.2); color: #fcd34d;
}

/* CTA Button di dalam Card */
.export-download-card-cta {
  display: flex; 
  align-items: center; 
  justify-content: space-between; /* Memisahkan teks kiri dan panah kanan */
  width: 100%; 
  height: 44px; 
  border-radius: 10px;
  font-size: 13px; 
  font-weight: 800;
  padding: 0 16px; /* Padding kiri-kanan agar tidak nempel */
  margin-top: auto; 
  transition: all 0.2s;
}
.export-download-card.is-primary .export-download-card-cta {
  background: var(--primary); color: white;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.2);
}
.export-download-card.is-primary:hover .export-download-card-cta {
  background: var(--primary-dark);
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.35);
}

/* Tombol Kanan Solid Green */
.export-download-card.is-secondary .export-download-card-cta {
  background: rgba(255,255,255,0.15); color: white;
  border: 1px solid rgba(255,255,255,0.2);
}
.export-download-card.is-secondary.is-ready .export-download-card-cta {
  background: var(--success); color: white; border-color: transparent;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}
.export-download-card.is-secondary.is-ready:hover .export-download-card-cta {
  background: #047857;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
}

.export-download-card-cta-arrow { transition: transform 0.2s; }
.export-download-card:hover .export-download-card-cta-arrow { transform: translateX(4px); }

/* Tombol Bawah (Secondary & Simpan) */
.export-download-secondary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.export-secondary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px; font-weight: 600;
  transition: all 0.2s;
}
.export-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: white; transform: translateY(-1px);
}

/* =========================================================
   PANDUAN IMPOR FIX (v10.3)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Wrapper untuk masing-masing blok panduan (Local Host / Player) */
.export-instr-block {
  padding: 20px 0;
  border-bottom: 1px dashed var(--border);
}
.export-instr-block:last-child { 
  border-bottom: none; 
  padding-bottom: 0; 
}
.export-instr-block:first-child { 
  padding-top: 0; 
}

/* Header tiap blok */
.export-instr-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 16px;
  padding: 8px 16px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
}
.export-instr-heading svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* List item (langkah-langkah) */
.export-instr-block .steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.export-instr-block .step-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

/* Angka bulat biru */
.export-instr-block .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px; /* Agar sejajar dengan teks */
}

/* Penekanan teks (bold) dan kode di dalam panduan */
.export-instr-block .step-line b {
  color: var(--navy-900);
  font-weight: 700;
}
.export-instr-block .step-line code {
  background: var(--surface-muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: var(--primary-dark);
}
/* =========================================================
   FIX NAVBAR HP & SAFE AREA (v10.4)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Beri ruang napas pada area soal agar tidak tertutup tombol */
.player-exam-main {
  flex: 1;
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  /* Tambahkan safe-area-inset-bottom ke padding bawah */
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 20px));
}

/* Perbaiki posisi footer agar naik di atas navbar HP */
.player-exam-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  /* KUNCI PERBAIKAN: Tambahkan env(safe-area-inset-bottom) */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 20px));
  display: flex;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* Pastikan tinggi tombol navigasi cukup besar untuk jempol */
.player-exam-nav, 
.player-exam-ragu {
  min-height: 48px; /* Sedikit lebih besar dari 44px */
}
/* =========================================================
   FIX NAVBAR HP & SAFE AREA (v10.4)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Beri ruang napas pada area soal agar tidak tertutup tombol */
.player-exam-main {
  flex: 1;
  padding: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  /* Tambahkan safe-area-inset-bottom ke padding bawah */
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 20px));
}

/* Perbaiki posisi footer agar naik di atas navbar HP */
.player-exam-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  /* KUNCI PERBAIKAN: Tambahkan env(safe-area-inset-bottom) */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 20px));
  display: flex;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* Pastikan tinggi tombol navigasi cukup besar untuk jempol */
.player-exam-nav, 
.player-exam-ragu {
  min-height: 48px; /* Sedikit lebih besar dari 44px */
}
/* =========================================================
   EXAM SHARE UI (v10.6)
   ========================================================= */

/* Tombol Terbitkan di Export */
.export-publish-section {
  margin-top: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-input);
}
.export-publish-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  color: var(--amber-400);
  margin-bottom: 6px;
}
.export-publish-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Tampilan Kode di Modal */
.exam-code-display {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--primary);
  background: var(--primary-light);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(30, 64, 175, 0.2);
  cursor: pointer;
  transition: all 0.2s;
  text-indent: 6px; /* Agar benar-benar di tengah */
}
.exam-code-display:hover {
  background: var(--primary-mid);
  color: white;
}

/* Form Kode di Play */
.player-code-section {
  background: var(--primary-light);
  border: 1px solid rgba(30, 64, 175, 0.15);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.player-code-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--primary-dark);
  margin-bottom: 12px;
}
.player-code-form {
  display: flex;
  gap: 8px;
}
.player-code-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  font-family: inherit;
  color: var(--text);
  background: white;
}
.player-code-input:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.player-code-form .btn-primary {
  width: 50px;
  padding: 0;
  flex-shrink: 0;
  height: auto;
}

/* Divider "ATAU UPLOAD" */
.player-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-subtle);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 16px 0;
}
.player-divider::before,
.player-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px dashed var(--border-strong);
}
.player-divider span {
  padding: 0 10px;
}
/* =========================================================
   OPERATOR DASHBOARD EXAM UI (v11)
   ========================================================= */

.player-exam-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f1f5f9; /* Background abu-abu terang untuk dashboard */
}

/* --- HEADER --- */
.player-exam-header {
  position: sticky; top: 0; z-index: 50;
  background: white;
  border-bottom: 2px solid var(--border-strong);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.player-exam-header-left { display: flex; align-items: center; gap: 12px; }
.player-exam-header-center { display: flex; justify-content: center; flex: 1; }
.player-exam-header-right { display: flex; align-items: center; gap: 10px; }

.player-exam-timer {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy-900); color: white;
  padding: 8px 20px; border-radius: var(--radius-pill);
  font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.player-exam-timer.warn { background: var(--warning); }
.player-exam-timer.danger { background: var(--danger); animation: pulseTimer 1s infinite; }

.player-exam-icon-btn {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-muted); color: var(--text-muted);
  border: 1px solid var(--border); cursor: pointer;
  transition: all 0.2s;
}
.player-exam-icon-btn:hover { background: white; color: var(--primary); border-color: var(--primary); }

.player-exam-menu-btn {
  display: none; /* Disembunyikan di desktop, muncul di mobile */
  align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  background: var(--primary-light); color: var(--primary);
  font-weight: 700; font-size: 13px; border: none; cursor: pointer;
}

/* --- BODY (2 KOLOM) --- */
.player-exam-body {
  flex: 1; display: flex; position: relative;
  max-width: 1400px; margin: 0 auto; width: 100%;
}

.player-exam-content {
  flex: 1;
  padding: 24px;
  padding-bottom: 100px; /* Ruang untuk footer */
  max-width: 800px;
  margin: 0 auto;
}

/* Kartu Soal */
.player-question-card {
  background: white;
  border-radius: var(--radius-card);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  padding: 32px;
  border: 1px solid var(--border);
  transition: font-size 0.2s;
}
.player-question-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-strong);
}
.player-q-num { font-size: 16px; font-weight: 800; color: var(--navy-900); }

.player-q-tools {
  display: flex; gap: 4px; background: var(--surface-muted);
  padding: 4px; border-radius: 8px; border: 1px solid var(--border);
}
.player-tool-btn {
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted); border: none;
  font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.player-tool-btn:hover { background: white; color: var(--text); }
.player-tool-btn.active { background: white; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Pengatur Ukuran Font Soal */
.player-question-card.fs-small .qr-question { font-size: 14px; }
.player-question-card.fs-large .qr-question { font-size: 18px; line-height: 1.7; }
.player-question-card.fs-large .qr-option { font-size: 16px; }

/* --- SIDEBAR KANAN --- */
.player-exam-sidebar {
  width: 300px; background: white;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 65px; height: calc(100dvh - 65px);
}
.player-sidebar-top {
  padding: 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.player-sidebar-top h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--navy-900); }
.player-sidebar-close { display: none; background: none; border: none; cursor: pointer; color: var(--text-muted); }

.player-sidebar-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: var(--border); margin: 20px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.player-sidebar-stats > div {
  background: white; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.player-sidebar-stats b { font-size: 20px; font-weight: 900; color: var(--text); line-height: 1; }
.player-sidebar-stats span { font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; }

.player-nav-grid-sidebar {
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  gap: 8px;
  padding: 0 20px; 
  overflow-y: auto; 
  flex: 1;
  align-content: start; /* <-- Kunci agar kotak tidak memanjang ke bawah */
}
.player-nav-num {
  aspect-ratio: 1; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--surface-card); color: var(--text-muted);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.player-nav-num.answered { background: var(--primary-light); color: var(--primary); border-color: var(--primary-mid); }
.player-nav-num.ragu { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.player-nav-num.current { box-shadow: 0 0 0 3px rgba(30,64,175,0.25); transform: scale(1.05); }
.player-nav-num.current.answered, .player-nav-num.current.empty { background: var(--primary); color: white; border-color: var(--primary); }
.player-nav-num.current.ragu { background: #f59e0b; color: white; border-color: #f59e0b; }

.player-sidebar-bottom { padding: 20px; border-top: 1px solid var(--border); }

.player-exam-sidebar-overlay { display: none; }

/* --- FOOTER BAR --- */
.player-exam-footer-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 12px 24px;
  display: flex; justify-content: center;
}
.player-footer-inner {
  width: 100%; max-width: 800px;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.player-nav-btn {
  flex: 1; height: 48px; border-radius: 10px;
  background: white; border: 1.5px solid var(--border-strong); color: var(--text);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s;
}
.player-nav-btn:hover:not(:disabled) { border-color: var(--primary-mid); color: var(--primary); background: var(--primary-light); }
.player-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.player-nav-btn.primary {
  background: var(--primary); 
  color: white !important; /* <-- Tambahkan !important */
  border-color: transparent; 
  box-shadow: 0 4px 12px rgba(30,64,175,0.2);
}
.player-nav-btn.primary:hover { background: var(--primary-dark); }

.player-ragu-btn {
  height: 48px; padding: 0 24px; border-radius: 10px;
  background: white; border: 1.5px solid var(--border-strong); color: var(--text-muted);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.2s; flex-shrink: 0;
}
.player-ragu-btn:hover { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.player-ragu-btn.active { background: #fef3c7; color: #92400e; border-color: #f59e0b; }

/* --- RESPONSIVE (MOBILE & TABLET) --- */
@media (max-width: 1024px) {
  .player-exam-header { padding: 10px 16px; }
  .player-exam-header-center { display: none; /* Timer pindah ke header kiri di mobile */ }
  .player-exam-menu-btn { display: inline-flex; }
  
  .player-exam-content { padding: 16px; padding-bottom: 90px; }
  .player-question-card { padding: 20px; border-radius: 12px; }
  .player-q-tools { display: none; /* Sembunyikan font setting di HP */ }
  
  /* Ubah sidebar jadi drawer */
  .player-exam-sidebar {
    position: fixed; top: 0; right: -100%; bottom: 0; width: 300px;
    z-index: 1000; transition: right 0.3s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  }
  .player-exam-sidebar.show { right: 0; }
  .player-sidebar-close { display: block; }
  
  .player-exam-sidebar-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(10,22,40,0.5); backdrop-filter: blur(4px); z-index: 999;
  }
  
  /* Footer mobile */
  .player-exam-footer-bar { padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .player-nav-btn span { display: none; /* Sembunyikan teks, sisakan ikon */ }
  .player-nav-btn { flex: none; width: 48px; }
  .player-nav-btn.primary { flex: 1; width: auto; }
  .player-nav-btn.primary span { display: inline; }
  .player-ragu-btn span { display: none; }
  .player-ragu-btn { width: 48px; padding: 0; }
}

/* =========================================================
   TKA PLAYER — OFFICIAL EXAM UI (v12)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Container Soal */
.exam-question-wrapper {
  background: white;
  padding: 24px 32px;
  border-radius: 8px;
}

/* Header Soal */
.exam-q-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--border-strong);
}
.exam-q-number {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-900);
  background: var(--surface-muted);
  padding: 4px 12px;
  border-radius: 6px;
}
.exam-q-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #92400e;
  background: #fef3c7;
  padding: 4px 8px;
  border-radius: 4px;
  margin-left: auto;
}

/* Teks Soal */
.exam-q-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}

/* Gambar Soal */
.exam-image-container {
  margin-bottom: 20px;
  text-align: center;
}
.exam-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: zoom-in;
}
.exam-image-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
}
.exam-image-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Pilihan Jawaban (PG & MCMA) */
.exam-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exam-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: white;
}
.exam-option:hover {
  background: var(--surface-muted);
  border-color: var(--primary-mid);
}

/* Sembunyikan input asli, buat custom */
.exam-option input[type="radio"],
.exam-option input[type="checkbox"] {
  display: none;
}

.exam-option-letter {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 2px;
}

.exam-option-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

/* Custom Radio/Checkbox tiruan */
.exam-option::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  margin-top: 2px;
  flex-shrink: 0;
  background: white;
  transition: all 0.2s;
}
/* PG = Bulat */
.exam-option:has(input[type="radio"])::before { border-radius: 50%; }
/* MCMA = Kotak */
.exam-option:has(input[type="checkbox"])::before { border-radius: 4px; }

/* State Terpilih */
.exam-option.is-selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.exam-option.is-selected .exam-option-letter { color: var(--primary); }
.exam-option.is-selected::before {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px white; /* Efek titik di tengah radio */
}
.exam-option:has(input[type="checkbox"]).is-selected::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* State Benar/Salah (Review Mode) */
.exam-option.is-correct {
  border-color: var(--success);
  background: #f0fdf4;
}
.exam-option.is-correct::before {
  border-color: var(--success);
  background: var(--success);
}
.exam-option.is-wrong {
  border-color: var(--danger);
  background: #fef2f2;
}
.exam-option.is-wrong::before {
  border-color: var(--danger);
  background: var(--danger);
}

.exam-icon-correct { color: var(--success); flex-shrink: 0; margin-top: 2px; }
.exam-icon-wrong { color: var(--danger); flex-shrink: 0; margin-top: 2px; }


/* =========================================
   Tabel B/S (Benar / Salah)
   ========================================= */
.exam-bs-wrapper {
  overflow-x: auto;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
}
.exam-bs-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
.exam-bs-table th {
  background: var(--surface-muted);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-900);
  border-bottom: 1.5px solid var(--border-strong);
}
.exam-bs-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.exam-bs-table tr:last-child td { border-bottom: none; }
.exam-bs-text { font-size: 14.5px; line-height: 1.5; }

/* Custom Radio di Tabel B/S */
.exam-bs-radio {
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.exam-bs-radio input { display: none; }
.exam-bs-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: white;
  display: inline-block;
  transition: all 0.2s;
}
.exam-bs-radio input:checked + .exam-bs-mark {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 4px white;
}

/* Baris review B/S */
.exam-bs-table tr.row-correct { background: #f0fdf4; }
.exam-bs-table tr.row-wrong { background: #fef2f2; }

.exam-bs-key {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--surface-muted);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border-left: 3px solid var(--primary);
}

/* =========================================
   Pembahasan
   ========================================= */
.exam-explanation {
  margin-top: 24px;
  padding: 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.exam-explanation-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 8px;
}
.exam-explanation-text {
  font-size: 14px;
  line-height: 1.6;
  color: #78350f;
}

@media (max-width: 640px) {
  .exam-question-wrapper { padding: 16px; }
  .exam-q-text { font-size: 15px; }
  .exam-option { padding: 10px 12px; }
  .exam-option-text { font-size: 14px; }
  .exam-bs-table th { padding: 8px; font-size: 11px; }
  .exam-bs-table td { padding: 10px 8px; }
  .exam-bs-text { font-size: 13px; }
}

/* =========================================================
   CHANGELOG TIMELINE (v1.2)
   ========================================================= */
.changelog-timeline {
  position: relative;
  padding-left: 20px;
  margin-top: 40px;
}
.changelog-timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--border-strong);
}
.changelog-item {
  position: relative;
  margin-bottom: 32px;
  padding-left: 24px;
}
.changelog-item::before {
  content: '';
  position: absolute;
  left: -5px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary-mid);
  box-shadow: 0 0 0 4px var(--surface);
}
.changelog-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.changelog-version {
  font-size: 20px;
  font-weight: 900;
  color: var(--navy-900);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.changelog-list {
  margin: 0;
  padding: 0 0 0 16px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.changelog-list li {
  margin-bottom: 8px;
}
.changelog-list b {
  color: var(--text);
  font-weight: 700;
}
/* =========================================================
   FIX EXAM UI (v12.1) — Sembunyikan Huruf A/B/C/D & Rapikan
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* 1. Sembunyikan huruf A, B, C, D */
.exam-option-letter {
  display: none !important;
}

/* 2. Rapikan jarak antar elemen di dalam opsi */
.exam-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  /* Pastikan background bersih */
  background: white;
}

/* 3. Teks jawaban agar mengisi sisa ruang */
.exam-option-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

/* 4. Perbaiki ukuran bulatan/kotak agar proporsional */
.exam-option::before {
  width: 22px;
  height: 22px;
  margin-top: 0; /* Sejajarkan ke tengah */
}

/* 5. Khusus HP, beri sedikit ruang ekstra */
@media (max-width: 640px) {
  .exam-option {
    padding: 12px 14px;
    gap: 10px;
  }
  .exam-option::before {
    width: 20px;
    height: 20px;
  }
}

/* =========================================================
   PREMIUM EXPERT BUTTON & BANNER (v13)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Tombol Premium di Header */
.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: var(--navy-900);
  font-weight: 800;
  font-size: 13px;
  border-radius: var(--radius-input);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: all 0.2s;
}
.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

/* Banner Promo Expert */
.expert-promo-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--primary-dark) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(10, 22, 40, 0.15);
  position: relative;
  overflow: hidden;
}
.expert-promo-banner::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
  top: -100px; right: 10%;
  border-radius: 50%;
  pointer-events: none;
}
.epb-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.epb-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--amber-400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.epb-text h3 {
  color: white;
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.epb-text p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
  max-width: 550px;
}
.epb-text p b {
  color: var(--amber-400);
}
.btn-epb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  background: white;
  color: var(--navy-900);
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--radius-input);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}
.btn-epb:hover {
  background: var(--primary-light);
  transform: translateX(2px);
}

/* Responsive Banner */
@media (max-width: 768px) {
  .expert-promo-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .btn-epb {
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   IMPORT DOC PAGE POLISH (v14)
   © 2026 Ekwan Nugroho — Wonogiri
   ========================================================= */

/* Segmented Control (Tab Menu Modern) */
.doc-segmented-control {
  display: flex;
  background: var(--surface-muted);
  padding: 6px;
  border-radius: var(--radius-input);
  margin-bottom: 24px;
  border: 1px solid var(--border);
}
.doc-segmented-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.doc-segmented-btn:hover {
  color: var(--text);
}
.doc-segmented-btn.active {
  background: white;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* Perbaikan Textarea Sempit */
.accordion .prompt-textarea {
  width: 100% !important;
  box-sizing: border-box;
  min-height: 250px;
  display: block;
}

/* Boks Panduan (Guide Box) */
.doc-guide-box {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-input);
  padding: 16px;
  margin-bottom: 20px;
}
.doc-guide-title {
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.doc-guide-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.6;
}
.doc-guide-steps li {
  margin-bottom: 4px;
}

/* Boks Info Biru */
.doc-info-box {
  background: var(--primary-light);
  border: 1px solid rgba(30, 64, 175, 0.15);
  border-radius: var(--radius-input);
  padding: 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--primary-dark);
  line-height: 1.6;
}

@media (max-width: 520px) {
  .doc-segmented-btn span { display: none; }
  .doc-segmented-btn { padding: 12px; }
}