/* One hierarchy: white surfaces, readable ink, Langufy green for the next action. */
:root:not([data-theme=dark]) { --brand:#00be8b; --green:#00be8b; --deep:#007a55; --ink:#183c30; --muted:#53655d; --bg:#f7faf8; --surface:#fff; --line:#dce8e1; --soft:#eaf6ef; --mint:#eaf6ef; --radius:14px; }
body { font-size:15px; line-height:1.6; }
.btn { font-size:14px; min-height:44px; border-radius:10px; font-weight:650; }
.btn.primary,.btn.hero-button { background:#007a55; color:#fff; border-color:#007a55; box-shadow:none; }
.btn.primary:hover,.btn.hero-button:hover { background:#006346; border-color:#006346; }
.btn.light { background:var(--surface); border:1px solid var(--line); color:var(--ink); }
.btn:disabled { opacity:.6; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--deep); outline-offset:4px; }
.sidebar { width:224px; padding:28px 16px 20px; }
.workspace { margin-left:224px; }
.brand { margin:0 14px 34px; font-size:29px; }
.workspace-label,.nav-section-label,.local-badge { color:var(--muted); font-size:12px; }
#navigation>a,.sidebar-setting,.nav-extra a,.nav-extra>summary { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:9px; font-size:14px; font-weight:500; color:var(--muted); transition:background .16s,color .16s; }
.nav-extra { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
.nav-extra>summary { cursor:pointer; list-style:none; }
.nav-extra>summary::-webkit-details-marker { display:none; }
.nav-extra>summary>.icon:last-child { margin-left:auto; width:16px; transition:transform .18s; }
.nav-extra[open]>summary>.icon:last-child { transform:rotate(90deg); }
.nav-extra>div { display:grid; gap:3px; padding-top:4px; }
.nav-extra a { font-size:13px; padding:10px 14px; }
.nav-extra a .icon { width:19px; height:19px; }
#navigation>a:hover,.nav-extra a:hover,.nav-extra>summary:hover { color:var(--deep); background:var(--soft); }
#navigation>a.active,.nav-extra a.active,.sidebar-setting.active { color:var(--deep); background:var(--soft); box-shadow:inset 3px 0 var(--brand); font-weight:700; }
.sidebar-bottom { padding-top:24px; }
.sidebar-close { display:none; }
.topbar { padding:0 36px; height:76px; gap:18px; }
.breadcrumb,.breadcrumb strong { color:var(--muted); font-size:13px; }
.header-search { background:var(--bg); border-color:var(--line); }
.header-search input { font-size:14px; }
.header-search:focus-within { outline:2px solid var(--deep); outline-offset:2px; }
.streak-pill { background:var(--soft); color:var(--deep); border-color:var(--line); }
#content { max-width:1320px; padding:32px 36px 26px; }
.page-heading { margin-bottom:28px; }
.page-heading h1 { font-size:30px; letter-spacing:-1px; }
.page-subtitle { font-size:15px; color:var(--muted); }
.kicker,.date-label,.small-text { font-size:12px; color:var(--muted); }
.today-focus { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(210px,1fr); gap:30px; padding:38px 40px; background:var(--surface); overflow:hidden; }
.today-tag { display:flex; align-items:center; gap:8px; color:var(--deep); font-size:12px; font-weight:700; letter-spacing:.7px; }
.today-tag>.icon { width:17px; height:17px; }
.today-copy h2 { max-width:510px; margin:16px 0 12px; font-size:34px; line-height:1.25; letter-spacing:-1.1px; }
.today-copy>p { max-width:470px; font-size:15px; color:var(--muted); line-height:1.8; }
.today-primary { margin-top:25px; padding:0 22px; min-height:48px; }
.today-hint { display:block; margin-top:11px; font-size:12px; color:var(--muted); }
.today-visual { position:relative; display:grid; place-items:center; align-self:center; padding:24px 10px; isolation:isolate; }
.today-card-back { position:absolute; width:85%; max-width:270px; height:220px; border-radius:16px; background:var(--brand); transform:rotate(6deg); opacity:.2; }
.today-word-card { width:100%; max-width:270px; position:relative; border:1px solid var(--line); border-radius:14px; padding:25px; background:var(--surface); box-shadow:0 12px 30px #143f2510; transform:rotate(-3deg); transition:transform .2s; }
.today-visual:hover .today-word-card { transform:rotate(0); }
.today-word-card>span { font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.5px; }
.today-word-card>strong { display:block; font:750 34px var(--heading); margin:22px 0 7px; overflow-wrap:anywhere; }
.today-word-card>p { font-size:16px; color:var(--deep); overflow-wrap:anywhere; }
.today-word-card>div { margin-top:23px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; display:flex; align-items:center; gap:7px; }
.today-word-card>div .icon { width:16px; height:16px; color:var(--deep); }
.today-progress { display:flex; align-items:center; gap:32px; margin-top:20px; padding:22px 26px; }
.today-progress>div:first-child { min-width:155px; }
.today-progress>div:first-child>span { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); }
.today-progress>div:first-child>.icon { width:17px; }
.today-progress strong { font-size:23px; font-variant-numeric:tabular-nums; }
.today-progress strong small { color:var(--muted); font-size:13px; font-weight:500; }
.today-progress-middle { flex:1; }
.today-progress-middle>p { font-size:13px; color:var(--muted); margin-top:8px; }
.today-progress-track { height:7px; border-radius:4px; background:var(--soft); overflow:hidden; }
.today-progress-track>span { display:block; height:100%; background:var(--brand); border-radius:4px; transition:width .3s; }
.today-progress>a { color:var(--muted); display:grid; place-items:center; width:40px; height:40px; border-radius:9px; }
.today-progress>a:hover { background:var(--soft); }
.first-steps { margin:31px 0; }
.first-steps h2 { font-size:18px; margin-bottom:17px; }
.first-steps ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:20px; }
.first-steps li { display:flex; align-items:flex-start; gap:11px; }
.first-steps li>span { display:grid; place-items:center; width:27px; height:27px; flex-shrink:0; background:var(--soft); color:var(--deep); border-radius:50%; font-size:12px; font-weight:700; }
.first-steps strong { font-size:14px; }
.first-steps p { color:var(--muted); font-size:13px; margin-top:4px; }
.today-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
.today-shortcut { display:flex; align-items:center; gap:15px; padding:24px; transition:border-color .18s,transform .18s; }
.today-shortcut:hover { border-color:var(--brand); transform:translateY(-2px); }
.today-shortcut>div { flex:1; }
.today-shortcut h2 { font-size:16px; }
.today-shortcut p { font-size:13px; color:var(--muted); margin-top:4px; }
.today-shortcut>.icon { width:17px; color:var(--muted); }
.today-shortcut-icon { width:42px; height:42px; display:grid; place-items:center; color:var(--deep); background:var(--soft); border-radius:11px; flex-shrink:0; }
.library-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.library-tabs a { padding:9px 14px; border-radius:8px; font-size:14px; color:var(--muted); }
.library-tabs a[aria-current],.library-tabs a:hover { background:var(--soft); color:var(--deep); }
.account-zone-field { display:grid; gap:8px; margin-top:22px; max-width:420px; font-size:14px; }
.account-zone-field select { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); width:100%; }
.legacy-activity { padding:24px; margin-top:20px; }
.legacy-activity summary { font-weight:650; cursor:pointer; }
.legacy-activity>p { font-size:13px; color:var(--muted); margin:16px 0; }
.account-app .account-words-table td,.account-app .account-type-filter select,.word-form label,.account-settings-form label { font-size:14px; }
.account-app .word-cell strong { font-size:16px; }
.account-app .word-cell small,.account-word-collections,.word-type,.account-library-meta,.account-field-help,.table-footer { font-size:12px; color:var(--muted); }
.account-app .word-form input,.account-app .word-form select,.account-app .word-form textarea,.account-settings-form input,.account-settings-form select { font-size:16px; }
.account-app .settings-card>p,.account-app .account-empty p { font-size:14px; color:var(--muted); }
.study-main-modes .practice-mode-card { background:var(--surface); }
.study-hub-note,.study-more-modes>summary,.study-intro>p,.study-resume>p { font-size:14px; }
:root[data-theme=dark] .today-word-card { box-shadow:none; }
@media(max-width:1100px) { .today-focus{padding:30px;gap:18px}.today-copy h2{font-size:29px}.today-word-card{padding:20px}.today-word-card>strong{font-size:29px}.today-shortcut{padding:20px;gap:12px}.topbar{gap:12px;padding:0 26px}#content{padding:28px 26px} }
@media(min-width:901px) { .sidebar{transform:none;visibility:visible}.workspace{margin-left:224px}.mobile-menu{display:none!important} }
@media(max-width:900px) { .sidebar{transform:translateX(-100%);visibility:hidden;width:270px;padding:25px 18px;transition:transform .2s}.menu-open{overflow:hidden}.menu-open .sidebar{transform:translateX(0);visibility:visible}.sidebar-overlay{position:fixed;inset:0;background:#142e2359;z-index:35}.sidebar-close{position:absolute;top:23px;right:16px;display:grid;place-items:center;width:34px;height:34px;background:var(--soft);border-radius:8px}.sidebar .brand{margin-right:35px;font-size:27px}.workspace{margin-left:0}.mobile-menu{display:grid!important;place-items:center}.topbar{height:70px}.breadcrumb{display:none}.header-search{margin-left:0;flex:1;width:auto;min-width:0}.header-search kbd{display:none}.first-steps ol{gap:14px} }
@media(max-width:620px) { #content{padding:24px 18px}.topbar{padding:0 15px;gap:10px;height:66px}.page-heading h1{font-size:26px}.page-subtitle{font-size:14px}.date-label{margin-top:12px}.today-focus{display:block;padding:26px}.today-copy h2{font-size:29px;max-width:390px}.today-copy>p{font-size:14px}.today-visual{display:none}.today-primary{width:100%;margin-top:23px}.today-hint{text-align:center}.today-progress{padding:18px;gap:16px;flex-wrap:wrap}.today-progress>div:first-child{min-width:0;flex:1}.today-progress-middle{flex-basis:100%;order:3}.today-progress strong{font-size:21px}.today-shortcuts{grid-template-columns:1fr;gap:12px}.today-shortcut{padding:20px}.first-steps ol{grid-template-columns:1fr;gap:17px}.first-steps p{font-size:13px}.first-steps{margin:28px 0}.profile-avatar{width:32px;height:32px}.streak-pill{display:none}.motion-toggle{display:none!important}.header-search input{font-size:14px}.nav-extra a{font-size:14px}.page-heading{margin-bottom:23px}.btn{font-size:14px} }
@media(prefers-reduced-motion:reduce) { .today-word-card,.today-card-back{transform:none}.today-shortcut:hover{transform:none} }
.platform-control-notice{padding:16px 20px;margin-bottom:20px;border:1px solid #b8d4c4;border-radius:12px;background:#edf6ef;color:#284b3b;line-height:1.6}.platform-control-notice strong{font-size:14px}.platform-control-notice p{font-size:13px;margin:4px 0 0}.reader-unavailable{padding:28px}.reader-unavailable .btn{margin-top:18px}

/* Vocabulary workspace: dictionary first, secondary tools stay easy to find. */
.sidebar{width:228px;padding:26px 16px 18px}
.workspace{margin-left:228px}
.sidebar .brand{margin:0 12px 28px;font-size:28px;letter-spacing:-1.2px}
.sidebar .brand img{width:34px;height:34px;border-radius:10px}
.workspace-label{font-size:10px;letter-spacing:1.2px;margin:0 13px 12px}
#navigation{gap:4px}
#navigation>a{min-height:46px;padding:11px 14px;font-size:14px}
#navigation>a:is([data-nav=library],[data-nav=battle]){font-size:15px;font-weight:650;color:var(--ink)}
#navigation>a:is([data-nav=library],[data-nav=battle]).active{color:var(--deep);font-weight:750}
#navigation>.nav-section-label{margin:17px 14px 5px;font-size:10px;letter-spacing:.9px}
.nav-extra{margin-top:10px;padding-top:10px}
.nav-extra summary{min-height:44px}
.nav-extra a{min-height:44px}
.sidebar-bottom{padding-top:22px}
.sidebar-setting{min-height:44px}
.sidebar-bottom .local-badge{font-size:11px;margin:12px 14px 0}
.sidebar-bottom .text-btn{font-size:12px;justify-content:flex-start;padding-left:14px}
.topbar{height:68px;padding:0 32px;gap:14px}
.topbar .breadcrumb{min-width:0;overflow:hidden;text-overflow:ellipsis}
.topbar .breadcrumb strong{font-weight:600;color:var(--ink)}
.topbar .header-search{width:320px;max-width:390px;min-width:160px}
.topbar #header-streak,.topbar .motion-toggle{display:none!important}
.workspace-add{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;white-space:nowrap;color:var(--muted);background:var(--surface)}
.workspace-add>.icon{width:18px;height:18px}
.workspace-add:hover{color:var(--deep);border-color:var(--deep);background:var(--soft)}
body[data-page=library] .workspace-add{margin-left:auto}
body:is([data-page=battle],[data-page=classrooms]) .workspace-add{display:none}
body:is([data-page=battle],[data-page=classrooms]) .topbar .breadcrumb{flex:1}
.topbar .profile-avatar{width:34px;height:34px;border-width:1px;background:var(--soft);color:var(--deep)}
#content{max-width:1280px;padding:28px 32px 30px;min-height:calc(100dvh - 135px)}
#content .page-heading{margin-bottom:23px}
#content .page-heading h1{font-size:28px;line-height:1.25;letter-spacing:-.8px}
#content .page-heading .kicker{font-size:10px;letter-spacing:1px;margin-bottom:8px}
#content .page-subtitle{max-width:640px;line-height:1.65}
.app-footer{max-width:1280px;padding:12px 32px 24px;font-size:11px}
.mobile-navigation{display:none}
.toast{z-index:80}
@media(min-width:901px){.workspace{margin-left:228px}}
@media(max-width:1100px) and (min-width:901px){.topbar{padding:0 24px;gap:11px}.topbar .breadcrumb{display:none}.topbar .header-search{margin-left:0;flex:1;max-width:none}#content{padding:26px 24px}}
@media(max-width:900px){
 .sidebar{width:280px;padding:25px 18px}.workspace{margin-left:0}
 .topbar{height:64px;padding:0 20px;gap:10px}
 .topbar .header-search{margin-left:0;min-width:0;max-width:none;flex:1}
 body:is([data-page=library],[data-page=battle],[data-page=classrooms]) .breadcrumb{display:block;font-size:0;flex:1}
 body:is([data-page=library],[data-page=battle],[data-page=classrooms]) .breadcrumb>span{display:none}
 body:is([data-page=library],[data-page=battle],[data-page=classrooms]) .breadcrumb strong{font-size:16px}
 .workspace-add{display:none}
 #content{padding:24px 22px 28px;min-height:calc(100dvh - 160px)}
 .mobile-navigation{position:fixed;z-index:24;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:68px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px #173b2705}
 .mobile-navigation>a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:54px;padding:5px 3px;color:var(--muted);font-size:11px;font-weight:550;border-radius:10px;line-height:1.35;white-space:nowrap}
 .mobile-navigation>a>.icon{width:21px;height:21px}
 .mobile-navigation>a.active{background:var(--soft);color:var(--deep);font-weight:700}
 .mobile-navigation>a:hover{background:var(--soft)}
 .app-footer{padding:12px 22px calc(90px + env(safe-area-inset-bottom));gap:14px}
 .toast,.social-toast,.network-toast{bottom:calc(88px + env(safe-area-inset-bottom))}
 .menu-open .mobile-navigation{visibility:hidden}
 html{scroll-padding-bottom:calc(85px + env(safe-area-inset-bottom))}
 .catalog-app .catalog-selection-dock{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(max-width:620px){
 .topbar{height:60px;padding:0 14px;gap:9px}
 .topbar .mobile-menu{width:36px;min-width:36px;height:40px}
 .topbar .header-search input{font-size:14px;padding:10px 0}
 .topbar .header-search{padding:0 10px;gap:6px}
 .topbar .profile-avatar{width:32px;height:32px}
 #content{padding:20px 16px 24px}
 #content .page-heading{margin-bottom:20px;gap:14px}
 #content .page-heading h1{font-size:25px;letter-spacing:-.6px}
 #content .page-heading .kicker{font-size:9px}
 .app-footer{padding-left:16px;padding-right:16px}
}
@media(prefers-reduced-motion:reduce){.mobile-navigation a,.workspace-add{transition:none}}

/* Mobile workspace: comfortable touch controls and room for the actual words. */
@media (max-width:900px) {
  :root { --mobile-nav-clearance:calc(76px + env(safe-area-inset-bottom,0px)); }
  html { scroll-padding-top:calc(72px + env(safe-area-inset-top,0px)); scroll-padding-bottom:var(--mobile-nav-clearance); }
  .workspace { min-width:0; }
  .topbar { height:calc(60px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px)); gap:8px; }
  .topbar .mobile-menu,.topbar .profile-avatar,#network-bell { width:44px;min-width:44px;height:44px;flex-shrink:0; }
  .topbar .mobile-menu { border-radius:12px; }
  .topbar .profile-avatar { width:40px;min-width:44px;height:44px;border-radius:12px;font-size:13px; }
  .topbar .header-search { min-width:0;padding:0 10px; }
  .topbar .header-search input { font-size:16px;min-height:44px; }
  .topbar .header-search>span { flex-shrink:0; }
  .sidebar { width:min(320px,calc(100vw - 40px));padding:calc(24px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overscroll-behavior:contain; }
  .sidebar .brand { margin-bottom:24px; }
  .sidebar-close { top:calc(18px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px; }
  #navigation>a,.nav-extra a,.nav-extra summary,.sidebar-setting { min-height:48px; }
  .sidebar-bottom { padding-top:16px; }
  .sidebar-bottom .text-btn { min-height:44px;font-size:14px; }
  .sidebar-overlay { backdrop-filter:none; }
  #content { min-width:0;padding:20px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px)); }
  #content .page-heading h1 { font-size:26px;line-height:1.25;overflow-wrap:anywhere; }
  #content .page-heading { gap:12px;margin-bottom:20px; }
  #content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),#content textarea,#content select,
  body dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),body dialog textarea,body dialog select,body dialog .account-dialog-form textarea,body dialog .account-dialog-form select { font-size:16px;min-height:46px;line-height:1.45; }
  #content textarea,#app-dialog textarea { min-height:110px; }
  #content .icon-btn,#content .word-sound,#content .favorite-toggle { min-width:44px;min-height:44px; }
  .mobile-navigation { min-height:64px;padding:4px max(8px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)); }
  .mobile-navigation>a { min-height:54px;gap:4px;font-size:11px; }
  .mobile-navigation>a.active { box-shadow:inset 0 2px var(--deep); }
  .app-footer { padding-bottom:calc(var(--mobile-nav-clearance) + 16px); }
  .toast,.social-toast,.network-toast { bottom:var(--mobile-nav-clearance);max-width:calc(100% - 32px); }
  body dialog { max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;scroll-padding:24px; }
  body dialog .dialog-close,body dialog .account-dialog-close { width:44px;height:44px;top:8px;right:8px; }
  #dialog-content>h2 { padding-right:24px; }
  .catalog-app .catalog-selection-dock { bottom:var(--mobile-nav-clearance); }
}
@media (max-width:620px) {
  #content .page-heading h1 { font-size:25px; }
  .page-heading>.btn { min-height:44px;white-space:normal;text-align:center; }
  body dialog { width:calc(100% - 20px);max-width:480px;padding:28px 20px 22px;border-radius:18px; }
  .account-app .account-toolbar,.account-app .table-toolbar { gap:10px; }
  .account-app .account-clear-search,.account-app .account-search-clear { min-width:44px;min-height:44px; }
  .form-actions { flex-wrap:wrap; }
  .form-actions .btn { flex:1;min-width:110px; }
  .settings-card { min-width:0; }
  .setting-row>div { min-width:0; }
  .setting-row p { overflow-wrap:anywhere; }
  .theme-options { gap:12px; }
  .theme-option { min-width:0;flex:1; }
  .platform-announcement { margin:12px 16px 0; }
  .platform-announcement button { min-width:44px;min-height:44px; }
}
@media (max-width:900px) and (hover:none) {
  .today-shortcut:hover,.today-visual:hover .today-word-card { transform:none; }
}

#navigation>a[data-nav=classrooms]{margin-top:8px;}