:root{--ink:#202a28;--sub:#6f7975;--line:#e4e9e5;--paper:#f7f8f5;--white:#fff;--green:#17785f;--green-dark:#105d49;--green-lite:#e5f5ed;--orange:#b4771c;--orange-soft:#fbf2dc;--shadow:0 22px 65px rgba(39,64,50,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:progress}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid rgba(23,120,95,.25);outline-offset:3px}::selection{background:#b3e4cf;color:#103e2e}.shell{max-width:1192px;margin:0 auto;padding-left:32px;padding-right:32px}.topbar{background:rgba(255,255,255,.8);border-bottom:1px solid var(--line)}.topbar-content{height:75px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:39px;height:39px;border-radius:12px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:850;font-size:19px;letter-spacing:-3px;transform:rotate(-2deg)}.brand-icon span{letter-spacing:0;font-size:11px;align-self:flex-end;margin-bottom:9px;margin-left:-2px}.brand strong{font-size:18px;letter-spacing:-.7px;line-height:1.2;display:block}.brand small{display:block;color:#8a968e;font-size:10px;margin-top:4px;letter-spacing:.9px}.topbar-detail{font-size:12px;color:var(--sub);font-weight:600;display:flex;align-items:center;gap:9px}.live-dot{width:7px;height:7px;background:#58a886;border-radius:50%;box-shadow:0 0 0 4px #ebf6ef}.hero{display:grid;grid-template-columns:1.5fr 0.94fr;gap:56px;align-items:center;padding:76px 0 80px}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:800;color:var(--green);display:flex;align-items:center;gap:13px}.eyebrow-line{width:16px;height:1px;background:#b7d4c2}.hero h1{font-size:clamp(38px,4.6vw,64px);letter-spacing:-2.8px;line-height:1.23;font-weight:840;margin:20px 0 20px}.hero h1 em{font-style:normal;color:var(--green)}.hero p{font-size:15px;max-width:535px;line-height:2;color:#738079;margin:0}.hero-note{margin-top:31px;display:inline-flex;align-items:center;gap:10px;font-size:12px;color:#69746d}.note-icon{width:27px;height:27px;display:grid;place-items:center;background:var(--green-lite);color:var(--green);border-radius:8px;font-size:17px;font-weight:700}.summary{background:#fff;border:1px solid #e9eee9;border-radius:19px;padding:28px 30px;box-shadow:var(--shadow);position:relative}.summary::after{content:"";position:absolute;width:90px;height:90px;border:16px solid #f4f9f5;border-radius:100%;right:-25px;top:-25px;z-index:-1}.summary-head{display:flex;align-items:center;justify-content:space-between;color:#69786f;font-size:12px;font-weight:700}.summary-symbol{width:24px;height:24px;border-radius:8px;background:#eaf4ed;color:var(--green);display:grid;place-items:center;font-size:16px}.big-stat{margin:25px 0 22px;display:flex;align-items:baseline;gap:14px}.big-stat strong{font-size:64px;letter-spacing:-3px;line-height:1;font-weight:810;color:#20302a;font-variant-numeric:tabular-nums}.big-stat span{font-size:12px;color:var(--sub)}.progress-track{width:100%;height:8px;border-radius:8px;overflow:hidden;background:#ebefeb}.progress-fill{width:0;height:100%;background:#51a37c;transition:width .32s}.stat-foot{display:flex;justify-content:space-between;color:#8b948e;font-size:11px;margin-top:13px}.stat-divider{height:1px;background:var(--line);margin:23px 0 19px}.summary-bottom{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#768078}.summary-bottom strong{color:var(--green);font-size:13px}.workspace{background:#fff;border:1px solid #edf0ed;border-radius:21px;box-shadow:0 10px 40px rgba(31,60,45,.035);padding:30px;margin-bottom:40px}.workspace-title{display:flex;align-items:end;justify-content:space-between;padding:0 1px 22px}.section-kicker{margin:0 0 9px;letter-spacing:2.5px;font-weight:780;color:#86a294;font-size:9px}.workspace h2{font-size:26px;letter-spacing:-1.2px;margin:0;font-weight:850}.heading-dot{color:var(--green)}.workspace-subtitle{font-size:11px;color:#98a29b;padding-bottom:4px}.filters-panel{border:1px solid #e7ede8;border-radius:13px;padding:17px;background:#fbfcfa}.first-filters{display:flex;gap:12px}.searchbox{flex:1;min-width:0;background:#fff;border:1px solid #e6e9e7;border-radius:10px;height:44px;display:flex;align-items:center;padding:0 13px;gap:10px;color:#97a29b}.searchbox svg{width:18px;height:18px;flex:none}.searchbox input{border:0;background:transparent;outline:0;min-width:0;width:100%;height:100%;font-size:13px;color:var(--ink)}.searchbox input:focus-visible{outline:0}.searchbox:focus-within{border-color:#96c9b2;box-shadow:0 0 0 3px #e0f5e9}.searchbox input::placeholder{color:#acb5ae}.searchbox kbd{color:#a4aea7;background:#f5f7f5;border:1px solid #eaeeea;padding:2px 6px;border-radius:5px;font-size:11px}.tier-select-label{display:flex;align-items:center;gap:10px;padding:0 13px;background:#fff;border:1px solid #e6e9e7;border-radius:10px;white-space:nowrap;font-size:11px;font-weight:650;color:#8b958e}.tier-select-label select{cursor:pointer;color:#36463a;border:none;background:#fff;font-size:12px;font-weight:700;min-width:103px;outline:0}.second-filters{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:15px}.tabbar{display:flex;align-items:center;gap:3px;background:#edf1ee;padding:4px;border-radius:10px}.tab{border:0;border-radius:8px;min-height:35px;padding:0 15px;font-size:12px;font-weight:700;color:#7c8980;background:transparent;transition:.15s}.tab:hover{color:var(--green)}.tab.active{background:white;color:var(--green-dark);box-shadow:0 2px 7px #111b1320}.tab span{font-size:10px;color:inherit;background:#e8f3eb;padding:1px 5px;border-radius:5px;margin-left:4px}.toolbar-actions{display:flex;gap:8px}.outline-button{min-height:37px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:9px;background:#fff;border:1px solid #e4eae5;color:#68776e;font-size:11px;font-weight:750;white-space:nowrap}.outline-button:hover{border-color:#b1d5bf;color:var(--green)}.outline-button.pressed{background:var(--green-lite);color:var(--green);border-color:#b5d9c6}.outline-button span{font-size:15px;line-height:1}.result-bar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 4px 17px;font-size:12px;font-weight:750}.muted{font-size:11px;font-weight:450;color:#9aa59b;margin-left:12px}.save-indicator{font-size:11px;color:#83958a;font-weight:550;display:flex;align-items:center;gap:7px}.indicator-dot{height:6px;width:6px;background:#76af91;border-radius:100%}.save-indicator.error,.save-indicator.error .indicator-dot{color:#bc593c;background-color:transparent}.save-indicator.error .indicator-dot{background:#bc593c}.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.word-card{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;min-height:99px;padding:18px 17px;border:1px solid #e9eeea;background:#fff;border-radius:12px;transition:border-color .15s,background .15s,box-shadow .15s}.word-card:hover{border-color:#b9d7c6;box-shadow:0 3px 10px rgba(25,71,46,.04)}.word-card.is-marked{background:#f8fcf8;border-color:#a7d6bd}.word-number{color:#acb6ae;font-size:10px;font-weight:680;padding-top:5px;font-variant-numeric:tabular-nums}.word-card.is-marked .word-number{color:#6eab88}.word-content{min-width:0}.word-heading{display:flex;align-items:center;gap:9px;margin-bottom:7px;min-width:0}.word-heading strong{font-size:17px;letter-spacing:-.3px;line-height:1.25;overflow-wrap:anywhere}.word-card.is-marked .word-heading strong{color:var(--green-dark)}.speak{border:0;background:transparent;padding:2px;display:inline-grid;place-items:center;color:#aebbb1;border-radius:5px;flex:none}.speak:hover{background:var(--green-lite);color:var(--green)}.speak svg{width:14px;height:14px}.word-meaning{color:#717d75;font-size:12px;line-height:1.5;min-height:19px}.word-category{color:#9cab9f;font-size:10px;margin-top:7px;line-height:1.45}.word-meaning .reveal{border:0;border-radius:5px;color:#409274;background:#e9f4ed;font-size:11px;padding:4px 8px;margin:0}.mark-control{display:flex;align-items:flex-start;gap:5px;color:#a4aea6;font-size:11px;white-space:nowrap;cursor:pointer;padding-top:3px;user-select:none}.mark-control input{position:absolute;opacity:0;width:1px;height:1px}.mark-box{width:17px;height:17px;border:1.6px solid #cbd6cd;border-radius:5px;display:grid;place-items:center;color:transparent;background:white;transition:.15s;margin-top:-1px}.mark-box svg{height:13px;width:13px;stroke-width:3px}.mark-control input:checked+.mark-box{background:var(--green);border-color:var(--green);color:#fff}.mark-control input:focus-visible+.mark-box{outline:3px solid #bbddc7;outline-offset:2px}.mark-control input:checked~.mark-text{color:var(--green-dark);font-weight:780}.mark-control input:disabled+.mark-box{opacity:.55}.loading,.empty-state{grid-column:1/-1;padding:65px 20px;text-align:center;border:1px dashed #d9e4db;border-radius:12px;color:#8a978b;font-size:13px}.spinner{width:15px;height:15px;border:2px solid #cad8ca;border-top-color:#3d9674;border-radius:50%;display:inline-block;vertical-align:middle;animation:spin .6s linear infinite;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}.empty-state strong{display:block;color:#4a6454;font-size:19px;margin-bottom:9px}.empty-state p{margin:0;line-height:1.8}.pagination{margin-top:28px;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.page-btn{height:36px;min-width:37px;border-radius:8px;border:1px solid #e4ebe4;color:#718076;background:#fff;font-size:12px;font-weight:750}.page-btn:hover:not(:disabled){border-color:#96cdb0;color:var(--green)}.page-btn.current{background:var(--green);color:white;border-color:var(--green)}.page-btn:disabled{opacity:.38}.footer{border-top:1px solid #e3e9e3;padding:21px 0 40px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;font-size:11px;color:#96a19a;line-height:1.8}.footer>div{display:flex;gap:14px;align-items:baseline;white-space:nowrap}.footer strong{color:#577866;font-weight:800}.footer p{max-width:550px;margin:0;text-align:right}.toast{position:fixed;right:24px;bottom:24px;padding:12px 18px;max-width:360px;background:#20382b;color:white;border-radius:10px;box-shadow:0 15px 35px #0002;z-index:100;font-size:12px;transform:translateY(90px);opacity:0;transition:.2s;pointer-events:none}.toast.show{transform:translateY(0);opacity:1}.toast.error{background:#9c4530}
@media(max-width:980px){.hero{grid-template-columns:1fr 0.86fr;gap:26px}.hero h1{font-size:43px}.second-filters{align-items:flex-start;flex-direction:column}.toolbar-actions{align-self:flex-end}.word-card{gap:8px;grid-template-columns:26px minmax(0,1fr) auto;padding:16px 11px}}
@media(max-width:760px){.shell{padding-left:17px;padding-right:17px}.topbar-content{height:65px}.topbar-detail{font-size:10px}.hero{grid-template-columns:1fr;padding:43px 0 42px;gap:28px}.hero h1{font-size:42px;margin:14px 0 14px;letter-spacing:-1.8px}.hero p{font-size:13px}.hero-note{margin-top:17px}.summary{padding:22px 25px}.big-stat{margin:13px 0 14px}.big-stat strong{font-size:52px}.workspace{padding:17px 13px;margin:0 -2px 30px;border-radius:15px}.workspace-title{align-items:start}.workspace-subtitle{display:none}.first-filters{flex-direction:column}.searchbox{min-height:43px}.tier-select-label{min-height:43px;justify-content:space-between}.tier-select-label select{min-width:0}.filters-panel{padding:12px}.second-filters{gap:12px}.tabbar{width:100%}.tab{flex:1;padding:0 8px;font-size:11px}.toolbar-actions{width:100%;justify-content:flex-end}.word-grid{grid-template-columns:1fr}.word-card{padding:17px 15px;grid-template-columns:28px minmax(0,1fr) auto}.word-heading strong{font-size:18px}.result-bar{align-items:start}.save-indicator{font-size:10px;white-space:nowrap}.footer{flex-direction:column;gap:6px}.footer p{text-align:left}.footer>div{white-space:normal}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ------------------------------------------------------------
   Wordday · Dark edition
   Visual-only changes: vocabulary data, D1 API and save semantics
   remain identical to the original light edition.
   ------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --ink: #e9f2f5;
  --sub: #a4b8c4;
  --line: #273848;
  --paper: #0a111b;
  --white: #152130;
  --green: #64dfb3;
  --green-dark: #82edc7;
  --green-lite: #153d36;
  --orange: #f0bd70;
  --orange-soft: #3b3120;
  --shadow: 0 24px 70px rgba(0, 0, 0, .33);
}
html { color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse 52% 370px at 87% 70px, rgba(39, 137, 110, .115), transparent 72%),
    radial-gradient(ellipse 43% 380px at 8% 520px, rgba(49, 85, 148, .11), transparent 79%),
    var(--paper);
  color: var(--ink);
}
::selection { color: #09251e; background: #78e7bc; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline-color: #6cddba;
}
.topbar {
  position: relative;
  background: rgba(12, 21, 32, .87);
  border-bottom: 1px solid #243543;
  backdrop-filter: blur(18px);
}
.brand-icon {
  background: linear-gradient(135deg, #38bc92, #247c7b);
  color: #081d1d;
  box-shadow: 0 4px 18px rgba(30, 165, 133, .18);
}
.brand small { color: #839ba8; }
.topbar-detail { color: #a8bdc6; }
.live-dot { background: #70e8b6; box-shadow: 0 0 0 4px rgba(67, 210, 154, .12), 0 0 16px #3ed9a269; }
.eyebrow { color: #74dcb2; }
.eyebrow-line { background: #2d6b5b; }
.hero h1 { color: #f4f9fa; }
.hero h1 em {
  color: #7be6bc;
  text-shadow: 0 4px 32px rgba(55, 218, 166, .12);
}
.hero p { color: #b1c2c9; }
.hero-note { color: #a2b6be; }
.note-icon { color: #8dedc5; background: #193c36; }
.summary {
  background: linear-gradient(145deg, #1a2a38, #111d2b 75%);
  border: 1px solid #2c4753;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .04);
}
.summary::after { border-color: rgba(83, 215, 164, .065); }
.summary-head { color: #b4c7cf; }
.summary-symbol { color: #8be7c1; background: #22473f; }
.big-stat strong { color: #f3faf9; }
.big-stat span { color: #a1b6c1; }
.progress-track { background: #2a3b47; }
.progress-fill {
  background: linear-gradient(90deg, #279d83, #80e5ae);
  box-shadow: 0 0 16px rgba(72, 215, 170, .28);
}
.stat-foot { color: #96abb7; }
.stat-divider { background: #2a3b4a; }
.summary-bottom { color: #acbec5; }
.summary-bottom strong { color: #88e8bf; }
.workspace {
  background: #101b29;
  border: 1px solid #273948;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .17);
}
.section-kicker { color: #6fae9a; }
.workspace h2 { color: #f0f7f7; }
.workspace-subtitle { color: #8da4b0; }
.heading-dot { color: #70dcb1; }
.filters-panel { background: #142332; border: 1px solid #29404f; }
.searchbox, .tier-select-label {
  background: #0e1a28;
  border-color: #344655;
  color: #b0c3cc;
}
.searchbox { color: #8ca9b6; }
.searchbox input, .tier-select-label select { background: transparent; color: #e8f3f4; }
.searchbox input::placeholder { color: #839da9; }
.searchbox:focus-within {
  border-color: #66d6ad;
  box-shadow: 0 0 0 3px rgba(73, 210, 159, .14);
}
.searchbox kbd { color: #b2c8d1; background: #223446; border-color: #405565; }
.tier-select-label { color: #a2b6c2; }
.tier-select-label select option { background: #152536; color: #e3f2f4; }
.tabbar { background: #0e1b29; border: 1px solid #273d4b; }
.tab { color: #a3b7c2; }
.tab:hover { color: #9aefcb; }
.tab.active {
  color: #98f0ce;
  background: #234c45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .21);
}
.tab span { background: #275748; }
.outline-button {
  background: #162735;
  border-color: #38505d;
  color: #bdced5;
}
.outline-button:hover { border-color: #6bd5ad; color: #9deecb; background: #1c3440; }
.outline-button.pressed { background: #1c4b3f; color: #a1efd1; border-color: #3e987b; }
.result-bar { color: #d9e5e8; }
.muted { color: #9aafba; }
.save-indicator { color: #98c4b2; }
.indicator-dot { background: #71dfb2; }
.save-indicator.error { color: #ffac98; }
.save-indicator.error .indicator-dot { background: #f39888; }
.word-card {
  background: #162331;
  border: 1px solid #2c3e4c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .012);
}
.word-card:hover {
  background: #1b2c3a;
  border-color: #507767;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
}
.word-card.is-marked {
  background: linear-gradient(110deg, #17382f, #172b34 82%);
  border-color: #448c75;
  box-shadow: inset 3px 0 0 #58c99f;
}
.word-number { color: #879ca9; }
.word-card.is-marked .word-number { color: #80d6b3; }
.word-heading strong { color: #f0f7f8; }
.word-card.is-marked .word-heading strong { color: #a2f5d5; }
.word-meaning { color: #b6c8d0; }
.word-category { color: #90a7b0; }
.speak { color: #9cb4c1; }
.speak:hover { color: #98edc9; background: #224940; }
.word-meaning .reveal { background: #255044; color: #b6f6d9; }
.mark-control { color: #b2c1c7; }
.mark-box { background: #0d1a26; border-color: #67818b; }
.mark-control input:checked+.mark-box { background: #63d4a9; border-color: #63d4a9; color: #0d2922; }
.mark-control input:focus-visible+.mark-box { outline-color: #8beac5; }
.mark-control input:checked~.mark-text { color: #a3eed0; }
.loading, .empty-state { border-color: #39505e; color: #a3bac4; }
.spinner { border-color: #314c5a; border-top-color: #81e0b8; }
.empty-state strong { color: #d9efe8; }
.page-btn { background: #162735; color: #bed0d7; border-color: #344957; }
.page-btn:hover:not(:disabled) { color: #9befcb; border-color: #73d6af; }
.page-btn.current { color: #0b251e; background: #75deb3; border-color: #75deb3; }
.footer { border-color: #273b4a; color: #97aeb9; }
.footer strong { color: #a8eacb; }
.toast { background: #285448; color: #e8fff4; border: 1px solid #418d73; box-shadow: 0 20px 48px #0008; }
.toast.error { background: #6b302b; color: #ffe5df; border-color: #ab665f; }
@media (prefers-color-scheme: light) {
  /* Intentionally dark even when device theme is light. */
  :root { color-scheme: dark; }
}