@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --primary:#306998;--primary-light:#4b8bbe;--primary-dark:#1e4f72;
  --accent:#ffd43b;--accent-dark:#e6b800;
  --green:#04AA6D;--green-dark:#059862;--green-light:#d1fae5;
  --red:#e74c3c;--bg:#f1f1f1;--white:#fff;
  --text:#333;--text-light:#666;--text-muted:#999;
  --border:#ddd;--border-light:#e8e8e8;
  --code-bg:#1e1e2e;--sidebar-w:260px;--header-h:56px;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6}

/* === HEADER === */
.header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  background:var(--primary-dark);display:flex;align-items:center;padding:0 20px;gap:16px}
.menu-btn{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;padding:6px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo i{font-size:1.6rem;color:var(--accent)}
.logo span{font-size:1.1rem;font-weight:700;color:#fff}
.logo span b{color:var(--accent)}
.header-nav{display:flex;gap:4px;margin-left:24px}
.header-nav a{color:rgba(255,255,255,.8);text-decoration:none;font-size:.82rem;font-weight:500;
  padding:6px 14px;border-radius:6px;transition:.2s}
.header-nav a:hover,.header-nav a.active{background:rgba(255,255,255,.12);color:#fff}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.progress-pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  padding:5px 14px;border-radius:99px;font-size:.78rem;color:var(--accent);font-weight:600}
.progress-mini{width:80px;height:5px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden}
.progress-mini-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .5s}

/* === SIDEBAR === */
.sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--sidebar-w);
  background:var(--white);border-right:1px solid var(--border);overflow-y:auto;z-index:50;transition:transform .3s}
.sidebar h3{font-size:.7rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);
  padding:16px 16px 8px;font-weight:600}
.nav-list{list-style:none}
.nav-item{display:block;padding:9px 16px 9px 20px;font-size:.85rem;color:var(--text);cursor:pointer;
  border-left:3px solid transparent;transition:.15s;text-decoration:none}
.nav-item:hover{background:#f8f8f8;border-left-color:var(--primary-light)}
.nav-item.active{background:#e8f4f8;border-left-color:var(--primary);font-weight:600;color:var(--primary)}
.nav-item.done{color:var(--green)}
.nav-item.done::after{content:'✓';float:right;font-weight:700;color:var(--green)}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

/* === MAIN === */
.main{margin-left:var(--sidebar-w);margin-top:var(--header-h);padding:0;min-height:calc(100vh - var(--header-h))}

/* === CONTENT AREA (W3Schools style) === */
.content{max-width:900px;padding:32px 40px 60px;margin:0}
.breadcrumb{font-size:.78rem;color:var(--text-muted);margin-bottom:20px}
.breadcrumb a{color:var(--primary);text-decoration:none}

h1.page-title{font-size:2rem;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.5px}
h2.section-title{font-size:1.25rem;font-weight:700;color:var(--text);margin:28px 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--border-light)}
.desc{font-size:1rem;color:var(--text-light);margin-bottom:24px;max-width:700px}

/* Info boxes */
.info-box{padding:16px 20px;border-radius:8px;margin:16px 0;font-size:.92rem;line-height:1.7}
.info-box.note{background:#ffffcc;border-left:4px solid var(--accent)}
.info-box.tip{background:var(--green-light);border-left:4px solid var(--green)}
.info-box.warn{background:#fff3cd;border-left:4px solid #ff9800}
.info-box b{color:var(--text)}

/* Text content */
.content p{margin-bottom:14px;font-size:.95rem;line-height:1.75;color:#444}
.content ul,.content ol{margin:12px 0 12px 24px;font-size:.93rem;color:#444}
.content li{margin-bottom:6px}
.content code{background:#e7e9eb;padding:1px 6px;border-radius:4px;font-family:'Fira Code',monospace;font-size:.85rem}

/* === CODE EXAMPLE BOX === */
.example-box{background:var(--white);border:1px solid var(--border);border-radius:8px;margin:16px 0;overflow:hidden}
.example-title{background:var(--primary);color:#fff;padding:8px 16px;font-size:.78rem;font-weight:600;letter-spacing:.5px}
.example-code{background:var(--code-bg);padding:16px 20px;font-family:'Fira Code',monospace;
  font-size:.87rem;line-height:1.8;color:#cdd6f4;overflow-x:auto;white-space:pre}
.example-code .kw{color:#cba6f7}.example-code .fn{color:#89b4fa}.example-code .st{color:#a6e3a1}
.example-code .nu{color:#fab387}.example-code .cm{color:#6c7086;font-style:italic}
.example-code .op{color:#f38ba8}.example-code .vr{color:#cdd6f4}
.example-result{background:#f9f9f9;border-top:1px solid var(--border);padding:12px 16px}
.example-result span{font-size:.75rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;display:block;margin-bottom:4px}
.example-result samp{font-family:'Fira Code',monospace;font-size:.87rem;color:var(--text);line-height:1.6}
.try-btn{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;border:none;
  padding:10px 24px;font-size:.88rem;font-weight:600;font-family:'Inter';cursor:pointer;border-radius:0;
  width:100%;justify-content:center;transition:.2s}
.try-btn:hover{background:var(--green-dark)}

/* === TRY EDITOR === */
.try-editor{display:none;background:var(--white);border:1px solid var(--border);border-radius:8px;margin:16px 0;overflow:hidden}
.try-editor.open{display:block;animation:slideDown .3s ease}
@keyframes slideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:600px}}
.try-editor-header{background:#f5f5f5;padding:8px 16px;font-size:.78rem;font-weight:600;color:var(--text-muted);
  display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.try-editor textarea{width:100%;min-height:120px;padding:16px;font-family:'Fira Code',monospace;
  font-size:.87rem;background:var(--code-bg);color:#cdd6f4;border:none;resize:vertical;line-height:1.8;outline:none}
.try-editor-actions{display:flex;gap:0}
.run-btn{flex:1;padding:10px;background:var(--green);color:#fff;border:none;font-size:.88rem;
  font-weight:600;font-family:'Inter';cursor:pointer;transition:.2s}
.run-btn:hover{background:var(--green-dark)}
.reset-btn{padding:10px 20px;background:#e7e9eb;color:var(--text);border:none;font-size:.85rem;
  font-family:'Inter';cursor:pointer;transition:.2s}
.reset-btn:hover{background:var(--border)}
.try-output{padding:12px 16px;background:#0d0d0d;font-family:'Fira Code',monospace;
  font-size:.85rem;color:#4ade80;min-height:36px;display:none;border-top:1px solid #333}
.try-output.show{display:block}.try-output.err{color:#f87171}

/* === QUIZ === */
.quiz-box{background:var(--white);border:1px solid var(--border);border-radius:8px;margin:20px 0;padding:24px}
.quiz-box h3{font-size:1rem;font-weight:700;margin-bottom:14px;color:var(--text)}
.q-options{display:flex;flex-direction:column;gap:6px}
.q-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid var(--border);
  border-radius:6px;cursor:pointer;transition:.15s;font-size:.9rem}
.q-opt:hover{border-color:var(--primary-light);background:#f7fbff}
.q-opt.sel{border-color:var(--primary);background:#e8f4f8}
.q-opt.ok{border-color:var(--green)!important;background:var(--green-light)!important}
.q-opt.no{border-color:var(--red)!important;background:#fde8e8!important}
.q-opt input{accent-color:var(--primary)}
.q-feedback{margin-top:12px;padding:10px 14px;border-radius:6px;font-size:.88rem;font-weight:600;display:none}
.q-feedback.show{display:block}
.q-feedback.right{background:var(--green-light);color:var(--green-dark)}
.q-feedback.wrong{background:#fde8e8;color:var(--red)}
.check-btn{margin-top:12px;padding:8px 24px;background:var(--primary);color:#fff;border:none;
  border-radius:6px;font-size:.88rem;font-weight:600;font-family:'Inter';cursor:pointer;transition:.2s}
.check-btn:hover{background:var(--primary-dark)}

/* === TABLE === */
.w3-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem}
.w3-table th{background:var(--primary);color:#fff;padding:10px 14px;text-align:left;font-size:.82rem}
.w3-table td{padding:10px 14px;border-bottom:1px solid var(--border-light)}
.w3-table tr:nth-child(even){background:#f9f9f9}
.w3-table code{background:#e7e9eb;padding:1px 6px;border-radius:3px;font-size:.83rem}

/* === NAV BUTTONS === */
.page-nav{display:flex;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--border-light)}
.nav-btn{padding:10px 24px;border-radius:6px;font-size:.88rem;font-weight:600;font-family:'Inter';
  cursor:pointer;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.nav-btn.prev{background:#e7e9eb;color:var(--text);border:none}.nav-btn.prev:hover{background:var(--border)}
.nav-btn.next{background:var(--green);color:#fff;border:none}.nav-btn.next:hover{background:var(--green-dark)}

/* === WELCOME === */
.welcome{text-align:center;padding:60px 20px}
.welcome img{width:180px;margin-bottom:20px;animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.welcome h1{font-size:2.2rem;font-weight:800;color:var(--primary-dark);margin-bottom:8px}
.welcome h1 b{color:var(--accent-dark)}
.welcome p{font-size:1.05rem;color:var(--text-light);max-width:520px;margin:0 auto 28px}
.start-btn{padding:14px 40px;background:var(--green);color:#fff;border:none;border-radius:8px;
  font-size:1rem;font-weight:700;font-family:'Inter';cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(4,170,109,.3)}
.start-btn:hover{background:var(--green-dark);transform:translateY(-2px)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:660px;margin:32px auto 0}
.feat{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center}
.feat i{font-size:1.6rem;color:var(--primary);margin-bottom:8px}
.feat h4{font-size:.88rem;font-weight:700;margin-bottom:4px}
.feat p{font-size:.78rem;color:var(--text-muted)}

/* === RESPONSIVE === */
@media(max-width:768px){
  .menu-btn{display:block}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 20px rgba(0,0,0,.15)}
  .main{margin-left:0}
  .content{padding:20px 16px 40px}
  .header-nav{display:none}
  .features{grid-template-columns:1fr}
  h1.page-title{font-size:1.5rem}
}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
.overlay.show{display:block}