/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Light
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --c-accent:      #5b5bd6;
  --c-accent-soft: #7c7ce0;
  --c-accent-bg:   rgba(91,91,214,.06);
  --c-accent-ring: rgba(91,91,214,.14);
  --c-accent-glow: rgba(91,91,214,.08);
  --c-bg:          #fcfcfc;
  --c-surface:     #ffffff;
  --c-surface-2:   #f7f7f8;
  --c-surface-3:   #f0f0f2;
  --c-text:        #1a1a2e;
  --c-text-2:      #555570;
  --c-text-3:      #9494a8;
  --c-border:      #e8e8ee;
  --c-border-s:    #f0f0f4;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;
  --f-serif: "Source Serif 4", Georgia, serif;
  --f-sans:  "Inter", system-ui, sans-serif;
  --f-mono:  "JetBrains Mono", monospace;
  --sidebar-w: 272px;
}

/* ── Dark tokens ── */
:root[data-theme="dark"] {
  --c-accent:      #a78bfa;
  --c-accent-soft: #c4b5fd;
  --c-accent-bg:   rgba(167,139,250,.12);
  --c-accent-ring: rgba(167,139,250,.20);
  --c-accent-glow: rgba(167,139,250,.08);
  --c-bg:       #1e1e1e; --c-surface: #252525;
  --c-surface-2:#2d2d2d; --c-surface-3:#333;
  --c-text: #dcddde; --c-text-2: #a0a0a0; --c-text-3: #636363;
  --c-border: #333; --c-border-s: #2a2a2a;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--f-sans); background:var(--c-bg); color:var(--c-text); -webkit-font-smoothing:antialiased; }
a { color:var(--c-accent); text-decoration:none; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:var(--c-border); border-radius:var(--r-full); }

/* ── Reading progress ── */
#kb-progress { position:fixed; top:0; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--c-accent),var(--c-accent-soft)); z-index:9999; transition:width .08s linear; }

/* ── Layout ── */
.app-layout { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; position:sticky; top:0; height:100vh;
  overflow-y:auto; background:var(--c-surface); border-right:1px solid var(--c-border);
  display:flex; flex-direction:column;
}
:root[data-theme="dark"] .sidebar { background:#202020; border-right-color:#2d2d2d; }
.sidebar-header { padding:.9rem 1rem; border-bottom:1px solid var(--c-border); flex-shrink:0; }
.sidebar-brand { font-size:.85rem; font-weight:600; color:var(--c-text) !important; }
.sidebar-brand:hover { color:var(--c-accent) !important; }

/* Search */
.sidebar-search-wrap { padding:.5rem .75rem; position:relative; flex-shrink:0; border-bottom:1px solid var(--c-border-s); }
#kb-search {
  width:100%; background:var(--c-surface-2); border:1px solid var(--c-border);
  border-radius:var(--r-sm); padding:.38rem .75rem; font-size:.78rem; color:var(--c-text);
  font-family:var(--f-sans); outline:none; transition:border-color .15s, box-shadow .15s;
}
#kb-search:focus { border-color:var(--c-accent); box-shadow:0 0 0 2px var(--c-accent-ring); }
#kb-search::placeholder { color:var(--c-text-3); }
.search-results {
  position:absolute; left:.75rem; right:.75rem; top:100%; z-index:200;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:60vh; overflow-y:auto;
}
.search-item { display:block; padding:.65rem 1rem; border-bottom:1px solid var(--c-border-s); transition:background .1s; }
.search-item:last-child { border-bottom:none; }
.search-item:hover { background:var(--c-accent-bg); }
.search-item strong { display:block; font-size:.85rem; color:var(--c-accent); margin-bottom:.2rem; }
.search-item span { font-size:.75rem; color:var(--c-text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.no-results { padding:.75rem 1rem; font-size:.8rem; color:var(--c-text-3); }

/* Sidebar nav */
.sidebar-nav { padding:.4rem .5rem 3rem; flex:1; overflow-y:auto; }
.sidebar-nav-list { list-style:none; margin:0; padding:0; }
.sidebar-nav-list li a {
  display:block; padding:.26rem .75rem; font-size:.8rem; color:var(--c-text-2);
  border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .1s, color .1s; line-height:1.5;
}
.sidebar-nav-list li a:hover { color:var(--c-text); background:var(--c-surface-2); }
.sidebar-nav-list li.active > a { color:var(--c-accent) !important; font-weight:500; background:var(--c-accent-bg); }
.sidebar-divider { height:1px; background:var(--c-border-s); margin:.4rem .5rem; }

/* Section headings */
.sidebar-section > p {
  display:flex; align-items:center; gap:.3rem;
  padding:.3rem .6rem; margin:.6rem 0 .1rem;
  font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--c-text-3); border-radius:4px; cursor:pointer; user-select:none;
  transition:color .1s, background .1s;
}
.sidebar-section > p:hover { background:var(--c-surface-2); color:var(--c-text-2); }
.sidebar-section > p a { color:inherit !important; font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:inherit; padding:0 !important; }
.sidebar-section > p a:hover { background:none !important; }
.collapse-title::before { content:'›'; display:inline-block; width:.7rem; font-size:.85rem; opacity:.6; transition:transform .18s; flex-shrink:0; }
.sidebar-section.open > p .collapse-title::before,
.sidebar-section.open > .collapse-title::before { transform:rotate(90deg); opacity:.9; }
.kb-count { font-size:.59rem; font-weight:500; color:var(--c-text-3); margin-left:auto; }

/* Nested articles */
.sidebar-section > ul { list-style:none; margin:0; padding:0; display:none; }
.sidebar-section.open > ul { display:block; }
.sidebar-section > ul li a { font-size:.77rem; color:var(--c-text-3) !important; padding:.22rem .65rem .22rem 1.3rem; }
.sidebar-section > ul li a:hover { color:var(--c-text-2) !important; }
.sidebar-section > ul li.active > a { color:var(--c-accent) !important; }

/* Deep nesting (software/architecture/…) */
.sidebar-section .sidebar-section > p { padding-left:1.1rem; }
.sidebar-section .sidebar-section > ul li a { padding-left:2rem; }

/* ── Theme toggle ── */
.theme-toggle {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:2000;
  width:40px; height:40px; border:1px solid var(--c-border); border-radius:var(--r-full);
  background:var(--c-surface); color:var(--c-text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  box-shadow:0 2px 12px rgba(0,0,0,.06); transition:all .2s;
}
.theme-toggle:hover { border-color:var(--c-accent); box-shadow:0 4px 20px var(--c-accent-ring); transform:translateY(-1px); }

/* ── Main content ── */
.main-content { flex:1; min-width:0; display:flex; justify-content:center; }
.markdown-section {
  width:100%; max-width:780px; padding:3rem 3rem 5rem;
  font-family:var(--f-sans); color:var(--c-text);
  animation:kb-fade .22s ease;
}
/* Homepage: wider, centered */
.markdown-section.is-home {
  max-width:1160px;
  padding:2rem 2.5rem 5rem;
}
@keyframes kb-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Typography ── */
.article-body p, .article-body li { color:var(--c-text-2); line-height:1.85; font-size:.95rem; }
.article-body h1 { font-family:var(--f-serif); font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1.2; margin:0 0 .5rem; border:none; color:var(--c-text); }
.article-body h2 { font-family:var(--f-serif); font-size:1.42rem; font-weight:700; color:#121225; margin:3.5rem 0 1rem; padding:.55rem .8rem .72rem; border-bottom:2px solid #cfcfe0; background:linear-gradient(90deg,rgba(91,91,214,.05),transparent 70%); border-radius:var(--r-sm); }
.article-body h3 { font-family:var(--f-sans); font-size:1.22rem; font-weight:700; color:#1a1a2e; margin:2rem 0 .62rem; padding:.4rem .75rem .4rem .95rem; border-left:4px solid var(--c-accent); background:rgba(91,91,214,.08); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.article-body h4 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--c-text-3); margin:1.5rem 0 .35rem; }
:root[data-theme="dark"] .article-body h2 { color:#f0f0f0; border-bottom-color:#4b4b4b; background:linear-gradient(90deg,rgba(167,139,250,.11),transparent 70%); }
:root[data-theme="dark"] .article-body h3 { color:#e3e3e3; border-left-color:#a78bfa; background:rgba(167,139,250,.14); }
.article-body a { color:var(--c-accent); font-weight:500; transition:color .15s; }
.article-body a:hover { color:var(--c-accent-soft); text-decoration:underline; text-underline-offset:3px; }
.article-body strong { color:var(--c-text); font-weight:600; }
.article-body :is(ul,ol) { padding-left:1.4rem; margin:.5rem 0 1rem; }
.article-body li { margin-bottom:.25rem; }
.article-body hr { border:none; border-top:1px solid var(--c-border); margin:2.5rem 0; }

/* Inline code */
.article-body :not(pre) > code { font-family:var(--f-mono); font-size:.82em; background:var(--c-surface-2); color:var(--c-accent); border:1px solid var(--c-border-s); border-radius:var(--r-sm); padding:.12em .4em; }
:root[data-theme="dark"] .article-body :not(pre) > code { background:#2d2d2d; border-color:#3a3a3a; }

/* Blockquote */
.kb-blockquote { margin:1.5rem 0; padding:.85rem 1.2rem; border-left:3px solid var(--c-accent); background:var(--c-accent-bg); border-radius:0 var(--r-md) var(--r-md) 0; }
.kb-blockquote p { color:var(--c-text-2) !important; margin:0; font-style:italic; font-family:var(--f-serif); }

/* Tables */
.article-body table { width:100%; border-collapse:collapse; font-size:.85rem; margin:1.5rem 0; border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-surface); }
.article-body thead tr { background:var(--c-surface-2); }
.article-body th { padding:.55rem .9rem; font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-3); border-bottom:1px solid var(--c-border); text-align:left; }
.article-body td { padding:.55rem .9rem; color:var(--c-text-2); border-bottom:1px solid var(--c-border-s); vertical-align:top; background:var(--c-surface); }
.article-body tbody tr:last-child td { border-bottom:none; }
.article-body tbody tr:hover td { background:var(--c-surface-2); }

/* Code blocks */
.kb-code-block { position:relative; margin:1.5rem 0; border-radius:var(--r-md); overflow:hidden; border:1px solid #e4e8f0; background:#f7f8fb; }
:root[data-theme="dark"] .kb-code-block { background:#141414; border-color:#272727; }
.kb-code-block::before { content:attr(data-lang); display:block; background:#eef2f8; color:#5f6b82; font-family:var(--f-mono); font-size:.62rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:.4rem 1.25rem; border-bottom:1px solid #d8e0ec; }
:root[data-theme="dark"] .kb-code-block::before { background:#0c0c14; color:#45475a; border-bottom-color:#1e1e2e; }
.kb-code-block pre { margin:0; overflow-x:auto; }
.kb-code-block pre code { font-family:var(--f-mono); font-size:.82rem; line-height:1.75; display:block; padding:1.15rem 1.4rem; color:#1f2430; background:transparent; }
:root[data-theme="dark"] .kb-code-block pre code { color:#cdd6f4; }
.kb-copy-btn {
  position:absolute; top:.35rem; right:.6rem; background:rgba(137,180,250,.06);
  border:1px solid rgba(137,180,250,.12); color:#585b70; border-radius:var(--r-sm);
  font-family:var(--f-sans); font-size:.66rem; font-weight:600; padding:.22rem .55rem;
  cursor:pointer; transition:background .15s, color .15s;
}
.kb-copy-btn:hover, .kb-copy-btn.copied { background:rgba(137,180,250,.15); color:#5b5bd6; }

/* Mermaid */
.kb-mermaid-block { margin:1.5rem 0; padding:1rem; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-surface); overflow-x:auto; }

/* Article meta */
.kb-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.15rem 0 1.85rem; padding-bottom:1.5rem; border-bottom:1px solid var(--c-border); }
.kb-badge { display:inline-flex; align-items:center; background:var(--c-accent-bg); color:var(--c-accent); border:1px solid var(--c-accent-ring); border-radius:var(--r-full); padding:.18rem .7rem; font-size:.67rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.kb-meta-item {
  font-size:.75rem; color:var(--c-text-3); display:inline-flex; align-items:center; gap:.25rem;
}
.kb-meta-item + .kb-meta-item::before,
.kb-readtime::before {
  content:'·'; margin-right:.3rem; color:var(--c-border);
}
.kb-readtime { font-size:.75rem; color:var(--c-text-3); display:inline-flex; align-items:center; gap:.25rem; }

/* ── Floating TOC ── */
#kb-toc {
  display:none; position:fixed; top:4.5rem; right:1.5rem; width:210px;
  max-height:calc(100vh - 6rem); flex-direction:column; background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:10px; overflow:hidden; z-index:999;
  box-shadow:0 2px 16px rgba(0,0,0,.08); font-family:var(--f-sans);
}
@media (min-width:1300px) { #kb-toc { display:flex; } }
#kb-toc-header { flex-shrink:0; font-size:.58rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-text-3); background:var(--c-surface-2); padding:.6rem .85rem .5rem; border-bottom:1px solid var(--c-border); }
#kb-toc-list { list-style:none; margin:0; padding:.35rem 0; overflow-y:auto; flex:1; }
.kb-toc-h2 { padding:0 .4rem; }
.kb-toc-h2 > a { display:block; padding:.3rem .5rem; font-size:.72rem; font-weight:600; color:var(--c-text); border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s, color .12s; }
.kb-toc-h2 > a:hover, .kb-toc-h2 > a.kb-toc-active { color:var(--c-accent); background:var(--c-accent-bg); }
.kb-toc-h3-wrap { list-style:none; padding:.1rem 0 .2rem .6rem; margin:0 .4rem 0 .85rem; border-left:1.5px solid var(--c-border); }
.kb-toc-h3 > a { display:block; padding:.18rem .5rem; font-size:.67rem; color:var(--c-text-2); border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s, color .12s; }
.kb-toc-h3 > a:hover, .kb-toc-h3 > a.kb-toc-active { color:var(--c-accent); background:var(--c-accent-bg); }

/* ── Homepage — reuse Docsify theme styles ── */
.is-home .article-body { text-align:initial; }
.kb-hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:3rem 1rem .5rem; }
.kb-hero h1 { font-family:var(--f-serif) !important; font-size:2.2rem; font-weight:700; letter-spacing:-.035em; line-height:1.15; color:var(--c-text); margin:0 auto .6rem; border:none; padding:0; text-align:center; }
.kb-hero-sub { font-size:1rem; color:var(--c-text-2); line-height:1.75; max-width:460px; margin:0 auto 1.25rem; font-family:var(--f-serif); font-style:italic; text-align:center; }
.kb-stats { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; font-size:.72rem; color:var(--c-text-3); margin:0 auto .5rem; }
.kb-stats span { display:inline-flex; align-items:center; gap:.3rem; background:var(--c-surface-2); border:1px solid var(--c-border-s); padding:.25rem .7rem; border-radius:var(--r-full); }
.kb-divider { width:40px; height:2px; background:linear-gradient(90deg,transparent,var(--c-accent),transparent); margin:1.5rem auto 2rem; border-radius:1px; }
.kb-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem;
}
/* Cap at 3 columns; on ultra-wide (≥1400px sidebar+content) go to 4 */
@media(min-width:1100px) { .kb-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1500px) { .kb-grid { grid-template-columns:repeat(4,1fr); } }
@media(max-width:600px)  { .kb-grid { grid-template-columns:1fr; } }
.kb-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--c-border); border-radius:var(--r-xl); padding:1.25rem 1.3rem 1.1rem; background:var(--c-surface); text-decoration:none !important; color:inherit !important; overflow:hidden; transition:border-color .3s,box-shadow .3s,transform .3s,background .3s; }
.kb-card::after { content:''; position:absolute; bottom:0; left:50%; right:50%; height:2.5px; background:linear-gradient(90deg,var(--c-accent),var(--c-accent-soft)); border-radius:2px 2px 0 0; transition:left .35s cubic-bezier(.4,0,.2,1),right .35s cubic-bezier(.4,0,.2,1); }
.kb-card:hover { border-color:var(--c-accent-ring); background:var(--c-surface-2); box-shadow:0 8px 28px var(--c-accent-glow),0 0 0 1px var(--c-accent-ring); transform:translateY(-4px); }
.kb-card:hover::after { left:1rem; right:1rem; }
.kb-card-icon { width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:var(--c-surface-2); border:1px solid var(--c-border-s); border-radius:var(--r-md); margin-bottom:.8rem; transition:background .3s,transform .3s; }
.kb-card:hover .kb-card-icon { background:var(--c-accent-bg); transform:scale(1.08); }
.kb-card h3 { font-family:var(--f-sans) !important; font-size:.88rem !important; font-weight:600 !important; margin:0 0 .3rem !important; color:var(--c-text) !important; border:none !important; padding:0 !important; transition:color .25s; }
.kb-card:hover h3 { color:var(--c-accent) !important; }
.kb-card p { font-size:.74rem !important; color:var(--c-text-2) !important; line-height:1.6 !important; margin:0 0 .75rem !important; flex:1; }
.kb-card-count { font-size:.66rem; color:var(--c-accent); font-weight:600; }
.kb-footer { text-align:center; padding:2.5rem 0 1rem; font-size:.72rem; color:var(--c-text-3); }
.kb-footer a { color:var(--c-accent) !important; }

/* ── About / CV page ── */
.about-wrapper {
  max-width:680px;
  width:100%;
  padding-bottom:4rem;
}
.about-header {
  display:flex; align-items:center; gap:1.25rem;
  padding:2rem 0 1.75rem;
  border-bottom:1px solid var(--c-border);
  margin-bottom:1.5rem;
}
.about-avatar {
  width:60px; height:60px; border-radius:var(--r-full); flex-shrink:0;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-soft));
  color:#fff; font-family:var(--f-sans); font-size:1.2rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.about-name { font-family:var(--f-serif); font-size:1.6rem; font-weight:700; margin:0 0 .2rem; color:var(--c-text); }
.about-title { font-size:.85rem; color:var(--c-text-2); margin:0 0 .65rem; }
.about-links { display:flex; gap:.5rem; flex-wrap:wrap; }
.about-links a {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; color:var(--c-accent); border:1px solid var(--c-accent-ring);
  border-radius:var(--r-full); padding:.2rem .7rem; transition:background .15s;
}
.about-links a:hover { background:var(--c-accent-bg); text-decoration:none; }
.about-content h1 { display:none; } /* hide redundant h1 from markdown */
.about-content .kb-meta { display:none; } /* hide read-time on about page */

/* ── Protection ── */
.article-body.blurred { filter:blur(8px); user-select:none; pointer-events:none; transition:filter .3s; }
#devtools-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.devtools-msg { background:var(--c-surface); border-radius:var(--r-xl); padding:2.5rem 3rem; text-align:center; border:1px solid var(--c-border); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.devtools-msg span { font-size:2rem; display:block; margin-bottom:1rem; }
.devtools-msg p { color:var(--c-text-2); font-size:.95rem; margin:0; }

/* ── Responsive ── */
@media(max-width:768px) {
  .sidebar { display:none; }
  .markdown-section { padding:1.5rem 1.15rem 4rem; }
  .about-header { flex-direction:column; text-align:center; }
  .about-links { justify-content:center; }
}