:root {
	--es-primary: #2c395d;
	--es-primary-soft: #e0e5f0;
	--es-surface: #f7f9fc;
	--es-card: #ffffff;
	--es-card-soft: #f2f4f7;
	--es-text: #191c1e;
	--es-text-soft: #505f76;
	--es-text-muted: #767683;
	--es-border: #e0e3e6;
	--es-success: #10b981;
	--es-warning: #f59e0b;
	--es-danger: #ef4444;
}
* { box-sizing: border-box; }
body.es-body {
	background: var(--es-surface);
	color: var(--es-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; }
.es-shell { max-width: 780px; margin: 0 auto; padding: 0.5rem 1rem 4rem; }

/* Appbar */
.es-appbar {
	position: sticky; top: 0; z-index: 50;
	background: linear-gradient(135deg, #2c395d, #3f5183 60%, #6478ac);
	color: #fff;
	box-shadow: 0 4px 18px rgba(44,57,93,.35);
}
.es-appbar-inner {
	max-width: 780px; margin: 0 auto;
	padding: 0.75rem 1rem;
	display: flex; align-items: center; gap: 0.75rem;
}
.es-back-btn {
	width: 36px; height: 36px; 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;
}
.es-back-btn:hover { background: rgba(255,255,255,.28); }
.es-brand-text { font-weight: 700; font-size: 1rem; display: block; }
.es-brand-sub { font-size: 0.7rem; opacity: .8; display: block; }

/* Filter bar (sticky under appbar) */
.es-filter-bar {
	position: sticky; top: 52px; z-index: 40;
	background: var(--es-surface);
	padding: 0.65rem 0 0.5rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--es-border);
}
.es-filter-row {
	display: flex; flex-wrap: wrap; gap: 0.35rem;
	margin-bottom: 0.45rem;
}
.es-chip {
	background: #fff; border: 1px solid var(--es-border);
	color: var(--es-text-soft);
	padding: 4px 11px; border-radius: 999px;
	font-size: 0.8rem; font-family: inherit;
	cursor: pointer; transition: all .15s;
}
.es-chip:hover { border-color: var(--es-primary); color: var(--es-primary); }
.es-chip.is-active {
	background: var(--es-primary); border-color: var(--es-primary);
	color: #fff; font-weight: 600;
}
.es-search-row {
	position: relative; margin-bottom: 0.35rem;
}
.es-search-row i {
	position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	color: var(--es-text-muted); font-size: 0.85rem;
}
.es-search {
	width: 100%; padding: 0.55rem 0.7rem 0.55rem 2rem;
	border: 1px solid var(--es-border); border-radius: 10px;
	font-size: 0.9rem; font-family: inherit;
	background: #fff; color: var(--es-text);
}
.es-search:focus { outline: none; border-color: var(--es-primary); box-shadow: 0 0 0 2px rgba(44,57,93,.12); }
.es-filter-meta {
	font-size: 0.78rem; color: var(--es-text-muted);
}

/* Question cards */
.es-card {
	background: var(--es-card);
	border: 1px solid var(--es-border);
	border-radius: 16px;
	padding: 1rem 1.1rem;
	margin-bottom: 0.85rem;
	box-shadow: 0 2px 8px rgba(25,28,30,.04);
}
.es-card-head {
	display: flex; flex-wrap: wrap; gap: 0.35rem;
	align-items: center;
	margin-bottom: 0.75rem;
}
.es-topic-badge {
	color: #fff; padding: 3px 10px; border-radius: 999px;
	font-size: 0.75rem; font-weight: 700;
}
.es-sub-badge {
	background: var(--es-primary-soft); color: var(--es-primary);
	padding: 3px 10px; border-radius: 999px;
	font-size: 0.72rem;
}
.es-freq-badge {
	margin-left: auto;
	padding: 3px 10px; border-radius: 999px;
	font-size: 0.75rem; font-weight: 700;
	background: var(--es-card-soft); color: var(--es-text-muted);
}
.es-freq-badge i { margin-right: 0.2rem; }
.es-freq-badge.warm { background: #fef3c7; color: #92400e; }
.es-freq-badge.hot { background: #fee2e2; color: #991b1b; }

/* Question section */
.es-q-section { margin-bottom: 0.75rem; }
.es-context {
	background: var(--es-card-soft);
	border-left: 3px solid var(--es-primary);
	padding: 0.5rem 0.85rem; border-radius: 6px;
	font-size: 0.85rem; color: var(--es-text-soft);
	margin: 0 0 0.5rem; line-height: 1.5;
}
.es-context i { color: var(--es-primary); margin-right: 0.25rem; opacity: .7; }
.es-question {
	font-size: 1rem; line-height: 1.7; margin: 0;
	color: var(--es-text); white-space: pre-wrap;
}

/* Answer toggle */
.es-answer-details { margin-bottom: 0.65rem; }
.es-answer-toggle {
	cursor: pointer; user-select: none;
	display: inline-flex; align-items: center; gap: 0.35rem;
	padding: 5px 14px; border-radius: 999px;
	background: #fffbeb; border: 1px solid #fde68a;
	color: #92400e; font-size: 0.82rem; font-weight: 600;
}
.es-answer-toggle:hover { background: #fef3c7; }
.es-answer {
	margin-top: 0.5rem; padding: 0.75rem 1rem;
	background: #fffbeb; border: 1px solid #fde68a;
	border-radius: 12px;
	font-size: 0.95rem; line-height: 1.75;
	color: var(--es-text); white-space: pre-wrap;
}

/* Year pills */
.es-year-row {
	display: flex; flex-wrap: wrap; gap: 0.3rem;
	align-items: center;
	margin-bottom: 0.5rem;
}
.es-year-label {
	font-size: 0.78rem; color: var(--es-text-muted);
	margin-right: 0.2rem; font-weight: 600;
}
.es-year-pill {
	background: var(--es-card-soft);
	color: var(--es-text-muted);
	padding: 2px 8px; border-radius: 999px;
	font-size: 0.72rem;
}
.es-year-pill.is-recent {
	background: #dbeafe; color: #1e40af; font-weight: 600;
}

/* Variants (all-years expand) */
.es-variants { margin-top: 0.25rem; }
.es-variants-toggle {
	cursor: pointer; user-select: none;
	font-size: 0.8rem; color: var(--es-primary);
	font-weight: 600;
}
.es-variants-toggle i { margin-right: 0.25rem; }
.es-variant {
	padding: 0.55rem 0; border-bottom: 1px dashed var(--es-border);
}
.es-variant:last-child { border-bottom: none; }
.es-variant-year {
	display: inline-block;
	background: var(--es-card-soft); color: var(--es-text-soft);
	padding: 2px 8px; border-radius: 999px;
	font-size: 0.72rem; font-weight: 600;
	margin-bottom: 0.3rem;
}
.es-variant-q {
	font-size: 0.9rem; line-height: 1.6;
	color: var(--es-text); margin-bottom: 0.25rem;
}
.es-variant-a {
	font-size: 0.85rem; line-height: 1.55;
	color: var(--es-text-soft);
	padding-left: 0.75rem;
	border-left: 2px solid #fde68a;
}

@media (max-width: 480px) {
	.es-filter-bar { top: 48px; }
}