.app-shell { min-height: 100vh; padding-bottom: 5.8rem; }

.topbar {
  position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between;
  min-height: 4.75rem; padding: max(.8rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .8rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px);
}

.brand, .topbar-actions, .language-switch, .card-topline, .badge-row, .primary-actions,
.session-heading, .progress-row, .section-heading, .rule-result, .next-audio,
.dialog-heading, .dialog-actions { display: flex; align-items: center; }

.brand { gap: .75rem; }
.brand-logo { display: block; width: 2.85rem; height: 2.85rem; flex: 0 0 auto; filter: drop-shadow(0 8px 13px rgb(77 41 9 / 22%)); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .96rem; letter-spacing: -.02em; }
.brand small { display: none; margin-top: .08rem; color: var(--text-soft); font-size: .66rem; }
.topbar-actions { gap: .55rem; }
.account-button { display:flex; min-height:2.55rem; align-items:center; padding:.25rem .72rem .25rem .3rem; gap:.45rem; border:1px solid var(--border); border-radius:999px; color:var(--text); background:var(--surface); box-shadow:var(--shadow-sm); font-size:.68rem; font-weight:800; }
.account-avatar { display:grid; width:1.95rem; height:1.95rem; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--primary),#e59b43); }
.account-label { display:none; max-width:7.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.language-switch { padding: .2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.language-switch button { min-width: 2.2rem; min-height: 2rem; border-radius: 999px; color: var(--text-soft); background: transparent; font-size: .72rem; font-weight: 800; }
.language-switch button.is-active { color: #fff; background: var(--secondary); }
.icon-button, .ghost-icon { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 1.15rem; }
.ghost-icon { border-color: transparent; background: transparent; box-shadow: none; }

.journey-home { width: min(100% - 2rem, 73rem); margin: 0 auto; padding: 1.6rem 0 .2rem; }
.journey-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.journey-heading h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.8rem); letter-spacing: -.05em; }
.journey-heading > div > p:last-child { max-width: 42rem; margin: .45rem 0 0; color: var(--text-soft); font-size: .82rem; line-height: 1.55; }
.journey-world { flex: 0 0 auto; padding: .45rem .75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--secondary); background: var(--secondary-soft); font-size: .68rem; font-weight: 900; }
.journey-stage { display: grid; margin-top: 1rem; gap: 1rem; }
.home-lake, .journey-focus-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.home-lake { padding: clamp(.8rem, 2.5vw, 1.35rem); overflow: hidden; }
.home-lake__heading { display: flex; position: relative; z-index: 3; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.home-lake__heading h2 { margin: .1rem 0 0; font-size: clamp(1.2rem, 3vw, 1.7rem); letter-spacing: -.035em; }
.home-lake__score { padding: .4rem .6rem; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 999px; color: var(--text-soft); background: var(--primary-soft); font-size: .58rem; font-weight: 800; white-space: nowrap; }
.home-lake__score strong { color: var(--primary); font-size: .88rem; }
.home-lake__map { position: relative; height: 22rem; margin-top: .75rem; overflow: hidden; border: 1px solid rgba(89, 142, 132, .3); border-radius: 1rem; background: radial-gradient(ellipse at 18% 72%, rgba(255, 244, 198, .82) 0 4%, transparent 19%), radial-gradient(ellipse at 75% 20%, rgba(255, 255, 255, .72), transparent 28%), repeating-radial-gradient(ellipse at 50% 110%, transparent 0 32px, rgba(65, 126, 116, .08) 34px 36px), linear-gradient(180deg, #edf5ef, #d8ebe6 48%, #bdd8d2); isolation: isolate; }
.home-lake__map::before { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(174deg, transparent 0 38px, rgba(255, 255, 255, .2) 39px 40px, transparent 41px 66px); content: ""; animation: home-water-drift 9s ease-in-out infinite alternate; }
.home-lake__sun { position: absolute; top: 1.2rem; left: 7%; width: 3.7rem; height: 3.7rem; border-radius: 50%; background: rgba(250, 207, 119, .24); box-shadow: 0 0 36px 22px rgba(248, 213, 143, .22); }
.home-lake__mist { position: absolute; z-index: 4; width: 16rem; height: 5rem; border-radius: 50%; background: rgba(246, 249, 241, .72); filter: blur(20px); pointer-events: none; animation: home-mist-drift 10s ease-in-out infinite alternate; }
.home-lake__mist--one { top: 1.8rem; left: 43%; }
.home-lake__mist--two { right: -2rem; bottom: .4rem; }
.home-lake__route { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(43, 94, 86, .18)); }
.home-lake__route .is-lit { stroke: #efb249; stroke-width: 5; stroke-dasharray: 10 12; animation: home-route-light 8s linear infinite; }
.home-lake-stop { display: grid; position: absolute; z-index: 3; width: 19%; min-height: 9.4rem; justify-items: center; padding: 0; border: 0; color: var(--text); background: transparent; font: inherit; text-align: center; transform: translate(-50%, -50%); }
.home-lake-stop--one { top: 75%; left: 12%; }
.home-lake-stop--two { top: 33%; left: 32%; }
.home-lake-stop--three { top: 71%; left: 52%; }
.home-lake-stop--four { top: 30%; left: 72%; }
.home-lake-stop--five { top: 73%; left: 90%; }
.home-lake-stop__number { display: grid; position: absolute; top: .1rem; right: .35rem; z-index: 5; width: 1.45rem; height: 1.45rem; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #789c94; box-shadow: 0 3px 9px rgba(46, 83, 76, .2); font-size: .54rem; font-weight: 900; }
.home-lake-stop__lotus { display: grid; width: 5.4rem; height: 4.5rem; place-items: center; transition: transform 180ms ease; animation: home-lotus-float 4.5s ease-in-out infinite; }
.home-lake-stop__lotus::before { position: absolute; width: 4.5rem; height: 3rem; border-radius: 50%; background: rgba(231, 161, 54, .28); filter: blur(13px); content: ""; animation: home-lotus-glow 3s ease-in-out infinite; }
.home-lake-stop__lotus svg { position: relative; z-index: 1; width: 100%; overflow: visible; }
.home-lake-stop__lotus path { fill: #bfd6d1; stroke: #7ba096; stroke-width: 5; stroke-linejoin: round; }
.home-lake-stop__copy { display: grid; position: relative; z-index: 5; width: 100%; min-height: 3.9rem; align-content: center; padding: .42rem; gap: .08rem; border: 1px solid rgba(110, 151, 142, .46); border-radius: .7rem; background: rgba(255, 253, 247, .9); box-shadow: 0 7px 18px rgba(54, 91, 83, .11); backdrop-filter: blur(7px); }
.home-lake-stop__copy small { color: #58756e; font-size: .42rem; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.home-lake-stop__copy strong { font-size: .68rem; line-height: 1.12; }
.home-lake-stop__copy em { color: #60766f; font-size: .45rem; font-style: normal; }
.home-lake-stop.is-current .home-lake-stop__number { background: linear-gradient(145deg, #d78f2d, #ba5f28); }
.home-lake-stop.is-current .home-lake-stop__lotus path { fill: #ecd9bd; stroke: #bc7b30; }
.home-lake-stop.is-current .home-lake-stop__copy { border-color: #dfa65c; background: rgba(255, 249, 229, .96); box-shadow: 0 9px 22px rgba(170, 102, 27, .16); }
.home-lake-stop.is-complete .home-lake-stop__lotus path { fill: #da929f; stroke: #ad5965; }
.home-lake-stop.is-complete .home-lake-stop__lotus path:nth-child(even) { fill: #edb16d; stroke: #bc6d27; }
.home-lake-stop.is-complete .home-lake-stop__copy small { color: #a35b16; }
.home-lake-stop.is-bud .home-lake-stop__lotus path { fill: #eddfbc; stroke: #c7a157; }
.home-lake-stop.is-bud .home-lake-stop__number { background: #d3a344; animation: home-next-pulse 2.4s ease-in-out infinite; }
.home-lake-stop.is-mist { cursor: not-allowed; opacity: .66; filter: saturate(.72); }
.home-lake-stop:not(:disabled):hover .home-lake-stop__lotus { transform: translateY(-5px) scale(1.04); }
.home-lake__hint { margin: .7rem 0 0; color: #50746c; font-size: .59rem; font-weight: 800; text-align: center; }
.home-lake__hint::before { margin-right: .35rem; color: var(--primary); content: "✦"; }
.journey-focus-card { display: grid; overflow: hidden; }
.journey-focus-card__visual { position: relative; min-height: 15rem; margin: 0; overflow: hidden; background: #dcc39b; }
.journey-focus-card__visual::after { position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(27, 39, 34, .72)); content: ""; }
.journey-focus-card__visual img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: 52% center; }
.journey-focus-card__visual figcaption { display: flex; position: absolute; right: .75rem; bottom: .65rem; left: .75rem; z-index: 2; justify-content: space-between; color: #fff; font-size: .6rem; font-weight: 900; text-shadow: 0 1px 7px rgba(0, 0, 0, .75); }
.journey-focus-card__copy { display: flex; flex-direction: column; padding: 1rem; }
.mission-audio-badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .65rem; border-radius: 999px; color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); font-size: .67rem; font-weight: 800; }
.mission-thai { margin: .75rem 0 0; color: var(--primary); font-family: var(--font-thai-display); font-size: 1.35rem; }
.journey-focus-card h2 { margin: .1rem 0 0; font-size: 1.45rem; letter-spacing: -.035em; }
.journey-focus-card__copy > p:not(.mission-thai) { margin: .35rem 0 0; color: var(--text-soft); font-size: .72rem; line-height: 1.55; }
.mission-meta { display: flex; flex-wrap: wrap; margin: .75rem 0 0; padding: 0; gap: .35rem .9rem; color: var(--text-soft); list-style: none; font-size: .65rem; font-weight: 700; }
.mission-meta li::before { margin-right: .35rem; color: var(--primary); content: "✦"; }
.mission-start { display: flex; min-height: 3.2rem; align-items: center; justify-content: space-between; margin-top: 1rem; padding: 0 1rem; border-radius: var(--radius-sm); color: #fff; background: var(--primary); font-size: .75rem; font-weight: 900; }
.mission-start:hover { background: var(--primary-hover); }
@keyframes home-water-drift { to { transform: translateY(7px); } }
@keyframes home-mist-drift { to { transform: translateX(2rem) scale(1.05); } }
@keyframes home-route-light { to { stroke-dashoffset: -220; } }
@keyframes home-lotus-float { 50% { transform: translateY(-5px); } }
@keyframes home-lotus-glow { 50% { opacity: .5; transform: scale(.8); } }
@keyframes home-next-pulse { 50% { box-shadow: 0 0 0 8px rgba(211, 163, 68, .16); } }

.lesson-layout { display: grid; width: min(100% - 2rem, 73rem); margin: 0 auto; padding: 1.6rem 0 2rem; gap: 1.25rem; }
.session-heading { justify-content: space-between; gap: 1rem; }
.session-heading h1 { margin: 0; font-size: clamp(1.65rem, 6vw, 2.35rem); letter-spacing: -.045em; }
.session-subtitle { margin: .35rem 0 0; color: var(--text-soft); font-size: .84rem; }
.status-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 .28rem var(--secondary-soft); }
.streak { display: grid; grid-template-columns: auto auto; align-items: center; min-width: 4.1rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); column-gap: .35rem; }
.streak > span { grid-row: span 2; color: var(--primary); }
.streak strong { font-size: .95rem; }
.streak small { color: var(--text-soft); font-size: .58rem; text-transform: uppercase; }
.progress-row { margin: 1.3rem 0 .9rem; gap: .7rem; color: var(--text-soft); font-size: .68rem; font-weight: 700; }
.progress-track { flex: 1; height: .4rem; overflow: hidden; border-radius: 999px; background: var(--surface-strong); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #e49a45); }

.course-card, .tone-explainer, .premium-panel, .next-audio, .review-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.course-card { position: relative; overflow: hidden; padding: 1.05rem; }
.course-card::before { position: absolute; top: -8rem; left: 50%; width: 18rem; height: 18rem; border-radius: 50%; background: radial-gradient(circle, var(--primary-soft), transparent 69%); content: ""; transform: translateX(-50%); pointer-events: none; }
.card-topline { position: relative; z-index: 1; justify-content: space-between; }
.badge-row { flex-wrap: wrap; gap: .4rem; }
.class-badge, .tone-badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .65rem; border-radius: 999px; font-size: .67rem; font-weight: 800; }
.class-badge { gap: .35rem; color: var(--secondary); background: var(--secondary-soft); }
.tone-badge { color: var(--tone); background: var(--tone-soft); }
.card-study-zone { position: relative; z-index: 1; display: grid; min-height: 15rem; place-items: center; }
.character-wrap { text-align: center; }
.thai-character { margin: 0; color: var(--text); font-family: var(--font-thai); font-size: clamp(7rem, 34vw, 11rem); font-weight: 500; line-height: .88; text-shadow: 0 9px 25px color-mix(in srgb, var(--primary) 8%, transparent); }
.letter-name { margin: .85rem 0 0; color: var(--text-soft); font-family: var(--font-thai); font-size: 1rem; }
tone-curve { display: block; width: 7rem; margin: -.4rem auto 0; color: var(--tone); }
tone-curve[compact] { width: 5rem; margin: 0; }
tone-curve[tone="mid"] { color: var(--tone-mid); }
tone-curve[tone="low"] { color: var(--tone-low); }
tone-curve[tone="falling"] { color: var(--tone-falling); }
tone-curve[tone="high"] { color: var(--tone-high); }
tone-curve[tone="rising"] { color: var(--tone-rising); }
.tone-badge[data-tone="mid"] { color: var(--tone-mid); }
.tone-badge[data-tone="low"] { color: var(--tone-low); }
.tone-badge[data-tone="falling"] { color: var(--tone-falling); }
.tone-badge[data-tone="high"] { color: var(--tone-high); }
.tone-badge[data-tone="rising"] { color: var(--tone-rising); }

.primary-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.action-button { display: flex; align-items: center; min-height: 4rem; padding: .65rem; gap: .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: left; background: var(--surface-soft); }
.action-button:hover { border-color: var(--primary); }
.action-audio { color: var(--secondary); background: var(--secondary-soft); }
.action-icon { display: grid; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); }
.action-audio .action-icon { background: var(--secondary); }
.action-button strong, .action-button small { display: block; }
.action-button strong { color: var(--text); font-size: .78rem; }
.action-button small { margin-top: .15rem; color: var(--text-soft); font-size: .62rem; }
.action-button .premium-chip { display: none; margin-left: auto; }
.reveal-button { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: space-between; margin-top: .8rem; padding: 0 1rem; border-radius: var(--radius-sm); color: #fff; background: var(--primary); font-weight: 800; }
.reveal-button:hover { background: var(--primary-hover); }

.answer-panel { margin-top: .9rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.answer-grid > div { padding: .8rem; border-radius: var(--radius-sm); background: var(--surface-soft); }
.answer-label, .answer-grid strong { display: block; }
.answer-label { margin-bottom: .25rem; color: var(--text-soft); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.answer-grid strong { font-size: .87rem; }
.sound-note { display: flex; align-items: center; margin-top: .8rem; padding: .8rem; gap: .8rem; border-left: 3px solid var(--secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--secondary-soft); }
.sound-symbol { font-family: var(--font-thai); font-size: 2.1rem; }
.sound-note p, .sound-note strong, .sound-note span, .example span { display: block; }
.sound-note p { margin: 0; }
.sound-note strong { font-size: .75rem; }
.sound-note p span { margin-top: .2rem; color: var(--text-soft); font-size: .7rem; line-height: 1.5; }
.example { margin: .8rem 0 0; padding: .65rem .8rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: .72rem; }
.example span:first-child { font-family: var(--font-thai); font-size: .95rem; }
.example span:last-child { margin-top: .25rem; color: var(--text-soft); }

.review-panel { margin-top: 1rem; padding: 1rem; }
.review-panel h2, .tone-explainer h2, .premium-panel h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.025em; }
.rating-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: .85rem; gap: .45rem; }
.rating-grid button { min-height: 3.25rem; padding: .45rem .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.rating-grid span, .rating-grid small { display: block; }
.rating-grid span { font-size: .7rem; font-weight: 800; }
.rating-grid small { margin-top: .2rem; color: var(--text-soft); font-size: .57rem; }
.rating-grid .rating-primary { border-color: var(--secondary); color: var(--secondary); background: var(--secondary-soft); }

.context-column { display: grid; align-content: start; gap: 1rem; }
.tone-explainer, .premium-panel { padding: 1.1rem; }
.section-heading { justify-content: space-between; }
.signal-mark { color: var(--tone); font-size: 2.4rem; }
.rule-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; margin-top: 1rem; gap: .35rem; }
.rule-equation span { padding: .65rem .25rem; border: 1px solid var(--border); border-radius: .75rem; text-align: center; background: var(--surface-soft); }
.rule-equation small, .rule-equation strong { display: block; }
.rule-equation small { color: var(--text-soft); font-size: .52rem; text-transform: uppercase; }
.rule-equation strong { margin-top: .22rem; font-size: .64rem; }
.rule-equation b { color: var(--primary); }
.rule-result { margin-top: .8rem; padding: .7rem .8rem; gap: .8rem; border-radius: var(--radius-sm); background: var(--tone-soft); }
.rule-result p, .rule-result small, .rule-result strong, .rule-result span { display: block; margin: 0; }
.rule-result small { color: var(--tone); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.rule-result strong { margin-top: .1rem; font-size: .78rem; }
.rule-result p span { margin-top: .12rem; color: var(--text-soft); font-size: .65rem; }

.premium-panel { position: relative; overflow: hidden; color: #fff9f0; border-color: #7c2d12; background: linear-gradient(145deg, #532510, #8b3b0c 58%, #aa4e0b); }
.premium-panel .eyebrow { color: #fbbf24; }
.premium-panel h2 { max-width: 16rem; font-size: 1.35rem; }
.premium-panel > p:not(.eyebrow) { max-width: 27rem; color: #f4d9b8; font-size: .75rem; line-height: 1.55; }
.premium-panel ul { padding: 0; list-style: none; }
.premium-panel li { margin-top: .55rem; color: #f8ead9; font-size: .7rem; }
.premium-panel li span { margin-right: .4rem; color: #fbbf24; }
.premium-orbit { position: absolute; top: -1.8rem; right: -1.8rem; display: grid; width: 7rem; height: 7rem; place-items: center; border: 1px solid rgb(255 249 240 / 20%); border-radius: 50%; color: #fbbf24; font-size: 1.5rem; }
.premium-button, .secondary-button { min-height: 2.8rem; padding: .65rem 1rem; border-radius: var(--radius-sm); font-size: .72rem; font-weight: 800; }
.premium-button { color: #4a2508; background: #fbbf24; }
.premium-panel .premium-button { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 1rem; }
.secondary-button { border: 1px solid var(--border); background: var(--surface-soft); }

.next-audio { padding: .75rem; gap: .75rem; }
.audio-cover { position: relative; display: grid; flex: 0 0 auto; width: 3.35rem; height: 3.35rem; overflow: hidden; place-items: center; border-radius: .9rem; color: #fff9f0; background: #315c52; font-family: var(--font-thai); font-size: 1.3rem; }
.audio-cover i { position: absolute; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; }
.next-audio > div:nth-child(2) { flex: 1; }
.next-audio h3 { margin: .25rem 0 0; font-size: .8rem; }
.next-audio p { margin: .15rem 0 0; color: var(--text-soft); font-size: .64rem; }

.bottom-nav { position: fixed; z-index: 18; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 4.6rem; padding: .4rem max(.7rem, env(safe-area-inset-right)) max(.4rem, env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(18px); }
.bottom-nav a, .bottom-nav button { display: grid; min-height: 3.45rem; place-items: center; align-content: center; gap: .14rem; border-radius: .75rem; color: var(--text-soft); background: transparent; }
.bottom-nav .is-active { color: var(--primary); background: var(--primary-soft); }
.bottom-nav span { font-size: 1.1rem; }
.bottom-nav small { font-size: .58rem; font-weight: 700; }

.stroke-dialog, .paywall-dialog, .account-dialog { width: min(calc(100% - 1.5rem), 37rem); max-height: calc(100vh - 1.5rem); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: transparent; box-shadow: 0 30px 80px rgb(0 0 0 / 28%); }
.dialog-surface, .paywall-surface { margin: 0; padding: 1.1rem; background: var(--surface); }
.dialog-heading { align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dialog-heading h2, .paywall-surface h2 { margin: .45rem 0 0; font-size: 1.4rem; }
.dialog-heading p, .paywall-surface > p:not(.eyebrow) { margin: .3rem 0 0; color: var(--text-soft); font-size: .75rem; line-height: 1.5; }
.dialog-actions { justify-content: flex-end; margin-top: .8rem; gap: .55rem; }
.prototype-note { margin: .8rem 0 0; color: var(--text-soft); font-size: .62rem; line-height: 1.5; }
.paywall-surface { position: relative; text-align: center; }
.dialog-close { position: absolute; top: .8rem; right: .8rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-soft); font-size: 1.2rem; }
.paywall-mark { display: block; width: 4.75rem; height: 4.75rem; margin: 0 auto 1rem; filter: drop-shadow(0 14px 19px rgb(70 37 7 / 24%)); }
.plan-compare { display: grid; grid-template-columns: 1fr 1fr; margin: 1.2rem 0; gap: .6rem; text-align: left; }
.plan-compare > div { padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.plan-compare strong, .plan-compare span { display: block; }
.plan-compare strong { margin-bottom: .5rem; color: var(--primary); }
.plan-compare span { margin-top: .35rem; color: var(--text-soft); font-size: .65rem; line-height: 1.4; }
.premium-plan { background: var(--primary-soft); }
.paywall-surface > .premium-button { min-width: 10rem; }
.account-surface { position:relative; margin:0; padding:1.2rem; background:var(--surface); }
.account-mark { display:block; margin:0 0 .9rem; filter:drop-shadow(0 12px 18px rgb(70 37 7 / 20%)); }
.account-surface h2 { margin:.35rem 0 0; font-size:1.4rem; }
.account-intro { margin:.35rem 0 1rem; color:var(--text-soft); font-size:.74rem; line-height:1.55; }
.account-alert { margin:.7rem 0; padding:.7rem; border-radius:.7rem; color:#9a3412; background:#ffedd5; font-size:.68rem; }
.account-field { display:grid; margin-top:.7rem; gap:.3rem; color:var(--text-soft); font-size:.64rem; font-weight:800; }
.account-field input { min-height:2.8rem; padding:0 .75rem; border:1px solid var(--border); border-radius:.75rem; color:var(--text); background:var(--surface-soft); font-size:.78rem; }
.account-submit { width:100%; min-height:2.9rem; margin-top:1rem; border-radius:.75rem; color:#fff; background:var(--primary); font-size:.75rem; font-weight:800; }
.account-session { display:grid; gap:.8rem; }
.account-plan-row { display:flex; align-items:center; padding:.8rem; gap:.7rem; border:1px solid var(--border); border-radius:.85rem; background:var(--surface-soft); }
.account-avatar-large { width:2.8rem; height:2.8rem; flex:0 0 auto; }
.account-plan-row strong,.account-plan-row small { display:block; }
.account-plan-row strong { font-size:.76rem; }
.account-plan-row small { margin-top:.2rem; color:var(--text-soft); font-size:.64rem; }
.staff-link { display:flex; min-height:2.8rem; align-items:center; justify-content:center; border-radius:.75rem; color:#fff; background:var(--secondary); font-size:.72rem; font-weight:800; }
.toast { position: fixed; z-index: 60; bottom: 6rem; left: 50%; max-width: calc(100% - 2rem); padding: .75rem 1rem; border-radius: 999px; color: var(--surface); background: var(--text); box-shadow: var(--shadow-md); font-size: .72rem; opacity: 0; transform: translate(-50%, 1rem); transition: 180ms ease; pointer-events: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 620px) {
  .brand small { display: block; }
  .account-label { display:block; }
  .course-card, .review-panel { padding: 1.35rem; }
  .action-button .premium-chip { display: inline-flex; }
  .journey-focus-card { grid-template-columns: minmax(14rem, .82fr) minmax(16rem, 1fr); }
  .journey-focus-card__visual { min-height: 20rem; }
}

@media (min-width: 920px) {
  .app-shell { padding-bottom: 0; }
  .topbar { padding-right: max(2rem, calc((100vw - 73rem) / 2)); padding-left: max(2rem, calc((100vw - 73rem) / 2)); }
  .journey-home { padding-top: 2.2rem; }
  .journey-stage { grid-template-columns: minmax(0, 1.58fr) minmax(18rem, .72fr); align-items: stretch; }
  .journey-focus-card { grid-template-columns: 1fr; }
  .journey-focus-card__visual { min-height: 13rem; }
  .lesson-layout { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .8fr); padding-top: 2.2rem; gap: 1.6rem; }
  .card-study-zone { min-height: 20rem; }
  .bottom-nav { top: 50%; right: auto; bottom: auto; left: 1rem; width: 4.5rem; min-height: 0; grid-template-columns: 1fr; padding: .45rem; border: 1px solid var(--border); border-radius: 1.4rem; box-shadow: var(--shadow-md); transform: translateY(-50%); }
}

@media (max-width: 620px) {
  .journey-heading, .home-lake__heading { align-items: flex-start; flex-direction: column; }
  .home-lake__map { height: 48rem; }
  .home-lake__route { display: none; }
  .home-lake-stop { width: 48%; min-height: 8.5rem; }
  .home-lake-stop--one { top: 12%; left: 30%; }
  .home-lake-stop--two { top: 31%; left: 70%; }
  .home-lake-stop--three { top: 50%; left: 30%; }
  .home-lake-stop--four { top: 69%; left: 70%; }
  .home-lake-stop--five { top: 88%; left: 45%; }
  .home-lake__sun { right: 1rem; left: auto; }
  .home-lake__mist--one { top: 15rem; left: -3rem; }
  .home-lake__mist--two { right: -4rem; bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-lake__map::before, .home-lake__mist, .home-lake__route .is-lit, .home-lake-stop__lotus, .home-lake-stop__lotus::before, .home-lake-stop.is-bud .home-lake-stop__number { animation: none !important; }
}