:root{--bg-app:#0a0a0a;--bg-side:#111;--bg-panel:#181818;--accent:#007acc;--text:#e0e0e0;--dim:#888;--border:#252525;--success:#4caf50;--error:#f44336}body{background:var(--bg-app);color:var(--text);margin:0;font-family:Inter,sans-serif;overflow-y:auto}.app-container{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--bg-side);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:50px;padding:0 20px;display:flex;position:sticky;top:0}.header-left h1{letter-spacing:.5px;text-transform:uppercase;margin:0;font-size:.9rem;font-weight:900}.header-right{align-items:center;gap:15px;display:flex}.main-layout{flex:1;display:flex}.sidebar{background:var(--bg-side);border-right:1px solid var(--border);flex-direction:column;width:240px;height:calc(100vh - 50px);display:flex;position:sticky;top:50px;overflow-y:auto}.sidebar-divider{color:var(--accent);letter-spacing:1.5px;padding:20px 15px 5px;font-size:.65rem;font-weight:700}.level-heading{color:var(--dim);letter-spacing:1px;padding:15px 15px 5px;font-size:.7rem;font-weight:800}.lesson-grid{flex-direction:column;gap:8px;padding:0 15px 15px;display:flex}.lesson-card{background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:12px;transition:all .2s}.lesson-card.active{border-color:var(--accent);background:#007acc1a}.card-top{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.l-badge{color:#000;border-radius:2px;justify-content:center;align-items:center;width:16px;height:16px;font-size:.6rem;font-weight:900;display:flex}.l-badge.beginner{background:#4caf50}.l-badge.intermediate{background:#2196f3}.l-badge.advanced{background:#9c27b0}.l-badge.pro{background:#f44336}.done-check{color:var(--success)}.lesson-card strong{color:#ccc;font-size:.75rem}.playground-btn{border:1px solid var(--border);cursor:pointer;background:#222;border-radius:4px;align-items:center;gap:8px;margin:15px;padding:12px;font-size:.8rem;display:flex}.main-workspace{background:var(--bg-app);flex-direction:column;flex:1;display:flex}.learning-center{border-bottom:1px solid var(--border);background:#0c0c0c;padding:25px 40px}.hero-head{align-items:center;gap:12px;margin-bottom:8px;display:flex}.hero-head h2{margin:0;font-size:1.4rem;font-weight:800}.l-tag{background:var(--accent);border-radius:4px;padding:2px 8px;font-size:.65rem;font-weight:700}.desc{color:#aaa;max-width:900px;margin:0 0 20px;font-size:.95rem;line-height:1.5}.walkthrough{background:#151515;border:1px solid #222;border-radius:6px;margin-bottom:15px;padding:15px}.walkthrough h3{color:var(--accent);align-items:center;gap:8px;margin:0 0 10px;font-size:.75rem;font-weight:900;display:flex}.walkthrough ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.walkthrough li{color:#bbb;align-items:center;gap:8px;font-size:.85rem;display:flex}.task-box{color:#f1c40f;background:#f1c40f1a;border-left:4px solid #f1c40f;padding:12px 15px;font-size:.9rem;font-weight:700}.editor-grid{border-bottom:1px solid var(--border);height:600px;display:flex}.code-panel{border-right:1px solid var(--border);flex-direction:column;flex:1.2;display:flex}.panel-bar{border-bottom:1px solid var(--border);height:36px;color:var(--dim);background:#1a1a1a;justify-content:space-between;align-items:center;padding:0 15px;font-size:.75rem;display:flex}.bar-actions{gap:10px;display:flex}.b-btn{color:#fff;cursor:pointer;background:#333;border:none;border-radius:4px;align-items:center;padding:4px 10px;font-size:.7rem;display:flex}.b-btn.run{background:var(--success);gap:6px;font-weight:700}.monaco-box{flex:1}.output-panel{background:#000;flex-direction:column;flex:.8;display:flex}.tabs-bar{border-bottom:1px solid var(--border);background:#151515;height:36px;display:flex}.tab{color:var(--dim);border:none;border-bottom:2px solid var(--accent);background:0 0;padding:0 20px;font-size:.7rem;font-weight:700}.output-content{flex:1;padding:15px;font-family:Fira Code,monospace;overflow-y:auto}.test-results{flex-direction:column;gap:5px;margin-bottom:15px;display:flex}.test-row{font-size:.8rem;font-weight:700}.test-row.pass{color:var(--success)}.test-row.fail{color:var(--error)}.terminal-log{border-top:1px solid #1a1a1a;padding-top:10px}.log-line{color:#fff;white-space:pre-wrap;margin-bottom:4px;font-size:.85rem}.log-line.stderr{color:#f48771}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.auth-modal{border:1px solid var(--accent);background:#181818;border-radius:12px;width:400px;padding:30px;box-shadow:0 10px 30px #00000080}.auth-modal h2{color:var(--accent);margin:0 0 10px;font-size:1.2rem}.auth-modal p{color:var(--dim);margin-bottom:20px;font-size:.85rem}.field-label{color:var(--dim);letter-spacing:1px;margin-bottom:8px;font-size:.65rem;font-weight:800;display:block}.auth-input{border:1px solid var(--border);color:#fff;background:#222;border-radius:6px;outline:none;width:100%;margin-bottom:20px;padding:12px;font-size:.9rem}.auth-input:focus{border-color:var(--accent)}.auth-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;width:100%;margin-bottom:10px;padding:12px;font-weight:700;transition:all .2s}.auth-btn:hover{filter:brightness(1.1)}.auth-btn.secondary{color:var(--dim);background:0 0;border:1px solid #333}.color-picker{gap:10px;margin-bottom:25px;display:flex}.color-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:30px;height:30px;transition:all .2s}.color-swatch.active{border-color:#fff;transform:scale(1.2)}.user-badge{background:#222;border-radius:20px;align-items:center;gap:8px;padding:4px 12px;font-size:.75rem;font-weight:700;transition:all .2s;display:flex}.user-badge:hover{background:#333}.settings-hint{opacity:.5;margin-left:4px}.stats-box{color:var(--dim);background:#222;border-radius:4px;align-items:center;gap:8px;padding:4px 12px;font-size:.75rem;display:flex}.chat-toggle{border:1px solid var(--border);color:var(--dim);cursor:pointer;background:#222;border-radius:4px;padding:6px;transition:all .2s}.chat-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}.chat-sidebar{background:var(--bg-side);border-left:1px solid var(--border);flex-direction:column;width:300px;height:calc(100vh - 50px);display:flex;position:sticky;top:50px}.chat-head{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:15px;font-size:.75rem;font-weight:700;display:flex}.chat-body{flex-direction:column;flex:1;gap:12px;padding:15px;display:flex;overflow-y:auto}.chat-msg{background:#ffffff08;border-radius:8px;padding:8px 12px;font-size:.85rem;line-height:1.4}.chat-msg.sys{border-left:3px solid var(--accent)}.chat-meta{align-items:center;gap:6px;margin-bottom:4px;font-size:.75rem;display:flex}.chat-role{opacity:.6;text-transform:uppercase;font-size:.65rem;font-weight:800}.chat-text{color:#eee}.chat-form{border-top:1px solid var(--border);gap:10px;padding:15px;display:flex}.chat-form input{border:1px solid var(--border);color:#fff;background:#222;border-radius:4px;outline:none;flex:1;padding:8px;font-size:.85rem}.chat-form button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:8px}