:root{--bg-primary:#000000;--bg-secondary:#0A0A0B;--bg-card:#111114;--bg-elevated:#161619;--bg-input:#0D0D0F;--text-primary:#FFFFFF;--text-secondary:rgba(255,255,255,0.7);--text-tertiary:rgba(255,255,255,0.5);--text-muted:rgba(255,255,255,0.4);--text-disabled:rgba(255,255,255,0.25);--border-primary:rgba(255,255,255,0.08);--border-secondary:rgba(255,255,255,0.05);--border-hover:rgba(255,255,255,0.12);--border-focus:rgba(255,255,255,0.16);--border-accent:rgba(0,122,255,0.3);--accent-primary:#007AFF;--accent-hover:#0A84FF;--accent-success:#34C759;--accent-success-bg:rgba(52,199,89,0.1);--accent-warning:#FF9500;--accent-warning-bg:rgba(255,149,0,0.1);--accent-error:#FF3B30;--accent-error-bg:rgba(255,59,48,0.1);--surface-primary:rgba(255,255,255,0.02);--surface-secondary:rgba(255,255,255,0.04);--surface-elevated:rgba(255,255,255,0.06);--surface-overlay:rgba(0,0,0,0.6);--shadow-sm:0 1px 2px rgba(0,0,0,0.2);--shadow-md:0 4px 12px rgba(0,0,0,0.3);--shadow-lg:0 8px 24px rgba(0,0,0,0.4);--shadow-xl:0 16px 48px rgba(0,0,0,0.5);--shadow-card:0 4px 24px rgba(0,0,0,0.4);--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:9999px;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;--font-mono:"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,monospace;--ease-default:cubic-bezier(0.16,1,0.3,1);--ease-gentle:cubic-bezier(0.25,0.46,0.45,0.94);--duration-fast:150ms;--duration-normal:200ms;--duration-slow:300ms;--max-width:1200px;--nav-height:72px;--nav-height-mobile:64px;--bg:var(--bg-primary);--fg:var(--text-primary);--card:var(--bg-card);--muted:var(--text-muted);--border:var(--border-primary);--accent:var(--accent-primary);--accent-light:var(--surface-secondary);--accent-dark:var(--accent-hover);--error:var(--accent-error);--error-bg:var(--accent-error-bg);--success:var(--accent-success);--success-bg:var(--accent-success-bg);--warning:var(--accent-warning);--warning-bg:var(--accent-warning-bg);--category-strength:#E8A838;--category-endurance:#2ECC71;--category-discipline:#3B82F6;--category-intelligence:#8B5CF6;--category-charisma:#EC4899;--category-aura:#06B6D4;--gradient-primary:linear-gradient(135deg,#3B82F6,#2563EB);--gradient-success:linear-gradient(135deg,#10B981,#059669);--gradient-warning:linear-gradient(135deg,#F59E0B,#D97706);--gradient-accent:linear-gradient(135deg,#007AFF,#0055FF);--gradient-secondary:linear-gradient(135deg,#6B7280,#4B5563);--glow-primary:rgba(0,122,255,0.4)}.light,html.light{--bg-primary:#FFFFFF;--bg-secondary:#F9FAFB;--bg-card:#FFFFFF;--bg-elevated:#FFFFFF;--bg-input:#F3F4F6;--text-primary:#111827;--text-secondary:rgba(17,24,39,0.7);--text-tertiary:rgba(17,24,39,0.5);--text-muted:rgba(17,24,39,0.4);--text-disabled:rgba(17,24,39,0.25);--border-primary:rgba(0,0,0,0.08);--border-secondary:rgba(0,0,0,0.05);--border-hover:rgba(0,0,0,0.12);--border-focus:rgba(0,0,0,0.16);--border-accent:rgba(0,122,255,0.3);--surface-primary:rgba(0,0,0,0.02);--surface-secondary:rgba(0,0,0,0.04);--surface-elevated:rgba(0,0,0,0.06);--surface-overlay:rgba(255,255,255,0.8);--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 12px rgba(0,0,0,0.08);--shadow-lg:0 8px 24px rgba(0,0,0,0.12);--shadow-xl:0 16px 48px rgba(0,0,0,0.16);--shadow-card:0 2px 8px rgba(0,0,0,0.06),0 0 0 1px rgba(0,0,0,0.04);--bg:var(--bg-primary);--fg:var(--text-primary);--card:var(--bg-card);--muted:var(--text-muted);--border:var(--border-primary)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;text-size-adjust:100%}body,html{overflow-x:hidden}body{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-.01em;background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh}body,h1,h2,h3,h4,h5,h6{color:var(--text-primary)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.2}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}h4{font-size:18px}h5{font-size:16px}h6{font-size:14px}p{color:var(--text-secondary);line-height:1.6}a{color:var(--accent-primary);text-decoration:none;transition:color var(--duration-fast) var(--ease-default)}a:hover{color:var(--accent-hover)}button,input,select,textarea{font-family:inherit;font-size:inherit}.input{width:100%;padding:12px 16px;font-size:14px;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border-primary);border-radius:var(--radius-md);outline:none;transition:all var(--duration-fast) var(--ease-default)}.input:hover{border-color:var(--border-hover)}.input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(0,122,255,.1)}.input::placeholder{color:var(--text-muted)}.input:disabled{opacity:.5;cursor:not-allowed}input[type=date],input[type=time]{font-family:var(--font-mono);color:var(--text-primary);background:var(--bg-input)}input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:600;color:var(--bg-primary);background:var(--text-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap}.btn:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default)}.btn-outline:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--surface-primary)}.btn-accent{background:var(--accent-primary);color:white}.btn-accent:hover{background:var(--accent-hover)}.btn-success{background:var(--accent-success);color:white}.btn-sm{padding:8px 12px;font-size:13px}.btn-lg{padding:16px 28px;font-size:16px}.card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-xl);padding:24px;transition:all var(--duration-normal) var(--ease-default)}.card:hover{border-color:var(--border-hover)}.card-elevated{background:var(--bg-elevated);box-shadow:var(--shadow-card)}.badge{display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;border-radius:var(--radius-full);background:var(--surface-secondary);color:var(--text-secondary);border:1px solid var(--border-primary)}.badge-primary{background:rgba(0,122,255,.1);color:var(--accent-primary);border-color:rgba(0,122,255,.2)}.badge-success{background:var(--accent-success-bg);color:var(--accent-success);border-color:rgba(52,199,89,.2)}.badge-warning{background:var(--accent-warning-bg);color:var(--accent-warning);border-color:rgba(255,149,0,.2)}.badge-error{background:var(--accent-error-bg);color:var(--accent-error);border-color:rgba(255,59,48,.2)}.difficulty-1{background:var(--accent-success-bg);color:var(--accent-success)}.difficulty-2{background:rgba(52,199,89,.15);color:#4ADE80}.difficulty-3{background:var(--accent-warning-bg);color:var(--accent-warning)}.difficulty-4{background:rgba(255,149,0,.15);color:#FB923C}.difficulty-5{background:var(--accent-error-bg);color:var(--accent-error)}.nav{position:-webkit-sticky;position:sticky;top:0;z-index:100;height:var(--nav-height);background:rgba(0,0,0,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-secondary)}.nav-button{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;color:var(--text-muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default)}.nav-button:hover{color:var(--text-secondary);background:var(--surface-primary)}.nav-button.active{color:var(--text-primary);background:var(--surface-elevated);border-color:var(--border-primary)}.backdrop{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;opacity:0;pointer-events:none;transition:opacity var(--duration-normal) var(--ease-default)}.backdrop.open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;height:100%;width:min(480px,100%);background:var(--bg-card);border-left:1px solid var(--border-primary);box-shadow:var(--shadow-xl);z-index:250;transform:translateX(100%);transition:transform var(--duration-slow) var(--ease-default);display:flex;flex-direction:column}.drawer.open{transform:translateX(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-primary);flex-shrink:0}.drawer-body{flex:1 1;overflow-y:auto;padding:24px;-webkit-overflow-scrolling:touch}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:24px 16px}@media (min-width:768px){.container{padding:32px 24px}}@media (min-width:1024px){.container{padding:40px 32px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-hover)}*{scrollbar-width:thin;scrollbar-color:var(--border-primary) transparent}.progress-bar{width:100%;height:6px;background:var(--surface-secondary);overflow:hidden}.progress-bar,.progress-fill{border-radius:var(--radius-full)}.progress-fill{height:100%;background:var(--accent-primary);transition:width var(--duration-slow) var(--ease-default)}.list-item{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--ease-default)}.list-item:hover{background:var(--surface-primary);border-color:var(--border-primary)}.category-tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;border-radius:var(--radius-sm);background:var(--surface-secondary);color:var(--text-tertiary);border:1px solid var(--border-secondary)}.category-tag,.xp-badge{display:inline-flex;align-items:center;padding:4px 10px}.xp-badge{gap:4px;font-size:12px;font-weight:700;background:var(--accent-success-bg);color:var(--accent-success);border-radius:var(--radius-full)}.footer{padding:24px;text-align:center;font-size:13px;color:var(--text-muted);border-top:1px solid var(--border-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-fadeIn{animation:fadeIn var(--duration-normal) var(--ease-default)}.animate-fadeInUp{animation:fadeInUp var(--duration-normal) var(--ease-default)}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.shimmer{background:linear-gradient(90deg,var(--surface-primary) 0,var(--surface-secondary) 50%,var(--surface-primary) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.text-center{text-align:center}.text-sm{font-size:13px}.text-muted{color:var(--text-muted)}.w-full{width:100%}.h-full{height:100%}@media (max-width:768px){:root{--nav-height:var(--nav-height-mobile)}body{font-size:14px}h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}.btn,.btn-outline{min-height:44px;padding:12px 16px}.card{padding:20px;border-radius:var(--radius-lg)}.drawer{width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-left:none;border-top:1px solid var(--border-primary);max-height:90vh;top:auto;bottom:0;transform:translateY(100%)}.drawer.open{transform:translateY(0)}[role=button],a,button{min-height:44px}@media (hover:none){.btn:hover,.card:hover,.list-item:hover{transform:none;border-color:inherit}}}@media (max-width:375px){.container{padding:16px 12px}h1{font-size:24px}h2{font-size:20px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.cl-card,.cl-rootBox{background:transparent!important}.cl-formFieldInput{background:var(--bg-input)!important;border:1px solid var(--border-primary)!important;border-radius:var(--radius-md)!important;color:var(--text-primary)!important}.cl-formFieldInput:focus{border-color:var(--accent-primary)!important;box-shadow:0 0 0 3px rgba(0,122,255,.1)!important}.cl-formButtonPrimary{background:var(--text-primary)!important;color:var(--bg-primary)!important;border-radius:var(--radius-md)!important}.cl-formButtonPrimary:hover{background:rgba(255,255,255,.9)!important}@keyframes bounce-click{0%,to{transform:scale(1)}50%{transform:scale(.97)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 0 0 rgba(0,122,255,.4)}50%{box-shadow:0 0 0 8px rgba(0,122,255,0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes check-bounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes xp-float{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-40px) scale(1.1)}}.animate-bounce-click:active{animation:bounce-click .15s ease}.animate-pulse-glow{animation:pulse-glow 2s infinite}.animate-slide-up{animation:slide-up .3s var(--ease-default) forwards}.animate-fade-scale-in{animation:fade-scale-in .2s var(--ease-default) forwards}.animate-shimmer{background:linear-gradient(90deg,var(--bg-card) 0,var(--bg-elevated) 50%,var(--bg-card) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}.card-interactive{transition:all var(--duration-normal) var(--ease-default)}.card-interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}.card-interactive:active{transform:translateY(0);transition-duration:50ms}.btn-press{transition:transform .1s ease}.btn-press:active{transform:scale(.98)}.checkbox-animated{transition:all var(--duration-fast) var(--ease-default)}.checkbox-animated:checked{animation:check-bounce .3s ease}.stagger-list>*{animation:slide-up .3s var(--ease-default) backwards}.stagger-list>:first-child{animation-delay:0s}.stagger-list>:nth-child(2){animation-delay:50ms}.stagger-list>:nth-child(3){animation-delay:.1s}.stagger-list>:nth-child(4){animation-delay:.15s}.stagger-list>:nth-child(5){animation-delay:.2s}.stagger-list>:nth-child(6){animation-delay:.25s}.xp-indicator{position:absolute;top:-8px;right:-8px;background:var(--accent-success);color:white;font-size:11px;font-weight:700;padding:2px 6px;border-radius:var(--radius-full);animation:xp-float 1.5s ease-out forwards;pointer-events:none}.glass{background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.06)}.glow-accent{box-shadow:0 0 20px rgba(0,122,255,.2)}.glow-success{box-shadow:0 0 20px rgba(52,199,89,.2)}.glow-warning{box-shadow:0 0 20px rgba(255,149,0,.2)}.glow-error{box-shadow:0 0 20px rgba(255,59,48,.2)}