*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root,[data-theme=light]{--bg-primary: #fafafa;--bg-secondary: #f0f0f0;--bg-sidebar: #ffffff;--text-primary: #1a1a1a;--text-secondary: #666;--text-tertiary: #aaa;--border: #e0e0e0;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-subtle: #dbeafe;--disabled: #ccc;--danger: #b91c1c;--overlay: rgba(0, 0, 0, .15);--font-sans: -apple-system, "Helvetica Neue", Arial, sans-serif;--font-serif: "Noto Serif SC", "Songti SC", Georgia, serif;--transition: .22s ease;--transition-slow: .4s ease;--sidebar-shadow: 4px 0 24px rgba(0, 0, 0, .08)}[data-theme=dark]{--bg-primary: #000000;--bg-secondary: #111111;--bg-sidebar: #0a0a0a;--text-primary: #e8e8e8;--text-secondary: #888;--text-tertiary: #555;--border: #2a2a2a;--accent: #60a5fa;--accent-hover: #93c5fd;--accent-subtle: #1e3a5f;--disabled: #444;--danger: #ef4444;--overlay: rgba(0, 0, 0, .5);--sidebar-shadow: 4px 0 24px rgba(0, 0, 0, .3)}html,body{height:100%;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);transition:background var(--transition-slow),color var(--transition-slow);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}#root{height:100%}.layout{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;flex-shrink:0;position:relative;z-index:10}.top-bar-spacer{width:36px}.hamburger-button{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;border-radius:4px}.hamburger-bar{display:block;width:20px;height:1.5px;background:var(--text-secondary);transition:background var(--transition)}.hamburger-button:hover .hamburger-bar{background:var(--text-primary)}.progress{display:flex;flex-direction:column;align-items:center;gap:2px}.progress-position{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-tertiary);letter-spacing:.04em;transition:color var(--transition-slow)}.progress-clickable{cursor:pointer;transition:color var(--transition)}.progress-clickable:hover{color:var(--text-secondary)}.progress-input{font:inherit;font-size:inherit;font-variant-numeric:tabular-nums;letter-spacing:inherit;color:var(--text-primary);background:none;border:none;outline:none;width:3ch;text-align:right;caret-color:var(--accent);padding:0;margin:0;-moz-appearance:textfield}.progress-input::-webkit-outer-spin-button,.progress-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.progress-separator{color:var(--text-tertiary)}.progress-learned{font-size:11px;color:var(--accent);font-weight:500;transition:color var(--transition-slow)}.sidebar-backdrop{position:fixed;inset:0;background:var(--overlay);z-index:100;opacity:0;pointer-events:none;transition:opacity .25s ease}.sidebar-backdrop--visible{opacity:1;pointer-events:auto}.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;background:var(--bg-sidebar);z-index:101;transform:translate(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:var(--sidebar-shadow);display:flex;flex-direction:column;overflow-y:auto;transition:transform .28s cubic-bezier(.4,0,.2,1),background var(--transition-slow)}.sidebar--open{transform:translate(0)}.sidebar-header{display:flex;justify-content:flex-end;padding:16px 20px 8px}.sidebar-close{font-size:16px;color:var(--text-tertiary);background:none;border:none;cursor:pointer;padding:4px 8px;transition:color var(--transition)}.sidebar-close:hover{color:var(--text-primary)}.sidebar-section{padding:12px 20px}.sidebar-section-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:lowercase;color:var(--text-tertiary);margin-bottom:12px}.sidebar-collection-list{list-style:none;display:flex;flex-direction:column;gap:2px}.sidebar-collection-item{display:flex}.sidebar-checkbox-label{display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer;width:100%;border-radius:4px;transition:background var(--transition)}.sidebar-checkbox-label:hover{background:var(--bg-secondary)}.sidebar-checkbox{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--border);border-radius:3px;cursor:pointer;flex-shrink:0;position:relative;transition:all var(--transition)}.sidebar-checkbox:checked{background:var(--accent);border-color:var(--accent)}.sidebar-checkbox:checked:after{content:"";position:absolute;top:1px;left:4.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.sidebar-checkbox-text{font-size:13px;color:var(--text-secondary)}.sidebar-action{display:block;width:100%;text-align:left;font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);background:none;border:none;cursor:pointer;padding:10px 4px;border-radius:4px;transition:all var(--transition)}.sidebar-action:hover{background:var(--bg-secondary);color:var(--text-primary)}.sidebar-action--danger,.sidebar-action--danger:hover{color:var(--danger)}.card-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-height:0;padding-bottom:60px}.hanzi-display{font-family:var(--font-serif);font-size:clamp(120px,25vw,220px);font-weight:400;line-height:1.1;color:var(--text-primary);-webkit-user-select:none;user-select:none;text-align:center;margin-bottom:28px;position:relative;z-index:5;animation:char-enter .3s cubic-bezier(.25,.1,.25,1) both;transition:transform .2s ease,opacity .2s ease,color var(--transition-slow)}.hanzi-display--clickable{cursor:pointer}.hanzi-display--clickable:hover{opacity:.7;transform:scale(1.02)}.hanzi-display--clickable:active{transform:scale(.97)}@keyframes char-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card-details{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:70px;position:relative;z-index:5;animation:fade-in .35s cubic-bezier(.25,.1,.25,1) both}.translation{display:flex;flex-direction:column;align-items:center;gap:4px}.translation-pinyin{font-size:16px;font-style:italic;color:var(--text-secondary);letter-spacing:.02em;transition:color var(--transition-slow)}.translation-meaning{font-size:15px;font-weight:500;color:var(--text-primary);transition:color var(--transition-slow)}.context-note{font-size:13px;line-height:1.6;color:var(--text-tertiary);text-align:center;max-width:340px;padding:0 20px;transition:color var(--transition-slow);animation:fade-in .45s cubic-bezier(.25,.1,.25,1) both;animation-delay:80ms}.idle-hint{font-size:13px;color:var(--text-tertiary);opacity:0;animation:hint-appear .8s ease forwards}@keyframes hint-appear{0%{opacity:0}to{opacity:.6}}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.nav-zone{position:fixed;top:0;bottom:0;width:50%;display:flex;align-items:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}.nav-zone--left{left:0;justify-content:flex-start;padding-left:16px}.nav-zone--right{right:0;justify-content:flex-end;padding-right:16px}.nav-zone--disabled{cursor:default}.nav-zone-arrow{font-size:22px;color:var(--text-tertiary);opacity:0;transition:opacity .3s ease,transform .3s ease;-webkit-user-select:none;user-select:none}.nav-zone--left .nav-zone-arrow{transform:translate(-4px)}.nav-zone--right .nav-zone-arrow{transform:translate(4px)}.nav-zone:not(.nav-zone--disabled):hover .nav-zone-arrow{opacity:.8;transform:translate(0)}.nav-zone--disabled .nav-zone-arrow{opacity:0}.bottom-bar{position:fixed;bottom:20px;right:20px;z-index:10}.mode-switch{display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none}.mode-switch--disabled{opacity:.4;pointer-events:none}.mode-switch-label{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:lowercase;color:var(--text-tertiary);transition:color var(--transition)}.mode-switch-label--active{color:var(--text-secondary)}.mode-switch-track{position:relative;width:36px;height:20px;background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:background .25s ease,border-color .25s ease;padding:0}.mode-switch-track--on{background:var(--accent-subtle);border-color:var(--accent)}.mode-switch-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--text-tertiary);border-radius:50%;transition:left .3s cubic-bezier(.34,1.56,.64,1),background .25s ease}.mode-switch-track--on .mode-switch-thumb{left:18px;background:var(--accent)}.empty-state{font-size:14px;color:var(--text-tertiary);text-align:center;padding:40px 20px;line-height:1.6;animation:fade-in .4s ease both}@media(max-width:480px){.top-bar{padding:12px 16px}.hanzi-display{margin-bottom:20px}.nav-zone--left{padding-left:10px}.nav-zone--right{padding-right:10px}.nav-zone-arrow{font-size:18px}.bottom-bar{bottom:16px;right:16px}.card-view{padding-bottom:50px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}