/* 33.62 — UX review: less explaining, clear hierarchy, one action per card. */
#main:has(>.dailyPracticeEntry)>:is(.eyebrow,.lead){display:none}
.learningPlanCard .goalSample{display:flex;flex-direction:column;gap:2px;margin:6px 0 14px}
.learningPlanCard .goalSample .thai{font-size:22px;line-height:1.4;color:var(--text)}
.learningPlanCard .goalSample small{font-size:13px;color:var(--sub)}
.learningPlanCard #goalPractice{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.goalPracticeCard small .thai{font-size:14px}
/* Phrasebook: denser cards, the Thai first, no repeated "read like this" label. */
#main:has(>.search)>:is(.eyebrow,.lead){display:none}
#main:has(>.search) .phraseitem{padding:12px 12px;gap:10px;min-height:0}
#main:has(>.search) .phraseitem .thai{font-size:24px;line-height:1.35;margin:0}
#main:has(>.search) .phraseitem .reading{margin:2px 0 0;padding:0;background:none;border:0;font-size:13px}
#main:has(>.search) .phraseitem .reading>span{display:none}
#main:has(>.search) .phraseitem p{margin:4px 0 0;font-size:14px}
#main:has(>.search) .phraseitem small.muted{display:block;margin-top:2px;font-size:11px}
#main:has(>.search) .phraseitem .phraseContextIcon{width:34px;height:34px}
#main:has(>.search) .phraseitem .phraseactions{gap:6px}
/* Letters: header without explainers; example words fill the row. */
#main:has(>.literacyTabs)>:is(.eyebrow,.lead){display:none}
.literacyBody .exampleWords{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.literacyBody .exampleWords>*{width:auto;min-width:0;margin:0}
.literacyBody .exampleWords>*{padding-left:4px;padding-right:4px}
.literacyBody .exampleWords :is(.thai,strong,span:first-child){white-space:nowrap;word-break:keep-all;font-size:clamp(16px,5.2vw,21px)}
/* Profile: no explanatory subtitle under achievements. */
.milestoneHeading>div>p{display:none}
/* Sign-up steps. */
.signupSteps{display:flex;gap:6px;margin:0 0 16px}
.signupSteps span{flex:1;height:5px;border-radius:4px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.signupSteps span.on{background:#52dfba}
.usernameField{display:flex;align-items:center;gap:6px;border-radius:14px}
.usernameField>span{font:600 18px/1 Outfit,sans-serif;color:var(--sub)}
.usernameField>input{flex:1;margin:0}
#usernameStatus.ok{color:#52dfba;font-weight:600}
#usernameStatus.taken{color:#ff9b8a;font-weight:600}
.signupWho{margin:0 0 12px;color:var(--sub)}
.signupWho strong{color:var(--text)}
/* Word hints in exercises. */
.thaiHintWord{cursor:pointer;border-bottom:2px dotted color-mix(in srgb,currentColor 45%,transparent);padding-bottom:1px;border-radius:2px;-webkit-tap-highlight-color:transparent}
.thaiHintWord.active,.thaiHintWord:focus-visible{background:color-mix(in srgb,#52dfba 22%,transparent);outline:none}
.thaiHintPopover{position:absolute;z-index:40;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center;min-width:120px;max-width:240px;padding:10px 12px;border-radius:14px;background:#0f3439;border:1px solid #2f6b66;box-shadow:0 10px 24px #04191c80;color:#eef7f4;text-align:left}
.thaiHintPopover strong{font-size:20px;line-height:1.3;grid-column:1}
.thaiHintPopover span{font-size:13px;color:#9fd9c9;grid-column:1}
.thaiHintPopover small{font-size:13px;color:#eef7f4;grid-column:1}
.thaiHintPopover .thaiHintSound{grid-column:2;grid-row:1/span 3;width:36px;height:36px;border-radius:12px;border:1px solid #2f6b66;background:#16484f;color:#7fe8c9;display:grid;place-items:center;padding:0}
.thaiHintPopover .thaiHintSound svg{width:18px;height:18px}
/* Lesson card pointer towards its circle. */
.pathPopover.popBelow::before,.pathPopover.popAbove::after{content:"";position:absolute;left:calc(var(--pop-arrow,50%) - 9px);width:18px;height:18px;background:inherit;transform:rotate(45deg);border-radius:4px;z-index:3;pointer-events:none;display:block!important}
.pathPopover.popBelow::before{top:-7px}
.pathPopover.popAbove::after{bottom:-7px}
.pathPopover:has(.nodeStartCard).popBelow::before,.pathPopover:has(.nodeStartCard).popAbove::after{background:#7ee0c4}
/* Listening step: button on its own row, status centred below, room before the options. */
.dedicatedListening{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;margin:14px 0 18px!important}
.dedicatedListening>#listenFoundation{width:100%!important;margin:0!important;display:flex;align-items:center;justify-content:center;gap:10px}
.dedicatedListening>#foundationHearStatus{display:block;text-align:center;margin:0!important;font-size:13px;line-height:1.5;color:var(--sub)}
/* Tap / listen cards: one centred column, same height, Thai sized to fit. */
#modal .tapCards .adaptiveCard{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;min-height:112px;padding:14px 12px!important}
#modal .tapCards .adaptiveCard .choiceContent{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px;width:100%;text-align:center!important}
#modal .tapCards .adaptiveCard .choiceContent>*{margin:0!important;text-align:center!important;max-width:100%}
#modal .tapCards .adaptiveCard .thai{font-size:clamp(18px,5.6vw,24px)!important;line-height:1.35!important;word-break:normal;overflow-wrap:normal}
#modal .tapCards .adaptiveCard small{font-size:12px;line-height:1.4;opacity:.85}
/* Match pairs: taller cards that fill the screen. */
#modal .pairGrid{gap:12px!important;margin-top:8px}
#modal .pairGrid>div{display:grid!important;gap:12px!important;align-content:start}
#modal .pairGrid .pairCard{min-height:68px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 8px;line-height:1.3;font-size:15px}
#modal .pairGrid .pairCard.thai{font-size:24px}
/* Mission object choices: icon tile on the left, name beside it. */
#modal .missionObject{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:14px;text-align:left!important;min-height:72px;padding:12px 14px!important}
#modal .missionObject>.uiIcon{flex:none;width:44px;height:44px;padding:10px;margin:0!important;border-radius:14px;background:color-mix(in srgb,#52dfba 14%,transparent);color:#52dfba;box-sizing:border-box}
#modal .missionObject>strong{margin:0!important;font-size:16px;line-height:1.35}
#modal .missionObject.correct>.uiIcon{background:#123e3622;color:#123e36}
/* 33.83 — lesson card: smaller, no dimmed backdrop or big shadow, no close/see-steps, pointer in the card's colour. */
.pathBackdrop{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pathPopover .pathPeek.nodeStartCard{box-shadow:0 4px 0 #2a9e83!important;padding:16px 16px 14px!important}
.pathPopover .nodeStartCard .peekClose,.pathPopover .nodeStartCard #viewNodeLessons{display:none!important}
.pathPopover .nodeStartCard h3,.pathPopover .nodeStartCard h2{font-size:19px!important;line-height:1.25!important;margin:4px 0 2px!important}
.pathPopover .nodeStartCard #beginPathNode{min-height:44px!important;margin-top:12px!important;font-size:15px!important}
.pathPopover:has(.nodeStartCard).popBelow::before,.pathPopover:has(.nodeStartCard).popAbove::after{background:#43d5b1!important}
/* 33.84 — combos: the progress bar heats up, a cheer and lightning burst from it. */
#modal .focusProgress .bar>div{transition:background .45s ease,box-shadow .45s ease}
#modal.comboHot .focusProgress .bar>div{background:linear-gradient(90deg,#ffcf4d,#ff8a3d)!important;box-shadow:0 0 12px #ffb84d99}
#modal.comboBlaze .focusProgress .bar>div{background:linear-gradient(90deg,#ffd84d,#ff6b9a,#b98cff)!important;box-shadow:0 0 16px #ff8acb99}
.comboCheer{position:absolute;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#ffb84d;color:#3a2200;font-size:14px;white-space:nowrap;box-shadow:0 6px 18px #0006;animation:comboIn .45s cubic-bezier(.2,1.4,.4,1)}
#modal.comboBlaze .comboCheer{background:linear-gradient(90deg,#ffd84d,#ff8acb)}
.comboCheer .uiIcon{width:18px;height:18px}
.comboCheer span{font-weight:700;opacity:.8}
.comboCheer.leaving{transition:opacity .4s,transform .4s;opacity:0;transform:translate(-50%,-6px)}
.comboBurst{position:absolute;z-index:31;width:0;height:0;pointer-events:none}
.comboBurst i{position:absolute;left:-9px;top:-9px;color:#ffd166;animation:comboBolt .8s ease-out forwards}
.comboBurst i .uiIcon{width:18px;height:18px}
@keyframes comboIn{from{opacity:0;transform:translate(-50%,8px) scale(.8)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes comboBolt{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1.1)}}
.rewardNumbers .comboChip{color:#ffd166!important;border-color:#ffb84d!important}
/* 33.86 — one accent system for every page outside the route: depth by two surfaces, strong colour only on icon tiles and key numbers. */
html[data-design="2026"]:not([data-theme="light"]){--ac-mint:#52dfba;--ac-blue:#6ec3e0;--ac-gold:#f2c46d;--ac-coral:#f39a7b;--ac-lilac:#b9a0f0;--surface-1:#15393f;--surface-2:#1e4850}
html[data-design="2026"]:not([data-theme="light"]) body:not(.pathHome) #main :is(.card,.profileHero,.profileProgressSummary,.dailyPracticeEntry,.milestoneSection,.literacyBody,.vocabularyShelf){background:var(--surface-1)!important}
html[data-design="2026"]:not([data-theme="light"]) body:not(.pathHome) #main :is(.profileMetric,.profileFoundation,.weakWordRecommendation,.vocabularyCard,.characterLibraryEntry,.phraseitem,.supportDetails,.grid>.card,.exampleWords>*){background:var(--surface-2)!important}
/* Icon tiles */
.acTile,html[data-design="2026"] #main :is(.profileMetric dt>span,.phraseContextIcon,.weakWordRecommendation>svg:first-child,.characterLibraryEntry>svg:first-child,.practiceHelpLevel>svg,.milestoneMedallion){display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--ac,var(--ac-mint)) 22%,transparent)!important;color:var(--ac,var(--ac-mint))!important}
html[data-design="2026"] #main .weakWordRecommendation>svg:first-child,html[data-design="2026"] #main .practiceHelpLevel>svg,html[data-design="2026"] #main .characterLibraryEntry>svg:first-child{padding:8px;box-sizing:border-box}
html[data-design="2026"] #main .profileMetric dt>span .uiIcon{color:inherit!important}
html[data-design="2026"] #main .profileMetric.xp{--ac:var(--ac-gold)}html[data-design="2026"] #main .profileMetric.xp dt>span{--ac:var(--ac-gold)}
html[data-design="2026"] #main .profileMetric.streak dt>span{--ac:var(--ac-coral)}
html[data-design="2026"] #main .profileMetric.lessons dt>span{--ac:var(--ac-blue)}
html[data-design="2026"] #main .profileMetric.phrases dt>span{--ac:var(--ac-lilac)}
html[data-design="2026"] #main .profileMetric.xp dd>strong{color:var(--ac-gold)!important}
html[data-design="2026"] #main .profileMetric.streak dd>strong{color:var(--ac-coral)!important}
html[data-design="2026"] #main .profileMetric.lessons dd>strong{color:var(--ac-blue)!important}
html[data-design="2026"] #main .profileMetric.phrases dd>strong{color:var(--ac-lilac)!important}
html[data-design="2026"] #main .milestoneMedallion{--ac:var(--ac-gold);width:40px;height:40px}
html[data-design="2026"] #main .weakWordRecommendation:not(.goalPracticeCard)>svg:first-child{--ac:var(--ac-coral)}
html[data-design="2026"] #main .goalPracticeCard>svg:first-child{--ac:var(--ac-lilac)}
html[data-design="2026"] #main .characterLibraryEntry>svg:first-child{--ac:var(--ac-blue)}
html[data-design="2026"] #main .profileFoundation .uiIcon{color:var(--ac-mint)!important}
html[data-design="2026"] #main .learningPlanCard .hubOverline{color:var(--ac-lilac)!important}
html[data-design="2026"] #main .dailyPracticeEntry>h2,html[data-design="2026"] #main .profileProgressSummary>h2{display:flex;align-items:center;gap:10px}
html[data-design="2026"] #main .dailyPracticeEntry>h2::before,html[data-design="2026"] #main .profileProgressSummary>h2::before,html[data-design="2026"] #main .milestoneSection h2::before{content:"";width:4px;height:20px;border-radius:3px;background:var(--ac-mint)}
html[data-design="2026"] #main .milestoneSection h2{display:flex;align-items:center;gap:10px}
html[data-design="2026"] #main .milestoneSection h2::before{background:var(--ac-gold)}
/* Phrasebook: each topic keeps its own colour. */
html[data-design="2026"] #main .phraseitem[data-ac="0"]{--ac:var(--ac-mint)}html[data-design="2026"] #main .phraseitem[data-ac="1"]{--ac:var(--ac-blue)}html[data-design="2026"] #main .phraseitem[data-ac="2"]{--ac:var(--ac-gold)}html[data-design="2026"] #main .phraseitem[data-ac="3"]{--ac:var(--ac-coral)}html[data-design="2026"] #main .phraseitem[data-ac="4"]{--ac:var(--ac-lilac)}

html[data-design="2026"] #main .phraseitem small.muted{color:var(--ac,#9ab2ba)!important;opacity:.9}
/* Letters: the active tab and listen buttons carry the accent. */
html[data-design="2026"] #main .literacyTabs [aria-selected="true"],html[data-design="2026"] #main .literacyTabs .active{background:var(--ac-blue)!important;color:#0f3439!important;border-color:var(--ac-blue)!important}
html[data-design="2026"] #main .toneListen{color:var(--ac-gold)!important;border-color:color-mix(in srgb,var(--ac-gold) 45%,transparent)!important}
/* Every section card on these pages: title bar in its own accent. */
html[data-design="2026"] #main>:is(section,div).card>h2,html[data-design="2026"] #main>section>h2,html[data-design="2026"] #main .vocabularyShelf h2{display:flex;align-items:center;gap:10px}
html[data-design="2026"] #main>:is(section,div).card>h2::before,html[data-design="2026"] #main>section>h2::before,html[data-design="2026"] #main .vocabularyShelf h2::before{content:"";flex:none;width:4px;height:20px;border-radius:3px;background:var(--ac-mint)}
html[data-design="2026"] #main>.learningPlanCard>h2::before{background:var(--ac-lilac)}
html[data-design="2026"] #main>.accountPanel>h2::before{background:var(--ac-blue)}
html[data-design="2026"] #main>.socialPanel>h2::before,html[data-design="2026"] #main>.socialPanel h2::before{background:var(--ac-coral)}
html[data-design="2026"] #main .vocabularyShelf h2::before{background:var(--ac-gold)}
html[data-design="2026"] #main .socialPanel h2{display:flex;align-items:center;gap:10px}
html[data-design="2026"] #main .socialPanel h2::before{content:"";flex:none;width:4px;height:20px;border-radius:3px}
html[data-design="2026"] #main .accountIdentity>svg{--ac:var(--ac-blue);width:34px;height:34px;padding:8px;box-sizing:border-box;border-radius:11px;background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--ac)}
html[data-design="2026"] #main>.learningPlanCard .hubOverline{color:var(--ac-lilac)!important}
/* Outside the route, the fixed top bar hides content scrolling beneath it. */
html[data-design="2026"]:not([data-theme="light"]) body:not(.pathHome):not(.authPage) .workspace>header{background:linear-gradient(180deg,#10343a 0,#10343a 80%,rgba(16,52,58,0) 100%)!important}
html[data-design="2026"] #main .literacyBody h2{display:flex;align-items:center;gap:10px}
html[data-design="2026"] #main .literacyBody h2::before{content:"";flex:none;width:4px;height:20px;border-radius:3px;background:var(--ac-blue)}