:root{--bg-primary: #f0f4f8;--bg-secondary: #e2e8f0;--bg-tertiary: #cbd5e1;--bg-card: #FFFFFF;--bg-dark: #1e293b;--bg-surface: #f8fafc;--bg-hover: #edf1f7;--text-tertiary: #9ca3af;--border-color-light: #f1f5f9;--accent-primary: #FF6B6B;--accent-primary-rgb: 255, 107, 107;--accent-primary-hover: #e85555;--accent-primary-shadow: #cc584f;--accent-secondary: #a855f7;--accent-secondary-rgb: 168, 85, 247;--accent-secondary-shadow: #9333ea;--accent-tertiary: #ffc800;--text-primary: #374151;--text-secondary: #6b7280;--text-muted: #9ca3af;--text-inverse: #FFFFFF;--success: #1cb0f6;--success-rgb: 28, 176, 246;--warning: #ffc800;--warning-rgb: 255, 200, 0;--error: #ff4b4b;--error-rgb: 255, 75, 75;--info: #1cb0f6;--info-rgb: 28, 176, 246;--word-new: #ffdfe0;--word-new-text: #ff4b4b;--word-learning: #fff4ce;--word-learning-text: #e5a400;--word-known: #e0f2fe;--word-known-text: #0284c7;--word-ignored: #f3f4f6;--level-beginner: #e0f2fe;--level-beginner-text: #0284c7;--level-elementary: #dff4ff;--level-elementary-text: #1899d6;--level-intermediate: #fff4ce;--level-intermediate-text: #e5a400;--level-upper: #ffe3cd;--level-upper-text: #ff7b00;--level-advanced: #ffdfe0;--level-advanced-text: #ff4b4b;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1.25rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 5rem;--font-sans: "Nunito", "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-jp: "Kosugi Maru", "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;--font-cn: "Noto Sans SC", "PingFang SC", sans-serif;--font-ko: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .8125rem;--text-sm: .9375rem;--text-base: 1.0625rem;--text-md: 1.1875rem;--text-lg: 1.3125rem;--text-xl: 1.5rem;--text-2xl: 1.75rem;--text-3xl: 2.25rem;--border-color: #e5e7eb;--border-width: 2px;--border-radius-sm: 12px;--border-radius: 16px;--border-radius-md: 20px;--border-radius-lg: 24px;--border-radius-pill: 999px;--border-radius-round: 50%;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .1);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .15);--icon-size-xs: 16px;--icon-size-sm: 20px;--icon-size-md: 24px;--icon-size-lg: 32px;--icon-size-xl: 40px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.34, 1.56, .64, 1);--transition-slow: .4s cubic-bezier(.34, 1.56, .64, 1);--transition-spring: .5s cubic-bezier(.175, .885, .32, 1.275);--btn-height-xs: 32px;--btn-height-sm: 40px;--btn-height-md: 48px;--btn-height-lg: 56px;--input-height-sm: 40px;--input-height-md: 48px;--input-height-lg: 56px;--focus-ring: 0 0 0 4px rgba(255, 107, 107, .3);--focus-ring-offset: 2px;--touch-target-min: 48px;--mobile-padding: 20px;--mobile-card-radius: 20px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--app-height: 100dvh;--bottom-nav-height: 4.25rem;--bottom-nav-safe-area: var(--safe-area-bottom);--bottom-nav-total-height: calc(var(--bottom-nav-height) + var(--bottom-nav-safe-area));--ai-purple: #ce82ff;--ai-pink: #ff79c6;--ai-gradient: linear-gradient(135deg, var(--ai-purple), var(--ai-pink));--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--z-toast: 800;--z-nav: 1000;--z-google-signin: 20000}:root.standalone-mode{--bottom-nav-height: 4rem;--bottom-nav-safe-area: min(var(--safe-area-bottom), 18px)}[data-theme=dark]{--bg-primary: #0f1117;--bg-secondary: #181818;--bg-tertiary: #2a2a2a;--bg-card: #212121;--border-color: #383838;--text-primary: #e5e5e5;--text-secondary: #a3a3a3;--text-muted: #737373;--text-inverse: #171717;--bg-surface: #262626;--bg-hover: #333333;--text-tertiary: #525252;--border-color-light: #2a2a2a;--word-new: rgba(255, 75, 75, .15);--word-new-text: #ff6b6b;--word-learning: rgba(255, 200, 0, .15);--word-learning-text: #ffd54f;--word-known: rgba(28, 176, 246, .15);--word-known-text: #60a5fa;--word-ignored: #2d2d2d;--level-beginner: rgba(2, 132, 199, .15);--level-beginner-text: #38bdf8;--level-elementary: rgba(24, 153, 214, .15);--level-elementary-text: #0ea5e9;--level-intermediate: rgba(229, 164, 0, .15);--level-intermediate-text: #fbbf24;--level-upper: rgba(255, 123, 0, .15);--level-upper-text: #f97316;--level-advanced: rgba(255, 75, 75, .15);--level-advanced-text: #f87171;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -1px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 10px 10px -5px rgba(0, 0, 0, .4)}html{min-height:100%}*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}:root{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);overflow-x:hidden}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;min-height:var(--app-height, 100dvh);overflow-x:hidden}@supports (-webkit-touch-callout: none){html{height:-webkit-fill-available}body{min-height:-webkit-fill-available}}.text-jp{font-family:var(--font-jp)}.text-cn{font-family:var(--font-cn)}.text-ko{font-family:var(--font-ko)}.text-mono{font-family:var(--font-mono)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;color:var(--text-primary)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}h4{font-size:var(--text-md)}h5{font-size:var(--text-base)}h6{font-size:var(--text-sm)}p{color:var(--text-secondary)}small{font-size:var(--text-sm)}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}@media (hover: hover){a:hover{color:var(--accent-secondary)}}ruby{ruby-align:center}ruby rt{font-size:.55em;color:var(--text-muted);font-weight:400}.word{cursor:pointer;padding:1px 3px;border-radius:3px;transition:all var(--transition-fast);display:inline}@media (hover: hover){.word:hover{background:var(--accent-tertiary);color:var(--text-primary)}}.word--new{background:var(--word-new);color:var(--word-new-text)}.word--learning{background:var(--word-learning);color:var(--word-learning-text)}.word--known{background:var(--word-known);color:var(--word-known-text)}.word--ignored{background:var(--word-ignored);opacity:.6}#credential_picker_container,.google-one-tap-modal-div{z-index:var(--z-google-signin)!important;position:fixed!important}@media (max-width: 768px){:root{--space-lg: 1rem;--space-xl: 1.5rem}h1{font-size:var(--text-2xl)}h2{font-size:var(--text-lg)}}@media (max-width: 480px){:root{--space-md: 1rem;--space-lg: 1.25rem}h1{font-size:var(--text-xl)}h2{font-size:var(--text-md)}.btn,button:not(.btn-icon),select{min-height:var(--touch-target-min)}.btn-icon{width:var(--touch-target-min);height:var(--touch-target-min)}input::placeholder,textarea::placeholder{font-size:var(--text-sm)}}*{scrollbar-width:thin;scrollbar-color:transparent transparent}*:hover,*:focus-within{scrollbar-color:rgba(0,0,0,.2) transparent}[data-theme=dark] *:hover,[data-theme=dark] *:focus-within{scrollbar-color:rgba(255,255,255,.2) transparent}::-webkit-scrollbar{width:6px;height:6px;background:transparent}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;transition:background .2s ease}*:hover::-webkit-scrollbar-thumb,*:focus-within::-webkit-scrollbar-thumb{background:#0003}*:hover::-webkit-scrollbar-thumb:hover{background:#00000059}[data-theme=dark] *:hover::-webkit-scrollbar-thumb,[data-theme=dark] *:focus-within::-webkit-scrollbar-thumb{background:#fff3}[data-theme=dark] *:hover::-webkit-scrollbar-thumb:hover{background:#ffffff59}html,body{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}@media (min-width: 769px){::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}}.container{max-width:100%;margin:0 auto;padding:0 var(--space-lg)}@media (max-width: 480px){.container{padding:0 var(--space-sm)}}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}.gap-2xs{gap:var(--space-2xs)}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.w-100{width:100%}.mt-auto{margin-top:auto}.mt-2xs{margin-top:var(--space-2xs)}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.py-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent-primary)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hidden{display:none!important}.invisible{visibility:hidden}.page-layout{display:grid;grid-template-columns:1fr minmax(340px,25vw);gap:var(--space-md);align-items:start;max-width:100%;margin:0 auto}.page-layout__main{min-width:0;display:flex;flex-direction:column;gap:var(--space-md)}.page-layout__sidebar{align-self:start;display:flex;flex-direction:column;gap:var(--space-md);position:sticky;top:var(--space-md)}@media (max-width: 1024px){.page-layout{grid-template-columns:1fr 280px}}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.page-layout{grid-template-columns:1fr;gap:var(--space-md)}.page-layout__sidebar.desktop-only{display:none!important}}.desktop-only{display:flex}.mobile-only{display:none}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.desktop-only{display:none!important}.mobile-only{display:block}}.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-total-height);background:var(--bg-card);padding:0;padding-bottom:var(--bottom-nav-safe-area);z-index:var(--z-nav);box-shadow:0 -1px 0 var(--border-color)}.bottom-nav__items{display:flex;justify-content:space-around;align-items:center;height:calc(var(--bottom-nav-total-height) - var(--bottom-nav-safe-area));max-width:31.25rem;margin:0 auto;padding:0 var(--space-sm)}.bottom-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:.25rem .5rem;margin:0;background:none;border:none;color:var(--text-secondary);font-size:.625rem;font-weight:500;cursor:pointer;transition:color var(--transition-fast);min-width:3.5rem;text-decoration:none;position:relative}.bottom-nav__item app-icon{position:relative;width:3rem;height:1.5rem;border-radius:.75rem;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--transition-fast)}.bottom-nav__item app-icon:before{content:"";position:absolute;inset:0;background:rgba(var(--accent-primary-rgb),.15);border-radius:.75rem;transform:scaleX(0);opacity:0;transition:transform .3s cubic-bezier(.2,0,0,1),opacity var(--transition-fast)}.bottom-nav__item.active{color:var(--accent-primary);font-weight:600}.bottom-nav__item.active app-icon{transform:translateY(-2px)}.bottom-nav__item.active app-icon:before{transform:scaleX(1);opacity:1}[data-theme=dark] .bottom-nav__item.active app-icon:before{background:rgba(var(--accent-primary-rgb),.25)}@media (max-width: 768px),(max-height: 500px) and (orientation: landscape){.bottom-nav{display:block}}button{background:none;border:none;padding:0;font-family:inherit;color:inherit;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);height:var(--btn-height-md);padding:0 var(--space-lg);font-family:var(--font-sans);font-size:var(--text-md);font-weight:700;line-height:1;border:2px solid transparent;border-radius:var(--border-radius-lg);cursor:pointer;transition:transform .1s cubic-bezier(.4,0,.2,1),box-shadow .1s cubic-bezier(.4,0,.2,1),background-color .2s;white-space:nowrap;flex-shrink:0;-webkit-user-select:none;user-select:none;letter-spacing:.01em}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;filter:grayscale(1)}.btn-primary{background:var(--accent-primary);color:var(--text-inverse);box-shadow:0 4px 0 var(--accent-primary-shadow)}@media (hover: hover){.btn-primary:hover:not(:disabled){background:var(--accent-primary-hover);transform:translateY(-2px);box-shadow:0 6px 0 var(--accent-primary-shadow)}}.btn-primary:active:not(:disabled){transform:translateY(4px)!important;box-shadow:0 0 0 var(--accent-primary-shadow)!important}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:2px solid var(--border-color);box-shadow:0 4px 0 var(--border-color)}@media (hover: hover){.btn-secondary:hover:not(:disabled){background:var(--bg-secondary);transform:translateY(-2px);box-shadow:0 6px 0 var(--border-color)}}.btn-secondary:active:not(:disabled){transform:translateY(4px)!important;box-shadow:0 0 0 var(--border-color)!important}.btn-ghost{background:transparent;color:var(--text-secondary);border:2px solid transparent}@media (hover: hover){.btn-ghost:hover:not(:disabled){background:var(--bg-secondary);color:var(--text-primary)}}.btn-danger{background:var(--error);color:var(--text-inverse)}@media (hover: hover){.btn-danger:hover:not(:disabled){opacity:.9}}.btn-xs{height:var(--btn-height-xs);padding:0 var(--space-sm);font-size:var(--text-xs)}.btn-sm{height:var(--btn-height-sm);padding:0 var(--space-sm);font-size:var(--text-sm)}.btn-lg{height:var(--btn-height-lg);padding:0 var(--space-lg);font-size:var(--text-md)}.btn-icon{aspect-ratio:1;width:auto;padding:0;border-radius:var(--border-radius-round)}.btn-icon app-icon{width:var(--icon-size-md);height:var(--icon-size-md)}input:not([type=checkbox]):not([type=radio]),textarea,select{font-family:var(--font-sans);font-size:1rem;padding:0 var(--space-md);height:var(--input-height-md);line-height:normal;border:2px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:0 4px 0 var(--border-color);background:var(--bg-card);color:var(--text-primary);transition:transform .1s cubic-bezier(.4,0,.2,1),box-shadow .1s cubic-bezier(.4,0,.2,1),background-color .2s,border-color .2s;width:100%;font-weight:600}input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem;accent-color:var(--accent-primary);cursor:pointer;vertical-align:middle}textarea{height:auto;min-height:100px;padding:var(--space-sm) var(--space-md);resize:vertical}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-secondary);box-shadow:0 4px 0 var(--accent-secondary),0 0 0 4px #ff6b6b33}input::placeholder,textarea::placeholder{color:var(--text-muted)}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.5rem}.input-sm{height:var(--input-height-sm);font-size:var(--text-sm);padding:0 var(--space-sm)}.input-lg{height:var(--input-height-lg);font-size:var(--text-md)}.input-group--icon{position:relative;width:100%}.input-group--icon input:not([type=checkbox]):not([type=radio]){padding-left:2.75rem;padding-right:2.75rem}.input-group--icon .input-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;display:flex;align-items:center;justify-content:center}.input-group--icon .clear-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0;border-radius:var(--border-radius-round);transition:all var(--transition-fast)}@media (hover: hover){.input-group--icon .clear-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}}.filter-chips{display:flex;align-items:center;gap:var(--space-sm);padding:0 var(--space-md) 6px;margin-bottom:var(--space-md);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.filter-chips::-webkit-scrollbar{display:none}.filter-chip{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:0 var(--space-md);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:700;line-height:1;background:var(--bg-card);color:var(--text-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-pill);box-shadow:0 4px 0 var(--border-color);cursor:pointer;transition:transform .1s cubic-bezier(.4,0,.2,1),box-shadow .1s cubic-bezier(.4,0,.2,1),background-color .2s;white-space:nowrap;flex-shrink:0;-webkit-user-select:none;user-select:none;letter-spacing:.01em}.filter-chips .btn{white-space:nowrap;flex-shrink:0}.filter-chip app-icon{display:flex}.filter-chip.active{background:var(--accent-primary);color:var(--text-inverse);border-color:transparent;box-shadow:0 4px 0 var(--accent-primary-shadow)}@media (hover: hover){.filter-chip:hover:not(.active){background:var(--bg-secondary);transform:translateY(-2px);box-shadow:0 6px 0 var(--border-color)}.filter-chip.active:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--accent-primary-shadow)}}.filter-chip:active:not(:disabled){transform:translateY(4px)!important;box-shadow:0 0 0 var(--border-color)!important}.filter-chip.active:active:not(:disabled){box-shadow:0 0 0 var(--accent-primary-shadow)!important}.filter-chips__spacer{flex:1}@media (max-width: 600px){.filter-chips .chip-text,.filter-chips .btn .btn-text{display:none}.filter-chips .filter-chip,.filter-chips .btn{padding:var(--space-xs);aspect-ratio:1;justify-content:center}.filter-chips{gap:var(--space-xs)}.filter-chips__spacer{display:none}}.card{background:var(--bg-card);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);box-shadow:none;transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.card-header{padding:var(--space-md) var(--space-lg);border-bottom:2px solid var(--border-color)}.card-header h2{font-size:var(--text-xl);font-weight:800;margin-bottom:var(--space-2xs);color:var(--text-primary)}.card-header p{font-size:var(--text-md);color:var(--text-secondary)}.card-body{padding:var(--space-lg)}.card-footer{padding:var(--space-md) var(--space-lg);border-top:2px solid var(--border-color);background:var(--bg-secondary);border-radius:0 0 calc(var(--border-radius-lg) - 2px) calc(var(--border-radius-lg) - 2px)}.card-interactive{cursor:pointer;transition:all var(--transition-normal)}@media (hover: hover){.card-interactive:hover{box-shadow:none;border-color:var(--accent-secondary)}}.card-interactive:active{box-shadow:none}@media (max-width: 480px){.card{box-shadow:none;border-radius:var(--mobile-card-radius)}}.badge{display:inline-flex;align-items:center;gap:var(--space-2xs);padding:1px 6px;font-size:.625rem;font-weight:600;border-radius:var(--border-radius-pill);white-space:nowrap;line-height:1.4;text-transform:uppercase;letter-spacing:.02em}.badge--sm{padding:1px 5px;font-size:.5625rem}.badge--new{background:var(--word-new);color:var(--word-new-text)}.badge--learning{background:var(--word-learning);color:var(--word-learning-text)}.badge--known{background:var(--word-known);color:var(--word-known-text)}.badge--ignored{background:var(--word-ignored);color:var(--text-muted)}.badge--primary{background:var(--bg-tertiary);color:var(--text-secondary)}.badge--accent{background:rgba(var(--accent-primary-rgb),.1);color:var(--accent-primary)}.badge--success{background:rgba(var(--success-rgb),.15);color:var(--success)}.badge--warning{background:rgba(var(--warning-rgb),.15);color:var(--warning)}.badge--error{background:rgba(var(--error-rgb),.15);color:var(--error)}.badge--free{background:linear-gradient(135deg,var(--bg-tertiary) 0%,var(--bg-secondary) 100%);color:var(--text-muted)}[data-theme=dark] .badge--free{background:linear-gradient(135deg,#3f3f46,#27272a);color:#d4d4d8}.badge--pro{background:linear-gradient(90deg,#06b6d4,#3b82f6,#8b5cf6);color:#fff;font-weight:600;box-shadow:0 2px 8px #3b82f64d}[data-theme=dark] .badge--pro{box-shadow:0 2px 10px #3b82f666}.badge--premium{background:linear-gradient(135deg,#fde68a,#fca5a5,#c4b5fd,#93c5fd,#60a5fa);background-size:200% 200%;color:#1f2937;font-weight:600;box-shadow:0 2px 8px #0000001a}[data-theme=dark] .badge--premium{box-shadow:0 2px 12px #c4b5fd4d}@media (prefers-reduced-motion: no-preference){.badge--premium{animation:badge-holo 3s ease infinite}}@keyframes badge-holo{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.sidebar-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:var(--space-md)}.sidebar-card__title{font-size:var(--text-md);font-weight:600;margin-bottom:var(--space-md)}.sidebar-card__subtitle{font-size:var(--text-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs)}.sidebar-card__hint{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-md)}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);margin-bottom:var(--space-md)}.stat-item{display:flex;flex-direction:column;align-items:center;padding:var(--space-sm);background:var(--bg-secondary);border-radius:var(--border-radius)}.stat-item__value{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary)}.stat-item__value--new{color:var(--accent-primary)}.stat-item__value--learning{color:var(--word-learning-text)}.stat-item__value--known{color:var(--success)}.stat-item__value--favorite{color:var(--accent-primary)}.stat-item__label{font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.empty-state{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-lg) var(--space-md);width:100%}.empty-state__icon-box{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.empty-state__icon-box app-icon,.empty-state__icon-box .empty-icon{color:var(--text-muted);opacity:.7}.empty-state__mascot{display:flex;align-items:center;justify-content:center;flex-shrink:0;max-width:160px;max-height:160px;transition:transform var(--transition-normal)}.empty-state__mascot app-mascot{width:100%;height:100%}.empty-state__text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left}.empty-state__title{font-weight:500;font-size:1.0625rem;color:var(--text-primary);margin:0}.empty-state__description,.empty-state__hint{font-size:.9375rem;color:var(--text-muted);margin:0;line-height:1.4}.empty-state__action{margin-top:var(--space-md)}.empty-state--centered{flex-direction:column;align-items:center;text-align:center;justify-content:center;margin:0 auto}.empty-state--centered .empty-state__text{align-items:center;text-align:center}.empty-state--animate{animation:emptyStateIn .25s ease-out}@keyframes emptyStateIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.panel-header{padding:var(--space-sm) var(--space-md)}.panel-header__row{display:flex;align-items:center;gap:var(--space-sm)}.panel-header__icon{color:var(--accent-primary)}.panel-header__title{font-size:1rem;font-weight:600;margin:0}.panel-header__subtitle{font-size:.8125rem;color:var(--text-muted);margin-top:var(--space-xs);margin-bottom:0}.stat-badge{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--bg-secondary);border-radius:var(--border-radius);flex:1;justify-content:center}.stat-badge--new{background:var(--word-new)}.stat-badge--new .stat-value{color:var(--accent-primary)}.stat-badge--learning{background:var(--word-learning)}.stat-badge--learning .stat-value{color:var(--word-learning-text)}.stat-badge--known{background:var(--word-known)}.stat-badge--known .stat-value{color:var(--success)}.stat-badge .stat-value{font-size:1.125rem;font-weight:700;color:var(--text-primary)}.stat-badge .stat-label{font-size:.6875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.setting-row{display:flex;align-items:center;justify-content:space-between;min-height:var(--touch-target-min);padding:var(--space-sm) var(--space-md);background:var(--bg-card);border:2px solid var(--border-color);box-shadow:none;border-radius:var(--border-radius-md);width:100%;font-family:inherit;font-size:inherit;color:inherit;text-align:left;cursor:default;margin-bottom:var(--space-xs)}.setting-row--clickable{cursor:pointer;transition:transform .1s cubic-bezier(.4,0,.2,1),box-shadow .1s cubic-bezier(.4,0,.2,1),background-color .2s,border-color .2s}@media (hover: hover){.setting-row--clickable:hover{background:var(--bg-secondary);transform:translateY(-2px);border-color:var(--accent-primary);box-shadow:none}}.setting-row--clickable *{pointer-events:none}.setting-row--highlight{background:var(--bg-secondary)}.setting-row__content{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0}.setting-row__label{font-size:.9375rem;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-row__flag{width:24px;height:24px;border-radius:var(--border-radius-round)}.setting-row__value{font-size:.9375rem;font-weight:500;color:var(--text-primary)}.setting-row__icon,.setting-row__chevron{color:var(--text-muted)}.setting-row__group{display:flex;flex-direction:column;gap:2px}.setting-row__hint{font-size:.75rem;color:var(--text-muted)}.toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + var(--space-xl));left:50%;transform:translate(-50%);background:var(--bg-inverse);color:var(--text-inverse);padding:var(--space-sm) var(--space-lg);border-radius:var(--border-radius-pill);display:flex;align-items:center;gap:var(--space-sm);font-size:.9375rem;font-weight:500;box-shadow:var(--shadow-lg);z-index:var(--z-toast);animation:toastSlideUp .3s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap;max-width:90vw}.toast app-icon{color:var(--success);display:flex}.toast--error{background:var(--error);color:#fff}.toast--error app-icon{color:#fff}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}@keyframes popIn{0%{opacity:0;transform:scale(.95)}70%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes loop-pulse{0%,to{box-shadow:inset 0 0 0 2px transparent}50%{box-shadow:inset 0 0 0 2px var(--accent-primary)}}@keyframes spring-up{0%{transform:translateY(100%)}60%{transform:translateY(-3%)}80%{transform:translateY(1%)}to{transform:translateY(0)}}.animate-pop{animation:popIn .25s ease-out both}.animate-fade-slide{animation:fadeSlideIn .3s ease-out both}.animate-float{animation:float 3s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 1.5s ease-in-out infinite}.is-looping{animation:loop-pulse 2s ease-in-out infinite}.stagger-1{animation-delay:.05s}.stagger-2{animation-delay:.1s}.stagger-3{animation-delay:.15s}.stagger-4{animation-delay:.2s}.stagger-5{animation-delay:.25s}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.hover-fix{pointer-events:auto}.hover-fix>*{pointer-events:none}.hover-fix>.hover-fix-interactive,.hover-fix>* .hover-fix-interactive,.hover-fix button,.hover-fix a,.hover-fix input,.hover-fix select,.hover-fix [role=button],.hover-fix label{pointer-events:auto}.hover-passthrough{pointer-events:none}.hover-passthrough-target{pointer-events:auto}.circle-flag{width:1.25em;height:1.25em;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #0000000d;display:inline-block;vertical-align:middle}.lang-chip .circle-flag{margin-right:6px;width:16px;height:16px}.lang-option .circle-flag{width:20px;height:20px}
