/* 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} }