/* ============================================================
   SSW Quiz Engine — Frontend CSS
   Japanese exam-style UI (JLPT-inspired)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS Variables ───────────────────────────────────────── */
:root {
  --ssw-bg:           #f5f5f0;
  --ssw-surface:      #ffffff;
  --ssw-border:       #d8d8cc;
  --ssw-text:         #1a1a1a;
  --ssw-text-muted:   #6b6b6b;
  --ssw-primary:      #3d6b35;   /* exam green */
  --ssw-primary-dark: #2d5228;
  --ssw-accent:       #c8a84b;   /* gold */
  --ssw-header-bg:    #1c1c1c;
  --ssw-header-text:  #f0f0f0;
  --ssw-nav-bg:       #2e2e2e;
  --ssw-nav-active:   #4a8c3f;
  --ssw-nav-answered: #3d6b35;
  --ssw-nav-flagged:  #c8a84b;
  --ssw-correct:      #2e7d32;
  --ssw-incorrect:    #c62828;
  --ssw-radius:       6px;
  --ssw-radius-lg:    12px;
  --ssw-shadow:       0 2px 12px rgba(0,0,0,.10);
  --ssw-shadow-card:  0 4px 24px rgba(0,0,0,.08);
  --ssw-transition:   0.18s ease;
  --ssw-font:         'Inter', 'Noto Sans JP', sans-serif;
}

/* ── Reset / base ────────────────────────────────────────── */
.ssw-quiz-wrap *,
.ssw-quiz-wrap *::before,
.ssw-quiz-wrap *::after { box-sizing: border-box; }

.ssw-quiz-wrap {
  font-family: var(--ssw-font);
  color: var(--ssw-text);
  line-height: 1.6;
  background: var(--ssw-bg);
  border-radius: var(--ssw-radius-lg);
  overflow: hidden;
  min-height: 540px;
  position: relative;
}

/* ── Loader ──────────────────────────────────────────────── */
.ssw-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
  color: var(--ssw-text-muted);
}
.ssw-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--ssw-border);
  border-top-color: var(--ssw-primary);
  border-radius: 50%;
  animation: ssw-spin 0.8s linear infinite;
}
@keyframes ssw-spin { to { transform: rotate(360deg); } }

/* ── Quiz layout ─────────────────────────────────────────── */
.ssw-quiz-app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 72px 1fr;
  grid-template-areas:
    "header header"
    "nav    main";
  min-height: 540px;
}

/* ══════════════════════════════════════════════════════════════
   FULLSCREEN MODE (CSS-based, iOS Safari compatible)
   Uses dynamic viewport units (dvh) so iOS Safari's address bar
   collapsing doesn't leave blank space below the footer.
   Falls back to vh on browsers that don't support dvh.
   ══════════════════════════════════════════════════════════════ */
.ssw-quiz-wrap.ssw-fullscreen {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
  border-radius: 0;
  /* JANGAN overflow:auto di sini — biarkan ssw-quiz-app mengisi penuh */
  overflow: hidden;
  width: 100vw;
  height: 100vh;     /* fallback */
  height: 100dvh;    /* dynamic viewport height (iOS Safari) */
  max-width: 100vw !important;
  margin: 0 !important;
}

/* ssw-quiz-app harus mengisi seluruh tinggi wrapper fullscreen
   dengan layout grid 3 baris: header | main(scroll) | (footer sudah di dalam main) */
.ssw-quiz-wrap.ssw-fullscreen .ssw-quiz-app {
  height: 100vh;
  height: 100dvh;
  /* 3 rows: header tetap | sidebar+main fleksibel | (footer sticky di dalam main) */
  grid-template-rows: auto 1fr;
  overflow: hidden; /* jangan biarkan grid sendiri scroll */
}

/* Header tetap di atas — tidak ikut scroll */
.ssw-quiz-wrap.ssw-fullscreen .ssw-header {
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
}

/* Sidebar harus setinggi area konten dan scroll sendiri */
.ssw-quiz-wrap.ssw-fullscreen .ssw-nav-sidebar {
  overflow-y: auto;
  height: 100%;
  /* agar tidak ikut scroll bersama main */
  align-self: stretch;
}

/* ssw-main: ini SATU-SATUNYA yang boleh scroll */
.ssw-quiz-wrap.ssw-fullscreen .ssw-main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Pastikan main tidak meluap — tinggi dibatasi oleh grid row 1fr */
  min-height: 0;
  height: 100%;
  /* display flex column agar footer sticky di bawah konten */
  display: flex;
  flex-direction: column;
}

/* ssw-question-meta ("Question 11 of 25") sticky di atas area scroll main */
.ssw-quiz-wrap.ssw-fullscreen .ssw-question-meta {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}

/* ssw-question-card mengisi ruang fleksibel */
.ssw-quiz-wrap.ssw-fullscreen .ssw-question-card {
  flex: 1;
}

/* Footer nav sticky di bawah — tidak ikut scroll */
.ssw-quiz-wrap.ssw-fullscreen .ssw-footer-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex-shrink: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.10);
}
/* Fullscreen icon toggle — CSS is the single source of truth */
.ssw-btn-fullscreen .ssw-fs-expand   { display: inline-block !important; }
.ssw-btn-fullscreen .ssw-fs-collapse { display: none !important; }
.ssw-quiz-wrap.ssw-fullscreen .ssw-btn-fullscreen .ssw-fs-expand   { display: none !important; }
.ssw-quiz-wrap.ssw-fullscreen .ssw-btn-fullscreen .ssw-fs-collapse { display: inline-block !important; }

/* Body class to prevent scrolling */
body.ssw-body-fullscreen {
  overflow: hidden !important;
  /* Catatan: position:fixed dihapus karena menyebabkan halaman "loncat" di Android.
     overflow:hidden sudah cukup untuk mencegah scroll di luar quiz.
     iOS rubber-band dicegah oleh overflow:hidden pada html.ssw-html-fullscreen */
}
/* Hide WP admin bar in fullscreen */
body.ssw-body-fullscreen #wpadminbar {
  display: none !important;
}
html.ssw-html-fullscreen {
  overflow: hidden !important;
}

/* ── Header ──────────────────────────────────────────────── */
.ssw-header {
  grid-area: header;
  background: var(--ssw-header-bg);
  color: var(--ssw-header-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  gap: 12px;
  flex-shrink: 0;
}
.ssw-header-left { display: flex; align-items: center; gap: 10px; }
.ssw-header-titles { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; }
.ssw-quiz-title-label { font-weight: 600; font-size: 13px; }
.ssw-section-label    { color: #aaa; font-size: 11px; }
.ssw-header-center    { flex: 1; display: flex; justify-content: center; }
.ssw-header-right     { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   Fullscreen button — prominent, gold-accent, with visible label
   ══════════════════════════════════════════════════════════════ */
.ssw-btn-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  border: 1.5px solid var(--ssw-accent);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(200, 168, 75, 0.18), rgba(200, 168, 75, 0.08));
  color: var(--ssw-accent);
  font-family: var(--ssw-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
  /* Subtle glow to draw attention */
  box-shadow: 0 0 0 0 rgba(200, 168, 75, 0.4);
  animation: ssw-fs-attention 3s ease-in-out 1.5s 2;
}

/* ── First-time hint tooltip that points at the button ─────── */
.ssw-btn-fullscreen::after {
  content: attr(data-hint);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
}
.ssw-btn-fullscreen::before {
  content: '';
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #1a1a1a;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 100;
}
.ssw-btn-fullscreen[data-show-hint="1"]::after,
.ssw-btn-fullscreen[data-show-hint="1"]::before {
  opacity: 1;
  visibility: visible;
}
.ssw-btn-fullscreen[data-show-hint="1"]::after {
  transform: translateX(-50%) translateY(0);
  animation: ssw-hint-bounce 1.4s ease-in-out infinite;
}
@keyframes ssw-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* Icons inside button */
.ssw-btn-fullscreen svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* Label text */
.ssw-btn-fullscreen-label {
  display: inline-block;
  line-height: 1;
}
.ssw-fs-label-exit { display: none; }

/* Hover state — filled gold, lifted shadow */
.ssw-btn-fullscreen:hover {
  background: linear-gradient(135deg, var(--ssw-accent), #d9b85c);
  color: #1a1a1a;
  border-color: #d9b85c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200, 168, 75, 0.4);
}
.ssw-btn-fullscreen:hover svg {
  transform: scale(1.08);
}

/* Active / pressed */
.ssw-btn-fullscreen:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(200, 168, 75, 0.3);
}

/* Focus — keyboard accessibility */
.ssw-btn-fullscreen:focus-visible {
  outline: 3px solid rgba(200, 168, 75, 0.55);
  outline-offset: 2px;
}

/* ── State: Fullscreen ON (inverted: filled gold, "Exit" label) ── */
.ssw-quiz-wrap.ssw-fullscreen .ssw-btn-fullscreen {
  background: var(--ssw-accent);
  color: #1a1a1a;
  border-color: var(--ssw-accent);
  animation: none;
  box-shadow: 0 2px 8px rgba(200, 168, 75, 0.35);
}
.ssw-quiz-wrap.ssw-fullscreen .ssw-btn-fullscreen:hover {
  background: #d9b85c;
  border-color: #d9b85c;
}
.ssw-quiz-wrap.ssw-fullscreen .ssw-fs-label-enter { display: none; }
.ssw-quiz-wrap.ssw-fullscreen .ssw-fs-label-exit  { display: inline-block; }

/* ── Attention-grabbing pulse (plays briefly on load, twice) ── */
@keyframes ssw-fs-attention {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 168, 75, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(200, 168, 75, 0.25);
  }
}

/* ── Mobile: shrink to icon-only with clear tappable area ── */
@media (max-width: 640px) {
  .ssw-btn-fullscreen {
    height: 38px;
    width: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .ssw-btn-fullscreen-label {
    /* Visually hidden but accessible */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .ssw-btn-fullscreen svg {
    width: 20px;
    height: 20px;
  }
  /* Anchor hint to button's left edge on mobile so it doesn't clip */
  .ssw-btn-fullscreen::after {
    left: 0;
    transform: translateX(0);
    font-size: 11px;
    max-width: 220px;
    white-space: normal;
    line-height: 1.4;
  }
  .ssw-btn-fullscreen[data-show-hint="1"]::after {
    transform: translateX(0);
    animation: ssw-hint-bounce-mobile 1.4s ease-in-out infinite;
  }
  .ssw-btn-fullscreen::before {
    left: 19px;
    transform: translateX(-50%);
  }
  @keyframes ssw-hint-bounce-mobile {
    0%, 100% { transform: translateX(0) translateY(0); }
    50%      { transform: translateX(0) translateY(-3px); }
  }
}

/* ── Respect reduced-motion users ── */
@media (prefers-reduced-motion: reduce) {
  .ssw-btn-fullscreen { animation: none !important; }
  .ssw-btn-fullscreen svg { transition: none; }
}

/* Timer */
.ssw-timer {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px; font-weight: 600;
}
.ssw-timer-icon { width: 16px; height: 16px; }
.ssw-timer.ssw-timer-danger { color: #ff6b6b; animation: ssw-pulse 1s infinite; }
@keyframes ssw-pulse { 50% { opacity: .6; } }

/* ── Finish button ──────────────────────────────────────── */
.ssw-btn-finish-quiz {
  background: #c62828;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--ssw-font);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: background var(--ssw-transition), transform var(--ssw-transition);
  white-space: nowrap;
}
.ssw-btn-finish-quiz:hover:not(:disabled) { background: #b71c1c; transform: scale(1.02); }
.ssw-btn-finish-quiz:disabled { opacity: .5; cursor: not-allowed; }

/* ── Sidebar / nav ───────────────────────────────────────── */
.ssw-nav-sidebar {
  grid-area: nav;
  background: var(--ssw-nav-bg);
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ssw-section-group { padding: 4px 0; }
.ssw-section-group-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  text-align: center;
  padding: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sidebar header label "NO." di atas daftar nomor soal ───────── */
.ssw-nav-sidebar::before {
  content: "NO.";
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  text-align: center;
  padding: 6px 0 2px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin: 0 6px 4px;
}
.ssw-q-nav-btn {
  display: block;
  width: 40px; height: 40px;
  margin: 3px auto;
  border: none; border-radius: 4px;
  background: #444;
  color: #ccc;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background var(--ssw-transition), color var(--ssw-transition), transform var(--ssw-transition);
  position: relative;
}
.ssw-q-nav-btn:hover            { background: #666; color: #fff; transform: scale(1.05); }
.ssw-q-nav-btn.is-active        { background: var(--ssw-nav-active); color: #fff; box-shadow: 0 0 0 2px #fff; }
.ssw-q-nav-btn.is-answered      { background: var(--ssw-nav-answered); color: #fff; }
.ssw-q-nav-btn.is-flagged::after {
  content: '';
  position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ssw-nav-flagged);
}

/* ── Main content area ───────────────────────────────────── */
.ssw-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  background: var(--ssw-bg);
  /* Pastikan main area bisa scroll sendiri agar sticky footer bekerja */
  min-height: 0;
}

.ssw-question-meta {
  background: var(--ssw-primary);
  color: #fff;
  padding: 6px 20px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
}

/* ── Question card ───────────────────────────────────────── */
.ssw-question-card {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ssw-question-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  background: #eef5ec;
  border-left: 4px solid var(--ssw-primary);
  padding: 14px 18px;
  border-radius: 0 var(--ssw-radius) var(--ssw-radius) 0;
}

/* ── Media ───────────────────────────────────────────────── */
.ssw-question-media { display: flex; flex-direction: column; gap: 12px; }

.ssw-question-image {
  max-width: 100%; max-height: 300px;
  object-fit: contain;
  border-radius: var(--ssw-radius);
  border: 1px solid var(--ssw-border);
}

/* Audio player */
.ssw-audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #2c2c2c;
  border-radius: 40px;
  padding: 8px 16px;
  width: fit-content;
  max-width: 400px;
  flex-wrap: wrap;
}
.ssw-audio-btn {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: var(--ssw-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--ssw-transition), background var(--ssw-transition), opacity var(--ssw-transition);
  flex-shrink: 0;
}
.ssw-audio-btn:hover:not(:disabled) { background: var(--ssw-primary-dark); transform: scale(1.05); }
.ssw-audio-btn:disabled,
.ssw-audio-btn.ssw-audio-btn-disabled {
  background: #555;
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.ssw-audio-btn svg   { width: 18px; height: 18px; }
.ssw-audio-progress  { flex: 1; height: 4px; background: #555; border-radius: 2px; overflow: hidden; min-width: 60px; cursor: pointer; }
.ssw-audio-bar       { height: 100%; background: var(--ssw-primary); width: 0%; transition: width .1s linear; }
.ssw-audio-time      { color: #aaa; font-size: 11px; white-space: nowrap; }

/* Play-limit badge: shows remaining plays or "max reached" */
.ssw-audio-limit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.12);
  color: #ccc;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.ssw-audio-limit-badge.ssw-audio-limit-exhausted {
  background: rgba(198,40,40,.25);
  color: #ff8a80;
}

/* ── Answers ─────────────────────────────────────────────── */
.ssw-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ssw-answer-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border: 2px solid var(--ssw-border);
  border-radius: var(--ssw-radius);
  background: var(--ssw-surface);
  cursor: pointer;
  transition: border-color var(--ssw-transition), background var(--ssw-transition), transform var(--ssw-transition);
  user-select: none;
  position: relative;
}
.ssw-answer-option:hover:not(.disabled) {
  border-color: var(--ssw-primary);
  background: #f0f6ee;
  transform: translateX(2px);
}
.ssw-answer-option.selected {
  border-color: var(--ssw-primary);
  background: #e8f4e5;
}
.ssw-answer-option.correct {
  border-color: var(--ssw-correct);
  background: #e8f5e9;
}
.ssw-answer-option.incorrect {
  border-color: var(--ssw-incorrect);
  background: #ffebee;
}
.ssw-answer-option.disabled { cursor: default; opacity: .9; }

.ssw-answer-letter {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ssw-border);
  color: var(--ssw-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  transition: background var(--ssw-transition), color var(--ssw-transition);
}
.ssw-answer-option.selected  .ssw-answer-letter { background: var(--ssw-primary); color: #fff; }
.ssw-answer-option.correct   .ssw-answer-letter { background: var(--ssw-correct); color: #fff; }
.ssw-answer-option.incorrect .ssw-answer-letter { background: var(--ssw-incorrect); color: #fff; }

/* Answer content wrapper */
.ssw-answer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ssw-answer-text { font-size: 14px; }

/* Image inside answer option */
.ssw-answer-image {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: var(--ssw-radius);
  border: 1px solid var(--ssw-border);
  display: block;
}

/* Audio inside answer option */
.ssw-answer-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.06);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  width: fit-content;
}
.ssw-answer-audio-btn {
  width: 28px; height: 28px;
  border: none; border-radius: 50%;
  background: var(--ssw-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--ssw-transition);
}
.ssw-answer-audio-btn:hover { background: var(--ssw-primary-dark); }
.ssw-answer-audio-btn svg   { width: 12px; height: 12px; }
.ssw-answer-audio-label     { font-size: 11px; color: var(--ssw-text-muted); font-weight: 500; }

.ssw-answer-text { flex: 1; font-size: 14px; }

/* Check icon (correct/incorrect) */
.ssw-answer-check { font-size: 16px; margin-left: auto; }

/* Text input */
.ssw-text-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px; font-family: var(--ssw-font);
  border: 2px solid var(--ssw-border);
  border-radius: var(--ssw-radius);
  outline: none;
  transition: border-color var(--ssw-transition);
}
.ssw-text-input:focus { border-color: var(--ssw-primary); }

/* ── Feedback ────────────────────────────────────────────── */
.ssw-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--ssw-radius);
  font-weight: 600; font-size: 14px;
  animation: ssw-fade-in 0.25s ease;
}
.ssw-feedback.correct   { background: #e8f5e9; color: var(--ssw-correct); }
.ssw-feedback.incorrect { background: #ffebee; color: var(--ssw-incorrect); }
@keyframes ssw-fade-in  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }

/* ── Explanation ─────────────────────────────────────────── */
.ssw-explanation-box {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--ssw-radius);
  padding: 14px 18px;
  animation: ssw-fade-in 0.3s ease;
}
.ssw-explanation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700; font-size: 13px;
  color: #f57c00;
  margin-bottom: 8px;
}
.ssw-explanation-header svg { width: 16px; height: 16px; }
.ssw-explanation-text { font-size: 14px; color: #5d4037; line-height: 1.6; }

/* ── Footer nav ──────────────────────────────────────────── */
.ssw-footer-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #fff;
  border-top: 1px solid var(--ssw-border);
  flex-wrap: wrap;
  /* Tombol Back/Next tidak ikut scroll — sticky di bawah area soal */
  position: sticky;
  bottom: 0;
  z-index: 20;
  box-shadow: 0 -2px 10px rgba(0,0,0,.07);
}

/* ── Buttons ─────────────────────────────────────────────── */
.ssw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border: none; border-radius: var(--ssw-radius);
  font-family: var(--ssw-font);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background var(--ssw-transition), transform var(--ssw-transition), opacity var(--ssw-transition);
  text-decoration: none;
  white-space: nowrap;
}
.ssw-btn:disabled { opacity: .45; cursor: not-allowed; }
.ssw-btn:not(:disabled):active { transform: scale(.97); }

.ssw-btn-primary    { background: var(--ssw-primary);    color: #fff; }
.ssw-btn-primary:hover:not(:disabled) { background: var(--ssw-primary-dark); }
.ssw-btn-secondary  { background: #e8e8e2; color: var(--ssw-text); }
.ssw-btn-secondary:hover:not(:disabled) { background: #d4d4cc; }
.ssw-btn-finish-section { background: var(--ssw-accent); color: #1a1a1a; font-size: 13px; padding: 6px 14px; }
.ssw-btn-flag {
  background: transparent; color: #aaa;
  border: 1px solid #444; padding: 7px 12px;
}
.ssw-btn-flag:hover { color: var(--ssw-nav-flagged); border-color: var(--ssw-nav-flagged); }
.ssw-btn-flag.flagged { color: var(--ssw-nav-flagged); border-color: var(--ssw-nav-flagged); }
.ssw-btn-next, .ssw-btn-submit {
  background: var(--ssw-nav-bg); color: #fff;
  margin-left: auto;
}
.ssw-btn-next:hover:not(:disabled), .ssw-btn-submit:hover:not(:disabled) {
  background: var(--ssw-primary);
}
.ssw-btn-submit { background: var(--ssw-primary); }

/* ── Mobile nav grid toggle ──────────────────────────────── */
.ssw-btn-nav-grid-toggle {
  display: none; /* shown only on mobile */
  width: 36px; height: 36px;
  border: none; border-radius: 6px;
  background: rgba(0,0,0,.06);
  color: var(--ssw-text);
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--ssw-transition);
}
.ssw-btn-nav-grid-toggle svg { width: 18px; height: 18px; }
.ssw-btn-nav-grid-toggle:hover { background: rgba(0,0,0,.12); }

/* ── Error screen ────────────────────────────────────────── */
.ssw-error, .ssw-error-msg {
  color: var(--ssw-incorrect);
  padding: 16px;
  background: #ffebee;
  border-radius: var(--ssw-radius);
  text-align: center;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   GUEST INFO FORM
   ══════════════════════════════════════════════════════════════ */
.ssw-guest-form {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: 32px 20px;
  background: linear-gradient(135deg, #f5f5f0 0%, #e8efe5 100%);
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.ssw-guest-form-inner {
  max-width: 420px;
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 8px 40px rgba(0,0,0,.1);
  text-align: center;
  animation: ssw-fade-in .4s ease;
}
.ssw-guest-form-icon { font-size: 48px; margin-bottom: 8px; }
.ssw-guest-form-inner h3 {
  font-size: 22px; font-weight: 700; color: var(--ssw-text);
  margin: 0 0 8px;
}
.ssw-guest-form-desc {
  font-size: 14px; color: var(--ssw-text-muted);
  margin: 0 0 24px;
}
.ssw-guest-field {
  text-align: left;
  margin-bottom: 16px;
}
.ssw-guest-field label {
  display: block;
  font-size: 12px; font-weight: 600; color: #555;
  margin-bottom: 5px;
}
.ssw-guest-field .req { color: #c62828; }
.ssw-guest-input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--ssw-border);
  border-radius: 8px;
  font-size: 14px; font-family: var(--ssw-font);
  transition: border-color var(--ssw-transition);
  outline: none;
  background: #fafaf8;
}
.ssw-guest-input:focus {
  border-color: var(--ssw-primary);
  box-shadow: 0 0 0 3px rgba(61,107,53,.1);
  background: #fff;
}
.ssw-guest-input.ssw-field-error {
  border-color: var(--ssw-incorrect);
  background: #fff5f5;
}
.ssw-guest-input.ssw-field-error:focus {
  box-shadow: 0 0 0 3px rgba(198,40,40,.15);
}
.ssw-field-error-msg {
  color: var(--ssw-incorrect);
  font-size: 12px;
  margin-top: 5px;
  animation: ssw-fade-in .2s ease;
}
.ssw-guest-form .ssw-btn-start-quiz {
  width: 100%;
  padding: 13px 20px;
  font-size: 16px;
  border-radius: 10px;
  margin-top: 8px;
}
.ssw-guest-form-note {
  font-size: 11px; color: #aaa;
  margin: 14px 0 0;
}

/* ══════════════════════════════════════════════════════════════
   RESULT SCREEN
   ══════════════════════════════════════════════════════════════ */
.ssw-result-screen { padding: 0; }
.ssw-result-inner  { max-width: 720px; margin: 0 auto; padding: 32px 24px; }

/* Result screen must scroll in fullscreen mode */
.ssw-quiz-wrap.ssw-fullscreen .ssw-result-screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
  height: 100dvh;
}

/* ── Hero section ──────────────────────────────────────── */
.ssw-result-hero {
  text-align: center;
  padding: 32px 20px 24px;
  border-radius: var(--ssw-radius-lg);
  margin-bottom: 24px;
}
.ssw-result-hero.ssw-result-passed {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 1px solid #a5d6a7;
}
.ssw-result-hero.ssw-result-failed {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 1px solid #ffcc80;
}

.ssw-result-badge {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--ssw-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 24px rgba(61,107,53,.35);
  animation: ssw-badge-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ssw-badge-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ssw-result-badge.failed { background: var(--ssw-incorrect); box-shadow: 0 4px 24px rgba(198,40,40,.3); }
.ssw-result-grade   { font-size: 42px; font-weight: 700; }
.ssw-result-title   { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--ssw-text); }
.ssw-result-message { font-size: 14px; color: var(--ssw-text-muted); margin: 0 0 4px; line-height: 1.5; }
.ssw-result-subtitle { color: var(--ssw-text-muted); font-size: 15px; font-weight: 600; margin: 0; }

/* ── User info card ───────────────────────────────────── */
.ssw-result-user-info {
  background: var(--ssw-surface);
  border: 1px solid var(--ssw-border);
  border-radius: var(--ssw-radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--ssw-shadow);
}
.ssw-user-info-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}
.ssw-user-info-row + .ssw-user-info-row { border-top: 1px solid #f0f0f0; }
.ssw-user-info-label { color: var(--ssw-text-muted); font-weight: 500; }
.ssw-user-info-value { font-weight: 600; color: var(--ssw-text); }

/* ── Total score bar ─────────────────────────────────── */
.ssw-result-total-score {
  background: var(--ssw-surface);
  border: 1px solid var(--ssw-border);
  border-radius: var(--ssw-radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--ssw-shadow);
}
.ssw-total-score-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.ssw-total-score-label { font-size: 14px; font-weight: 600; }
.ssw-total-score-value { font-size: 14px; font-weight: 700; color: var(--ssw-primary); }
.ssw-progress-bar-lg { height: 12px; border-radius: 6px; }
.ssw-total-score-footer { margin-top: 8px; font-size: 13px; }
.ssw-pass-score-label { font-weight: 500; }

/* Progress fill colors for pass/fail */
.ssw-progress-fill.ssw-fill-pass { background: var(--ssw-correct); }
.ssw-progress-fill.ssw-fill-fail { background: var(--ssw-incorrect); }

/* ── Stats cards ─────────────────────────────────────── */
.ssw-result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.ssw-stat-card {
  background: var(--ssw-surface);
  border: 1px solid var(--ssw-border);
  border-radius: var(--ssw-radius-lg);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--ssw-shadow);
}
.ssw-stat-value { display: block; font-size: 26px; font-weight: 700; color: var(--ssw-primary); }
.ssw-stat-label { font-size: 12px; color: var(--ssw-text-muted); font-weight: 500; }

/* Section breakdown */
.ssw-section-scores { margin: 24px 0; }
.ssw-section-scores h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.ssw-section-score-item {
  background: var(--ssw-surface);
  border: 1px solid var(--ssw-border);
  border-radius: var(--ssw-radius);
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: var(--ssw-shadow);
}
.ssw-section-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px; font-weight: 600;
}
.ssw-score-pct { color: var(--ssw-primary); }
.ssw-progress-bar {
  height: 6px; background: var(--ssw-border); border-radius: 3px; overflow: hidden;
}
.ssw-progress-fill {
  height: 100%; background: var(--ssw-primary); border-radius: 3px;
  transition: width .8s ease;
}

/* ── Review list ─────────────────────────────────────── */
.ssw-review-list { margin: 24px 0; }
.ssw-review-list h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.ssw-review-item {
  background: var(--ssw-surface);
  border: 1px solid var(--ssw-border);
  border-left: 4px solid var(--ssw-border);
  border-radius: var(--ssw-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.ssw-review-item.correct   { border-left-color: var(--ssw-correct); }
.ssw-review-item.incorrect { border-left-color: var(--ssw-incorrect); }
.ssw-review-q-text { font-weight: 500; margin-bottom: 6px; }
.ssw-review-answer { font-size: 13px; margin-top: 4px; }
.ssw-review-correct-ans { color: var(--ssw-correct); }
.ssw-review-wrong-ans   { color: var(--ssw-incorrect); }
.ssw-review-correct-label { color: var(--ssw-correct); margin-top: 2px; }
.ssw-review-skipped { color: var(--ssw-text-muted); font-style: italic; }
/* Review choices (A/B/C/D visual) */
.ssw-review-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 2px;
}
.ssw-rc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid #e8e8e2;
  background: #fff;
  font-size: 13px;
  position: relative;
}
.ssw-rc-neutral { opacity: .65; }
.ssw-rc-correct { border-color: #81c784; background: #f1faf1; }
.ssw-rc-correct-user { border-color: #2e7d32; background: #e8f5e9; }
.ssw-rc-wrong { border-color: #e57373; background: #fdecea; }
.ssw-rc-letter {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #e8e8e2;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #555;
}
.ssw-rc-correct .ssw-rc-letter,
.ssw-rc-correct-user .ssw-rc-letter { background: #2e7d32; color: #fff; }
.ssw-rc-wrong .ssw-rc-letter { background: #c62828; color: #fff; }
.ssw-rc-text { flex: 1; line-height: 1.45; color: #1a1a1a; }
.ssw-rc-neutral .ssw-rc-text { color: #888; }
.ssw-rc-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; letter-spacing: .02em;
}
.ssw-rc-badge-correct { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.ssw-rc-badge-wrong { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; }
.ssw-rc-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.ssw-rc-icon-correct { background: #2e7d32; color: #fff; }
.ssw-rc-icon-wrong   { background: #c62828; color: #fff; }
.ssw-rc-icon-neutral { background: transparent; }
.ssw-rc-skipped-notice { font-size: 12px; font-style: italic; color: #aaa; padding: 6px 0 2px; }
.ssw-review-points { font-size: 13px; font-weight: 600; margin-top: 8px; color: #333; }

/* Explanation dropdown */
.ssw-review-explanation-wrap {
  margin-top: 12px;
}
.ssw-review-exp-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #fff176;
  border-radius: 8px;
  background: #f9a825;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-radius .2s;
}
.ssw-review-exp-toggle:hover {
  background: #f57f17;
}
.ssw-review-exp-toggle.ssw-exp-open {
  border-radius: 8px 8px 0 0;
  background: #7cb342;
  border-color: #aed581;
}
.ssw-review-exp-toggle.ssw-exp-open:hover {
  background: #689f38;
}
.ssw-review-exp-toggle-label {
  letter-spacing: .04em;
}
.ssw-review-exp-toggle-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.ssw-review-explanation {
  margin-top: 0;
  padding: 12px 14px;
  border-radius: 0 0 8px 8px;
  background: #fffde7;
  border: 1px solid #fff176;
  border-top: none;
  font-size: 13px;
  color: #5d4037;
  line-height: 1.65;
}

/* Result actions */
.ssw-result-actions {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 32px; padding-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY
   ══════════════════════════════════════════════════════════════ */
.ssw-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: flex-end;
  animation: ssw-fade-in .2s ease;
}
.ssw-mobile-nav-panel {
  width: 100%;
  max-height: 65vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  padding: 20px;
  animation: ssw-slide-up .25s ease;
}
@keyframes ssw-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.ssw-mobile-nav-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.ssw-mobile-nav-header h4 { margin: 0; font-size: 16px; font-weight: 700; }
.ssw-mobile-nav-close {
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: #f0f0f0;
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ssw-mobile-nav-close:hover { background: #ddd; }

.ssw-mobile-nav-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ssw-mobile-nav-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ssw-text-muted);
  padding: 2px 2px 4px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}
.ssw-mobile-nav-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}
.ssw-mobile-nav-grid .ssw-q-nav-btn {
  width: 100%; height: 44px;
  border-radius: 8px;
  font-size: 14px;
}

.ssw-mobile-nav-legend {
  display: flex; gap: 16px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 12px; color: var(--ssw-text-muted);
}
.ssw-legend-item { display: flex; align-items: center; gap: 6px; }
.ssw-legend-dot {
  width: 12px; height: 12px; border-radius: 3px;
}
.ssw-legend-dot.answered   { background: var(--ssw-nav-answered); }
.ssw-legend-dot.current    { background: var(--ssw-nav-active); }
.ssw-legend-dot.unanswered { background: #444; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .ssw-quiz-app {
    grid-template-columns: 52px 1fr;
  }
  /* Sidebar: tambah label "NO. SOAL" yang jelas di mobile */
  .ssw-nav-sidebar {
    position: relative;
  }
  .ssw-nav-sidebar::before {
    content: "NO.\ASOAL";
    white-space: pre;
    font-size: 7px;
    line-height: 1.3;
  }
  .ssw-header { padding: 0 10px; }
  .ssw-question-card { padding: 16px; gap: 14px; }
  .ssw-footer-nav { padding: 10px 14px; gap: 8px; }
  .ssw-btn { padding: 8px 14px; font-size: 13px; }
  .ssw-q-nav-btn { width: 32px; height: 32px; font-size: 11px; }
  .ssw-audio-player { max-width: 100%; }
  .ssw-result-inner { padding: 20px 14px; }
  .ssw-result-badge { width: 80px; height: 80px; }
  .ssw-result-grade { font-size: 34px; }
  .ssw-btn-nav-grid-toggle { display: flex; }
  .ssw-guest-form-inner { padding: 28px 20px; }
}

@media (max-width: 420px) {
  .ssw-quiz-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "main";
  }
  .ssw-nav-sidebar { display: none; }
  .ssw-btn-nav-grid-toggle { display: flex; }
  .ssw-footer-nav {
    justify-content: space-between;
  }
  .ssw-footer-counter { order: 0; }
}

/* ── Custom per-quiz CSS variable overrides ────────────────── */
/* These are applied via inline style on .ssw-quiz-wrap by JS  */
.ssw-quiz-wrap {
  --ssw-qtext-bg  : #eef5ec;
  --ssw-footer-bg : #ffffff;
}
.ssw-question-text { background: var(--ssw-qtext-bg); }
.ssw-footer-nav    { background: var(--ssw-footer-bg); }

/* ── Answer style: Pill ─────────────────────────────────────── */
.ssw-quiz-wrap[data-answer-style="pill"] .ssw-answer-option {
  border-radius: 50px;
}
.ssw-quiz-wrap[data-answer-style="pill"] .ssw-answer-letter {
  border-radius: 50%;
}

/* ── Answer style: Minimal (line) ─────────────────────────── */
.ssw-quiz-wrap[data-answer-style="minimal"] .ssw-answer-option {
  border-radius: 0;
  border-width: 0 0 1px 0;
  background: transparent;
  padding-left: 8px;
}
.ssw-quiz-wrap[data-answer-style="minimal"] .ssw-answer-option:hover:not(.disabled) {
  background: rgba(61,107,53,.06);
  transform: none;
}

/* ══════════════════════════════════════════════════════════════
   INTRO / START SCREEN
   ══════════════════════════════════════════════════════════════ */
.ssw-intro-screen {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  padding: 48px 24px;
  background:
    radial-gradient(circle at top left,  rgba(61,107,53,0.08)  0%, transparent 55%),
    radial-gradient(circle at bottom right, rgba(200,168,75,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #fafaf5 0%, #f3f3ec 100%);
  animation: ssw-intro-fade .45s ease;
}
@keyframes ssw-intro-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ssw-intro-card {
  width: 100%;
  max-width: 640px;
  background: #ffffff;
  border-radius: 20px;
  padding: 44px 44px 40px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 20px 60px -10px rgba(26,26,26,0.18),
    0 0 0 1px rgba(26,26,26,0.04);
  position: relative;
  overflow: hidden;
}
.ssw-intro-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ssw-primary) 0%, var(--ssw-accent) 100%);
}
.ssw-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  background: rgba(61,107,53,0.08);
  color: var(--ssw-primary);
  border: 1px solid rgba(61,107,53,0.15);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ssw-intro-badge svg { width: 13px; height: 13px; }
.ssw-intro-title {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ssw-text);
  letter-spacing: -0.01em;
}
.ssw-intro-description {
  font-size: 15px;
  line-height: 1.65;
  color: #525252;
  margin: 0 0 28px;
}
.ssw-intro-description p:first-child { margin-top: 0; }
.ssw-intro-description p:last-child  { margin-bottom: 0; }
.ssw-intro-description a { color: var(--ssw-primary); text-decoration: underline; text-underline-offset: 2px; }
.ssw-intro-description strong { color: var(--ssw-text); }
.ssw-intro-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  padding: 16px;
  background: #fafaf5;
  border: 1px solid #ececdf;
  border-radius: 12px;
  margin: 0 0 24px;
}
.ssw-intro-meta-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ssw-intro-meta-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #e5e5d8;
  border-radius: 10px;
  color: var(--ssw-primary);
}
.ssw-intro-meta-icon svg { width: 18px; height: 18px; }
.ssw-intro-meta-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ssw-intro-meta-value {
  font-size: 16px; font-weight: 700; color: var(--ssw-text);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssw-intro-meta-label { font-size: 11px; font-weight: 500; color: #888; letter-spacing: 0.02em; }
.ssw-intro-tips {
  margin: 0 0 28px; padding: 14px 16px 12px;
  background: #fff8e1; border: 1px solid #ffe8a3; border-radius: 10px;
}
.ssw-intro-tips-title {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
  color: #8a5a00; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.ssw-intro-tips-title svg { width: 14px; height: 14px; }
.ssw-intro-tips-list { margin: 0; padding: 0 0 0 22px; font-size: 13px; line-height: 1.6; color: #5d4037; }
.ssw-intro-tips-list li { margin: 4px 0; }
.ssw-intro-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ssw-btn-intro-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px 28px;
  background: var(--ssw-primary); color: #fff; border: none; border-radius: 12px;
  font-family: var(--ssw-font); font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 14px rgba(61,107,53,0.28);
  position: relative; overflow: hidden;
}
.ssw-btn-intro-start::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  transform: translateX(-100%); transition: transform .6s ease;
}
.ssw-btn-intro-start:hover {
  background: var(--ssw-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(61,107,53,0.35);
}
.ssw-btn-intro-start:hover::before { transform: translateX(100%); }
.ssw-btn-intro-start:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(61,107,53,0.28); }
.ssw-btn-intro-start:focus-visible { outline: 3px solid rgba(61,107,53,0.35); outline-offset: 3px; }
.ssw-btn-intro-start svg { width: 20px; height: 20px; transition: transform .18s ease; }
.ssw-btn-intro-start:hover svg { transform: translateX(3px); }
.ssw-intro-resume-note {
  text-align: center; font-size: 12px; color: #888; margin: 0;
  padding: 6px 12px; background: rgba(200,168,75,0.08); border-radius: 8px;
}
@media (max-width: 640px) {
  .ssw-intro-screen { padding: 24px 16px; min-height: 100%; }
  .ssw-intro-card { padding: 32px 24px 28px; border-radius: 16px; }
  .ssw-intro-title { font-size: 24px; }
  .ssw-intro-description { font-size: 14px; margin-bottom: 22px; }
  .ssw-intro-meta { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 8px; }
  .ssw-intro-meta-icon { width: 34px; height: 34px; }
  .ssw-intro-meta-icon svg { width: 16px; height: 16px; }
  .ssw-intro-meta-value { font-size: 14px; }
  .ssw-btn-intro-start { padding: 14px 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ssw-intro-screen { animation: none; }
  .ssw-btn-intro-start, .ssw-btn-intro-start svg, .ssw-btn-intro-start::before { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION AUDIO PLAYER (shared audio for listening sections)
   ══════════════════════════════════════════════════════════════ */
.ssw-section-audio-wrap {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border: 1px solid #ffe082;
  border-radius: var(--ssw-radius-lg, 12px);
  border-left: 4px solid #f9a825;
}
.ssw-section-audio-info {
  font-size: 13px;
  font-weight: 700;
  color: #5d4037;
  margin-bottom: 10px;
}
.ssw-section-audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ssw-section-audio-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #f9a825;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.ssw-section-audio-btn:hover { background: #f57f17; }
.ssw-section-audio-btn svg { width: 18px; height: 18px; }
.ssw-section-audio-progress {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,.1);
  border-radius: 3px;
  overflow: hidden;
}
.ssw-section-audio-bar {
  height: 100%;
  width: 0%;
  background: #f9a825;
  border-radius: 3px;
  transition: width .1s linear;
}
.ssw-section-audio-time {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #5d4037;
  min-width: 36px;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   READING PASSAGE (Dokkai split view)
   ══════════════════════════════════════════════════════════════ */
.ssw-reading-passage-wrap {
  margin-bottom: 16px;
  border: 1px solid #d4e6cf;
  border-radius: var(--ssw-radius-lg, 12px);
  border-left: 4px solid var(--ssw-primary, #3d6b35);
  background: #f8faf7;
  overflow: hidden;
}
.ssw-reading-passage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #eef5ec;
  border-bottom: 1px solid #d4e6cf;
}
.ssw-reading-passage-info {
  font-size: 13px;
  font-weight: 700;
  color: var(--ssw-primary, #3d6b35);
}
.ssw-reading-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #c5dbbf;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background .15s;
}
.ssw-reading-toggle:hover { background: #eef5ec; }
.ssw-reading-passage-body {
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ssw-text, #1a1a1a);
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ssw-reading-passage-body p { margin: 0 0 12px; }
.ssw-reading-passage-body p:last-child { margin-bottom: 0; }

/* Split view on desktop */
@media (min-width: 900px) {
  .ssw-main-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0;
  }
  .ssw-main-split .ssw-reading-passage-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-bottom: 0;
    border-radius: 0;
    border-left: none;
    border-right: 1px solid #d4e6cf;
    max-height: none;
  }
  .ssw-main-split .ssw-reading-passage-body {
    max-height: calc(100vh - 200px);
  }
  .ssw-main-split .ssw-question-meta {
    grid-column: 2;
    grid-row: 1;
  }
  .ssw-main-split .ssw-question-card {
    grid-column: 2;
    grid-row: 2;
  }
  .ssw-main-split .ssw-footer-nav {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  /* Hide toggle on desktop — always show */
  .ssw-main-split .ssw-reading-toggle { display: none; }
}

/* Mobile — stacked, collapsible */
@media (max-width: 899px) {
  .ssw-reading-passage-body {
    max-height: 250px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MODE SELECTOR (Exam / Learning / Review)
   ══════════════════════════════════════════════════════════════ */
.ssw-intro-mode-selector {
  margin: 0 0 24px;
}
.ssw-intro-mode-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ssw-text, #1a1a1a);
  margin: 0 0 10px;
}
.ssw-intro-mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ssw-intro-mode-option {
  cursor: pointer;
  display: block;
}
.ssw-intro-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ssw-intro-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  border: 2px solid #e5e5d8;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.ssw-intro-mode-option:hover .ssw-intro-mode-card {
  border-color: #c5dbbf;
  background: #fafff8;
}
.ssw-intro-mode-option input:checked + .ssw-intro-mode-card {
  border-color: var(--ssw-primary, #3d6b35);
  background: #eef5ec;
  box-shadow: 0 0 0 3px rgba(61,107,53,0.15);
}
.ssw-intro-mode-icon {
  font-size: 28px;
  margin-bottom: 6px;
}
.ssw-intro-mode-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ssw-text, #1a1a1a);
  margin-bottom: 4px;
}
.ssw-intro-mode-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .ssw-intro-mode-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ssw-intro-mode-card {
    flex-direction: row;
    text-align: left;
    gap: 12px;
    padding: 12px 14px;
  }
  .ssw-intro-mode-icon {
    font-size: 24px;
    margin-bottom: 0;
  }
  .ssw-intro-mode-card > :last-child {
    flex: 1;
  }
}