/* Quiet account settings and expressive, readable character choices. */
.accountPanel{display:flex;gap:20px;align-items:center;justify-content:space-between;margin:18px 0}.accountPanel p{margin:8px 0 0}.accountIdentity{display:flex;align-items:center;gap:14px;min-width:0}.accountIdentity>.uiIcon{width:30px;height:30px;color:var(--primary,#25b5bd);flex-shrink:0}.accountIdentity>div{min-width:0}.accountIdentity strong{display:block;overflow-wrap:anywhere}.accountIdentity small{display:block;margin-top:5px;color:var(--muted)}.accountSheet{max-width:510px;margin:auto}.accountSheet form{display:grid;gap:10px}.accountSheet label{font-weight:800;margin-top:10px}.accountSheet input{width:100%;min-width:0}.accountSheet form small{color:var(--muted)}.accountSheet .primary{width:100%;margin-top:12px}.accountSheet #accountError{color:#ed8c99;margin:0;min-height:24px}.accountLinks{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px}.recoveryCode{display:block;overflow-wrap:anywhere;user-select:all;padding:20px;background:var(--bg);border:2px solid var(--line,#31515e);border-radius:16px;font-size:18px;line-height:1.7;margin:20px 0}.accountSheet>#savedRecovery{margin-top:16px}.profileEditor{max-width:570px;margin:auto}.profileEditor>.primary{width:100%}.portraitField{border:0;padding:0;margin:26px 0}.portraitField legend{font-weight:800;margin-bottom:14px}.portraitPicker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.portraitPicker button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:2px solid var(--line,#31515e);border-radius:20px;background:var(--surface,#162e3a);padding:16px 8px 14px;min-width:0;min-height:126px;box-shadow:0 3px 0 var(--line,#31515e)}.portraitPicker button.selected{border-color:#56d0d3;background:color-mix(in srgb,#25b5bd 12%,var(--surface,#162e3a));box-shadow:0 3px 0 #299a9f}.portraitPicker .characterAvatar{width:68px;height:68px;display:block}.portraitPicker strong{font-size:14px}.portraitCheck{position:absolute;right:6px;top:6px;width:23px;height:23px;border-radius:50%;background:#58d0cb;color:#104653;display:none;align-items:center;justify-content:center}.portraitCheck .uiIcon{width:15px;height:15px}.selected>.portraitCheck{display:flex}.profileAvatar .characterAvatar{width:100%;height:100%;object-fit:contain}.profile>span .characterAvatar,.stats .avatar .characterAvatar{width:100%;height:100%;object-fit:contain}.friendAvatar .characterAvatar{width:48px;height:48px}.trailStop.isLocked .trailDisc{background:var(--surface,#18303b);color:#698591;box-shadow:0 6px 0 #28434e}.skipExamIntro{max-width:520px;margin:auto;text-align:center}.skipExamIntro .sheetHeader{text-align:left}.examEmblem{display:grid;place-items:center;width:90px;height:90px;background:#173f4d;border-radius:30px;margin:20px auto;color:#65d5ce}.examEmblem .uiIcon{width:48px;height:48px}.examFacts{display:grid;gap:12px;padding:24px 16px;margin:20px 0;border:2px solid var(--line,#31515e);border-radius:20px}.skipExamIntro>.primary{width:100%}.examFacts small{color:var(--muted)}.coinBalance>span .uiIcon{width:48px;height:48px}.wallet .uiIcon{color:#ffcc73}.stats [data-ui-icon=flame] .uiIcon{color:#ff9667}.stats [data-ui-icon=bolt] .uiIcon{color:#7fd8e3}
@media(max-width:600px){.accountPanel{display:grid;gap:16px}.accountPanel>.primary{width:100%}.accountIdentity{gap:12px}.accountLinks{justify-content:center}.portraitPicker{gap:10px}.portraitPicker button{padding:12px 5px;min-height:116px;border-radius:16px}.portraitPicker .characterAvatar{width:60px;height:60px}.accountSheet .sheetHeader h2{font-size:25px}.accountSheet .sheetHeader{gap:12px}.accountSheet .close{flex-shrink:0}}

/* Small illustrations, with a short celebratory beat rather than constant motion. */
.illustratedIcon{overflow:visible;stroke:none!important;stroke-width:0!important;flex-shrink:0;filter:drop-shadow(0 1px 0 #00000014)}
.pathHome .wallet>.illustratedIcon{width:29px;height:29px}.pathMissionButton>.illustratedIcon{width:29px;height:29px}.pathHome .stats>span:has(#streak) .illustratedIcon{width:27px;height:29px}
nav [data-page=review] .illustratedIcon{width:30px!important;height:30px!important;filter:saturate(.8)}nav [data-page=review][aria-current=page] .illustratedIcon{filter:none}
.iconFlameBody{transform-origin:50% 95%}.iconTrophyCup{transform-origin:50% 75%}.iconTwinkle,.iconCoinShine{transform-box:fill-box;transform-origin:center}
.pathHome .iconFlameBody{animation:sabaiFlame 7s ease-in-out infinite}.pathHome .iconEmber{animation:sabaiEmber 7s ease-out infinite}.pathMissionButton .iconTrophyCup{animation:sabaiCup 11s ease-in-out infinite}.pathMissionButton .iconTwinkle{animation:sabaiTwinkle 11s ease-in-out infinite}.wallet .iconCoinShine{animation:sabaiTwinkle 9s ease-in-out infinite}
.wallet:hover .iconCoinBody,.wallet:focus-visible .iconCoinBody{animation:sabaiCoin .55s ease-in-out}.pathMissionButton:hover .iconTrophyCup{animation:sabaiCupHover .55s ease-in-out}.iconPracticeWeight{transform-origin:center}nav [data-page=review]:active .illustratedIcon{animation:sabaiPractice .35s ease-out}
@keyframes sabaiFlame{0%,72%,100%{transform:scale(1)}77%{transform:scale(.96,1.06) rotate(-3deg)}83%{transform:scale(1.04,.97) rotate(2deg)}90%{transform:scale(1)}}
@keyframes sabaiEmber{0%,72%,100%{opacity:.7;transform:translateY(0)}82%{opacity:0;transform:translateY(-4px)}83%{opacity:0;transform:translateY(3px)}94%{opacity:.7;transform:translateY(0)}}
@keyframes sabaiCup{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-8deg)}90%{transform:rotate(6deg)}94%{transform:rotate(-3deg)}}
@keyframes sabaiCupHover{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}65%{transform:rotate(8deg)}}
@keyframes sabaiTwinkle{0%,78%,100%{opacity:.7;transform:scale(.8)}85%{opacity:1;transform:scale(1.3)}92%{opacity:1;transform:scale(1)}}
@keyframes sabaiCoin{0%,100%{transform:translateY(0)}40%{transform:translateY(-2px) rotate(-6deg)}70%{transform:translateY(0) rotate(4deg)}}
@keyframes sabaiPractice{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-6deg)}}
@media(prefers-reduced-motion:reduce){.illustratedIcon *,.illustratedIcon{animation:none!important;transition:none!important}}
.nativeWidgetSetup{display:flex;gap:12px;justify-content:center;width:100%;margin:0 0 20px}.widgetLearningCard{max-width:500px;margin:auto;text-align:center}.widgetLearningCard>.thai{font-size:46px;line-height:1.6;margin-top:24px;overflow-wrap:anywhere}.widgetLearningCard>.wordRoman{font-size:22px;color:var(--reading)}.widgetLearningCard>.audioControls{justify-content:center;margin:22px 0}.widgetLearningCard>.primary{width:100%;margin-top:22px}.widgetLearningCard .wordGlossary{text-align:left}

#modal .accountSignOutStatus,#main .accountSignOutStatus{margin:12px 0 16px;font-size:13px;line-height:1.5;color:var(--sub);text-align:left}