:root{--shape-xs: 8px;--shape-sm: 12px;--shape-md: 16px;--shape-lg: 24px;--shape-xl: 28px;--shape-2xl: 32px;--shape-full: 999px;--ease-standard: cubic-bezier(.2, .7, .2, 1);--ease-emphasized: cubic-bezier(.3, 1.5, .45, 1);--ease-decel: cubic-bezier(.05, .7, .1, 1);--dur-fast: .16s;--dur-med: .28s;--dur-slow: .42s;--font: "Roboto Flex", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;--gap: 16px;--page-pad: 20px;--nav-h: 80px;--md-sys-color-primary: #6750a4;--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: #e9ddff;--md-sys-color-on-primary-container: #21005d;--md-sys-color-secondary: #625b71;--md-sys-color-on-secondary: #ffffff;--md-sys-color-secondary-container: #e8def8;--md-sys-color-on-secondary-container: #1e192b;--md-sys-color-tertiary: #7d5260;--md-sys-color-on-tertiary: #ffffff;--md-sys-color-tertiary-container: #ffd8e4;--md-sys-color-on-tertiary-container: #31111d;--md-sys-color-error: #ba1a1a;--md-sys-color-on-error: #ffffff;--md-sys-color-error-container: #ffdad6;--md-sys-color-on-error-container: #410002;--md-sys-color-background: #fef7ff;--md-sys-color-on-background: #1d1b21;--md-sys-color-surface: #fef7ff;--md-sys-color-on-surface: #1d1b21;--md-sys-color-surface-variant: #e7e0ec;--md-sys-color-on-surface-variant: #49454f;--md-sys-color-outline: #cac4d0;--md-sys-color-outline-variant: #e7e0ec;--md-sys-color-surface-container: #f3edf7;--md-sys-color-surface-container-high: #ece6f0;--md-sys-color-surface-container-highest: #e6e0e9;--md-sys-color-surface-container-low: #f8f2fc;--md-sys-color-surface-container-lowest: #ffffff;--md-sys-color-surface-bright: #ffffff;--md-sys-color-surface-dim: #ded8e1;--md-sys-color-inverse-surface: #322f35;--md-sys-color-inverse-on-surface: #f5eff4;--md-sys-color-inverse-primary: #cfbcff;--md-sys-color-shadow: #000000;--md-sys-color-scrim: #000000}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{font-family:var(--font);background:var(--md-sys-color-background);color:var(--md-sys-color-on-background);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}.app-shell{max-width:720px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;display:flex;flex-direction:column;background:var(--md-sys-color-background)}.topbar{position:sticky;top:0;z-index:30;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--page-pad) 14px;display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--md-sys-color-background) 82%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}.topbar .tb-title{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:0}.topbar .tb-sub{font-size:13px;color:var(--md-sys-color-on-surface-variant);font-weight:500}.topbar .spacer{flex:1}.icon-btn{width:44px;height:44px;border-radius:var(--shape-full);display:grid;place-items:center;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container-high);transition:transform var(--dur-fast) var(--ease-emphasized),background var(--dur-fast) var(--ease-standard)}.icon-btn:active{transform:scale(.88)}.page{flex:1;padding:8px var(--page-pad) calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 24px);animation:page-in var(--dur-med) var(--ease-decel)}@keyframes page-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.nav-bar{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:50%;transform:translate(-50%);z-index:40;display:flex;gap:4px;padding:8px;border-radius:var(--shape-full);background:color-mix(in srgb,var(--md-sys-color-surface-container-highest) 88%,transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 12px 30px -8px color-mix(in srgb,var(--md-sys-color-shadow) 40%,transparent),0 2px 6px color-mix(in srgb,var(--md-sys-color-shadow) 18%,transparent);max-width:calc(100vw - 24px)}.nav-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:var(--shape-full);min-width:60px;color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600;transition:color var(--dur-fast) var(--ease-standard)}.nav-item svg{width:24px;height:24px}.nav-item.active{color:var(--md-sys-color-on-secondary-container)}.nav-item.active .nav-pill{background:var(--md-sys-color-secondary-container)}.nav-pill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--shape-full);background:transparent;transition:background var(--dur-fast) var(--ease-standard);z-index:-1}.nav-item .nav-label{position:relative}.card{background:var(--md-sys-color-surface-container-low);border-radius:var(--shape-xl);padding:20px;box-shadow:0 2px 8px color-mix(in srgb,var(--md-sys-color-shadow) 6%,transparent)}.card.brand{background:linear-gradient(135deg,var(--md-sys-color-primary-container),var(--md-sys-color-tertiary-container));color:var(--md-sys-color-on-primary-container)}.card.tint{background:var(--md-sys-color-surface-container)}.section-title{font-size:15px;font-weight:700;color:var(--md-sys-color-on-surface-variant);margin:22px 4px 10px;letter-spacing:.2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--shape-full);padding:14px 22px;font-size:15px;font-weight:700;letter-spacing:.2px;transition:transform var(--dur-fast) var(--ease-emphasized),box-shadow var(--dur-fast) var(--ease-standard),filter var(--dur-fast);-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.95)}.btn.filled{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:0 6px 16px -4px color-mix(in srgb,var(--md-sys-color-primary) 60%,transparent)}.btn.filled.tertiary{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary);box-shadow:0 6px 16px -4px color-mix(in srgb,var(--md-sys-color-tertiary) 60%,transparent)}.btn.tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.btn.outlined{background:transparent;color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1.5px var(--md-sys-color-outline)}.btn.block{width:100%}.btn.lg{padding:18px 24px;font-size:17px}.grade-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:18px}.grade-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:var(--shape-lg);font-weight:800;font-size:15px;transition:transform var(--dur-fast) var(--ease-emphasized)}.grade-btn:active{transform:scale(.92)}.grade-btn .g-emoji{font-size:26px}.grade-btn.again{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.grade-btn.hard{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.grade-btn.easy{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--shape-full);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:600}.chip.primary{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.chip.tertiary{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.flashcard-wrap{perspective:1600px;margin:8px 0 4px}.flashcard{position:relative;width:100%;height:340px;transform-style:preserve-3d;transition:transform var(--dur-slow) var(--ease-emphasized);cursor:pointer}.flashcard.flipped{transform:rotateY(180deg)}.flashcard .face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--shape-2xl);padding:28px;display:flex;flex-direction:column;box-shadow:0 14px 36px -10px color-mix(in srgb,var(--md-sys-color-shadow) 28%,transparent);overflow:hidden}.flashcard .face.front{background:linear-gradient(150deg,var(--md-sys-color-primary),color-mix(in srgb,var(--md-sys-color-tertiary) 80%,var(--md-sys-color-primary)));color:var(--md-sys-color-on-primary);align-items:center;justify-content:center;text-align:center}.flashcard .face.back{transform:rotateY(180deg);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);justify-content:flex-start}.flashcard .big-word{font-size:46px;font-weight:800;letter-spacing:-1px;line-height:1.05}.flashcard .hint{position:absolute;bottom:20px;font-size:13px;opacity:.85;font-weight:600}.flashcard .word-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.flashcard .word-title{font-size:32px;font-weight:800;letter-spacing:-.5px}.flashcard .phonetic{font-size:18px;color:var(--md-sys-color-primary);font-weight:600;margin-bottom:14px}.flashcard .def{font-size:18px;line-height:1.55;color:var(--md-sys-color-on-surface)}.speak-btn{width:40px;height:40px;border-radius:var(--shape-full);display:grid;place-items:center;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);transition:transform var(--dur-fast) var(--ease-emphasized)}.speak-btn:active{transform:scale(.85)}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stat-cell{background:var(--md-sys-color-surface-container-low);border-radius:var(--shape-lg);padding:16px}.stat-cell .num{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.1}.stat-cell .lbl{font-size:13px;color:var(--md-sys-color-on-surface-variant);font-weight:600;margin-top:2px}.ring-wrap{display:flex;align-items:center;gap:20px}.ring-center{font-weight:800;font-size:22px}.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ach{position:relative;border-radius:var(--shape-lg);padding:16px;background:var(--md-sys-color-surface-container-low);overflow:hidden;transition:transform var(--dur-fast) var(--ease-emphasized)}.ach:active{transform:scale(.97)}.ach.locked{opacity:.62;filter:grayscale(.7)}.ach .ach-icon{font-size:34px;line-height:1}.ach .ach-title{font-size:16px;font-weight:800;margin-top:10px}.ach .ach-desc{font-size:12.5px;color:var(--md-sys-color-on-surface-variant);margin-top:3px;font-weight:500}.ach .ach-bar{height:7px;border-radius:var(--shape-full);background:var(--md-sys-color-surface-container-highest);margin-top:12px;overflow:hidden}.ach .ach-bar>i{display:block;height:100%;border-radius:var(--shape-full);background:linear-gradient(90deg,var(--md-sys-color-primary),var(--md-sys-color-tertiary));transition:width var(--dur-slow) var(--ease-standard)}.ach .ach-value{position:absolute;top:14px;right:14px;font-size:12px;font-weight:800;color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);padding:3px 9px;border-radius:var(--shape-full)}.word-list{display:flex;flex-direction:column;gap:10px}.word-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--shape-lg);background:var(--md-sys-color-surface-container-low)}.word-row .wr-word{font-size:17px;font-weight:800}.word-row .wr-phon{font-size:13px;color:var(--md-sys-color-primary);font-weight:600}.word-row .wr-def{font-size:13px;color:var(--md-sys-color-on-surface-variant);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.word-row .spacer{flex:1}.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.hero{border-radius:var(--shape-2xl);padding:24px;background:linear-gradient(140deg,var(--md-sys-color-primary),color-mix(in srgb,var(--md-sys-color-tertiary) 75%,var(--md-sys-color-primary)));color:var(--md-sys-color-on-primary);position:relative;overflow:hidden}.hero h1{margin:0;font-size:30px;font-weight:800;letter-spacing:-1px}.hero p{margin:8px 0 0;font-size:14px;opacity:.92;font-weight:500;max-width:80%}.hero .hero-blob{position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:color-mix(in srgb,var(--md-sys-color-on-primary) 18%,transparent)}.hero .hero-blob2{position:absolute;right:40px;bottom:-60px;width:120px;height:120px;border-radius:50%;background:color-mix(in srgb,var(--md-sys-color-on-primary) 12%,transparent)}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.muted{color:var(--md-sys-color-on-surface-variant);font-weight:500}.center{text-align:center}.mt{margin-top:14px}.mt-lg{margin-top:22px}.pill-toggle{display:inline-flex;background:var(--md-sys-color-surface-container-high);border-radius:var(--shape-full);padding:4px;gap:4px}.pill-toggle button{padding:9px 18px;border-radius:var(--shape-full);font-weight:700;font-size:14px;color:var(--md-sys-color-on-surface-variant);transition:all var(--dur-fast) var(--ease-standard)}.pill-toggle button.on{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.empty{text-align:center;padding:50px 20px;color:var(--md-sys-color-on-surface-variant)}.empty .big{font-size:48px}.progress-line{height:10px;border-radius:var(--shape-full);background:var(--md-sys-color-surface-container-highest);overflow:hidden}.progress-line>i{display:block;height:100%;border-radius:var(--shape-full);background:linear-gradient(90deg,var(--md-sys-color-primary),var(--md-sys-color-tertiary))}.swatches{display:flex;gap:12px;flex-wrap:wrap}.swatch{width:46px;height:46px;border-radius:var(--shape-full);display:grid;place-items:center;font-size:20px;box-shadow:0 4px 10px -2px color-mix(in srgb,var(--md-sys-color-shadow) 25%,transparent);transition:transform var(--dur-fast) var(--ease-emphasized);outline:3px solid transparent}.swatch:active{transform:scale(.9)}.swatch.sel{outline-color:var(--md-sys-color-on-surface);outline-offset:3px}.fab{position:fixed;right:max(20px,calc(50% - 320px));bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 18px);z-index:35;width:64px;height:64px;border-radius:var(--shape-full);background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary);display:grid;place-items:center;box-shadow:0 12px 26px -6px color-mix(in srgb,var(--md-sys-color-tertiary) 60%,transparent);transition:transform var(--dur-fast) var(--ease-emphasized)}.fab:active{transform:scale(.9) rotate(-8deg)}.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%);z-index:60;background:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);padding:14px 22px;border-radius:var(--shape-full);font-weight:700;font-size:14px;box-shadow:0 10px 30px -8px color-mix(in srgb,var(--md-sys-color-shadow) 50%,transparent);display:flex;align-items:center;gap:10px;animation:toast-in var(--dur-med) var(--ease-emphasized);max-width:calc(100vw - 40px)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,20px) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;background:color-mix(in srgb,var(--md-sys-color-scrim) 40%,transparent);display:flex;align-items:flex-end;justify-content:center;animation:fade var(--dur-fast) var(--ease-standard)}@keyframes fade{0%{opacity:0}to{opacity:1}}.sheet{width:100%;max-width:720px;background:var(--md-sys-color-surface-container-low);border-radius:var(--shape-2xl) var(--shape-2xl) 0 0;padding:22px var(--page-pad) calc(28px + env(safe-area-inset-bottom,0px));animation:sheet-up var(--dur-med) var(--ease-emphasized);max-height:86vh;overflow-y:auto}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}.sheet h2{margin:0 0 6px;font-size:22px;font-weight:800}.loader{display:grid;place-items:center;height:70vh;color:var(--md-sys-color-on-surface-variant)}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--md-sys-color-on-surface-variant)}.legend i{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-1px}