/* Daily quests: one summary, useful next task first, quiet completed rows. */
html[data-design] #modal .missionRefresh .questHero{padding:0 0 18px;border:0;border-radius:0;background:none;margin-bottom:4px}
html[data-design] #modal .missionRefresh .questHero>img,html[data-design] #modal .missionRefresh .questLandscape,html[data-design] #modal .missionRefresh .questDestination{display:none}
html[data-design] #modal .missionRefresh .questHeroCopy{width:100%}
html[data-design] #modal .missionRefresh .questHeroCopy>strong{font-size:21px}
html[data-design] #modal .missionRefresh .questSegments{margin:12px 0;height:6px;max-width:100%}
html[data-design] #modal .missionRefresh .questTotal{font-size:13px;color:var(--sub)}
html[data-design] #modal .missionRefresh .questCards{display:flex;flex-direction:column;gap:0}
html[data-design] #modal .missionRefresh .questCard{order:0;padding:18px 0;border:0;border-bottom:1px solid var(--border);background:none;box-shadow:none;border-radius:0;gap:14px}
html[data-design] #modal .missionRefresh .questCard.complete{order:1;padding:14px 0}
html[data-design] #modal .missionRefresh .questCard h3{font-size:16px;line-height:1.5}
html[data-design] #modal .missionRefresh .questArt{background:none;border-radius:0;width:28px;flex:0 0 28px}
html[data-design] #modal .missionRefresh .questCard.complete .questCardProgress{display:none}
html[data-design] #modal .missionRefresh .questCompletedLabel{font-size:12px;margin-top:4px}
html[data-design] #modal .missionRefresh .questReward{padding:0;background:none;font-size:13px}
html[data-design] #modal .missionRefresh .questFooter>p{display:none}
html[data-design] #modal .missionRefresh .questFooter{padding-top:14px}
/* Streak: compact calendar, no nested panels; centered friend empty state. */
html[data-design] #modal.streakMode{height:auto;min-height:0;max-height:calc(100dvh - 32px);border-radius:24px}
html[data-design] #modal .streakContent{flex:0 1 auto;padding-top:18px;scroll-padding-top:18px}
html[data-design] #modal .streakHero{background:none;border:0;padding:0 0 14px}
html[data-design] #modal .streakMessage{margin:0 0 16px}
html[data-design] #modal .streakCalendarCard{padding:16px 0;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0}
html[data-design] #modal .streakDates>span{max-width:34px;min-height:28px;border-radius:50%;background:none}
html[data-design] #modal .streakDates>.practiced{background:var(--green)}
html[data-design] #modal .streakDates>.future{background:none}
html[data-design] #modal .streakSectionTitle{font-size:16px;margin:20px 0 12px}
html[data-design] #modal .streakMilestone{padding:0;border:0;border-radius:0;background:none}
html[data-design] #modal .streakMilestoneMarks{display:none}
html[data-design] #modal .streakProtection{padding:12px 0;border:0;border-radius:0;background:none}
html[data-design] #modal .streakFriendsHero{padding:8px 8px 14px;max-width:320px;margin:auto}
html[data-design] #modal .streakFriendsHero img,html[data-design] #modal .streakFriendsHero svg{width:104px;height:112px;object-fit:contain;display:block;margin:0 auto 14px}
html[data-design] #modal .streakFriendsHero h2{font-size:23px;line-height:1.3;margin:0 0 10px}
html[data-design] #modal .streakFriendsHero p,html[data-design] #modal .streakEmpty{text-align:center;color:var(--sub);font-size:14px;line-height:1.6;margin:0 auto 16px;max-width:300px}
html[data-design] #modal .streakManage{display:flex;justify-content:center;align-items:center;gap:9px;min-height:48px;margin:6px auto 0}
html[data-design] #modal .walletMovement{grid-template-columns:24px minmax(0,1fr) auto;padding:14px 0;gap:12px}
html[data-design] #modal .walletMovement>div>strong{font-size:14px;line-height:1.4;font-weight:600}
html[data-design] #modal .walletMovement>div>small{font-size:12px;color:var(--sub)}
html[data-design] #modal .walletMovement>b{font-size:18px}
html[data-design] #modal .walletMovementIcon svg{width:19px;height:19px}
#topic[hidden]{display:none!important}
.phraseTopicButton{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:100%;min-width:0;text-align:left;padding-right:16px!important}
.phraseTopicButton>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.phraseTopicButton svg{width:18px;height:18px;flex:none}
#modal .phraseTopicsSheet{max-width:440px;width:100%;padding:22px;max-height:82dvh;display:flex;flex-direction:column;overflow:hidden}
.phraseTopicsSheet .sheetHeader{flex:none}.phraseTopicsSheet>.search{flex:none;margin:8px 0 12px;width:100%}
.phraseTopicOptions{overflow-y:auto;min-height:0;overscroll-behavior:contain;padding-bottom:4px}
.phraseTopicOptions h3{font-size:12px;color:var(--sub);margin:22px 0 6px}
.phraseTopicOptions button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;padding:14px 10px;min-height:48px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;color:var(--text);font-size:15px;line-height:1.4}
.phraseTopicOptions button[aria-pressed=true]{color:var(--green);font-weight:700}.phraseTopicOptions button svg{width:18px;height:18px;flex:none}
html[data-design] #modal.streakMode:has(#streakFriends[aria-selected="true"]){height:fit-content!important;min-height:0!important;max-height:calc(100dvh - 32px)}
html[data-design] #modal.streakMode:has(#streakFriends[aria-selected="true"]) :is(#modalBody,.streakSheet){height:auto!important;min-height:0!important}
html[data-design] #modal.streakMode:has(#streakFriends[aria-selected="true"]) .streakContent{flex:0 1 auto;padding-bottom:24px}

/* A useful travel companion, with a clear and readable search entry. */
#main .pocketGuideHero{display:flex;align-items:center;gap:15px;margin:6px 0 24px}
.pocketGuideMark{display:grid;place-items:center;flex:none;width:52px;height:58px;border-radius:13px 18px 18px 13px;background:var(--green);color:var(--bg);border-left:5px solid #148c7b;box-shadow:0 4px 0 #00000018}
.pocketGuideMark .uiIcon{width:30px;height:30px;stroke-width:2}
#main .pocketGuideHero h1{font-size:clamp(27px,7vw,34px);line-height:1.12;letter-spacing:-.7px;margin:0 0 8px;color:var(--text)}
#main .pocketGuideHero p{font-size:14px;line-height:1.5;color:var(--sub);margin:0;max-width:29ch}
html[data-design="2026"] #main>.pocketGuideSearch{width:100%;min-height:56px;font-size:16px;font-weight:500;padding:14px 16px 14px 47px;margin:0;border:2px solid var(--border);border-radius:16px;background-color:var(--surface2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%234bd9bd' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:15px center;color:var(--text);box-shadow:0 3px 0 #00000012}
html[data-design="2026"] #main>.pocketGuideSearch::placeholder{color:var(--sub);opacity:1}
html[data-design="2026"] #main>.pocketGuideSearch:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-color:var(--green)}
#main .pocketSearchHelp{font-size:12px;line-height:1.5;color:var(--sub);margin:9px 3px 18px}
/* Letter cards: sound controls belong to the character rather than a second card. */
html[data-design="2026"] #main .alphabetGrid{gap:12px}
html[data-design="2026"] #main .alphabetTile{border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:14px 12px 12px;box-shadow:0 3px 0 #00000014;overflow:hidden}
html[data-design="2026"] #main .alphabetInfo{padding:8px 0 12px;border:0;border-radius:0;background:transparent;box-shadow:none;min-height:205px;gap:6px}
html[data-design="2026"] #main .alphabetInfo>.thai{font-size:48px;line-height:1.5;margin:0;color:var(--text)}
html[data-design="2026"] #main .alphabetInfo>strong{font-size:15px;line-height:1.5}
html[data-design="2026"] #main .alphabetInfo>small{font-size:13px;line-height:1.5}
html[data-design="2026"] #main .alphabetInfo>em{font-size:12px;line-height:1.5;color:var(--sub)}
html[data-design="2026"] #main .alphabetAudio{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;width:100%;padding:10px;border:1px solid color-mix(in srgb,var(--green) 30%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--green) 10%,var(--surface));color:var(--green);box-shadow:none;font-size:13px;font-weight:750;letter-spacing:0;text-transform:none}
html[data-design="2026"] #main :is(.alphabetAudio,.toneListen,.vowelTile button)>.uiIcon{width:21px;height:21px;stroke-width:2.2;fill:none}
html[data-design="2026"] #main .alphabetAudio:active{transform:translateY(1px)}
/* Progress reads as one panel, with a quiet two-column record of actual totals. */
html[data-design="2026"] #main .profileProgressSummary{padding:22px 20px;border-radius:22px}
html[data-design="2026"] #main .profileProgressSummary>h2{padding:0;margin:0 0 20px;font-size:23px}
html[data-design="2026"] #main .profileProgressSummary>h2:before{display:none}
html[data-design="2026"] body:not(.pathHome) #main .profileProgressSummary .profileFoundation{background:transparent!important;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:0 0 19px;box-shadow:none}
html[data-design="2026"] #main .profileMetricGrid{gap:0;margin:4px 0 0}
html[data-design="2026"] body:not(.pathHome) #main .profileProgressSummary .profileMetric{background:transparent!important;border:0;border-radius:0;padding:18px 0;box-shadow:none;border-bottom:1px solid var(--border)}
html[data-design="2026"] #main .profileMetric:nth-child(even){padding-left:20px!important;border-left:1px solid var(--border)}
html[data-design="2026"] #main .profileMetric:nth-child(odd){padding-right:16px!important}
html[data-design="2026"] #main .profileMetric dt{font-size:13px;gap:8px;color:var(--sub)}
html[data-design="2026"] #main .profileMetric dt>span{width:24px;height:28px;border-radius:0;background:transparent!important}
html[data-design="2026"] #main .profileMetric dd{margin:8px 0 0 32px}
html[data-design="2026"] #main .profileMetric dd>strong{font-size:29px;color:var(--text)!important}
html[data-design="2026"] #main .profileSectionsSummary>summary{background:transparent;border:0;border-radius:0;padding:16px 0;font-size:14px}
/* The journey status dock is exclusive to Learn. */
html[data-design="2026"] body:not(.pathHome) .workspace>header{display:none!important}
html[data-design="2026"] body:not(.pathHome) .workspace #main{padding-top:24px!important}
html[data-design="2026"] body:not(.pathHome) .workspace #main .profileProgressSummary :is(.profileMetric,.profileFoundation){background:transparent!important}
html[data-design="2026"] body:not(.pathHome) .workspace #main .profileProgressSummary .profileMetric dt>span{background:transparent!important;width:24px;height:26px;border-radius:0}
html[data-design="2026"] body:not(.pathHome) .workspace #main .profileProgressSummary .profileMetric dd>strong{color:var(--text)!important}
html[data-design="2026"] .workspace #main .profileProgressSummary .profileSectionsSummary>summary{background:transparent!important;box-shadow:none;border:0}