.header{background-color:var(--bg-header);-webkit-backdrop-filter:saturate(180%)blur(14px);z-index:1000;border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:14px 24px;display:flex;position:sticky;top:0}.brand{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-color);align-items:center;gap:10px;font-size:1.3rem;font-weight:800;text-decoration:none;transition:transform .2s;display:inline-flex}.brand:hover{transform:translateY(-1px)}.brand-mark{font-family:var(--font-mono);color:var(--primary-text-color);background:linear-gradient(135deg, var(--primary-bg-color), #8b5cf6);border-radius:9px;padding:5px 8px;font-size:.95rem;font-weight:700;line-height:1;box-shadow:0 4px 12px #5b5bf059}.brand-accent{color:var(--primary-bg-color)}.dark .brand-accent{color:#9d9cff}#header-lang{flex-direction:column;align-items:center;width:100%;margin:10px 0;display:flex;position:relative}#header-lang button.selected{border:2px solid var(--text-color)}.burger{cursor:pointer;background:0 0;border:none;outline:none;flex-direction:column;gap:5px;padding:5px;display:flex}.burger:focus,.burger:active{outline:none}.burger span{background:var(--text-color);width:25px;height:3px;transition:all .3s}.burger.active span:first-child{transform:translateY(8px)rotate(45deg)}.burger.active span:nth-child(2){opacity:0}.burger.active span:nth-child(3){transform:translateY(-8px)rotate(-45deg)}nav{position:relative}.dropdown{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);z-index:1001;transform-origin:100% 0;flex-direction:column;gap:6px;width:230px;padding:.9rem;animation:.16s cubic-bezier(.4,0,.2,1) dropdown-in;display:flex;position:absolute;top:140%;right:0;box-shadow:0 18px 40px -12px #0c132247}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}#header-lang .dropdown{width:150px;box-shadow:var(--shadow-md);position:absolute;top:100%;left:50%;transform:translate(-50%)}.dropdown a{color:var(--text-color);border-radius:var(--radius-sm);text-align:center;padding:10px 14px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background-color .18s,color .18s,transform .18s;display:block}.dropdown a:hover{background-color:color-mix(in srgb, var(--primary-bg-color) 12%, transparent);color:var(--primary-bg-color)}.dark .dropdown a:hover{color:#b3b2ff}.header-icon{width:100px}.site-footer{background:var(--bg-footer);color:#c7ccda;border-radius:var(--radius-md) var(--radius-md) 0 0;margin-top:80px;padding:40px 32px 28px}.footer-top{max-width:var(--max-width);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin:0 auto;display:flex}.footer-brand{font-family:var(--font-display);color:#fff;letter-spacing:-.02em;align-items:center;gap:10px;font-size:1.25rem;font-weight:800;text-decoration:none;display:inline-flex}.footer-mark{font-family:var(--font-mono);color:#fff;background:linear-gradient(135deg, var(--primary-bg-color), #8b5cf6);border-radius:8px;padding:4px 7px;font-size:.85rem;font-weight:700;line-height:1}.footer-links{flex-wrap:wrap;gap:28px;display:flex}.footer-links a{color:#c7ccda;font-size:.92rem;font-weight:500;text-decoration:none;transition:color .2s}.footer-links a:hover{color:#fff}.footer-divider{height:1px;max-width:var(--max-width);background:#ffffff1a;margin:24px auto}.footer-copy{text-align:center;color:#8b93a7;font-size:.85rem}@media (width<=560px){.footer-top{flex-direction:column;align-items:flex-start}}.feature-link{width:30%;min-width:250px;color:inherit;text-decoration:none}.feature-card{flex-direction:column;justify-content:center;align-items:center;display:flex}.feature-card p{text-align:center}#hero{border-radius:var(--radius-md);min-height:55vh;box-shadow:var(--shadow-md);background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 60%,#3b0764 100%);justify-content:center;align-items:center;margin:30px 20px;padding:60px 20px;display:flex;position:relative;overflow:hidden}#hero:after{content:"";pointer-events:none;background:radial-gradient(circle,#6366f133 0%,#6366f100 70%);width:250px;height:250px;position:absolute;top:-50px;right:-50px}#hero-card{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:720px;display:flex}#hero-card>*{animation:.6s cubic-bezier(.2,.7,.2,1) both hero-rise}#hero-card>:first-child{animation-delay:20ms}#hero-card>:nth-child(2){animation-delay:.1s}#hero-card>:nth-child(3){animation-delay:.18s}#hero-card>:nth-child(4){animation-delay:.26s}@keyframes hero-rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.hero-eyebrow{font-family:var(--font-mono);letter-spacing:.04em;color:#c7d2fe;background:#6366f124;border:1px solid #818cf84d;border-radius:999px;align-items:center;gap:9px;margin-bottom:22px;padding:7px 14px;font-size:.78rem;font-weight:500;display:inline-flex}.hero-dot{background:var(--accent);border-radius:50%;width:7px;height:7px;animation:2s infinite hero-pulse;box-shadow:0 0 #18c8a899}@keyframes hero-pulse{0%{box-shadow:0 0 #18c8a880}70%{box-shadow:0 0 0 8px #18c8a800}to{box-shadow:0 0 #18c8a800}}#hero-card h1{background:linear-gradient(90deg,#fff,#e0e7ff);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;margin-bottom:15px;font-size:2.8rem;font-weight:800;line-height:1.25}#hero-card p{color:#cbd5e1;margin-bottom:30px;font-size:1.15rem;line-height:1.6}#home-link{width:auto;min-width:240px;padding:12px 36px;font-size:1.05rem;box-shadow:0 4px 14px #6366f166}#features{max-width:var(--max-width);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin:60px auto;padding:0 20px;display:grid}.feature-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);height:100%;box-shadow:var(--shadow-sm);flex-direction:column;justify-content:center;align-items:center;padding:40px 30px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.feature-card:before{content:"";background:linear-gradient(90deg, var(--primary-bg-color), #8b5cf6, var(--accent));transform-origin:0;height:3px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.feature-card:hover{border-color:color-mix(in srgb, var(--primary-bg-color) 40%, var(--border-color));transform:translateY(-6px);box-shadow:0 18px 40px -16px #5b5bf059}.feature-card:hover:before{transform:scaleX(1)}.feature-card h3{color:var(--text-color);margin-bottom:10px;font-size:1.3rem}.feature-card p{color:var(--text-color-soft);text-align:center;font-size:.95rem;line-height:1.5}.error-page{text-align:center;background:radial-gradient(900px 480px at 50% 0%, #6366f129, transparent 60%), var(--bg-color);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:40px 20px;display:flex;position:relative;overflow:hidden}.error-glow{pointer-events:none;background:radial-gradient(circle,#8b5cf62e,#0000 70%);border-radius:50%;width:420px;height:420px;position:absolute;bottom:-160px}.error-brand{font-family:var(--font-display);color:var(--text-color);letter-spacing:-.02em;z-index:1;align-items:center;gap:10px;margin-bottom:28px;font-size:1.2rem;font-weight:800;text-decoration:none;display:inline-flex}.error-mark{font-family:var(--font-mono);color:#fff;background:linear-gradient(135deg, var(--primary-bg-color), #8b5cf6);border-radius:8px;padding:4px 7px;font-size:.85rem;font-weight:700;line-height:1}.error-accent{color:var(--primary-bg-color)}.error-code{font-family:var(--font-display);letter-spacing:-.04em;background:linear-gradient(135deg, var(--primary-bg-color), #8b5cf6 55%, var(--accent));-webkit-text-fill-color:transparent;z-index:1;-webkit-background-clip:text;background-clip:text;font-size:clamp(5rem,4rem + 12vw,11rem);font-weight:800;line-height:.9}.error-title{z-index:1;margin:14px 0 8px;font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem)}.error-path{font-family:var(--font-mono);color:var(--text-color-soft);word-break:break-all;z-index:1;margin-bottom:32px;font-size:.9rem}.error-home{z-index:1}.terms-page{background:radial-gradient(1000px 500px at 50% -10%, #6366f11f, transparent 60%), var(--bg-color);justify-content:center;min-height:100vh;padding:48px 20px 80px;display:flex}.terms-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;max-width:760px;box-shadow:var(--shadow-md);padding:48px 52px}.terms-brand{font-family:var(--font-display);color:var(--text-color);letter-spacing:-.02em;align-items:center;gap:10px;margin-bottom:28px;font-size:1.25rem;font-weight:800;text-decoration:none;display:inline-flex}.terms-mark{font-family:var(--font-mono);color:#fff;background:linear-gradient(135deg, var(--primary-bg-color), #8b5cf6);border-radius:8px;padding:4px 7px;font-size:.85rem;font-weight:700;line-height:1}.terms-accent{color:var(--primary-bg-color)}.terms-card h1{text-align:left;margin-bottom:6px;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.1rem)}.terms-updated{color:var(--text-color-soft);font-size:.9rem;font-family:var(--font-mono);margin-bottom:32px}.terms-body{flex-direction:column;gap:26px;display:flex}.terms-body h2{text-align:left;color:var(--text-color);margin-bottom:8px;font-size:1.12rem}.terms-body p{color:var(--text-color-soft);font-size:.98rem;line-height:1.7}.terms-back{margin-top:40px}@media (width<=560px){.terms-card{padding:32px 24px}}#contact-section{max-width:640px;margin:0 auto;padding:40px 20px}.contact-form{background-color:var(--bg-form);border-radius:var(--radius-md);box-shadow:var(--shadow-md);flex-direction:column;gap:16px;padding:36px 32px;display:flex}.contact-textarea{border:1px solid var(--secondary-bg-hover);border-radius:var(--radius-sm);background-color:var(--bg-color);width:100%;color:var(--text-color);resize:vertical;min-height:140px;padding:14px 16px;font-size:.95rem}.contact-btns{gap:12px;display:flex}.contact-btns .btn{flex:1}.contact-inbox{flex-direction:column;gap:14px;margin-top:24px;display:flex}.contact-message{background-color:var(--bg-form);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);border-left:4px solid var(--primary-bg-color);padding:16px 20px}.contact-message header{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.contact-message header span{color:var(--text-color-soft);font-size:.82rem}.contact-message p{white-space:pre-wrap;word-break:break-word}#section-form{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:calc(100vh - 220px);padding:48px 20px;display:flex}#section-form>h1{margin-bottom:2px}#section-form>h3{font-family:var(--font-body);color:var(--text-color-soft);max-width:440px;font-size:1rem;font-weight:500;line-height:1.5}#form{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;gap:6px;width:100%;max-width:440px;margin-top:26px;padding:34px 32px;display:flex;box-shadow:0 24px 60px -24px #0c132247}#form>h3{margin-bottom:8px;font-size:1.25rem}#form-error{color:var(--danger-bg-color);border-radius:var(--radius-sm);text-align:center;background-color:#ef44441f;border:1px solid #ef44444d;margin-bottom:6px;padding:10px 14px;font-size:.9rem}#form-btn-container{gap:12px;margin-top:22px;display:flex}#form-btn-container button{flex:1;width:auto}#form-box,#form-terms{text-align:left;color:var(--text-color-soft);align-items:center;gap:8px;margin-top:14px;font-size:.9rem;display:flex}#form-box input,#form-terms input{width:17px;height:17px;accent-color:var(--primary-bg-color);cursor:pointer}#forgot{color:var(--primary-bg-color);margin-top:12px;font-size:.88rem;font-weight:600;text-decoration:none;display:inline-block}#forgot:hover{text-decoration:underline}#sign-text{text-align:center;color:var(--text-color-soft);margin-top:18px;font-size:.9rem}#login-signin{color:var(--primary-bg-color);margin-left:5px;font-weight:600;text-decoration:none}#login-signin:hover{text-decoration:underline}@media (width<=480px){#form{padding:26px 20px}}.form-container{text-align:left;flex-direction:column;gap:7px;margin-top:4px;display:flex}.form-label{color:var(--text-color-soft);letter-spacing:.01em;font-size:.84rem;font-weight:600}.form-input{width:100%;color:var(--text-color);background-color:var(--bg-color);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);outline:none;padding:13px 16px;font-size:.98rem;transition:border-color .18s,box-shadow .18s,background-color .18s}.form-input::placeholder{color:var(--text-color-soft);opacity:.7}.form-input:hover{border-color:color-mix(in srgb, var(--primary-bg-color) 35%, var(--border-color))}.form-input:focus{border-color:var(--primary-bg-color);background-color:var(--bg-card);box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-bg-color) 16%, transparent)}#form-terms label{cursor:pointer}#form-terms a{color:var(--primary-bg-color);text-decoration:none}#form-terms a:hover{text-decoration:underline}#forgot{align-self:flex-start}.reset-card{margin-top:26px}.reset-status-msg{color:var(--text-color-soft);margin-top:32px;font-size:1rem}.reset-hint{color:var(--text-color-soft);text-align:left;margin-top:4px;font-size:.8rem}.input-group{text-align:left;flex-direction:column;gap:6px;margin-top:8px;display:flex}.input-group label{color:var(--text-color-soft);font-size:.88rem;font-weight:600}.input-group input{border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-input,var(--bg-card));color:var(--text-color);outline:none;padding:10px 14px;font-size:.95rem;transition:border-color .2s}.input-group input:focus{border-color:var(--primary-bg-color);box-shadow:0 0 0 3px #6c63ff26}#form-error.success{color:#22c55e;background-color:#22c55e1f;border-color:#22c55e4d}#form-btn-container a{flex:1;justify-content:center;align-items:center;text-decoration:none;display:flex}.verify-input{text-align:center;width:64px;height:64px;font-family:var(--font-mono);color:var(--text-color);background-color:var(--bg-color);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);outline:none;margin:8px auto 0;font-size:1.6rem;transition:border-color .18s,box-shadow .18s;display:block}.verify-input:focus{border-color:var(--primary-bg-color);box-shadow:0 0 0 4px color-mix(in srgb, var(--primary-bg-color) 16%, transparent)}.verify-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.verify-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.verify-input{appearance:textfield}.learn-loading{padding:var(--space-2xl) 0;flex-direction:column;justify-content:center;align-items:center;min-height:400px;display:flex}.spinner{border:4px solid var(--clr-border);border-top-color:var(--clr-primary);width:48px;height:48px;margin-bottom:var(--space-md);border-radius:50%;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.learn-error-container{text-align:center;padding:var(--space-2xl) 0;background:var(--clr-surface);border-radius:var(--radius-md);border:1px solid var(--clr-danger);max-width:600px;margin:var(--space-xl) auto;flex-direction:column;justify-content:center;align-items:center;display:flex}.error-message{color:var(--clr-danger);margin-bottom:var(--space-md);font-weight:600}.courses-dashboard{max-width:var(--max-width);padding:var(--space-xl) var(--space-md);margin:0 auto}.dashboard-header{text-align:center;margin-bottom:var(--space-2xl)}.dashboard-header h1{margin-bottom:var(--space-sm);background:linear-gradient(135deg, var(--clr-primary), var(--clr-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.5rem}.dashboard-header p{color:var(--clr-text-soft);font-size:1.1rem}.courses-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:20px;display:grid}.course-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;display:flex;position:relative;overflow:hidden}.course-card:before{content:"";height:6px;position:absolute;top:0;left:0;right:0}.course-card:hover{box-shadow:var(--shadow-md);transform:translateY(-5px)}.course-card-content{padding:var(--space-lg);flex-direction:column;flex-grow:1;display:flex}.course-icon-container{margin-bottom:var(--space-md)}.course-badge{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);color:var(--clr-text-inv);letter-spacing:.05em;font-size:.75rem;font-weight:700}.course-card h3{margin-bottom:var(--space-sm);font-size:1.35rem}.course-card p{color:var(--clr-text-soft);margin-bottom:var(--space-lg);flex-grow:1;font-size:.95rem;line-height:1.5}.start-course-btn{justify-content:center;width:100%}.html-theme:before,.html-theme .course-badge{background:#e34f26}.css-theme:before,.css-theme .course-badge{background:#1572b6}.js-theme:before{background:#f7df1e}.js-theme .course-badge{color:#000;background:#f7df1e}.php-theme:before,.php-theme .course-badge{background:#777bb4}.node-theme:before,.node-theme .course-badge{background:#393}.sql-theme:before,.sql-theme .course-badge{background:#00758f}.default-theme:before,.default-theme .course-badge{background:var(--clr-primary)}.modules-view,.levels-view{max-width:800px;padding:var(--space-xl) var(--space-md);margin:0 auto}.modules-header,.levels-header{margin-bottom:var(--space-xl)}.back-btn{margin-bottom:var(--space-md)}.modules-header h1,.levels-header h1{margin-bottom:var(--space-xs);font-size:2.2rem}.modules-header p,.levels-header p{color:var(--clr-text-soft)}.modules-list{gap:var(--space-md);flex-direction:column;display:flex}.module-item-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:var(--space-lg);cursor:pointer;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);justify-content:space-between;align-items:center;gap:10px;display:flex}.module-item-card:hover{border-color:var(--clr-primary);box-shadow:var(--shadow-sm)}.module-index{text-transform:uppercase;color:var(--clr-primary);letter-spacing:.05em;margin-bottom:var(--space-xs);font-size:.8rem;font-weight:700;display:block}.module-info h2{margin-bottom:var(--space-xs);font-size:1.25rem}.module-info p{color:var(--clr-text-soft);font-size:.9rem}.arrow-icon{color:var(--clr-text-soft);transition:transform var(--transition-fast);font-size:1.5rem}.module-item-card:hover .arrow-icon{color:var(--clr-primary);transform:translate(5px)}.levels-list{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);gap:var(--space-md);flex-direction:column;display:flex;overflow:hidden}.level-item-row{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--clr-border);cursor:pointer;transition:background var(--transition-fast);align-items:center;display:flex}.level-item-row:last-child{border-bottom:none}.level-item-row:hover{background:var(--clr-surface-soft)}.level-status-indicator{margin-right:var(--space-lg);justify-content:center;align-items:center;font-size:1.2rem;display:flex}.checkmark-icon{color:var(--clr-success);font-weight:700}.pending-icon{color:var(--clr-text-soft);opacity:.5}.level-details{flex-grow:1}.level-tag{text-transform:uppercase;color:var(--clr-text-soft);font-size:.75rem;font-weight:700;display:block}.level-details h3{font-size:1.05rem;font-weight:600}.level-item-row.completed h3{color:var(--clr-text-soft);opacity:.8;text-decoration:line-through}.lesson-page-layout{background:var(--clr-bg);grid-template-columns:280px 1fr;min-height:calc(100vh - 64px);display:grid}.lesson-sidebar{border-right:1px solid var(--clr-border);background:var(--clr-surface);flex-direction:column;height:calc(100vh - 64px);display:flex;position:sticky;top:64px;overflow-y:auto}.sidebar-header{padding:var(--space-md);border-bottom:1px solid var(--clr-border)}.sidebar-back-btn{margin-bottom:var(--space-sm);padding:var(--space-xs) var(--space-sm);width:100%;font-size:.8rem}.sidebar-header h3{color:var(--clr-text);font-size:1.1rem;font-weight:700}.sidebar-nav{padding:var(--space-sm) 0;flex-direction:column;display:flex}.sidebar-nav-item{padding:var(--space-sm) var(--space-md);color:var(--clr-text);text-align:left;cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;border-left:3px solid #0000;align-items:center;font-family:inherit;font-size:.9rem;display:flex}.sidebar-nav-item:hover{background:var(--clr-surface-soft)}.sidebar-nav-item.active{background:var(--clr-primary-light);color:var(--clr-primary);border-left-color:var(--clr-primary);font-weight:600}.sidebar-nav-item.completed .item-status{color:var(--clr-success)}.item-status{margin-right:var(--space-sm);font-weight:700}.lesson-main-content{padding:var(--space-xl) var(--space-lg);overflow-y:auto}.no-lesson-content{max-width:600px;margin:var(--space-2xl) auto;text-align:center}.no-lesson-content h2{margin-bottom:var(--space-md)}.no-lesson-content p{color:var(--clr-text-soft);margin-bottom:var(--space-xl)}.lesson-article{max-width:100%;margin:0 auto}.lesson-article-header{margin-bottom:var(--space-md)}.lesson-article-header h1{margin-bottom:var(--space-xs);font-size:2.2rem}.lesson-badge-row{gap:var(--space-sm);align-items:center;display:flex}.lesson-type-badge{border-radius:var(--radius-sm);padding:2px 6px;font-size:.7rem;font-weight:700}.lesson-type-badge.theory{color:#083344;background:#cffafe}.lesson-type-badge.game{color:#713f12;background:#fef9c3}.lesson-completed-badge{color:#065f46;border-radius:var(--radius-sm);background:#d1fae5;padding:2px 6px;font-size:.7rem;font-weight:700}.lesson-text-body{color:var(--clr-text);margin-top:var(--space-lg);font-size:1.05rem;line-height:1.7}.lesson-text-body p{margin-bottom:var(--space-md)}.interactive-code-box{background:var(--clr-surface-soft);border:1px solid var(--clr-border);border-radius:var(--radius-md);margin:var(--space-xl) 0;overflow:hidden}.code-box-header{padding:var(--space-sm) var(--space-md);background:var(--clr-border);justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600;display:flex}.code-box-preview{padding:var(--space-md);color:#f7fafc;background:#2d3748;margin:0;font-family:Courier New,Courier,monospace;font-size:.95rem;overflow-x:auto}.live-playground{border-top:2px solid var(--clr-border);background:#1a202c;grid-template-columns:1fr 1fr;min-height:350px;display:grid}.playground-pane{flex-direction:column;height:100%;display:flex}.editor-pane{border-right:2px solid var(--clr-border)}.pane-header{color:#edf2f7;padding:var(--space-xs) var(--space-md);text-transform:uppercase;background:#2d3748;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;display:flex}.playground-textarea{color:#cbd5e0;width:100%;padding:var(--space-md);resize:none;background:#1a202c;border:none;outline:none;flex-grow:1;min-height:300px;font-family:Courier New,Courier,monospace;font-size:.9rem;line-height:1.4}.playground-iframe{background:#fff;border:none;flex-grow:1;width:100%;min-height:300px;overflow:auto}.navigation-footer{padding-top:var(--space-xl);margin-top:var(--space-xl);border-top:1px solid var(--clr-border);justify-content:space-between;align-items:center;display:flex}.complete-btn{font-weight:700}@media (width<=768px){.lesson-page-layout{grid-template-columns:1fr}.lesson-sidebar{height:auto;max-height:250px;position:relative;top:0}.live-playground{grid-template-columns:1fr}}.preview-pane{flex-direction:column;display:flex;overflow:hidden}.terminal-preview{color:#e0e0e0;box-sizing:border-box;white-space:pre;background:#1e1e1e;flex-grow:1;height:calc(100% - 40px);padding:15px;font-family:Courier New,Courier,monospace;font-size:14px;overflow:auto}.sql-table-wrapper{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}.sql-table-wrapper table{min-width:600px}.playground-tabs{gap:12px;display:flex}.playground-tab{color:#a0aec0;cursor:pointer;text-transform:uppercase;background:0 0;border:none;border-bottom:2px solid #0000;outline:none;padding:6px 4px;font-size:.85rem;font-weight:700;transition:all .2s}.playground-tab:hover{color:#edf2f7}.playground-tab.active{color:#3182ce;border-bottom-color:#3182ce}#ranking-section{max-width:720px;margin:0 auto;padding:40px 20px}.ranking-tabs{grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 28px;display:grid}.ranking-tabs .btn{flex-direction:column;gap:2px;padding:12px 8px}.ranking-top{opacity:.8;font-size:.7rem;font-weight:400}.ranking-list{flex-direction:column;gap:8px;list-style:none;display:flex}.ranking-row{background-color:var(--bg-form);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:14px 18px;display:grid}.ranking-pos{background-color:var(--secondary-bg-color);width:34px;height:34px;color:var(--secondary-text-color);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex}.pos-1 .ranking-pos{color:#1f2937;background-color:#fbbf24}.pos-2 .ranking-pos{color:#1f2937;background-color:#cbd5e1}.pos-3 .ranking-pos{color:#fff;background-color:#d97706}.ranking-name{font-weight:600}.ranking-value{color:var(--primary-bg-color);font-weight:700}.stats-loading,.stats-empty{text-align:center;color:var(--text-color-soft);padding:30px}@media (width<=560px){.ranking-tabs{grid-template-columns:repeat(2,1fr)}}#progress-section{max-width:760px;margin:0 auto;padding:40px 20px}.stats-subtitle{text-align:center;color:var(--text-color-soft);margin-bottom:28px}.progress-summary{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px;display:grid}.summary-card{background-color:var(--bg-form);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);text-align:center;flex-direction:column;gap:6px;padding:22px 16px;display:flex}.summary-card.highlight{background:linear-gradient(135deg, var(--primary-bg-color), var(--primary-bg-hover));color:#fff}.summary-value{font-size:1.8rem;font-weight:700}.summary-label{opacity:.85;font-size:.85rem}.progress-global{margin-bottom:36px}.progress-global-head,.lang-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.lang-head span,.progress-global-head span{color:var(--text-color-soft);font-size:.9rem}.bar{background-color:var(--secondary-bg-color);border-radius:999px;width:100%;height:12px;overflow:hidden}.bar-fill{background:linear-gradient(90deg, var(--primary-bg-color), #8b5cf6);border-radius:999px;height:100%;transition:width .5s}.progress-languages-title{margin-bottom:18px}.progress-languages{flex-direction:column;gap:18px;display:flex}.lang-row{background-color:var(--bg-form);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:16px 18px}.stats-error{text-align:center;color:var(--danger-bg-color);padding:40px}.stats-empty{text-align:center;color:var(--text-color-soft);padding:20px}@media (width<=560px){.progress-summary{grid-template-columns:1fr}}#profile-section{justify-content:center;padding:40px 20px;display:flex}.profile-card{background-color:var(--bg-form);border-radius:var(--radius-md);box-shadow:var(--shadow-md);flex-direction:column;align-items:center;gap:12px;width:100%;max-width:520px;padding:40px 32px;display:flex}.profile-avatar{background:linear-gradient(135deg, var(--primary-bg-color), var(--primary-bg-hover));color:#fff;width:88px;height:88px;box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;font-size:2.4rem;font-weight:700;display:flex}.profile-badge{text-transform:capitalize;background-color:var(--secondary-bg-color);color:var(--secondary-text-color);border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:600}.profile-badge.role-admin{color:#fff;background-color:#ef4444}.profile-badge.role-editor{color:#1f2937;background-color:#f59e0b}.profile-badge.role-user{color:#fff;background-color:#6366f1}.profile-data{flex-direction:column;gap:12px;width:100%;margin-top:16px;list-style:none;display:flex}.profile-data li{border:1px solid var(--secondary-bg-color);border-radius:var(--radius-sm);grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px 16px;display:grid}.profile-data li span{color:var(--text-color-soft);font-size:.85rem}.profile-data li strong{text-overflow:ellipsis;white-space:nowrap;justify-self:start;max-width:220px;overflow:hidden}.profile-delete{margin-top:20px}.profile-error{text-align:center;color:var(--danger-bg-color);padding:40px}@media (width<=540px){.profile-data li{grid-template-columns:1fr;gap:6px}.profile-data li strong{max-width:100%}}#update-section{justify-content:center;padding:40px 20px;display:flex}.update-form{background-color:var(--bg-form);border-radius:var(--radius-md);box-shadow:var(--shadow-md);flex-direction:column;gap:18px;width:100%;max-width:440px;padding:36px 32px;display:flex}.update-form h1{margin-bottom:6px}.update-msg{border-radius:var(--radius-sm);text-align:center;padding:10px 14px;font-size:.9rem}.update-error{color:var(--danger-bg-color);background-color:#ef44441f}.update-success{color:#16a34a;background-color:#22c55e24}.update-btns{gap:12px;margin-top:8px;display:flex}.update-btns .btn{flex:1}.element-info{border:1px solid #000;flex-direction:row;justify-content:space-between;align-items:center;margin-top:5px;padding:5px;display:flex}.element-btn{gap:10px;display:flex}.edit-lesson input[type=text],.edit-lesson textarea{width:100%;color:var(--text-main);background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius);transition:var(--transition);box-sizing:border-box;padding:.85rem 1rem;font-family:inherit;font-size:1rem}.edit-lesson input::placeholder,.edit-lesson textarea::placeholder{color:var(--text-muted);opacity:.7}.edit-lesson input[type=text]:focus,.edit-lesson textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #4f46e51a}.edit-lesson input[type=text]{font-size:1.25rem;font-weight:600}.edit-lesson textarea{resize:vertical;min-height:180px;line-height:1.6}.edit-lesson textarea:last-of-type{background-color:var(--bg-secondary);border-color:var(--border-color);font-family:Fira Code,Courier New,Courier,monospace;font-size:.95rem}.lesson-btn{justify-content:flex-end;gap:1rem;margin-top:1rem;display:flex}#edit-section{width:80%;margin:auto}.edit-header{justify-content:space-between;margin-top:20px;margin-bottom:5px;display:flex}.edit-content{margin-top:15px}.edit-content form{flex-direction:row;align-items:center;gap:10px;display:flex}.edit-input{border:2px solid #000;padding:10px}#userlist-section{max-width:1000px;margin:0 auto;padding:40px 20px}.userlist-controls{flex-direction:column;gap:14px;margin:24px 0;display:flex}.userlist-search{border:1px solid var(--secondary-bg-hover);border-radius:var(--radius-sm);background-color:var(--bg-form);width:100%;color:var(--text-color);padding:12px 16px;font-size:.95rem}.userlist-filters{flex-wrap:wrap;justify-content:space-between;gap:12px;display:flex}.filter-group{flex-wrap:wrap;gap:8px;display:flex}.userlist-table{flex-direction:column;gap:6px;display:flex}.userlist-row{background-color:var(--bg-form);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);grid-template-columns:50px 1fr 1.4fr 130px 90px 200px;align-items:center;gap:10px;padding:12px 16px;display:grid}.userlist-head{background-color:var(--secondary-bg-color);color:var(--text-color-soft);box-shadow:none;font-size:.85rem;font-weight:600}.userlist-email{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.userlist-select{border-radius:var(--radius-sm);border:1px solid var(--secondary-bg-hover);background-color:var(--bg-color);color:var(--text-color);padding:6px 8px}.userlist-actions{gap:6px;display:flex}.userlist-actions .btn{padding:6px 12px;font-size:.85rem}@media (width<=820px){.userlist-head{display:none}.userlist-row{grid-template-columns:1fr;gap:8px}.userlist-row span{justify-content:space-between;align-items:center;display:flex}.userlist-row span:before{content:attr(data-label);color:var(--text-color-soft);font-size:.8rem;font-weight:600}.userlist-actions{justify-content:flex-end}}.btn{border-radius:var(--radius-sm);cursor:pointer;text-align:center;box-shadow:var(--shadow-sm);-webkit-user-select:none;user-select:none;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 22px;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn-primary{color:var(--primary-text-color);background-color:var(--primary-bg-color)}.btn-primary:hover{background-color:var(--primary-bg-hover)}.btn-secondary{color:var(--secondary-text-color);background-color:var(--secondary-bg-color);border-color:var(--secondary-bg-hover)}.btn-secondary:hover{background-color:var(--secondary-bg-hover)}.btn-warning{color:var(--warning-text-color);background-color:var(--warning-bg-color)}.btn-warning:hover{background-color:var(--warning-bg-hover)}.btn-danger{color:var(--danger-text-color);background-color:var(--danger-bg-color)}.btn-danger:hover{background-color:var(--danger-bg-hover)}.btn-contrast{color:var(--text-color);border-color:var(--secondary-bg-hover);background:0 0}.btn-contrast:hover{background-color:var(--secondary-bg-color)}h1,h2,h3,h4{font-family:var(--font-display);text-align:center;letter-spacing:-.02em;font-weight:700;line-height:1.15}h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.6rem)}h2{font-size:clamp(1.4rem,1rem + 1.4vw,1.9rem)}.link{cursor:pointer}.icon{object-fit:contain;width:120px;height:120px;margin-bottom:15px;transition:transform .3s}.feature-card:hover .icon{transform:scale(1.08)}.hidden{display:none!important}.transparent{opacity:0}.click{cursor:pointer}.route-loading{min-height:50vh;color:var(--text-color-soft);justify-content:center;align-items:center;font-size:1.1rem;display:flex}:root{--font-display:"Bricolage Grotesque", system-ui, sans-serif;--font-body:"Hanken Grotesk", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;--font-family:var(--font-body);--text-color:#0c1322;--text-color-soft:#5b6472;--bg-color:#f6f7fb;--bg-header:#ffffffb8;--bg-card:#fff;--bg-form:#fff;--bg-footer:#0b1020;--border-color:#e6e8ef;--primary-text-color:#fff;--primary-bg-color:#5b5bf0;--primary-bg-hover:#4744e0;--accent:#18c8a8;--accent-2:#ff7a59;--secondary-text-color:#1f2937;--secondary-bg-color:#f3f4f6;--secondary-bg-hover:#e5e7eb;--warning-text-color:#1f2937;--warning-bg-color:#f59e0b;--warning-bg-hover:#d97706;--danger-text-color:#fff;--danger-bg-color:#ef4444;--danger-bg-hover:#dc2626;--footer-line-color:#374151;--max-width:1500px;--radius-sm:8px;--radius-md:12px;--shadow-sm:0 1px 3px #00000014, 0 1px 2px #0000000a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--space-md:5px;--space-lg:10px}.dark{--text-color:#eef1f8;--text-color-soft:#9aa3b2;--bg-color:#080b14;--bg-header:#0f1320b8;--bg-card:#11162a;--bg-form:#11162a;--bg-footer:#05070e;--border-color:#222a40;--primary-bg-color:#6d6cff;--primary-bg-hover:#8281ff;--secondary-text-color:#eef1f8;--secondary-bg-color:#1b2236;--secondary-bg-hover:#2a3350}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body,button,input,select,textarea{font-family:var(--font-family)}body{background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;max-width:var(--max-width);margin:0 auto;line-height:1.6;transition:background-color .3s,color .3s}.main-content{min-height:70vh}