.pocketQuickSituations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 20px}.pocketQuickSituations[hidden]{display:none}
#main .pocketQuickSituations button{display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:center;min-height:78px;padding:10px 5px;border:1px solid var(--border);border-radius:15px;background:transparent;color:var(--text);font-size:12px;font-weight:650;line-height:1.4}
.pocketQuickSituations svg{width:23px;height:23px;color:var(--green)}
html[data-design] #main .pocketPhraseOpen{display:block;text-align:left;background:transparent;border:0;box-shadow:none;padding:0;margin:0;color:var(--text);font-size:25px;line-height:1.6;min-height:44px;font-weight:600;overflow-wrap:anywhere;max-width:100%}
#main .phraseactions .pocketTrain{color:var(--green)}
#modal :is(.pocketPhraseSheet,.pocketSpeechSheet){padding:24px;max-width:560px;min-height:0;max-height:calc(100dvh - 32px);overflow-y:auto}
#modal:has(:is(.pocketPhraseSheet,.pocketSpeechSheet)){height:fit-content!important;min-height:0!important;max-height:calc(100dvh - 24px);margin:auto;inset:0;border-radius:24px}
#modal:has(:is(.pocketPhraseSheet,.pocketSpeechSheet)) #modalBody{height:auto!important;min-height:0!important}
#modal .pocketLargePhrase{padding:26px 0;text-align:center}
#modal .pocketLargePhrase>.thai{display:block;font-size:clamp(35px,9vw,60px);line-height:1.6;overflow-wrap:anywhere;user-select:text}
.pocketLargePhrase>p,.pocketSpeechPhrase>p{font-size:18px;line-height:1.6;color:var(--reading);font-weight:650;margin:12px 0}
.pocketLargePhrase>h3{font-size:20px;line-height:1.5;color:var(--text);margin:12px 0 0;font-weight:500}
#modal :is(.pocketPhraseSheet,.pocketSpeechSheet) .audioControls{display:flex;justify-content:center;gap:10px;margin:0 0 22px}
.pocketPhraseActions{display:grid;gap:12px}.pocketPhraseActions button{justify-content:center;min-height:50px;width:100%;gap:10px;font-size:15px;letter-spacing:0;text-transform:none}
.pocketPhraseActions svg,#pocketRecord svg{width:22px;height:22px}
.pocketSpeechPhrase{text-align:center;margin:20px 0}.pocketSpeechPhrase>.thai{display:block;font-size:30px;line-height:1.6;overflow-wrap:anywhere}.pocketSpeechPhrase>small{display:block;font-size:16px;color:var(--sub)}
.pocketSpeechPrompt,#pocketSpeechStatus{font-size:14px;color:var(--sub);line-height:1.6;margin:16px 0}
#pocketRecord{width:100%;gap:10px;justify-content:center;font-size:15px;text-transform:none;letter-spacing:0;min-height:52px}
.pocketSpeechLimit{display:block;font-size:12px;line-height:1.6;color:var(--sub);margin-top:18px}
#pocketSpeechResult audio{display:block;width:100%;margin:18px 0}.speechContour{background:var(--surface2);border:1px solid var(--border);border-radius:16px;margin:16px 0;padding:12px}.speechContour svg{width:100%;height:auto;display:block}.speechContour p{display:flex;gap:20px;font-size:12px;margin:0}.speechContour p>span:first-child{color:#4cdbba}.speechContour p>span:last-child{color:#e9ba73}
#pocketSpeechResult ul{padding-left:20px;font-size:14px;line-height:1.6;color:var(--text)}#pocketSpeechResult li+li{margin-top:10px}

.pocketSpeechPrivacy{display:block;font-size:11px;line-height:1.5;color:var(--sub);margin-top:8px}.pocketSpeechVerdict{margin-top:18px;padding:20px;border:1px solid var(--border);border-radius:20px;background:var(--surface2);text-align:center}.speechVerdictIcon{display:inline-flex;padding:10px;border-radius:50%;background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}.speechVerdictIcon svg{width:27px;height:27px}.pocketSpeechVerdict h3{margin:10px 0 6px;font-size:24px}.pocketSpeechVerdict>p{font-size:14px;line-height:1.6;margin:0 0 10px}.pocketSpeechVerdict.isCorrect h3{color:var(--green)}.pocketSpeechVerdict small{color:var(--sub);font-size:12px}.pocketSpeechVerdict .thai{font-size:24px;line-height:1.6;overflow-wrap:anywhere}.speechFocus{border-top:1px solid var(--border);padding-top:14px;margin-top:14px}.speechFocus strong{display:block}.speechFocus p{font-size:14px;line-height:1.6;margin:10px 0 0}#pocketRecord.recording{box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 18%,transparent)}
html[data-design] #main #phraseList .pocketPhraseRow{display:grid;grid-template-columns:36px minmax(0,1fr) 40px;align-items:start;gap:10px;padding:18px 12px}#phraseList .pocketFavorite{grid-column:1;grid-row:1;align-self:start;min-width:36px;min-height:44px;margin:0;padding:6px;font-size:23px}#phraseList .pocketPhraseRow>div:first-of-type{grid-column:2;min-width:0}#phraseList .pocketPhraseRow>.phraseactions{grid-column:3;display:flex;flex-direction:column;align-items:center;gap:10px}#phraseList .pocketPhraseRow .phraseactions>button{min-width:40px;min-height:44px;padding:8px}html[data-design] #main #phraseList .pocketPhraseRow .pocketPhraseOpen{font-size:23px;line-height:1.6}#phraseList .pocketInlineSpeech{grid-column:2/-1;padding-top:4px}.pocketInlineStatus:empty{display:none}.pocketInlineStatus{font-size:13px;color:var(--sub);line-height:1.6;margin:8px 0}.pocketInlineVerdict{padding:13px 14px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);text-align:left}.pocketInlineVerdict>strong{display:flex;align-items:center;gap:8px;font-size:15px}.pocketInlineVerdict>strong svg{width:20px;height:20px;flex:none}.pocketInlineVerdict.isCorrect>strong{color:var(--green)}.pocketInlineVerdict>p{font-size:13px!important;line-height:1.6;margin:7px 0 0!important;color:var(--sub)}.pocketInlineVerdict .thai{font-size:18px;font-weight:600;color:var(--text)}.pocketInlineVerdict>small{display:block;font-size:12px;color:var(--sub);line-height:1.6;margin-top:7px}.pocketTrain.recording{color:var(--green);border-color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent);border-radius:13px}.pocketVoiceInfo{font-size:12px;line-height:1.7;color:var(--sub)}
#phraseList .pocketPhraseRow>.phraseContextIcon{display:none!important}#phraseList .pocketPhraseRow>div:first-of-type,#phraseList .pocketPhraseRow>.phraseactions{grid-row:1}

#main .pocketUsage,.pocketPhraseSheet .pocketUsage{display:block;color:var(--sub);font-size:12px;line-height:1.5;margin:7px 0 0}.pocketPhraseSheet .pocketUsage{margin:0 0 16px;text-align:center}

/* Three equal filter choices, followed by a full-width situation picker. */
html[data-design] body #main .filters:has(#choosePhraseTopic){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 20px;padding:0;overflow:visible;align-items:stretch}
html[data-design] body #main .filters:has(#choosePhraseTopic)>.chip{box-sizing:border-box;min-width:0;min-height:44px;margin:0;padding:10px 8px;font-size:13px;line-height:1.35;display:flex;align-items:center;justify-content:center;gap:8px}
html[data-design] body #main .filters>#topic[hidden]{display:none!important}
html[data-design] body #main .filters:has(#choosePhraseTopic)>button#choosePhraseTopic{grid-column:1/-1;width:100%;max-width:none;justify-content:space-between;padding:12px 14px;text-align:left;white-space:normal}
html[data-design] body #main .filters #choosePhraseTopic>span{min-width:0;overflow-wrap:anywhere;white-space:normal;overflow:visible;text-overflow:clip}
html[data-design] body #main .filters #choosePhraseTopic>svg{width:18px;height:18px;flex:0 0 18px}
html[data-design] body #main .pocketQuickSituations{gap:8px;margin:18px 0 18px;align-items:stretch}
html[data-design] body #main .pocketQuickSituations button{display:grid;grid-template-rows:24px minmax(34px,auto);align-content:center;justify-items:center;align-items:center;gap:8px;min-height:88px;padding:12px 4px;box-sizing:border-box}
html[data-design] body #main .pocketQuickSituations button>span{align-self:start;line-height:1.4;min-width:0}