:root{--liquid-gradient-primary:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);--liquid-gradient-secondary:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#db2777 100%);--liquid-gradient-accent:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--liquid-bg-dark:#1a1a2e;--liquid-bg-medium:#16213e;--liquid-bg-light:#0f3460;--glass-white:#ffffff0d;--glass-white-medium:#ffffff1a;--glass-white-strong:#ffffff26;--glass-border:#ffffff1a;--glass-border-strong:#fff3;--liquid-purple:#667eea;--liquid-blue:#4f46e5;--liquid-pink:#db2777;--liquid-teal:#14b8a6;--glow-purple:0 0 20px #667eea80;--glow-blue:0 0 20px #4f46e580;--glow-pink:0 0 20px #db277780;--blur-light:10px;--blur-medium:18px;--blur-strong:30px;--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-base:.3s cubic-bezier(.4,0,.2,1);--transition-slow:.5s cubic-bezier(.4,0,.2,1);--transition-bounce:.6s cubic-bezier(.68,-.55,.265,1.55)}.glass-panel{background:var(--glass-white);-webkit-backdrop-filter:blur(var(--blur-medium));border:1px solid var(--glass-border);transition:all var(--transition-base);border-radius:16px;box-shadow:0 8px 32px #0000001a}.glass-panel:hover{background:var(--glass-white-medium);border-color:var(--glass-border-strong);transform:translateY(-2px);box-shadow:0 12px 40px #00000026}.glass-panel-strong{background:var(--glass-white-strong);-webkit-backdrop-filter:blur(var(--blur-strong));border:1px solid var(--glass-border-strong);border-radius:20px;box-shadow:0 12px 40px #0003}.glass-panel-subtle{-webkit-backdrop-filter:blur(var(--blur-light));background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px}.glass-button{background:var(--glass-white);-webkit-backdrop-filter:blur(var(--blur-medium));border:1px solid var(--glass-border);color:#fff;cursor:pointer;transition:all var(--transition-base);border-radius:12px;padding:12px 24px;font-weight:500;position:relative;overflow:hidden}.glass-button:before{content:"";opacity:0;width:100%;height:100%;transition:opacity var(--transition-base);background:linear-gradient(135deg,#ffffff1a 0%,#0000 100%);position:absolute;top:0;left:0}.glass-button:hover{background:var(--glass-white-medium);border-color:var(--glass-border-strong);box-shadow:var(--glow-purple);transform:translateY(-2px)scale(1.02)}.glass-button:hover:before{opacity:1}.glass-button:active{transform:translateY(0)scale(.98)}.glass-button-squish{transition:all var(--transition-bounce)}.glass-button-squish:active{transform:scale(.95)}.glass-button-gradient{background:var(--liquid-gradient-secondary);border:none;box-shadow:0 4px 20px #667eea4d}.glass-button-gradient:hover{box-shadow:var(--glow-purple);transform:translateY(-2px)scale(1.05)}.glass-button-default{background:var(--glass-white);-webkit-backdrop-filter:blur(var(--blur-medium));border:1px solid var(--glass-border);color:#fff;cursor:pointer;transition:all var(--transition-base);border-radius:12px;font-weight:500;position:relative;overflow:hidden}.glass-button-default:hover:not(:disabled){background:var(--glass-white-medium);border-color:var(--glass-border-strong);box-shadow:var(--glow-purple);transform:translateY(-2px)scale(1.02)}.glass-button-default:active:not(:disabled){transform:translateY(0)scale(.98)}.glass-button-subtle{-webkit-backdrop-filter:blur(var(--blur-light));color:#ffffffe6;cursor:pointer;transition:all var(--transition-base);background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px;font-weight:500}.glass-button-subtle:hover:not(:disabled){background:#ffffff14;border-color:#ffffff1a}.glass-button-sm{padding:8px 16px;font-size:14px}.glass-button-md{padding:12px 24px;font-size:16px}.glass-button-lg{padding:16px 32px;font-size:18px}.glass-button-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.glass-button-flex{justify-content:center;align-items:center;gap:8px;display:flex}.glass-button-loading svg{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.glass-input{background:var(--glass-white);width:100%;-webkit-backdrop-filter:blur(var(--blur-medium));border:1px solid var(--glass-border);color:#fff;transition:all var(--transition-base);border-radius:12px;outline:none;padding:16px 20px;font-size:16px}.glass-input:focus{background:var(--glass-white-medium);border-color:var(--liquid-purple);box-shadow:0 0 0 4px #667eea1a}.glass-input:hover:not(:focus){border-color:var(--glass-border-strong)}.liquid-bg-primary{background:var(--liquid-gradient-primary)}.liquid-bg-animated{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%) 0 0/400% 400%;animation:15s infinite liquidFlow}@keyframes liquidFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.glow-purple{box-shadow:var(--glow-purple)}.glow-blue{box-shadow:var(--glow-blue)}.glow-pink{box-shadow:var(--glow-pink)}.glow-pulse{animation:2s ease-in-out infinite glowPulse}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #667eea4d}50%{box-shadow:0 0 40px #667eea99}}.magnetic{transition:transform var(--transition-fast)}.magnetic:hover{transform:scale(1.05)}.liquid-spinner{border:3px solid var(--glass-border);border-top-color:var(--liquid-purple);border-radius:50%;width:40px;height:40px;animation:1s cubic-bezier(.68,-.55,.265,1.55) infinite liquidSpin}@keyframes liquidSpin{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(1.1)}to{transform:rotate(360deg)scale(1)}}.liquid-progress{background:var(--glass-white);border-radius:999px;width:100%;height:8px;position:relative;overflow:hidden}.liquid-progress-bar{background:var(--liquid-gradient-secondary);height:100%;transition:width var(--transition-slow);border-radius:999px;animation:2s ease-in-out infinite liquidShimmer}@keyframes liquidShimmer{0%,to{filter:brightness()}50%{filter:brightness(1.2)}}.fade-in{animation:fadeIn var(--transition-base)ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-up{animation:slideUp var(--transition-base)ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-down{animation:slideDown var(--transition-base)ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.scale-in{animation:scaleIn var(--transition-bounce)ease-out}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.frosted-glass{-webkit-backdrop-filter:blur(40px)saturate(180%);background:#ffffff05;border:1px solid #ffffff14;border-radius:24px}.gradient-text{background:var(--liquid-gradient-secondary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glass-scrollbar::-webkit-scrollbar{width:8px}.glass-scrollbar::-webkit-scrollbar-track{background:var(--glass-white);border-radius:4px}.glass-scrollbar::-webkit-scrollbar-thumb{background:var(--glass-white-strong);-webkit-transition:background var(--transition-base);transition:background var(--transition-base);border-radius:4px}.glass-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--glass-border-strong)}.blur-light{-webkit-backdrop-filter:blur(var(--blur-light))}.blur-medium{-webkit-backdrop-filter:blur(var(--blur-medium))}.blur-strong{-webkit-backdrop-filter:blur(var(--blur-strong))}.transition-fluid{transition:all var(--transition-base)}.transition-bounce{transition:all var(--transition-bounce)}@media (max-width:768px){:root{--blur-light:8px;--blur-medium:14px;--blur-strong:24px}.glass-panel{border-radius:12px}.glass-button{padding:10px 20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-contrast:high){.glass-panel,.glass-button{border-width:2px}}.glass-input-container{width:100%;margin-bottom:1rem;position:relative}.glass-input{width:100%;-webkit-backdrop-filter:blur(var(--blur-medium));color:#fff;transition:all var(--transition-base);background:#ffffff0d;border:2px solid #ffffff1a;border-radius:12px;outline:none;padding:12px 16px;font-family:inherit;font-size:16px}.glass-input::placeholder{color:#ffffff4d}.glass-input:hover{background:#ffffff14;border-color:#fff3}.glass-input-focused{box-shadow:0 0 0 3px #8b5cf61a;background:#ffffff14!important;border-color:#8b5cf680!important}.glass-input-error{border-color:#ef444480!important}.glass-input-error:focus{box-shadow:0 0 0 3px #ef44441a;border-color:#ef4444!important}.glass-input-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.glass-input-label{pointer-events:none;transform-origin:0;color:#ffffff80;transition:color .3s;position:absolute;top:12px;left:16px}.glass-input-required{color:#ef4444;margin-left:4px}.glass-input-error-text{color:#ef4444;margin-top:4px;padding:0 4px;font-size:14px}.glass-select-container{width:100%;position:relative}.glass-select-label{color:#fff9;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.glass-select-trigger{background:var(--glass-white);width:100%;-webkit-backdrop-filter:blur(var(--blur-medium));border:1px solid var(--glass-border);color:#fff;cursor:pointer;border-radius:16px;outline:none;justify-content:space-between;align-items:center;padding:12px 16px;transition:all .3s;display:flex}.glass-select-trigger:hover{background:var(--glass-white-medium);border-color:#8b5cf666}.glass-select-placeholder{color:#fff6}.glass-select-value{color:#fff}.glass-select-arrow{color:#fff9;flex-shrink:0;width:20px;height:20px}.glass-select-dropdown{z-index:50;-webkit-backdrop-filter:blur(18px);background:linear-gradient(to bottom right,#ffffff0d,#ffffff05);border:1px solid #ffffff1a;border-radius:12px;margin-top:8px;position:absolute;top:100%;left:0;right:0;overflow:hidden;box-shadow:0 20px 60px #00000080}.glass-select-options{max-height:256px;overflow-y:auto}.glass-select-option{text-align:left;color:#fffc;cursor:pointer;background:0 0;border:none;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;transition:all .2s;display:flex}.glass-select-option:last-child{border-bottom:none}.glass-select-option:hover{background:#ffffff0d}.glass-select-option-selected{background:linear-gradient(90deg,#8b5cf633,#8b5cf61a,#0000)}.glass-select-option-label{flex:1}.glass-select-checkmark{color:#8b5cf6;flex-shrink:0;width:20px;height:20px}
@keyframes gradient-x{0%,to{background-position:0%}50%{background-position:100%}}.animate-gradient-x{background-size:200% 200%;animation:3s infinite gradient-x}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background-color:#0f172a}html[data-color-scheme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background-color:#f8fafc}[data-theme=dark]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-tertiary:#94a3b8;--border-color:#ffffff1a;--shadow-color:#00000080;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--accent-primary:#667eea;--accent-secondary:#764ba2;--success-color:#10b981;--error-color:#ef4444;--warning-color:#f59e0b}[data-theme=light]{--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#64748b;--border-color:#0000001a;--shadow-color:#0000001a;--glass-bg:#fffc;--glass-border:#0000001a;--accent-primary:#667eea;--accent-secondary:#764ba2;--success-color:#10b981;--error-color:#ef4444;--warning-color:#f59e0b}:root{--color-primary:#3b82f6;--color-primary-hover:#2563eb;--color-primary-active:#1d4ed8;--color-success:#10b981;--color-error:#ef4444;--color-warning:#f59e0b;--font-family-base:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--theme-primary:#3b82f6;--theme-background:#0f172a;--theme-surface:#ffffff0d;--theme-surface-hover:#ffffff1a;--theme-text:#f1f5f9;--theme-text-secondary:#cbd5e1;--theme-border:#ffffff1a}[data-color-scheme=light]{--color-primary:#3b82f6;--theme-primary:#3b82f6;--theme-background:#fff;--theme-surface:#f8fafc;--theme-surface-hover:#f1f5f9;--theme-text:#0f172a;--theme-text-secondary:#64748b;--theme-border:#0000001a}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-family-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--theme-background);color:var(--theme-text);margin:0;padding:0}.btn{cursor:pointer;white-space:nowrap;border:1px solid #0000;border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;line-height:1.25rem;text-decoration:none;transition:all .2s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn--primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--secondary{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-border)}.btn--secondary:hover:not(:disabled){background:var(--theme-surface-hover)}.btn--outline{color:var(--theme-text);border-color:var(--theme-border);background:0 0}.btn--outline:hover:not(:disabled){background:var(--theme-surface)}.btn--danger{background:var(--color-error);color:#fff;border-color:var(--color-error)}.btn--danger:hover:not(:disabled){background:#dc2626;box-shadow:0 4px 12px #ef44444d}.btn--sm{padding:.5rem 1rem;font-size:.813rem}.btn--lg{padding:1rem 2rem;font-size:1rem}.video-card,.playlist-card{background:var(--theme-surface);border:1px solid var(--theme-border);cursor:pointer;border-radius:1rem;padding:1rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.video-card:hover,.playlist-card:hover{border-color:var(--color-primary);transform:translateY(-4px);box-shadow:0 12px 24px #00000026}.question-card{background:var(--theme-surface);border:1px solid var(--theme-border);border-radius:.75rem;margin-bottom:1rem;padding:1.5rem}.animate-fade-in{animation:.3s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.stagger-item{opacity:0;animation:.5s ease-out forwards fadeInUp}.stagger-item:first-child{animation-delay:50ms}.stagger-item:nth-child(2){animation-delay:.1s}.stagger-item:nth-child(3){animation-delay:.15s}.stagger-item:nth-child(4){animation-delay:.2s}.stagger-item:nth-child(5){animation-delay:.25s}.stagger-item:nth-child(6){animation-delay:.3s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hover-lift{transition:transform .3s,box-shadow .3s}.hover-lift:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.hover-glow{transition:box-shadow .3s}.hover-glow:hover{box-shadow:0 0 20px #3b82f680}.video-list,.playlist-list{gap:1.5rem;padding:1rem;display:grid}.transition-all{transition:all .2s}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--theme-surface)}::-webkit-scrollbar-thumb{background:var(--theme-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;visibility:hidden;background-color:#000000bf;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s,visibility .3s;display:none;position:fixed;top:0;left:0;pointer-events:none!important}.modal-overlay.active{opacity:1;visibility:visible;display:flex;pointer-events:auto!important}.modal{background:var(--theme-surface);border:1px solid var(--theme-border);z-index:1001;border-radius:1rem;max-width:90%;max-height:90vh;position:relative;overflow:auto;box-shadow:0 20px 60px #0000004d}.modal-header{border-bottom:1px solid var(--theme-border);justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.modal-header h2{color:var(--theme-text);margin:0;font-size:1.5rem;font-weight:700}.modal-close{color:var(--theme-text);cursor:pointer;background:0 0;border:none;padding:.5rem;font-size:1.5rem;line-height:1;transition:color .2s}.modal-close:hover{color:var(--color-primary)}.modal-body{padding:1.5rem}.glass-modal{-webkit-backdrop-filter:blur(18px);background:#ffffff0d;border-color:#ffffff1a}
.ripple{pointer-events:none;background:#fff9;border-radius:50%;width:20px;height:20px;animation:.6s ease-out ripple-animation;position:absolute;transform:translate(-50%,-50%)scale(0)}@keyframes ripple-animation{0%{opacity:1;transform:translate(-50%,-50%)scale(0)}to{opacity:0;transform:translate(-50%,-50%)scale(20)}}
[data-color-scheme=light]{--color-background:#f0f0f0;--color-surface:#fafafa;--color-text:#3a3a3a;--color-text-secondary:#737373;--color-border:#0000000f;--color-primary:#3b82f6}[data-color-scheme=light] body{background:var(--color-background);color:var(--color-text)}[data-color-scheme=dark]{--color-background:#0a0e1a;--color-surface:#141824;--color-surface-elevated:#1e2433;--color-text:#e5e7eb;--color-text-secondary:#9ca3af;--color-border:#ffffff14;--color-primary:#60a5fa;--color-accent:#3b82f6}[data-color-scheme=dark] body{color:var(--color-text);background:linear-gradient(135deg,#0a0e1a 0%,#141824 100%) fixed}
