/* ════════════════════════════════════════════════════════════════
   HANGUGEO GICHO — Lesson Stylesheet
   Version: 1.0.0
   Design: Mirror Nihongo Kiso (konsisten 1 website) — tema Korea
   ════════════════════════════════════════════════════════════════ */

/* ─── Theme Variables (Dark default) ─── */
.hg-wrap {
	--bg: #0c0e14;
	--surface: #14171f;
	--card: #1a1e2a;
	--card-hover: #222738;
	--border: rgba(255,255,255,0.06);
	--primary: #3b82f6;            /* Korean blue (taegeuk biru) */
	--primary-soft: rgba(59,130,246,0.15);
	--accent: #ef4444;             /* Korean red (taegeuk merah) */
	--accent-soft: rgba(239,68,68,0.12);
	--gold: #fdcb6e;
	--success: #00b894;
	--danger: #e17055;
	--warning: #f39c12;
	--text: #eef0f6;
	--text-dim: #aab3d0;
	--text-muted: #8a93b6;
	--radius: 16px;
	--radius-sm: 10px;
	--shadow: 0 8px 32px rgba(0,0,0,0.3);

	font-family: 'Outfit', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
	background: var(--bg);
	color: var(--text);
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	min-height: 100vh;
	line-height: 1.7;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}
.hg-wrap *, .hg-wrap *::before, .hg-wrap *::after { box-sizing: border-box; }

/* ─── Light Theme Override ─── */
.hg-wrap.hg-light {
	--bg: #fafbfc;
	--surface: #ffffff;
	--card: #ffffff;
	--card-hover: #f3f5f9;
	--border: rgba(0,0,0,0.08);
	--text: #1a1d29;
	--text-dim: #3f4666;
	--text-muted: #6b7494;
	--gold: #9a7b18;               /* gold lebih gelap agar terbaca di bg terang */
	--primary: #2563eb;            /* biru sedikit lebih pekat untuk kontras */
	--accent: #dc2626;             /* merah sedikit lebih pekat */
	--shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ─── Typography ─── */
.hg-wrap h1, .hg-wrap h2, .hg-wrap h3, .hg-wrap h4 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
}
.hg-wrap p { margin: 0 0 14px; }

/* ─── Korean Fonts ─── */
.hg-ko, .hg-vocab-ko, .hg-pattern-formula, .hg-example-ko,
.hg-line-ko, .hg-flashcard-ko, .hg-char-hangeul, .hg-cw-ko,
.hg-ch-title-ko, .hg-warmup-sub, .hg-tb-num {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-weight: 600;
}

/* ─── Ruby (for romanization) ─── */
.hg-wrap ruby { ruby-align: center; }
.hg-wrap ruby rt {
	font-size: 0.55em;
	color: var(--text-dim);
	font-weight: 400;
}

/* ════════════════════════════════════════════════════════════
   INDEX HEADER
   ════════════════════════════════════════════════════════════ */
.hg-index-header {
	text-align: center;
	padding: 32px 16px 24px;
	margin-bottom: 24px;
}
.hg-logo {
	font-size: 56px;
	margin-bottom: 8px;
	line-height: 1;
}
.hg-title {
	font-size: 34px;
	font-weight: 800;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 6px;
}
.hg-subtitle {
	font-size: 18px;
	color: var(--text-dim);
	margin-bottom: 4px;
}
.hg-tagline {
	font-size: 14px;
	color: var(--text-muted);
}
.hg-topbar-controls {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	margin-bottom: 12px;
}

/* ════════════════════════════════════════════════════════════
   CHAPTER GRID
   ════════════════════════════════════════════════════════════ */
.hg-chapter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 32px;
}
.hg-chapter-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: var(--text);
	transition: all 0.2s;
}
.hg-chapter-card:hover {
	background: var(--card-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	border-color: var(--primary);
}
.hg-chapter-card.hg-locked {
	opacity: 0.45;
	pointer-events: none;
}
.hg-chapter-card.hg-completed { border-color: var(--success); }
.hg-chapter-card.hg-inprogress { border-color: var(--gold); }

.hg-ch-num {
	font-size: 12px;
	color: var(--accent);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.hg-ch-title { font-size: 17px; font-weight: 700; }
.hg-ch-title-ko { font-size: 15px; color: var(--text-dim); }
.hg-ch-sub { font-size: 13px; color: var(--text-dim); }
.hg-ch-status { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ════════════════════════════════════════════════════════════
   TOPBAR (chapter view)
   ════════════════════════════════════════════════════════════ */
.hg-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.hg-topbar-actions { margin-left: auto; display: flex; gap: 6px; }

.hg-topbar-btn {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.15s;
}
.hg-topbar-btn:hover {
	border-color: var(--primary);
	background: var(--card-hover);
}

.hg-back-btn {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-dim);
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s;
}
.hg-back-btn:hover {
	background: var(--card);
	color: var(--text);
	border-color: var(--primary);
}

.hg-topbar-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hg-tb-num {
	font-size: 12px;
	color: var(--accent);
	font-weight: 700;
	letter-spacing: 1px;
}
.hg-tb-text {
	font-size: 16px;
	font-weight: 700;
}

/* ─── Step Bar ─── */
.hg-step-bar {
	display: flex;
	gap: 8px;
	margin: 0 0 24px;
	justify-content: center;
}
.hg-step-dot {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--card);
	border: 2px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.2s;
}
.hg-step-dot:hover { border-color: var(--primary); }
.hg-step-dot.active {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
	transform: scale(1.1);
}
.hg-step-dot.done {
	background: var(--success);
	border-color: var(--success);
	color: white;
}

/* ════════════════════════════════════════════════════════════
   STEPS — Common
   ════════════════════════════════════════════════════════════ */
.hg-step { animation: hgFadeIn 0.4s ease; }
@keyframes hgFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
.hg-step h2 {
	font-size: 22px;
	margin-bottom: 16px;
}
.hg-step-desc {
	color: var(--text-dim);
	margin-bottom: 16px;
}
.hg-step-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

/* ─── Buttons ─── */
.hg-btn {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s;
}
.hg-btn:hover:not(:disabled) {
	border-color: var(--primary);
	background: var(--card-hover);
}
.hg-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.hg-btn-primary {
	background: linear-gradient(135deg, var(--primary), var(--accent));
	border: none;
	color: white;
}
.hg-btn-primary:hover:not(:disabled) {
	filter: brightness(1.1);
	box-shadow: 0 4px 12px var(--primary-soft);
}
.hg-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}
.hg-btn-large {
	padding: 14px 28px;
	font-size: 16px;
}

/* ─── Audio Button ─── */
.hg-audio-btn {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-dim);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	flex-shrink: 0;
}
.hg-audio-btn:hover {
	border-color: var(--primary);
	background: var(--primary-soft);
	color: var(--primary);
	transform: scale(1.08);
}
.hg-audio-btn.hg-playing {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
	animation: hgPulseAudio 0.8s ease infinite;
}
/* Ikon speaker SVG (ganti emoji 🔊 agar pasti tampil di semua perangkat) */
.hg-audio-ic { width: 16px; height: 16px; pointer-events: none; display: inline-block; vertical-align: middle; }
@keyframes hgPulseAudio {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}

.hg-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-muted);
	font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   STEP 1: WARMUP
   ════════════════════════════════════════════════════════════ */
.hg-warmup-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 32px 24px;
	text-align: center;
	margin-bottom: 16px;
}
.hg-warmup-emoji { font-size: 48px; margin-bottom: 12px; }
.hg-warmup-title { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.hg-warmup-sub {
	font-size: 18px;
	color: var(--text-dim);
	margin-bottom: 20px;
}
.hg-banner-img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	margin: 12px 0 20px;
}
.hg-warmup-story {
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 16px;
	text-align: left;
	color: var(--text-dim);
	font-size: 14px;
}

.hg-objectives {
	margin-top: 20px;
	padding: 16px;
	background: var(--primary-soft);
	border-radius: var(--radius-sm);
	text-align: left;
}
.hg-objectives h3 {
	color: var(--accent);
	font-size: 15px;
	margin-bottom: 10px;
}
.hg-obj-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 6px 0;
	font-size: 14px;
}
.hg-obj-check {
	color: var(--success);
	flex-shrink: 0;
	font-weight: bold;
}

/* ════════════════════════════════════════════════════════════
   STEP 2: VOCAB
   ════════════════════════════════════════════════════════════ */
.hg-vocab-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 12px;
	flex-wrap: wrap;
}
.hg-vocab-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}
.hg-vocab-count {
	background: var(--primary-soft);
	color: var(--primary);
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.hg-vocab-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hg-vocab-item {
	display: flex;
	gap: 12px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px;
	cursor: pointer;
	transition: all 0.15s;
}
.hg-vocab-item:hover {
	background: var(--card-hover);
	border-color: var(--primary);
}
.hg-vocab-item.expanded {
	border-color: var(--accent);
}
.hg-vocab-item.hg-playing-item {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-soft);
}
.hg-vocab-num {
	width: 28px;
	height: 28px;
	background: var(--surface);
	color: var(--text-muted);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}
.hg-vocab-body { flex: 1; min-width: 0; }
.hg-vocab-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}
.hg-vocab-ko {
	font-size: 22px;
	font-weight: 700;
}
.hg-vocab-reading {
	color: var(--text-dim);
	font-size: 13px;
	font-style: italic;
	margin-bottom: 4px;
}
.hg-vocab-arti {
	color: var(--text);
	font-size: 15px;
	margin-bottom: 6px;
}
.hg-vocab-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.hg-vocab-cat, .hg-vocab-honor, .hg-vocab-hanja {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--surface);
	color: var(--text-dim);
	font-weight: 600;
}
.hg-vocab-honor {
	background: var(--accent-soft);
	color: var(--accent);
}
.hg-vocab-hanja {
	background: var(--primary-soft);
	color: var(--primary);
}
.hg-vocab-notes {
	display: none;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	color: var(--text-dim);
	font-size: 13px;
}
.hg-vocab-item.expanded .hg-vocab-notes { display: block; }

/* ════════════════════════════════════════════════════════════
   STEP 3: PATTERNS
   ════════════════════════════════════════════════════════════ */
.hg-pattern-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 16px;
}
.hg-pattern-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.hg-pattern-formula {
	font-size: 20px;
	font-weight: 700;
	color: var(--accent);
}
.hg-pattern-rom {
	color: var(--text-dim);
	font-style: italic;
	font-size: 13px;
	margin-bottom: 12px;
}
.hg-pattern-exp {
	color: var(--text-dim);
	font-size: 14px;
	margin-bottom: 16px;
}
.hg-examples {
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 14px;
}
.hg-examples h4 {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.hg-example-item {
	padding: 10px 0;
	border-bottom: 1px dashed var(--border);
}
.hg-example-item:last-child { border-bottom: none; }
.hg-example-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}
.hg-example-ko {
	font-size: 17px;
	font-weight: 600;
}
.hg-example-rom {
	font-style: italic;
	color: var(--text-dim);
	font-size: 13px;
	margin-bottom: 4px;
}
.hg-example-arti { color: var(--text); font-size: 14px; }
.hg-example-notes {
	color: var(--text-muted);
	font-size: 13px;
	margin-top: 4px;
	font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   STEP 4: DRILLS
   ════════════════════════════════════════════════════════════ */
.hg-drill-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 14px;
}
.hg-drill-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.hg-drill-num {
	font-size: 12px;
	color: var(--accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.hg-drill-question {
	font-size: 16px;
	margin-bottom: 14px;
	font-family: 'Noto Sans KR', sans-serif;
}
.hg-drill-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hg-drill-option {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-align: left;
	font-size: 15px;
	font-family: inherit;
	transition: all 0.15s;
}
.hg-drill-option:hover:not(:disabled) {
	border-color: var(--primary);
	background: var(--card-hover);
}
.hg-drill-option:disabled { cursor: default; }
.hg-opt-key {
	width: 28px;
	height: 28px;
	background: var(--bg);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--text-dim);
	flex-shrink: 0;
}
.hg-opt-correct {
	border-color: var(--success) !important;
	background: rgba(0,184,148,0.12) !important;
}
.hg-opt-correct .hg-opt-key { background: var(--success); color: white; }
.hg-opt-wrong {
	border-color: var(--danger) !important;
	background: rgba(225,112,85,0.12) !important;
}
.hg-opt-wrong .hg-opt-key { background: var(--danger); color: white; }

.hg-drill-feedback {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 600;
}
.hg-fb-correct {
	background: rgba(0,184,148,0.15);
	color: var(--success);
}
.hg-fb-wrong {
	background: rgba(225,112,85,0.15);
	color: var(--danger);
}
.hg-drill-explanation {
	margin-top: 10px;
	padding: 10px 14px;
	background: var(--surface);
	border-radius: var(--radius-sm);
	color: var(--text-dim);
	font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   STEP 5: DAEHWA (Dialog)
   ════════════════════════════════════════════════════════════ */
.hg-daehwa-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 16px;
}
.hg-daehwa-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.hg-daehwa-header h3 { margin: 0; font-size: 18px; }
.hg-daehwa-situation {
	color: var(--text-dim);
	font-size: 13px;
	margin-bottom: 16px;
	padding: 8px 12px;
	background: var(--surface);
	border-left: 3px solid var(--accent);
	border-radius: 4px;
}

.hg-daehwa-lines {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hg-line {
	display: flex;
	gap: 12px;
	padding: 10px;
	border-radius: var(--radius-sm);
	transition: background 0.2s;
}
.hg-line.hg-playing-item {
	background: var(--accent-soft);
}
.hg-line-speaker {
	font-weight: 700;
	color: var(--primary);
	flex-shrink: 0;
	min-width: 30px;
}
.hg-line-body { flex: 1; min-width: 0; }
.hg-line-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}
.hg-line-ko {
	font-size: 17px;
	font-weight: 600;
}
.hg-line-rom {
	font-style: italic;
	color: var(--text-dim);
	font-size: 13px;
	margin-bottom: 4px;
}
.hg-line-arti { color: var(--text); font-size: 14px; }
.hg-line-notes {
	color: var(--text-muted);
	font-size: 13px;
	margin-top: 4px;
	font-style: italic;
}

.hg-culture-note {
	margin-top: 16px;
	padding: 14px;
	background: var(--primary-soft);
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: var(--text-dim);
}
.hg-culture-note strong { color: var(--primary); }

/* ════════════════════════════════════════════════════════════
   STEP 6: FLASHCARD
   ════════════════════════════════════════════════════════════ */
.hg-flashcard-container {
	max-width: 480px;
	margin: 0 auto;
	perspective: 1200px;
}
.hg-flashcard {
	position: relative;
	width: 100%;
	aspect-ratio: 3/2;
	transform-style: preserve-3d;
	transition: transform 0.6s;
	cursor: pointer;
	margin-bottom: 16px;
}
.hg-flashcard.hg-flipped { transform: rotateY(180deg); }
.hg-flashcard-face {
	position: absolute;
	inset: 0;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
	padding: 24px;
	box-shadow: var(--shadow);
}
.hg-flashcard-back { transform: rotateY(180deg); }
.hg-flashcard-ko {
	font-size: 48px;
	font-weight: 700;
	color: var(--text);
	font-family: 'Noto Sans KR', sans-serif;
}
.hg-flashcard-rom {
	font-size: 20px;
	color: var(--text-dim);
	font-style: italic;
	margin-bottom: 12px;
}
.hg-flashcard-arti {
	font-size: 24px;
	color: var(--text);
	text-align: center;
}
.hg-flashcard-hint {
	position: absolute;
	bottom: 16px;
	font-size: 12px;
	color: var(--text-muted);
}
.hg-fc-audio {
	position: absolute;
	top: 16px;
	right: 16px;
}

.hg-flashcard-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.hg-flashcard-counter {
	color: var(--text-dim);
	font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   STEP 7: TEST
   ════════════════════════════════════════════════════════════ */
.hg-test-summary {
	text-align: center;
	padding: 40px 20px;
}
.hg-test-icon { font-size: 64px; margin-bottom: 12px; }
.hg-test-score-display {
	font-size: 22px;
	font-weight: 700;
	color: var(--accent);
	margin: 20px 0;
}

/* ════════════════════════════════════════════════════════════
   HANGEUL MODULE
   ════════════════════════════════════════════════════════════ */
.hg-hangeul-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}
.hg-hangeul-module-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
	text-decoration: none;
	color: var(--text);
	transition: all 0.2s;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hg-hangeul-module-card:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}
.hg-hm-emoji {
	font-size: 56px;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 800;
	color: var(--accent);
	margin-bottom: 6px;
}
.hg-hm-cta {
	margin-top: 6px;
	color: var(--primary);
	font-size: 13px;
	font-weight: 700;
}

.hg-hangeul-intro {
	text-align: center;
	padding: 16px 0 24px;
}
.hg-hi-emoji { font-size: 48px; margin-bottom: 8px; }
.hg-hi-ko { color: var(--text-dim); font-weight: 400; font-size: 0.7em; }

.hg-char-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-bottom: 32px;
}
.hg-char-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	transition: all 0.2s;
	cursor: pointer;
}
.hg-char-card:hover {
	border-color: var(--primary);
}
.hg-char-card.hg-card-playing {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.hg-char-display {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 10px;
	padding: 16px;
	background: var(--surface);
	border-radius: var(--radius-sm);
}
.hg-char-hangeul {
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	color: var(--text);
}
.hg-char-audio { width: 40px; height: 40px; font-size: 16px; }
.hg-char-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 13px;
}
.hg-char-rom {
	color: var(--accent);
	font-weight: 700;
	font-size: 18px;
}
.hg-char-name { color: var(--text-dim); }
.hg-char-ipa { color: var(--text-muted); font-family: monospace; }

.hg-char-details {
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	margin: 10px 0;
	font-size: 13px;
}
.hg-char-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--text-dim);
}
.hg-char-details p { margin: 8px 0 0; color: var(--text-dim); }

.hg-char-words {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--border);
}
.hg-char-words h5 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-muted);
	margin-bottom: 8px;
}
.hg-char-word {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 14px;
	flex-wrap: wrap;
}
.hg-cw-ko { font-weight: 700; font-size: 16px; }
.hg-cw-rom { color: var(--text-dim); font-size: 12px; }
.hg-cw-arti { color: var(--text-dim); }

.hg-char-actions {
	margin-top: 10px;
	display: flex;
	gap: 8px;
}

/* ─── Tracing Modal ─── */
.hg-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.hg-modal[hidden] { display: none; }
.hg-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(4px);
}
.hg-modal-content {
	position: relative;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.hg-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-dim);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
}
.hg-trace-canvas-wrap {
	position: relative;
	margin: 16px 0;
	background: var(--surface);
	border-radius: var(--radius-sm);
	overflow: hidden;
	aspect-ratio: 1;
}
.hg-trace-guide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 220px;
	font-family: 'Noto Sans KR', sans-serif;
	color: rgba(255,255,255,0.08);
	pointer-events: none;
	user-select: none;
	line-height: 1;
}
.hg-light .hg-trace-guide { color: rgba(0,0,0,0.08); }
#hg-trace-canvas {
	width: 100%;
	height: 100%;
	display: block;
	touch-action: none;
	cursor: crosshair;
}
.hg-trace-controls {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ─── Hangeul Drill Section ─── */
.hg-drill-section {
	margin-top: 32px;
	padding: 24px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-align: center;
}
.hg-drill-section h3 { margin-bottom: 8px; }
.hg-drill-progress {
	color: var(--text-dim);
	font-size: 13px;
	margin-bottom: 12px;
}
.hg-drill-play-wrap { margin-bottom: 20px; }
.hg-drill-options-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	max-width: 320px;
	margin: 0 auto 16px;
}
.hg-drill-choice {
	background: var(--surface);
	border: 2px solid var(--border);
	color: var(--text);
	padding: 20px 12px;
	border-radius: var(--radius-sm);
	font-size: 32px;
	font-weight: 700;
	font-family: 'Noto Sans KR', sans-serif;
	cursor: pointer;
	transition: all 0.15s;
}
.hg-drill-choice:hover:not(:disabled) {
	border-color: var(--primary);
	background: var(--card-hover);
}
.hg-drill-choice:disabled { cursor: default; }
.hg-drill-stats { color: var(--text-dim); font-size: 13px; }

.hg-drill-result {
	padding: 24px;
}
.hg-drill-result-emoji { font-size: 56px; margin-bottom: 8px; }
.hg-drill-result h3 { color: var(--accent); margin-bottom: 8px; }

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.hg-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--card);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	z-index: 10000;
	font-size: 14px;
	animation: hgToastIn 0.3s ease;
}
.hg-toast-warn { border-color: var(--warning); }
.hg-toast-out {
	animation: hgToastOut 0.4s ease forwards;
}
@keyframes hgToastIn {
	from { transform: translate(-50%, 20px); opacity: 0; }
	to { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes hgToastOut {
	to { transform: translate(-50%, 20px); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	.hg-wrap { padding: 14px; font-size: 15px; }
	.hg-title { font-size: 26px; }
	.hg-warmup-title { font-size: 22px; }
	.hg-step h2 { font-size: 18px; }
	.hg-chapter-grid { grid-template-columns: 1fr; }
	.hg-char-grid { grid-template-columns: 1fr; }
	.hg-step-dot { width: 30px; height: 30px; font-size: 11px; }
	.hg-flashcard-ko { font-size: 38px; }
	.hg-char-hangeul { font-size: 52px; }
	.hg-trace-guide { font-size: 160px; }
	.hg-step-nav { flex-direction: column; }
	.hg-step-nav .hg-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   STEP 7: QUIZ (Tes Akhir Bab) — v1.2.0
   ════════════════════════════════════════════════════════════════ */

/* Screen container */
.hg-quiz-screen {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 32px 24px;
	text-align: center;
}

/* --- Intro screen --- */
.hg-quiz-icon {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 16px;
}
.hg-quiz-desc {
	max-width: 500px;
	margin: 0 auto 24px;
	color: var(--text-dim);
}
.hg-quiz-rules {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 360px;
	margin: 0 auto 28px;
	text-align: left;
}
.hg-quiz-rule {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--surface);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}
.hg-quiz-rule-icon { font-size: 20px; flex-shrink: 0; }
.hg-btn-lg {
	font-size: 16px;
	padding: 14px 32px;
}

/* --- Active quiz screen --- */
.hg-quiz-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	text-align: left;
}
.hg-quiz-progress {
	flex: 1;
	min-width: 0;
}
.hg-quiz-progress-bar {
	height: 8px;
	background: var(--surface);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 6px;
}
.hg-quiz-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	border-radius: 4px;
	transition: width 0.4s ease;
}
.hg-quiz-progress-text {
	font-size: 13px;
	color: var(--text-dim);
}
.hg-quiz-score-live {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--primary-soft);
	border-radius: 20px;
	font-weight: 700;
	color: var(--primary);
	font-size: 14px;
	white-space: nowrap;
}
.hg-quiz-score-icon { color: var(--success); }

.hg-quiz-question-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 24px 20px;
	margin-bottom: 16px;
	text-align: center;
}
.hg-quiz-q-type {
	display: inline-block;
	padding: 4px 12px;
	background: var(--primary-soft);
	color: var(--primary);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 20px;
}
.hg-quiz-q-prompt {
	font-size: 32px;
	font-weight: 700;
	margin: 12px 0;
	line-height: 1.3;
}
.hg-quiz-q-audio-only {
	padding: 24px 0;
}
.hg-quiz-big-audio {
	width: 88px;
	height: 88px;
	font-size: 36px;
	border-radius: 50%;
	background: var(--primary);
	color: white;
	border: none;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 4px 16px rgba(59,130,246,0.4);
}
.hg-quiz-big-audio:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 24px rgba(59,130,246,0.5);
}
.hg-quiz-q-audio-hint {
	margin-top: 12px;
	color: var(--text-dim);
	font-size: 13px;
}

.hg-quiz-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 20px;
}
.hg-quiz-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--card);
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 15px;
	cursor: pointer;
	text-align: left;
	transition: all 0.2s;
	font-family: inherit;
}
.hg-quiz-option:hover:not(:disabled) {
	border-color: var(--primary);
	background: var(--card-hover);
}
.hg-quiz-option:disabled { cursor: not-allowed; opacity: 0.85; }
.hg-quiz-option .hg-opt-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--surface);
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}
.hg-quiz-option .hg-opt-text { flex: 1; }
.hg-quiz-option.hg-opt-correct {
	border-color: var(--success);
	background: rgba(0,184,148,0.12);
}
.hg-quiz-option.hg-opt-correct .hg-opt-key {
	background: var(--success);
	color: white;
}
.hg-quiz-option.hg-opt-wrong {
	border-color: var(--danger);
	background: rgba(225,112,85,0.10);
}
.hg-quiz-option.hg-opt-wrong .hg-opt-key {
	background: var(--danger);
	color: white;
}

.hg-quiz-feedback {
	margin-top: 16px;
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 15px;
}
.hg-quiz-feedback.hg-fb-correct {
	background: rgba(0,184,148,0.15);
	color: var(--success);
}
.hg-quiz-feedback.hg-fb-wrong {
	background: rgba(225,112,85,0.12);
	color: var(--danger);
}

.hg-quiz-nav {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}
.hg-quiz-nav .hg-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* --- Result screen --- */
.hg-quiz-result-icon {
	font-size: 72px;
	line-height: 1;
	margin-bottom: 8px;
}
.hg-quiz-score-big {
	margin: 20px 0 24px;
}
.hg-quiz-score-percent {
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 6px;
}
.hg-quiz-score-detail {
	color: var(--text-dim);
	font-size: 14px;
}
.hg-quiz-result-message {
	max-width: 480px;
	margin: 0 auto 24px;
	padding: 14px 18px;
	background: var(--surface);
	border-radius: var(--radius-sm);
}
.hg-quiz-msg-pass { color: var(--success); font-weight: 600; }
.hg-quiz-msg-fail { color: var(--warning); font-weight: 600; }

.hg-quiz-review {
	margin: 24px 0;
	text-align: left;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.hg-quiz-review h3 {
	font-size: 16px;
	margin-bottom: 12px;
	color: var(--text-dim);
}
.hg-quiz-review-item {
	display: flex;
	gap: 14px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--danger);
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
}
.hg-quiz-review-num {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background: var(--danger);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}
.hg-quiz-review-body { flex: 1; }
.hg-quiz-review-q {
	font-size: 15px;
	margin-bottom: 6px;
}
.hg-quiz-review-ans {
	font-size: 13px;
	color: var(--text-dim);
	line-height: 1.8;
}
.hg-rv-wrong {
	color: var(--danger);
	text-decoration: line-through;
}
.hg-rv-correct {
	color: var(--success);
	font-weight: 600;
}

.hg-quiz-result-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 24px;
}
.hg-quiz-result-actions .hg-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* --- Mobile responsiveness --- */
@media (max-width: 600px) {
	.hg-quiz-screen { padding: 24px 16px; }
	.hg-quiz-q-prompt { font-size: 26px; }
	.hg-quiz-options { grid-template-columns: 1fr; }
	.hg-quiz-score-percent { font-size: 52px; }
	.hg-quiz-result-icon { font-size: 60px; }
	.hg-quiz-result-actions { flex-direction: column; }
	.hg-quiz-result-actions .hg-btn { width: 100%; }
	.hg-quiz-header { flex-direction: column; align-items: stretch; gap: 10px; }
	.hg-quiz-score-live { align-self: flex-end; }
}

/* ════════════════════════════════════════════════════════════════
   MINI QUIZ — Cek Pemahaman per Pola (Step 3 inline) — v1.3.0
   ════════════════════════════════════════════════════════════════ */

.hg-mini-quiz {
	margin-top: 18px;
	padding: 16px;
	background: var(--primary-soft);
	border: 1px solid rgba(59, 130, 246, 0.25);
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--primary);
}

.hg-mini-quiz-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}
.hg-mini-quiz-header h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--primary);
	flex: 1;
}
.hg-mini-quiz-icon { font-size: 18px; }
.hg-mini-quiz-count {
	font-size: 11px;
	padding: 2px 8px;
	background: var(--primary);
	color: white;
	border-radius: 10px;
	font-weight: 600;
}

.hg-mq-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px;
	margin-bottom: 10px;
}
.hg-mq-card:last-child { margin-bottom: 0; }
.hg-mq-card.hg-answered { border-color: rgba(59, 130, 246, 0.3); }

.hg-mq-question {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.5;
}
.hg-mq-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--primary);
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.hg-mq-q-text { flex: 1; }

.hg-mq-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.hg-mq-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 13px;
	cursor: pointer;
	text-align: left;
	transition: all 0.2s;
	font-family: inherit;
	min-height: 42px;
}
.hg-mq-option:hover:not(:disabled) {
	border-color: var(--primary);
	background: var(--card-hover);
}
.hg-mq-option:disabled { cursor: not-allowed; opacity: 0.85; }
.hg-mq-option .hg-opt-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 50%;
	font-weight: 700;
	font-size: 11px;
	flex-shrink: 0;
}
.hg-mq-option .hg-opt-text { flex: 1; }
.hg-mq-option.hg-opt-correct {
	border-color: var(--success);
	background: rgba(0, 184, 148, 0.10);
}
.hg-mq-option.hg-opt-correct .hg-opt-key {
	background: var(--success);
	color: white;
	border-color: var(--success);
}
.hg-mq-option.hg-opt-wrong {
	border-color: var(--danger);
	background: rgba(225, 112, 85, 0.08);
}
.hg-mq-option.hg-opt-wrong .hg-opt-key {
	background: var(--danger);
	color: white;
	border-color: var(--danger);
}

.hg-mq-explanation {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--surface);
	border-left: 2px solid var(--gold);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-dim);
}

/* Mobile responsiveness for mini-quiz */
@media (max-width: 600px) {
	.hg-mini-quiz { padding: 12px; }
	.hg-mq-options { grid-template-columns: 1fr; }
	.hg-mq-question { font-size: 13px; }
	.hg-mq-option { font-size: 13px; padding: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   STEP 4: LATIHAN QUIZ — 10 acak dari pool 30 — v1.4.0
   Mirror Step 7 quiz layout dengan prefix .hg-s4-*
   ════════════════════════════════════════════════════════════════ */

.hg-s4-screen {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px 22px;
	text-align: center;
	margin-bottom: 16px;
}

/* --- Intro --- */
.hg-s4-icon { font-size: 48px; line-height: 1; margin-bottom: 12px; }
.hg-s4-screen h3 { font-size: 22px; margin-bottom: 8px; }
.hg-s4-desc {
	max-width: 520px;
	margin: 0 auto 22px;
	color: var(--text-dim);
	font-size: 14px;
	line-height: 1.65;
}
.hg-s4-rules {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 380px;
	margin: 0 auto 24px;
	text-align: left;
}
.hg-s4-rule {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	background: var(--surface);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	font-size: 14px;
}
.hg-s4-rule-icon { font-size: 18px; flex-shrink: 0; }

/* --- Active quiz --- */
.hg-s4-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	text-align: left;
}
.hg-s4-progress { flex: 1; min-width: 0; }
.hg-s4-progress-bar {
	height: 8px;
	background: var(--surface);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 6px;
}
.hg-s4-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	border-radius: 4px;
	transition: width 0.4s ease;
}
.hg-s4-progress-text { font-size: 13px; color: var(--text-dim); }
.hg-s4-score-live {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--primary-soft);
	border-radius: 20px;
	font-weight: 700;
	color: var(--primary);
	font-size: 14px;
	white-space: nowrap;
}
.hg-s4-score-icon { color: var(--success); }

.hg-s4-question-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 22px 18px;
	margin-bottom: 16px;
	text-align: left;
}
.hg-s4-q-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.hg-s4-q-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--primary);
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}
.hg-s4-q-text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
	margin-bottom: 16px;
}

.hg-s4-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.hg-s4-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--card);
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 14px;
	cursor: pointer;
	text-align: left;
	transition: all 0.2s;
	font-family: inherit;
	line-height: 1.4;
}
.hg-s4-option:hover:not(:disabled) {
	border-color: var(--primary);
	background: var(--card-hover);
}
.hg-s4-option:disabled { cursor: not-allowed; opacity: 0.85; }
.hg-s4-option .hg-opt-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var(--surface);
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}
.hg-s4-option .hg-opt-text { flex: 1; }
.hg-s4-option.hg-opt-correct {
	border-color: var(--success);
	background: rgba(0,184,148,0.12);
}
.hg-s4-option.hg-opt-correct .hg-opt-key {
	background: var(--success);
	color: white;
}
.hg-s4-option.hg-opt-wrong {
	border-color: var(--danger);
	background: rgba(225,112,85,0.10);
}
.hg-s4-option.hg-opt-wrong .hg-opt-key {
	background: var(--danger);
	color: white;
}

.hg-s4-feedback {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	font-size: 14px;
}
.hg-s4-feedback.hg-fb-correct {
	background: rgba(0,184,148,0.12);
	color: var(--success);
}
.hg-s4-feedback.hg-fb-wrong {
	background: rgba(225,112,85,0.10);
	color: var(--danger);
}
.hg-s4-fb-head { font-weight: 700; margin-bottom: 6px; }
.hg-s4-fb-expl {
	color: var(--text-dim);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	padding-top: 6px;
	border-top: 1px solid rgba(255,255,255,0.06);
	margin-top: 6px;
}
.hg-light .hg-s4-fb-expl { border-top-color: rgba(0,0,0,0.06); }

.hg-s4-nav {
	display: flex;
	justify-content: flex-end;
}
.hg-s4-nav .hg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Result --- */
.hg-s4-result-icon { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.hg-s4-score-big { margin: 18px 0 22px; }
.hg-s4-score-percent {
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 6px;
}
.hg-s4-score-detail { color: var(--text-dim); font-size: 14px; }
.hg-s4-result-message {
	max-width: 480px;
	margin: 0 auto 22px;
	padding: 12px 16px;
	background: var(--surface);
	border-radius: var(--radius-sm);
	font-size: 14px;
}
.hg-s4-msg-pass { color: var(--success); font-weight: 600; }
.hg-s4-msg-ok { color: var(--gold); font-weight: 600; }
.hg-s4-msg-low { color: var(--warning); font-weight: 600; }

.hg-s4-review {
	margin: 22px 0;
	text-align: left;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.hg-s4-review h4 {
	font-size: 15px;
	margin-bottom: 12px;
	color: var(--text-dim);
}
.hg-s4-review-item {
	display: flex;
	gap: 12px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--danger);
	border-radius: var(--radius-sm);
	margin-bottom: 8px;
}
.hg-s4-review-num {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background: var(--danger);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
}
.hg-s4-review-body { flex: 1; }
.hg-s4-review-q { font-size: 14px; margin-bottom: 6px; }
.hg-s4-review-ans {
	font-size: 13px;
	color: var(--text-dim);
	line-height: 1.8;
	margin-bottom: 6px;
}
.hg-s4-review-expl {
	font-size: 12px;
	color: var(--text-dim);
	padding: 8px 10px;
	background: var(--card);
	border-left: 2px solid var(--gold);
	border-radius: 4px;
	line-height: 1.55;
}

.hg-s4-result-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 22px;
}

/* --- Mobile --- */
@media (max-width: 600px) {
	.hg-s4-screen { padding: 22px 14px; }
	.hg-s4-q-text { font-size: 15px; }
	.hg-s4-options { grid-template-columns: 1fr; }
	.hg-s4-score-percent { font-size: 46px; }
	.hg-s4-result-icon { font-size: 54px; }
	.hg-s4-result-actions { flex-direction: column; }
	.hg-s4-result-actions .hg-btn { width: 100%; }
	.hg-s4-header { flex-direction: column; align-items: stretch; gap: 10px; }
	.hg-s4-score-live { align-self: flex-end; }
}

/* ── Audio penutur asli & video dialog (v2.11.0) ───────────────────── */
.hg-daehwa-audio {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 10px 0;
}
.hg-daehwa-audio audio {
	height: 36px;
	max-width: 100%;
}
.hg-native-badge {
	font-size: 12px;
	font-weight: 600;
	color: #8a7320;
	background: #f5ecc8;
	border: 1px solid #e0c25a;
	border-radius: 999px;
	padding: 2px 10px;
	white-space: nowrap;
}
.hg-daehwa-video {
	margin: 12px 0;
}
.hg-daehwa-video .hg-video-wrap {
	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
}
.hg-daehwa-video .hg-video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ─── Floating Theme Toggle (berdampingan dengan tombol fullscreen) ─── */
.hg-theme-fab {
	position: fixed;
	bottom: 24px;
	right: 92px;                 /* di kiri tombol fullscreen: 56px + 24px + 12px gap */
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,0.2);
	background: linear-gradient(135deg, #c9a83e, #e0c25a);
	color: #fff;
	cursor: pointer;
	z-index: 1000000;            /* sejajar dengan .fsk-btn */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 24px rgba(0,0,0,0.35);
	transition: transform 0.2s ease;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}
.hg-theme-fab:hover { transform: scale(1.1); }
.hg-theme-fab svg { width: 24px; height: 24px; pointer-events: none; }
.hg-theme-toggle svg { width: 18px; height: 18px; pointer-events: none; vertical-align: middle; }
@media (max-width: 600px) {
	.hg-theme-fab { width: 46px; height: 46px; bottom: 12px; right: 68px; } /* 46 + 12 + 10 */
	.hg-theme-fab svg { width: 20px; height: 20px; }
}