/* PWA นักเรียน — โครงหน้าและ component
   สีและระยะทั้งหมดมาจาก /shared/tokens.css ห้ามใส่ค่าสีตรง ๆ ในไฟล์นี้ */

body {
    /* เว้นที่ให้แถบนำทางล่างและ safe area ของ iPhone/iPad */
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
}

/* ================= ตัวหมุนและหน้าจอกำลังโหลด ================= */
.boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: var(--sp-4);
    color: var(--c-text-muted);
}
.boot__spinner,
.spinner {
    width: 30px; height: 30px;
    border: 2.5px solid var(--c-border);
    border-top-color: var(--c-brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= โครงหน้า ================= */
.page {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
    padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
}
.page__title {
    font-size: var(--fs-xl);
    margin: 0 0 var(--sp-2);
    letter-spacing: -.01em;
}
.page__subtitle {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-5);
}

/* หัวข้อย่อยที่มีไอคอนนำ */
.section-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text-muted);
    margin: 0 0 var(--sp-3);
}

/* ================= การ์ด ================= */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.card--flush { padding: 0; overflow: hidden; }

/* ================= ตัวเลขสรุปพร้อมไอคอน =================
   §27.3 ทุกยอดมีทั้งไอคอน สี และข้อความกำกับ ไม่ได้ใช้สีบอกความหมายเพียงอย่างเดียว */
/* สองยอดเงินอยู่แถวบน ส่วนระดับกินเต็มความกว้างข้างล่าง
   เพราะชื่อระดับภาษาไทยยาวกว่าตัวเลขมาก ถ้าบีบเป็นสามคอลัมน์จะตัดบรรทัดจนอ่านยาก */
.stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}
.stat--wide { grid-column: 1 / -1; }

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--radius);
    text-align: center;
}
.stat__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--sp-2);
}
.stat__label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.3;
}
.stat__value {
    font-weight: 700;
    line-height: 1.15;
}
/* ตัวเลขใหญ่และกว้างเท่ากันทุกหลัก เพื่อให้เทียบยอดข้ามวันได้โดยไม่ต้องเพ่ง */
.stat__value--number {
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
/* ชื่อระดับเป็นข้อความยาว จึงเล็กลงและยอมให้ตัดบรรทัด */
.stat__value--text {
    font-size: var(--fs-lg);
    line-height: 1.25;
    text-wrap: balance;
}
.stat__sub {
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    line-height: 1.35;
}
/* §27.3 บรรทัดเตือนใช้ทั้งสีและน้ำหนักตัวอักษร ไม่ใช้สีอย่างเดียว */
.stat__sub.is-alert { color: var(--c-warning-deep); font-weight: 600; }

.stat--money { background: var(--c-money-tint); }
.stat--money .stat__icon  { background: var(--c-surface); color: var(--c-money); }
.stat--money .stat__value { color: var(--c-money-deep); }

.stat--coin { background: var(--c-coin-tint); }
.stat--coin .stat__icon  { background: var(--c-surface); color: var(--c-coin); }
.stat--coin .stat__value { color: var(--c-coin-deep); }

.stat--xp { background: var(--c-xp-tint); }
.stat--xp .stat__icon  { background: var(--c-surface); color: var(--c-xp); }
.stat--xp .stat__value { color: var(--c-xp-deep); }

/* ================= ปุ่ม ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--touch-min);
    padding: 0 var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--c-brand-deep);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, opacity .15s ease;
}
.btn:hover:not(:disabled) { background: var(--c-text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--block { width: 100%; }

/* ปุ่มรองแบบพาสเทล — ใช้กับการกระทำที่ไม่ใช่ทางหลักของหน้า */
.btn--soft {
    background: var(--c-brand-tint);
    color: var(--c-brand-deep);
}
.btn--soft:hover:not(:disabled) { background: #ddeee6; }

.btn--ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-border-strong);
}
.btn--ghost:hover:not(:disabled) { background: var(--c-surface-sunk); }

.btn--danger {
    background: var(--c-danger-tint);
    color: var(--c-danger-deep);
}
.btn--danger:hover:not(:disabled) { background: #f8dede; }

/* ================= ฟอร์ม ================= */
.field { margin-bottom: var(--sp-4); }
.field__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--sp-2);
}
.field__input {
    width: 100%;
    min-height: var(--touch-min);
    padding: 0 var(--sp-4);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    transition: border-color .15s ease;
}
.field__input:focus { border-color: var(--c-brand); }
.field__input:disabled { background: var(--c-surface-sunk); }
.field__input--error { border-color: var(--c-danger); }
.field__error,
.field__hint {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.field__error { color: var(--c-danger-deep); }
.field__hint  { color: var(--c-text-muted); }

/* ================= แถบแจ้งเตือน ================= */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.5;
    margin-bottom: var(--sp-4);
}
.alert--error   { background: var(--c-danger-tint);  color: var(--c-danger-deep); }
.alert--info    { background: var(--c-brand-tint);   color: var(--c-brand-deep); }
.alert--warning { background: var(--c-warning-tint); color: var(--c-warning-deep); }

/* ================= แถบนำทางล่าง =================
   §2.1 มีได้เพียง 4 เมนู ห้ามเพิ่มเมนูที่ห้า */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    z-index: 50;
}
.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav__pill {
    display: grid;
    place-items: center;
    width: 46px; height: 26px;
    border-radius: var(--radius-pill);
    transition: background .15s ease;
}
/* §27.3 สถานะ active บอกด้วยสามอย่างพร้อมกัน: พื้นหลัง สี และน้ำหนักตัวอักษร
   ไม่ได้พึ่งสีเพียงอย่างเดียว */
.bottom-nav__item.is-active { color: var(--c-brand-deep); font-weight: 700; }
.bottom-nav__item.is-active .bottom-nav__pill { background: var(--c-brand-tint); }

/* ================= สถานะว่าง ================= */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-7) var(--sp-4);
    color: var(--c-text-muted);
}
.empty__icon {
    display: grid;
    place-items: center;
    width: 68px; height: 68px;
    border-radius: var(--radius-pill);
    background: var(--c-brand-tint);
    color: var(--c-brand);
    margin-bottom: var(--sp-4);
}
.empty__title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 var(--sp-2);
}
.empty__detail { margin: 0; font-size: var(--fs-sm); max-width: 34ch; }

/* ================= รายการที่มีไอคอนนำ ================= */
.list { list-style: none; margin: 0; padding: 0; }
.list__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    color: inherit;
    text-decoration: none;
}
.list__item:last-child { border-bottom: none; }
.list__icon {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-sunk);
    color: var(--c-text-muted);
}
/* ต้องเป็นคอลัมน์ ไม่งั้น meta กับ title จะไหลต่อกันเป็นบรรทัดเดียว */
.list__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.list__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.list__meta  { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.3; }
.list__chevron { color: var(--c-border-strong); }

/* ================= เครื่องหมายแบรนด์ ================= */
.brand-mark {
    display: grid;
    place-items: center;
    width: 76px; height: 76px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius-pill);
    background: var(--c-brand-tint);
    color: var(--c-brand-deep);
}

/* ================= แถบสถานะและ toast ================= */
.status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
}
.status-bar--offline { background: var(--c-warning-tint); color: var(--c-warning-deep); }
.status-bar--update  { background: var(--c-brand-tint);   color: var(--c-brand-deep); }
.status-bar__action {
    margin-left: var(--sp-2);
    min-height: 32px;
    padding: 0 var(--sp-3);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-height) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--c-text);
    color: #fff;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    z-index: 60;
    max-width: 90vw;
    box-shadow: var(--shadow);
}

/* ================= หัวข้อหน้า ================= */
.page__eyebrow {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* ================= รายการเดินบัญชีและแจ้งเตือน ================= */
.entry-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
}
.entry-row:last-of-type { border-bottom: none; }
.entry-row__icon {
    display: grid; place-items: center;
    flex: none;
    width: 34px; height: 34px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-sunk);
    color: var(--c-text-muted);
}
/* §27.3 เงินเข้ากับเงินออกต่างกันทั้งไอคอน สี และเครื่องหมายหน้าตัวเลข
   ไม่ใช้สีบอกความหมายอย่างเดียว เพราะคนตาบอดสีจะแยกไม่ออก */
.entry-row__icon.is-in     { background: var(--c-brand-tint);   color: var(--c-brand-deep); }
.entry-row__icon.is-out    { background: var(--c-warning-tint); color: var(--c-warning-deep); }
.entry-row__icon.is-unread { background: var(--c-brand-tint);   color: var(--c-brand-deep); }
.entry-row__body { flex: 1; min-width: 0; }
.entry-row__title  { display: block; font-weight: 600; font-size: var(--fs-sm); }
.entry-row__detail { display: block; font-size: var(--fs-sm); margin-top: 2px; }
.entry-row__meta   { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }
.entry-row__amount {
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.entry-row__amount.is-in  { color: var(--c-brand-deep); }
.entry-row__amount.is-out { color: var(--c-warning-deep); }

/* ================= Coin แยกตามก้อน ================= */
.lot-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
}
.lot-row:last-of-type { border-bottom: none; }
.lot-row__amount { display: block; font-weight: 700; }
.lot-row__meta   { display: block; font-size: var(--fs-xs); color: var(--c-text-muted); }
.lot-row__expiry { text-align: right; font-size: var(--fs-sm); }
.lot-row__expiry.is-soon { color: var(--c-warning-deep); font-weight: 600; }

/* ================= แท็บ ================= */
.tabs {
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-sunk);
}
.tabs__item {
    flex: 1;
    min-height: 38px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.tabs__item.is-active {
    background: var(--c-surface);
    color: var(--c-brand-deep);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.tabs__badge {
    display: inline-block;
    min-width: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--c-warning-tint);
    color: var(--c-warning-deep);
    font-size: var(--fs-xs);
}

/* ================= หน้า QR ================= */
/* เต็มจอและพื้นหลังสว่าง เพราะกล้องต้องอ่านจากระยะหนึ่งฟุตในห้องที่แสงไม่แน่นอน */
.qr-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    min-height: 100vh;
    padding: var(--sp-5) var(--sp-4);
    background: var(--c-surface);
    text-align: center;
}
.qr-screen__close {
    position: absolute;
    top: var(--sp-3); right: var(--sp-3);
    display: grid; place-items: center;
    width: var(--touch-min); height: var(--touch-min);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--c-surface-sunk);
    color: var(--c-text);
    cursor: pointer;
}
.qr-screen__title { margin: var(--sp-4) 0 0; font-size: var(--fs-lg); }
.qr-screen__name  { margin: 0; font-weight: 700; }
.qr-screen__name span { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* วงแหวนบอกเวลาที่เหลือ อ่านได้โดยไม่ต้องมองตัวเลข */
.qr-screen__frame {
    position: relative;
    padding: var(--sp-3);
    border-radius: var(--radius-lg);
    background:
        conic-gradient(var(--c-brand) var(--ring, 100%), var(--c-border) 0);
}
.qr-screen__code {
    padding: var(--sp-3);
    border-radius: var(--radius);
    background: #fff;
    line-height: 0;
}
.qr-screen__code canvas,
.qr-screen__code svg {
    display: block;
    width: min(68vw, 300px);
    height: auto;
}
.qr-screen__countdown {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.qr-screen__hint {
    margin: 0;
    max-width: 34ch;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* ข้อความกำกับใต้แถวยอด ชิดขอบเดียวกับการ์ดเพื่อให้อ่านต่อเนื่องกัน */
.stat-note { margin: calc(var(--sp-2) * -1 + 2px) var(--sp-1) var(--sp-3); }

/* ================= การ์ดชื่อและระดับ ================= */
/* ระดับคือตัวตนของสมาชิกในระบบนี้ จึงอยู่การ์ดเดียวกับชื่อ ไม่ใช่ตัวเลขเทียบกับเงิน */
.hero {
    margin-bottom: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius);
    background: var(--c-xp-tint);
}
.hero__name {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xl);
    line-height: 1.2;
    letter-spacing: -.01em;
}
.hero__level {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--c-xp-deep);
}
.hero__xp {
    margin: var(--sp-1) 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}
/* แถบความคืบหน้าไประดับถัดไป ใช้คู่กับตัวเลข XP ไม่ใช่แทน (§27.3) */
.hero__bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    overflow: hidden;
}
.hero__bar span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--c-xp);
    transition: width .4s ease;
}

/* รหัสสมาชิกใต้ปุ่ม QR ตัวหนากึ่งกลาง ไว้บอกเจ้าหน้าที่ตอนกล้องอ่านไม่ได้ */
.member-code {
    margin: var(--sp-3) 0 0;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ================= เหตุการณ์ในประวัติ ================= */
.activity {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-border);
}
.activity:last-of-type { border-bottom: none; }
.activity__icon {
    display: grid; place-items: center;
    flex: none;
    width: 34px; height: 34px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-sunk);
    color: var(--c-text-muted);
}
.activity__icon.is-in  { background: var(--c-brand-tint);   color: var(--c-brand-deep); }
.activity__icon.is-out { background: var(--c-warning-tint); color: var(--c-warning-deep); }
.activity__body { flex: 1; min-width: 0; }
/* ชื่อเหตุการณ์กับเวลาอยู่บรรทัดเดียวกัน ตัดบรรทัดได้เมื่อจอแคบ */
.activity__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--sp-2);
}
.activity__title { font-weight: 600; font-size: var(--fs-sm); }
.activity__when  { font-size: var(--fs-xs); color: var(--c-text-muted); }
.activity__gains {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--sp-3);
    margin-top: 3px;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
/* แต่ละค่าใช้สีเดียวกับการ์ดยอดด้านบน ให้ตัวเลขในประวัติเชื่อมกับการ์ดได้ด้วยตา */
.gain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.gain--money { color: var(--c-money-deep); }
.gain--coin  { color: var(--c-coin-deep); }
.gain--xp    { color: var(--c-xp-deep); }
.activity__ref {
    flex: none;
    align-self: flex-end;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- แลกของรางวัล (§16.4) ------------------------------------------------ */

.reward-wallet {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--c-coin-tint);
    border-radius: var(--radius-lg);
}
.reward-wallet__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-coin);
    flex: none;
}
.reward-wallet__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reward-wallet__label { font-size: var(--fs-xs); color: var(--c-text-muted); }
.reward-wallet__value {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-coin-deep);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.reward-wallet__hint { font-size: var(--fs-xs); color: var(--c-text-muted); text-align: right; }

.reward-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.reward {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}
.reward.is-blocked { background: var(--c-surface-sunk); }
.reward.is-blocked .reward__name { color: var(--c-text-muted); }
.reward__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--c-brand-tint);
    color: var(--c-brand-deep);
    flex: none;
}
.reward.is-blocked .reward__icon { background: var(--c-surface); color: var(--c-text-muted); }
.reward__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reward__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.reward__name { font-weight: 700; line-height: 1.3; }
.reward__price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    color: var(--c-coin-deep);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.reward__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.reward__desc { font-size: var(--fs-sm); color: var(--c-text); margin-top: 2px; }
.reward__state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-warning-deep);
}
.reward__state.is-ok { color: var(--c-brand-deep); }

.reward-steps { margin: 0; padding-left: 1.3em; font-size: var(--fs-sm); line-height: 1.6; }
.reward-steps li + li { margin-top: var(--sp-1); }

/* ---- เรียนรู้ (§16.3) ---------------------------------------------------- */

.lesson-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.lesson {
    display: flex;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.lesson__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--c-xp-tint);
    color: var(--c-xp);
    flex: none;
}
.lesson.is-passed .lesson__icon { background: var(--c-brand-tint); color: var(--c-brand-deep); }
.lesson__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lesson__title { font-weight: 700; line-height: 1.3; }
.lesson__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.lesson__reward { display: inline-flex; gap: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; margin-top: 2px; }
.lesson__state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
}
.lesson__state.is-passed { color: var(--c-brand-deep); }

.reader { padding-bottom: var(--sp-6); }
.reader__top {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    background: var(--c-bg);
}
.reader__top h1 { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-md); font-weight: 700; }
.block { margin-bottom: var(--sp-4); }
.block__text { margin: 0 0 var(--sp-3); line-height: 1.7; white-space: pre-line; }
.block__image { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--c-surface-sunk); }
.block__caption { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
.block__video {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}
.block__video-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--c-danger-tint);
    color: var(--c-danger-deep);
    flex: none;
}

.quiz__q { margin-bottom: var(--sp-5); }
.quiz__prompt { margin: 0 0 var(--sp-2); font-weight: 700; line-height: 1.5; }
.quiz__kind { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: 400; }
.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.choice input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--c-brand); }
.choice.is-selected { border-color: var(--c-brand); background: var(--c-brand-tint); }
.choice.is-correct { border-color: var(--c-brand); background: var(--c-brand-tint); }
.choice.is-wrong { border-color: var(--c-danger); background: var(--c-danger-tint); }
.choice__label { flex: 1; line-height: 1.5; }
.quiz__explain {
    margin: var(--sp-2) 0 0;
    padding: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.5;
    background: var(--c-surface-sunk);
    border-radius: var(--radius-sm);
}
.quiz__result {
    text-align: center;
    padding: var(--sp-5) var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
}
.quiz__result.is-passed { background: var(--c-brand-tint); border-color: var(--c-brand); }
.quiz__score { display: block; font-size: 40px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.quiz__result.is-passed .quiz__score { color: var(--c-brand-deep); }

/* ---- ภารกิจ (§16.2) ------------------------------------------------------- */

.home-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.home-link__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--c-xp-tint);
    color: var(--c-xp);
    flex: none;
}
.home-link__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-link__title { font-weight: 700; }
.home-link__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }

.quest {
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}
.quest.is-done { border-color: var(--c-brand); background: var(--c-brand-tint); }
.quest__head { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
.quest__title { font-weight: 700; line-height: 1.3; }
.quest__reward { font-size: var(--fs-xs); font-weight: 700; color: var(--c-xp-deep); white-space: nowrap; }
.quest__desc { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.quest__meta { margin: 2px 0 var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.quest__sub { margin: var(--sp-2) 0 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted); }
.quest__cond { margin-bottom: var(--sp-2); }
.quest__cond-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.quest__cond-value { font-variant-numeric: tabular-nums; color: var(--c-text-muted); }
.quest__cond-value.is-met { color: var(--c-brand-deep); font-weight: 700; }
.quest__bar { height: 8px; margin-top: 4px; background: var(--c-surface-sunk); border-radius: 999px; overflow: hidden; }
.quest__bar span { display: block; height: 100%; background: var(--c-brand); border-radius: 999px; transition: width .3s; }
.quest__state { display: flex; align-items: center; gap: 4px; margin: var(--sp-2) 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--c-warning-deep); }
.quest__state.is-done { color: var(--c-brand-deep); }