*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #0d1117; --sidebar-bg: #161b22; --card-bg: #1c2128;
      --border: #30363d; --text: #e6edf3; --text-muted: #8b949e;
      --green: #3fb950; --green-dim: #238636; --blue: #58a6ff;
      --purple: #bc8cff; --yellow: #e3b341; --red: #f85149;
      --code-bg: #161b22; --sidebar-w: 260px; --header-h: 56px;
    }
    html, body { height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 14px; }

    /* ── Header ── */
    header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--sidebar-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 12px; z-index: 100; }
    .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--green); }
    .logo-icon { width: 28px; height: 28px; background: var(--green); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #0d1117; }
    .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
    .user-badge { font-size: 13px; color: var(--text-muted); }
    .user-badge strong { color: var(--green); }
    .btn-sm { padding: 5px 12px; border-radius: 5px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); transition: all .15s; }
    .btn-sm:hover { border-color: var(--text-muted); color: var(--text); }

    /* ── Layout ── */
    .layout { display: flex; margin-top: var(--header-h); height: calc(100vh - var(--header-h)); }

    /* ── Sidebar ── */
    .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border); overflow-y: auto; padding: 12px 0; }
    .sidebar-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; padding: 8px 20px 4px; }
    .lesson-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background .15s; color: var(--text-muted); font-size: 13px; margin: 0 8px; }
    .lesson-item:hover { background: var(--card-bg); color: var(--text); }
    .lesson-item.active { background: rgba(63,185,80,.12); color: var(--green); }
    .lesson-item.locked { opacity: .4; cursor: not-allowed; }
    .lesson-item .num { font-size: 11px; font-weight: 700; opacity: .6; width: 16px; flex-shrink: 0; }
    .lesson-item .icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
    .lesson-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lesson-item .done { color: var(--green); font-size: 12px; }
    .lesson-item .lock-icon { font-size: 11px; }

    /* ── Content ── */
    .content-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .content { flex: 1; overflow-y: auto; padding: 32px 40px; max-width: 860px; }
    .lesson-content h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
    .lesson-content .subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; line-height: 1.6; }
    .lesson-content h2 { font-size: 17px; font-weight: 600; margin: 28px 0 12px; color: var(--blue); }
    .lesson-content p { color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; }
    .lesson-content ul, .lesson-content ol { color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; padding-left: 20px; }
    .lesson-content li { margin-bottom: 4px; }
    .lesson-content code { background: var(--code-bg); border: 1px solid var(--border); color: var(--green); padding: 1px 6px; border-radius: 4px; font-family: 'SF Mono','Fira Code',monospace; font-size: 13px; }
    .lesson-content pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 12px 0 20px; overflow-x: auto; }
    .lesson-content pre code { background: none; border: none; color: var(--text); font-size: 13px; line-height: 1.6; padding: 0; }
    .lesson-content .cmd { color: var(--green); }
    .lesson-content .cmt { color: var(--text-muted); font-style: italic; }
    .lesson-content .out { color: var(--yellow); }
    .lesson-content .kw  { color: var(--purple); }
    .lesson-content .str { color: var(--yellow); }
    .cmd-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 13px; }
    .cmd-table th { text-align: left; padding: 8px 12px; background: var(--sidebar-bg); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--border); }
    .cmd-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
    .cmd-table td:first-child { font-family: 'SF Mono','Fira Code',monospace; color: var(--green); font-size: 12px; white-space: nowrap; }
    .cmd-table tr:last-child td { border-bottom: none; }
    .try-box { background: rgba(63,185,80,.06); border: 1px solid rgba(63,185,80,.2); border-radius: 8px; padding: 14px 18px; margin: 20px 0; }
    .try-box .try-title { font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
    .try-box ul { color: var(--text-muted); padding-left: 16px; margin: 0; }
    .try-box li { margin-bottom: 6px; }
    .try-box code { background: rgba(63,185,80,.1); border-color: rgba(63,185,80,.3); }
    .info-box { background: rgba(88,166,255,.06); border: 1px solid rgba(88,166,255,.2); border-radius: 8px; padding: 14px 18px; margin: 16px 0; }
    .info-box p { color: var(--text-muted); margin: 0; line-height: 1.6; }
    .info-box strong { color: var(--blue); }

    /* ── Task/Quiz Section ── */
    .quiz-section { background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; margin: 24px 0; }
    .quiz-label { font-size: 11px; font-weight: 700; color: var(--yellow); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
    .quiz-task-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
    .quiz-instruction { color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; font-size: 13px; }
    .quiz-instruction code { background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.25); color: var(--green); padding: 1px 6px; border-radius: 4px; font-family: 'SF Mono','Fira Code',monospace; font-size: 12px; }
    .quiz-hint-box { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; }
    .quiz-hint-toggle { font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; }
    .quiz-hint-toggle:hover { color: var(--blue); }
    .quiz-hint-cmd { font-family: 'SF Mono','Fira Code',monospace; font-size: 12px; color: var(--green); margin-top: 8px; line-height: 1.7; }
    .quiz-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .quiz-verify-btn { padding: 9px 22px; background: var(--green-dim); border: 1px solid var(--green); border-radius: 6px; color: var(--green); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
    .quiz-verify-btn:hover:not(:disabled) { background: rgba(35,134,54,.6); }
    .quiz-verify-btn:disabled { opacity: .5; cursor: not-allowed; }
    .quiz-feedback { margin-top: 12px; padding: 10px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; }
    .quiz-feedback.correct { background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.3); color: var(--green); }
    .quiz-feedback.wrong   { background: rgba(248,81,73,.1);  border: 1px solid rgba(248,81,73,.3);  color: var(--red); }
    .quiz-done { display: flex; align-items: center; gap: 10px; color: var(--green); font-weight: 600; font-size: 14px; }
    .quiz-done-icon { font-size: 20px; }

    /* ── Nav buttons ── */
    .nav-buttons { display: flex; gap: 10px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); align-items: center; }
    .btn { padding: 8px 18px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); transition: all .15s; }
    .btn:hover:not(:disabled) { border-color: var(--text-muted); }
    .btn-primary { background: var(--green-dim); border-color: var(--green); color: var(--green); }
    .btn-primary:hover:not(:disabled) { background: rgba(35,134,54,.6); }
    .btn:disabled { opacity: .35; cursor: not-allowed; }
    .open-terminal-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--sidebar-bg); border: 1px solid var(--border); color: var(--text-muted); padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; }
    .open-terminal-btn:hover { border-color: var(--green); color: var(--green); }

    /* ── Terminal ── */
    .terminal-panel { flex-shrink: 0; height: 320px; border-top: 1px solid var(--border); background: #0d1117; display: flex; flex-direction: column; }
    .terminal-panel.collapsed { height: 40px; }
    .terminal-header { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 40px; flex-shrink: 0; background: var(--sidebar-bg); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; }
    .terminal-header:hover { background: var(--card-bg); }
    .terminal-dots { display: flex; gap: 6px; }
    .dot { width: 12px; height: 12px; border-radius: 50%; }
    .dot-red { background: #ff5f57; } .dot-yellow { background: #febc2e; } .dot-green { background: #28c840; }
    .terminal-title { font-size: 12px; font-weight: 600; color: var(--text-muted); flex: 1; }
    .terminal-status { font-size: 11px; color: var(--text-muted); }
    .terminal-status.connected { color: var(--green); }
    .terminal-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 4px; }
    #terminal-container { flex: 1; padding: 8px; overflow: hidden; }

    /* ── Auth Modal ── */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
    .modal-overlay.hidden { display: none; }
    .modal { background: var(--sidebar-bg); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 420px; padding: 32px; }
    .modal-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-weight: 700; font-size: 18px; color: var(--green); }
    .modal-logo .logo-icon { width: 32px; height: 32px; font-size: 16px; }
    .modal-tabs { display: flex; gap: 0; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
    .modal-tab { flex: 1; padding: 8px; text-align: center; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-muted); background: var(--bg); transition: all .15s; border: none; }
    .modal-tab.active { background: var(--green-dim); color: var(--green); }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
    .form-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; color: var(--text); font-size: 14px; outline: none; transition: border .15s; }
    .form-input:focus { border-color: var(--blue); }
    .form-error { margin-top: 6px; font-size: 12px; color: var(--red); min-height: 16px; }
    .form-submit { width: 100%; padding: 11px; background: var(--green-dim); border: 1px solid var(--green); border-radius: 6px; color: var(--green); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; margin-top: 8px; }
    .form-submit:hover { background: rgba(35,134,54,.6); }
    .form-submit:disabled { opacity: .5; cursor: not-allowed; }
    .pw-rules { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.6; }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }