@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@300..700&family=Sarabun:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ASTROPAI components — every value comes from tokens.css; prefix ap- */

body { margin: 0; background: var(--void); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- icon ---------- */
.ap-i { display: inline-flex; width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.ap-i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-i--sm { width: 16px; height: 16px; vertical-align: -3px; }
.ap-i--lg { width: 28px; height: 28px; }

/* ---------- type helpers ---------- */
.ap-display { font: 700 40px/52px var(--font-ui); margin: 0; }
.ap-h1 { font: 700 30px/42px var(--font-ui); margin: 0; }
.ap-h2 { font: 600 22px/34px var(--font-ui); margin: 0; }
.ap-h3 { font: 600 18px/28px var(--font-ui); margin: 0; }
.ap-small { font: 400 14px/24px var(--font-ui); color: var(--dim); margin: 0; }
.ap-eyebrow { font: 600 13px/20px var(--font-ui); letter-spacing: .04em; color: var(--cool); margin: 0; }
.ap-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ap-link { color: var(--hot); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ap-link:hover { color: var(--hot-deep); }

/* ---------- button ---------- */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: 600 15px/20px var(--font-ui); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ap-btn:hover { background: var(--panel-2); border-color: var(--hot); }
.ap-btn--cta { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.ap-btn--cta:hover { background: var(--cta-deep); border-color: var(--cta-deep); }
.ap-btn--ghost { background: transparent; border-color: transparent; color: var(--hot); }
.ap-btn--ghost:hover { background: var(--hot-soft); border-color: transparent; }
.ap-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.ap-btn--icon { width: var(--control-h); padding: 0; }
.ap-btn--icon.ap-btn--sm { width: 36px; }
.ap-btn[aria-pressed="true"] { background: var(--nav-flag); border-color: var(--nav-flag-line); color: var(--on-nav-flag); }
.ap-btn:disabled, .ap-btn[aria-disabled="true"] { background: var(--deep); border-color: var(--line); color: var(--faint); cursor: not-allowed; }

/* ---------- tag ---------- */
.ap-tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--deep); color: var(--dim); font: 600 13px/1 var(--font-ui); white-space: nowrap; }
.ap-tag--hot { background: var(--hot-soft); color: var(--hot); }
.ap-tag--cool { background: var(--cool-soft); color: var(--text); }
.ap-tag--violet { background: transparent; box-shadow: inset 0 0 0 1px var(--violet); color: var(--violet); }
.ap-tag--ok { background: var(--ok-soft); color: var(--ok); }
.ap-tag--bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- notice ---------- */
.ap-note { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--hot-soft); color: var(--text); font: 400 15px/26px var(--font-ui); }
.ap-note > .ap-i { color: var(--hot); margin-top: 3px; }
.ap-note--warn { background: var(--cool-soft); }
.ap-note--warn > .ap-i { color: var(--cool); }
.ap-note--ok { background: var(--ok-soft); }
.ap-note--ok > .ap-i { color: var(--ok); }
.ap-note b { font-weight: 600; }

/* ---------- surfaces & layout ---------- */
.ap-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.ap-section { padding: var(--space-6) 0 0; }
.ap-section + .ap-section { margin-top: var(--space-5); }
.ap-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.ap-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-4); }

/* ---------- list rows (instead of cards) ---------- */
.ap-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.ap-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); min-height: 64px; color: inherit; text-decoration: none; }
.ap-row + .ap-row, .ap-list > li + li { border-top: 1px solid var(--line-soft); }
a.ap-row:hover, button.ap-row:hover { background: var(--panel-2); }
.ap-row__title { font: 600 16px/26px var(--font-ui); margin: 0; }
.ap-row__meta { font: 400 14px/22px var(--font-ui); color: var(--dim); margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.ap-row__end { display: flex; align-items: center; gap: var(--space-3); color: var(--dim); }

/* ---------- exam bar ---------- */
.ap-exambar { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: 0 var(--space-5); background: var(--panel); border-bottom: 1px solid var(--line); }
.ap-exambar__title { flex: 1; min-width: 0; }
.ap-exambar__title b { display: block; font: 600 16px/24px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-exambar__title span { font: 400 13px/20px var(--font-ui); color: var(--dim); }
.ap-timer { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 20px/28px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.ap-timer .ap-i { color: var(--dim); }
.ap-timer--low { color: var(--bad); }
.ap-timer--low .ap-i { color: var(--bad); }
.ap-progress { height: 4px; background: var(--deep); }
.ap-progress > i { display: block; height: 100%; background: var(--hot); }

/* ---------- question navigator ---------- */
.ap-qnav { display: grid; grid-template-columns: repeat(5, 40px); gap: var(--space-2); }
.ap-qbox { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: 500 14px/1 var(--font-mono); cursor: pointer; padding: 0; }
.ap-qbox:hover { border-color: var(--hot); }
.ap-qbox.is-done { background: var(--nav-done); border-color: var(--nav-done); color: var(--on-nav-done); }
.ap-qbox.is-flag { background: var(--nav-flag); border-color: var(--nav-flag-line); color: var(--on-nav-flag); }
.ap-qbox.is-flag::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--on-nav-flag); }
.ap-qbox.is-cur { outline: 2px solid var(--hot); outline-offset: 2px; }
.ap-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; font: 400 13px/20px var(--font-ui); color: var(--dim); }
.ap-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ap-legend .ap-qbox { width: 18px; height: 18px; border-radius: 5px; font-size: 0; cursor: default; }
.ap-legend .ap-qbox.is-cur { outline-offset: 1px; }
.ap-legend .ap-qbox.is-flag::after { display: none; }

/* ---------- question paper ---------- */
.ap-paper { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-5); max-width: calc(var(--measure) + 50px); }
.ap-paper__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ap-paper__num { font: 700 18px/32px var(--font-paper); margin-right: var(--space-2); }
.ap-paper__head .ap-btn { margin-left: auto; }
.ap-stem { font: 400 18px/32px var(--font-paper); margin: 0 0 var(--space-4); max-width: var(--measure); }
.ap-qnote { font: 400 15px/26px var(--font-paper); color: var(--dim); margin: 0 0 var(--space-4); }
.ap-fig { position: relative; margin: 0 0 var(--space-5); border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--scan); padding: var(--space-3); display: inline-block; }
.ap-fig img { display: block; max-width: 100%; }
.ap-fig .ap-btn { position: absolute; right: var(--space-2); bottom: var(--space-2); }
.ap-paper__foot { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }

/* ---------- choices ---------- */
.ap-choices { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.ap-choice { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-h); padding: 10px var(--space-4) 10px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--text); font: 400 17px/30px var(--font-paper); text-align: left; cursor: pointer; }
.ap-choice:hover { border-color: var(--hot); background: var(--panel-2); }
.ap-choice__key { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 16px/1 var(--font-ui); color: var(--dim); }
.ap-choice__end { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 14px/20px var(--font-ui); }
.ap-choice[aria-checked="true"], .ap-choice.is-picked { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); background: var(--hot-soft); }
.ap-choice[aria-checked="true"] .ap-choice__key, .ap-choice.is-picked .ap-choice__key { background: var(--hot); color: var(--on-hot); box-shadow: none; }
.ap-choice.is-right { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); background: var(--ok-soft); cursor: default; }
.ap-choice.is-right .ap-choice__key { background: var(--ok); color: var(--panel); box-shadow: none; }
.ap-choice.is-right .ap-choice__end { color: var(--ok); }
.ap-choice.is-wrong { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); background: var(--bad-soft); cursor: default; }
.ap-choice.is-wrong .ap-choice__key { background: var(--bad); color: var(--panel); box-shadow: none; }
.ap-choice.is-wrong .ap-choice__end { color: var(--bad); }
.ap-choice.is-muted { cursor: default; color: var(--dim); }
.ap-choice.is-muted:hover { border-color: var(--line-strong); background: var(--panel); }

/* ---------- solution ---------- */
.ap-sol { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-5); max-width: var(--measure); }
.ap-sol__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.ap-sol__answer { font: 600 16px/24px var(--font-ui); }
.ap-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.ap-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); font: 400 16px/30px var(--font-paper); padding: var(--space-1) 0; }
.ap-steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--deep); color: var(--dim); font: 600 13px/1 var(--font-mono); }
.ap-hint { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--cool-soft); font: 400 15px/26px var(--font-paper); }
.ap-hint > .ap-i { color: var(--cool); margin-top: 3px; }
.ap-why { margin-top: var(--space-4); border-radius: var(--r-sm); background: var(--panel-2); }
.ap-why > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4); font: 600 15px/22px var(--font-ui); color: var(--hot); cursor: pointer; list-style: none; }
.ap-why > summary::-webkit-details-marker { display: none; }
.ap-why[open] > summary .ap-i { transform: rotate(90deg); }
.ap-why dl { margin: 0; padding: 0 var(--space-4) var(--space-4); display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2) var(--space-3); font: 400 15px/26px var(--font-paper); }
.ap-why dt { font: 600 15px/26px var(--font-ui); color: var(--dim); }
.ap-why dd { margin: 0; }

/* ---------- chapter score ---------- */
.ap-bars { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ap-bar { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 56px; align-items: center; gap: var(--space-4); min-height: 40px; }
.ap-bar__name { font: 400 15px/22px var(--font-ui); display: flex; align-items: center; gap: var(--space-2); }
.ap-bar__track { height: 8px; border-radius: var(--r-pill); background: var(--deep); overflow: hidden; }
.ap-bar__track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--hot); }
.ap-bar__val { font: 500 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--dim); }
.ap-score { display: flex; align-items: baseline; gap: var(--space-3); }
.ap-score b { font: 600 32px/40px var(--font-mono); font-variant-numeric: tabular-nums; }
.ap-score span { font: 400 15px/24px var(--font-ui); color: var(--dim); }

/* ---------- table ---------- */
.ap-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font: 400 15px/24px var(--font-ui); }
.ap-table th { background: var(--deep); color: var(--dim); font: 600 13px/20px var(--font-ui); text-align: left; padding: 10px var(--space-4); }
.ap-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-soft); }
.ap-table .is-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ap-table tbody tr:hover { background: var(--panel-2); }

/* ---------- form controls ---------- */
.ap-field { display: grid; gap: 6px; }
.ap-field > label { font: 600 14px/20px var(--font-ui); }
.ap-field > small { font: 400 13px/20px var(--font-ui); color: var(--dim); }
.ap-input, .ap-select { min-height: var(--control-h); padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--text); font: 400 16px/24px var(--font-ui); }
.ap-input::placeholder { color: var(--faint); }
.ap-input:hover, .ap-select:hover { border-color: var(--hot); }
.ap-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--deep); }
.ap-seg button { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--dim); font: 600 14px/20px var(--font-ui); cursor: pointer; }
.ap-seg button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.ap-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ap-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--panel); color: var(--text); font: 600 14px/20px var(--font-ui); cursor: pointer; }
.ap-chip .ap-num { color: var(--dim); font-size: 13px; }
.ap-chip[aria-pressed="true"] { background: var(--hot-soft); border-color: var(--hot); color: var(--hot); }
.ap-chip[aria-pressed="true"] .ap-num { color: var(--hot); }

/* ---------- empty state ---------- */
.ap-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; }
.ap-empty > .ap-i { color: var(--dim); margin-bottom: var(--space-2); }
.ap-empty p { margin: 0 0 var(--space-3); max-width: 360px; font: 400 15px/24px var(--font-ui); color: var(--dim); }

/* ---------- top navigation ---------- */
.ap-top { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; padding: 0 var(--space-5); background: var(--panel); border-bottom: 1px solid var(--line); }
.ap-wordmark { font: 700 18px/1 var(--font-ui); letter-spacing: .06em; color: var(--text); text-decoration: none; }
.ap-wordmark span { color: var(--dim); font-weight: 500; letter-spacing: 0; margin-left: var(--space-2); }
.ap-top nav { display: flex; gap: var(--space-1); margin-left: auto; }
.ap-top nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--dim); font: 600 14px/20px var(--font-ui); text-decoration: none; }
.ap-top nav a:hover { background: var(--panel-2); color: var(--text); }
.ap-top nav a[aria-current="page"] { background: var(--hot-soft); color: var(--hot); }