/* HTML Notes lesson shell — CynphoCode */
.html-notes-page { min-height:100vh; background:var(--bg); color:var(--text); }
.html-notes-layout { display:grid; grid-template-columns:270px minmax(0,1fr); min-height:calc(100dvh - 68px); }
.html-notes-sidebar { position:sticky; top:68px; height:calc(100dvh - 68px); overflow:auto; border-right:1px solid var(--border); background:var(--bg); padding:18px 12px 22px; scrollbar-width:thin; }
.html-notes-sidebar-head { padding:8px 10px 14px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.html-notes-brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:.94rem; color:var(--text); margin-bottom:8px; }
.html-notes-brand img { width:28px;height:28px; }
.html-notes-progress-row { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-muted); margin-bottom:6px; }
.html-notes-progress-row strong { color:var(--primary); }
.html-notes-progress-track { height:6px; background:var(--border); border-radius:999px; overflow:hidden; }
.html-notes-progress-fill { height:100%; width:0; background:var(--primary); border-radius:999px; transition:width .25s ease; }
.html-notes-topic-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.html-notes-topic-list a { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; text-decoration:none; color:var(--text-muted); font-size:.78rem; line-height:1.25; }
.html-notes-topic-list a:hover { background:var(--bg-2); color:var(--text); }
.html-notes-topic-list a.active { background:var(--primary-light); color:var(--primary); font-weight:700; }
.html-notes-num { width:22px;height:22px;border-radius:6px; background:var(--bg-2); display:inline-flex;align-items:center;justify-content:center; flex-shrink:0; font-size:.66rem;font-weight:800;color:var(--text-muted); }
.html-notes-topic-list a.active .html-notes-num { background:var(--primary); color:#fff; }
.html-notes-main { min-width:0; display:flex; flex-direction:column; }
.html-notes-content { width:min(900px,100%); margin:0 auto; padding:48px 52px 36px; flex:1; }
.html-notes-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.html-notes-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--primary-light); color:var(--primary); font-size:.72rem; font-weight:700; }
.html-notes-title { font-size:clamp(1.8rem,3.4vw,2.55rem); line-height:1.12; margin:0 0 10px; color:var(--text); letter-spacing:-.03em; }
.html-notes-subtitle { margin:0 0 28px; color:var(--text-muted); font-size:.9rem; }
.html-notes-body { font-size:.95rem; line-height:1.8; }
.html-notes-body:empty::before { content:'Content for this topic is not written yet.'; display:block; padding:34px 0; color:var(--text-light); font-style:italic; }
.html-notes-body h2 { margin:34px 0 12px; font-size:1.35rem; }
.html-notes-body h3 { margin:26px 0 10px; font-size:1.08rem; }
.html-notes-body p { margin:0 0 16px; }
.html-notes-body pre { overflow:auto; padding:16px; border-radius:10px; background:#11131a; color:#e6eaf2; }
.html-notes-body code { font-family:'Fira Code','Consolas',monospace; }
.html-notes-body :not(pre)>code { background:var(--bg-2); border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
.html-notes-bottom-nav { display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:22px; border-top:1px solid var(--border); }
.html-notes-nav-btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:9px; padding:10px 14px; font-weight:650; font-size:.82rem; transition:.15s; }
.html-notes-nav-btn:hover { border-color:var(--primary); color:var(--primary); }
.html-notes-nav-btn.disabled { visibility:hidden; }
.html-notes-footer-wrap { margin-top:auto; }
@media (max-width: 900px) {
  .html-notes-layout { grid-template-columns:1fr; }
  .html-notes-sidebar { position:relative; top:auto; height:auto; max-height:none; border-right:none; border-bottom:1px solid var(--border); }
  .html-notes-topic-list { display:grid; grid-template-columns:1fr 1fr; }
  .html-notes-content { padding:32px 22px; }
}
@media (max-width: 560px) {
  .html-notes-topic-list { grid-template-columns:1fr; }
  .html-notes-bottom-nav { flex-direction:column; }
  .html-notes-nav-btn { justify-content:center; }
}

.html-notes-loading, .html-notes-empty { color:var(--text-light); font-style:italic; padding:28px 0; }