:root{--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-full: 9999px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 40px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out;--z-dropdown: 1000;--z-modal: 2000;--z-toast: 3000;--breakpoint-mobile: 768px;--breakpoint-tablet: 1024px;--breakpoint-desktop: 1280px}@media(max-width:768px){:root{--spacing-md: 12px;--spacing-lg: 20px;--spacing-xl: 28px}}[data-theme=light]{--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #dbeafe;--color-primary-text: #ffffff;--color-background: #ffffff;--color-background-secondary: #f9fafb;--color-background-tertiary: #f3f4f6;--color-surface: #ffffff;--color-secondary: #f3f4f6;--color-secondary-hover: #e5e7eb;--color-text: #1f2937;--color-text-primary: #1f2937;--color-text-secondary: #6b7280;--color-text-tertiary: #9ca3af;--color-border: #e5e7eb;--color-border-hover: #d1d5db;--color-success: #10b981;--color-success-light: #d1fae5;--color-success-dark: #059669;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-error: #ef4444;--color-error-light: #fee2e2;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-danger-light: #fee2e2;--color-info: #3b82f6;--color-info-light: #dbeafe;--color-well-learned: #10b981;--color-needs-practice: #f59e0b;--color-new: #6b7280;--color-hover: #f3f4f6;--color-active: #e5e7eb;--color-focus: #3b82f6;--color-disabled: #d1d5db}[data-theme=dark]{--color-primary: #60a5fa;--color-primary-hover: #3b82f6;--color-primary-dark: #2563eb;--color-primary-light: #1e3a8a;--color-primary-text: #ffffff;--color-background: #1f2937;--color-background-secondary: #111827;--color-background-tertiary: #374151;--color-surface: #374151;--color-secondary: #374151;--color-secondary-hover: #4b5563;--color-text: #f9fafb;--color-text-primary: #f9fafb;--color-text-secondary: #d1d5db;--color-text-tertiary: #9ca3af;--color-border: #374151;--color-border-hover: #4b5563;--color-success: #34d399;--color-success-light: #064e3b;--color-success-dark: #10b981;--color-warning: #fbbf24;--color-warning-light: #78350f;--color-error: #f87171;--color-error-light: #7f1d1d;--color-danger: #f87171;--color-danger-hover: #ef4444;--color-danger-light: #7f1d1d;--color-info: #60a5fa;--color-info-light: #1e3a8a;--color-well-learned: #34d399;--color-needs-practice: #fbbf24;--color-new: #9ca3af;--color-hover: #374151;--color-active: #4b5563;--color-focus: #60a5fa;--color-disabled: #4b5563}[data-theme=blue]{--color-primary: #0ea5e9;--color-primary-hover: #0284c7;--color-primary-dark: #0369a1;--color-primary-light: #e0f2fe;--color-primary-text: #ffffff;--color-background: #f0f9ff;--color-background-secondary: #e0f2fe;--color-background-tertiary: #bae6fd;--color-surface: #ffffff;--color-secondary: #e0f2fe;--color-secondary-hover: #bae6fd;--color-text: #0c4a6e;--color-text-primary: #0c4a6e;--color-text-secondary: #075985;--color-text-tertiary: #0369a1;--color-border: #7dd3fc;--color-border-hover: #38bdf8;--color-success: #14b8a6;--color-success-light: #ccfbf1;--color-success-dark: #0d9488;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-error: #ef4444;--color-error-light: #fee2e2;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-danger-light: #fee2e2;--color-info: #0ea5e9;--color-info-light: #e0f2fe;--color-well-learned: #14b8a6;--color-needs-practice: #f59e0b;--color-new: #0369a1;--color-hover: #e0f2fe;--color-active: #bae6fd;--color-focus: #0ea5e9;--color-disabled: #7dd3fc}[data-theme=green]{--color-primary: #10b981;--color-primary-hover: #059669;--color-primary-dark: #047857;--color-primary-light: #d1fae5;--color-primary-text: #ffffff;--color-background: #f0fdf4;--color-background-secondary: #dcfce7;--color-background-tertiary: #bbf7d0;--color-surface: #ffffff;--color-secondary: #dcfce7;--color-secondary-hover: #bbf7d0;--color-text: #064e3b;--color-text-primary: #064e3b;--color-text-secondary: #065f46;--color-text-tertiary: #047857;--color-border: #86efac;--color-border-hover: #4ade80;--color-success: #10b981;--color-success-light: #d1fae5;--color-success-dark: #059669;--color-warning: #f59e0b;--color-warning-light: #fef3c7;--color-error: #ef4444;--color-error-light: #fee2e2;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-danger-light: #fee2e2;--color-info: #06b6d4;--color-info-light: #cffafe;--color-well-learned: #10b981;--color-needs-practice: #f59e0b;--color-new: #047857;--color-hover: #dcfce7;--color-active: #bbf7d0;--color-focus: #10b981;--color-disabled: #86efac}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base, 16px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family, system-ui, -apple-system, sans-serif);font-weight:var(--font-weight-base, 400);line-height:1.5;color:var(--color-text);background-color:var(--color-background);transition:background-color var(--transition-normal),color var(--transition-normal)}@media(max-width:768px){html{font-size:14px}}@media(min-width:1024px){html{font-size:var(--font-size-base, 16px)}}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}@media(max-width:768px){button,a,input,select,textarea{min-height:44px;min-width:44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{margin:0;min-width:320px;min-height:100vh;font-family:var(--font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--font-size-base, 16px);font-weight:var(--font-weight-base, 400);line-height:1.5;color:var(--color-text, #213547);background:linear-gradient(135deg,var(--color-background) 0%,var(--color-background-secondary) 100%);background-attachment:fixed;overflow-x:hidden}:focus-visible{outline:2px solid var(--color-primary, #646cff);outline-offset:2px}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}button{font-family:inherit;font-size:inherit;line-height:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}input,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit}@keyframes bounce-in{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}@keyframes slide-up{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse-success{0%{box-shadow:0 0 #22c55eb3}70%{box-shadow:0 0 0 10px #22c55e00}to{box-shadow:0 0 #22c55e00}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-background-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-light)}.animate-bounce-in{animation:bounce-in .6s ease-out}.animate-slide-up{animation:slide-up .4s ease-out}.animate-pulse-success{animation:pulse-success 1s ease-out}.animate-shake{animation:shake .6s ease-out}.animate-float{animation:float 3s ease-in-out infinite}.header{background-color:var(--color-background);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}.header__container{max-width:1200px;margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.header__logo{display:flex;align-items:center;gap:var(--spacing-sm)}.header__logo-icon{font-size:24px}.header__title{margin:0;font-size:var(--font-size-xl);font-weight:600;color:var(--color-text)}.header__actions{display:flex;align-items:center;gap:var(--spacing-md)}.header__user{display:flex;align-items:center;gap:var(--spacing-sm)}.header__user-name{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.header__logout{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);transition:all .2s ease;min-height:32px}.header__logout:hover{background-color:var(--color-secondary)}.header__logout:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.header__settings-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--border-radius-md);transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.header__settings-btn:hover{background-color:var(--color-secondary)}.header__settings-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(max-width:768px){.header__container{padding:var(--spacing-sm) var(--spacing-md)}.header__title{font-size:var(--font-size-lg)}.header__user-name{display:none}}.navigation__list{list-style:none;margin:0;padding:0;display:flex}.navigation__item{flex:1}.navigation__link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);color:var(--color-text-secondary);text-decoration:none;transition:all .2s ease;border:none;background:none;cursor:pointer;width:100%;font-family:inherit;font-size:var(--font-size-base);border-radius:var(--border-radius-md);min-height:44px}.navigation__link:hover{color:var(--color-text);background-color:var(--color-secondary)}.navigation__link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.navigation__link--active{color:var(--color-primary);background-color:var(--color-primary-light);font-weight:500}.navigation__icon{font-size:20px;display:flex;align-items:center;justify-content:center;width:24px}.navigation__label{flex:1}.navigation--desktop{background-color:var(--color-background);border-right:1px solid var(--color-border);padding:var(--spacing-lg);min-width:250px;height:100%}.navigation--desktop .navigation__list{flex-direction:column;gap:var(--spacing-xs)}.navigation--desktop .navigation__link{justify-content:flex-start}.navigation--mobile{position:fixed;bottom:0;left:0;right:0;background-color:var(--color-background);border-top:1px solid var(--color-border);z-index:100;padding:var(--spacing-xs)}.navigation--mobile .navigation__list{flex-direction:row;justify-content:space-around}.navigation--mobile .navigation__link{flex-direction:column;padding:var(--spacing-sm);gap:var(--spacing-xs);text-align:center}.navigation--mobile .navigation__label{font-size:var(--font-size-xs)}@media(max-width:768px){.navigation--desktop{display:none}}@media(min-width:769px){.navigation--mobile{display:none}}.app-layout{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-background)}.app-layout__body{display:flex;flex:1;overflow:hidden}.app-layout__main{flex:1;overflow-y:auto;background-color:var(--color-secondary)}.app-layout__content{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}@media(max-width:768px){.app-layout__content{padding:var(--spacing-md);padding-bottom:calc(var(--spacing-md) + 70px)}}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);border:none;border-radius:var(--border-radius-md);font-family:inherit;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative;min-height:44px}.button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.button:disabled{opacity:.5;cursor:not-allowed}.button--primary{background-color:var(--color-primary);color:var(--color-primary-text)}.button--primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--secondary{background-color:var(--color-secondary);color:var(--color-text);border:1px solid var(--color-border)}.button--secondary:hover:not(:disabled){background-color:var(--color-secondary-hover)}.button--danger{background-color:var(--color-danger);color:#fff}.button--danger:hover:not(:disabled){background-color:var(--color-danger-hover)}.button--ghost{background-color:transparent;color:var(--color-text)}.button--ghost:hover:not(:disabled){background-color:var(--color-secondary)}.button--small{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);min-height:36px}.button--medium{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base)}.button--large{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg);min-height:52px}.button--full-width{width:100%}.button--loading{pointer-events:none}.button__spinner{position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.button__content--hidden{visibility:hidden}@keyframes spin{to{transform:rotate(360deg)}}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs)}.input-wrapper--full-width{width:100%}.input__label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text)}.input__required{color:var(--color-danger);margin-left:var(--spacing-xs)}.input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-family:inherit;font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background);transition:all .2s ease;min-height:44px}.input:hover:not(:disabled){border-color:var(--color-primary)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-secondary)}.input-wrapper--error .input{border-color:var(--color-danger)}.input-wrapper--error .input:focus{box-shadow:0 0 0 3px var(--color-danger-light)}.input__error{font-size:var(--font-size-sm);color:var(--color-danger)}.input__helper{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.select-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs)}.select-wrapper--full-width{width:100%}.select__label{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text)}.select__required{color:var(--color-danger);margin-left:var(--spacing-xs)}.select__container{position:relative}.select{width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-right:calc(var(--spacing-md) * 2 + 12px);border:1px solid var(--color-border);border-radius:var(--border-radius-md);font-family:inherit;font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background);transition:all .2s ease;cursor:pointer;appearance:none;min-height:44px}.select:hover:not(:disabled){border-color:var(--color-primary)}.select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.select:disabled{opacity:.5;cursor:not-allowed;background-color:var(--color-secondary)}.select__arrow{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);pointer-events:none;font-size:10px;color:var(--color-text-secondary)}.select-wrapper--error .select{border-color:var(--color-danger)}.select-wrapper--error .select:focus{box-shadow:0 0 0 3px var(--color-danger-light)}.select__error{font-size:var(--font-size-sm);color:var(--color-danger)}.select__helper{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background-color:var(--color-background);border-radius:var(--border-radius-lg);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal:focus{outline:none}.modal--small{width:100%;max-width:400px}.modal--medium{width:100%;max-width:600px}.modal--large{width:100%;max-width:900px}.modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.modal__title{margin:0;font-size:var(--font-size-xl);font-weight:600;color:var(--color-text)}.modal__close{background:none;border:none;font-size:24px;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-md);transition:all .2s ease;min-width:44px;min-height:44px}.modal__close:hover{background-color:var(--color-secondary);color:var(--color-text)}.modal__close:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.modal__content{padding:var(--spacing-lg);overflow-y:auto;flex:1}@media(max-width:768px){.modal-overlay{padding:var(--spacing-sm)}.modal{max-height:95vh}.modal__header,.modal__content{padding:var(--spacing-md)}}.card{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);transition:all .2s ease}.card--padding-none{padding:0}.card--padding-small{padding:var(--spacing-sm)}.card--padding-medium{padding:var(--spacing-md)}.card--padding-large{padding:var(--spacing-lg)}.card--hoverable:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform:translateY(-2px)}.card--clickable{cursor:pointer;text-align:left;width:100%;font-family:inherit;font-size:inherit;color:inherit;border:1px solid var(--color-border)}.card--clickable:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.card--clickable:active{transform:translateY(0)}.toast-container{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:2000;display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:400px}.toast{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--color-background);border-radius:var(--border-radius-md);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;animation:slideInRight .3s ease;min-width:300px}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-weight:700;flex-shrink:0}.toast--success{border-left:4px solid var(--color-success)}.toast--success .toast__icon{background-color:var(--color-success);color:#fff}.toast--error{border-left:4px solid var(--color-danger)}.toast--error .toast__icon{background-color:var(--color-danger);color:#fff}.toast--warning{border-left:4px solid var(--color-warning)}.toast--warning .toast__icon{background-color:var(--color-warning);color:#fff}.toast--info{border-left:4px solid var(--color-info)}.toast--info .toast__icon{background-color:var(--color-info);color:#fff}.toast__message{flex:1;color:var(--color-text);font-size:var(--font-size-sm)}.toast__close{background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);transition:all .2s ease;min-width:32px;min-height:32px;flex-shrink:0}.toast__close:hover{background-color:var(--color-secondary);color:var(--color-text)}.toast__close:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(max-width:768px){.toast-container{top:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm);max-width:none}.toast{min-width:auto}}.error-boundary{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-lg);background-color:var(--color-background)}.error-boundary__container{max-width:600px;width:100%;text-align:center;padding:var(--spacing-xl);background-color:var(--color-surface);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg)}.error-boundary__icon{font-size:4rem;margin-bottom:var(--spacing-md)}.error-boundary__title{font-size:2rem;font-weight:700;color:var(--color-text);margin-bottom:var(--spacing-md)}.error-boundary__message{font-size:1rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);line-height:1.6}.error-boundary__details{text-align:left;margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background-color:var(--color-background);border-radius:var(--border-radius-md);border:1px solid var(--color-border)}.error-boundary__details summary{cursor:pointer;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);-webkit-user-select:none;user-select:none}.error-boundary__details summary:hover{color:var(--color-primary)}.error-boundary__error-text{font-family:Courier New,monospace;font-size:.875rem;color:var(--color-error);overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;margin:0;padding:var(--spacing-sm);background-color:var(--color-surface);border-radius:var(--border-radius-sm)}.error-boundary__actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.error-boundary__button{padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;font-weight:600;border-radius:var(--border-radius-md);border:none;cursor:pointer;transition:all .2s ease;min-width:150px}.error-boundary__button--primary{background-color:var(--color-primary);color:#fff}.error-boundary__button--primary:hover{background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.error-boundary__button--secondary{background-color:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}.error-boundary__button--secondary:hover{background-color:var(--color-background);border-color:var(--color-primary);transform:translateY(-2px)}.error-boundary__button:active{transform:translateY(0)}@media(max-width:768px){.error-boundary__container{padding:var(--spacing-lg)}.error-boundary__title{font-size:1.5rem}.error-boundary__actions{flex-direction:column}.error-boundary__button{width:100%}}#root{min-height:100vh;display:flex;flex-direction:column}