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

:root {
  --bg:       #070b14;
  --bg2:      #0d1220;
  --bg3:      #131929;
  --card:     rgba(13,18,32,0.85);
  --border:   rgba(255,255,255,0.07);
  --border-h: rgba(99,179,237,0.45);
  --txt:      #e8edf5;
  --txt2:     #7a8ba8;
  --txt3:     #384157;
  --accent:   #63b3ed;
  --accent2:  #b794f4;
  --easy:     #48bb78;
  --medium:   #f6ad55;
  --hard:     #fc8181;
  --grad:     linear-gradient(135deg,#63b3ed,#b794f4);
  --grad2:    linear-gradient(135deg,#4facfe,#00f2fe);
  --glow:     0 0 40px rgba(99,179,237,0.15);
  --shadow:   0 8px 40px rgba(0,0,0,0.6);
  --r:        14px;
  --r-sm:     8px;
  --nav-h:    62px;
  --sw:       285px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:3px}

/* ── BG Glow ── */
body::before{
  content:'';position:fixed;top:-30%;left:-20%;
  width:60%;height:60%;
  background:radial-gradient(ellipse,rgba(99,179,237,0.07) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
body::after{
  content:'';position:fixed;bottom:-20%;right:-10%;
  width:50%;height:50%;
  background:radial-gradient(ellipse,rgba(183,148,244,0.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}

/* ── Navbar ── */
.navbar{
  position:sticky;top:0;z-index:200;
  height:var(--nav-h);
  background:rgba(7,11,20,0.8);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 24px;gap:8px;
}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;margin-right:8px}
.nav-logo{
  width:34px;height:34px;
  background:var(--grad);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 4px 16px rgba(99,179,237,0.35);
  flex-shrink:0;
}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-link{
  padding:7px 14px;border-radius:var(--r-sm);
  color:var(--txt2);font-size:.875rem;font-weight:500;
  transition:all .2s;
}
.nav-link:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav-link.active{color:var(--accent);background:rgba(99,179,237,.1)}
.nav-spacer{flex:1}
.nav-gh{
  padding:7px 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  color:var(--txt2);font-size:.82rem;font-weight:500;
  transition:all .2s;
}
.nav-gh:hover{color:var(--txt);border-color:var(--border-h)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;z-index:210;cursor:pointer}
.hamburger span{display:block;width:20px;height:2px;background:var(--txt);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Cards ── */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  backdrop-filter:blur(12px);
  transition:border-color .25s,box-shadow .25s;
  position:relative;z-index:1;
}
.card:hover{border-color:rgba(99,179,237,.2);box-shadow:var(--glow)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-easy  {background:rgba(72,187,120,.15);color:var(--easy)}
.badge-medium{background:rgba(246,173,85,.15);color:var(--medium)}
.badge-hard  {background:rgba(252,129,129,.15);color:var(--hard)}

/* ── Page Layout ── */
.page-container{max-width:1100px;margin:0 auto;padding:36px 24px;position:relative;z-index:1}

/* ── Hero ── */
.hero{text-align:center;padding:56px 20px 36px}
.hero-avatar{
  width:88px;height:88px;
  background:var(--grad);border-radius:50%;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;
  box-shadow:0 0 0 4px rgba(99,179,237,.12),0 0 60px rgba(99,179,237,.25);
  animation:float 4s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-name{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin-bottom:6px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:var(--txt2);font-size:.95rem}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.stat-card{padding:22px 16px;text-align:center;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.stat-card.total::after{background:var(--grad)}
.stat-card.easy::after  {background:var(--easy)}
.stat-card.medium::after{background:var(--medium)}
.stat-card.hard::after  {background:var(--hard)}
.stat-num{font-size:2.6rem;font-weight:800;line-height:1;margin-bottom:4px;letter-spacing:-.03em}
.stat-card.total .stat-num{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-card.easy   .stat-num{color:var(--easy)}
.stat-card.medium .stat-num{color:var(--medium)}
.stat-card.hard   .stat-num{color:var(--hard)}
.stat-label{font-size:.72rem;color:var(--txt2);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* ── Section Title ── */
.section-title{font-size:.95rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--txt)}

/* ── Heatmap ── */
.heatmap-section{padding:24px 26px}
.heatmap-months{display:grid;gap:3px;padding:0 0 4px 30px;font-size:.63rem;color:var(--txt2);width:100%}
.heatmap-wrap{display:flex;gap:8px;align-items:flex-start;width:100%}
.heatmap-days{display:grid;grid-template-rows:repeat(7,11px);gap:3px;flex-shrink:0}
.heatmap-days span{display:flex;align-items:center;justify-content:flex-end;font-size:.62rem;color:var(--txt2);width:22px;height:100%}
.heatmap-grid{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;grid-auto-columns:11px;gap:3px;flex:1;overflow:hidden}
.heat-cell{border-radius:2px;cursor:default;transition:transform .1s}
.heat-cell:hover{transform:scale(1.6);z-index:1}
.heat-cell.lv0{background:rgba(255,255,255,.04)}
.heat-cell.lv1{background:#0d3a24}
.heat-cell.lv2{background:#145e38}
.heat-cell.lv3{background:#1e8c53}
.heat-cell.lv4{background:#48bb78}
.heatmap-legend{display:flex;align-items:center;gap:3px;margin-top:10px;justify-content:flex-end;font-size:.68rem;color:var(--txt2)}
.heatmap-legend .heat-cell{width:11px;height:11px}

/* ── Charts ── */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart-card{padding:22px 24px}
.chart-wrap{height:180px;display:flex;align-items:center;justify-content:center}

/* ── Recent ── */
.recent-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);border:1px solid var(--border);
  cursor:pointer;transition:all .2s;margin-bottom:8px;
}
.recent-item:hover{border-color:var(--border-h);transform:translateX(4px);background:rgba(99,179,237,.04)}
.recent-item:last-child{margin-bottom:0}
.recent-title{flex:1;font-size:.875rem;font-weight:500}
.recent-cat{font-size:.72rem;color:var(--txt2)}

/* ── Sidebar Layout ── */
.sidebar-layout{display:flex;height:calc(100vh - var(--nav-h));overflow:hidden;position:relative;z-index:1}
.sidebar{
  width:var(--sw);flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.sidebar-header{padding:14px 12px 8px;border-bottom:1px solid var(--border)}
.sidebar-search{
  width:100%;padding:8px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--txt);font-size:.85rem;outline:none;transition:border-color .2s;
}
.sidebar-search:focus{border-color:var(--border-h)}
.sidebar-search::placeholder{color:var(--txt3)}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px}
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:149;background:rgba(0,0,0,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);pointer-events:none;transition:background 0.3s ease,backdrop-filter 0.3s ease}
.sidebar-overlay.open{display:block;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto}

/* ── Accordion ── */
.cat-section{margin-bottom:2px}
.cat-toggle{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r-sm);
  background:none;border:none;color:var(--txt2);
  font-size:.82rem;font-weight:600;text-align:left;
  transition:all .2s;letter-spacing:.01em;
}
.cat-toggle:hover,.cat-toggle.open{color:var(--txt);background:rgba(255,255,255,.04)}
.cat-icon{font-size:.95rem}
.cat-chevron{margin-left:auto;font-size:.65rem;transition:transform .25s}
.cat-toggle.open .cat-chevron{transform:rotate(90deg)}
.cat-count{font-size:.68rem;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:10px}
.cat-problems{display:none;padding-left:6px;padding-bottom:2px}
.cat-section.open .cat-problems{display:block}
.prob-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:var(--r-sm);
  font-size:.8rem;color:var(--txt2);cursor:pointer;transition:all .2s;
}
.prob-item:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.prob-item.active{color:var(--accent);background:rgba(99,179,237,.1)}
.prob-num{font-weight:600;min-width:28px;font-size:.75rem}
.prob-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.prob-dot.easy  {background:var(--easy)}
.prob-dot.medium{background:var(--medium)}
.prob-dot.hard  {background:var(--hard)}

/* ── Main Content ── */
.main-content{flex:1;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:18px}

/* ── Problem Header ── */
.prob-header{display:flex;flex-direction:column;gap:10px}
.prob-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prob-title{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.tag-chip{font-size:.72rem;background:rgba(255,255,255,.06);padding:2px 10px;border-radius:10px;color:var(--txt2)}

/* ── Sol Tabs ── */
.sol-tabs{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.04);border-radius:var(--r-sm);width:fit-content}
.sol-tab{padding:6px 14px;border-radius:6px;background:none;border:none;color:var(--txt2);font-size:.8rem;font-weight:500;transition:all .2s}
.sol-tab:hover{color:var(--txt)}
.sol-tab.active{background:var(--bg3);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ── Code Block ── */
.code-wrapper{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.code-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;
  background:rgba(255,255,255,.02);border-bottom:1px solid var(--border);
}
.code-dots{display:flex;gap:6px}
.code-dot{width:12px;height:12px;border-radius:50%}
.code-dot:nth-child(1){background:#fc8181}
.code-dot:nth-child(2){background:#f6ad55}
.code-dot:nth-child(3){background:#48bb78}
.code-lang-label{font-size:.75rem;color:var(--txt2);font-family:'JetBrains Mono',monospace;margin:0 auto}
.copy-btn{padding:4px 12px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--txt2);font-size:.73rem;transition:all .2s}
.copy-btn:hover{color:var(--txt);border-color:var(--border-h)}
.copy-btn.copied{color:var(--easy);border-color:var(--easy)}

/* ── LeetCode ext link ── */
.lc-ext-link{font-size:.72rem;color:var(--accent);opacity:.8;transition:opacity .2s}
.lc-ext-link:hover{opacity:1}

/* ── Description Panel ── */
.desc-panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
}
.desc-panel-header{
  display:flex;align-items:center;gap:8px;
  padding:11px 16px;cursor:pointer;
  background:rgba(255,255,255,.02);border-bottom:1px solid var(--border);
  transition:background .2s;user-select:none;
}
.desc-panel-header:hover{background:rgba(255,255,255,.04)}
.desc-panel-label{font-size:.82rem;font-weight:600;color:var(--txt);flex-shrink:0}
.desc-toggle-btn{
  margin-left:auto;flex-shrink:0;
  padding:3px 10px;border-radius:6px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  color:var(--txt2);font-size:.72rem;pointer-events:none;
}
.desc-body{padding:20px 24px;max-height:380px;overflow-y:auto;font-size:.875rem;line-height:1.75}

/* LeetCode rendered HTML */
.lc-content p{margin-bottom:10px}
.lc-content pre{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;margin:10px 0;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.82rem}
.lc-content code{font-family:'JetBrains Mono',monospace;font-size:.8rem;background:rgba(99,179,237,.1);padding:1px 6px;border-radius:4px;color:var(--accent)}
.lc-content pre code{background:none;padding:0;color:var(--txt)}
.lc-content ul,.lc-content ol{padding-left:20px;margin-bottom:10px}
.lc-content li{margin-bottom:4px}
.lc-content strong{color:var(--txt);font-weight:600}
.lc-content img{max-width:100%;border-radius:var(--r-sm)}
.lc-content sup{font-size:.65rem}

/* File comment fallback */
.file-comment{
  font-family:'JetBrains Mono',monospace;font-size:.8rem;
  background:var(--bg3);border-radius:var(--r-sm);
  padding:16px;white-space:pre-wrap;color:var(--txt2);line-height:1.7;
}
.desc-empty{color:var(--txt2);font-size:.875rem}


pre[class*="language-"]{
  margin:0!important;border-radius:0!important;
  background:var(--bg2)!important;
  font-family:'JetBrains Mono',monospace!important;
  font-size:.84rem!important;line-height:1.7!important;
  padding:22px!important;max-height:620px;overflow-y:auto;
}

/* ── Placeholder ── */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:280px;color:var(--txt2);text-align:center}
.placeholder-icon{font-size:3.5rem;opacity:.25}

/* ── Notes Sidebar ── */
.notes-sidebar-top{
  padding:20px 16px 14px;
  background:linear-gradient(135deg,rgba(99,179,237,.12),rgba(183,148,244,.08));
  border-bottom:1px solid var(--border);
}
.notes-sidebar-title{font-size:1rem;font-weight:800;margin-bottom:2px;letter-spacing:-.02em}
.notes-sidebar-count{font-size:.75rem;color:var(--txt2)}
.notes-sidebar-search{
  width:100%;margin-top:10px;padding:7px 11px;
  background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--txt);font-size:.82rem;outline:none;transition:border-color .2s;
}
.notes-sidebar-search:focus{border-color:var(--border-h)}
.notes-sidebar-search::placeholder{color:var(--txt3)}
.note-sidebar-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;
  transition:all .2s;font-size:.84rem;color:var(--txt2);
  margin:2px 6px;
}
.note-sidebar-item:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.note-sidebar-item.active{
  color:var(--accent);background:rgba(99,179,237,.1);
  border-left:2px solid var(--accent);padding-left:12px;
}
.note-sidebar-icon{font-size:1rem;flex-shrink:0}
.note-sidebar-label{flex:1;line-height:1.35}

/* ── Note Main Layout ── */
.note-main-wrapper{
  display:flex;flex-direction:column;
  height:100%;overflow-y:auto;
}
.note-banner{
  flex-shrink:0;
  padding:36px 40px 28px;
  background:linear-gradient(135deg,rgba(99,179,237,.1) 0%,rgba(183,148,244,.08) 100%);
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.note-banner::before{
  content:'';position:absolute;top:-40%;right:-10%;
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(183,148,244,.12),transparent 70%);
  pointer-events:none;
}
.note-banner-icon{font-size:2.5rem;margin-bottom:12px;display:block}
.note-banner-title{
  font-size:1.8rem;font-weight:800;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:8px;
}
.note-banner-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.note-meta-chip{
  font-size:.72rem;padding:3px 10px;border-radius:20px;
  background:rgba(99,179,237,.12);color:var(--accent);font-weight:600;
}

/* ── Note Body + TOC ── */
.note-body-row{
  display:flex;flex:1;gap:0;min-height:0;
}
.note-article{
  flex:1;padding:32px 40px;min-width:0;
  font-size:.92rem;line-height:1.85;
}
.note-toc{
  width:210px;flex-shrink:0;
  padding:24px 16px;border-left:1px solid var(--border);
  background:rgba(0,0,0,.15);
}
.note-toc-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txt2);margin-bottom:12px}
.note-toc-list{list-style:none;display:flex;flex-direction:column;gap:1px}
.note-toc-item{
  padding:5px 10px;border-radius:6px;font-size:.77rem;
  color:var(--txt2);cursor:pointer;transition:all .2s;
  border-left:2px solid transparent;
}
.note-toc-item:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.note-toc-item.active{color:var(--accent);border-left-color:var(--accent);background:rgba(99,179,237,.06)}
.note-toc-item.h3{padding-left:20px;font-size:.73rem}

/* ── Note Article Typography ── */
.note-article h1{display:none} /* shown in banner */
.note-article h2{font-size:1.05rem;font-weight:700;margin:28px 0 10px;color:var(--txt);border-bottom:1px solid var(--border);padding-bottom:8px;scroll-margin-top:20px}
.note-article h3{font-size:.93rem;font-weight:600;margin:20px 0 8px;color:var(--accent);scroll-margin-top:20px}
.note-article h4{font-size:.88rem;font-weight:600;margin:16px 0 6px;color:var(--txt2);scroll-margin-top:20px}
.note-article p{margin-bottom:12px}
.note-article ul,.note-article ol{padding-left:22px;margin-bottom:12px}
.note-article li{margin-bottom:5px}
.note-article code{font-family:'JetBrains Mono',monospace;font-size:.8rem;background:rgba(99,179,237,.1);padding:2px 7px;border-radius:5px;color:var(--accent)}
.note-article pre{background:var(--bg)!important;border:1px solid var(--border);border-radius:var(--r-sm);padding:18px!important;margin:14px 0;overflow-x:auto}
.note-article pre code{background:none;padding:0;color:var(--txt)}
.note-article blockquote{border-left:3px solid var(--accent2);padding:10px 18px;color:var(--txt2);margin:14px 0;background:rgba(183,148,244,.05);border-radius:0 var(--r-sm) var(--r-sm) 0}
.note-article table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.85rem}
.note-article th{background:rgba(255,255,255,.04);padding:9px 14px;border:1px solid var(--border);font-weight:600;color:var(--txt)}
.note-article td{padding:9px 14px;border:1px solid var(--border)}
.note-article tr:hover td{background:rgba(255,255,255,.02)}
.note-article a{color:var(--accent)}
.note-article hr{border:none;border-top:1px solid var(--border);margin:24px 0}
.note-article strong{color:var(--txt);font-weight:700}

/* ── Note Placeholder ── */
.note-placeholder{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;color:var(--txt2);text-align:center;padding:40px;
}
.note-placeholder-icon{font-size:4rem;opacity:.15}


/* ── Utils ── */
.loader{display:inline-block;width:22px;height:22px;border:2px solid var(--bg3);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .3s ease forwards}

/* ── Mobile Viewports Redesign ── */
@media(max-width:768px){
  /* Navbar adjustments */
  .hamburger{display:flex}
  .nav-links{
    display:none;
    flex-direction:column;
    position:fixed;
    top:var(--nav-h);left:0;right:0;z-index:199;
    background:rgba(13,18,32,0.96);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    padding:20px;gap:8px;
    transform:translateY(-15px);opacity:0;
    transition:transform .3s cubic-bezier(0.16,1,0.3,1),opacity .3s ease;
    pointer-events:none;
  }
  .nav-links.open{
    display:flex;
    transform:translateY(0);opacity:1;
    pointer-events:all;
  }
  .nav-links li{width:100%}
  .nav-links .nav-link{
    display:block;width:100%;text-align:center;
    padding:11px;font-size:.95rem;font-weight:600;
  }
  .nav-spacer{display:none} /* Clean up navbar elements */
  .nav-gh{display:none} /* Moved inside the hamburger menu for solutions/index */

  /* Sidebar styling overlays */
  .sidebar{
    position:fixed;left:-100%;top:var(--nav-h);
    height:calc(100vh - var(--nav-h));z-index:150;
    transition:left .35s cubic-bezier(0.16,1,0.3,1);
    box-shadow:5px 0 25px rgba(0,0,0,0.5);
  }
  .sidebar.open{left:0}
  
  /* Layout adjustments */
  .main-content{padding:16px}
  .charts-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .page-container{padding:16px 12px}

  /* Heatmap scroll structure */
  .heatmap-scroll-wrap {
    width:100%;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:10px;margin-top:10px;
  }
  .heatmap-scroll-wrap::-webkit-scrollbar {
    display:none;
  }
  .heatmap-months{
    width:630px !important;
    grid-template-columns:repeat(53,1fr) !important;
  }
  .heatmap-wrap{
    width:630px !important;
  }
  .heatmap-grid{
    grid-auto-columns:9px !important;
    gap:2px !important;
  }
  .heatmap-days{
    grid-template-rows:repeat(7,9px) !important;
    gap:2px !important;
  }
  .heatmap-days span{
    font-size:.58rem;width:20px;
  }
  .heatmap-swipe-hint {
    display:flex;align-items:center;justify-content:center;
    gap:6px;font-size:.68rem;color:var(--accent);
    margin-bottom:12px;opacity:.85;
    animation:pulse 2s infinite ease-in-out;
  }
  @keyframes pulse {
    0%,100%{opacity:.6}
    50%{opacity:1}
  }

  /* Floating Action Button (FAB) System */
  .fab-btn {
    display:flex !important;
    position:fixed;bottom:24px;right:24px;z-index:140;
    padding:12px 18px;border-radius:50px;
    background:rgba(13,18,32,0.85);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(99,179,237,0.35);
    color:var(--accent);font-weight:700;font-size:.82rem;
    box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 0 15px rgba(99,179,237,0.15);
    align-items:center;justify-content:center;gap:8px;
    transition:all .25s cubic-bezier(0.16,1,0.3,1);
    letter-spacing:.02em;
  }
  .fab-btn:hover {
    transform:translateY(-2px);border-color:var(--accent);
    box-shadow:0 10px 40px rgba(0,0,0,0.6), var(--glow);
  }
  .fab-btn:active {
    transform:translateY(1px);
  }
  .note-fab-left {
    left:24px;right:auto;
    border-color:rgba(183,148,244,0.35);
    color:var(--accent2);
    box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 0 15px rgba(183,148,244,0.15);
  }
  .note-fab-left:hover {
    border-color:var(--accent2);
    box-shadow:0 10px 40px rgba(0,0,0,0.6), 0 0 40px rgba(183,148,244,0.15);
  }

  /* Notes & Article responsive updates - hide TOC, shrink margins */
  .note-toc{display:none !important}
  .note-body-row{flex-direction:column}
  .note-article{
    padding:20px 16px !important;
    font-size:.88rem;line-height:1.75;
  }
  .note-banner{
    padding:24px 16px 20px !important;
  }
  .note-banner-title{
    font-size:1.45rem !important;
    line-height:1.3;
  }
  .note-banner-icon{
    font-size:2rem !important;margin-bottom:8px !important;
  }

  /* Solutions layout stacking & scrolling */
  .solutions-split {
    display:flex;flex-direction:column;gap:16px;width:100%;
  }
  .desc-body {
    max-height:none !important;
    overflow-y:visible !important;
    padding:16px !important;
  }
  pre[class*="language-"] {
    max-height:none !important;
    overflow-y:visible !important;
    padding:14px !important;
    font-size:.78rem !important;
  }
  .sol-tabs{
    width:100%;justify-content:center;
  }
  .sol-tab{
    flex:1;text-align:center;padding:7px 10px;font-size:.75rem;
  }
  .prob-title{
    font-size:1.25rem !important;
  }

  /* Mobile slide-up Table of Contents (TOC) drawer */
  .toc-drawer {
    display:flex !important;
    position:fixed;bottom:-100%;left:0;right:0;
    height:55vh;background:rgba(10,14,24,0.96);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-top:1px solid var(--border);border-radius:20px 20px 0 0;
    z-index:180;
    transition:bottom 0.35s cubic-bezier(0.16,1,0.3,1);
    flex-direction:column;
    box-shadow:0 -10px 40px rgba(0,0,0,0.6);
  }
  .toc-drawer.open {
    bottom:0;
  }
  .toc-drawer-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;border-bottom:1px solid var(--border);
  }
  .toc-drawer-title {
    font-size:.9rem;font-weight:700;color:var(--txt);
    letter-spacing:.02em;
  }
  .toc-drawer-close {
    background:rgba(255,255,255,0.06);border:1px solid var(--border);
    color:var(--txt2);width:30px;height:30px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;transition:all .2s;
  }
  .toc-drawer-close:hover {
    background:rgba(255,255,255,0.1);color:var(--txt);
  }
  .toc-drawer-body {
    flex:1;overflow-y:auto;padding:12px 16px;
  }
  .toc-drawer-overlay {
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
    z-index:170;pointer-events:none;
    transition:background .3s ease,backdrop-filter .3s ease;
  }
  .toc-drawer-overlay.open {
    display:block;background:rgba(0,0,0,0.65);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    pointer-events:auto;
  }
  .toc-drawer-body .note-toc-list {
    list-style:none;display:flex;flex-direction:column;gap:4px;
  }
  .toc-drawer-body .note-toc-item {
    padding:9px 12px;border-radius:8px;font-size:.82rem;
    color:var(--txt2);cursor:pointer;transition:all .2s;
    border-left:2px solid transparent;
  }
  .toc-drawer-body .note-toc-item:hover {
    color:var(--txt);background:rgba(255,255,255,0.04);
  }
  .toc-drawer-body .note-toc-item.active {
    color:var(--accent);border-left-color:var(--accent);
    background:rgba(99,179,237,0.08);
  }
  .toc-drawer-body .note-toc-item.h3 {
    padding-left:24px;font-size:.78rem;
  }
}

/* Solutions Desktop Split Screen */
@media (min-width: 769px) {
  .main-content {
    height: 100%;
    overflow: hidden;
  }
  .solutions-split {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
  }
  .split-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
  }
  .split-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    height: 100%;
  }
  .desc-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
  }
  .desc-body {
    flex: 1;
    max-height: none !important;
    overflow-y: auto;
  }
  #codeArea {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .code-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  .code-wrapper pre[class*="language-"] {
    flex: 1;
    max-height: none !important;
    overflow-y: auto !important;
  }
}