@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--text:#e2e8f0;--text-h:#fff;--text-dim:#94a3b8;--bg:#0f172a;--bg-panel:#1e293bb3;--border:#ffffff1a;--accent:#3b82f6;--accent-hover:#2563eb;--success:#10b981;--success-hover:#059669;--danger:#ef4444;--danger-hover:#dc2626;--gradient-main:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--gradient-success:linear-gradient(135deg, #10b981 0%, #34d399 100%);--shadow:0 10px 25px #0000004d;--glass-shadow:0 8px 32px 0 #0000005e;--glass-border:1px solid #ffffff2e;--nav-height:80px;font-family:Outfit,sans-serif}*{box-sizing:border-box}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(circle at 15%,#3b82f626,#0000 25%),radial-gradient(circle at 85% 30%,#8b5cf626,#0000 25%);background-attachment:fixed;min-height:100vh;margin:0;padding:0;font-family:Outfit,sans-serif}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4{color:var(--text-h);margin-top:0;font-weight:700}.container{width:100%;max-width:1200px;margin:0 auto;padding:2rem}.text-center{text-align:center}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.text-dim{color:var(--text-dim)}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(12px);border:var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;padding:2.5rem}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.btn:active{transform:translateY(0)}.btn-primary{background:var(--gradient-main);color:#fff}.btn-primary:hover{box-shadow:0 6px 15px #3b82f666}.btn-success{background:var(--gradient-success);color:#fff}.btn-outline{color:var(--accent);border:1px solid var(--accent);background:0 0}.btn-outline:hover{background:#3b82f61a}.btn-disabled{color:#94a3b8;cursor:not-allowed;background:#334155}.btn-disabled:hover{box-shadow:none;transform:none}.form-group{text-align:left;margin-bottom:1.5rem}.form-group label{color:var(--text-dim);margin-bottom:.5rem;font-weight:500;display:block}.form-input{width:100%;color:var(--text-h);background:#0f172a99;border:1px solid #ffffff1a;border-radius:8px;padding:.85rem 1rem;font-family:Outfit,sans-serif;font-size:1rem;transition:all .3s}.form-input:focus{border-color:var(--accent);background:#0f172acc;outline:none;box-shadow:0 0 0 3px #3b82f633}.form-input::placeholder{color:#ffffff4d}.auth-wrapper{justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.auth-box{text-align:center;width:100%;max-width:450px}.auth-link{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none;transition:color .3s}.auth-link:hover{color:var(--accent-hover);text-decoration:underline}.nav-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;display:flex}.nav-brand{background:var(--gradient-main);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.nav-actions{align-items:center;gap:1rem;display:flex}.course-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;margin-top:1.5rem;display:grid}.category-title{color:var(--text-h);border-bottom:2px solid #3b82f64d;margin:3rem 0 1.5rem;padding-bottom:.5rem;font-size:1.5rem;display:inline-block}.course-card{background:var(--bg-panel);border:1px solid #ffffff0d;border-radius:12px;flex-direction:column;padding:1.5rem;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden}.course-card:before{content:"";background:var(--gradient-main);transform-origin:0;width:100%;height:4px;transition:transform .4s;position:absolute;top:0;left:0;transform:scaleX(0)}.course-card:hover{border-color:#ffffff26;transform:translateY(-8px);box-shadow:0 15px 30px #0000004d}.course-card:hover:before{transform:scaleX(1)}.course-card h3{margin-bottom:.75rem;font-size:1.25rem;line-height:1.3}.course-card p{color:var(--text-dim);flex-grow:1;margin-bottom:1.5rem;font-size:.95rem;line-height:1.6}.course-card-actions{justify-content:space-between;gap:.5rem;margin-top:auto;display:flex}.progress-track{background:#ffffff1a;border-radius:4px;width:100%;height:6px;margin-bottom:1rem;overflow:hidden}.progress-fill{height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}.progress-fill.high{background:var(--success)}.progress-fill.medium{background:#f59e0b}.progress-fill.low{background:var(--danger)}.lesson-player-layout{width:100vw;height:100vh;display:flex;overflow:hidden}.video-section{background:#020617;flex-direction:column;flex:1;padding:2rem;display:flex;overflow-y:auto}.playlist-section{background:var(--bg-panel);border-left:var(--glass-border);flex-direction:column;width:350px;height:100%;display:flex}.back-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;align-self:flex-start;margin-bottom:1.5rem;font-family:Outfit,sans-serif;font-size:1rem;font-weight:500;transition:color .3s}.back-btn:hover{color:var(--text-h)}.video-container{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;max-width:1000px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000080}.youtube-iframe{border:none;width:100%;height:100%;position:absolute;top:0;left:0}.no-video{height:100%;color:var(--text-dim);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.current-lesson-details{width:100%;max-width:1000px;margin:2rem auto 0}.current-lesson-details h2{margin-bottom:.5rem;font-size:2rem}.lesson-desc{color:var(--text-dim);margin-bottom:2rem;font-size:1.1rem;line-height:1.6}.complete-btn{border:2px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .3s;display:flex}.complete-btn:hover{background:#3b82f61a}.complete-btn.completed{background:var(--success);border-color:var(--success);color:#fff}.playlist-header{border-bottom:1px solid #ffffff0d;padding:1.5rem}.playlist-header h3{margin:0 0 1rem;font-size:1.25rem}.progress-container{width:100%}.progress-info{color:var(--text-dim);justify-content:space-between;margin-bottom:.5rem;font-size:.85rem;display:flex}.progress-perc{color:var(--accent);font-weight:700}.progress-bar-bg{background:#ffffff1a;border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-bar-fill{background:var(--gradient-main);height:100%;transition:width .5s}.lesson-list{flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}.lesson-item{cursor:pointer;border-bottom:1px solid #ffffff08;align-items:center;padding:1rem 1.5rem;transition:background .2s;display:flex}.lesson-item:hover{background:#ffffff08}.lesson-item.active{border-left:3px solid var(--accent);background:#3b82f61a}.lesson-item.completed-item{opacity:.7}.lesson-status{border:1px solid var(--text-dim);width:24px;height:24px;color:var(--text-dim);border-radius:50%;justify-content:center;align-items:center;margin-right:1rem;font-size:.8rem;display:flex}.active .lesson-status{border-color:var(--accent);color:var(--accent)}.completed-item .lesson-status{background:var(--success);border-color:var(--success);color:#fff}.lesson-info{flex:1}.lesson-info h4{margin:0;font-size:.95rem;font-weight:500}.completed-item .lesson-info h4{color:var(--text-dim);text-decoration:line-through}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:80vh;padding:5rem 2rem;display:flex}.hero h1{background:linear-gradient(135deg,#fff 0%,#94a3b8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:4rem;line-height:1.1}.hero p{max-width:600px;color:var(--text-dim);margin:0 auto 2.5rem;font-size:1.25rem}.hero-actions{justify-content:center;gap:1rem;display:flex}.features-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:4rem;display:grid}.feature-card{text-align:center;background:#ffffff05;border:1px solid #ffffff0d;border-radius:12px;padding:2rem;transition:transform .3s}.feature-card:hover{background:#ffffff0a;transform:translateY(-5px)}.feature-icon{margin-bottom:1rem;font-size:2.5rem;display:inline-block}@media (width<=768px){.lesson-player-layout{flex-direction:column;overflow-y:auto}.playlist-section{border-left:none;border-top:var(--glass-border);width:100%}.hero h1{font-size:2.5rem}.course-grid{grid-template-columns:1fr}}