/* ===================================================================
   Exam Practice — Mobile-first
   =================================================================== */
:root {
	--ep-primary:        #2c395d;
	--ep-primary-mid:    #3f5183;
	--ep-primary-light:  #6478ac;
	--ep-primary-dim:    #1f2942;
	--ep-primary-soft:   #e0e5f0;
	--ep-accent:         #f59e0b;
	--ep-surface:        #f7f9fc;
	--ep-card:           #ffffff;
	--ep-card-soft:      #f2f4f7;
	--ep-text:           #191c1e;
	--ep-text-soft:      #505f76;
	--ep-text-muted:     #767683;
	--ep-border:         #e0e3e6;
	--ep-success:        #10b981;
	--ep-warning:        #f59e0b;
	--ep-danger:         #ef4444;
	--ep-shadow-sm:      0 1px 2px rgba(25,28,30,.05);
	--ep-shadow-md:      0 4px 12px rgba(25,28,30,.06);
	--ep-shadow-lg:      0 16px 32px rgba(44,57,93,.18);
	--ep-gradient:       linear-gradient(135deg, #2c395d 0%, #3f5183 55%, #6478ac 100%);
	--ep-gradient-soft:  linear-gradient(135deg, #e0e5f0 0%, #ffffff 70%);
}
* { box-sizing: border-box; }
body.ep-body {
	background: var(--ep-surface);
	color: var(--ep-text);
	font-family: 'Sarabun', 'Public Sans', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	min-height: 100vh;
}
.font-pali { font-family: 'Sarabun', 'Source Serif 4', serif; }
[v-cloak] { display: none; }

.ep-shell {
	max-width: 720px;
	margin: 0 auto;
	padding: 1.25rem 1rem 4rem;
}

/* ── Appbar ────────────────────────────── */
.ep-appbar {
	position: sticky; top: 0; z-index: 50;
	background: var(--ep-gradient);
	color: #fff;
	box-shadow: 0 4px 18px rgba(44,57,93,.35);
}
.ep-appbar-inner {
	max-width: 720px; margin: 0 auto;
	padding: 0.85rem 1rem;
	display: flex; align-items: center; gap: 0.75rem;
}
.ep-back-btn {
	width: 38px; height: 38px; border-radius: 10px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.22);
	color: #fff;
	display: grid; place-items: center; text-decoration: none;
	flex-shrink: 0;
	transition: background .15s;
}
.ep-back-btn:hover { background: rgba(255,255,255,.28); }
.ep-back-btn:active { transform: scale(.95); }
.ep-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; flex: 1; }
.ep-brand-mark {
	width: 36px; height: 36px; border-radius: 10px;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.25);
	display: grid; place-items: center;
}
.ep-brand-text { font-weight: 700; font-size: 1.05rem; line-height: 1.1; display:block; }
.ep-brand-sub { display: block; font-size: 0.72rem; opacity: .8; margin-top: 2px; }

/* ── Hero ────────────────────────────── */
.ep-hero {
	position: relative;
	overflow: hidden;
	background: var(--ep-gradient);
	color: #fff;
	border-radius: 24px;
	padding: 2.25rem 1.5rem 1.5rem;
	margin: 0.5rem 0 1.5rem;
	text-align: center;
	box-shadow: 0 14px 44px rgba(44,57,93,.35);
}
.ep-hero::after {
	content: ''; position: absolute;
	bottom: -80px; left: -40px;
	width: 220px; height: 220px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	pointer-events: none;
}
.ep-hero::before {
	content: ''; position: absolute;
	top: -60px; right: -60px;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	pointer-events: none;
}
.ep-hero-glyph {
	width: 64px; height: 64px; margin: 0 auto 1rem;
	border-radius: 18px;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.28);
	display: grid; place-items: center;
	font-size: 1.75rem;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.ep-hero-eyebrow {
	display: inline-block;
	background: rgba(255,255,255,.18);
	color: #fff;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	margin-bottom: 1rem;
}
.ep-hero-title {
	font-size: 1.85rem;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.ep-hero-title-em {
	background: linear-gradient(90deg, #ffd86b, #fbbf24, #fb923c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ep-hero-title-sub {
	font-size: 0.95rem;
	font-weight: 600;
	color: rgba(255,255,255,.85);
	letter-spacing: 0;
}
.ep-hero-sub {
	color: rgba(255,255,255,.88);
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0;
}

/* ── Filter cards ────────────────────────────── */
.ep-filter-card {
	background: var(--ep-card);
	border: 1px solid var(--ep-border);
	border-radius: 16px;
	padding: 1rem 1.1rem;
	margin-bottom: 0.85rem;
	box-shadow: var(--ep-shadow-sm);
}
.ep-filter-head {
	display: flex; justify-content: space-between; align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.7rem;
	flex-wrap: wrap;
}
.ep-filter-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ep-text);
	margin: 0;
	display: flex; align-items: center; gap: 0.4rem;
}
.ep-filter-title i { color: var(--ep-primary); }
.ep-filter-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.ep-mini-btn {
	background: var(--ep-card-soft);
	border: 1px solid var(--ep-border);
	color: var(--ep-text-soft);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s;
}
.ep-mini-btn:hover { background: var(--ep-primary-soft); color: var(--ep-primary); }

.ep-chip-grid {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	margin-top: 0.4rem;
}
.ep-chip {
	background: #fff;
	border: 1px solid var(--ep-border);
	color: var(--ep-text-soft);
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.84rem;
	font-family: inherit;
	cursor: pointer;
	transition: all .15s;
}
.ep-chip:hover { border-color: var(--ep-primary); color: var(--ep-primary); }
.ep-chip.is-active {
	background: var(--ep-primary);
	border-color: var(--ep-primary);
	color: #fff;
	font-weight: 600;
}
.ep-chip-topic.is-active { color: #fff; }

.ep-opt-row { display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.ep-opt-label {
	font-size: 0.85rem; font-weight: 600; color: var(--ep-text-soft);
	min-width: 70px; padding-top: 6px;
}

/* ── Summary card (filter result) ────────────────────────────── */
.ep-summary-card {
	background: var(--ep-card);
	border: 2px solid var(--ep-primary-soft);
	border-radius: 16px;
	padding: 1rem 1.1rem;
	margin-top: 0.5rem;
	box-shadow: var(--ep-shadow-md);
}
.ep-summary-line {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 0.65rem;
	font-size: 0.92rem;
	color: var(--ep-text-soft);
}
.ep-summary-line b {
	font-size: 1.4rem;
	color: var(--ep-primary);
	font-weight: 800;
}

/* ── Buttons ────────────────────────────── */
.ep-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 0.5rem;
	border: none;
	padding: 0.9rem 1.5rem;
	border-radius: 14px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background .15s;
	font-family: inherit;
}
.ep-btn-primary {
	background: var(--ep-gradient);
	color: #fff;
	box-shadow: 0 4px 14px rgba(44,57,93,.4);
	width: 100%;
}
.ep-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44,57,93,.5); }
.ep-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: 0 2px 8px rgba(44,57,93,.2); }
.ep-btn-ghost {
	background: var(--ep-card);
	color: var(--ep-text-soft);
	border: 1px solid var(--ep-border);
}
.ep-btn-ghost:hover { background: var(--ep-card-soft); color: var(--ep-primary); }
.ep-btn-reveal {
	background: var(--ep-warning);
	color: #fff;
	width: 100%;
	margin-top: 1rem;
	box-shadow: 0 2px 8px rgba(245,158,11,.35);
}
.ep-btn-reveal:hover { background: #d97706; }

/* ── Progress (practice) ────────────────────────────── */
.ep-progress {
	position: sticky; top: 64px; z-index: 40;
	background: var(--ep-surface);
	padding: 0.5rem 0 0.75rem;
	margin: -0.5rem -1rem 1rem;
	padding-left: 1rem; padding-right: 1rem;
}
.ep-progress-track {
	height: 8px;
	background: var(--ep-border);
	border-radius: 999px;
	overflow: hidden;
}
.ep-progress-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--ep-primary), var(--ep-primary-light));
	border-radius: 999px;
	transition: width .25s ease;
}
.ep-progress-text {
	display: flex; justify-content: space-between;
	font-size: 0.78rem;
	color: var(--ep-text-soft);
	margin-top: 0.4rem;
}

/* ── Question card ────────────────────────────── */
.ep-q-card {
	background: var(--ep-card);
	border: 1px solid var(--ep-border);
	border-radius: 18px;
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: var(--ep-shadow-md);
}
.ep-q-meta {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	margin-bottom: 1rem;
	font-size: 0.78rem;
}
.ep-q-year {
	background: var(--ep-card-soft);
	color: var(--ep-text-soft);
	padding: 4px 10px;
	border-radius: 999px;
}
.ep-q-topic {
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
}
.ep-q-sub {
	background: var(--ep-primary-soft);
	color: var(--ep-primary);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
}

.ep-part { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--ep-border); }
.ep-part:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.ep-part-tag {
	display: inline-block;
	background: var(--ep-primary-soft);
	color: var(--ep-primary);
	padding: 3px 10px;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 700;
	margin-bottom: 0.55rem;
}
.ep-part-sub { font-weight: 400; opacity: 0.85; margin-left: 0.4rem; }

.ep-q-text {
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0 0 0.7rem;
	color: var(--ep-text);
	white-space: pre-wrap;
}

.ep-items {
	margin: 0.5rem 0 0;
	padding-left: 0;
	list-style: none;
}
.ep-items li {
	padding: 0.4rem 0;
	display: flex;
	gap: 0.5rem;
	line-height: 1.6;
}
.ep-item-letter {
	font-weight: 700;
	color: var(--ep-primary);
	min-width: 1.5rem;
}

/* ── Answer ────────────────────────────── */
.ep-answer {
	margin-top: 1rem;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 14px;
	padding: 0.85rem 1rem;
}
.ep-answer-head {
	display: inline-block;
	background: #f59e0b;
	color: #fff;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	margin-bottom: 0.55rem;
}
.ep-answer-head i { margin-right: 0.25rem; }
.ep-a-text {
	margin: 0;
	line-height: 1.7;
	color: var(--ep-text);
	white-space: pre-wrap;
}
.ep-items-answer { margin-top: 0.4rem; }
.ep-items-answer li { padding: 0.35rem 0; border-top: 1px solid #fde68a; }
.ep-items-answer li:first-child { border-top: none; }

/* ── Rate buttons ────────────────────────────── */
.ep-rate-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.5rem;
	margin-top: 1rem;
}
.ep-rate-btn {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.3rem;
	padding: 0.65rem 0.4rem;
	border-radius: 12px;
	border: 1.5px solid var(--ep-border);
	background: #fff;
	color: var(--ep-text-soft);
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
}
.ep-rate-btn i { font-size: 1.2rem; }
.ep-rate-btn:hover { transform: translateY(-1px); }
.ep-rate-good:hover, .ep-rate-good.is-selected { background: #d1fae5; color: #065f46; border-color: #10b981; }
.ep-rate-ok:hover, .ep-rate-ok.is-selected { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
.ep-rate-bad:hover, .ep-rate-bad.is-selected { background: #fee2e2; color: #991b1b; border-color: #ef4444; }

/* ── Nav ────────────────────────────── */
.ep-nav {
	display: flex; gap: 0.6rem;
	margin-top: 1rem;
}
.ep-nav .ep-btn { flex: 1; padding: 0.85rem 1rem; font-size: 0.95rem; width: auto; }

.ep-bottom-bar {
	display: flex; justify-content: center;
	margin-top: 1.25rem;
}

/* ── Result ────────────────────────────── */
.ep-result-header {
	text-align: center;
	padding: 1.75rem 1rem;
	background: var(--ep-gradient-soft);
	border-radius: 20px;
	margin-bottom: 1.25rem;
	border: 1px solid var(--ep-border);
}
.ep-result-header .ep-hero-glyph {
	background: var(--ep-gradient);
	color: #fff;
	box-shadow: 0 6px 18px rgba(44,57,93,.4);
}
.ep-result-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--ep-text); }
.ep-result-sub { color: var(--ep-text-soft); margin: 0; }

.ep-stats-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.55rem;
	margin-bottom: 1rem;
}
.ep-stat {
	background: var(--ep-card);
	border: 1px solid var(--ep-border);
	border-left: 4px solid var(--c, var(--ep-primary));
	border-radius: 14px;
	padding: 0.9rem 0.65rem;
	text-align: center;
}
.ep-stat-num {
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--c, var(--ep-primary));
	line-height: 1;
}
.ep-stat-label {
	font-size: 0.78rem;
	color: var(--ep-text-soft);
	margin-top: 0.25rem;
}

.ep-card {
	background: var(--ep-card);
	border: 1px solid var(--ep-border);
	border-radius: 16px;
	padding: 1.1rem;
	margin-bottom: 0.85rem;
	box-shadow: var(--ep-shadow-sm);
}
.ep-card-title {
	font-size: 1rem; font-weight: 700; margin: 0 0 0.85rem;
	color: var(--ep-text);
	display: flex; align-items: center; gap: 0.4rem;
}
.ep-card-title i { color: var(--ep-primary); }

.ep-row {
	display: flex; align-items: center; gap: 0.55rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--ep-border);
	flex-wrap: wrap;
}
.ep-row:last-child { border-bottom: none; }
.ep-row-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ep-row-name { flex: 1; font-weight: 600; font-size: 0.92rem; min-width: 7rem; }
.ep-row-tag {
	background: #d1fae5; color: #065f46;
	font-size: 0.74rem; font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
}
.ep-row-tag-warn { background: #fef3c7; color: #92400e; }
.ep-row-tag-bad { background: #fee2e2; color: #991b1b; }
.ep-row-tag-none { background: var(--ep-card-soft); color: var(--ep-text-muted); }

@media (max-width: 380px) {
	.ep-rate-row { grid-template-columns: 1fr; }
	.ep-hero-title { font-size: 1.55rem; }
	.ep-stats-row { grid-template-columns: 1fr; }
}

/* ── Translation practice specific ────────────────────────────── */
.tp-pali-card {
	background: #fdfbf6;
	border: 1px solid #e8dcc0;
	border-radius: 14px;
	padding: 1rem 1.1rem;
	margin: 0.5rem 0 1rem;
}
.tp-pali-text {
	font-family: 'Sarabun', 'Source Serif 4', serif;
	font-size: 1.08rem;
	line-height: 1.95;
	color: var(--ep-text);
	margin: 0.4rem 0 0;
	white-space: pre-wrap;
}
.tp-thai-card {
	background: #f0f7ff;
	border: 1px solid #c7d9f0;
	border-radius: 14px;
	padding: 1rem 1.1rem;
	margin-top: 1rem;
}
.tp-thai-text {
	font-size: 1rem;
	line-height: 1.85;
	color: var(--ep-text);
	margin: 0.4rem 0 0;
	white-space: pre-wrap;
}
.tp-section-label {
	display: inline-block;
	background: var(--ep-primary);
	color: #fff;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}
.tp-section-label i { margin-right: 0.3rem; }
.tp-thai-card .tp-section-label { background: #3f5183; }

/* Review */
.tp-review-details {
	margin-top: 0.4rem;
}
.tp-review-details summary {
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	background: var(--ep-card-soft);
	border-radius: 8px;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ep-text-soft);
	user-select: none;
}
.tp-review-details[open] summary {
	color: var(--ep-text);
	margin-bottom: 0.5rem;
}
.tp-review-pali {
	background: #fdfbf6;
	border-left: 3px solid #e8dcc0;
	padding: 0.6rem 0.85rem;
	font-size: 0.95rem;
	line-height: 1.85;
	margin: 0.5rem 0;
	white-space: pre-wrap;
}
.tp-review-thai {
	background: #f0f7ff;
	border-left: 3px solid #c7d9f0;
	padding: 0.6rem 0.85rem;
	font-size: 0.92rem;
	line-height: 1.75;
	white-space: pre-wrap;
}