*{margin:0;padding:0;box-sizing:border-box}
  :root{
    --bg:#0a0a0f;--bg2:#111118;--bg3:#1a1a24;
    --accent:#6c63ff;--accent2:#ff6584;--accent3:#43e97b;
    --text:#e8e8f0;--text2:#9090a8;--text3:#5a5a72;
    --border:#2a2a3a;--card:#16161f;
  }
  body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

  nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:rgba(10,10,15,0.95);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
  .logo{font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:500;color:var(--accent);letter-spacing:-0.5px}
  .logo span{color:var(--text)}
  .nav-links{display:flex;gap:0.25rem}
  .nav-links a{padding:0.4rem 0.9rem;border-radius:8px;color:var(--text2);font-size:0.85rem;cursor:pointer;transition:all 0.2s;border:none;background:none;font-family:'Space Grotesk',sans-serif}
  .nav-links a:hover{color:var(--text);background:var(--bg3)}
  .nav-links a.active{color:var(--accent);background:rgba(108,99,255,0.1)}
  .nav-btns{display:flex;gap:0.5rem}
  .btn-outline{padding:0.4rem 1rem;border:1px solid var(--border);border-radius:8px;background:none;color:var(--text2);font-size:0.85rem;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s}
  .btn-outline:hover{border-color:var(--accent);color:var(--accent)}
  .btn-fill{padding:0.4rem 1rem;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:0.85rem;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s}
  .btn-fill:hover{background:#7c75ff;transform:translateY(-1px)}

  .page{display:none;animation:fadeIn 0.3s ease}
  .page.active{display:block}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

  .hero{padding:5rem 2rem 4rem;text-align:center;position:relative}
  .hero-badge{display:inline-block;background:rgba(108,99,255,0.15);border:1px solid rgba(108,99,255,0.3);color:var(--accent);font-size:0.75rem;padding:0.3rem 0.8rem;border-radius:20px;margin-bottom:1.5rem;font-family:'JetBrains Mono',monospace}
  .hero h1{font-size:3.5rem;font-weight:700;line-height:1.1;margin-bottom:1rem;letter-spacing:-2px}
  .hero h1 .hl{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
  .hero p{color:var(--text2);font-size:1.05rem;max-width:520px;margin:0 auto 2.5rem;line-height:1.6}
  .hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
  .hero-btn-main{padding:0.8rem 2rem;background:var(--accent);border:none;border-radius:10px;color:#fff;font-size:1rem;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:500;transition:all 0.2s}
  .hero-btn-main:hover{background:#7c75ff;transform:translateY(-2px)}
  .hero-btn-sec{padding:0.8rem 2rem;background:none;border:1px solid var(--border);border-radius:10px;color:var(--text2);font-size:1rem;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s}
  .hero-btn-sec:hover{border-color:var(--accent);color:var(--accent)}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:600px;margin:3rem auto 0;padding:0 1rem}
  .stat{text-align:center;padding:1.2rem;background:var(--card);border:1px solid var(--border);border-radius:12px}
  .stat-num{font-size:1.8rem;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace}
  .stat-label{font-size:0.78rem;color:var(--text3);margin-top:0.2rem}

  .page-header{padding:3rem 2rem 1rem;text-align:center}
  .page-header h2{font-size:2rem;font-weight:700;letter-spacing:-1px;margin-bottom:0.5rem}
  .page-header p{color:var(--text2);font-size:0.9rem}
  .courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;padding:2rem;max-width:1200px;margin:0 auto}
  .course-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all 0.25s}
  .course-card:hover{border-color:var(--accent);transform:translateY(-3px)}
  .course-top{padding:1.5rem;display:flex;align-items:flex-start;gap:1rem}
  .course-icon-wrap{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;transition:transform 0.2s}
  .course-card:hover .course-icon-wrap{transform:scale(1.05)}
  .course-info h3{font-size:1rem;font-weight:600;margin-bottom:0.3rem}
  .course-info p{font-size:0.8rem;color:var(--text2);line-height:1.4}
  .course-meta{padding:0 1.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
  .course-tag{font-size:0.7rem;padding:0.25rem 0.6rem;border-radius:6px;font-weight:500;font-family:'JetBrains Mono',monospace}
  .course-lessons{font-size:0.75rem;color:var(--text3);display:flex;align-items:center;gap:0.3rem}
  .difficulty{display:flex;gap:3px}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--border)}
  .dot.on{background:var(--accent3)}

  .room-page{padding:2rem;max-width:1000px;margin:0 auto}
  .room-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:14px}
  .room-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
  .room-title{font-size:1.4rem;font-weight:700}
  .room-sub{font-size:0.85rem;color:var(--text2);margin-top:0.2rem}
  .back-btn{margin-bottom:1.5rem;padding:0.4rem 0.9rem;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:0.82rem;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s}
  .back-btn:hover{color:var(--text);border-color:var(--text)}
  .topics-list{display:flex;flex-direction:column;gap:0.75rem}
  .topic-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:border-color 0.2s;cursor:pointer}
  .topic-item:hover{border-color:var(--accent)}
  .topic-num{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--text3);min-width:24px;margin-top:2px}
  .topic-content h4{font-size:0.9rem;font-weight:600;margin-bottom:0.3rem}
  .topic-content p{font-size:0.78rem;color:var(--text2);line-height:1.5}
  .topic-badge{margin-left:auto;padding:0.2rem 0.5rem;border-radius:6px;font-size:0.7rem;font-family:'JetBrains Mono',monospace;white-space:nowrap;flex-shrink:0}

  .topic-detail-page{padding:2rem;max-width:900px;margin:0 auto}
  .topic-detail-content{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.8rem;line-height:1.8;color:var(--text2)}
  .topic-detail-content h3{font-size:1.1rem;color:var(--text);margin-bottom:1rem}
  .topic-detail-content p{margin-bottom:1rem}
  .topic-detail-content code{background:rgba(255,255,255,0.08);padding:0.2rem 0.4rem;border-radius:6px;color:#fff}
  .topic-detail-content a{color:var(--accent);text-decoration:none}
  .topic-detail-content a:hover{text-decoration:underline}

  .auth-page{display:flex;align-items:center;justify-content:center;min-height:80vh;padding:2rem}
  .auth-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2.5rem;width:100%;max-width:420px}
  .auth-tabs{display:flex;margin-bottom:1rem;border-bottom:1px solid var(--border)}
  .auth-message{padding:0.8rem 1rem;border-radius:10px;background:rgba(255,255,255,0.06);color:var(--text);font-size:0.9rem;min-height:2.4rem;line-height:1.4;margin-bottom:1rem;word-break:break-word}
  .auth-message.error{background:rgba(255,90,90,0.12);color:#ff9aa2}
  .auth-message.success{background:rgba(100,210,130,0.16);color:#b8ffb8}
  .auth-tab{flex:1;padding:0.7rem;text-align:center;font-size:0.9rem;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s}
  .auth-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
  .auth-form{display:none}
  .auth-form.active{display:flex;flex-direction:column;gap:1rem}
  .form-group{display:flex;flex-direction:column;gap:0.4rem}
  .form-label{font-size:0.8rem;color:var(--text2)}
  .form-input{padding:0.7rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:0.9rem;font-family:'Space Grotesk',sans-serif;outline:none;transition:border-color 0.2s}
  .form-input:focus{border-color:var(--accent)}
  .form-input::placeholder{color:var(--text3)}
  .submit-btn{padding:0.8rem;background:var(--accent);border:none;border-radius:10px;color:#fff;font-size:0.95rem;font-weight:500;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s;margin-top:0.5rem}
  .submit-btn:hover{background:#7c75ff}
  .auth-divider{text-align:center;color:var(--text3);font-size:0.78rem;margin:0.5rem 0;position:relative}
  .auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}
  .auth-divider::before{left:0}
  .auth-divider::after{right:0}
  .oauth-btn{padding:0.65rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;color:var(--text2);font-size:0.85rem;cursor:pointer;font-family:'Space Grotesk',sans-serif;transition:all 0.2s;text-align:center}
  .oauth-btn:hover{border-color:var(--accent);color:var(--text)}
  .auth-switch{text-align:center;font-size:0.8rem;color:var(--text3);margin-top:0.5rem}
  .auth-switch span{color:var(--accent);cursor:pointer}
  .auth-switch span:hover{text-decoration:underline}

  .contact-page{padding:2rem;max-width:800px;margin:0 auto}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}
  .contact-info{display:flex;flex-direction:column;gap:1rem}
  .contact-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.2rem;display:flex;align-items:center;gap:1rem}
  .contact-ico{width:40px;height:40px;border-radius:10px;background:rgba(108,99,255,0.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
  .contact-detail h4{font-size:0.85rem;font-weight:600}
  .contact-detail p{font-size:0.78rem;color:var(--text2);margin-top:0.15rem;font-family:'JetBrains Mono',monospace}
  .contact-form{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:2rem;display:flex;flex-direction:column;gap:1rem}
  .contact-form h3{font-size:1rem;font-weight:600;margin-bottom:0.5rem}
  .form-textarea{padding:0.7rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:0.9rem;font-family:'Space Grotesk',sans-serif;outline:none;transition:border-color 0.2s;resize:none;height:120px}
  .form-textarea:focus{border-color:var(--accent)}
  .form-textarea::placeholder{color:var(--text3)}