/* ═══════════════════════════════════════════════
   THEME VARIABLES
═══════════════════════════════════════════════ */
:root,[data-theme="dark"]{
  --bg:#151A28;--panel:#161C2D;--panel2:#1B2236;--panel3:#0f1320;
  --accent:#577DB7;--accent2:#2C64BA;--accent-glow:rgba(87,125,183,0.25);
  --white:#FFFFFF;--text:#FFFFFF;--text2:#CCCCCC;--text3:rgba(204,204,204,0.55);
  --green:#2ECC71;--orange:#F2994A;--red:#EB5757;--purple:#BB6BD9;
  --border:rgba(87,125,183,0.15);--border2:rgba(87,125,183,0.08);
  --cm-bg:#0f1420;--cm-gutter:#0b0e18;--cm-active:rgba(87,125,183,0.07);
  --sb-track:rgba(87,125,183,0.06);--sb-thumb:rgba(87,125,183,0.22);--sb-thumb-hover:rgba(87,125,183,0.38);
  --shadow:0 8px 32px rgba(0,0,0,0.4);
  --grid-color:rgba(87,125,183,0.03);
}
[data-theme="light"]{
  --bg:#F0F4FB;--panel:#FFFFFF;--panel2:#EAF0FA;--panel3:#F8FAFE;
  --accent:#2C64BA;--accent2:#1a4fa0;--accent-glow:rgba(44,100,186,0.15);
  --white:#1A2237;--text:#1A2237;--text2:#3D4F6E;--text3:rgba(61,79,110,0.55);
  --green:#1a9e54;--orange:#c97b1a;--red:#c0392b;--purple:#7d3fb0;
  --border:rgba(44,100,186,0.18);--border2:rgba(44,100,186,0.08);
  --cm-bg:#FAFCFF;--cm-gutter:#EEF3FB;--cm-active:rgba(44,100,186,0.06);
  --sb-track:rgba(44,100,186,0.06);--sb-thumb:rgba(44,100,186,0.2);--sb-thumb-hover:rgba(44,100,186,0.38);
  --shadow:0 4px 20px rgba(44,100,186,0.1);
  --grid-color:rgba(44,100,186,0.03);
}

/* ── THEMES (editor color scheme) ── */
[data-theme="dracula"]{--bg:#282a36;--panel:#21222c;--panel2:#2d2f3f;--panel3:#1a1b26;--accent:#bd93f9;--accent2:#6272a4;--border:rgba(189,147,249,0.15);--border2:rgba(189,147,249,0.07);--cm-bg:#1e1f29;--cm-gutter:#181920;--text:#f8f8f2;--text2:#e0dfff;--sb-thumb:rgba(189,147,249,0.25);--sb-thumb-hover:rgba(189,147,249,0.45);}
[data-theme="monokai"]{--bg:#272822;--panel:#1e1f1a;--panel2:#2d2e28;--panel3:#151510;--accent:#a6e22e;--accent2:#66d9e8;--border:rgba(166,226,46,0.15);--border2:rgba(166,226,46,0.07);--cm-bg:#1a1b16;--cm-gutter:#141510;--text:#f8f8f2;--text2:#cfcfc2;--sb-thumb:rgba(166,226,46,0.25);--sb-thumb-hover:rgba(166,226,46,0.45);}
[data-theme="nord"]{--bg:#2e3440;--panel:#3b4252;--panel2:#434c5e;--panel3:#252a35;--accent:#88c0d0;--accent2:#5e81ac;--border:rgba(136,192,208,0.18);--border2:rgba(136,192,208,0.08);--cm-bg:#2e3440;--cm-gutter:#272c38;--text:#eceff4;--text2:#d8dee9;--sb-thumb:rgba(136,192,208,0.25);--sb-thumb-hover:rgba(136,192,208,0.45);}

/* ═══════════════════════════════════════════════
   GLOBAL CUSTOM SCROLLBARS
═══════════════════════════════════════════════ */
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) var(--sb-track)}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:var(--sb-track);border-radius:99px}
*::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:99px;transition:background .2s}
*::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover)}
*::-webkit-scrollbar-corner{background:transparent}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);font-family:'Lexend',sans-serif;display:flex;flex-direction:column;color:var(--text);transition:background .25s,color .25s}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;z-index:0}
.bg-glow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);top:-150px;left:-80px;pointer-events:none;z-index:0}
#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;display:none}

/* ═══════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════ */
nav{position:relative;z-index:10;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:11px 22px 9px;border-bottom:1px solid var(--border);background:var(--panel);box-shadow:0 1px 0 var(--border)}
.logo{display:flex;align-items:center;gap:2px}
.logo-hyze{font-size:1.35rem;font-weight:700;color:var(--text);letter-spacing:-.5px}
.logo-acad{font-size:1.35rem;font-weight:600;color:var(--accent);letter-spacing:-.5px}
.logo-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:2px;align-self:flex-end;margin-bottom:4px}
.nav-center{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.nav-pill{background:transparent;border:1px solid transparent;color:var(--text2);font-family:'Lexend',sans-serif;font-size:0.72rem;font-weight:500;padding:5px 13px;border-radius:50px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.nav-pill:hover{background:var(--accent-glow);color:var(--text);border-color:var(--border)}
.nav-pill.active{background:rgba(87,125,183,0.18);color:var(--accent);border-color:var(--border)}
[data-theme="light"] .nav-pill.active{background:rgba(44,100,186,0.12);color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.streak-badge{display:flex;align-items:center;gap:4px;background:rgba(242,153,74,0.12);border:1px solid rgba(242,153,74,0.22);border-radius:50px;padding:4px 10px;cursor:pointer;transition:all .2s}
.streak-badge:hover{background:rgba(242,153,74,0.2)}
.streak-num{font-size:0.7rem;font-weight:700;color:var(--orange);font-family:'JetBrains Mono',monospace}
.streak-lbl{font-size:0.58rem;color:rgba(242,153,74,0.6)}
.progress-wrap{display:flex;align-items:center;gap:6px}
.progress-text{font-size:0.6rem;color:var(--text3);font-family:'JetBrains Mono',monospace}
.progress-bar-bg{width:60px;height:4px;background:var(--border);border-radius:99px;overflow:hidden}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:99px;transition:width .4s}
.icon-btn{width:30px;height:30px;border-radius:8px;background:var(--accent-glow);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.78rem;transition:all .2s}
.icon-btn:hover{background:rgba(87,125,183,0.25);color:var(--text)}

/* ═══════════════════════════════════════════════
   VIEWS
═══════════════════════════════════════════════ */
.view{display:none;flex:1;min-height:0;position:relative;z-index:5}
.view.active{display:flex}
.challenges-view,.playground-view,.learn-view,.chat-view,.sdk-view{animation:fadeIn .2s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.challenges-view,.playground-view{flex-direction:row;overflow:hidden}

/* ═══════════════════════════════════════════════
   CHALLENGE SIDEBAR
═══════════════════════════════════════════════ */
.chal-sidebar{width:255px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
.chal-sidebar-header{padding:12px 13px 9px;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-title{font-size:0.6rem;font-weight:700;color:var(--accent);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}
.filter-row{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.filter-btn{font-size:0.57rem;padding:2px 9px;border-radius:50px;background:var(--panel2);border:1px solid var(--border);color:var(--text3);cursor:pointer;transition:all .15s;font-family:'Lexend',sans-serif}
.filter-btn.active{background:rgba(87,125,183,0.2);color:var(--accent);border-color:var(--border)}
.cat-scroll{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px;margin-bottom:6px}
.cat-scroll::-webkit-scrollbar{height:2px}
.cat-btn{font-size:0.5rem;padding:2px 7px;border-radius:50px;background:var(--panel2);border:1px solid var(--border2);color:var(--text3);cursor:pointer;transition:all .15s;font-family:'JetBrains Mono',monospace;white-space:nowrap;flex-shrink:0}
.cat-btn.active{background:rgba(87,125,183,0.15);color:var(--accent);border-color:var(--border)}
.search-box{display:flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:5px 8px}
.search-box i{color:var(--text3);font-size:0.6rem}
.search-box input{background:transparent;border:none;outline:none;font-family:'Lexend',sans-serif;font-size:0.67rem;color:var(--text);width:100%}
.search-box input::placeholder{color:var(--text3)}
.chal-list{flex:1;overflow-y:auto;padding:6px}
.group-label{font-size:0.52rem;font-weight:700;color:var(--text3);letter-spacing:1.1px;text-transform:uppercase;padding:6px 4px 3px}
.chal-item{padding:8px 10px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:all .15s;margin-bottom:2px}
.chal-item:hover{background:var(--panel2);border-color:var(--border2)}
.chal-item.active{background:rgba(87,125,183,0.1);border-color:var(--border)}
.ci-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.ci-title{font-size:0.71rem;font-weight:600;color:var(--text);line-height:1.2}
.lang-pill{font-size:0.5rem;font-weight:600;padding:1px 6px;border-radius:50px;font-family:'JetBrains Mono',monospace}
.lp-python{background:rgba(76,175,80,0.2);color:#6FCF97}
.lp-javascript{background:rgba(247,223,30,0.15);color:#c9a800}
.lp-cpp{background:rgba(75,123,236,0.2);color:#7B9CDB}
.lp-go{background:rgba(228,77,39,0.18);color:#E44D27}
.lp-html{background:rgba(242,140,56,0.18);color:#F28C38}
.lp-swift{background:rgba(255,107,157,0.18);color:#FF6B9D}
.lp-rust{background:rgba(222,165,132,0.18);color:#dea584}
.ci-foot{display:flex;align-items:center;gap:5px;margin-top:2px}
.diff-dot{width:4px;height:4px;border-radius:50%;display:inline-block}
.dd-easy{background:var(--green)}.dd-medium{background:var(--orange)}.dd-hard{background:var(--red)}
.ci-diff{font-size:0.54rem;color:var(--text3);display:flex;align-items:center;gap:3px}
.ci-cat{font-size:0.48rem;padding:1px 5px;border-radius:4px;background:var(--panel2);color:var(--text3);font-family:'JetBrains Mono',monospace}
.ci-done{margin-left:auto;color:var(--green);font-size:0.6rem;display:none}
.chal-item.done .ci-done{display:block}

/* ═══════════════════════════════════════════════
   CHALLENGE MAIN + EDITOR
═══════════════════════════════════════════════ */
.chal-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg)}
.chal-inst{flex-shrink:0;padding:13px 18px 11px;border-bottom:1px solid var(--border);max-height:195px;overflow-y:auto;background:var(--panel)}
.inst-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:7px;gap:8px}
.inst-title{font-size:0.9rem;font-weight:700;color:var(--text);line-height:1.2}
.inst-badges{display:flex;align-items:center;gap:5px;flex-shrink:0;flex-wrap:wrap}
.inst-badge{font-size:0.54rem;padding:2px 8px;border-radius:50px;font-family:'JetBrains Mono',monospace;border:1px solid var(--border);color:var(--text2)}
.inst-desc{font-size:0.73rem;color:var(--text2);line-height:1.6;margin-bottom:7px}
.inst-steps{list-style:none;display:flex;flex-direction:column;gap:3px}
.inst-steps li{font-size:0.68rem;color:var(--text2);padding-left:13px;position:relative;line-height:1.5}
.inst-steps li::before{content:'→';position:absolute;left:0;color:var(--accent);font-size:0.62rem}
.inst-hint{margin-top:7px;padding:7px 11px;border-radius:8px;background:var(--panel2);border:1px solid var(--border);font-size:0.66rem;color:var(--text2);display:none}
.inst-hint.show{display:block}
.hint-btn{font-size:0.58rem;background:var(--accent-glow);border:1px solid var(--border);color:var(--accent);padding:3px 8px;border-radius:50px;cursor:pointer;font-family:'Lexend',sans-serif;transition:all .15s;display:flex;align-items:center;gap:4px}
.hint-btn:hover{background:rgba(87,125,183,0.25)}
.fail-count{font-size:0.55rem;color:rgba(235,87,87,0.65);font-family:'JetBrains Mono',monospace}

.editor-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.editor-bar{padding:6px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-shrink:0;background:var(--panel)}
.editor-fname{font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--text2);padding:2px 8px;border-radius:5px;background:var(--panel2);border:1px solid var(--border)}
.editor-info{font-size:0.56rem;color:var(--text3);font-family:'JetBrains Mono',monospace}
.sp{flex:1}
.cm-wrap{flex:1;overflow:hidden}
.cm-wrap .CodeMirror{height:100%!important;font-family:'JetBrains Mono',monospace!important;font-size:0.77rem!important;line-height:1.58rem!important;background:var(--cm-bg)!important;color:#abb2bf!important}
[data-theme="light"] .cm-wrap .CodeMirror{color:#383a42!important}
.cm-wrap .CodeMirror-scroll{height:100%!important}
.cm-wrap .CodeMirror-gutters{background:var(--cm-gutter)!important;border-right:1px solid var(--border2)!important}
.cm-wrap .CodeMirror-linenumber{color:var(--text3)!important;font-family:'JetBrains Mono',monospace!important;font-size:0.64rem!important}
.cm-wrap .CodeMirror-activeline-background{background:var(--cm-active)!important}
.cm-wrap .CodeMirror-cursor{border-left:2px solid var(--accent)!important}
.cm-wrap .CodeMirror-selected{background:var(--accent-glow)!important}
.cm-wrap .cm-keyword{color:#c678dd!important}.cm-wrap .cm-def{color:#61afef!important}.cm-wrap .cm-variable{color:#e06c75!important}.cm-wrap .cm-variable-2{color:#abb2bf!important}.cm-wrap .cm-string,.cm-wrap .cm-string-2{color:#98c379!important}.cm-wrap .cm-number,.cm-wrap .cm-atom{color:#d19a66!important}.cm-wrap .cm-comment{color:#5c6370!important;font-style:italic!important}.cm-wrap .cm-operator{color:#56b6c2!important}.cm-wrap .cm-builtin,.cm-wrap .cm-type{color:#e5c07b!important}.cm-wrap .cm-tag{color:#e06c75!important}.cm-wrap .cm-attribute{color:#d19a66!important}.cm-wrap .cm-property{color:#e06c75!important}
[data-theme="light"] .cm-wrap .cm-keyword{color:#a626a4!important}[data-theme="light"] .cm-wrap .cm-def{color:#4078f2!important}[data-theme="light"] .cm-wrap .cm-string,.cm-wrap .cm-string-2{color:#50a14f!important}[data-theme="light"] .cm-wrap .cm-number{color:#986801!important}[data-theme="light"] .cm-wrap .cm-comment{color:#9ca3af!important}

.code-footer{padding:8px 12px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--border);background:var(--panel);flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:5px;font-family:'Lexend',sans-serif;font-size:0.7rem;font-weight:600;padding:6px 14px;border-radius:50px;border:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-green{background:linear-gradient(135deg,#27AE60,#2ECC71);color:#fff;box-shadow:0 3px 12px rgba(46,204,113,0.22)}
.btn-green:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 16px rgba(46,204,113,0.35)}
.btn-blue{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 3px 12px var(--accent-glow)}
.btn-blue:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2)}
.btn-ghost:hover:not(:disabled){background:var(--accent-glow);color:var(--text);border-color:var(--border)}
.btn-red{background:rgba(235,87,87,0.1);border:1px solid rgba(235,87,87,0.2);color:var(--red);display:none}
.btn-red.show{display:inline-flex}
.btn-red:hover{background:rgba(235,87,87,0.2)}
.btn-accent{background:var(--accent-glow);border:1px solid var(--border);color:var(--accent)}
.btn-accent:hover{background:rgba(87,125,183,0.22);color:var(--text)}

/* ═══════════════════════════════════════════════
   OUTPUT
═══════════════════════════════════════════════ */
.output-panel{width:275px;flex-shrink:0;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
.out-header{padding:9px 12px 8px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.out-label{font-size:0.6rem;font-weight:700;color:var(--accent);letter-spacing:1.2px;text-transform:uppercase}
.out-right{display:flex;align-items:center;gap:6px}
.out-dot{width:6px;height:6px;border-radius:50%;background:var(--panel2);transition:background .25s}
.out-dot.running{background:var(--orange);box-shadow:0 0 7px rgba(242,153,74,0.55);animation:blink .7s ease-in-out infinite}
.out-dot.ok{background:var(--green);box-shadow:0 0 7px rgba(46,204,113,0.5)}
.out-dot.err{background:var(--red);box-shadow:0 0 7px rgba(235,87,87,0.5)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.clear-btn{font-size:0.54rem;color:var(--text3);background:none;border:none;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:color .15s}
.clear-btn:hover{color:var(--accent)}
.result-banner{margin:8px 11px;padding:9px 12px;border-radius:9px;display:none;font-size:0.68rem;line-height:1.5}
.rb-pass{background:rgba(46,204,113,0.1);border:1px solid rgba(46,204,113,0.25);color:var(--green);display:block}
.rb-fail{background:rgba(235,87,87,0.08);border:1px solid rgba(235,87,87,0.2);color:var(--red);display:block}
.rb-title{font-weight:700;font-size:0.76rem;margin-bottom:2px}
.out-body{flex:1;padding:9px 11px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:0.67rem;line-height:1.72}
.ol{margin:0;white-space:pre-wrap;word-break:break-word}
.ol-cmd{color:var(--text3)}.ol-out{color:var(--text2)}.ol-err{color:var(--red)}.ol-ok{color:var(--green)}.ol-info{color:var(--text3);font-style:italic}
.ol-sep{border:none;border-top:1px solid var(--border2);margin:5px 0}

/* ═══════════════════════════════════════════════
   PLAYGROUND
═══════════════════════════════════════════════ */
.pg-sidebar{width:185px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:13px 10px;gap:9px;overflow:hidden;background:var(--panel)}
.pg-label{font-size:0.6rem;font-weight:700;color:var(--accent);letter-spacing:1.3px;text-transform:uppercase}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lang-tile{border-radius:11px;padding:11px 5px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:all .2s;border:2px solid transparent}
.lang-tile:hover{transform:translateY(-2px);filter:brightness(1.1)}
.lang-tile.sel{border-color:rgba(255,255,255,0.4);box-shadow:0 0 0 3px rgba(255,255,255,0.08)}
.t-cpp{background:linear-gradient(145deg,#3565d0,#4B7BEC)}.t-html{background:linear-gradient(145deg,#c4722a,#F28C38)}.t-swift{background:linear-gradient(145deg,#d95088,#FF6B9D)}.t-py{background:linear-gradient(145deg,#329939,#4CAF50)}.t-js{background:linear-gradient(145deg,#c9b414,#F7DF1E)}.t-go{background:linear-gradient(145deg,#be3e18,#E44D27)}.t-rust{background:linear-gradient(145deg,#7c3e1a,#dea584)}
.lang-tile i{font-size:1.25rem;color:rgba(255,255,255,0.92)}.t-js i{color:rgba(0,0,0,0.6)}
.lt-name{font-size:0.52rem;font-weight:600;color:rgba(255,255,255,0.86)}.t-js .lt-name{color:rgba(0,0,0,0.62)}

/* ═══════════════════════════════════════════════
   LEARN VIEW
═══════════════════════════════════════════════ */
.learn-view{flex-direction:column;overflow-y:auto;background:var(--bg)}
.learn-container{max-width:960px;margin:0 auto;padding:28px 28px 60px;width:100%}
.learn-hero{margin-bottom:28px}
.learn-hero h1{font-size:1.6rem;font-weight:700;color:var(--text);margin-bottom:6px}
.learn-hero p{font-size:0.79rem;color:var(--text2);line-height:1.65;max-width:550px}
.learn-cats-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}
.learn-cat-btn{font-size:0.66rem;padding:5px 13px;border-radius:50px;background:var(--panel);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s;font-family:'Lexend',sans-serif;display:flex;align-items:center;gap:5px}
.learn-cat-btn.active{background:rgba(87,125,183,0.15);color:var(--accent);border-color:var(--border)}
.learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.learn-card{background:var(--panel);border:1px solid var(--border);border-radius:15px;padding:18px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.learn-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:15px 15px 0 0}
.lc-loops::before{background:linear-gradient(90deg,#61afef,#56b6c2)}
.lc-functions::before{background:linear-gradient(90deg,#c678dd,#e06c75)}
.lc-arrays::before{background:linear-gradient(90deg,#98c379,#e5c07b)}
.lc-recursion::before{background:linear-gradient(90deg,#e06c75,#d19a66)}
.lc-ds::before{background:linear-gradient(90deg,#56b6c2,#61afef)}
.lc-strings::before{background:linear-gradient(90deg,#e5c07b,#98c379)}
.lc-oop::before{background:linear-gradient(90deg,#c678dd,#61afef)}
.lc-sorting::before{background:linear-gradient(90deg,#e06c75,#c678dd)}
.lc-math::before{background:linear-gradient(90deg,#d19a66,#e5c07b)}
.lc-fileio::before{background:linear-gradient(90deg,#56b6c2,#98c379)}
.learn-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border)}
.lc-icon{font-size:1.4rem;margin-bottom:9px}
.lc-title{font-size:0.84rem;font-weight:700;color:var(--text);margin-bottom:4px}
.lc-desc{font-size:0.69rem;color:var(--text2);line-height:1.55;margin-bottom:9px}
.lc-tag{display:inline-flex;font-size:0.55rem;padding:2px 7px;border-radius:50px;background:var(--accent-glow);color:var(--accent);font-family:'JetBrains Mono',monospace}
.lesson-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:300;display:none;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.lesson-overlay.open{display:flex}
.lesson-modal{background:var(--panel);border-radius:18px;border:1px solid var(--border);box-shadow:0 24px 80px rgba(0,0,0,0.55);width:680px;max-height:82vh;display:flex;flex-direction:column;animation:popIn .18s ease}
@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.lesson-hdr{padding:16px 20px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.lesson-title{font-size:0.95rem;font-weight:700;color:var(--text)}
.lesson-x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1rem;transition:color .15s}
.lesson-x:hover{color:var(--text)}
.lesson-body{flex:1;overflow-y:auto;padding:18px 22px}
.ls{margin-bottom:16px}
.ls h3{font-size:0.74rem;font-weight:600;color:var(--accent);margin-bottom:6px}
.ls p{font-size:0.75rem;color:var(--text2);line-height:1.7}
.ls-code{background:var(--cm-bg);border:1px solid var(--border);border-radius:9px;padding:12px 14px;margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:0.71rem;color:#abb2bf;white-space:pre;overflow-x:auto;line-height:1.6}
[data-theme="light"] .ls-code{color:#383a42}
.lesson-ftr{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;flex-shrink:0}

/* ═══════════════════════════════════════════════
   NEWS / ARTICLES VIEW
═══════════════════════════════════════════════ */
.news-hero{margin-bottom:28px}
.news-hero h1{font-size:1.6rem;font-weight:700;color:var(--text);margin-bottom:6px}
.news-hero p{font-size:0.79rem;color:var(--text2);line-height:1.65}
.news-cats-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}
.news-cat-btn{font-size:0.66rem;padding:5px 13px;border-radius:50px;background:var(--panel);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s;font-family:'Lexend',sans-serif}
.news-cat-btn.active{background:rgba(87,125,183,0.15);color:var(--accent);border-color:var(--border)}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.news-card{background:var(--panel);border:1px solid var(--border);border-radius:15px;overflow:hidden;cursor:pointer;transition:all .2s;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border)}
.nc-banner{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;position:relative;overflow:hidden}
.nc-tag{position:absolute;top:10px;left:10px;font-size:0.55rem;font-weight:600;padding:2px 8px;border-radius:50px;font-family:'JetBrains Mono',monospace;letter-spacing:.3px}
.tag-new{background:rgba(46,204,113,0.2);color:var(--green)}
.tag-update{background:rgba(87,125,183,0.2);color:var(--accent)}
.tag-product{background:rgba(187,107,217,0.2);color:var(--purple)}
.tag-guide{background:rgba(242,153,74,0.2);color:var(--orange)}
.nc-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
.nc-title{font-size:0.84rem;font-weight:700;color:var(--text);margin-bottom:5px;line-height:1.3}
.nc-desc{font-size:0.7rem;color:var(--text2);line-height:1.6;flex:1;margin-bottom:10px}
.nc-meta{font-size:0.58rem;color:var(--text3);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:8px}

.art-badge.highlight{background:var(--accent-glow);color:var(--accent);border-color:var(--border)}

/* ═══════════════════════════════════════════════
   CHAT VIEW
═══════════════════════════════════════════════ */
.chat-view{flex-direction:column;overflow:hidden;background:var(--bg)}
.chat-inner{display:flex;flex-direction:column;flex:1;min-height:0;max-width:820px;width:100%;margin:0 auto;padding:0 22px}
.chat-hdr{padding:16px 0 12px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.chat-hdr-left h2{font-size:0.88rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.chat-hdr-left h2 i{color:var(--accent)}
.chat-hdr-left p{font-size:0.65rem;color:var(--text3);margin-top:1px}
.chat-hdr-right{display:flex;align-items:center;gap:7px}
.model-row{display:flex;gap:4px}
.model-pill{font-family:'JetBrains Mono',monospace;font-size:0.58rem;padding:3px 9px;border-radius:50px;background:var(--panel2);border:1px solid var(--border);color:var(--text3);cursor:pointer;transition:all .15s}
.model-pill.active{background:rgba(87,125,183,0.18);border-color:var(--border);color:var(--text)}
.chat-messages{flex:1;overflow-y:auto;padding:14px 0;display:flex;flex-direction:column;gap:11px}
.chat-msg{display:flex;gap:9px;align-items:flex-start}
.chat-msg.user{flex-direction:row-reverse}
.chat-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.66rem;flex-shrink:0}
.chat-msg.bot .chat-av{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff}
.chat-msg.user .chat-av{background:var(--accent-glow);color:var(--accent)}
.chat-bubble{font-size:0.76rem;line-height:1.65;padding:9px 13px;border-radius:13px;max-width:82%;white-space:pre-wrap;word-break:break-word}
.chat-msg.bot .chat-bubble{background:var(--panel);border:1px solid var(--border);color:var(--text2)}
.chat-msg.user .chat-bubble{background:rgba(87,125,183,0.16);border:1px solid var(--border);color:var(--text)}
.chat-msg.typing .chat-bubble{opacity:.55}
.chat-input-area{padding:10px 0 16px;flex-shrink:0;border-top:1px solid var(--border)}
.chat-sys{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:6px 11px;font-family:'Lexend',sans-serif;font-size:0.67rem;color:var(--text);outline:none;margin-bottom:7px;transition:border .15s}
.chat-sys:focus{border-color:var(--accent)}
.chat-sys::placeholder{color:var(--text3)}
.chat-row{display:flex;gap:7px}
.chat-inp{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:9px 14px;font-family:'Lexend',sans-serif;font-size:0.76rem;color:var(--text);outline:none;transition:border .15s}
.chat-inp:focus{border-color:var(--accent)}
.chat-inp::placeholder{color:var(--text3)}
.chat-send{background:linear-gradient(135deg,var(--accent2),var(--accent));border:none;border-radius:11px;padding:9px 16px;color:#fff;cursor:pointer;font-size:0.76rem;transition:all .2s;flex-shrink:0}
.chat-send:hover{filter:brightness(1.1)}
.chat-send:disabled{opacity:.5;cursor:not-allowed}

/* ═══════════════════════════════════════════════
   SDK VIEW
═══════════════════════════════════════════════ */
.sdk-view{overflow:hidden;background:var(--bg);flex-direction:row}
.sdk-docs{flex:1;overflow-y:auto;padding:26px 28px 50px;border-right:1px solid var(--border);background:var(--bg)}
.sdk-play{width:350px;flex-shrink:0;padding:18px 18px 20px;display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
.sdk-hero{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.sdk-badge{display:inline-flex;align-items:center;gap:5px;background:var(--accent-glow);border:1px solid var(--border);color:var(--accent);font-size:0.63rem;font-weight:600;padding:3px 11px;border-radius:50px;margin-bottom:11px}
.sdk-hero-title{font-size:1.65rem;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.5px}
.sdk-accent{color:var(--accent)}
.sdk-hero-sub{font-size:0.76rem;color:var(--text2);line-height:1.65;margin-bottom:14px;max-width:460px}
.sdk-btns{display:flex;gap:8px;flex-wrap:wrap}
.sdk-sec{margin-bottom:24px}
.sdk-sec-lbl{display:flex;align-items:center;gap:6px;font-size:0.62rem;font-weight:700;color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.sdk-sec p{font-size:0.72rem;color:var(--text2);line-height:1.6;margin-bottom:9px}
.sdk-code-block{background:var(--cm-bg);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.sdk-code-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--panel2);border-bottom:1px solid var(--border2)}
.sdk-lang{font-family:'JetBrains Mono',monospace;font-size:0.56rem;color:var(--text3)}
.copy-btn{background:var(--accent-glow);border:1px solid var(--border);color:var(--accent);font-family:'Lexend',sans-serif;font-size:0.56rem;padding:2px 7px;border-radius:5px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s}
.copy-btn:hover{background:rgba(87,125,183,0.22);color:var(--text)}
.copy-btn.copied{color:var(--green)!important;border-color:rgba(46,204,113,0.3)!important}
.sdk-code-block pre{margin:0;padding:12px 15px;overflow-x:auto}
.sdk-code{font-family:'JetBrains Mono',monospace;font-size:0.71rem;line-height:1.65;color:#abb2bf;white-space:pre}
[data-theme="light"] .sdk-code{color:#383a42}
.sdk-table{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.sdk-th{display:grid;grid-template-columns:1.2fr .8fr 1fr 2fr;padding:7px 12px;background:var(--panel2);font-size:0.56rem;font-weight:700;color:var(--text3);letter-spacing:.6px;text-transform:uppercase;gap:8px}
.sdk-tr{display:grid;grid-template-columns:1.2fr .8fr 1fr 2fr;padding:9px 12px;border-top:1px solid var(--border2);font-size:0.69rem;color:var(--text2);align-items:center;gap:8px}
.sdk-tr:hover{background:var(--panel2)}
.sdk-tr code{font-family:'JetBrains Mono',monospace;font-size:0.63rem;background:var(--accent-glow);padding:2px 5px;border-radius:4px;color:var(--accent)}
.sdk-type{font-family:'JetBrains Mono',monospace;font-size:0.6rem;background:rgba(187,107,217,0.12);color:var(--purple);padding:2px 6px;border-radius:4px}
.sdk-play-hdr{margin-bottom:11px;flex-shrink:0}
.sdk-play-title{font-size:0.76rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;margin-bottom:2px}
.sdk-play-title i{color:var(--accent)}
.sdk-play-sub{font-size:0.62rem;color:var(--text3)}
.sdk-sys-row{margin-bottom:8px;flex-shrink:0}
.sdk-sys-lbl{display:block;font-size:0.56rem;font-weight:700;color:var(--text3);letter-spacing:.6px;text-transform:uppercase;margin-bottom:4px}
.sdk-sys-in{width:100%;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-family:'Lexend',sans-serif;font-size:0.68rem;color:var(--text);outline:none;transition:border .15s}
.sdk-sys-in:focus{border-color:var(--accent)}
.sdk-sys-in::placeholder{color:var(--text3)}
.sdk-chat-win{flex:1;overflow-y:auto;background:var(--panel3);border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px;margin-bottom:7px;min-height:0}
.sc-msg{display:flex;gap:6px;align-items:flex-start}
.sc-msg.user{flex-direction:row-reverse}
.sc-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.6rem;flex-shrink:0}
.sc-msg.bot .sc-av{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff}
.sc-msg.user .sc-av{background:var(--accent-glow);color:var(--accent)}
.sc-bubble{font-size:0.67rem;line-height:1.6;padding:7px 10px;border-radius:10px;max-width:88%;white-space:pre-wrap;word-break:break-word}
.sc-msg.bot .sc-bubble{background:var(--panel);border:1px solid var(--border2);color:var(--text2)}
.sc-msg.user .sc-bubble{background:rgba(87,125,183,0.14);border:1px solid var(--border);color:var(--text)}
.sc-msg.typing .sc-bubble{opacity:.5}
.sdk-inp-row{display:flex;gap:6px;flex-shrink:0;margin-bottom:7px}
.sdk-inp{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:7px 11px;font-family:'Lexend',sans-serif;font-size:0.68rem;color:var(--text);outline:none;transition:border .15s}
.sdk-inp:focus{border-color:var(--accent)}
.sdk-inp::placeholder{color:var(--text3)}
.sdk-send{background:linear-gradient(135deg,var(--accent2),var(--accent));border:none;border-radius:9px;padding:7px 13px;color:#fff;cursor:pointer;font-size:0.72rem;transition:all .2s;flex-shrink:0}
.sdk-send:hover{filter:brightness(1.1)}
.sdk-send:disabled{opacity:.5;cursor:not-allowed}
.sdk-models{display:flex;align-items:center;gap:5px;flex-shrink:0}
.sdk-models-lbl{font-size:0.56rem;color:var(--text3);font-family:'JetBrains Mono',monospace}
.sdk-model-pill{font-family:'JetBrains Mono',monospace;font-size:0.56rem;padding:2px 8px;border-radius:50px;background:var(--panel2);border:1px solid var(--border2);color:var(--text3);cursor:pointer;transition:all .15s}
.sdk-model-pill.active{background:rgba(87,125,183,0.18);border-color:var(--border);color:var(--text)}

/* ═══════════════════════════════════════════════
   OVERLAYS: STREAK, THEME, LESSON, NEWS ARTICLE
═══════════════════════════════════════════════ */
.streak-overlay{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.streak-overlay.open{display:flex}
.streak-modal{background:var(--panel);border:1px solid rgba(242,153,74,.25);border-radius:18px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.5);min-width:300px;text-align:center;animation:popIn .18s ease}
.s-fire{font-size:2.8rem;margin-bottom:6px}
.s-num{font-size:2.3rem;font-weight:700;color:var(--orange);font-family:'JetBrains Mono',monospace}
.s-lbl{font-size:0.75rem;color:var(--text2);margin-bottom:16px}
.s-days{display:flex;gap:5px;justify-content:center;margin-bottom:16px}
.s-day{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.58rem;font-family:'JetBrains Mono',monospace;font-weight:600;border:1px solid var(--border)}
.s-day.active{background:rgba(242,153,74,.2);border-color:rgba(242,153,74,.4);color:var(--orange)}
.s-day.today{background:rgba(242,153,74,.35);border-color:var(--orange);color:var(--orange)}
.s-day.empty{background:var(--panel2);color:var(--text3)}

.theme-overlay{position:fixed;inset:0;z-index:400;display:none;align-items:flex-start;justify-content:flex-end;padding:56px 22px 0}
.theme-overlay.open{display:flex}
.theme-picker{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:12px;box-shadow:var(--shadow);min-width:200px;animation:popIn .16s ease}
.tp-title{font-size:0.58rem;font-weight:700;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.tp-section{margin-bottom:10px}
.tp-section-lbl{font-size:0.5rem;color:var(--text3);letter-spacing:.8px;text-transform:uppercase;margin-bottom:5px;padding-left:2px}
.theme-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;transition:background .13s}
.theme-opt:hover{background:var(--accent-glow)}
.theme-opt.active{background:rgba(87,125,183,.12)}
.t-swatch{width:18px;height:18px;border-radius:5px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.t-name{font-size:0.72rem;color:var(--text)}
.t-divider{height:1px;background:var(--border2);margin:8px 0}

/* ═══════════════════════════════════════════════
   LIGHT/DARK TOGGLE BUTTON
═══════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   HOME VIEW
══════════════════════════════════════════ */
.home-view{flex-direction:column;overflow:hidden;background:var(--bg)}
.home-scroll{flex:1;overflow-y:auto;min-height:0}

/* Hero */
.home-hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:48px 48px 40px;max-width:1200px;margin:0 auto;width:100%}
.home-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(87,125,183,0.12);border:1px solid rgba(87,125,183,0.25);color:var(--accent);font-size:0.68rem;font-weight:600;padding:4px 13px;border-radius:50px;margin-bottom:16px;letter-spacing:.5px}
.home-title{font-size:2.8rem;font-weight:700;color:var(--white);line-height:1.15;margin-bottom:14px;letter-spacing:-.8px}
.home-accent{color:var(--accent);position:relative}
.home-subtitle{font-size:0.88rem;color:var(--text);line-height:1.75;max-width:520px;margin-bottom:28px}
.home-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.home-btn-primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:white;font-family:'Lexend',sans-serif;font-size:0.82rem;font-weight:600;padding:11px 24px;border-radius:50px;border:none;cursor:pointer;box-shadow:0 4px 18px rgba(87,125,183,0.35);transition:all .2s;display:flex;align-items:center;gap:8px}
.home-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(87,125,183,0.45);filter:brightness(1.08)}
.home-btn-secondary{background:var(--card);color:var(--accent);font-family:'Lexend',sans-serif;font-size:0.82rem;font-weight:500;padding:11px 22px;border-radius:50px;border:1px solid rgba(87,125,183,0.28);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}
.home-btn-secondary:hover{background:rgba(87,125,183,0.15);color:var(--white);transform:translateY(-1px)}
.home-btn-ghost{background:transparent;color:var(--text);font-family:'Lexend',sans-serif;font-size:0.82rem;font-weight:500;padding:11px 20px;border-radius:50px;border:1px solid var(--border);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}
.home-btn-ghost:hover{background:var(--card);color:var(--white);border-color:rgba(87,125,183,0.3)}
.home-stats-row{display:flex;align-items:center;gap:0}
.home-stat{display:flex;flex-direction:column;align-items:center;padding:0 20px}
.home-stat:first-child{padding-left:0}
.home-stat-num{font-size:1.5rem;font-weight:700;color:var(--white);font-family:'JetBrains Mono',monospace;line-height:1}
.home-stat-label{font-size:0.62rem;color:var(--text2);margin-top:3px;letter-spacing:.4px}
.home-stat-divider{width:1px;height:30px;background:var(--border)}

/* Hero code card */
.home-hero-visual{flex-shrink:0}
.home-code-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:340px;box-shadow:0 16px 48px rgba(0,0,0,0.3);animation:floatCard 4s ease-in-out infinite}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.home-code-topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel2);border-bottom:1px solid var(--border)}
.home-code-dots{display:flex;gap:5px}
.home-code-dots span{width:10px;height:10px;border-radius:50%;background:rgba(87,125,183,0.25)}
.home-code-dots span:nth-child(1){background:#EB5757}
.home-code-dots span:nth-child(2){background:#F2994A}
.home-code-dots span:nth-child(3){background:#2ECC71}
.home-code-title{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--text2)}
.home-code-body{margin:0;padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:0.74rem;line-height:1.65;background:var(--cm-bg);white-space:pre}
.home-code-output{padding:9px 16px;background:rgba(46,204,113,0.07);border-top:1px solid rgba(46,204,113,0.15);font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--text);display:flex;align-items:center}
/* code highlight classes */
.hc-kw{color:#c678dd}.hc-fn{color:#61afef}.hc-str{color:#98c379}.hc-num{color:#d19a66}.hc-op{color:#56b6c2}
[data-theme="light"] .hc-kw{color:#7c3aed}[data-theme="light"] .hc-fn{color:#1d4ed8}[data-theme="light"] .hc-str{color:#16a34a}[data-theme="light"] .hc-num{color:#b45309}[data-theme="light"] .hc-op{color:#0891b2}

/* Sections */
.home-section{padding:48px 48px 0;max-width:1200px;margin:0 auto;width:100%}
.home-section-label{font-size:0.65rem;font-weight:600;color:var(--accent);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.home-section-title{font-size:1.55rem;font-weight:700;color:var(--white);margin-bottom:28px;letter-spacing:-.3px}

/* Features grid */
.home-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.home-feature-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all .22s}
.home-feature-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.2);border-color:rgba(87,125,183,0.3)}
.home-feature-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:12px}
.home-feature-title{font-size:0.85rem;font-weight:700;color:var(--white);margin-bottom:6px}
.home-feature-desc{font-size:0.72rem;color:var(--text);line-height:1.65}

/* Language pills */
.home-lang-row{display:flex;gap:10px;flex-wrap:wrap}
.home-lang-pill{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:50px;font-size:0.78rem;font-weight:600;color:white;cursor:pointer;transition:all .2s;border:none}
.home-lang-pill:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.home-lang-pill.tile-py{background:linear-gradient(135deg,#329939,#4CAF50)}
.home-lang-pill.tile-js{background:linear-gradient(135deg,#c9b414,#F7DF1E);color:rgba(0,0,0,0.7)}
.home-lang-pill.tile-cpp{background:linear-gradient(135deg,#3565d0,#4B7BEC)}
.home-lang-pill.tile-go{background:linear-gradient(135deg,#be3e18,#E44D27)}
.home-lang-pill.tile-html{background:linear-gradient(135deg,#c4722a,#F28C38)}
.home-lang-pill.tile-swift{background:linear-gradient(135deg,#d95088,#FF6B9D)}

/* Quick challenge cards */
.home-chal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.home-chal-card{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:8px}
.home-chal-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,0.2);border-color:rgba(87,125,183,0.3)}
.home-chal-top{display:flex;align-items:center;justify-content:space-between}
.home-chal-name{font-size:0.8rem;font-weight:700;color:var(--white)}
.home-chal-desc{font-size:0.7rem;color:var(--text);line-height:1.5}
.home-chal-foot{display:flex;align-items:center;gap:6px;margin-top:2px}

/* Footer */
.home-footer{padding:40px 48px 36px;max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--border);margin-top:40px}
.home-footer-logo{font-size:1.1rem;letter-spacing:-.3px}
.home-footer-text{font-size:0.7rem;color:var(--text2)}
.home-footer-links a{font-size:0.7rem;color:var(--accent);text-decoration:none;transition:color .2s}
.home-footer-links a:hover{color:var(--white)}