@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/ja/fonts/Nunito-Vietnamese.ttf') format('truetype')}
:root{font-family:'Nunito',Arial,sans-serif;color:#192239;background:#f4f6fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffb836;outline-offset:5px}.app{max-width:1120px;margin:auto;padding:0 48px}header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfe4ee}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;font-size:23px;letter-spacing:-.8px}.brand-mark{display:grid;place-items:center;background:var(--accent);color:white;width:36px;height:36px;border-radius:10px;font-size:29px;padding-bottom:6px;letter-spacing:-3px;padding-right:3px}.brand-dot{font-weight:400;color:#c4c9d4;margin:0 5px}.brand-small{font-size:12px;letter-spacing:1.3px;font-weight:600;color:#737d92}.reset{display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid #d8deea;border-radius:9px;color:#3b465c;background:transparent;font-size:14px;font-weight:600}.reset:hover{background:#e7ebf4}.reset svg{width:17px;height:17px}main{padding-top:47px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:31px;gap:16px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:700;color:var(--accent);margin:0 0 13px}h1{font-family:'Nunito',Arial,sans-serif;font-size:clamp(25px,3.2vw,36px);letter-spacing:-1.2px;line-height:1.35;margin:0;font-weight:800}.guide{color:#69748a;font-size:15px;line-height:1.6;margin:13px 0 0}.counter{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:68px}.counter strong{font-family:'Nunito',Arial,sans-serif;font-size:36px;font-weight:500;letter-spacing:-1.8px;font-variant-numeric:tabular-nums}.counter span{font-size:12px;color:#768094}.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card{height:390px;perspective:1400px;min-width:0}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .52s cubic-bezier(.2,.75,.25,1)}.card.flipped .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;padding:28px 30px;border:0;display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;overflow:hidden}.covered{background:var(--accent);color:white;text-align:left;box-shadow:0 10px 24px var(--accent-shadow)}.card:nth-child(2) .covered{background:var(--accent-deep)}.covered:hover{filter:brightness(1.055)}.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;letter-spacing:1px;font-weight:600}.covered .card-top{color:#d3dcff}.tiny-loop{font-size:26px;line-height:1}.back-center{display:flex;flex-direction:column;align-items:center;gap:12px}.large-loop{font-family:Georgia,serif;font-size:112px;line-height:1.2;letter-spacing:-8px;font-weight:400;color:#fff}.flip-label{font-size:15px;font-weight:500;color:var(--accent-soft)}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px}.covered .card-bottom{color:#c6d2ff}.card:nth-child(2) .card-bottom{color:#bdc9e3}.card-bottom>span:last-child:not(.audio-note){font-size:20px}.revealed{transform:rotateY(180deg);background:#fff;border:1px solid #dbe2f0;box-shadow:0 8px 20px #21305308;text-align:center}.revealed .card-top{color:#79849a;letter-spacing:.6px}.group-label{padding:6px 9px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:11px;letter-spacing:0}.word-content{margin:auto 0;min-width:0}.word-content h2{font-family:'Nunito',Arial,sans-serif;font-size:clamp(27px,4vw,43px);letter-spacing:-1.2px;line-height:1.2;margin:9px 0 9px;overflow-wrap:anywhere;font-weight:800}.ipa{font-family:'Nunito','Arial',sans-serif;color:#758099;font-size:18px;line-height:1.4;margin:0 0 13px;letter-spacing:.5px}.audio{display:inline-grid;place-items:center;border:1px solid #e4e9fc;background:var(--accent-soft);border-radius:50%;height:43px;width:43px;color:var(--accent);transition:background .15s}.audio:hover{background:#dfe6ff}.audio svg{width:21px;height:21px}.audio.speaking{background:var(--accent);color:white}.meaning-rule{height:1px;width:45px;background:#e3e7ee;margin:16px auto}.meaning{font-size:19px;line-height:1.45;font-weight:500;margin:0 auto 9px;max-width:335px;text-wrap:pretty}.revealed .card-bottom{color:#8a93a4!important;font-size:10px;letter-spacing:.8px}.audio-note{font-size:11px;letter-spacing:0}.below-cards{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#738099;margin:20px 0 0;gap:10px}.keyboard-hint{font-size:12px;color:#7b869a}kbd{font:inherit;display:inline-grid;place-items:center;border:1px solid #d9dfeb;border-bottom-width:2px;border-radius:4px;width:21px;height:22px;background:white;color:#5b6680;margin-left:2px}.speech-status{min-height:18px;color:#9c5725;font-size:13px;margin:9px 0}.distribution{margin:20px auto 0;max-width:620px}.distribution-title{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#69748a}.distribution-title span:first-child{font-weight:600;color:#47546c}.ratio-bar{display:flex;gap:4px;margin:13px 0 14px;height:5px;overflow:hidden;border-radius:5px}.ratio-bar span:nth-child(1){width:50%;background:var(--accent)}.ratio-bar span:nth-child(2){width:30%;background:#7e96e9}.ratio-bar span:nth-child(3){width:20%;background:#c5cee7}.ratio-labels{display:flex;justify-content:space-between;gap:14px}.ratio-labels>div{display:flex;align-items:center;gap:7px;font-size:12px;color:#7b8496;flex-wrap:wrap}.ratio-labels strong{font-size:14px;color:#3a475e}.ratio-labels i{width:6px;height:6px;border-radius:2px;background:var(--accent)}.ratio-labels>div:nth-child(2) i{background:#7e96e9}.ratio-labels>div:nth-child(3) i{background:#c5cee7}footer{margin-top:49px;padding:22px 0 25px;display:flex;justify-content:space-between;gap:15px;border-top:1px solid #dfe4ee;font-size:12px;color:#8590a3;line-height:1.7}footer a{text-underline-offset:3px;text-decoration-color:#b9c2d2}.mobile-break{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1450px){main{padding-top:65px}.card{height:415px}.intro{margin-bottom:37px}.distribution{margin-top:26px}footer{margin-top:61px}}@media(max-width:700px){.app{padding:0 22px}header{height:82px}.brand-small,.brand-dot{display:none}.intro{margin-bottom:25px;align-items:flex-end}main{padding-top:30px}.eyebrow{font-size:10px;letter-spacing:1.4px}.guide{font-size:14px}.cards{gap:13px}.card{height:410px}.face{padding:19px 15px;border-radius:15px}.card-top{font-size:10px;letter-spacing:.4px}.covered .card-bottom{font-size:10px;line-height:1.5}.large-loop{font-size:85px}.flip-label{font-size:13px}.word-content h2{font-size:26px;letter-spacing:-.7px}.ipa{font-size:15px;overflow-wrap:anywhere}.meaning{font-size:16px;line-height:1.4}.revealed .card-top{flex-wrap:wrap;justify-content:center}.group-label{font-size:10px}.revealed .card-bottom{justify-content:center}.revealed .card-bottom>span:first-child{display:none}.counter strong{font-size:30px}.counter{min-width:44px}.keyboard-hint{display:none}.below-cards{justify-content:center;font-size:12px}.ratio-labels{gap:6px}.ratio-labels>div{gap:5px}.ratio-labels>div>span{flex-basis:100%;font-size:11px}.distribution{margin-top:18px}.distribution-title{font-size:12px}footer{margin-top:35px;font-size:11px;flex-direction:column;align-items:center;gap:5px}.mobile-break{display:block}h1{font-size:27px;letter-spacing:-.7px}.speech-status{text-align:center}}@media(max-width:380px){.app{padding:0 14px}.face{padding:17px 10px}.card{height:435px}.meaning{font-size:15px}.word-content h2{font-size:24px}.large-loop{font-size:72px}}@media(prefers-reduced-motion:reduce){.card-inner{transition:none}}@media(min-resolution:1dppx){.face{outline:1px solid transparent}}
/* Account and progress: retain the original two-card working surface. */
.intro{align-items:flex-start;gap:28px;margin-bottom:14px}.intro>div:first-child{min-width:0;flex:1}.learner{display:flex;align-items:center;gap:11px;margin-top:20px;flex-wrap:wrap}.avatar{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;background:#e4eaff;color:#304ee0;border:3px solid white;border-radius:50%;font-size:14px;font-weight:800;box-shadow:0 1px 4px #23365612}.learner-details{display:flex;flex-direction:column;gap:6px;min-width:0}.learner-name{font-size:15px;font-weight:700;overflow-wrap:anywhere;max-width:350px}.learner-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.achievement{font-size:12px;font-weight:600;color:#7a8497;background:#e9edf4;border:1px solid #e0e5ee;padding:4px 8px;border-radius:6px;white-space:nowrap}.achievement.earned{color:#235d48;background:#e8f4eb;border-color:#cfe8d5}.rank-tag{font-size:12px;color:#69768d}.account-link{font-size:12px;color:#64718b;text-underline-offset:3px;margin-left:3px}.account-link[hidden]{display:none}.counter{width:210px;min-width:210px;align-items:stretch;padding-top:30px;gap:10px}.count-line{display:flex;gap:10px;align-items:baseline}.count-line strong{font-size:38px;font-weight:600;letter-spacing:-1.4px}.count-line>span{font-size:12px;color:#788298}.goal-caption{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}.goal-caption span{font-size:12px}.goal-caption span:first-child{font-weight:600;color:#485977}.goal-progress{height:7px;overflow:hidden;background:#e0e6f3;border-radius:8px}.goal-progress>span{display:block;height:100%;width:0;background:var(--accent);border-radius:8px;transition:width .45s ease}.milestone-track{display:flex;justify-content:space-between;gap:5px}.milestone-track span{font-size:11px;color:#8b96aa;position:relative;padding-top:10px}.milestone-track span:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);height:4px;width:4px;border-radius:50%;background:#c8d0e1}.milestone-track .unlocked{color:var(--accent);font-weight:700}.milestone-track .unlocked:before{background:var(--accent)}.counter .session-count{font-size:12px;color:#8c95a8;text-align:right}.progress-status{font-size:12px;color:#7c889e;min-height:19px;margin:0 0 15px;line-height:1.5}.progress-status.pending{color:#9a6e28}.achievement-message{padding:12px 15px;background:#e8f4eb;border:1px solid #cfe8d5;border-radius:10px;margin:0 0 18px;color:#285b44;font-size:14px;line-height:1.5}.achievement-message[hidden]{display:none}.guide{margin-top:17px}.reset{flex-shrink:0}@media(max-width:850px){.intro{flex-wrap:wrap}.intro>div:first-child{flex-basis:100%}.counter{padding-top:0;width:100%;min-width:0;display:grid;grid-template-columns:140px 1fr;column-gap:22px;row-gap:8px;align-items:center}.count-line{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;gap:1px}.count-line strong{font-size:34px}.goal-caption{grid-column:2;grid-row:1}.goal-progress{grid-column:2;grid-row:2}.milestone-track{grid-column:2;grid-row:3}.counter .session-count{grid-column:1/3;text-align:left}.intro{gap:21px}.learner-name{max-width:100%}.progress-status{margin-top:0}}@media(max-width:700px){main{padding-top:25px}.learner{margin-top:17px;gap:9px}.learner-name{font-size:14px}.learner-tags{gap:6px}.rank-tag{font-size:11px}.achievement{font-size:11px}.account-link{font-size:11px}.counter{grid-template-columns:100px 1fr;column-gap:16px}.goal-caption span{font-size:11px}.count-line>span{font-size:11px}.guide{font-size:13px}.intro{margin-bottom:12px}.learner-details{max-width:calc(100% - 55px)}.progress-status{font-size:11px}.avatar{height:40px;width:40px}}
.header-actions{display:flex;gap:9px;align-items:center}.ranking-button{background:#e8edff;border-color:#dce3ff;color:var(--accent)}.ratio-form{margin-top:22px;border-top:1px solid #e0e6f0;padding-top:15px}.ratio-form>p{font-size:13px;color:#6a7790;line-height:1.6;margin:0 0 13px}.ratio-form fieldset{padding:0;margin:0;border:0}.ratio-form fieldset:disabled{opacity:.48}.ratio-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.ratio-inputs label{font-size:12px;color:#6b7b94;display:flex;flex-direction:column;gap:7px}.ratio-inputs label>span{display:flex;align-items:center;gap:8px;background:white;border:1px solid #d9e1ef;border-radius:8px;padding:0 12px}.ratio-inputs input{width:100%;padding:10px 0;border:0;background:none;color:#243958;font:600 16px 'Nunito',Arial;min-width:0}.ratio-actions{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:13px;color:#64738b}.ratio-actions button,.ranking-pages button{background:white;color:var(--accent);border:1px solid #d7def0;border-radius:8px;padding:9px 14px;font:600 13px 'Nunito',Arial}.ratio-actions button:disabled,.ranking-pages button:disabled{opacity:.4;cursor:default}.ratio-actions .invalid{color:#b34d36}.ratio-form #ratio-status{margin-top:12px;font-size:12px;min-height:18px}dialog{border:0;box-shadow:0 24px 100px #14244c40;color:#192239;border-radius:22px;padding:30px;max-height:88dvh;overflow:auto}dialog::backdrop{background:#14203999;backdrop-filter:blur(5px)}.ranking-dialog{width:min(600px,calc(100% - 28px))}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialog-heading h2{font-family:'Nunito',Arial;font-size:26px;letter-spacing:-.6px;margin:0}.dialog-close{border:0;background:#edf1f9;color:#687792;flex-shrink:0;width:35px;height:35px;border-radius:50%;font-size:25px;line-height:1}.ranking-description,.ranking-footnote{color:#7a879c;font-size:13px;line-height:1.6}.ranking-table{width:100%;border-collapse:collapse;font-size:14px}.ranking-table th{font-size:12px;color:#8591a4;font-weight:500;text-align:left;padding:14px 10px;border-bottom:1px solid #e2e8f3}.ranking-table th:last-child,.ranking-table td:last-child{text-align:right}.ranking-table td{padding:15px 10px;border-bottom:1px solid #eef1f7}.ranking-table td:first-child{white-space:nowrap;color:#5d6d87;font-size:13px}.ranking-table strong{display:block;font-weight:600;overflow-wrap:anywhere}.ranking-table small{display:block;font-size:11px;color:#8490a4;margin-top:6px}.ranking-table td:last-child{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}.my-ranking{background:var(--accent-soft)}.ranking-table-wrap{max-height:48dvh;overflow:auto}.ranking-pages{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#7a879c;margin-top:18px}.ranking-pages>div{display:flex;gap:6px}#ranking-status{font-size:13px;color:#96702f;line-height:1.5}.milestone-dialog{width:min(420px,calc(100% - 30px));text-align:center;padding:34px 30px 30px;background:linear-gradient(160deg,#fff 50%,#edf2ff)}.celebration-sparkles{font-size:35px;letter-spacing:15px;color:#e8aa32;position:absolute;left:0;right:0;top:24px;pointer-events:none}.milestone-medal{font-size:72px;line-height:1.4;margin:15px auto 17px;filter:drop-shadow(0 7px 10px #dca83c25)}.milestone-eyebrow{color:#8d6e27;font-weight:700;letter-spacing:1.8px;font-size:11px;margin:0 0 10px}.milestone-dialog h2{font-family:'Nunito',Arial;font-size:31px;letter-spacing:-1px;margin:0 0 16px}.milestone-subtitle{font-size:14px;color:#7a88a0;margin:0 0 7px}.milestone-dialog strong{font-family:'Nunito',Arial;font-size:36px;color:var(--accent);font-weight:800;display:block}.milestone-dialog #milestone-description{font-size:15px;color:#6b7890;line-height:1.7;margin:18px 0 24px}.milestone-dialog button{display:block;width:100%;padding:14px;border:0;border-radius:11px;background:var(--accent);color:white;font-size:15px;font-weight:600}.milestone-dialog[open]{animation:celebrate-in .35s cubic-bezier(.2,.85,.2,1)}@keyframes celebrate-in{from{opacity:0;transform:translateY(20px) scale(.93)}to{opacity:1;transform:none}}@media(max-width:700px){.header-actions{gap:6px}.header-actions .reset{font-size:12px;padding:9px 11px;gap:5px}.brand{font-size:20px}.brand-mark{width:31px;height:31px;font-size:26px}.ratio-inputs{gap:9px}.ratio-inputs label{font-size:11px}.ratio-inputs label>span{padding:0 8px}.ranking-dialog{padding:23px 17px}.dialog-heading h2{font-size:23px}.ranking-table td,.ranking-table th{padding:13px 6px}.ranking-table{font-size:13px}.ranking-table td:first-child{font-size:12px}.ranking-pages{gap:6px}.ranking-pages button{padding:8px 10px}.ranking-dialog .eyebrow{font-size:10px}}@media(prefers-reduced-motion:reduce){.milestone-dialog[open]{animation:none}}
@media(max-width:380px){.brand{font-size:18px;gap:7px}.brand-mark{width:28px;height:28px}.header-actions .reset{font-size:11px;padding:8px 9px}}

/* Level buttons and compact two-switch toolbar. */
.level-selector{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:25px 0 12px}.level-selector button{border:1.5px solid #c9d3e8;background:transparent;color:#60708c;min-width:86px;min-height:48px;padding:12px 17px;border-radius:28px;font-size:14px;font-weight:700;transition:background .15s,color .15s}.level-selector button:hover{border-color:var(--accent);color:var(--accent)}.level-selector button.selected{background:var(--accent);color:white;border-color:var(--accent);box-shadow:0 5px 16px var(--accent-shadow)}.level-progress{text-align:center;color:#738099;font-size:13px;margin:0 0 21px;line-height:1.6}.study-surface{position:relative}.quick-settings{position:absolute;right:-65px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;border:1px solid #dbe2f0;border-radius:28px;background:#fff;padding:7px;box-shadow:0 5px 20px #14244c08;gap:5px}.quick-settings button{width:42px;min-height:45px;border:0;border-radius:22px;background:transparent;color:#64718b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}.quick-settings button:hover{background:#edf1fb;color:var(--accent)}.quick-settings svg{width:21px;height:21px}#voice-mode{font-size:10px;font-weight:700}#theme-icon{font-size:26px}.ratio-inputs b{font-weight:400}.meaning{font-size:clamp(15px,1.8vw,19px);max-height:130px;overflow:auto}
[data-theme="dark"]{color-scheme:dark;background:#101827;color:#e4eaf8}[data-theme="dark"] .revealed,[data-theme="dark"] dialog,[data-theme="dark"] .quick-settings{background:#1b263a;color:#edf2ff;border-color:#34425a}[data-theme="dark"] .milestone-dialog{background:linear-gradient(150deg,#202c43,#18233b)}[data-theme="dark"] header,[data-theme="dark"] footer,[data-theme="dark"] .ratio-form,[data-theme="dark"] .ranking-table td,[data-theme="dark"] .ranking-table th{border-color:#34425a}[data-theme="dark"] :is(.guide,.level-progress,.progress-status,.rank-tag,.account-link,.ipa,.ratio-form>p,.distribution-title,.ratio-labels>div,.ratio-inputs label,.below-cards,.ranking-description,.ranking-footnote,.ranking-pages,.milestone-subtitle,#milestone-description,.counter span){color:#a9b7cf}[data-theme="dark"] :is(.distribution-title span:first-child,.ratio-labels strong,.goal-caption span:first-child){color:#d2ddf0}[data-theme="dark"] :is(.reset,.level-selector button){color:#b8c7e1;border-color:#43536e}[data-theme="dark"] .level-selector button.selected{background:var(--accent-bright);border-color:var(--accent-bright);color:white}[data-theme="dark"] :is(.audio,.ranking-button,.group-label,.avatar,.dialog-close,.achievement,.my-ranking){background:var(--accent-dark-soft);color:var(--accent-light);border-color:#3b5075}[data-theme="dark"] .achievement.earned{background:#183b32;color:#a8e3c4;border-color:#365d50}[data-theme="dark"] .avatar{border-color:#344665}[data-theme="dark"] :is(.ratio-inputs label>span,.ratio-actions button,.ranking-pages button,kbd){background:#1b263a;color:var(--accent-light);border-color:#40516d}[data-theme="dark"] .ratio-inputs input{color:#e4eaf8}[data-theme="dark"] .goal-progress{background:#293956}[data-theme="dark"] :is(.eyebrow,.ranking-table td:last-child,.milestone-dialog strong,.milestone-track .unlocked){color:var(--accent-light)}[data-theme="dark"] .quick-settings button{color:#bfcee6}[data-theme="dark"] .quick-settings button:hover{background:#2c3b57}[data-theme="dark"] .audio.speaking{background:var(--accent-bright);color:white}
@media(max-width:1200px){.quick-settings{position:static;transform:none;flex-direction:row;width:max-content;margin:0 0 12px auto;padding:4px;gap:4px}.quick-settings button{min-height:42px;width:44px}.quick-settings #voice-toggle{flex-direction:row;width:70px;gap:6px}.quick-settings #voice-mode{font-size:12px}}
@media(max-width:700px){.level-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}.level-selector button{min-width:0;min-height:44px;padding:10px;font-size:14px}.level-progress{font-size:12px;margin-bottom:10px}.card{height:430px}.meaning{max-height:155px}.quick-settings{margin-bottom:12px}}
/* Promotion exams share the quiet card palette. */
.level-selector button.locked{border-style:dashed;opacity:.65}.level-selector button.locked::after{content:' 🔒';font-size:11px}.promotion{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 22px;font-size:13px;color:#69748a}.promotion button{border:1px solid #cfd9ff;border-radius:10px;background:#e8edff;color:var(--accent);padding:10px 15px;font-size:14px;font-weight:700}.promotion button:disabled{opacity:.5;cursor:wait}.exam-dialog{width:min(620px,calc(100% - 28px));padding:30px}.exam-dialog [hidden]{display:none!important}.exam-dialog p{line-height:1.65}.exam-rules{background:#f3f5fa;border-radius:14px;padding:12px 18px;margin:20px 0;color:#62718a;font-size:14px}.exam-rules p{margin:9px 0}.exam-primary,.exam-secondary{font:600 15px 'Nunito',Arial;padding:13px 20px;border-radius:10px;border:1px solid #d7def0;min-height:46px}.exam-primary{background:var(--accent);color:white;border-color:var(--accent)}.exam-primary:disabled{opacity:.5}.exam-secondary{background:#f4f6fa;color:#435575}.exam-meta{display:flex;justify-content:space-between;gap:15px;margin:27px 0 12px;color:#697994;font-size:14px;font-variant-numeric:tabular-nums}.exam-timer{height:7px;border-radius:8px;background:#e4e9f3;overflow:hidden}.exam-timer span{height:100%;display:block;background:var(--accent);width:100%}.exam-kind{color:#697994;font-size:14px;margin:27px 0 10px}.exam-dialog h3{font-family:'Nunito',Arial;font-size:26px;line-height:1.45;overflow-wrap:anywhere;margin:12px 0 22px}.exam-audio{border:1px solid #d7e0fa;background:var(--accent-soft);color:var(--accent);padding:10px 15px;border-radius:10px;margin:0 0 18px;font-size:15px;min-height:44px}.exam-options{display:grid;gap:10px}.exam-options button{border:1px solid #d8e0ee;border-radius:12px;background:#fff;color:#263c5e;padding:15px 18px;text-align:left;line-height:1.55;font-size:16px;min-height:53px}.exam-options button:hover{border-color:var(--accent);background:#f1f4ff}#exam-input-form{display:flex;gap:10px;flex-wrap:wrap}#exam-input{flex:1;min-width:180px;width:100%;font-size:18px;border:1px solid #cdd7eb;border-radius:10px;padding:13px;color:#263c5e;background:#fff}#exam-status{font-size:14px;color:#79869c;min-height:20px;margin:20px 0 0}.exam-result-icon{font-size:60px;margin:26px 0 8px}#exam-result{text-align:center}#exam-result h3{margin-bottom:12px}#exam-score{display:block;color:var(--accent);font-size:30px;font-family:'Nunito',Arial}.exam-result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:23px}#exam-listening-score,#exam-result-message{color:#62718a;font-size:15px}.exam-dialog input:focus-visible{outline:3px solid #ffb836;outline-offset:3px}
[data-theme="dark"] .promotion{color:#a9b7cf}[data-theme="dark"] :is(.promotion button,.exam-audio){background:var(--accent-dark-soft);color:var(--accent-light);border-color:#3b5075}[data-theme="dark"] :is(.exam-rules,.exam-secondary){background:#233149;color:#b4c3db;border-color:#40516d}[data-theme="dark"] :is(.exam-meta,.exam-kind,#exam-status,#exam-listening-score,#exam-result-message){color:#a9b7cf}[data-theme="dark"] :is(.exam-options button,#exam-input){background:#1b263a;color:#e4eaf8;border-color:#40516d}[data-theme="dark"] .exam-options button:hover{background:var(--accent-dark-soft);border-color:#7994ff}[data-theme="dark"] #exam-score{color:var(--accent-light)}[data-theme="dark"] .exam-timer{background:#34425a}@media(max-width:700px){.exam-dialog{padding:23px 18px}.exam-dialog .dialog-heading h2{font-size:22px}.exam-dialog h3{font-size:23px}.promotion{text-align:center;font-size:12px}.exam-options button{padding:13px 14px}.exam-rules{padding:10px 14px}#exam-score{font-size:27px}}
/* A compact daily ritual below the flashcards. */
.streak-tag{font-size:12px;border-radius:6px;background:#edf0f6;color:#7a8497;padding:4px 8px;white-space:nowrap}.streak-tag.active{background:#fff0db;color:#925413}.daily-panel{max-width:760px;margin:25px auto 28px;padding:23px;border:1px solid #dbe2f0;border-radius:18px;background:#fff}.daily-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.daily-heading h2{font:800 21px 'Nunito',Arial;margin:0;color:#253957}.daily-heading .eyebrow{font-size:11px;margin-bottom:7px}.daily-heading>span{font-size:13px;color:#77859a;white-space:nowrap}.daily-week{display:flex;justify-content:space-between;gap:6px;margin:20px 0}.daily-day{font-size:12px;color:#8a96aa;padding:6px 4px;border-radius:6px;white-space:nowrap}.daily-day.done{color:#287156;background:#e9f5ef}.daily-day.today{outline:1px solid #bcccf0}.daily-missions{display:grid;grid-template-columns:1fr 1fr;gap:22px}.daily-mission>div{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px}.daily-mission strong{font-weight:600}.daily-mission span{font-size:13px;color:#78869d;font-variant-numeric:tabular-nums}.daily-mission progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:6px;border:0;border-radius:6px;overflow:hidden;margin:12px 0;background:#e9edf6}.daily-mission progress::-webkit-progress-bar{background:#e9edf6}.daily-mission progress::-webkit-progress-value{background:#3e5fe8;border-radius:6px}.daily-mission progress::-moz-progress-bar{background:#3e5fe8;border-radius:6px}.daily-mission.done strong,.daily-mission.done span{color:#287156}.daily-mission p{font-size:13px;color:#7a879c;line-height:1.6;margin:10px 0 0}.daily-mission button{font:600 13px 'Nunito',Arial;color:var(--accent);background:var(--accent-soft);border:1px solid #dce4ff;border-radius:8px;padding:9px 13px;min-height:40px}.daily-mission button:disabled{color:#71849f;background:#f2f5fa;cursor:default}#daily-message{font-size:14px;line-height:1.6;margin:19px 0 7px;color:#526581}.daily-footnote{font-size:12px;line-height:1.6;color:#8591a5;margin:0}#daily-review-meta,#daily-review-status{font-size:14px;line-height:1.6;color:#738099}#daily-feedback{font-size:16px;line-height:1.7;color:#596b87}#daily-feedback.correct{color:#287156}.daily-dialog [hidden]{display:none!important}.daily-dialog #daily-word{font-size:34px}.daily-dialog .exam-options button:disabled{opacity:.65;cursor:default}.daily-dialog #daily-next,.daily-dialog #daily-retry{margin-top:12px}
[data-theme="dark"] .daily-panel{background:#1b263a;border-color:#34425a}[data-theme="dark"] .daily-heading h2{color:#e4eaf8}[data-theme="dark"] :is(.daily-heading>span,.daily-day,.daily-mission span,.daily-mission p,#daily-message,.daily-footnote,#daily-review-meta,#daily-review-status,#daily-feedback){color:#a9b7cf}[data-theme="dark"] .streak-tag{background:var(--accent-dark-soft);color:var(--accent-light)}[data-theme="dark"] .streak-tag.active{background:#493421;color:#ffc878}[data-theme="dark"] :is(.daily-day.done,.daily-mission.done strong,.daily-mission.done span,#daily-feedback.correct){color:#a8e3c4}[data-theme="dark"] .daily-day.done{background:#183b32}[data-theme="dark"] .daily-mission button{background:var(--accent-dark-soft);color:var(--accent-light);border-color:#3b5075}[data-theme="dark"] .daily-mission button:disabled{background:#263248;color:#a9b7cf}@media(max-width:700px){.daily-panel{padding:18px 15px}.daily-heading h2{font-size:19px}.daily-heading>span{font-size:12px}.daily-missions{gap:18px;grid-template-columns:1fr}.daily-day{font-size:11px;padding:6px 2px}.daily-week{gap:3px}.daily-heading .eyebrow{font-size:10px}}
/* One viewport, with the two alternating cards as the main surface. */
.compact-app .app{height:100vh;height:100dvh;max-width:920px;padding:0 20px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.compact-app .app>header{height:54px;flex-shrink:0;gap:10px}.compact-app .brand-dot,.compact-app .brand-small{display:none}
.compact-app .header-actions{gap:6px}.compact-app .header-actions .reset{padding:8px;min-height:40px;font-size:12px}
.compact-app .quick-settings{position:static;transform:none;display:flex;flex-direction:row;margin:0;padding:0;gap:0;border:0;background:transparent;box-shadow:none}
.compact-app .quick-settings button{width:38px;min-height:40px}.compact-app .quick-settings #voice-toggle{width:46px;flex-direction:column;gap:0}.compact-app #voice-mode{font-size:9px}.compact-app .quick-settings svg{height:18px}.compact-app #theme-icon{font-size:23px}
.compact-app .account-strip{flex-shrink:0}.compact-app .learner{margin:0;gap:8px;flex-wrap:nowrap}.compact-app .avatar{width:34px;height:34px;border-width:2px}.compact-app .learner-details{flex:1;max-width:none;gap:4px}.compact-app .learner-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}.compact-app .learner-tags{gap:5px;flex-wrap:wrap}.compact-app :is(.achievement,.streak-tag){font-size:10px;padding:3px 5px}.compact-app .rank-tag{font-size:10px}.compact-app .account-link{font-size:10px;max-width:68px;line-height:1.4;margin:0}
.compact-app .screen-main{padding:0;flex:1;min-height:0;display:flex}.compact-app .tab-panel{width:100%;min-height:0}.compact-app [hidden]{display:none!important}
.compact-app .study-panel{display:flex;flex-direction:column;gap:8px}.compact-app .daily-summary{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid #dce3f2;border-radius:10px;background:#ebeffb;color:#526581;padding:9px 11px;min-height:38px;font-size:12px}.compact-app .daily-summary>span:first-child{font-weight:700;color:#293f72}
.compact-app .level-selector{display:grid;grid-template-columns:repeat(6,1fr);flex-shrink:0;gap:5px;margin:0}.compact-app .level-selector button{min-width:0;min-height:38px;padding:5px 2px;font-size:11px;border-radius:10px}.compact-app .level-selector button.locked::after{font-size:8px;display:block}.compact-app .level-progress{font-size:11px;line-height:1.4;margin:0;flex-shrink:0}
.compact-app .study-surface{flex:1;min-height:0;display:flex}.compact-app .cards{height:100%;width:100%;gap:14px}.compact-app .card{height:100%;min-height:0}.compact-app .face{padding:20px 16px}.compact-app .word-content h2{font-size:clamp(23px,3.4vw,40px)}.compact-app .meaning{max-height:none;overflow:visible;font-size:clamp(15px,2vw,19px)}.compact-app .word-content{overflow:auto;max-height:100%;flex-shrink:1;width:100%}.compact-app .card-top,.compact-app .card-bottom{flex-shrink:0}.compact-app .large-loop{font-size:clamp(64px,10vh,108px)}
.compact-app .below-cards{margin:0;font-size:11px;flex-shrink:0}.compact-app .speech-status{margin:0;font-size:11px;min-height:0;line-height:1.4;flex-shrink:0}.compact-app .speech-status:empty{display:none}
.compact-app .sync-status{flex-shrink:0}.compact-app .progress-status{margin:0;min-height:0;font-size:10px;line-height:1.3}.compact-app .achievement-message{margin:0;padding:6px;font-size:11px}
.compact-app .screen-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;border-top:1px solid #dfe4ee;padding-top:6px;flex-shrink:0}.compact-app .screen-tabs button{display:flex;justify-content:center;align-items:center;gap:7px;min-height:44px;border:0;border-radius:10px;background:transparent;color:#758099;font-size:12px;font-weight:600}.compact-app .screen-tabs button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}.compact-app .screen-tabs button>span{font-size:19px}
.compact-app .details-panel{overflow:auto;overscroll-behavior:contain;padding:4px 0}.compact-app .daily-panel{margin:0;padding:16px;max-width:none}.compact-app .daily-heading h2{font-size:18px}.compact-app .daily-heading .eyebrow{display:none}.compact-app .daily-heading>span{font-size:11px}.compact-app .daily-week{margin:13px 0}.compact-app .daily-missions{grid-template-columns:1fr 1fr;gap:14px}.compact-app .daily-mission>div{font-size:12px;gap:5px}.compact-app .daily-mission span{font-size:11px}.compact-app .daily-mission p{font-size:11px}.compact-app .daily-mission progress{margin:9px 0}.compact-app .daily-mission button{padding:7px;font-size:11px;min-height:36px}.compact-app #daily-message{font-size:12px;margin:12px 0 5px}.compact-app .daily-footnote{font-size:10px}
.compact-app .progress-detail{padding:12px 16px}.compact-app .progress-detail h2{font-size:15px;margin:0 0 8px}.compact-app .counter{display:grid;width:100%;min-width:0;padding:0;grid-template-columns:95px 1fr;gap:5px 14px}.compact-app .count-line{grid-column:1;grid-row:1/4;flex-direction:column;gap:0}.compact-app .count-line strong{font-size:28px}.compact-app .goal-caption{grid-column:2;grid-row:1}.compact-app .goal-progress{grid-column:2;grid-row:2}.compact-app .milestone-track{grid-column:2;grid-row:3}.compact-app .counter span{font-size:10px}.compact-app .counter .session-count{grid-column:1/3;text-align:left}.compact-app .promotion{margin:10px 0 0;gap:6px;font-size:11px}.compact-app .promotion button{padding:8px 12px;font-size:12px;min-height:36px}
.compact-app .panel-title{font-size:22px;margin:12px 0 6px}.compact-app .panel-description{font-size:12px;color:#738099;margin:0 0 20px}.compact-app .distribution{margin:0;max-width:none}.compact-app footer{margin-top:12px;padding:12px 0;font-size:10px}.compact-app .ratio-form{margin-top:16px;padding-top:12px}.compact-app .ratio-form>p{font-size:12px}.compact-app .ratio-labels>div{font-size:11px}
[data-theme="dark"] .compact-app .daily-summary{background:#233149;border-color:#34425a;color:#b4c3db}[data-theme="dark"] .compact-app .daily-summary>span:first-child{color:#e4eaf8}[data-theme="dark"] .compact-app .screen-tabs{border-color:#34425a}[data-theme="dark"] .compact-app .screen-tabs button{color:#a9b7cf}[data-theme="dark"] .compact-app .screen-tabs button[aria-current="page"]{background:var(--accent-dark-soft);color:var(--accent-light)}
@media(max-width:600px){.compact-app .app{padding-left:12px;padding-right:12px;gap:7px}.compact-app .brand{font-size:18px;gap:6px}.compact-app .brand-mark{width:27px;height:27px;font-size:23px}.compact-app .cards{gap:10px}.compact-app .face{padding:13px 10px;border-radius:15px}.compact-app .card-top{font-size:9px;gap:4px}.compact-app .group-label{font-size:9px;padding:4px 6px}.compact-app .word-content h2{font-size:24px;letter-spacing:-.6px;margin:8px 0}.compact-app .ipa{font-size:14px;margin-bottom:8px;letter-spacing:0}.compact-app .meaning{font-size:15px;line-height:1.4;margin-bottom:5px}.compact-app .meaning-rule{margin:10px auto}.compact-app .audio{width:38px;height:38px}.compact-app .card-bottom{font-size:9px;gap:3px}.compact-app .audio-note{font-size:9px}.compact-app .flip-label{font-size:12px}.compact-app .covered .card-bottom{font-size:9px}.compact-app .daily-panel{padding:12px}.compact-app .progress-detail{padding:10px 12px}.compact-app .daily-mission>div{flex-wrap:wrap}}
@media(max-height:680px){.compact-app .app{gap:5px}.compact-app .app>header{height:46px}.compact-app .study-panel{gap:6px}.compact-app .daily-summary{padding:7px 9px;min-height:34px}.compact-app .screen-tabs button{min-height:40px}.compact-app .face{padding:10px}.compact-app .large-loop{font-size:64px}.compact-app .covered .card-bottom{display:none}.compact-app .daily-week{margin:10px 0}.compact-app .daily-panel{padding:10px}.compact-app .progress-detail{padding:8px 10px}.compact-app .daily-mission p{margin-top:5px}}
/* Allow scrolling only when zoom or a very short viewport needs it. */
@media(max-height:520px){.compact-app .app{height:auto;min-height:100dvh}.compact-app .study-surface{min-height:270px}.compact-app .screen-main{flex:none}.compact-app .details-panel{overflow:visible}}
/* Personal review and asynchronous duels retain the compact study surface. */
.compact-app .screen-tabs{grid-template-columns:repeat(4,1fr)}.compact-app .screen-tabs button{gap:5px}.remember-word{display:block;margin:8px auto 2px;border:1px solid #dce3f5;background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:7px 9px;font-size:12px;min-height:34px}.remember-word:disabled{color:#527c66;background:#edf5f0}.review-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.review-heading .exam-secondary{font-size:12px;padding:8px 10px;min-height:36px}.review-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:var(--accent-soft);border-radius:12px;font-size:14px}.review-summary button{font-size:13px;padding:9px 12px}.review-row,.duel-rank-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #dfe4ee}.review-row>div,.duel-rank-row>div{display:flex;flex-direction:column;gap:5px;min-width:0}.review-row strong{font-size:17px}.review-row span{font-size:14px;line-height:1.45}.review-row small,.duel-rank-row small,.duel-match small{display:block;color:#7b879a;font-size:12px;line-height:1.5}.social-button{border:1px solid #d6def4;border-radius:8px;background:var(--accent-soft);color:var(--accent);padding:9px 12px;font:600 13px 'Nunito',Arial;min-height:40px}.social-button:disabled{opacity:.55}.ranking-tabs{display:flex;gap:7px;margin-top:18px}.ranking-tabs button{flex:1;padding:10px;border:1px solid #d6def4;border-radius:9px;background:transparent;color:#62738c;font-size:14px}.ranking-tabs button[aria-pressed="true"]{background:var(--accent);color:white;border-color:var(--accent)}.social-heading{font-size:16px;margin:22px 0 8px}.duel-match{border:1px solid #dbe2f0;border-radius:12px;padding:13px;margin:10px 0}.duel-match strong{font-size:14px}.duel-match p{font-size:14px;line-height:1.5;margin:7px 0}.duel-match button{margin-top:10px}.duel-rank-row strong{font-size:14px;overflow-wrap:anywhere}.duel-rank-row .social-button{flex-shrink:0}.ranking-dialog #duel-refresh{font-size:12px;min-height:36px;padding:8px 12px}#duel-status,#review-status,#duel-play-status{font-size:13px;line-height:1.6;color:#6c7c95}#duel-input-form{display:flex;gap:8px;flex-wrap:wrap}#duel-input{min-width:150px;flex:1;padding:12px;border:1px solid #cdd7eb;border-radius:10px;background:white;color:#263c5e;font-size:17px}#duel-input-form button{padding:10px 14px}#duel-score{font-size:27px;color:var(--accent)}#review-feedback{font-size:15px;line-height:1.7}#open-ranking{position:relative}#open-ranking[data-notifications]:not([data-notifications=""])::after{content:attr(data-notifications);position:absolute;right:-5px;top:-4px;background:#db5137;color:white;min-width:17px;height:17px;padding:1px 4px;border-radius:12px;font-size:10px}.compact-app .word-content{flex-shrink:1}
[data-theme="dark"] :is(.review-summary,.remember-word,.social-button){background:var(--accent-dark-soft);color:var(--accent-light);border-color:#40516d}[data-theme="dark"] :is(.review-row,.duel-rank-row,.duel-match,.ranking-tabs button){border-color:#34425a}[data-theme="dark"] :is(.review-row small,.duel-rank-row small,.duel-match small,#duel-status,#review-status,#duel-play-status){color:#a9b7cf}[data-theme="dark"] #duel-input{background:#1b263a;color:#e4eaf8;border-color:#40516d}[data-theme="dark"] .ranking-tabs button{color:#bfcee6}[data-theme="dark"] .ranking-tabs button[aria-pressed="true"]{color:white}[data-theme="dark"] #duel-score{color:var(--accent-light)}@media(max-height:680px){.compact-app .remember-word{padding:5px 7px;min-height:30px;margin-top:5px}.compact-app .meaning-rule{margin:7px auto}.compact-app .word-content h2{margin:5px 0}.compact-app .ipa{margin-bottom:5px}}@media(max-width:380px){.compact-app .screen-tabs button{font-size:11px;gap:4px}.compact-app .screen-tabs button>span{font-size:16px}}

/* One Vietnamese-capable family across every application control. */
:root{font-family:'Nunito',Arial,sans-serif}
button,input,select,textarea{font-family:inherit}
.brand,.word-content h2,h1{letter-spacing:0}
.learning-tools select{font-size:16px}

/* Compact navigation v6 */
.settings-links{display:grid;gap:8px;margin:4px 0 18px}.settings-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #dfe4ee;border-radius:12px;background:#fff;color:#263c5e;text-decoration:none;min-height:64px}.settings-link>span:nth-child(2){flex:1;min-width:0}.settings-link strong,.settings-link small{display:block}.settings-link strong{font-size:14px}.settings-link small{font-size:11px;color:#738099;margin-top:3px}.settings-link>span:last-child{font-size:24px}.settings-icon{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:23px}.settings-link:focus-visible,.daily-back:focus-visible{outline:2px solid #728bff;outline-offset:3px}.daily-back{font:600 13px 'Nunito',sans-serif;border:1px solid #dfe4ee;border-radius:9px;padding:8px 12px;margin:0 0 10px;background:transparent;color:inherit;cursor:pointer}.compact-app .screen-tabs #open-ranking[data-notifications]:not([data-notifications=""])::after{top:0;right:4px}
[data-theme="dark"] .settings-link{background:#172235;border-color:#34425a;color:#e4eaf8}[data-theme="dark"] .settings-link small{color:#a9b7cf}[data-theme="dark"] .settings-icon{background:var(--accent-dark-soft);color:var(--accent-light)}[data-theme="dark"] .daily-back{border-color:#34425a;color:var(--accent-light)}

/* Appearance and bilingual examples v7 */
:root,:root[data-accent="blue"]{--accent:#2b49e9;--accent-bright:#4b64ec;--accent-soft:#eceffd;--accent-light:#b5bff7;--accent-dark-soft:#172559;--accent-deep:#19296b;--accent-shadow:#2b49e925;}
:root[data-accent="green"]{--accent:#167344;--accent-bright:#398860;--accent-soft:#eaf2ee;--accent-light:#adcebe;--accent-dark-soft:#12302f;--accent-deep:#123831;--accent-shadow:#16734425;}
:root[data-accent="teal"]{--accent:#087c82;--accent-bright:#2d9095;--accent-soft:#e9f3f4;--accent-light:#a9d1d3;--accent-dark-soft:#0e323f;--accent-deep:#0d3b47;--accent-shadow:#087c8225;}
:root[data-accent="purple"]{--accent:#7541c8;--accent-bright:#8a5ed0;--accent-soft:#f3eefa;--accent-light:#cfbcec;--accent-dark-soft:#2a2351;--accent-deep:#33265f;--accent-shadow:#7541c825;}
:root[data-accent="pink"]{--accent:#b82e70;--accent-bright:#c34d85;--accent-soft:#f9ecf2;--accent-light:#e6b6cd;--accent-dark-soft:#3c1e3a;--accent-deep:#4b2041;--accent-shadow:#b82e7025;}
:root[data-accent="red"]{--accent:#bb3443;--accent-bright:#c5525f;--accent-soft:#f9edee;--accent-light:#e7b8bd;--accent-dark-soft:#3c1f2e;--accent-deep:#4c2231;--accent-shadow:#bb344325;}
:root[data-accent="orange"]{--accent:#aa510c;--accent-bright:#b76b30;--accent-soft:#f7efe9;--accent-light:#e1c2aa;--accent-dark-soft:#382720;--accent-deep:#462c1e;--accent-shadow:#aa510c25;}
:root[data-accent="slate"]{--accent:#475569;--accent-bright:#636e80;--accent-soft:#eef0f2;--accent-light:#bfc4ca;--accent-dark-soft:#1e2838;--accent-deep:#232d3e;--accent-shadow:#47556925;}
.appearance-settings{margin:0 0 20px}.appearance-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.appearance-actions button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:9px 12px;border:1px solid #dfe4ee;border-radius:12px;background:#fff;color:#263c5e;font-size:13px;font-weight:700}.appearance-actions #theme-icon{font-size:22px}.color-preview{width:22px;height:22px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px #bbc5d5}#color-palette{border:0;padding:12px 0 0;margin:0}#color-palette legend{font-size:12px;padding-top:12px;color:#738099}.color-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.color-choice{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;font-size:11px;padding:5px}.color-choice input{position:absolute;opacity:0;width:36px;height:36px;top:4px;margin:0}.color-dot{width:32px;height:32px;border-radius:50%;background:var(--swatch);border:3px solid #fff;box-shadow:0 0 0 1px #cbd5e1}.color-choice input:checked+.color-dot{outline:2px solid var(--accent);outline-offset:3px}.color-choice input:checked+.color-dot::after{content:'✓';display:grid;place-items:center;color:white;font-size:18px;font-weight:800;height:100%}.color-choice input:focus-visible+.color-dot{outline:3px solid currentColor;outline-offset:4px}
[data-theme="dark"] .appearance-actions button{background:#172235;border-color:#34425a;color:#e4eaf8}[data-theme="dark"] #color-palette legend{color:#a9b7cf}[data-theme="dark"] .color-dot{border-color:#172235}
.word-pos{display:inline-block;margin:4px 0 0;padding:3px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;line-height:1.4}.word-example{border-top:1px solid #e2e8f0;margin:10px 0 4px;padding-top:8px;text-align:left}.word-example p{margin:0;overflow-wrap:anywhere;line-height:1.5}.word-example .example-en{color:#334155;font-size:13px;font-weight:700}.word-example .example-vi{color:#64748b;font-size:12px;margin-top:4px}.word-pos[hidden],.word-example[hidden]{display:none}
[data-theme="dark"] .word-pos{background:var(--accent-dark-soft);color:var(--accent-light)}[data-theme="dark"] .word-example{border-color:#34425a}[data-theme="dark"] .example-en{color:#e2e8f0}[data-theme="dark"] .example-vi{color:#a9b7cf}
.compact-app .has-word-detail .word-content{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 2px}.compact-app .has-word-detail h2{font-size:clamp(21px,3.2vw,34px);margin:6px 0}.compact-app .has-word-detail .ipa{margin:0 0 5px}.compact-app .has-word-detail .audio{width:32px;height:32px}.compact-app .has-word-detail .meaning-rule{margin:7px auto}.compact-app .has-word-detail .meaning{margin:0;max-height:none;overflow:visible}.compact-app .has-word-detail>.card-bottom{display:none}.compact-app .has-word-detail .word-pos{display:table;margin:5px auto}.compact-app .has-word-detail .word-pos[hidden]{display:none}.compact-app .has-word-detail .remember-word{margin-top:8px}
@media(max-width:600px){.compact-app .has-word-detail{padding:10px 9px}.compact-app .has-word-detail .card-top{font-size:8px;gap:3px}.compact-app .has-word-detail .group-label{font-size:8px;padding:3px 4px}.compact-app .has-word-detail .word-content h2{font-size:23px}.compact-app .has-word-detail .ipa{font-size:12px}.compact-app .has-word-detail .meaning{font-size:14px}.compact-app .word-example .example-en{font-size:12px}.compact-app .word-example .example-vi{font-size:11px}.word-example{margin-top:8px;padding-top:6px}.word-pos{font-size:10px}.appearance-actions button{font-size:12px;padding:8px}}

/* White vector fish on the selected theme color, in both display modes. */
.brand-logo{background:var(--accent)}