:root{--bg: #FAFAFA;--bg-2: #F4F2FF;--surface: #FFFFFF;--surface-2: #F8F6FF;--surface-3: #F0EDFF;--border: #E5E2F5;--border-strong: #C4BBEE;--text-primary: #0D0D12;--text-secondary: #4B4869;--text-muted: #9490B0;--text-inverse: #FFFFFF;--accent: #7C3AED;--accent-light: #8B5CF6;--accent-soft: #EDE9FE;--accent-glow: rgba(124, 58, 237, .15);--success: #059669;--success-soft: #D1FAE5;--warning: #D97706;--warning-soft: #FEF3C7;--danger: #DC2626;--danger-soft: #FEE2E2;--sidebar-bg: #0A0A0F;--sidebar-width: 64px;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow: 0 4px 16px rgba(124,58,237,.08), 0 1px 3px rgba(0,0,0,.04);--shadow-lg: 0 12px 40px rgba(124,58,237,.12), 0 4px 8px rgba(0,0,0,.06);--transition: .18s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg: #18181F;--bg-2: #1E1E28;--surface: #242430;--surface-2: #2A2A38;--surface-3: #313142;--border: #35354A;--border-strong: #4A4A64;--text-primary: #EEEAF8;--text-secondary: #A09CBC;--text-muted: #6B6888;--text-inverse: #0D0D12;--accent: #8B5CF6;--accent-light: #A78BFA;--accent-soft: #2A1F4A;--accent-glow: rgba(139, 92, 246, .2);--success: #10B981;--success-soft: #0D3B2E;--warning: #F59E0B;--warning-soft: #3A2200;--danger: #EF4444;--danger-soft: #3B0F0F;--shadow-sm: 0 1px 3px rgba(0,0,0,.25);--shadow: 0 4px 16px rgba(0,0,0,.3);--shadow-lg: 0 12px 40px rgba(0,0,0,.4)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Urbanist,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text-primary);transition:background var(--transition),color var(--transition);overflow:auto;height:100vh}#root{height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:0px;height:0px}h1{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.15}h2{font-size:1.4rem;font-weight:700;letter-spacing:-.03em;line-height:1.25}h3{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}h4{font-size:.95rem;font-weight:600}p{line-height:1.65}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-accent{color:var(--accent)}.font-mono{font-family:JetBrains Mono,Fira Code,monospace}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius);font-family:Urbanist,sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all var(--transition);white-space:nowrap;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-glow)}.btn-primary:hover:not(:disabled){background:var(--accent-light);transform:translateY(-1px);box-shadow:0 6px 16px var(--accent-glow)}.btn-secondary{background:var(--surface-3);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--surface-2);border-color:var(--accent);color:var(--accent)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text-primary)}.btn-danger{background:var(--danger);color:#fff}.btn-lg{padding:14px 28px;font-size:16px;border-radius:var(--radius-lg)}.btn-sm{padding:7px 14px;font-size:13px;border-radius:var(--radius-sm)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);transition:all var(--transition)}.card:hover{box-shadow:var(--shadow);border-color:var(--border-strong)}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-lg)}.input{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font-family:Urbanist,sans-serif;font-size:15px;transition:all var(--transition);outline:none}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}textarea.input{resize:vertical;min-height:120px;line-height:1.65}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}.badge-accent{background:var(--accent-soft);color:var(--accent)}.badge-success{background:var(--success-soft);color:var(--success)}.badge-warning{background:var(--warning-soft);color:var(--warning)}.badge-danger{background:var(--danger-soft);color:var(--danger)}.app-shell{display:flex;height:100vh;overflow:hidden}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;margin-left:var(--sidebar-width);min-width:0;width:calc(100% - var(--sidebar-width))}@media(max-width:768px){.main-content{margin-left:0;width:100%}}.page{flex:1;overflow-y:auto;padding:32px 40px;width:100%}@media(max-width:768px){.page{padding:20px 16px}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes streakBounce{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.spinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;animation:fadeIn .2s ease;max-width:320px;display:flex;align-items:center;gap:10px}.toast-success{border-left:3px solid var(--success)}.toast-error{border-left:3px solid var(--danger)}.toast-info{border-left:3px solid var(--accent)}.modal-overlay{position:fixed;inset:0;background:#0a0a0f99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s ease}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;max-width:520px;width:100%;box-shadow:var(--shadow-lg);animation:fadeIn .2s ease}.difficulty-card{border:2px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all var(--transition);text-align:center}.difficulty-card:hover,.difficulty-card.selected{border-color:var(--accent);background:var(--accent-soft)}.difficulty-card.selected{box-shadow:0 0 0 3px var(--accent-glow)}