/* ============================================================
   style.css — ONE shared stylesheet for the whole site
   Every rule below is scoped with html[data-page="..."] so
   pages never leak styles into each other:
     - network_lab.html / project.html -> data-page="network_lab"
     - index.html                       -> data-page="index"
     - doc.html                         -> data-page="doc"
     - ai.html / linux.html / netsec.html / python.html
                                         -> data-page="ai" / "linux" / "netsec" / "python"
   ============================================================ */

/* ==================== NETWORK LAB PAGES (network_lab.html, project.html) ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fira+Code:wght@400;500;600&display=swap');

html[data-page="network_lab"] {
  --bg:#050914;
  --bg2:#091322;
  --card:rgba(17,27,43,.72);
  --card2:rgba(11,19,33,.88);
  --line:rgba(160,184,215,.14);
  --line-strong:rgba(160,184,215,.28);
  --text:#e8edf7;
  --muted:#8e9bb0;
  --muted-2:#aab5c7;
  --cyan:#38c8ef;
  --green:#52e59b;
  --blue:#7da8ff;
  --violet:#a78bfa;
  --radius:22px;
  --max:1200px;
  overflow-x:hidden;
  max-width:100vw;
}

html[data-page="network_lab"] * {box-sizing:border-box}
html[data-page="network_lab"] {scroll-behavior:smooth}
html[data-page="network_lab"] body {
  margin:0; color:var(--text); background:
  radial-gradient(circle at 12% 16%,rgba(25,103,139,.20),transparent 32%),
  radial-gradient(circle at 86% 22%,rgba(85,56,145,.13),transparent 32%),
  linear-gradient(135deg,#06101d 0%,#050914 52%,#0b0b1b 100%);
  font-family:'Inter',Inter,system-ui,sans-serif; min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  max-width:100vw;
}
html[data-page="network_lab"] body:before {
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.20;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px;
}
html[data-page="network_lab"] a {color:inherit;text-decoration:none}
html[data-page="network_lab"] img {display:block;max-width:100%}

/* ============== TOPBAR (doc-style) ============== */
html[data-page="network_lab"] .wrap {width:min(var(--max), calc(100% - 32px));margin:0 auto}
html[data-page="network_lab"] .topbar {
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(5,9,20,.74);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--line);
  width:100%;
}
html[data-page="network_lab"] .topbar-inner {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0}
html[data-page="network_lab"] .brand {display:flex;align-items:center;gap:12px;min-width:0}
html[data-page="network_lab"] .avatar {
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--cyan),var(--green),var(--violet));
  border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 30px rgba(0,0,0,.35);
  flex:0 0 auto;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;
}
html[data-page="network_lab"] .avatar:hover {transform:scale(1.1);box-shadow:0 16px 40px rgba(56,200,239,.25)}
html[data-page="network_lab"] .avatar span {font-weight:800;color:#fff;letter-spacing:.5px;font-size:1.05rem}
html[data-page="network_lab"] .brand-text h1 {margin:0;font-size:1.02rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#fff}
html[data-page="network_lab"] .brand-text small {display:block;margin-top:3px;color:#8e9bb0;font-size:.8rem;font-weight:500}
html[data-page="network_lab"] .btn.back-btn {
  padding:10px 16px;font-size:.85rem;background:rgba(56,200,239,.08);border-color:rgba(56,200,239,.20);color:var(--cyan);
}
html[data-page="network_lab"] .btn.back-btn:hover {background:rgba(56,200,239,.15);transform:translateX(-4px);border-color:rgba(56,200,239,.35)}
html[data-page="network_lab"] .btn.back-btn svg {transition:transform .25s ease}
html[data-page="network_lab"] .btn.back-btn:hover svg {transform:translateX(-3px)}

html[data-page="network_lab"] main {max-width:var(--max);margin:auto;padding:100px 28px 90px;position:relative;z-index:1}

/* ============== HERO ============== */
html[data-page="network_lab"] .hero {max-width:880px;margin-bottom:80px}
html[data-page="network_lab"] .eyebrow, html[data-page="network_lab"] .kicker {font-size:10px;font-weight:700;letter-spacing:.14em;color:#91a1b9}
html[data-page="network_lab"] .eyebrow {display:inline-flex;gap:9px;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(21,35,54,.55)}
html[data-page="network_lab"] .eyebrow .pulse, html[data-page="network_lab"] .pulse {width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:pulse 2s ease-in-out infinite;display:inline-block;flex:0 0 auto}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(82,229,155,.55)}70%{box-shadow:0 0 0 8px rgba(82,229,155,0)}}
html[data-page="network_lab"] .hero h1 {
  display:block;
  width:100%;
  max-width:900px;
  margin:24px 0 24px;
  padding:8px 0 12px;
  font-size:clamp(56px,9vw,112px);
  line-height:1.02;
  letter-spacing:-.0065em;
  font-weight:900;
  overflow:visible;
  white-space:nowrap;
}

html[data-page="network_lab"] .hero h1 em,
html[data-page="network_lab"] .hero h1 b {
  display:inline-block;
  overflow:visible;
  line-height:1.02;
}

html[data-page="network_lab"] h1 em {font-style:normal;background:linear-gradient(90deg,var(--blue),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-page="network_lab"] h1 b {color:var(--cyan);font-weight:500;animation:blink-network_lab 1.1s step-end infinite}
html[data-page="network_lab"] .lead {max-width:720px;color:#aab5c7;line-height:1.85;font-size:15px;margin:0 0 8px}
html[data-page="network_lab"] .lead code, html[data-page="network_lab"] .section-sub code {
  font-family:'Fira Code',monospace;background:rgba(56,200,239,.10);color:var(--cyan);
  padding:2px 7px;border-radius:6px;font-size:.85em;font-weight:600;
}
html[data-page="network_lab"] .hero-actions {display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 0}
html[data-page="network_lab"] .btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;
  border:1px solid var(--line);background:rgba(21,30,45,.65);color:var(--text);font-size:12px;font-weight:600;
  transition:.22s;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);cursor:pointer;font-family:inherit;
}
html[data-page="network_lab"] .btn:hover {transform:translateY(-2px);border-color:rgba(75,225,176,.40);background:rgba(28,40,60,.85);color:#fff}
html[data-page="network_lab"] .btn.primary {color:#03100b;background:linear-gradient(100deg,#40db91,#2dc2ed);border:0;font-weight:700;box-shadow:0 8px 24px rgba(45,194,237,.20)}
html[data-page="network_lab"] .btn.primary:hover {filter:brightness(1.05);box-shadow:0 12px 32px rgba(45,194,237,.30)}
html[data-page="network_lab"] .btn .arrow {transition:transform .2s ease}
html[data-page="network_lab"] .btn:hover .arrow {transform:translateX(2px) translateY(-2px)}

html[data-page="network_lab"] .hero-stats {
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:36px;
  border:1px solid var(--line);border-radius:16px;background:rgba(13,22,37,.6);padding:18px 8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-page="network_lab"] .hero-stats > div {text-align:center;padding:6px;border-right:1px solid var(--line)}
html[data-page="network_lab"] .hero-stats > div:last-child {border-right:0}
html[data-page="network_lab"] .hero-stats strong {display:block;font-size:22px;font-weight:800;background:linear-gradient(135deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-page="network_lab"] .hero-stats small {font-size:9px;color:#75849a;letter-spacing:.1em;text-transform:uppercase;margin-top:2px;display:block}

/* ============== HERO ANIMATION ============== */
html[data-page="network_lab"] .hero,
html[data-page="network_lab"] .project-hero {position:relative;overflow:visible;z-index:1}
html[data-page="network_lab"] .hero::before,
html[data-page="network_lab"] .hero::after,
html[data-page="network_lab"] .project-hero::before,
html[data-page="network_lab"] .project-hero::after {
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  filter:blur(60px);z-index:-1;pointer-events:none;opacity:.85;
}
html[data-page="network_lab"] .hero::before,
html[data-page="network_lab"] .project-hero::before {
  top:-90px;left:-80px;background:radial-gradient(circle,rgba(56,200,239,.55),transparent 68%);
  animation:driftHero-network_lab 9s ease-in-out infinite;
}
html[data-page="network_lab"] .hero::after,
html[data-page="network_lab"] .project-hero::after {
  top:10px;right:-110px;background:radial-gradient(circle,rgba(82,229,155,.48),transparent 68%);
  animation:driftHero-network_lab 11s ease-in-out infinite reverse;
}
@keyframes driftHero-network_lab {
  0%,100% {transform:translate(0,0) scale(1)}
  50% {transform:translate(36px,-30px) scale(1.12)}
}
@keyframes fadeInUpHero-network_lab {
  from {opacity:0;transform:translateY(20px)}
  to {opacity:1;transform:translateY(0)}
}
html[data-page="network_lab"] .hero .eyebrow,
html[data-page="network_lab"] .project-hero .eyebrow {animation:fadeInUpHero-network_lab .65s ease-out both}
html[data-page="network_lab"] .hero h1,
html[data-page="network_lab"] .project-hero h1 {animation:fadeInUpHero-network_lab .7s ease-out .08s both}
html[data-page="network_lab"] .hero .lead,
html[data-page="network_lab"] .project-hero .lead {animation:fadeInUpHero-network_lab .7s ease-out .16s both}
html[data-page="network_lab"] .hero-actions {animation:fadeInUpHero-network_lab .7s ease-out .24s both}
html[data-page="network_lab"] .hero-stats {animation:fadeInUpHero-network_lab .7s ease-out .32s both}
html[data-page="network_lab"] .project-hero .project-stats-row {animation:fadeInUpHero-network_lab .7s ease-out .24s both}
html[data-page="network_lab"] .project-hero .tags {animation:fadeInUpHero-network_lab .7s ease-out .32s both}

/* Typewriter row */
html[data-page="network_lab"] .type-row {margin:14px 0 0;font-size:15px;color:#aab5c7;min-height:1.6em;font-weight:500}
html[data-page="network_lab"] .type-text {color:var(--cyan);font-weight:700}
html[data-page="network_lab"] .cursor {animation:blink-network_lab 1s infinite;color:#fff;margin-left:2px}
@keyframes blink-network_lab {0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce) {
  html[data-page="network_lab"] .hero::before,
  html[data-page="network_lab"] .hero::after,
  html[data-page="network_lab"] .project-hero::before,
  html[data-page="network_lab"] .project-hero::after,
  html[data-page="network_lab"] h1 b,
  html[data-page="network_lab"] .cursor {animation:none}
  html[data-page="network_lab"] .hero .eyebrow, html[data-page="network_lab"] .hero h1, html[data-page="network_lab"] .hero .lead,
  html[data-page="network_lab"] .hero-actions, html[data-page="network_lab"] .hero-stats,
  html[data-page="network_lab"] .project-hero .eyebrow, html[data-page="network_lab"] .project-hero h1,
  html[data-page="network_lab"] .project-hero .lead, html[data-page="network_lab"] .project-hero .project-stats-row,
  html[data-page="network_lab"] .project-hero .tags {animation:none;opacity:1;transform:none}
}

/* ============== HERO CARD (doc-style) ============== */
html[data-page="network_lab"] .hero {max-width:none}
html[data-page="network_lab"] .hero-grid {
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;
}
html[data-page="network_lab"] .hero-card,
html[data-page="network_lab"] .side-card {
  position:relative;border-radius:32px;overflow:hidden;border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(56,200,239,.14), transparent 30%),
    radial-gradient(circle at bottom left, rgba(82,229,155,.12), transparent 28%),
    linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,12,20,.92));
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
html[data-page="network_lab"] .hero-card {padding:34px}
html[data-page="network_lab"] .hero-card::before,
html[data-page="network_lab"] .hero-card::after {
  content:"";position:absolute;border-radius:999px;pointer-events:none;filter:blur(18px);opacity:.55;
}
html[data-page="network_lab"] .hero-card::before {
  width:240px;height:240px;background:rgba(56,200,239,.14);top:-70px;right:-40px;
  animation:driftCard-network_lab 10s ease-in-out infinite;
}
html[data-page="network_lab"] .hero-card::after {
  width:180px;height:180px;background:rgba(82,229,155,.12);bottom:-55px;left:-30px;
  animation:driftCard-network_lab 12s ease-in-out infinite reverse;
}
@keyframes driftCard-network_lab {
  0%,100% {transform:translate(0,0)}
  50% {transform:translate(30px,-30px)}
}
html[data-page="network_lab"] .side-card {
  padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:100%;
}
html[data-page="network_lab"] .side-card h3 {margin:0 0 16px;font-size:1.05rem;font-weight:700;color:#fff}
html[data-page="network_lab"] .quick-stats {display:grid;grid-template-columns:1fr 1fr;gap:12px}
html[data-page="network_lab"] .quick-stat {
  padding:14px;border-radius:14px;background:rgba(56,200,239,.08);border:1px solid var(--line);text-align:center;
}
html[data-page="network_lab"] .quick-stat strong {
  display:block;font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-page="network_lab"] .quick-stat small {font-size:9px;color:#75849a;letter-spacing:.08em;text-transform:uppercase;margin-top:4px;display:block}
html[data-page="network_lab"] .side-note {color:var(--muted-2);font-size:.85rem;margin-top:20px;line-height:1.6}

/* Reduce hero title size to fit inside the card, doc-style */
html[data-page="network_lab"] .hero-card h1 {
  font-size:clamp(36px,5vw,58px);white-space:normal;margin:20px 0 20px;
}
html[data-page="network_lab"] .hero-card .eyebrow {margin-bottom:4px}
html[data-page="network_lab"] .project-hero-card h1 {
  font-size:clamp(30px,4.5vw,52px)!important;white-space:normal;
}

@media (max-width:768px) {
  html[data-page="network_lab"] .hero-grid {grid-template-columns:1fr}
  html[data-page="network_lab"] .hero-card {padding:24px}
  html[data-page="network_lab"] .side-card {min-height:auto}
}

/* ============== SECTIONS ============== */
html[data-page="network_lab"] .section {margin-top:80px}
html[data-page="network_lab"] .section-heading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
html[data-page="network_lab"] .section-heading h2 {font-size:clamp(24px,3vw,30px);letter-spacing:-.04em;margin:8px 0 0;font-weight:800;color:#fff}
html[data-page="network_lab"] .section-sub {color:#7d8ca2;margin:6px 0 0;font-size:13px;line-height:1.7;max-width:680px}
html[data-page="network_lab"] .count {font-size:10px;color:#69788e;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(15,23,35,.5)}

/* ============== PROJECTS GRID (index) ============== */
html[data-page="network_lab"] .projects-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;
}
html[data-page="network_lab"] .project-tile {
  position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;background:linear-gradient(145deg,rgba(19,33,52,.78),rgba(7,13,24,.92));
  transition:.3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  cursor:pointer;
}
html[data-page="network_lab"] .project-tile:hover {transform:translateY(-6px);border-color:rgba(75,225,176,.35);box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(75,225,176,.15) inset}
html[data-page="network_lab"] .project-tile-cover {
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a121e;
  border-bottom:1px solid var(--line);
}
html[data-page="network_lab"] .project-tile-cover img {width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
html[data-page="network_lab"] .project-tile:hover .project-tile-cover img {transform:scale(1.05)}
html[data-page="network_lab"] .project-tile-cover::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
html[data-page="network_lab"] .project-tile-num {
  position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;
  color:#03100b;background:linear-gradient(135deg,var(--green),var(--cyan));
  padding:5px 10px;border-radius:8px;letter-spacing:.1em;z-index:2;
}
html[data-page="network_lab"] .project-tile-count {
  position:absolute;top:12px;right:12px;font-size:9px;font-weight:600;
  color:#e8edf7;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  padding:5px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.10);z-index:2;
}
html[data-page="network_lab"] .project-tile-body {padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
html[data-page="network_lab"] .project-tile-body h3 {font-size:20px;line-height:1.2;letter-spacing:-.03em;margin:0;font-weight:800;color:#fff}
html[data-page="network_lab"] .project-tile-body p {color:#9daabd;font-size:13px;line-height:1.75;margin:0}
html[data-page="network_lab"] .project-tile-tags {display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
html[data-page="network_lab"] .project-tile-tags span {
  padding:5px 9px;font-size:9px;font-weight:600;color:#a8b8d0;
  background:rgba(56,200,239,.06);border:1px solid rgba(56,200,239,.18);border-radius:7px;
  letter-spacing:.04em;
}
html[data-page="network_lab"] .project-tile-cta {
  margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);font-size:11px;color:#9aa6b8;font-weight:600;
}
html[data-page="network_lab"] .project-tile-cta .arrow {color:var(--green);font-size:16px;transition:transform .2s ease}
html[data-page="network_lab"] .project-tile:hover .project-tile-cta .arrow {transform:translateX(4px)}

/* ============== TOOL GRID ============== */
html[data-page="network_lab"] .tool-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
html[data-page="network_lab"] .tool-card {
  position:relative;display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--line);border-radius:16px;
  background:rgba(15,24,39,.62);transition:.2s;color:var(--text);text-decoration:none;
}
html[data-page="network_lab"] .tool-card:hover {transform:translateY(-3px);background:rgba(22,34,53,.85);border-color:rgba(75,225,176,.40);box-shadow:0 12px 30px rgba(0,0,0,.28)}
html[data-page="network_lab"] .tool-card::after {
  content:"→";position:absolute;top:14px;right:16px;font-size:14px;color:#75849a;
  opacity:0;transform:translateX(-4px);transition:.2s;
}
html[data-page="network_lab"] .tool-card:hover::after {opacity:1;transform:translateX(0);color:var(--green)}
html[data-page="network_lab"] .tool-icon {
  width:46px;height:46px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(145deg,rgba(82,229,155,.18),rgba(56,200,239,.10));
  border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--green);
  letter-spacing:.04em;flex:0 0 auto;
}
html[data-page="network_lab"] .tool-card h3 {font-size:13px;margin:0 0 5px;color:#fff;font-weight:700}
html[data-page="network_lab"] .tool-card p {font-size:11px;color:#75849a;margin:0;line-height:1.5}
html[data-page="network_lab"] .tool-card small {font-size:9px;color:var(--cyan);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;display:block}

/* ============== DOWNLOAD GRID ============== */
html[data-page="network_lab"] .download-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}
html[data-page="network_lab"] .download-card {
  position:relative;display:flex;align-items:center;gap:16px;padding:22px;border:1px solid var(--line);
  border-radius:18px;background:linear-gradient(145deg,rgba(16,27,43,.78),rgba(8,14,25,.82));transition:.25s;
  overflow:hidden;
}
html[data-page="network_lab"] .download-card:hover {transform:translateY(-3px);border-color:rgba(60,208,171,.35);box-shadow:0 16px 40px rgba(0,0,0,.30)}
html[data-page="network_lab"] .download-card::before {
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(82,229,155,.08),transparent);
  opacity:0;transition:.25s;pointer-events:none;
}
html[data-page="network_lab"] .download-card:hover::before {opacity:1}
html[data-page="network_lab"] .file-type {
  font-size:11px;font-weight:800;color:var(--cyan);padding:13px 11px;border-radius:11px;
  background:rgba(50,190,235,.10);border:1px solid rgba(50,190,235,.18);letter-spacing:.04em;flex:0 0 auto;
}
html[data-page="network_lab"] .file-type.doc {color:var(--green);background:rgba(70,224,153,.08);border-color:rgba(70,224,153,.18)}
html[data-page="network_lab"] .file-type.pkt {color:var(--violet);background:rgba(167,139,250,.10);border-color:rgba(167,139,250,.20)}
html[data-page="network_lab"] .download-card h3 {font-size:14px;margin:0 0 6px;color:#fff;font-weight:700}
html[data-page="network_lab"] .download-card p {font-size:11px;color:#77869b;margin:0;line-height:1.6}
html[data-page="network_lab"] .download-card .arrow {margin-left:auto;color:#9aa6b8;font-size:20px;transition:transform .2s ease}
html[data-page="network_lab"] .download-card:hover .arrow {transform:translate(2px,-2px);color:var(--green)}

/* ============== PROJECT PAGE ============== */
html[data-page="network_lab"] .page-project main {padding-top:36px}
html[data-page="network_lab"] .breadcrumb {display:flex;align-items:center;gap:8px;font-size:12px;color:#75849a;margin-bottom:24px}
html[data-page="network_lab"] .breadcrumb a {color:var(--cyan);font-weight:500}
html[data-page="network_lab"] .breadcrumb a:hover {color:#fff}
html[data-page="network_lab"] .breadcrumb .sep {opacity:.5}

html[data-page="network_lab"] .project-hero {max-width:880px;margin-bottom:60px}
html[data-page="network_lab"] .project-hero h1 {font-size:clamp(36px,5.5vw,64px);margin:18px 0 18px;line-height:1;letter-spacing:-.04em}
html[data-page="network_lab"] .project-hero .lead {font-size:15px}
html[data-page="network_lab"] .project-stats-row {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:30px;
  border:1px solid var(--line);border-radius:16px;background:rgba(13,22,37,.6);padding:16px;
}
html[data-page="network_lab"] .project-stats-row > div {text-align:center;padding:8px;border-right:1px solid var(--line)}
html[data-page="network_lab"] .project-stats-row > div:last-child {border-right:0}
html[data-page="network_lab"] .project-stats-row strong {display:block;font-size:18px;font-weight:800;background:linear-gradient(135deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-page="network_lab"] .project-stats-row small {font-size:9px;color:#75849a;letter-spacing:.1em;text-transform:uppercase;margin-top:2px;display:block}

html[data-page="network_lab"] .tags {display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
html[data-page="network_lab"] .tags span {padding:7px 10px;font-size:10px;font-weight:600;color:#a8b8d0;background:rgba(56,200,239,.06);border:1px solid rgba(56,200,239,.18);border-radius:8px;letter-spacing:.04em}

/* Cover / hero image */
html[data-page="network_lab"] .cover-frame {
  position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:#0a121e;box-shadow:0 20px 60px rgba(0,0,0,.30);
}
html[data-page="network_lab"] .cover-frame img {width:100%;height:auto;max-height:560px;object-fit:cover;object-position:center;display:block}
html[data-page="network_lab"] .cover-caption {
  display:flex;align-items:center;gap:8px;padding:12px 18px;background:rgba(0,0,0,.4);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);color:#aab5c7;font-size:11px;letter-spacing:.04em;
}
html[data-page="network_lab"] .cover-caption .dot {width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

/* Gallery */
html[data-page="network_lab"] .gallery-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;
}
html[data-page="network_lab"] .gallery-item {
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;border:1px solid var(--line);
  background:#0a121e;cursor:zoom-in;transition:.2s;
}
html[data-page="network_lab"] .gallery-item:hover {transform:translateY(-3px);border-color:rgba(75,225,176,.30);box-shadow:0 12px 30px rgba(0,0,0,.30)}
html[data-page="network_lab"] .gallery-item img {width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s ease}
html[data-page="network_lab"] .gallery-item:hover img {transform:scale(1.06)}
html[data-page="network_lab"] .gallery-item .gallery-num {
  position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;
  color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.10);
}

/* "More projects" grid */
html[data-page="network_lab"] .more-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
html[data-page="network_lab"] .more-card {
  display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:16px;
  background:rgba(15,24,39,.6);transition:.2s;cursor:pointer;
}
html[data-page="network_lab"] .more-card:hover {transform:translateX(4px);border-color:rgba(75,225,176,.30);background:rgba(22,34,53,.85)}
html[data-page="network_lab"] .more-card img {width:80px;height:60px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex:0 0 auto}
html[data-page="network_lab"] .more-card h3 {font-size:14px;margin:0 0 4px;color:#fff;font-weight:700}
html[data-page="network_lab"] .more-card small {font-size:10px;color:#75849a}
html[data-page="network_lab"] .more-card .arrow {margin-left:auto;color:var(--green);font-size:20px}

/* ============== LIGHTBOX ============== */
html[data-page="network_lab"] .lightbox {
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);backdrop-filter:blur(20px);
  display:none;align-items:center;justify-content:center;padding:40px 60px;
}
html[data-page="network_lab"] .lightbox.open {display:flex;animation:lbFade .25s ease}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
html[data-page="network_lab"] .lightbox-frame {
  position:relative;max-width:min(1200px,90vw);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:14px;margin:0
}
html[data-page="network_lab"] .lightbox-frame img {
  max-width:100%;max-height:80vh;object-fit:contain;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.50);
}
html[data-page="network_lab"] #lightboxCaption {color:#aab5c7;font-size:13px;text-align:center;max-width:600px;line-height:1.6}
html[data-page="network_lab"] .lightbox-close, html[data-page="network_lab"] .lightbox-prev, html[data-page="network_lab"] .lightbox-next {
  position:absolute;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);
  background:rgba(15,23,35,.85);backdrop-filter:blur(10px);color:#fff;font-size:24px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;font-family:inherit;line-height:1;
}
html[data-page="network_lab"] .lightbox-close:hover, html[data-page="network_lab"] .lightbox-prev:hover, html[data-page="network_lab"] .lightbox-next:hover {background:rgba(82,229,155,.20);border-color:rgba(75,225,176,.50);transform:scale(1.05)}
html[data-page="network_lab"] .lightbox-close {top:30px;right:30px}
html[data-page="network_lab"] .lightbox-prev {left:30px;top:50%;transform:translateY(-50%)}
html[data-page="network_lab"] .lightbox-prev:hover {transform:translateY(-50%) scale(1.05)}
html[data-page="network_lab"] .lightbox-next {right:30px;top:50%;transform:translateY(-50%)}
html[data-page="network_lab"] .lightbox-next:hover {transform:translateY(-50%) scale(1.05)}

/* ============== FOOTER ============== */
html[data-page="network_lab"] .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 36px;text-align:left;position:relative;z-index:1;}
html[data-page="network_lab"] .footer-col {display:flex;flex-direction:column;gap:10px;}
html[data-page="network_lab"] .footer-col h5 {margin:0 0 6px;font-size:.92rem;color:#fff;}
html[data-page="network_lab"] .footer-col a {color:var(--muted);font-size:.88rem;text-decoration:none;transition:color .2s ease;}
html[data-page="network_lab"] .footer-col a:hover {color:var(--cyan);}
html[data-page="network_lab"] .footer-name {display:block;font-size:1rem;font-weight:700;color:#fff;}
html[data-page="network_lab"] .footer-role {display:block;margin-top:2px;font-size:.82rem;color:var(--muted);}
html[data-page="network_lab"] .footer-tagline {margin:10px 0 0;font-size:.85rem;color:var(--muted);line-height:1.6;max-width:32ch;}
html[data-page="network_lab"] .footer-bottom-row {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);}
html[data-page="network_lab"] .footer-links {display:flex;gap:16px;flex-wrap:wrap;}
html[data-page="network_lab"] .footer-bottom {font-size:0.85rem;color:var(--muted);}
@media (max-width:820px) {
  html[data-page="network_lab"] .footer-grid {grid-template-columns:1fr 1fr;padding:40px 0 24px;}
  html[data-page="network_lab"] .footer-bottom-row {justify-content:center;text-align:center;}
}
@media (max-width:520px) {
  html[data-page="network_lab"] .footer-grid {grid-template-columns:1fr 1fr;}
}

/* ============== SCROLLBAR ============== */
html[data-page="network_lab"] ::-webkit-scrollbar {width:8px;height:8px}
html[data-page="network_lab"] ::-webkit-scrollbar-track {background:#06101d}
html[data-page="network_lab"] ::-webkit-scrollbar-thumb {background:rgba(82,229,155,.20);border-radius:4px}
html[data-page="network_lab"] ::-webkit-scrollbar-thumb:hover {background:rgba(82,229,155,.35)}

/* ============== PICKER MODAL ============== */
html[data-page="network_lab"] .picker {
  position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.88);backdrop-filter:blur(18px);
  display:none;align-items:center;justify-content:center;padding:32px;
}
html[data-page="network_lab"] .picker.open {display:flex;animation:lbFade .25s ease}
html[data-page="network_lab"] .picker-frame {
  position:relative;max-width:560px;width:100%;padding:38px 36px;border:1px solid var(--line);
  border-radius:22px;background:linear-gradient(145deg,rgba(19,33,52,.92),rgba(7,13,24,.95));
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
html[data-page="network_lab"] .picker-frame .kicker {font-size:10px;letter-spacing:.14em;color:var(--green);font-weight:700;display:block;margin-bottom:10px}
html[data-page="network_lab"] .picker-frame h3 {font-size:22px;margin:0 0 8px;color:#fff;font-weight:800;letter-spacing:-.02em}
html[data-page="network_lab"] .picker-sub {font-size:13px;color:#9aa6b8;margin:0 0 22px;line-height:1.6}
html[data-page="network_lab"] .picker-close {
  position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:rgba(15,23,35,.85);color:#fff;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;font-family:inherit;line-height:1;
}
html[data-page="network_lab"] .picker-close:hover {background:rgba(82,229,155,.20);border-color:rgba(75,225,176,.50);transform:scale(1.05)}
html[data-page="network_lab"] .picker-list {display:flex;flex-direction:column;gap:10px}
html[data-page="network_lab"] .picker-item {
  display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
  background:rgba(15,24,39,.62);transition:.2s;color:var(--text);text-decoration:none;
}
html[data-page="network_lab"] .picker-item:hover {transform:translateX(4px);border-color:rgba(75,225,176,.40);background:rgba(22,34,53,.85)}
html[data-page="network_lab"] .picker-item-num {
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  color:#03100b;font-size:13px;font-weight:900;letter-spacing:.04em;flex:0 0 auto;
}
html[data-page="network_lab"] .picker-item-body {flex:1;min-width:0}
html[data-page="network_lab"] .picker-item-title {font-size:14px;color:#fff;font-weight:700;margin:0 0 3px;line-height:1.3}
html[data-page="network_lab"] .picker-item-sub {font-size:11px;color:#75849a;margin:0;line-height:1.5}
html[data-page="network_lab"] .picker-item .arrow {color:#9aa6b8;font-size:18px;transition:transform .2s ease,color .2s ease}
html[data-page="network_lab"] .picker-item:hover .arrow {transform:translateX(3px);color:var(--green)}
html[data-page="network_lab"] .picker-item.is-current {border-color:rgba(75,225,176,.45);background:rgba(75,225,176,.08)}
html[data-page="network_lab"] .picker-item-badge {
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9aa6b8;
  flex:0 0 auto;padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:rgba(15,23,35,.5);
}
html[data-page="network_lab"] .picker-item.is-current .picker-item-badge {color:var(--green);border-color:rgba(75,225,176,.40);background:rgba(75,225,176,.10)}

/* ============== TOAST NOTIFICATIONS ============== */
html[data-page="network_lab"] .toast-container {
  position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;pointer-events:none;
  max-width:calc(100vw - 40px);
}
html[data-page="network_lab"] .toast {
  padding:14px 18px;border-radius:14px;background:var(--card2);border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.35);color:var(--text);font-size:13px;line-height:1.5;max-width:360px;
  transform:translateX(120%);transition:transform .4s cubic-bezier(.16,1,.3,1);pointer-events:auto;
  display:flex;align-items:center;gap:10px;
}
html[data-page="network_lab"] .toast.show {transform:translateX(0)}
html[data-page="network_lab"] .toast.info {border-color:rgba(56,200,239,.35);background:rgba(56,200,239,.10)}
html[data-page="network_lab"] .toast.success {border-color:rgba(75,225,176,.35);background:rgba(75,225,176,.10)}
html[data-page="network_lab"] .toast.error {border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
html[data-page="network_lab"] .toast-icon {flex:0 0 auto;font-size:16px;line-height:1}
html[data-page="network_lab"] .toast-msg {flex:1;min-width:0}
@media(max-width:640px){
  html[data-page="network_lab"] .toast-container {top:auto;bottom:16px;right:12px;left:12px;max-width:none}
  html[data-page="network_lab"] .toast {max-width:none;transform:translateY(120%)}
  html[data-page="network_lab"] .toast.show {transform:translateY(0)}
}

/* ============== RESPONSIVE ============== */
@media(max-width:920px) {
  nav{display:none}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .download-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:6px}
  .hero-stats > div{border-right:0}
  .hero-stats > div:nth-child(odd){border-right:1px solid var(--line)}
  .picker{padding:18px}
  .picker-frame{padding:30px 24px}
}
@media(max-width:640px){
  html[data-page="network_lab"] .topbar-inner {padding:10px 0}
  html[data-page="network_lab"] .brand-text h1 {font-size:.92rem}
  html[data-page="network_lab"] .brand-text small {font-size:9px}
  html[data-page="network_lab"] main {padding:20px 16px 60px}
  html[data-page="network_lab"] .hero {margin-bottom:50px}
  html[data-page="network_lab"] .hero h1 {font-size:44px; line-height:1.05; padding-bottom:10px}
  html[data-page="network_lab"] .section {margin-top:48px}
  html[data-page="network_lab"] .section-heading {gap:10px}
  html[data-page="network_lab"] .project-hero h1 {font-size:32px}
  html[data-page="network_lab"] .project-hero .lead {font-size:14px}
  html[data-page="network_lab"] .projects-grid {grid-template-columns:1fr;gap:14px}
  html[data-page="network_lab"] .project-tile-body {padding:18px}
  html[data-page="network_lab"] .tool-grid {grid-template-columns:repeat(2,1fr);gap:10px}
  html[data-page="network_lab"] .tool-card {padding:14px;gap:10px}
  html[data-page="network_lab"] .tool-card h3 {font-size:13px}
  html[data-page="network_lab"] .tool-card p {font-size:11px}
  html[data-page="network_lab"] .download-grid {grid-template-columns:1fr;gap:10px}
  html[data-page="network_lab"] .download-card {padding:16px;gap:12px}
  html[data-page="network_lab"] .gallery-grid {grid-template-columns:repeat(2,1fr);gap:8px}
  html[data-page="network_lab"] .cover-frame img {max-height:280px}
  html[data-page="network_lab"] .project-stats-row {grid-template-columns:repeat(2,1fr)}
  html[data-page="network_lab"] .lightbox {padding:14px}
  html[data-page="network_lab"] .lightbox-prev {left:8px;width:40px;height:40px;font-size:18px}
  html[data-page="network_lab"] .lightbox-next {right:8px;width:40px;height:40px;font-size:18px}
  html[data-page="network_lab"] .lightbox-close {top:8px;right:8px;width:40px;height:40px;font-size:20px}
  html[data-page="network_lab"] .hero-stats {padding:12px 4px}
  html[data-page="network_lab"] .hero-stats strong {font-size:18px}
  html[data-page="network_lab"] .project-stats-row {padding:10px}
  html[data-page="network_lab"] .project-stats-row strong {font-size:15px}
  html[data-page="network_lab"] .more-grid {grid-template-columns:1fr}
  html[data-page="network_lab"] .more-card {padding:14px}
  html[data-page="network_lab"] .more-card img {width:60px;height:50px}
}
@media(max-width:420px){
  html[data-page="network_lab"] .tool-grid {grid-template-columns:1fr}
  html[data-page="network_lab"] .hero-stats {grid-template-columns:repeat(2,1fr)}
  html[data-page="network_lab"] .gallery-grid {grid-template-columns:1fr}
  html[data-page="network_lab"] .hero h1 {font-size:38px; line-height:1.05; padding-bottom:10px}
  html[data-page="network_lab"] .cover-frame img {max-height:220px}
  html[data-page="network_lab"] .hero-actions .btn {flex:1;justify-content:center}
}


/* ============================================================
   Scoped styles for index / doc / ai / linux / netsec / python
   ============================================================ */

/* ==================== AI PAGE ==================== */
html[data-page="ai"] {
      --bg: #060913; --bg-1: #0b0f1a; --bg-2: #0f1525; --bg-card: rgba(15,21,37,.72);
      --line: rgba(148,163,184,.14); --text: #e5e7eb; --text-dim: #94a3b8; --text-bright: #f1f5f9;
      --accent: #38bdf8; --accent-2: #22c55e; --accent-3: #a78bfa;
      --shadow: 0 20px 60px rgba(0,0,0,.42); --radius: 26px; --radius-sm: 18px;
      --max: 1320px; --sidebar-width: 300px; --topbar-h: 76px;
      --code-keyword: #ff79c6; --code-string: #f1fa8c; --code-comment: #6272a4;
      --code-function: #50fa7b; --code-number: #bd93f9; --code-variable: #8be9fd; --code-operator: #ff79c6;
    }
html[data-page="ai"] *, html[data-page="ai"] *::before, html[data-page="ai"] *::after { box-sizing: border-box; }
html[data-page="ai"] :where(*:not(.global-header):not(.global-header *)), html[data-page="ai"] *::before, html[data-page="ai"] *::after { margin: 0; padding: 0; }
html[data-page="ai"] { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
html[data-page="ai"] body {
      margin: 0; max-width: 100vw;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      background: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(56,189,248,.10), transparent),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(167,139,250,.08), transparent),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(34,197,94,.06), transparent),
        linear-gradient(180deg, var(--bg), var(--bg-1) 40%, #04060b 100%);
      background-attachment: fixed; color: var(--text); min-height: 100vh;
    }
html[data-page="ai"] a { color: inherit; text-decoration: none; }
html[data-page="ai"] .wrap { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
html[data-page="ai"] ::-webkit-scrollbar { width: 8px; }
html[data-page="ai"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-page="ai"] ::-webkit-scrollbar-thumb { background: rgba(56,189,248,.2); border-radius: 4px; }
html[data-page="ai"] ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.35); }
html[data-page="ai"] .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(6,9,19,.85); backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-page="ai"] .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; }
html[data-page="ai"] .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
html[data-page="ai"] .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3)); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 12px 30px rgba(0,0,0,.35); overflow: hidden; flex: 0 0 auto; cursor: pointer; transition: transform .3s ease; }
html[data-page="ai"] .avatar:hover { transform: scale(1.1); }
html[data-page="ai"] .avatar span { font-weight: 800; color: #fff; letter-spacing: .5px; font-size: 1.1rem; }
html[data-page="ai"] .brand-text h1 { margin: 0; font-size: 1.05rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--text-bright); }
html[data-page="ai"] .brand-text small { display: block; margin-top: 3px; color: var(--text-dim); font-size: .82rem; font-weight: 500; }
html[data-page="ai"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: .9rem; transition: all .25s cubic-bezier(.4,0,.2,1); cursor: pointer; font-family: inherit; white-space: nowrap; }
html[data-page="ai"] .btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
html[data-page="ai"] .btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #07111c; border-color: transparent; box-shadow: 0 14px 30px rgba(34,197,94,.18); }
html[data-page="ai"] .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 18px 40px rgba(34,197,94,.25); }
html[data-page="ai"] .btn.back-btn { padding: 10px 16px; font-size: .88rem; background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.2); color: var(--accent); }
html[data-page="ai"] .btn.back-btn:hover { background: rgba(56,189,248,.15); transform: translateX(4px); border-color: rgba(56,189,248,.35); }
html[data-page="ai"] .search-container { position: relative; max-width: 400px; width: 100%; }
html[data-page="ai"] .search-input { width: 100%; padding: 10px 44px 10px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); font-family: inherit; font-size: .9rem; transition: all .25s ease; outline: none; }
html[data-page="ai"] .search-input:focus { border-color: var(--accent); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(56,189,248,.1); }
html[data-page="ai"] .search-input::placeholder { color: var(--text-dim); }
html[data-page="ai"] .doc-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
html[data-page="ai"] .search-results { position: absolute; top: calc(100% + 8px); left: 0; background: #0f1525; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-height: 400px; overflow-y: auto; z-index: 200; display: none; }
html[data-page="ai"] .search-results.active { display: block; }
html[data-page="ai"] .search-result-item { padding: 12px 16px; cursor: pointer; transition: background .2s ease; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
html[data-page="ai"] .search-result-item:last-child { border-bottom: none; }
html[data-page="ai"] .search-result-item:hover { background: rgba(56,189,248,.08); }
html[data-page="ai"] .search-result-item .result-title { font-weight: 600; color: var(--text-bright); font-size: .9rem; }
html[data-page="ai"] .search-result-item .result-desc { font-size: .8rem; color: var(--text-dim); }
html[data-page="ai"] .main-layout { display: flex; min-height: calc(100vh - var(--topbar-h)); margin-top: var(--topbar-h); }
html[data-page="ai"] .sidebar { width: var(--sidebar-width); position: fixed; left: 0; top: var(--topbar-h); bottom: 0; background: rgba(6,9,19,.92); backdrop-filter: blur(20px); border-right: 1px solid var(--line); overflow-y: auto; z-index: 50; padding: 20px 0; transition: transform .3s ease; }
html[data-page="ai"] .sidebar-toggle { display: none; position: fixed; bottom: 24px; left: 24px; z-index: 60; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #07111c; font-size: 1.3rem; cursor: pointer; box-shadow: 0 8px 30px rgba(56,189,248,.3); transition: transform .3s ease; align-items: center; justify-content: center; }
html[data-page="ai"] .sidebar-toggle:hover { transform: scale(1.1); }
html[data-page="ai"] .scroll-top-btn { position: fixed; bottom: 24px; right: 24px; z-index: 61; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-3), var(--accent)); border: none; color: #07111c; font-size: 1.2rem; cursor: pointer; box-shadow: 0 8px 30px rgba(167,139,250,.3); transition: all .3s cubic-bezier(.4,0,.2,1); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); }
html[data-page="ai"] .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
html[data-page="ai"] .scroll-top-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 12px 40px rgba(167,139,250,.4); }
html[data-page="ai"] .scroll-top-btn:active { transform: scale(0.95); }
html[data-page="ai"] .sidebar-section { margin-bottom: 8px; }
html[data-page="ai"] .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; cursor: pointer; font-weight: 700; color: var(--text-bright); font-size: .92rem; transition: background .2s ease; user-select: none; }
html[data-page="ai"] .sidebar-header:hover { background: rgba(255,255,255,.03); }
html[data-page="ai"] .sidebar-header .chevron { transition: transform .3s ease; font-size: .8rem; }
html[data-page="ai"] .sidebar-header.collapsed .chevron { transform: rotate(-90deg); }
html[data-page="ai"] .sidebar-links { list-style: none; padding: 0; margin: 0; overflow: hidden; transition: max-height .3s ease; }
html[data-page="ai"] .sidebar-links.collapsed { max-height: 0 !important; }
html[data-page="ai"] .sidebar-links li a { display: block; padding: 8px 20px 8px 32px; color: var(--text-dim); font-size: .88rem; transition: all .2s ease; border-left: 2px solid transparent; }
html[data-page="ai"] .sidebar-links li a:hover { color: var(--accent); background: rgba(56,189,248,.05); border-left-color: var(--accent); padding-left: 36px; }
html[data-page="ai"] .sidebar-links li a.active { color: var(--accent); background: rgba(56,189,248,.08); border-left-color: var(--accent-2); font-weight: 600; }
html[data-page="ai"] .sidebar-progress { padding: 16px 20px; border-top: 1px solid var(--line); margin-top: 16px; }
html[data-page="ai"] .sidebar-progress-label { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-dim); margin-bottom: 8px; }
html[data-page="ai"] .sidebar-progress-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
html[data-page="ai"] .sidebar-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 3px; transition: width .5s ease; width: 0%; }
html[data-page="ai"] .main-content { margin-left: var(--sidebar-width); flex: 1; min-width: 0; padding: 32px 40px; max-width: calc(100% - var(--sidebar-width)); }
html[data-page="ai"] .hero { padding: 40px 0 24px; position: relative; }
html[data-page="ai"] .hero-card { position: relative; border-radius: 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 30%), radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 28%), linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,12,20,.92)); box-shadow: var(--shadow); padding: 40px; }
html[data-page="ai"] .hero-card::before, html[data-page="ai"] .hero-card::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; filter: blur(18px); opacity: .55; }
html[data-page="ai"] .hero-card::before { width: 240px; height: 240px; background: rgba(56,189,248,.12); top: -70px; right: -40px; animation: drift-ai 10s ease-in-out infinite; }
html[data-page="ai"] .hero-card::after { width: 180px; height: 180px; background: rgba(34,197,94,.10); bottom: -55px; left: -30px; animation: drift-ai 12s ease-in-out infinite reverse; }
html[data-page="ai"] .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: #dbe4ef; font-size: .88rem; font-weight: 500; margin-bottom: 18px; }
html[data-page="ai"] .eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 6px rgba(34,197,94,.12); animation: pulse-ai 2s ease-in-out infinite; }
html[data-page="ai"] .hero h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
html[data-page="ai"] .grad { background: linear-gradient(90deg, #fff, #b9eaff 30%, #7ff2a6 70%, #d1c3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-page="ai"] .hero p { margin: 18px 0 0; max-width: 66ch; color: #cbd5e1; line-height: 1.85; font-size: 1.05rem; }
html[data-page="ai"] .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
html[data-page="ai"] .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: .88rem; color: var(--text-dim); }
html[data-page="ai"] .breadcrumb a { color: var(--accent); transition: color .2s ease; }
html[data-page="ai"] .breadcrumb a:hover { color: var(--text-bright); }
html[data-page="ai"] .breadcrumb .sep { opacity: .5; }
html[data-page="ai"] .content-section { padding: 40px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 14px); }
html[data-page="ai"] .content-section:last-child { border-bottom: none; }
html[data-page="ai"] .content-section h2 { font-size: 2rem; margin-bottom: 8px; color: var(--text-bright); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
html[data-page="ai"] .content-section h2 .section-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #07111c; font-size: .9rem; font-weight: 800; flex-shrink: 0; }
html[data-page="ai"] .content-section .section-subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 32px; line-height: 1.6; }
html[data-page="ai"] .content-section h3 { font-size: 1.35rem; margin: 32px 0 16px; color: var(--accent); font-weight: 700; }
html[data-page="ai"] .content-section h4 { font-size: 1.1rem; margin: 24px 0 10px; color: var(--text-bright); font-weight: 600; }
html[data-page="ai"] .content-section p { color: var(--text-dim); line-height: 1.9; margin-bottom: 16px; font-size: .97rem; }
html[data-page="ai"] .content-section ul, html[data-page="ai"] .content-section ol { color: var(--text-dim); line-height: 1.9; margin: 12px 0 16px 20px; font-size: .97rem; padding-left: 20px; }
html[data-page="ai"] .content-section li { margin-bottom: 8px; }
html[data-page="ai"] .content-section a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
html[data-page="ai"] .content-section a:hover { border-bottom-color: var(--accent); }
html[data-page="ai"] .content-section code.inline { background: rgba(56,189,248,.12); color: var(--accent); padding: 2px 8px; border-radius: 6px; font-family: 'Fira Code', 'Courier New', monospace; font-size: .88em; font-weight: 500; direction: ltr; display: inline-block; }
html[data-page="ai"] .content-section strong { color: var(--text-bright); }
html[data-page="ai"] .code-container { position: relative; margin: 24px 0; border-radius: 16px; overflow: hidden; background: #0a0e1a; border: 1px solid rgba(56,189,248,.18); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
html[data-page="ai"] .code-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: rgba(56,189,248,.06); border-bottom: 1px solid rgba(56,189,248,.1); font-size: .85rem; color: var(--text-dim); font-weight: 500; direction: ltr; }
html[data-page="ai"] .code-header .lang-label { display: flex; align-items: center; gap: 8px; }
html[data-page="ai"] .code-header .lang-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px rgba(34,197,94,.4); }
html[data-page="ai"] .code-copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--accent); color: #07111c; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-family: inherit; transition: all .2s ease; font-size: .82rem; }
html[data-page="ai"] .code-copy:hover { filter: brightness(1.1); transform: scale(1.05); }
html[data-page="ai"] .code-copy:active { transform: scale(.95); }
html[data-page="ai"] .code-copy.copied { background: var(--accent-2); color: #07111c; }
html[data-page="ai"] .code-block { padding: 18px; overflow-x: auto; font-family: 'Fira Code', 'Courier New', monospace; font-size: .88rem; line-height: 1.8; background: #0a0e1a; color: #e5e7eb; direction: ltr; text-align: left; }
html[data-page="ai"] .code-block::-webkit-scrollbar { height: 6px; }
html[data-page="ai"] .code-block::-webkit-scrollbar-track { background: transparent; }
html[data-page="ai"] .code-block::-webkit-scrollbar-thumb { background: rgba(56,189,248,.3); border-radius: 3px; }
html[data-page="ai"] .kw { color: var(--code-keyword); font-weight: 700; }
html[data-page="ai"] .str { color: var(--code-string); }
html[data-page="ai"] .cmm { color: var(--code-comment); font-style: italic; }
html[data-page="ai"] .fn { color: var(--code-function); font-weight: 700; }
html[data-page="ai"] .num { color: var(--code-number); }
html[data-page="ai"] .var { color: var(--code-variable); }
html[data-page="ai"] .op { color: var(--code-operator); }
html[data-page="ai"] .dec { color: #8be9fd; }
html[data-page="ai"] .explanation { background: rgba(34,197,94,.08); border-left: 3px solid var(--accent-2); padding: 18px 20px; margin: 20px 0; border-radius: 12px; color: var(--text-bright); font-size: .95rem; line-height: 1.8; }
html[data-page="ai"] .explanation strong { color: var(--accent-2); }
html[data-page="ai"] .explanation.warning { background: rgba(251,191,36,.08); border-left-color: #fbbf24; }
html[data-page="ai"] .explanation.warning strong { color: #fbbf24; }
html[data-page="ai"] .explanation.info { background: rgba(56,189,248,.08); border-left-color: var(--accent); }
html[data-page="ai"] .explanation.info strong { color: var(--accent); }
html[data-page="ai"] .tip-box { background: rgba(167,139,250,.08); border-right: 3px solid var(--accent-3); padding: 16px 20px; margin: 16px 0; border-radius: 12px; color: var(--text-bright); font-size: .92rem; line-height: 1.7; }
html[data-page="ai"] .tip-box strong { color: var(--accent-3); }
html[data-page="ai"] .data-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
html[data-page="ai"] .data-table th, html[data-page="ai"] .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
html[data-page="ai"] .data-table th { background: rgba(56,189,248,.08); color: var(--accent); font-weight: 700; }
html[data-page="ai"] .data-table tr:hover { background: rgba(255,255,255,.02); }
html[data-page="ai"] .data-table td code { direction: ltr; }
html[data-page="ai"] .footer { margin-top: 60px; padding: 40px 0 32px; border-top: 1px solid var(--line); text-align: center; color: var(--text-dim); font-size: .88rem; }
html[data-page="ai"] .footer a { color: var(--accent); transition: color .2s ease; }
html[data-page="ai"] .footer a:hover { color: var(--text-bright); }
html[data-page="ai"] .footer-socials { display: flex; justify-content: center; gap: 16px; margin-bottom: 20px; }
html[data-page="ai"] .footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: all .25s ease; }
html[data-page="ai"] .footer-socials a:hover { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.25); transform: translateY(-3px); }
html[data-page="ai"] .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 36px; text-align: left; border-top: 1px solid var(--line); }
html[data-page="ai"] .footer-col { display: flex; flex-direction: column; gap: 10px; }
html[data-page="ai"] .footer-col h5 { margin: 0 0 6px; font-size: .92rem; color: var(--text-bright); }
html[data-page="ai"] .footer-col a { color: var(--text-dim); font-size: .88rem; text-decoration: none; transition: color .2s ease; }
html[data-page="ai"] .footer-col a:hover { color: var(--accent); }
.footer-photo { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; border: 1px solid rgba(56,189,248,.25); margin-bottom: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
html[data-page="ai"] .footer-name { display: block; font-size: 1rem; font-weight: 700; color: var(--text-bright); }
html[data-page="ai"] .footer-role { display: block; margin-top: 2px; font-size: .82rem; color: var(--text-dim); }
html[data-page="ai"] .footer-tagline { margin: 10px 0 0; font-size: .85rem; color: var(--text-dim); line-height: 1.6; max-width: 32ch; }
html[data-page="ai"] .footer-bottom-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
html[data-page="ai"] .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
html[data-page="ai"] .footer-bottom { font-size: .85rem; color: var(--text-dim); }
@media (max-width: 768px) {
  html[data-page="ai"] .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 0 24px; }
  html[data-page="ai"] .footer-bottom-row { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  html[data-page="ai"] .footer-grid { grid-template-columns: 1fr 1fr; }
  html[data-page="ai"] .footer-links { gap: 10px; }
}
html[data-page="ai"] .footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
html[data-page="ai"] .footer-links a { color: var(--text-dim); font-size: .85rem; transition: color .2s ease; }
html[data-page="ai"] .footer-links a:hover { color: var(--accent); }
@keyframes drift-ai { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(30px,-30px); } }
@keyframes pulse-ai { 0%, 100% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); } 50% { box-shadow: 0 0 0 10px rgba(34,197,94,.06); } }
@media (max-width: 1024px) {
html[data-page="ai"] .sidebar { transform: translateX(-100%); z-index: 110; }
html[data-page="ai"] .sidebar.open { transform: translateX(0); }
html[data-page="ai"] .sidebar-toggle { display: flex; bottom: 24px; left: 12px; width: 44px; height: 44px; }
html[data-page="ai"] .main-content { margin-left: 0; max-width: 100%; min-width: 0; width: 100%; padding: 24px; }
html[data-page="ai"] .search-container { max-width: 250px; }
}
@media (max-width: 768px) {
html[data-page="ai"] .hero-card { padding: 24px; }
html[data-page="ai"] .content-section h2 { font-size: 1.5rem; }
html[data-page="ai"] .content-section { padding: 28px 0; }
html[data-page="ai"] .topbar-inner { flex-wrap: wrap; }
html[data-page="ai"] .search-container { max-width: 100%; order: 3; margin-top: 8px; }
html[data-page="ai"] .data-table { font-size: .82rem; }
html[data-page="ai"] .data-table th, html[data-page="ai"] .data-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
html[data-page="ai"] .btn { padding: 10px 14px; font-size: .85rem; }
html[data-page="ai"] .brand { gap: 8px; }
html[data-page="ai"] .avatar { width: 40px; height: 40px; }
html[data-page="ai"] .avatar span { font-size: .95rem; }
html[data-page="ai"] .hero-card { padding: 20px; }
html[data-page="ai"] .main-content { padding: 16px; }
}

/* ==================== DOC PAGE ==================== */
.doc-page {
      --bg: #060913;
      --bg-1: #0b0f1a;
      --bg-2: #0f1525;
      --bg-card: rgba(15, 21, 37, .72);
      --bg-card-solid: #0f1525;
      --line: rgba(148, 163, 184, .14);
      --line-hover: rgba(148, 163, 184, .28);
      --text: #e5e7eb;
      --text-dim: #94a3b8;
      --text-bright: #f1f5f9;
      --accent: #38bdf8;
      --accent-2: #22c55e;
      --accent-3: #a78bfa;
      --accent-glow: rgba(56, 189, 248, .25);
      --shadow: 0 20px 60px rgba(0,0,0,.42);
      --radius: 26px;
      --radius-sm: 18px;
      --radius-xs: 12px;
      --max: 1180px;

      --code-keyword: #ff79c6;
      --code-string: #f1fa8c;
      --code-comment: #6272a4;
      --code-function: #50fa7b;
      --code-number: #bd93f9;
      --code-variable: #8be9fd;
      --code-operator: #ff79c6;
    }
.doc-page *, .doc-page *::before, .doc-page *::after { box-sizing: border-box; }
.doc-page :where(*:not(.global-header):not(.global-header *)), .doc-page *::before, .doc-page *::after { margin: 0; padding: 0; }
.doc-page { scroll-behavior: smooth; overflow-x: hidden; }
.doc-page body {
      margin: 0;
      font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(56,189,248,.10), transparent),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(167,139,250,.08), transparent),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(34,197,94,.06), transparent),
        linear-gradient(180deg, var(--bg), var(--bg-1) 40%, #04060b 100%);
      background-attachment: fixed;
      color: var(--text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
.doc-page a { color: inherit; text-decoration: none; }
.doc-page .wrap { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.doc-page /* ─── TOPBAR ─── */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(6, 9, 19, .72);
      backdrop-filter: blur(24px) saturate(1.4);
      -webkit-backdrop-filter: blur(24px) saturate(1.4);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
.doc-page .topbar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 14px 0;
    }
.doc-page .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
.doc-page .avatar {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
      display: grid; place-items: center;
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      overflow: hidden;
      flex: 0 0 auto;
      cursor: pointer;
      transition: transform .3s ease, box-shadow .3s ease;
    }
.doc-page .avatar:hover {
      transform: scale(1.1);
      box-shadow: 0 16px 40px rgba(56,189,248,.2);
    }
.doc-page .avatar span {
      font-weight: 800;
      color: #fff;
      letter-spacing: .5px;
      font-size: 1.1rem;
    }
.doc-page .brand-text h1 {
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 700;
      color: var(--text-bright);
    }
.doc-page .brand-text small {
      display: block;
      margin-top: 3px;
      color: var(--text-dim);
      font-size: .82rem;
      font-weight: 500;
    }
.doc-page .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 18px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-weight: 600;
      font-size: .9rem;
      transition: all .25s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
    }
.doc-page .btn:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.18);
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }
.doc-page .btn:active { transform: translateY(0) scale(.98); }
.doc-page .btn.primary {
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      color: #07111c;
      border-color: transparent;
      box-shadow: 0 14px 30px rgba(34,197,94,.18);
    }
.doc-page .btn.primary:hover {
      filter: brightness(1.08);
      box-shadow: 0 18px 40px rgba(34,197,94,.25);
    }
.doc-page .btn.back-btn {
      padding: 10px 16px;
      font-size: .88rem;
      background: rgba(56,189,248,.08);
      border-color: rgba(56,189,248,.2);
      color: var(--accent);
    }
.doc-page .btn.back-btn:hover {
      background: rgba(56,189,248,.15);
      transform: translateX(-4px);
      border-color: rgba(56,189,248,.35);
    }
.doc-page .btn.back-btn svg {
      transition: transform .25s ease;
    }
.doc-page .btn.back-btn:hover svg {
      transform: translateX(-3px);
    }
.doc-page /* ─── HERO ─── */
    .hero {
      padding: 54px 0 24px;
      position: relative;
    }
.doc-page .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 24px;
      align-items: stretch;
    }
.doc-page .hero-card, .doc-page .side-card {
      position: relative;
      border-radius: 32px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 28%),
        linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,12,20,.92));
      box-shadow: var(--shadow);
    }
.doc-page .hero-card {
      padding: 34px;
      transform-style: preserve-3d;
      transition: transform .15s ease;
    }
.doc-page .hero-card::before, .doc-page .hero-card::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(18px);
      opacity: .55;
    }
.doc-page .hero-card::before {
      width: 240px; height: 240px;
      background: rgba(56,189,248,.12);
      top: -70px; right: -40px;
      animation: drift-doc 10s ease-in-out infinite;
    }
.doc-page .hero-card::after {
      width: 180px; height: 180px;
      background: rgba(34,197,94,.10);
      bottom: -55px; left: -30px;
      animation: drift-doc 12s ease-in-out infinite reverse;
    }
.doc-page .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.05);
      color: #dbe4ef;
      font-size: .88rem;
      font-weight: 500;
      margin-bottom: 18px;
    }
.doc-page .eyebrow .dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: var(--accent-2);
      box-shadow: 0 0 0 6px rgba(34,197,94,.12);
      animation: pulse-doc 2s ease-in-out infinite;
    }
.doc-page .hero h2 {
      margin: 0;
      font-size: clamp(2.2rem, 4vw, 4.8rem);
      line-height: 1.03;
      letter-spacing: -.045em;
      font-weight: 800;
    }
.doc-page .grad {
      background: linear-gradient(90deg, #fff, #b9eaff 30%, #7ff2a6 70%, #d1c3ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
.doc-page .type-row {
      margin-top: 12px;
      font-size: 1.16rem;
      color: #dbe4ef;
      min-height: 1.7em;
      font-weight: 500;
    }
.doc-page .type-text { color: var(--accent); font-weight: 700; }
.doc-page .cursor { animation: blink-doc 1s infinite; color: #fff; margin-left: 2px; }
.doc-page .hero p {
      margin: 18px 0 0;
      max-width: 66ch;
      color: #cbd5e1;
      line-height: 1.85;
      font-size: 1.03rem;
    }
.doc-page .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }
.doc-page .side-card {
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
    }
.doc-page .skills-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }
.doc-page .skill-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
      border-radius: 12px;
      background: rgba(56,189,248,.1);
      border: 1px solid rgba(56,189,248,.2);
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-bright);
      transition: all .25s ease;
      cursor: default;
    }
.doc-page .skill-item:hover {
      background: rgba(56,189,248,.15);
      border-color: rgba(56,189,248,.35);
      transform: translateY(-2px);
    }
.doc-page .skill-item span:first-child {
      color: var(--accent-2);
      font-size: 1.2rem;
    }
.doc-page /* ─── MODULES GRID ─── */
    .modules-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      margin: 40px 0;
    }
.doc-page .module-card {
      position: relative;
      display: block;
      border-radius: 20px;
      padding: 30px;
      background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(34,197,94,.04));
      border: 1px solid rgba(56,189,248,.15);
      transition: all .35s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
      overflow: hidden;
    }
.doc-page .module-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(34,197,94,.08));
      opacity: 0;
      transition: opacity .35s ease;
      border-radius: inherit;
      pointer-events: none;
    }
.doc-page .module-card:hover {
      border-color: var(--accent);
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(56,189,248,.15);
    }
.doc-page .module-card:hover::before { opacity: 1; }
.doc-page .module-card > * { position: relative; z-index: 1; }
.doc-page .module-icon {
      font-size: 3rem;
      margin-bottom: 16px;
      display: block;
      transition: transform .3s ease;
    }
.doc-page .module-card:hover .module-icon {
      transform: scale(1.1) rotate(-5deg);
    }
.doc-page .module-title {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--accent);
      transition: color .3s ease;
    }
.doc-page .module-card:hover .module-title {
      color: var(--text-bright);
    }
.doc-page .module-desc {
      color: var(--text-dim);
      font-size: .95rem;
      line-height: 1.6;
      margin-bottom: 16px;
    }
.doc-page .module-topics {
      font-size: .82rem;
      color: var(--text-bright);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
.doc-page .module-topics span {
      background: rgba(56,189,248,.15);
      padding: 4px 10px;
      border-radius: 6px;
      font-weight: 500;
      transition: all .25s ease;
    }
.doc-page .module-card:hover .module-topics span {
      background: rgba(56,189,248,.25);
    }
.doc-page /* ─── CONTENT SECTIONS ─── */
    .content-section {
      padding: 48px 0;
      border-bottom: 1px solid var(--line);
    }
.doc-page .content-section:last-child { border-bottom: none; }
.doc-page .content-section h2 {
      font-size: 2.2rem;
      margin-bottom: 8px;
      color: var(--text-bright);
      font-weight: 800;
      letter-spacing: -.02em;
    }
.doc-page .content-section .section-subtitle {
      color: var(--text-dim);
      font-size: 1rem;
      margin-bottom: 32px;
      line-height: 1.6;
    }
.doc-page .content-section h3 {
      font-size: 1.4rem;
      margin: 32px 0 16px;
      color: var(--accent);
      font-weight: 700;
    }
.doc-page .content-section h4 {
      font-size: 1.1rem;
      margin: 24px 0 10px;
      color: var(--text-bright);
      font-weight: 600;
    }
.doc-page .content-section p {
      color: var(--text-dim);
      line-height: 1.8;
      margin-bottom: 16px;
      font-size: .97rem;
    }
.doc-page .content-section ul, .doc-page .content-section ol {
      color: var(--text-dim);
      line-height: 1.8;
      margin: 12px 0 16px 20px;
      font-size: .97rem;
    }
.doc-page .content-section li { margin-bottom: 6px; }
.doc-page .content-section a {
      color: var(--accent);
      border-bottom: 1px solid transparent;
      transition: border-color .2s ease;
    }
.doc-page .content-section a:hover {
      border-bottom-color: var(--accent);
    }
.doc-page .content-section code {
      background: rgba(56,189,248,.12);
      color: var(--accent);
      padding: 2px 8px;
      border-radius: 6px;
      font-family: 'Fira Code', 'Courier New', monospace;
      font-size: .88em;
      font-weight: 500;
    }
.doc-page /* ─── CODE BLOCKS ─── */
    .code-container {
      position: relative;
      margin: 24px 0;
      border-radius: 16px;
      overflow: hidden;
      background: #0a0e1a;
      border: 1px solid rgba(56,189,248,.18);
      box-shadow: 0 8px 32px rgba(0,0,0,.3);
    }
.doc-page .code-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      background: rgba(56,189,248,.06);
      border-bottom: 1px solid rgba(56,189,248,.1);
      font-size: .85rem;
      color: var(--text-dim);
      font-weight: 500;
    }
.doc-page .code-header .lang-label {
      display: flex;
      align-items: center;
      gap: 8px;
    }
.doc-page .code-header .lang-label::before {
      content: "";
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--accent-2);
      box-shadow: 0 0 8px rgba(34,197,94,.4);
    }
.doc-page .code-copy {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      background: var(--accent);
      color: #07111c;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      font-family: inherit;
      transition: all .2s ease;
      font-size: .82rem;
    }
.doc-page .code-copy:hover {
      filter: brightness(1.1);
      transform: scale(1.05);
    }
.doc-page .code-copy:active { transform: scale(.95); }
.doc-page .code-copy.copied {
      background: var(--accent-2);
      color: #07111c;
    }
.doc-page .code-block {
      padding: 18px;
      overflow-x: auto;
      font-family: 'Fira Code', 'Courier New', monospace;
      font-size: .88rem;
      line-height: 1.7;
      background: #0a0e1a;
      color: #e5e7eb;
    }
.doc-page .code-block::-webkit-scrollbar { height: 6px; }
.doc-page .code-block::-webkit-scrollbar-track { background: transparent; }
.doc-page .code-block::-webkit-scrollbar-thumb { background: rgba(56,189,248,.3); border-radius: 3px; }
.doc-page .kw { color: var(--code-keyword); font-weight: 700; }
.doc-page .str { color: var(--code-string); }
.doc-page .cmm { color: var(--code-comment); font-style: italic; }
.doc-page .fn { color: var(--code-function); font-weight: 700; }
.doc-page .num { color: var(--code-number); }
.doc-page .var { color: var(--code-variable); }
.doc-page .op { color: var(--code-operator); }
.doc-page .explanation {
      background: rgba(34,197,94,.08);
      border-left: 3px solid var(--accent-2);
      padding: 18px 20px;
      margin: 20px 0;
      border-radius: 12px;
      color: var(--text-bright);
      font-size: .95rem;
      line-height: 1.8;
    }
.doc-page .explanation strong {
      color: var(--accent-2);
    }
.doc-page /* ─── FOOTER ─── */
    .footer {
      margin-top: 60px;
      padding: 32px 0;
      border-top: 1px solid var(--line);
      text-align: center;
      color: var(--text-dim);
      font-size: .88rem;
    }
.doc-page .footer a {
      color: var(--accent);
      transition: color .2s ease;
    }
.doc-page .footer a:hover { color: var(--text-bright); }
.doc-page .footer-socials {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 16px;
    }
.doc-page .footer-socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      border-radius: 12px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      transition: all .25s ease;
    }
.doc-page .footer-socials a:hover {
      background: rgba(56,189,248,.12);
      border-color: rgba(56,189,248,.25);
      transform: translateY(-3px);
    }
.doc-page /* ─── FOOTER GRID (was previously only defined for data-page="index") ─── */
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 36px; text-align: left; border-top: 1px solid var(--line); }
.doc-page .footer-col { display: flex; flex-direction: column; gap: 10px; }
.doc-page .footer-col h5 { margin: 0 0 6px; font-size: .92rem; color: var(--text-bright); }
.doc-page .footer-col a { color: var(--text-dim); font-size: .88rem; text-decoration: none; transition: color .2s ease; }
.doc-page .footer-col a:hover { color: var(--accent); }
.doc-page .footer-name { display: block; font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.doc-page .footer-role { display: block; margin-top: 2px; font-size: .82rem; color: var(--text-dim); }
.doc-page .footer-tagline { margin: 10px 0 0; font-size: .85rem; color: var(--text-dim); line-height: 1.6; max-width: 32ch; }
.doc-page .footer-bottom-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.doc-page .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.doc-page .footer-bottom { font-size: .85rem; color: var(--text-dim); }
@media (max-width: 768px) {
  .doc-page .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 0 24px; }
  .doc-page .footer-bottom-row { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .doc-page .footer-grid { grid-template-columns: 1fr 1fr; }
  .doc-page .footer-links { gap: 10px; }
}
.doc-page /* ─── PAGE SYSTEM ─── */
    .page { display: none; }
.doc-page .page.active { display: block; }
.doc-page /* ─── BREADCRUMB ─── */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
      font-size: .88rem;
      color: var(--text-dim);
    }
.doc-page .breadcrumb a {
      color: var(--accent);
      transition: color .2s ease;
    }
.doc-page .breadcrumb a:hover { color: var(--text-bright); }
.doc-page .breadcrumb .sep { opacity: .5; }
.doc-page /* ─── TABLE OF CONTENTS ─── */
    .toc {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 20px 24px;
      margin: 24px 0;
      backdrop-filter: blur(12px);
    }
.doc-page .toc h4 {
      margin: 0 0 14px 0;
      font-size: .95rem;
      color: var(--text-bright);
      font-weight: 700;
    }
.doc-page .toc ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
.doc-page .toc li { margin-bottom: 6px; }
.doc-page .toc a {
      color: var(--text-dim);
      font-size: .88rem;
      transition: all .2s ease;
      display: inline-block;
      padding: 3px 0;
    }
.doc-page .toc a:hover {
      color: var(--accent);
      transform: translateX(4px);
    }
/* ─── ANIMATIONS ─── */
    @keyframes drift-doc {
      0%, 100% { transform: translate(0,0); }
      50% { transform: translate(30px,-30px); }
    }
@keyframes blink-doc {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }
@keyframes pulse-doc {
      0%, 100% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); }
      50% { box-shadow: 0 0 0 10px rgba(34,197,94,.06); }
    }
@keyframes fadeInUp-doc {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
.doc-page .fade-in-up {
      animation: fadeInUp-doc .6s ease-out forwards;
    }
.doc-page /* ─── SCROLLBAR ─── */
    ::-webkit-scrollbar { width: 8px; }
.doc-page ::-webkit-scrollbar-track { background: var(--bg); }
.doc-page ::-webkit-scrollbar-thumb { background: rgba(56,189,248,.2); border-radius: 4px; }
.doc-page ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.35); }
/* ─── RESPONSIVE (doc page) ─── */
    @media (max-width: 768px) {
      .doc-page .hero-grid { grid-template-columns: 1fr; }
      .doc-page .topbar-inner { flex-wrap: wrap; }
      .doc-page .brand-text h1 { font-size: .95rem; }
      .doc-page .modules-grid { grid-template-columns: 1fr; }
      .doc-page .content-section h2 { font-size: 1.7rem; }
      .doc-page .content-section { padding: 32px 0; }
      .doc-page .hero { padding: 32px 0 16px; }
      .doc-page .hero-card { padding: 24px; }
      .doc-page .side-card { min-height: auto; }
    }
@media (max-width: 480px) {
.doc-page .btn { padding: 10px 14px; font-size: .85rem; }
.doc-page .brand { gap: 8px; }
.doc-page .avatar { width: 40px; height: 40px; }
.doc-page .avatar span { font-size: .95rem; }
}

/* ==================== INDEX PAGE ==================== */
html[data-page="index"] {
      --bg0:#050814;--bg1:#070b16;--panel:rgba(15,23,42,.72);--panel-2:rgba(17,24,39,.86);
      --line:rgba(148,163,184,.16);--text:#e5e7eb;--muted:#94a3b8;--soft:#cbd5e1;
      --accent:#38bdf8;--accent-2:#22c55e;--accent-3:#a78bfa;
      --shadow:0 20px 60px rgba(0,0,0,.42);--radius:26px;--radius-sm:18px;--max:1180px;
      --error:#ef4444;--success:#22c55e;
    }
html[data-page="index"] * {box-sizing:border-box}
html[data-page="index"] {scroll-behavior:smooth;overflow-x:hidden}
html[data-page="index"] body {
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:radial-gradient(circle at top left,rgba(56,189,248,.14),transparent 28%),
        radial-gradient(circle at top right,rgba(167,139,250,.12),transparent 24%),
        radial-gradient(circle at bottom left,rgba(34,197,94,.10),transparent 22%),
        linear-gradient(180deg,var(--bg0),var(--bg1) 55%,#04060b 100%);
      color:var(--text);
    }
html[data-page="index"] a {color:inherit;text-decoration:none}
html[data-page="index"] .wrap {width:min(var(--max),calc(100% - 32px));margin:0 auto}
html[data-page="index"] .glass {
      background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(15,23,42,.58));
      border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(16px);
    }
html[data-page="index"] .topbar {position:sticky;top:0;z-index:40;background:rgba(4,8,15,.62);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);}
html[data-page="index"] .topbar-inner {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;}
html[data-page="index"] .brand {display:flex;align-items:center;gap:12px;min-width:0;}
html[data-page="index"] .avatar {width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3));display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 30px rgba(0,0,0,.35);overflow:hidden;flex:0 0 auto;}
html[data-page="index"] .avatar span {font-weight:800;color:#fff;letter-spacing:.5px;}
html[data-page="index"] .brand-avatar {width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid rgba(255,255,255,.14);box-shadow:0 8px 20px rgba(0,0,0,.30);background:#0f172a;}
html[data-page="index"] .brand-avatar-fallback {width:44px;height:44px;font-size:1rem;}
html[data-page="index"] .brand h1 {margin:0;font-size:1rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-page="index"] .brand small {display:block;margin-top:4px;color:var(--muted)}
html[data-page="index"] nav {display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;}
html[data-page="index"] nav a {padding:10px 14px;border-radius:999px;border:1px solid transparent;color:#dbe4ef;transition:.25s ease;font-size:.95rem;}
html[data-page="index"] nav a:hover {background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);transform:translateY(-1px);color:#fff;}
.user-profile-icon {position:relative;display:inline-block;}
.avatar-btn {width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3));cursor:pointer;display:grid;place-items:center;padding:0;font-weight:700;color:#fff;font-size:.95rem;transition:all .25s ease;overflow:hidden;}
.avatar-btn:hover {border-color:rgba(255,255,255,.25);box-shadow:0 4px 12px rgba(56,189,248,.2);transform:translateY(-1px);}
.avatar-btn:active {transform:translateY(0);}
.profile-dropdown {position:absolute;top:calc(100% + 12px);right:0;width:280px;background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.95));border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 1px rgba(255,255,255,.10) inset;backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.95);transition:all .25s cubic-bezier(0.16,1,0.3,1);z-index:1000;pointer-events:none;}
.profile-dropdown.open {opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;}
.dropdown-header {display:flex;align-items:center;gap:12px;padding:16px;}
.dropdown-avatar {width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3));display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);flex-shrink:0;overflow:hidden;}
.dropdown-avatar img {width:100%;height:100%;object-fit:cover;}
.dropdown-avatar span {font-weight:700;color:#fff;font-size:1rem;}
.dropdown-user-info {flex:1;min-width:0;}
.dropdown-username {margin:0;font-size:.95rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dropdown-email {margin:4px 0 0 0;font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dropdown-divider {height:1px;background:rgba(255,255,255,.06);margin:8px 0;}
.dropdown-item {display:flex;align-items:center;gap:12px;padding:12px 16px;width:100%;background:none;border:none;color:var(--text);font-size:.95rem;cursor:pointer;transition:all .2s ease;text-align:left;text-decoration:none;}
.dropdown-item svg {flex-shrink:0;color:var(--muted);transition:color .2s ease;}
.dropdown-item:hover {background:rgba(56,189,248,.08);color:#fff;}
.dropdown-item:hover svg {color:var(--accent);}
.dropdown-logout:hover {background:rgba(239,68,68,.08);}
.dropdown-logout:hover svg {color:var(--error);}
html[data-page="index"] .hero {padding:54px 0 24px;position:relative;}
html[data-page="index"] .hero-grid {display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;}
html[data-page="index"] .hero-card, html[data-page="index"] .side-card {position:relative;border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at top right,rgba(56,189,248,.12),transparent 30%),radial-gradient(circle at bottom left,rgba(34,197,94,.10),transparent 28%),linear-gradient(180deg,rgba(15,23,42,.96),rgba(8,12,20,.92));box-shadow:var(--shadow);}
html[data-page="index"] .hero-card {padding:34px;transform-style:preserve-3d;transition:transform .15s ease;}
html[data-page="index"] .hero-card::before, html[data-page="index"] .hero-card::after {content:"";position:absolute;border-radius:999px;pointer-events:none;filter:blur(18px);opacity:.55;}
html[data-page="index"] .hero-card::before {width:240px;height:240px;background:rgba(56,189,248,.12);top:-70px;right:-40px;animation:drift-index 10s ease-in-out infinite;}
html[data-page="index"] .hero-card::after {width:180px;height:180px;background:rgba(34,197,94,.10);bottom:-55px;left:-30px;animation:drift-index 12s ease-in-out infinite reverse;}
html[data-page="index"] .eyebrow {display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#dbe4ef;font-size:.9rem;margin-bottom:18px;}
html[data-page="index"] .eyebrow .dot {width:9px;height:9px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 6px rgba(34,197,94,.12);animation:dotPulse-index 2.5s ease-out infinite;}
@keyframes dotPulse-index {0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}
html[data-page="index"] .hero h2 {margin:0;font-size:clamp(2.2rem,4vw,4.8rem);line-height:1.03;letter-spacing:-.045em;}
html[data-page="index"] .grad {background:linear-gradient(90deg,#fff,#b9eaff 30%,#7ff2a6 70%,#d1c3ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
html[data-page="index"] .type-row {margin-top:12px;font-size:1.16rem;color:#dbe4ef;min-height:1.7em;}
html[data-page="index"] .type-text {color:var(--accent);font-weight:700;}
html[data-page="index"] .cursor {animation:blink-index 1s infinite;color:#fff;margin-left:2px;}
html[data-page="index"] .hero p {margin:18px 0 0;max-width:66ch;color:#cbd5e1;line-height:1.85;font-size:1.03rem;}
html[data-page="index"] .cta-row {display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
html[data-page="index"] .btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#e5e7eb;font-weight:600;transition:.25s ease;cursor:pointer;}
html[data-page="index"] .btn:hover {transform:translateY(-2px);background:rgba(255,255,255,.08);}
html[data-page="index"] .btn.primary {background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#07111c;border-color:transparent;box-shadow:0 14px 30px rgba(34,197,94,.18);}
html[data-page="index"] .btn.primary:hover {filter:brightness(1.03)}
html[data-page="index"] .side-card {padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:100%;}
html[data-page="index"] .profile-head {display:flex;align-items:center;gap:16px;}
html[data-page="index"] .profile-photo {width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.35);background:#0f172a;transition:transform .25s ease,box-shadow .25s ease;}
html[data-page="index"] .profile-photo:hover {transform:scale(1.03) rotate(-1deg);box-shadow:0 18px 44px rgba(0,0,0,.45);}
html[data-page="index"] .profile-copy h3 {margin:0;font-size:1.35rem}
html[data-page="index"] .profile-copy p {margin:6px 0 0;color:var(--muted);line-height:1.6}
html[data-page="index"] .mini-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;}
html[data-page="index"] .mini {padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);}
html[data-page="index"] .mini strong {display:block;font-size:1.05rem}
html[data-page="index"] .mini span {display:block;margin-top:4px;color:var(--muted);font-size:.92rem}

/* Profile about summary */
html[data-page="index"] .profile-head {padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.07);}
html[data-page="index"] .profile-about {flex:1;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:28px 0 4px;margin:0;}
html[data-page="index"] .about-lead {margin:0;color:#cbd5e1;line-height:1.75;font-size:.98rem;}
html[data-page="index"] .lv-list {list-style:none;margin:0;padding:14px 16px;display:grid;gap:4px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);}
html[data-page="index"] .lv-list li {display:grid;grid-template-columns:86px 54px 1fr;align-items:center;gap:10px;font-size:.88rem;padding:8px 12px;margin:0 -12px;border-radius:12px;border:1px solid transparent;transition:.3s;}
html[data-page="index"] .lv-list li:hover {transform:translateY(-3px);background:rgba(255,255,255,.04);border-color:#38bdf8;box-shadow:0 10px 25px rgba(56,189,248,.18);}
html[data-page="index"] .lv-name {color:#f1f5f9;font-weight:600;}
html[data-page="index"] .lv-bar {display:flex;gap:4px;}
html[data-page="index"] .lv-bar i {flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12);}
html[data-page="index"] .lv-bar i.on {background:#38bdf8;transform:scaleX(0);transform-origin:left;}
html[data-page="index"] .side-card.visible .lv-bar i.on {animation:lvFill .6s cubic-bezier(.2,.8,.2,1) forwards;}
html[data-page="index"] .side-card.visible .lv-list li:nth-child(1) i.on {animation-delay:.3s}
html[data-page="index"] .side-card.visible .lv-list li:nth-child(2) i.on {animation-delay:.45s}
html[data-page="index"] .side-card.visible .lv-list li:nth-child(3) i.on {animation-delay:.6s}
html[data-page="index"] .side-card.visible .lv-list li:nth-child(4) i.on {animation-delay:.75s}
html[data-page="index"] .side-card.visible .lv-list li:nth-child(5) i.on {animation-delay:.9s}
html[data-page="index"] .side-card.visible .lv-list li:nth-child(6) i.on {animation-delay:1.05s}
@keyframes lvFill {to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html[data-page="index"] .lv-bar i.on{transform:none;animation:none!important}}
html[data-page="index"] .lv-text {color:var(--muted);}
html[data-page="index"] section {padding:22px 0}
html[data-page="index"] .section-title {display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:18px;}
html[data-page="index"] .section-title h3 {margin:0;font-size:clamp(1.35rem,2vw,2rem);letter-spacing:-.03em;}
html[data-page="index"] .section-title p {margin:0;max-width:72ch;color:var(--muted);line-height:1.75;}
html[data-page="index"] .chips {display:flex;flex-wrap:wrap;gap:10px}
html[data-page="index"] .chip {padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#dbe4ef;transition:.25s ease;}
html[data-page="index"] .chip:hover {transform:translateY(-2px);border-color:rgba(56,189,248,.28);}
html[data-page="index"] .text-card {padding:22px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(15,23,42,.84),rgba(15,23,42,.58));box-shadow:0 12px 28px rgba(0,0,0,.20);color:var(--muted);line-height:1.9;}
html[data-page="index"] .text-card strong {color:#fff;}
html[data-page="index"] .timeline {display:grid;gap:14px;}
html[data-page="index"] .step {display:grid;grid-template-columns:72px 1fr;gap:16px;padding:18px 20px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);}
html[data-page="index"] .step .num {width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(56,189,248,.2),rgba(34,197,94,.2));border:1px solid rgba(255,255,255,.10);font-weight:800;}
html[data-page="index"] .step h5 {margin:0 0 6px;font-size:1.02rem}
html[data-page="index"] .step p {margin:0;color:var(--muted);line-height:1.7}
html[data-page="index"] .projects {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
html[data-page="index"] .project {padding:24px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(15,23,42,.90),rgba(12,17,30,.64));display:flex;flex-direction:column;gap:16px;min-height:100%;}
html[data-page="index"] .project-top {display:flex;justify-content:space-between;gap:12px;align-items:start;}
html[data-page="index"] .project h4 {margin:0;font-size:1.15rem}
html[data-page="index"] .project p {margin:0;color:var(--muted);line-height:1.78}
html[data-page="index"] .badge {padding:8px 12px;border-radius:999px;border:1px solid rgba(34,197,94,.18);background:rgba(34,197,94,.10);color:#9ef0b8;white-space:nowrap;font-size:.9rem;}
html[data-page="index"] .badge.soft {background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.18);color:#a7e8ff;}
html[data-page="index"] .badge.gray {background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.16);color:#dbe4ef;}
html[data-page="index"] .project .links {margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;}
html[data-page="index"] .link-btn {padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:.25s ease;}
html[data-page="index"] .link-btn:hover {transform:translateY(-2px);border-color:rgba(167,139,250,.35);}
html[data-page="index"] .contact {display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:28px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(12,17,30,.80));box-shadow:var(--shadow);}
html[data-page="index"] .contact h3 {margin:0 0 10px;font-size:1.5rem}
html[data-page="index"] .contact p {margin:0;color:var(--muted);line-height:1.8;max-width:72ch}
/* Contact: icons, email box, list */
html[data-page="index"] .ci {width:18px;height:18px;flex:0 0 auto;}
html[data-page="index"] .contact-info h3 {margin:0 0 14px;}
html[data-page="index"] .email-box {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 8px 8px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);width:fit-content;max-width:100%;}
html[data-page="index"] .email-box .ci {color:#38bdf8;}
html[data-page="index"] .email-addr {color:#f1f5f9;font-weight:600;word-break:break-all;text-decoration:none;}
html[data-page="index"] .email-addr:hover {color:#38bdf8;}
html[data-page="index"] .copy-btn {display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#e5e7eb;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.25s ease;}
html[data-page="index"] .copy-btn .ci {width:15px;height:15px;color:inherit;}
html[data-page="index"] .copy-btn:hover {background:rgba(56,189,248,.14);border-color:#38bdf8;}
html[data-page="index"] .copy-btn:focus-visible {outline:2px solid #38bdf8;outline-offset:2px;}
html[data-page="index"] .copy-btn.copied {background:rgba(34,197,94,.16);border-color:#22c55e;color:#86efac;}
html[data-page="index"] .contact-list {list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;}
html[data-page="index"] .contact-list li {display:flex;align-items:center;gap:10px;color:var(--muted);}
html[data-page="index"] .contact-list a {color:#cbd5e1;text-decoration:none;}
html[data-page="index"] .contact-list a:hover {color:#38bdf8;}
html[data-page="index"] .contact-links {display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:10px;align-self:stretch;}
html[data-page="index"] .contact-links .btn {display:flex;align-items:center;justify-content:center;text-align:center;}
html[data-page="index"] .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 36px;text-align:left;}
html[data-page="index"] .footer-col {display:flex;flex-direction:column;gap:10px;}
html[data-page="index"] .footer-col h5 {margin:0 0 6px;font-size:.92rem;color:#fff;}
html[data-page="index"] .footer-col a {color:var(--muted);font-size:.88rem;text-decoration:none;transition:color .2s ease;}
html[data-page="index"] .footer-col a:hover {color:var(--cyan);}
html[data-page="index"] .footer-name {display:block;font-size:1rem;font-weight:700;color:#fff;}
html[data-page="index"] .footer-role {display:block;margin-top:2px;font-size:.82rem;color:var(--muted);}
html[data-page="index"] .footer-tagline {margin:10px 0 0;font-size:.85rem;color:var(--muted);line-height:1.6;max-width:32ch;}
html[data-page="index"] .footer-bottom-row {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);}
html[data-page="index"] .footer-links {display:flex;gap:16px;flex-wrap:wrap;}
html[data-page="index"] .footer-bottom {font-size:0.85rem;color:var(--muted);}
html[data-page="index"] .cert-icon {display:block;font-size:1.6rem;margin-bottom:10px;}
@media (max-width:820px) {
  html[data-page="index"] .footer-grid {grid-template-columns:1fr 1fr;padding:40px 0 24px;}
  html[data-page="index"] .footer-bottom-row {justify-content:center;text-align:center;}
}
@media (max-width:520px) {
  html[data-page="index"] .footer-grid {grid-template-columns:1fr 1fr;}
}
html[data-page="index"] .floating {position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:50;}
html[data-page="index"] .floating a {width:52px;height:52px;display:grid;place-items:center;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(15,23,42,.92);box-shadow:var(--shadow);transition:.25s ease;font-size:1.1rem;}
html[data-page="index"] .floating a:hover {transform:translateY(-3px)}
html[data-page="index"] .reveal {opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
html[data-page="index"] .reveal.visible {opacity:1;transform:translateY(0);}
@keyframes drift-index {0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,10px) scale(1.06)}}
@keyframes blink-index {0%,49%{opacity:1}50%,100%{opacity:.25}}
html[data-page="index"] .certificate-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
html[data-page="index"] .certificate-card {overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(15,23,42,.90),rgba(12,17,30,.64));box-shadow:0 12px 28px rgba(0,0,0,.22);display:flex;flex-direction:column;min-height:100%;}
html[data-page="index"] .certificate-card.featured {grid-column:span 1;}
html[data-page="index"] .certificate-media {aspect-ratio:16/11;background:#0b1220;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);}
html[data-page="index"] .certificate-media img {width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
html[data-page="index"] .certificate-body {padding:12px 12px 14px;}
html[data-page="index"] .certificate-body h4 {margin:0 0 4px;font-size:0.95rem;}
html[data-page="index"] .certificate-body p {margin:0 0 8px;color:var(--muted);line-height:1.5;font-size:0.85rem;}
html[data-page="index"] .certificate-card {cursor:pointer;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
html[data-page="index"] .certificate-card:hover {transform:translateY(-4px);border-color:rgba(56,189,248,.24);box-shadow:0 18px 40px rgba(0,0,0,.30);}
html[data-page="index"] .certificate-card:focus-visible {outline:2px solid rgba(56,189,248,.75);outline-offset:4px;}
html[data-page="index"] .lightbox {position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(2,6,23,.86);backdrop-filter:blur(14px);}
html[data-page="index"] .lightbox.open {display:flex;}
html[data-page="index"] .lightbox-panel {width:min(1100px,100%);max-height:calc(100vh - 44px);display:grid;grid-template-rows:auto 1fr auto;gap:14px;}
html[data-page="index"] .lightbox-top {display:flex;justify-content:space-between;align-items:center;gap:16px;color:#e5e7eb;}
html[data-page="index"] .lightbox-title {font-size:1rem;font-weight:600;line-height:1.4;text-shadow:0 2px 12px rgba(0,0,0,.4);}
html[data-page="index"] .lightbox-close {width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.92);color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow);}
html[data-page="index"] .lightbox-frame {background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.10);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);display:grid;place-items:center;min-height:0;}
html[data-page="index"] .lightbox-frame img {width:100%;height:100%;max-height:calc(100vh - 170px);object-fit:contain;display:block;background:#0b1220;}
html[data-page="index"] .lightbox-caption {margin:0;color:var(--muted);text-align:center;line-height:1.6;font-size:.96rem;}
@media (max-width:1200px) {
html[data-page="index"] .certificate-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px) {
html[data-page="index"] .hero-grid, html[data-page="index"] .projects, html[data-page="index"] .contact {grid-template-columns:1fr}
html[data-page="index"] .certificate-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-page="index"] .section-title {flex-direction:column;align-items:start}
html[data-page="index"] nav {justify-content:start}
html[data-page="index"] .topbar-inner {flex-direction:column;align-items:start}
}
@media (max-width:640px) {
html[data-page="index"] .hero-card, html[data-page="index"] .side-card, html[data-page="index"] .project, html[data-page="index"] .contact {padding:20px;border-radius:22px}
html[data-page="index"] .certificate-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html[data-page="index"] .hero {padding-top:26px}
html[data-page="index"] .mini-grid {grid-template-columns:1fr}
html[data-page="index"] .step {grid-template-columns:1fr}
html[data-page="index"] .contact-links {justify-content:start}
html[data-page="index"] .floating {right:12px;bottom:12px}
html[data-page="index"] .profile-photo {width:88px;height:88px}
html[data-page="index"] .stats-bar {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html[data-page="index"] .stat-box {min-height:76px;padding:10px 4px}
html[data-page="index"] .stat-number {font-size:1.2rem}
html[data-page="index"] .stat-label {font-size:.72rem}
.profile-dropdown {width:min(280px,calc(100vw - 24px))}
}
@media (max-width:480px) {
html[data-page="index"] .wrap {width:calc(100% - 24px)}
html[data-page="index"] .brand-avatar, html[data-page="index"] .brand-avatar-fallback {width:36px;height:36px}
html[data-page="index"] .brand h1 {font-size:.9rem}
html[data-page="index"] .brand small {font-size:.72rem}
html[data-page="index"] .topbar-inner {padding:10px 0}
html[data-page="index"] .hero h2 {letter-spacing:-.03em}
html[data-page="index"] .cta-row .btn {padding:11px 14px;font-size:.9rem}
html[data-page="index"] .certificate-grid {grid-template-columns:1fr}
.avatar-btn {width:36px;height:36px}
html[data-page="index"] .footer-links {gap:10px}
.floating a {width:46px;height:46px;font-size:1rem}
}
html[data-page="index"] #explore-hub {padding:80px 0;}
html[data-page="index"] .explore-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:40px;}
html[data-page="index"] .explore-card {background:rgba(15,23,42,.75);border:1px solid rgba(56,189,248,.18);border-radius:24px;padding:28px;text-decoration:none;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,opacity .6s ease;backdrop-filter:blur(14px);position:relative;overflow:hidden;display:flex;flex-direction:column;}
html[data-page="index"] .explore-grid a:nth-child(1) {transition-delay:0s;}
html[data-page="index"] .explore-grid a:nth-child(2) {transition-delay:.08s;}
html[data-page="index"] .explore-grid a:nth-child(3) {transition-delay:.16s;}
html[data-page="index"] .explore-grid a:nth-child(4) {transition-delay:.24s;}
html[data-page="index"] .explore-grid a:nth-child(5) {transition-delay:.32s;}
html[data-page="index"] .explore-card:hover {transform:translateY(-8px);border-color:#38bdf8;box-shadow:0 20px 50px rgba(56,189,248,.22),0 0 0 1px rgba(56,189,248,.15) inset;}
html[data-page="index"] .explore-icon {width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(56,189,248,.12);color:var(--cyan);margin-bottom:20px;transition:transform .4s ease,box-shadow .4s ease,color .4s ease;}
html[data-page="index"] .explore-icon svg {width:24px;height:24px;transition:transform .4s ease;}
html[data-page="index"] .explore-card:hover .explore-icon {transform:scale(1.08) rotate(-4deg);box-shadow:0 0 24px rgba(56,189,248,.45);color:#fff;}
html[data-page="index"] .explore-card h4 {margin:0 0 10px;font-size:1.4rem;color:#fff;}
html[data-page="index"] .explore-card p {color:#94a3b8;margin-bottom:20px;flex:1;}
html[data-page="index"] .explore-link {color:#38bdf8;font-weight:bold;display:inline-flex;align-items:center;gap:4px;transition:gap .3s ease;}
html[data-page="index"] .explore-card:hover .explore-link {gap:9px;}
html[data-page="index"] .explore-card::before {content:"";position:absolute;inset:0;border-radius:24px;opacity:0;transition:.4s;background:linear-gradient(135deg,rgba(56,189,248,.18),transparent);pointer-events:none;}
html[data-page="index"] .explore-card:hover::before {opacity:1;}
html[data-page="index"] .explore-card::after {content:"";position:absolute;top:-40%;left:-20%;width:60%;height:180%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent);transform:rotate(20deg) translateX(-140%);transition:transform .8s ease;pointer-events:none;}
html[data-page="index"] .explore-card:hover::after {transform:rotate(20deg) translateX(60%);}

/* ---- Feature showcase blocks (Knowledge Base / Network Lab / Certificates) ---- */
html[data-page="index"] #kb-showcase,
html[data-page="index"] #netlab-showcase,
html[data-page="index"] #cert-showcase {padding:20px 0;}
html[data-page="index"] .feature-block {position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;background:rgba(15,23,42,.6);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:44px;backdrop-filter:blur(14px);overflow:hidden;transition:border-color .4s ease,box-shadow .4s ease,opacity .7s ease,transform .7s ease;}
html[data-page="index"] .feature-block:hover {border-color:rgba(56,189,248,.32);box-shadow:0 30px 70px rgba(0,0,0,.35);}
html[data-page="index"] .feature-block::before,
html[data-page="index"] .feature-block::after {content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:0;animation:blobFloat 9s ease-in-out infinite;}
html[data-page="index"] .feature-block::before {background:radial-gradient(circle,rgba(56,200,239,.35),transparent 70%);top:-140px;left:-120px;}
html[data-page="index"] .feature-block::after {background:radial-gradient(circle,rgba(82,229,155,.28),transparent 70%);bottom:-160px;right:-100px;animation-delay:2.4s;}
html[data-page="index"] .feature-block.reverse {grid-template-columns:1fr 1.1fr;}
html[data-page="index"] .feature-block.reverse .feature-text {order:2;}
html[data-page="index"] .feature-block.reverse .feature-panel {order:1;}
html[data-page="index"] .feature-text,
html[data-page="index"] .feature-panel {position:relative;z-index:1;}
html[data-page="index"] .feature-eyebrow {color:var(--cyan);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:inline-flex;align-items:center;gap:8px;}
html[data-page="index"] .feature-eyebrow::before {content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulseDot 2s ease-in-out infinite;flex:0 0 auto;}
html[data-page="index"] .feature-text h3 {font-size:2rem;margin:0 0 14px;color:#fff;}
html[data-page="index"] .feature-text p {color:#94a3b8;line-height:1.7;margin:0 0 22px;max-width:46ch;}
html[data-page="index"] .feature-tags {display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
html[data-page="index"] .feature-tags span {padding:7px 14px;border-radius:999px;border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.08);color:#cfe9fb;font-size:.8rem;font-weight:600;transition:transform .25s ease,border-color .25s ease,background .25s ease;}
html[data-page="index"] .feature-tags span:hover {transform:translateY(-3px);border-color:#38bdf8;background:rgba(56,189,248,.16);}

/* Self-contained CTA button — does not depend on the generic .btn class */
html[data-page="index"] .feature-cta {display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;padding:14px 24px;border-radius:14px;font-weight:700;font-size:.92rem;text-decoration:none;cursor:pointer;color:#03100b !important;background-color:#52e59b;background-image:linear-gradient(135deg,#52e59b,#38c8ef);background-size:180% 180%;background-position:0 0;box-shadow:0 12px 30px rgba(56,200,239,.28);transition:transform .3s ease,box-shadow .3s ease,background-position .5s ease;}
html[data-page="index"] .feature-cta:hover {transform:translateY(-3px);box-shadow:0 16px 40px rgba(56,200,239,.42);background-position:100% 0;}
html[data-page="index"] .feature-cta:active {transform:translateY(-1px);}

html[data-page="index"] .feature-panel {border-radius:20px;background:#0b1220;border:1px solid rgba(255,255,255,.08);min-height:220px;transition:border-color .4s ease;}
html[data-page="index"] .feature-block:hover .feature-panel {border-color:rgba(56,189,248,.28);}
html[data-page="index"] .code-panel {padding:0;overflow:hidden;}
html[data-page="index"] .panel-dots {display:flex;gap:7px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
html[data-page="index"] .panel-dots span {width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14);}
html[data-page="index"] .panel-dots span:nth-child(1) {background:#ff6159;}
html[data-page="index"] .panel-dots span:nth-child(2) {background:#ffbd2e;}
html[data-page="index"] .panel-dots span:nth-child(3) {background:#28c941;}
html[data-page="index"] .code-panel pre {margin:0;padding:22px 24px;font-family:'Fira Code',monospace;font-size:.85rem;line-height:1.9;color:#cfe9fb;overflow-x:auto;}
html[data-page="index"] .code-panel .tok-kw {color:#c792ea;}
html[data-page="index"] .code-panel .tok-str {color:#38c8ef;}
html[data-page="index"] .code-panel .tok-arrow,
html[data-page="index"] .code-panel .tok-comment {color:var(--green);}
html[data-page="index"] .code-panel code::after {content:"";display:inline-block;width:8px;height:16px;margin-left:4px;background:var(--green);vertical-align:middle;animation:blinkCursor 1s step-end infinite;}

/* Network lab node diagram */
html[data-page="index"] .node-panel {position:relative;padding:30px;min-height:260px;}
html[data-page="index"] .node-lines {position:absolute;inset:0;width:100%;height:100%;z-index:1;}
html[data-page="index"] .link-line {stroke:rgba(56,200,239,.4);stroke-width:1.4;stroke-dasharray:6 6;animation:dashFlow 3s linear infinite;}
html[data-page="index"] .node {position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;letter-spacing:.06em;border-radius:16px;border:1px solid rgba(56,189,248,.3);background:#101c30;color:#cfe9fb;width:82px;height:82px;animation:nodeFloat 4.5s ease-in-out infinite;transition:transform .3s ease,box-shadow .3s ease;}
html[data-page="index"] .node:hover {transform:scale(1.08);box-shadow:0 0 22px rgba(56,189,248,.4);}
html[data-page="index"] .node-core {top:38%;left:38%;width:96px;height:96px;color:#03100b !important;background-color:#52e59b;background-image:linear-gradient(135deg,#52e59b,#38c8ef);border:none;box-shadow:0 0 30px rgba(56,200,239,.45);animation:corePulse 2.6s ease-in-out infinite;}
html[data-page="index"] .node-dns {top:6%;left:14%;animation-delay:.2s;}
html[data-page="index"] .node-dhcp {top:34%;right:6%;animation-delay:.9s;}
html[data-page="index"] .node-vlan {bottom:8%;left:32%;animation-delay:1.5s;}

/* Certificates badge panel */
html[data-page="index"] .badge-panel {position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:260px;}
html[data-page="index"] .badge-glow {position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(56,200,239,.35),transparent 70%);filter:blur(20px);animation:pulseGlow 3s ease-in-out infinite;z-index:0;}
html[data-page="index"] .badge-ring {position:absolute;border-radius:50%;border:1px dashed rgba(56,189,248,.3);z-index:1;}
html[data-page="index"] .ring-1 {width:150px;height:150px;animation:spinSlow 14s linear infinite;}
html[data-page="index"] .ring-2 {width:200px;height:200px;border-color:rgba(82,229,155,.25);animation:spinSlow 20s linear infinite reverse;}
html[data-page="index"] .badge-core {position:relative;z-index:2;width:96px;height:96px;border-radius:26px;display:flex;align-items:center;justify-content:center;color:#03100b !important;background-color:#52e59b;background-image:linear-gradient(135deg,#52e59b,#38c8ef);box-shadow:0 0 40px rgba(56,200,239,.45);animation:corePulse 2.6s ease-in-out infinite;}
html[data-page="index"] .badge-core svg {width:44px;height:44px;}
html[data-page="index"] .badge-spark {position:absolute;z-index:2;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:sparkFloat 3.6s ease-in-out infinite;}
html[data-page="index"] .spark-1 {top:20%;left:22%;animation-delay:.2s;}
html[data-page="index"] .spark-2 {top:70%;right:18%;background:var(--green);box-shadow:0 0 10px var(--green);animation-delay:1.1s;}
html[data-page="index"] .spark-3 {bottom:14%;left:38%;animation-delay:2s;}

@keyframes blobFloat {0%,100% {transform:translate(0,0) scale(1);} 50% {transform:translate(20px,-16px) scale(1.08);}}
@keyframes pulseDot {0%,100% {opacity:1;transform:scale(1);} 50% {opacity:.5;transform:scale(1.3);}}
@keyframes blinkCursor {0%,50% {opacity:1;} 51%,100% {opacity:0;}}
@keyframes dashFlow {to {stroke-dashoffset:-24;}}
@keyframes nodeFloat {0%,100% {transform:translateY(0);} 50% {transform:translateY(-8px);}}
@keyframes corePulse {0%,100% {box-shadow:0 0 24px rgba(56,200,239,.35);} 50% {box-shadow:0 0 40px rgba(56,200,239,.65);}}
@keyframes pulseGlow {0%,100% {opacity:.6;transform:scale(1);} 50% {opacity:1;transform:scale(1.1);}}
@keyframes spinSlow {to {transform:rotate(360deg);}}
@keyframes sparkFloat {0%,100% {transform:translateY(0) scale(1);opacity:.8;} 50% {transform:translateY(-10px) scale(1.3);opacity:1;}}

@media (prefers-reduced-motion: reduce) {
  html[data-page="index"] .node,
  html[data-page="index"] .node-core,
  html[data-page="index"] .badge-core,
  html[data-page="index"] .badge-glow,
  html[data-page="index"] .badge-ring,
  html[data-page="index"] .badge-spark,
  html[data-page="index"] .feature-eyebrow::before,
  html[data-page="index"] .code-panel code::after,
  html[data-page="index"] .link-line,
  html[data-page="index"] .feature-block::before,
  html[data-page="index"] .feature-block::after {animation:none !important;opacity:1;transform:none;}
}

@media (max-width:820px) {
  html[data-page="index"] .feature-block,
  html[data-page="index"] .feature-block.reverse {grid-template-columns:1fr;padding:28px;}
  html[data-page="index"] .feature-block.reverse .feature-text,
  html[data-page="index"] .feature-block.reverse .feature-panel {order:0;}
  html[data-page="index"] .node-panel,
  html[data-page="index"] .badge-panel {min-height:220px;}
}

/* Below this width the absolute-positioned node diagram no longer has room
   to lay itself out without nodes overlapping or clipping, so it switches
   to a simple, safe, centered flex layout instead. */
@media (max-width:640px) {
  html[data-page="index"] .node-panel {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;min-height:auto;padding:26px;}
  html[data-page="index"] .node-lines {display:none;}
  html[data-page="index"] .node {position:static;width:76px;height:76px;}
  html[data-page="index"] .node-core {width:88px;height:88px;}
}
html[data-page="index"] .stats-bar {display:grid;grid-template-columns:repeat(3,minmax(95px,1fr));gap:12px;margin:22px 0 28px;}
html[data-page="index"] .stat-box {display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:90px;padding:16px 8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;transition:.3s;}
html[data-page="index"] .stat-box:hover {transform:translateY(-5px);border-color:#38bdf8;box-shadow:0 10px 25px rgba(56,189,248,.18);}
html[data-page="index"] .stat-number {font-size:1.7rem;font-weight:700;color:#38bdf8;}
html[data-page="index"] .stat-label {margin-top:8px;font-size:.85rem;color:#94a3b8;text-align:center;}
html[data-page="index"] .toast-container {position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
html[data-page="index"] .toast {padding:14px 20px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text);font-size:.95rem;max-width:360px;transform:translateX(120%);transition:transform .4s cubic-bezier(0.16,1,0.3,1);pointer-events:auto;display:flex;align-items:center;gap:10px;}
html[data-page="index"] .toast.show {transform:translateX(0);}
html[data-page="index"] .toast.error {border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.1);}
html[data-page="index"] .toast.success {border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.1);}
html[data-page="index"] .toast.info {border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.1);}
html[data-page="index"] .auth-modal {display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);z-index:999;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
html[data-page="index"] .auth-modal.open {display:flex;}
html[data-page="index"] .auth-panel {background:var(--panel-2);border:1px solid var(--line);border-radius:20px;width:min(380px,calc(100% - 32px));box-shadow:0 20px 60px rgba(0,0,0,.5);}
html[data-page="index"] .auth-header {display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line);}
html[data-page="index"] .auth-header h2 {margin:0;font-size:1rem;font-weight:600;}
html[data-page="index"] .auth-btn-close {background:none;border:none;font-size:1.4rem;color:var(--muted);cursor:pointer;padding:0;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;transition:.2s;}
html[data-page="index"] .auth-btn-close:hover {background:rgba(255,255,255,.06);color:var(--text);}
html[data-page="index"] .auth-form {padding:20px;display:flex;flex-direction:column;gap:12px;}
html[data-page="index"] .auth-form input {padding:11px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04);color:var(--text);font-size:.95rem;transition:.2s;}
html[data-page="index"] .auth-form input:focus {outline:none;border-color:var(--accent);background:rgba(255,255,255,.06);}
html[data-page="index"] .auth-form button {padding:11px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;border-radius:8px;color:#000;font-weight:600;cursor:pointer;transition:.2s;}
html[data-page="index"] .auth-form button:hover {transform:translateY(-2px);}
html[data-page="index"] .google-login-btn {display:flex;align-items:center;justify-content:center;gap:10px;padding:11px;background:linear-gradient(135deg,#1e40af,#1e3a8a);color:#fff;border:1px solid rgba(255,255,255,.15);font-weight:600;cursor:pointer;transition:all .2s;border-radius:8px;font-size:.95rem;}
html[data-page="index"] .google-login-btn:hover {background:linear-gradient(135deg,#1e3a8a,#172554);border-color:rgba(255,255,255,.25);transform:translateY(-2px);box-shadow:0 4px 12px rgba(56,189,248,0.2);}
html[data-page="index"] .divider {position:relative;text-align:center;color:var(--muted);font-size:.85rem;margin:4px 0 8px;}
html[data-page="index"] .divider::before {content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line);z-index:0;}
html[data-page="index"] .divider::after {content:attr(data-text);background:var(--panel-2);padding:0 8px;position:relative;z-index:1;}
html[data-page="index"] .auth-toggle {margin:8px 0 0;text-align:center;color:var(--muted);font-size:.85rem;}
html[data-page="index"] .auth-toggle a {color:var(--accent);text-decoration:underline;}
html[data-page="index"] .auth-success {padding:20px;}
html[data-page="index"] .success-msg {color:var(--accent-2);margin:0 0 12px;font-weight:600;}
html[data-page="index"] .auth-success p {margin:8px 0;color:var(--muted);font-size:.9rem;}
html[data-page="index"] .auth-success button {padding:11px;background:var(--accent-2);border:none;border-radius:8px;color:#000;font-weight:600;cursor:pointer;width:100%;transition:.2s;}
html[data-page="index"] .auth-success button:hover {transform:translateY(-2px);}
html[data-page="index"] footer {margin-top:0px;}
html[data-page="index"] #authLink {cursor:pointer;transition:.2s;}
html[data-page="index"] #authLink:hover {color:var(--soft);}
html[data-page="index"] .auth-user-menu {display:flex;align-items:center;gap:12px;}
html[data-page="index"] .auth-user-menu .user-info {text-align:right;display:none;}
html[data-page="index"] .auth-user-menu .user-info p {margin:0;font-size:.85rem;color:var(--muted);}
html[data-page="index"] .auth-user-menu .user-info p:first-child {color:var(--text);font-weight:600;font-size:.95rem;}
html[data-page="index"] .auth-user-menu .user-avatar {width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3));display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);overflow:hidden;flex-shrink:0;}
html[data-page="index"] .auth-user-menu .user-avatar img {width:100%;height:100%;object-fit:cover;}
html[data-page="index"] .auth-user-menu .user-avatar span {font-weight:700;color:#fff;font-size:.9rem;}
html[data-page="index"] .auth-user-menu.authenticated .user-info {display:block;}
html[data-page="index"] #dashboardBtn {background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#000;font-weight:600;padding:10px 16px;}
html[data-page="index"] #dashboardBtn:hover {transform:translateY(-1px);}
html[data-page="index"] .skip-link {position:absolute;top:-40px;left:0;background:var(--accent);color:#000;padding:8px;text-decoration:none;z-index:100;transition:top 0.3s;}
html[data-page="index"] .skip-link:focus {top:0;}
/* Mobile dropdown fix - prevent going off-screen */
    @media (max-width: 640px) {
      .profile-dropdown{
        position:fixed;
        top:60px;
        right:12px;
        left:12px;
        width:auto;
        max-width:360px;
        margin:0 auto;
      }
    }
@media (max-width: 480px) {
.profile-dropdown {
        top:56px;
        right:8px;
        left:8px;
      }
}

/* ==================== LINUX PAGE ==================== */
html[data-page="linux"] {
      --bg: #060913; --bg-1: #0b0f1a; --bg-2: #0f1525; --bg-card: rgba(15,21,37,.72);
      --line: rgba(148,163,184,.14); --text: #e5e7eb; --text-dim: #94a3b8; --text-bright: #f1f5f9;
      --accent: #38bdf8; --accent-2: #22c55e; --accent-3: #a78bfa;
      --shadow: 0 20px 60px rgba(0,0,0,.42); --radius: 26px; --radius-sm: 18px;
      --max: 1320px; --sidebar-width: 300px; --topbar-h: 76px;
      --code-keyword: #ff79c6; --code-string: #f1fa8c; --code-comment: #6272a4;
      --code-function: #50fa7b; --code-number: #bd93f9; --code-variable: #8be9fd; --code-operator: #ff79c6;
    }
html[data-page="linux"] *, html[data-page="linux"] *::before, html[data-page="linux"] *::after { box-sizing: border-box; }
html[data-page="linux"] :where(*:not(.global-header):not(.global-header *)), html[data-page="linux"] *::before, html[data-page="linux"] *::after { margin: 0; padding: 0; }
html[data-page="linux"] { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
html[data-page="linux"] body {
      margin: 0; max-width: 100vw;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      background: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(56,189,248,.10), transparent),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(167,139,250,.08), transparent),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(34,197,94,.06), transparent),
        linear-gradient(180deg, var(--bg), var(--bg-1) 40%, #04060b 100%);
      background-attachment: fixed; color: var(--text); min-height: 100vh;
    }
html[data-page="linux"] a { color: inherit; text-decoration: none; }
html[data-page="linux"] .wrap { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
html[data-page="linux"] ::-webkit-scrollbar { width: 8px; }
html[data-page="linux"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-page="linux"] ::-webkit-scrollbar-thumb { background: rgba(56,189,248,.2); border-radius: 4px; }
html[data-page="linux"] ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.35); }
html[data-page="linux"] .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(6,9,19,.85); backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-page="linux"] .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; }
html[data-page="linux"] .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
html[data-page="linux"] .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3)); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 12px 30px rgba(0,0,0,.35); overflow: hidden; flex: 0 0 auto; cursor: pointer; transition: transform .3s ease; }
html[data-page="linux"] .avatar:hover { transform: scale(1.1); }
html[data-page="linux"] .avatar span { font-weight: 800; color: #fff; letter-spacing: .5px; font-size: 1.1rem; }
html[data-page="linux"] .brand-text h1 { margin: 0; font-size: 1.05rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--text-bright); }
html[data-page="linux"] .brand-text small { display: block; margin-top: 3px; color: var(--text-dim); font-size: .82rem; font-weight: 500; }
html[data-page="linux"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: .9rem; transition: all .25s cubic-bezier(.4,0,.2,1); cursor: pointer; font-family: inherit; white-space: nowrap; }
html[data-page="linux"] .btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
html[data-page="linux"] .btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #07111c; border-color: transparent; box-shadow: 0 14px 30px rgba(34,197,94,.18); }
html[data-page="linux"] .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 18px 40px rgba(34,197,94,.25); }
html[data-page="linux"] .btn.back-btn { padding: 10px 16px; font-size: .88rem; background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.2); color: var(--accent); }
html[data-page="linux"] .btn.back-btn:hover { background: rgba(56,189,248,.15); transform: translateX(4px); border-color: rgba(56,189,248,.35); }
html[data-page="linux"] .search-container { position: relative; max-width: 400px; width: 100%; }
html[data-page="linux"] .search-input { width: 100%; padding: 10px 44px 10px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); font-family: inherit; font-size: .9rem; transition: all .25s ease; outline: none; }
html[data-page="linux"] .search-input:focus { border-color: var(--accent); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(56,189,248,.1); }
html[data-page="linux"] .search-input::placeholder { color: var(--text-dim); }
html[data-page="linux"] .doc-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
html[data-page="linux"] .search-results { position: absolute; top: calc(100% + 8px); left: 0; background: #0f1525; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-height: 400px; overflow-y: auto; z-index: 200; display: none; }
html[data-page="linux"] .search-results.active { display: block; }
html[data-page="linux"] .search-result-item { padding: 12px 16px; cursor: pointer; transition: background .2s ease; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
html[data-page="linux"] .search-result-item:last-child { border-bottom: none; }
html[data-page="linux"] .search-result-item:hover { background: rgba(56,189,248,.08); }
html[data-page="linux"] .search-result-item .result-title { font-weight: 600; color: var(--text-bright); font-size: .9rem; }
html[data-page="linux"] .search-result-item .result-desc { font-size: .8rem; color: var(--text-dim); }
html[data-page="linux"] .main-layout { display: flex; min-height: calc(100vh - var(--topbar-h)); margin-top: var(--topbar-h); }
html[data-page="linux"] .sidebar { width: var(--sidebar-width); position: fixed; left: 0; top: var(--topbar-h); bottom: 0; background: rgba(6,9,19,.92); backdrop-filter: blur(20px); border-right: 1px solid var(--line); overflow-y: auto; z-index: 50; padding: 20px 0; transition: transform .3s ease; }
html[data-page="linux"] .sidebar-toggle { display: none; position: fixed; bottom: 24px; left: 24px; z-index: 60; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #07111c; font-size: 1.3rem; cursor: pointer; box-shadow: 0 8px 30px rgba(56,189,248,.3); transition: transform .3s ease; align-items: center; justify-content: center; }
html[data-page="linux"] .sidebar-toggle:hover { transform: scale(1.1); }
html[data-page="linux"] .scroll-top-btn { position: fixed; bottom: 24px; right: 24px; z-index: 61; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-3), var(--accent)); border: none; color: #07111c; font-size: 1.2rem; cursor: pointer; box-shadow: 0 8px 30px rgba(167,139,250,.3); transition: all .3s cubic-bezier(.4,0,.2,1); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); }
html[data-page="linux"] .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
html[data-page="linux"] .scroll-top-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 12px 40px rgba(167,139,250,.4); }
html[data-page="linux"] .scroll-top-btn:active { transform: scale(0.95); }
html[data-page="linux"] .sidebar-section { margin-bottom: 8px; }
html[data-page="linux"] .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; cursor: pointer; font-weight: 700; color: var(--text-bright); font-size: .92rem; transition: background .2s ease; user-select: none; }
html[data-page="linux"] .sidebar-header:hover { background: rgba(255,255,255,.03); }
html[data-page="linux"] .sidebar-header .chevron { transition: transform .3s ease; font-size: .8rem; }
html[data-page="linux"] .sidebar-header.collapsed .chevron { transform: rotate(-90deg); }
html[data-page="linux"] .sidebar-links { list-style: none; padding: 0; margin: 0; overflow: hidden; transition: max-height .3s ease; }
html[data-page="linux"] .sidebar-links.collapsed { max-height: 0 !important; }
html[data-page="linux"] .sidebar-links li a { display: block; padding: 8px 20px 8px 32px; color: var(--text-dim); font-size: .88rem; transition: all .2s ease; border-left: 2px solid transparent; }
html[data-page="linux"] .sidebar-links li a:hover { color: var(--accent); background: rgba(56,189,248,.05); border-left-color: var(--accent); padding-left: 36px; }
html[data-page="linux"] .sidebar-links li a.active { color: var(--accent); background: rgba(56,189,248,.08); border-left-color: var(--accent-2); font-weight: 600; }
html[data-page="linux"] .sidebar-progress { padding: 16px 20px; border-top: 1px solid var(--line); margin-top: 16px; }
html[data-page="linux"] .sidebar-progress-label { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-dim); margin-bottom: 8px; }
html[data-page="linux"] .sidebar-progress-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
html[data-page="linux"] .sidebar-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 3px; transition: width .5s ease; width: 0%; }
html[data-page="linux"] .main-content { margin-left: var(--sidebar-width); flex: 1; min-width: 0; padding: 32px 40px; max-width: calc(100% - var(--sidebar-width)); }
html[data-page="linux"] .hero { padding: 40px 0 24px; position: relative; }
html[data-page="linux"] .hero-card { position: relative; border-radius: 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 30%), radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 28%), linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,12,20,.92)); box-shadow: var(--shadow); padding: 40px; }
html[data-page="linux"] .hero-card::before, html[data-page="linux"] .hero-card::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; filter: blur(18px); opacity: .55; }
html[data-page="linux"] .hero-card::before { width: 240px; height: 240px; background: rgba(56,189,248,.12); top: -70px; right: -40px; animation: drift-linux 10s ease-in-out infinite; }
html[data-page="linux"] .hero-card::after { width: 180px; height: 180px; background: rgba(34,197,94,.10); bottom: -55px; left: -30px; animation: drift-linux 12s ease-in-out infinite reverse; }
html[data-page="linux"] .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: #dbe4ef; font-size: .88rem; font-weight: 500; margin-bottom: 18px; }
html[data-page="linux"] .eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 6px rgba(34,197,94,.12); animation: pulse-linux 2s ease-in-out infinite; }
html[data-page="linux"] .hero h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
html[data-page="linux"] .grad { background: linear-gradient(90deg, #fff, #b9eaff 30%, #7ff2a6 70%, #d1c3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-page="linux"] .hero p { margin: 18px 0 0; max-width: 66ch; color: #cbd5e1; line-height: 1.85; font-size: 1.05rem; }
html[data-page="linux"] .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
html[data-page="linux"] .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: .88rem; color: var(--text-dim); }
html[data-page="linux"] .breadcrumb a { color: var(--accent); transition: color .2s ease; }
html[data-page="linux"] .breadcrumb a:hover { color: var(--text-bright); }
html[data-page="linux"] .breadcrumb .sep { opacity: .5; }
html[data-page="linux"] .content-section { padding: 40px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 14px); }
html[data-page="linux"] .content-section:last-child { border-bottom: none; }
html[data-page="linux"] .content-section h2 { font-size: 2rem; margin-bottom: 8px; color: var(--text-bright); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
html[data-page="linux"] .content-section h2 .section-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #07111c; font-size: .9rem; font-weight: 800; flex-shrink: 0; }
html[data-page="linux"] .content-section .section-subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 32px; line-height: 1.6; }
html[data-page="linux"] .content-section h3 { font-size: 1.35rem; margin: 32px 0 16px; color: var(--accent); font-weight: 700; }
html[data-page="linux"] .content-section h4 { font-size: 1.1rem; margin: 24px 0 10px; color: var(--text-bright); font-weight: 600; }
html[data-page="linux"] .content-section p { color: var(--text-dim); line-height: 1.9; margin-bottom: 16px; font-size: .97rem; }
html[data-page="linux"] .content-section ul, html[data-page="linux"] .content-section ol { color: var(--text-dim); line-height: 1.9; margin: 12px 0 16px 20px; font-size: .97rem; padding-left: 20px; }
html[data-page="linux"] .content-section li { margin-bottom: 8px; }
html[data-page="linux"] .content-section a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
html[data-page="linux"] .content-section a:hover { border-bottom-color: var(--accent); }
html[data-page="linux"] .content-section code.inline { background: rgba(56,189,248,.12); color: var(--accent); padding: 2px 8px; border-radius: 6px; font-family: 'Fira Code', 'Courier New', monospace; font-size: .88em; font-weight: 500; direction: ltr; display: inline-block; }
html[data-page="linux"] .content-section strong { color: var(--text-bright); }
html[data-page="linux"] .code-container { position: relative; margin: 24px 0; border-radius: 16px; overflow: hidden; background: #0a0e1a; border: 1px solid rgba(56,189,248,.18); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
html[data-page="linux"] .code-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: rgba(56,189,248,.06); border-bottom: 1px solid rgba(56,189,248,.1); font-size: .85rem; color: var(--text-dim); font-weight: 500; direction: ltr; }
html[data-page="linux"] .code-header .lang-label { display: flex; align-items: center; gap: 8px; }
html[data-page="linux"] .code-header .lang-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px rgba(34,197,94,.4); }
html[data-page="linux"] .code-copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--accent); color: #07111c; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-family: inherit; transition: all .2s ease; font-size: .82rem; }
html[data-page="linux"] .code-copy:hover { filter: brightness(1.1); transform: scale(1.05); }
html[data-page="linux"] .code-copy:active { transform: scale(.95); }
html[data-page="linux"] .code-copy.copied { background: var(--accent-2); color: #07111c; }
html[data-page="linux"] .code-block { padding: 18px; overflow-x: auto; font-family: 'Fira Code', 'Courier New', monospace; font-size: .88rem; line-height: 1.8; background: #0a0e1a; color: #e5e7eb; direction: ltr; text-align: left; }
html[data-page="linux"] .code-block::-webkit-scrollbar { height: 6px; }
html[data-page="linux"] .code-block::-webkit-scrollbar-track { background: transparent; }
html[data-page="linux"] .code-block::-webkit-scrollbar-thumb { background: rgba(56,189,248,.3); border-radius: 3px; }
html[data-page="linux"] .kw { color: var(--code-keyword); font-weight: 700; }
html[data-page="linux"] .str { color: var(--code-string); }
html[data-page="linux"] .cmm { color: var(--code-comment); font-style: italic; }
html[data-page="linux"] .fn { color: var(--code-function); font-weight: 700; }
html[data-page="linux"] .num { color: var(--code-number); }
html[data-page="linux"] .var { color: var(--code-variable); }
html[data-page="linux"] .op { color: var(--code-operator); }
html[data-page="linux"] .dec { color: #8be9fd; }
html[data-page="linux"] .explanation { background: rgba(34,197,94,.08); border-left: 3px solid var(--accent-2); padding: 18px 20px; margin: 20px 0; border-radius: 12px; color: var(--text-bright); font-size: .95rem; line-height: 1.8; }
html[data-page="linux"] .explanation strong { color: var(--accent-2); }
html[data-page="linux"] .explanation.warning { background: rgba(251,191,36,.08); border-left-color: #fbbf24; }
html[data-page="linux"] .explanation.warning strong { color: #fbbf24; }
html[data-page="linux"] .explanation.info { background: rgba(56,189,248,.08); border-left-color: var(--accent); }
html[data-page="linux"] .explanation.info strong { color: var(--accent); }
.doc-page .cmd-list { display: flex; flex-direction: column; gap: 20px; margin: 20px 0 24px; }
.doc-page .cmd-item .mini-code { margin: 0 0 8px; }
.doc-page .cmd-item .mini-code .code-header { padding: 8px 16px; }
.doc-page .cmd-item .mini-code .code-block { padding: 12px 16px; font-size: .88rem; line-height: 1.6; }
.doc-page .cmd-item .cmd-desc { color: var(--text-dim); font-size: .93rem; line-height: 1.7; margin: 0 2px; }
.doc-page .shortcut-list { list-style: none; margin: 16px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.doc-page .shortcut-list li { color: var(--text-dim); font-size: .93rem; line-height: 1.7; }
.doc-page .shortcut-list li code.inline { margin-right: 10px; min-width: 78px; text-align: center; }
html[data-page="linux"] .tip-box { background: rgba(167,139,250,.08); border-right: 3px solid var(--accent-3); padding: 16px 20px; margin: 16px 0; border-radius: 12px; color: var(--text-bright); font-size: .92rem; line-height: 1.7; }
html[data-page="linux"] .tip-box strong { color: var(--accent-3); }
html[data-page="linux"] .data-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
html[data-page="linux"] .data-table th, html[data-page="linux"] .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
html[data-page="linux"] .data-table th { background: rgba(56,189,248,.08); color: var(--accent); font-weight: 700; }
html[data-page="linux"] .data-table tr:hover { background: rgba(255,255,255,.02); }
html[data-page="linux"] .data-table td code { direction: ltr; }
html[data-page="linux"] .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 36px;text-align:left;}
html[data-page="linux"] .footer-col {display:flex;flex-direction:column;gap:10px;}
html[data-page="linux"] .footer-col h5 {margin:0 0 6px;font-size:.92rem;color:#fff;}
html[data-page="linux"] .footer-col a {color:var(--muted);font-size:.88rem;text-decoration:none;transition:color .2s ease;}
html[data-page="linux"] .footer-col a:hover {color:var(--cyan);}
html[data-page="linux"] .footer-name {display:block;font-size:1rem;font-weight:700;color:#fff;}
html[data-page="linux"] .footer-role {display:block;margin-top:2px;font-size:.82rem;color:var(--muted);}
html[data-page="linux"] .footer-tagline {margin:10px 0 0;font-size:.85rem;color:var(--muted);line-height:1.6;max-width:32ch;}
html[data-page="linux"] .footer-bottom-row {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);}
html[data-page="linux"] .footer-links {display:flex;gap:16px;flex-wrap:wrap;}
html[data-page="linux"] .footer-bottom {font-size:0.85rem;color:var(--muted);}
@media (max-width:820px) {
  html[data-page="linux"] .footer-grid {grid-template-columns:1fr 1fr;padding:40px 0 24px;}
  html[data-page="linux"] .footer-bottom-row {justify-content:center;text-align:center;}
}
@media (max-width:520px) {
  html[data-page="linux"] .footer-grid {grid-template-columns:1fr 1fr;}
}
@keyframes drift-linux { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(30px,-30px); } }
@keyframes pulse-linux { 0%, 100% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); } 50% { box-shadow: 0 0 0 10px rgba(34,197,94,.06); } }
@media (max-width: 1024px) {
html[data-page="linux"] .sidebar { transform: translateX(-100%); z-index: 110; }
html[data-page="linux"] .sidebar.open { transform: translateX(0); }
html[data-page="linux"] .sidebar-toggle { display: flex; bottom: 24px; left: 12px; width: 44px; height: 44px; }
html[data-page="linux"] .main-content { margin-left: 0; max-width: 100%; min-width: 0; width: 100%; padding: 24px; }
html[data-page="linux"] .search-container { max-width: 250px; }
}
@media (max-width: 768px) {
html[data-page="linux"] .hero-card { padding: 24px; }
html[data-page="linux"] .content-section h2 { font-size: 1.5rem; }
html[data-page="linux"] .content-section { padding: 28px 0; }
html[data-page="linux"] .topbar-inner { flex-wrap: wrap; }
html[data-page="linux"] .search-container { max-width: 100%; order: 3; margin-top: 8px; }
html[data-page="linux"] .data-table { font-size: .82rem; }
html[data-page="linux"] .data-table th, html[data-page="linux"] .data-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
html[data-page="linux"] .btn { padding: 10px 14px; font-size: .85rem; }
html[data-page="linux"] .brand { gap: 8px; }
html[data-page="linux"] .avatar { width: 40px; height: 40px; }
html[data-page="linux"] .avatar span { font-size: .95rem; }
html[data-page="linux"] .hero-card { padding: 20px; }
html[data-page="linux"] .main-content { padding: 16px; }
}

/* ==================== NETSEC PAGE ==================== */
html[data-page="netsec"] {
      --bg: #060913; --bg-1: #0b0f1a; --bg-2: #0f1525; --bg-card: rgba(15,21,37,.72);
      --line: rgba(148,163,184,.14); --text: #e5e7eb; --text-dim: #94a3b8; --text-bright: #f1f5f9;
      --accent: #38bdf8; --accent-2: #22c55e; --accent-3: #a78bfa;
      --shadow: 0 20px 60px rgba(0,0,0,.42); --radius: 26px; --radius-sm: 18px;
      --max: 1320px; --sidebar-width: 300px; --topbar-h: 76px;
      --code-keyword: #ff79c6; --code-string: #f1fa8c; --code-comment: #6272a4;
      --code-function: #50fa7b; --code-number: #bd93f9; --code-variable: #8be9fd; --code-operator: #ff79c6;
    }
html[data-page="netsec"] *, html[data-page="netsec"] *::before, html[data-page="netsec"] *::after { box-sizing: border-box; }
html[data-page="netsec"] :where(*:not(.global-header):not(.global-header *)), html[data-page="netsec"] *::before, html[data-page="netsec"] *::after { margin: 0; padding: 0; }
html[data-page="netsec"] { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
html[data-page="netsec"] body {
      margin: 0; max-width: 100vw;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      background: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(56,189,248,.10), transparent),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(167,139,250,.08), transparent),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(34,197,94,.06), transparent),
        linear-gradient(180deg, var(--bg), var(--bg-1) 40%, #04060b 100%);
      background-attachment: fixed; color: var(--text); min-height: 100vh;
    }
html[data-page="netsec"] a { color: inherit; text-decoration: none; }
html[data-page="netsec"] .wrap { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
html[data-page="netsec"] ::-webkit-scrollbar { width: 8px; }
html[data-page="netsec"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-page="netsec"] ::-webkit-scrollbar-thumb { background: rgba(56,189,248,.2); border-radius: 4px; }
html[data-page="netsec"] ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.35); }
html[data-page="netsec"] .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(6,9,19,.85); backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid rgba(255,255,255,.06); }
html[data-page="netsec"] .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; }
html[data-page="netsec"] .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
html[data-page="netsec"] .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3)); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 12px 30px rgba(0,0,0,.35); overflow: hidden; flex: 0 0 auto; cursor: pointer; transition: transform .3s ease; }
html[data-page="netsec"] .avatar:hover { transform: scale(1.1); }
html[data-page="netsec"] .avatar span { font-weight: 800; color: #fff; letter-spacing: .5px; font-size: 1.1rem; }
html[data-page="netsec"] .brand-text h1 { margin: 0; font-size: 1.05rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--text-bright); }
html[data-page="netsec"] .brand-text small { display: block; margin-top: 3px; color: var(--text-dim); font-size: .82rem; font-weight: 500; }
html[data-page="netsec"] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: .9rem; transition: all .25s cubic-bezier(.4,0,.2,1); cursor: pointer; font-family: inherit; white-space: nowrap; }
html[data-page="netsec"] .btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
html[data-page="netsec"] .btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #07111c; border-color: transparent; box-shadow: 0 14px 30px rgba(34,197,94,.18); }
html[data-page="netsec"] .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 18px 40px rgba(34,197,94,.25); }
html[data-page="netsec"] .btn.back-btn { padding: 10px 16px; font-size: .88rem; background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.2); color: var(--accent); }
html[data-page="netsec"] .btn.back-btn:hover { background: rgba(56,189,248,.15); transform: translateX(4px); border-color: rgba(56,189,248,.35); }
html[data-page="netsec"] .search-container { position: relative; max-width: 400px; width: 100%; }
html[data-page="netsec"] .search-input { width: 100%; padding: 10px 44px 10px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); font-family: inherit; font-size: .9rem; transition: all .25s ease; outline: none; }
html[data-page="netsec"] .search-input:focus { border-color: var(--accent); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(56,189,248,.1); }
html[data-page="netsec"] .search-input::placeholder { color: var(--text-dim); }
html[data-page="netsec"] .doc-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
html[data-page="netsec"] .search-results { position: absolute; top: calc(100% + 8px); left: 0; background: #0f1525; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-height: 400px; overflow-y: auto; z-index: 200; display: none; }
html[data-page="netsec"] .search-results.active { display: block; }
html[data-page="netsec"] .search-result-item { padding: 12px 16px; cursor: pointer; transition: background .2s ease; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
html[data-page="netsec"] .search-result-item:last-child { border-bottom: none; }
html[data-page="netsec"] .search-result-item:hover { background: rgba(56,189,248,.08); }
html[data-page="netsec"] .search-result-item .result-title { font-weight: 600; color: var(--text-bright); font-size: .9rem; }
html[data-page="netsec"] .search-result-item .result-desc { font-size: .8rem; color: var(--text-dim); }
html[data-page="netsec"] .main-layout { display: flex; min-height: calc(100vh - var(--topbar-h)); margin-top: var(--topbar-h); }
html[data-page="netsec"] .sidebar { width: var(--sidebar-width); position: fixed; left: 0; top: var(--topbar-h); bottom: 0; background: rgba(6,9,19,.92); backdrop-filter: blur(20px); border-right: 1px solid var(--line); overflow-y: auto; z-index: 50; padding: 20px 0; transition: transform .3s ease; }
html[data-page="netsec"] .sidebar-toggle { display: none; position: fixed; bottom: 24px; left: 24px; z-index: 60; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #07111c; font-size: 1.3rem; cursor: pointer; box-shadow: 0 8px 30px rgba(56,189,248,.3); transition: transform .3s ease; align-items: center; justify-content: center; }
html[data-page="netsec"] .sidebar-toggle:hover { transform: scale(1.1); }
html[data-page="netsec"] .scroll-top-btn { position: fixed; bottom: 24px; right: 24px; z-index: 61; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-3), var(--accent)); border: none; color: #07111c; font-size: 1.2rem; cursor: pointer; box-shadow: 0 8px 30px rgba(167,139,250,.3); transition: all .3s cubic-bezier(.4,0,.2,1); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); }
html[data-page="netsec"] .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
html[data-page="netsec"] .scroll-top-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 12px 40px rgba(167,139,250,.4); }
html[data-page="netsec"] .scroll-top-btn:active { transform: scale(0.95); }
html[data-page="netsec"] .sidebar-section { margin-bottom: 8px; }
html[data-page="netsec"] .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; cursor: pointer; font-weight: 700; color: var(--text-bright); font-size: .92rem; transition: background .2s ease; user-select: none; }
html[data-page="netsec"] .sidebar-header:hover { background: rgba(255,255,255,.03); }
html[data-page="netsec"] .sidebar-header .chevron { transition: transform .3s ease; font-size: .8rem; }
html[data-page="netsec"] .sidebar-header.collapsed .chevron { transform: rotate(-90deg); }
html[data-page="netsec"] .sidebar-links { list-style: none; padding: 0; margin: 0; overflow: hidden; transition: max-height .3s ease; }
html[data-page="netsec"] .sidebar-links.collapsed { max-height: 0 !important; }
html[data-page="netsec"] .sidebar-links li a { display: block; padding: 8px 20px 8px 32px; color: var(--text-dim); font-size: .88rem; transition: all .2s ease; border-left: 2px solid transparent; }
html[data-page="netsec"] .sidebar-links li a:hover { color: var(--accent); background: rgba(56,189,248,.05); border-left-color: var(--accent); padding-left: 36px; }
html[data-page="netsec"] .sidebar-links li a.active { color: var(--accent); background: rgba(56,189,248,.08); border-left-color: var(--accent-2); font-weight: 600; }
html[data-page="netsec"] .sidebar-progress { padding: 16px 20px; border-top: 1px solid var(--line); margin-top: 16px; }
html[data-page="netsec"] .sidebar-progress-label { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-dim); margin-bottom: 8px; }
html[data-page="netsec"] .sidebar-progress-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
html[data-page="netsec"] .sidebar-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 3px; transition: width .5s ease; width: 0%; }
html[data-page="netsec"] .main-content { margin-left: var(--sidebar-width); flex: 1; min-width: 0; padding: 32px 40px; max-width: calc(100% - var(--sidebar-width)); }
html[data-page="netsec"] .hero { padding: 40px 0 24px; position: relative; }
html[data-page="netsec"] .hero-card { position: relative; border-radius: 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 30%), radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 28%), linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,12,20,.92)); box-shadow: var(--shadow); padding: 40px; }
html[data-page="netsec"] .hero-card::before, html[data-page="netsec"] .hero-card::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; filter: blur(18px); opacity: .55; }
html[data-page="netsec"] .hero-card::before { width: 240px; height: 240px; background: rgba(56,189,248,.12); top: -70px; right: -40px; animation: drift-netsec 10s ease-in-out infinite; }
html[data-page="netsec"] .hero-card::after { width: 180px; height: 180px; background: rgba(34,197,94,.10); bottom: -55px; left: -30px; animation: drift-netsec 12s ease-in-out infinite reverse; }
html[data-page="netsec"] .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: #dbe4ef; font-size: .88rem; font-weight: 500; margin-bottom: 18px; }
html[data-page="netsec"] .eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 6px rgba(34,197,94,.12); animation: pulse-netsec 2s ease-in-out infinite; }
html[data-page="netsec"] .hero h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
html[data-page="netsec"] .grad { background: linear-gradient(90deg, #fff, #b9eaff 30%, #7ff2a6 70%, #d1c3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-page="netsec"] .hero p { margin: 18px 0 0; max-width: 66ch; color: #cbd5e1; line-height: 1.85; font-size: 1.05rem; }
html[data-page="netsec"] .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
html[data-page="netsec"] .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: .88rem; color: var(--text-dim); }
html[data-page="netsec"] .breadcrumb a { color: var(--accent); transition: color .2s ease; }
html[data-page="netsec"] .breadcrumb a:hover { color: var(--text-bright); }
html[data-page="netsec"] .breadcrumb .sep { opacity: .5; }
html[data-page="netsec"] .content-section { padding: 40px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 14px); }
html[data-page="netsec"] .content-section:last-child { border-bottom: none; }
html[data-page="netsec"] .content-section h2 { font-size: 2rem; margin-bottom: 8px; color: var(--text-bright); font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; }
html[data-page="netsec"] .content-section h2 .section-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #07111c; font-size: .9rem; font-weight: 800; flex-shrink: 0; }
html[data-page="netsec"] .content-section .section-subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 32px; line-height: 1.6; }
html[data-page="netsec"] .content-section h3 { font-size: 1.35rem; margin: 32px 0 16px; color: var(--accent); font-weight: 700; }
html[data-page="netsec"] .content-section h4 { font-size: 1.1rem; margin: 24px 0 10px; color: var(--text-bright); font-weight: 600; }
html[data-page="netsec"] .content-section p { color: var(--text-dim); line-height: 1.9; margin-bottom: 16px; font-size: .97rem; }
html[data-page="netsec"] .content-section ul, html[data-page="netsec"] .content-section ol { color: var(--text-dim); line-height: 1.9; margin: 12px 0 16px 20px; font-size: .97rem; padding-left: 20px; }
html[data-page="netsec"] .content-section li { margin-bottom: 8px; }
html[data-page="netsec"] .content-section a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
html[data-page="netsec"] .content-section a:hover { border-bottom-color: var(--accent); }
html[data-page="netsec"] .content-section code.inline { background: rgba(56,189,248,.12); color: var(--accent); padding: 2px 8px; border-radius: 6px; font-family: 'Fira Code', 'Courier New', monospace; font-size: .88em; font-weight: 500; direction: ltr; display: inline-block; }
html[data-page="netsec"] .content-section strong { color: var(--text-bright); }
html[data-page="netsec"] .code-container { position: relative; margin: 24px 0; border-radius: 16px; overflow: hidden; background: #0a0e1a; border: 1px solid rgba(56,189,248,.18); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
html[data-page="netsec"] .code-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: rgba(56,189,248,.06); border-bottom: 1px solid rgba(56,189,248,.1); font-size: .85rem; color: var(--text-dim); font-weight: 500; direction: ltr; }
html[data-page="netsec"] .code-header .lang-label { display: flex; align-items: center; gap: 8px; }
html[data-page="netsec"] .code-header .lang-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px rgba(34,197,94,.4); }
html[data-page="netsec"] .code-copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--accent); color: #07111c; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-family: inherit; transition: all .2s ease; font-size: .82rem; }
html[data-page="netsec"] .code-copy:hover { filter: brightness(1.1); transform: scale(1.05); }
html[data-page="netsec"] .code-copy:active { transform: scale(.95); }
html[data-page="netsec"] .code-copy.copied { background: var(--accent-2); color: #07111c; }
html[data-page="netsec"] .code-block { padding: 18px; overflow-x: auto; font-family: 'Fira Code', 'Courier New', monospace; font-size: .88rem; line-height: 1.8; background: #0a0e1a; color: #e5e7eb; direction: ltr; text-align: left; }
html[data-page="netsec"] .code-block::-webkit-scrollbar { height: 6px; }
html[data-page="netsec"] .code-block::-webkit-scrollbar-track { background: transparent; }
html[data-page="netsec"] .code-block::-webkit-scrollbar-thumb { background: rgba(56,189,248,.3); border-radius: 3px; }
html[data-page="netsec"] .kw { color: var(--code-keyword); font-weight: 700; }
html[data-page="netsec"] .str { color: var(--code-string); }
html[data-page="netsec"] .cmm { color: var(--code-comment); font-style: italic; }
html[data-page="netsec"] .fn { color: var(--code-function); font-weight: 700; }
html[data-page="netsec"] .num { color: var(--code-number); }
html[data-page="netsec"] .var { color: var(--code-variable); }
html[data-page="netsec"] .op { color: var(--code-operator); }
html[data-page="netsec"] .dec { color: #8be9fd; }
html[data-page="netsec"] .explanation { background: rgba(34,197,94,.08); border-left: 3px solid var(--accent-2); padding: 18px 20px; margin: 20px 0; border-radius: 12px; color: var(--text-bright); font-size: .95rem; line-height: 1.8; }
html[data-page="netsec"] .explanation strong { color: var(--accent-2); }
html[data-page="netsec"] .explanation.warning { background: rgba(251,191,36,.08); border-left-color: #fbbf24; }
html[data-page="netsec"] .explanation.warning strong { color: #fbbf24; }
html[data-page="netsec"] .explanation.info { background: rgba(56,189,248,.08); border-left-color: var(--accent); }
html[data-page="netsec"] .explanation.info strong { color: var(--accent); }
html[data-page="netsec"] .tip-box { background: rgba(167,139,250,.08); border-right: 3px solid var(--accent-3); padding: 16px 20px; margin: 16px 0; border-radius: 12px; color: var(--text-bright); font-size: .92rem; line-height: 1.7; }
html[data-page="netsec"] .tip-box strong { color: var(--accent-3); }
html[data-page="netsec"] .data-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .9rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
html[data-page="netsec"] .data-table th, html[data-page="netsec"] .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
html[data-page="netsec"] .data-table th { background: rgba(56,189,248,.08); color: var(--accent); font-weight: 700; }
html[data-page="netsec"] .data-table tr:hover { background: rgba(255,255,255,.02); }
html[data-page="netsec"] .data-table td code { direction: ltr; }
html[data-page="netsec"] .footer-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 36px;text-align:left;}
html[data-page="netsec"] .footer-col {display:flex;flex-direction:column;gap:10px;}
html[data-page="netsec"] .footer-col h5 {margin:0 0 6px;font-size:.92rem;color:#fff;}
html[data-page="netsec"] .footer-col a {color:var(--muted);font-size:.88rem;text-decoration:none;transition:color .2s ease;}
html[data-page="netsec"] .footer-col a:hover {color:var(--cyan);}
html[data-page="netsec"] .footer-name {display:block;font-size:1rem;font-weight:700;color:#fff;}
html[data-page="netsec"] .footer-role {display:block;margin-top:2px;font-size:.82rem;color:var(--muted);}
html[data-page="netsec"] .footer-tagline {margin:10px 0 0;font-size:.85rem;color:var(--muted);line-height:1.6;max-width:32ch;}
html[data-page="netsec"] .footer-bottom-row {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);}
html[data-page="netsec"] .footer-links {display:flex;gap:16px;flex-wrap:wrap;}
html[data-page="netsec"] .footer-bottom {font-size:0.85rem;color:var(--muted);}
@media (max-width:820px) {
  html[data-page="netsec"] .footer-grid {grid-template-columns:1fr 1fr;padding:40px 0 24px;}
  html[data-page="netsec"] .footer-bottom-row {justify-content:center;text-align:center;}
}
@media (max-width:520px) {
  html[data-page="netsec"] .footer-grid {grid-template-columns:1fr 1fr;}
}
@keyframes drift-netsec { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(30px,-30px); } }
@keyframes pulse-netsec { 0%, 100% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); } 50% { box-shadow: 0 0 0 10px rgba(34,197,94,.06); } }
@media (max-width: 1024px) {
html[data-page="netsec"] .sidebar { transform: translateX(-100%); z-index: 110; }
html[data-page="netsec"] .sidebar.open { transform: translateX(0); }
html[data-page="netsec"] .sidebar-toggle { display: flex; bottom: 24px; left: 12px; width: 44px; height: 44px; }
html[data-page="netsec"] .main-content { margin-left: 0; max-width: 100%; min-width: 0; width: 100%; padding: 24px; }
html[data-page="netsec"] .search-container { max-width: 250px; }
}
@media (max-width: 768px) {
html[data-page="netsec"] .hero-card { padding: 24px; }
html[data-page="netsec"] .content-section h2 { font-size: 1.5rem; }
html[data-page="netsec"] .content-section { padding: 28px 0; }
html[data-page="netsec"] .topbar-inner { flex-wrap: wrap; }
html[data-page="netsec"] .search-container { max-width: 100%; order: 3; margin-top: 8px; }
html[data-page="netsec"] .data-table { font-size: .82rem; }
html[data-page="netsec"] .data-table th, html[data-page="netsec"] .data-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
html[data-page="netsec"] .btn { padding: 10px 14px; font-size: .85rem; }
html[data-page="netsec"] .brand { gap: 8px; }
html[data-page="netsec"] .avatar { width: 40px; height: 40px; }
html[data-page="netsec"] .avatar span { font-size: .95rem; }
html[data-page="netsec"] .hero-card { padding: 20px; }
html[data-page="netsec"] .main-content { padding: 16px; }
}

/* ==================== PYTHON PAGE ==================== */
html[data-page="python"] {
      --bg: #060913;
      --bg-1: #0b0f1a;
      --bg-2: #0f1525;
      --bg-card: rgba(15, 21, 37, .72);
      --line: rgba(148, 163, 184, .14);
      --text: #e5e7eb;
      --text-dim: #94a3b8;
      --text-bright: #f1f5f9;
      --accent: #38bdf8;
      --accent-2: #22c55e;
      --accent-3: #a78bfa;
      --shadow: 0 20px 60px rgba(0,0,0,.42);
      --radius: 26px;
      --radius-sm: 18px;
      --max: 1320px;
      --sidebar-width: 300px;
      --topbar-h: 76px;
      --code-keyword: #ff79c6;
      --code-string: #f1fa8c;
      --code-comment: #6272a4;
      --code-function: #50fa7b;
      --code-number: #bd93f9;
      --code-variable: #8be9fd;
      --code-operator: #ff79c6;
    }
html[data-page="python"] *, html[data-page="python"] *::before, html[data-page="python"] *::after { box-sizing: border-box; }
html[data-page="python"] :where(*:not(.global-header):not(.global-header *)), html[data-page="python"] *::before, html[data-page="python"] *::after { margin: 0; padding: 0; }
html[data-page="python"] { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
html[data-page="python"] body {
      margin: 0;
      max-width: 100vw;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(56,189,248,.10), transparent),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(167,139,250,.08), transparent),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(34,197,94,.06), transparent),
        linear-gradient(180deg, var(--bg), var(--bg-1) 40%, #04060b 100%);
      background-attachment: fixed;
      color: var(--text);
      min-height: 100vh;
      
    }
html[data-page="python"] a { color: inherit; text-decoration: none; }
html[data-page="python"] .wrap { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
html[data-page="python"] ::-webkit-scrollbar { width: 8px; }
html[data-page="python"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-page="python"] ::-webkit-scrollbar-thumb { background: rgba(56,189,248,.2); border-radius: 4px; }
html[data-page="python"] ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.35); }
html[data-page="python"] /* TOPBAR */
    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(6, 9, 19, .85);
      backdrop-filter: blur(24px) saturate(1.4);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
html[data-page="python"] .topbar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 14px 0;
    }
html[data-page="python"] .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
html[data-page="python"] .avatar {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
      display: grid; place-items: center;
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      overflow: hidden;
      flex: 0 0 auto;
      cursor: pointer;
      transition: transform .3s ease;
    }
html[data-page="python"] .avatar:hover { transform: scale(1.1); }
html[data-page="python"] .avatar span {
      font-weight: 800;
      color: #fff;
      letter-spacing: .5px;
      font-size: 1.1rem;
    }
html[data-page="python"] .brand-text h1 {
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 700;
      color: var(--text-bright);
    }
html[data-page="python"] .brand-text small {
      display: block;
      margin-top: 3px;
      color: var(--text-dim);
      font-size: .82rem;
      font-weight: 500;
    }
html[data-page="python"] .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 18px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-weight: 600;
      font-size: .9rem;
      transition: all .25s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
    }
html[data-page="python"] .btn:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.18);
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
    }
html[data-page="python"] .btn.primary {
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      color: #07111c;
      border-color: transparent;
      box-shadow: 0 14px 30px rgba(34,197,94,.18);
    }
html[data-page="python"] .btn.primary:hover {
      filter: brightness(1.08);
      box-shadow: 0 18px 40px rgba(34,197,94,.25);
    }
html[data-page="python"] .btn.back-btn {
      padding: 10px 16px;
      font-size: .88rem;
      background: rgba(56,189,248,.08);
      border-color: rgba(56,189,248,.2);
      color: var(--accent);
    }
html[data-page="python"] .btn.back-btn:hover {
      background: rgba(56,189,248,.15);
      transform: translateX(4px);
      border-color: rgba(56,189,248,.35);
    }
html[data-page="python"] /* SEARCH */
    .search-container {
      position: relative;
      max-width: 400px;
      width: 100%;
    }
html[data-page="python"] .search-input {
      width: 100%;
      padding: 10px 44px 10px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-family: inherit;
      font-size: .9rem;
      transition: all .25s ease;
      outline: none;
    }
html[data-page="python"] .search-input:focus {
      border-color: var(--accent);
      background: rgba(255,255,255,.06);
      box-shadow: 0 0 0 3px rgba(56,189,248,.1);
    }
html[data-page="python"] .search-input::placeholder { color: var(--text-dim); }
html[data-page="python"] .doc-search-icon {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-dim);
      pointer-events: none;
    }
html[data-page="python"] .search-results {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      left: 0;
      background: #0f1525;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow);
      max-height: 400px;
      overflow-y: auto;
      z-index: 200;
      display: none;
    }
html[data-page="python"] .search-results.active { display: block; }
html[data-page="python"] .search-result-item {
      padding: 12px 16px;
      cursor: pointer;
      transition: background .2s ease;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 10px;
    }
html[data-page="python"] .search-result-item:last-child { border-bottom: none; }
html[data-page="python"] .search-result-item:hover { background: rgba(56,189,248,.08); }
html[data-page="python"] .search-result-item .result-title {
      font-weight: 600;
      color: var(--text-bright);
      font-size: .9rem;
    }
html[data-page="python"] .search-result-item .result-desc {
      font-size: .8rem;
      color: var(--text-dim);
    }
html[data-page="python"] /* LAYOUT */
    .main-layout { display: flex; min-height: calc(100vh - var(--topbar-h)); margin-top: var(--topbar-h); }
html[data-page="python"] /* SIDEBAR */
    .sidebar {
      width: var(--sidebar-width);
      position: fixed;
      left: 0;
      top: var(--topbar-h);
      bottom: 0;
      background: rgba(6, 9, 19, .92);
      backdrop-filter: blur(20px);
      border-right: 1px solid var(--line);
      overflow-y: auto;
      z-index: 50;
      padding: 20px 0;
      transition: transform .3s ease;
    }
html[data-page="python"] .sidebar-toggle {
      display: none;
      position: fixed;
      bottom: 24px;
      left: 24px;
      z-index: 60;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      border: none;
      color: #07111c;
      font-size: 1.3rem;
      cursor: pointer;
      box-shadow: 0 8px 30px rgba(56,189,248,.3);
      transition: transform .3s ease;
      align-items: center;
      justify-content: center;
    }
html[data-page="python"] .sidebar-toggle:hover { transform: scale(1.1); }
html[data-page="python"] /* ─── Scroll to Top Button ─── */
    .scroll-top-btn {
      position: fixed;
      bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
      right: max(24px, calc(24px + env(safe-area-inset-right)));
      z-index: 61;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-3), var(--accent));
      border: none;
      color: #07111c;
      font-size: 1.2rem;
      cursor: pointer;
      box-shadow: 0 8px 30px rgba(167,139,250,.3);
      transition: all .3s cubic-bezier(.4,0,.2,1);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
    }
html[data-page="python"] .scroll-top-btn.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
html[data-page="python"] .scroll-top-btn:hover {
      transform: scale(1.1) translateY(-2px);
      box-shadow: 0 12px 40px rgba(167,139,250,.4);
    }
html[data-page="python"] .scroll-top-btn:active {
      transform: scale(0.95);
    }
@media (max-width: 1024px) {
html[data-page="python"] .scroll-top-btn {
        bottom: 88px;
        right: 16px;
        width: 42px;
        height: 42px;
      }
}
@media (max-width: 480px) {
html[data-page="python"] .scroll-top-btn {
        bottom: 88px;
        right: 24px;
        width: 42px;
        height: 42px;
        box-shadow: 0 4px 12px rgba(167,139,250,.2);
      }
html[data-page="python"] .scroll-top-btn svg {
        width: 18px;
        height: 18px;
      }
html[data-page="python"] .scroll-top-btn.visible {
        transform: translateY(0) translateX(0);
      }
}
@media (hover: none) {
html[data-page="python"] .scroll-top-btn:hover {
        transform: none;
        box-shadow: 0 8px 30px rgba(167,139,250,.3);
      }
}
/* ─── Mobile Button Safeguards ─── */
    @media (max-width: 480px) {
      html[data-page="python"] .scroll-top-btn {
        max-width: calc(100vw - 48px);
        max-height: calc(100vh - 48px);
        margin-right: env(safe-area-inset-right);
      }
      html[data-page="python"] .sidebar-toggle {
        max-width: calc(100vw - 48px);
        max-height: calc(100vh - 48px);
        margin-left: env(safe-area-inset-left);
      }
    }
html[data-page="python"] .sidebar-section { margin-bottom: 8px; }
html[data-page="python"] .sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      cursor: pointer;
      font-weight: 700;
      color: var(--text-bright);
      font-size: .92rem;
      transition: background .2s ease;
      user-select: none;
    }
html[data-page="python"] .sidebar-header:hover { background: rgba(255,255,255,.03); }
html[data-page="python"] .sidebar-header .chevron {
      transition: transform .3s ease;
      font-size: .8rem;
    }
html[data-page="python"] .sidebar-header.collapsed .chevron { transform: rotate(-90deg); }
html[data-page="python"] .sidebar-links {
      list-style: none;
      padding: 0;
      margin: 0;
      overflow: hidden;
      transition: max-height .3s ease;
    }
html[data-page="python"] .sidebar-links.collapsed { max-height: 0 !important; }
html[data-page="python"] .sidebar-links li a {
      display: block;
      padding: 8px 20px 8px 32px;
      color: var(--text-dim);
      font-size: .88rem;
      transition: all .2s ease;
      border-left: 2px solid transparent;
    }
html[data-page="python"] .sidebar-links li a:hover {
      color: var(--accent);
      background: rgba(56,189,248,.05);
      border-left-color: var(--accent);
      padding-left: 36px;
    }
html[data-page="python"] .sidebar-links li a.active {
      color: var(--accent);
      background: rgba(56,189,248,.08);
      border-left-color: var(--accent-2);
      font-weight: 600;
    }
html[data-page="python"] .sidebar-progress {
      padding: 16px 20px;
      border-top: 1px solid var(--line);
      margin-top: 16px;
    }
html[data-page="python"] .sidebar-progress-label {
      display: flex;
      justify-content: space-between;
      font-size: .82rem;
      color: var(--text-dim);
      margin-bottom: 8px;
    }
html[data-page="python"] .sidebar-progress-bar {
      height: 6px;
      background: rgba(255,255,255,.06);
      border-radius: 3px;
      overflow: hidden;
    }
html[data-page="python"] .sidebar-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
      border-radius: 3px;
      transition: width .5s ease;
      width: 0%;
    }
html[data-page="python"] /* MAIN CONTENT */
    .main-content {
      margin-left: var(--sidebar-width);
      flex: 1;
      min-width: 0;
      padding: 32px 40px;
      max-width: calc(100% - var(--sidebar-width));
    }
html[data-page="python"] /* HERO */
    .hero { padding: 40px 0 24px; position: relative; }
html[data-page="python"] .hero-card {
      position: relative;
      border-radius: 32px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 30%),
        radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 28%),
        linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,12,20,.92));
      box-shadow: var(--shadow);
      padding: 40px;
    }
html[data-page="python"] .hero-card::before, html[data-page="python"] .hero-card::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(18px);
      opacity: .55;
    }
html[data-page="python"] .hero-card::before {
      width: 240px; height: 240px;
      background: rgba(56,189,248,.12);
      top: -70px; right: -40px;
      animation: drift-python 10s ease-in-out infinite;
    }
html[data-page="python"] .hero-card::after {
      width: 180px; height: 180px;
      background: rgba(34,197,94,.10);
      bottom: -55px; left: -30px;
      animation: drift-python 12s ease-in-out infinite reverse;
    }
html[data-page="python"] .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.05);
      color: #dbe4ef;
      font-size: .88rem;
      font-weight: 500;
      margin-bottom: 18px;
    }
html[data-page="python"] .eyebrow .dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: var(--accent-2);
      box-shadow: 0 0 0 6px rgba(34,197,94,.12);
      animation: pulse-python 2s ease-in-out infinite;
    }
html[data-page="python"] .hero h2 {
      margin: 0;
      font-size: clamp(2rem, 3.5vw, 3.5rem);
      line-height: 1.15;
      letter-spacing: -.02em;
      font-weight: 800;
    }
html[data-page="python"] .grad {
      background: linear-gradient(90deg, #fff, #b9eaff 30%, #7ff2a6 70%, #d1c3ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
html[data-page="python"] .hero p {
      margin: 18px 0 0;
      max-width: 66ch;
      color: #cbd5e1;
      line-height: 1.85;
      font-size: 1.05rem;
    }
html[data-page="python"] .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }
html[data-page="python"] /* BREADCRUMB */
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
      font-size: .88rem;
      color: var(--text-dim);
    }
html[data-page="python"] .breadcrumb a { color: var(--accent); transition: color .2s ease; }
html[data-page="python"] .breadcrumb a:hover { color: var(--text-bright); }
html[data-page="python"] .breadcrumb .sep { opacity: .5; }
html[data-page="python"] /* CONTENT SECTIONS */
    .content-section {
      padding: 40px 0;
      border-bottom: 1px solid var(--line);
      scroll-margin-top: calc(var(--topbar-h) + 14px);
    }
html[data-page="python"] .content-section:last-child { border-bottom: none; }
html[data-page="python"] .content-section h2 {
      font-size: 2rem;
      margin-bottom: 8px;
      color: var(--text-bright);
      font-weight: 800;
      letter-spacing: -.02em;
      display: flex;
      align-items: center;
      gap: 12px;
    }
html[data-page="python"] .content-section h2 .section-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      color: #07111c;
      font-size: .9rem;
      font-weight: 800;
      flex-shrink: 0;
    }
html[data-page="python"] .content-section .section-subtitle {
      color: var(--text-dim);
      font-size: 1rem;
      margin-bottom: 32px;
      line-height: 1.6;
    }
html[data-page="python"] .content-section h3 {
      font-size: 1.35rem;
      margin: 32px 0 16px;
      color: var(--accent);
      font-weight: 700;
    }
html[data-page="python"] .content-section h4 {
      font-size: 1.1rem;
      margin: 24px 0 10px;
      color: var(--text-bright);
      font-weight: 600;
    }
html[data-page="python"] .content-section p {
      color: var(--text-dim);
      line-height: 1.9;
      margin-bottom: 16px;
      font-size: .97rem;
    }
html[data-page="python"] .content-section ul, html[data-page="python"] .content-section ol {
      color: var(--text-dim);
      line-height: 1.9;
      margin: 12px 0 16px 20px;
      font-size: .97rem;
      padding-left: 20px;
    }
html[data-page="python"] .content-section li { margin-bottom: 8px; }
html[data-page="python"] .content-section a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
html[data-page="python"] .content-section a:hover { border-bottom-color: var(--accent); }
html[data-page="python"] .content-section code.inline {
      background: rgba(56,189,248,.12);
      color: var(--accent);
      padding: 2px 8px;
      border-radius: 6px;
      font-family: 'Fira Code', 'Courier New', monospace;
      font-size: .88em;
      font-weight: 500;
      direction: ltr;
      display: inline-block;
    }
html[data-page="python"] .content-section strong { color: var(--text-bright); }
html[data-page="python"] /* CODE BLOCKS */
    .code-container {
      position: relative;
      margin: 24px 0;
      border-radius: 16px;
      overflow: hidden;
      background: #0a0e1a;
      border: 1px solid rgba(56,189,248,.18);
      box-shadow: 0 8px 32px rgba(0,0,0,.3);
    }
html[data-page="python"] .code-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 18px;
      background: rgba(56,189,248,.06);
      border-bottom: 1px solid rgba(56,189,248,.1);
      font-size: .85rem;
      color: var(--text-dim);
      font-weight: 500;
      direction: ltr;
    }
html[data-page="python"] .code-header .lang-label {
      display: flex;
      align-items: center;
      gap: 8px;
    }
html[data-page="python"] .code-header .lang-label::before {
      content: "";
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--accent-2);
      box-shadow: 0 0 8px rgba(34,197,94,.4);
    }
html[data-page="python"] .code-copy {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      background: var(--accent);
      color: #07111c;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      font-family: inherit;
      transition: all .2s ease;
      font-size: .82rem;
    }
html[data-page="python"] .code-copy:hover { filter: brightness(1.1); transform: scale(1.05); }
html[data-page="python"] .code-copy:active { transform: scale(.95); }
html[data-page="python"] .code-copy.copied { background: var(--accent-2); color: #07111c; }
html[data-page="python"] .code-block {
      padding: 18px;
      overflow-x: auto;
      font-family: 'Fira Code', 'Courier New', monospace;
      font-size: .88rem;
      line-height: 1.8;
      background: #0a0e1a;
      color: #e5e7eb;
      direction: ltr;
      text-align: left;
    }
html[data-page="python"] .code-block::-webkit-scrollbar { height: 6px; }
html[data-page="python"] .code-block::-webkit-scrollbar-track { background: transparent; }
html[data-page="python"] .code-block::-webkit-scrollbar-thumb { background: rgba(56,189,248,.3); border-radius: 3px; }
html[data-page="python"] .kw { color: var(--code-keyword); font-weight: 700; }
html[data-page="python"] .str { color: var(--code-string); }
html[data-page="python"] .cmm { color: var(--code-comment); font-style: italic; }
html[data-page="python"] .fn { color: var(--code-function); font-weight: 700; }
html[data-page="python"] .num { color: var(--code-number); }
html[data-page="python"] .var { color: var(--code-variable); }
html[data-page="python"] .op { color: var(--code-operator); }
html[data-page="python"] .dec { color: #8be9fd; }
html[data-page="python"] .explanation {
      background: rgba(34,197,94,.08);
      border-left: 3px solid var(--accent-2);
      padding: 18px 20px;
      margin: 20px 0;
      border-radius: 12px;
      color: var(--text-bright);
      font-size: .95rem;
      line-height: 1.8;
    }
html[data-page="python"] .explanation strong { color: var(--accent-2); }
html[data-page="python"] .explanation.warning {
      background: rgba(251, 191, 36, .08);
      border-left-color: #fbbf24;
    }
html[data-page="python"] .explanation.warning strong { color: #fbbf24; }
html[data-page="python"] .explanation.info {
      background: rgba(56,189,248,.08);
      border-left-color: var(--accent);
    }
html[data-page="python"] .explanation.info strong { color: var(--accent); }
html[data-page="python"] .tip-box {
      background: rgba(167,139,250,.08);
      border-right: 3px solid var(--accent-3);
      padding: 16px 20px;
      margin: 16px 0;
      border-radius: 12px;
      color: var(--text-bright);
      font-size: .92rem;
      line-height: 1.7;
    }
html[data-page="python"] .tip-box strong { color: var(--accent-3); }
html[data-page="python"] /* TABLES */
    .data-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      font-size: .9rem;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
    }
html[data-page="python"] .data-table th, html[data-page="python"] .data-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid var(--line);
    }
html[data-page="python"] .data-table th {
      background: rgba(56,189,248,.08);
      color: var(--accent);
      font-weight: 700;
    }
html[data-page="python"] .data-table tr:hover { background: rgba(255,255,255,.02); }
html[data-page="python"] .data-table td code { direction: ltr; }
html[data-page="python"] /* FOOTER */
    .footer {
      margin-top: 60px;
      padding: 40px 0 32px;
      border-top: 1px solid var(--line);
      text-align: center;
      color: var(--text-dim);
      font-size: .88rem;
    }
html[data-page="python"] .footer a { color: var(--accent); transition: color .2s ease; }
html[data-page="python"] .footer a:hover { color: var(--text-bright); }
html[data-page="python"] .footer-socials {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 20px;
    }
html[data-page="python"] .footer-socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      border-radius: 14px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      transition: all .25s ease;
    }
html[data-page="python"] .footer-socials a:hover {
      background: rgba(56,189,248,.12);
      border-color: rgba(56,189,248,.25);
      transform: translateY(-3px);
    }
html[data-page="python"] .footer-links {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
html[data-page="python"] .footer-links a { color: var(--text-dim); font-size: .85rem; transition: color .2s ease; }
html[data-page="python"] .footer-links a:hover { color: var(--accent); }
html[data-page="python"] .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 36px; text-align: left; border-top: 1px solid var(--line); }
html[data-page="python"] .footer-col { display: flex; flex-direction: column; gap: 10px; }
html[data-page="python"] .footer-col h5 { margin: 0 0 6px; font-size: .92rem; color: var(--text-bright); }
html[data-page="python"] .footer-col a { color: var(--text-dim); font-size: .88rem; text-decoration: none; transition: color .2s ease; }
html[data-page="python"] .footer-col a:hover { color: var(--accent); }
html[data-page="python"] .footer-name { display: block; font-size: 1rem; font-weight: 700; color: var(--text-bright); }
html[data-page="python"] .footer-role { display: block; margin-top: 2px; font-size: .82rem; color: var(--text-dim); }
html[data-page="python"] .footer-tagline { margin: 10px 0 0; font-size: .85rem; color: var(--text-dim); line-height: 1.6; max-width: 32ch; }
html[data-page="python"] .footer-bottom-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
html[data-page="python"] .footer-bottom { font-size: .85rem; color: var(--text-dim); }
@media (max-width: 768px) {
  html[data-page="python"] .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 0 24px; }
  html[data-page="python"] .footer-bottom-row { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  html[data-page="python"] .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ANIMATIONS */
    @keyframes drift-python {
      0%, 100% { transform: translate(0,0); }
      50% { transform: translate(30px,-30px); }
    }
@keyframes blink-python {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }
@keyframes pulse-python {
      0%, 100% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); }
      50% { box-shadow: 0 0 0 10px rgba(34,197,94,.06); }
    }
/* RESPONSIVE */
    @media (max-width: 1024px) {
      html[data-page="python"] .sidebar { transform: translateX(-100%); z-index: 110; }
      html[data-page="python"] .sidebar.open { transform: translateX(0); }
      html[data-page="python"] .sidebar-toggle { 
        display: flex; 
        bottom: 24px;
        left: 12px;
        width: 44px;
        height: 44px;
      }
      html[data-page="python"] .main-content { margin-left: 0; max-width: 100%; min-width: 0; width: 100%; padding: 24px; }
      html[data-page="python"] .search-container { max-width: 250px; }
    }
@media (max-width: 768px) {
html[data-page="python"] .hero-card { padding: 24px; }
html[data-page="python"] .content-section h2 { font-size: 1.5rem; }
html[data-page="python"] .content-section { padding: 28px 0; }
html[data-page="python"] .topbar-inner { flex-wrap: wrap; }
html[data-page="python"] .search-container { max-width: 100%; order: 3; margin-top: 8px; }
html[data-page="python"] .data-table { font-size: .82rem; }
html[data-page="python"] .data-table th, html[data-page="python"] .data-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
html[data-page="python"] .btn { padding: 10px 14px; font-size: .85rem; }
html[data-page="python"] .brand { gap: 8px; }
html[data-page="python"] .avatar { width: 40px; height: 40px; }
html[data-page="python"] .avatar span { font-size: .95rem; }
html[data-page="python"] .hero-card { padding: 20px; }
html[data-page="python"] .main-content { padding: 16px; }
}

/* ==================== 404 PAGE (404.html) ==================== */
html[data-page="404"] {
  --bg-0:#0a0f1c;
  --accent-a:#2dd4bf;
  --accent-b:#8b5cf6;
  --text:#e5e7eb;
  --muted:#7d8aa3;
}
html[data-page="404"] * { box-sizing:border-box; }
html[data-page="404"], html[data-page="404"] body { height:100%; margin:0; }
html[data-page="404"] body {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:24px;
  font-family:-apple-system,"Segoe UI","Vazirmatn",Tahoma,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 15%,rgba(45,212,191,.12),transparent 55%),
    radial-gradient(circle at 80% 85%,rgba(139,92,246,.12),transparent 55%),
    var(--bg-0);
  overflow:hidden;
}
html[data-page="404"] .card { text-align:center; max-width:420px; width:100%; }
html[data-page="404"] .error {
  font-size:110px;
  font-weight:800;
  letter-spacing:8px;
  background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  -webkit-background-clip:text;
  color:transparent;
  animation:float-404 3s infinite ease-in-out;
}
@keyframes float-404 { 50% { transform:translateY(-8px); } }
html[data-page="404"] .signal { position:relative; width:50px; height:50px; margin:20px auto; }
html[data-page="404"] .signal span {
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:2px solid var(--accent-a);
  animation:ping-404 2.5s infinite;
}
html[data-page="404"] .signal span:nth-child(2) { animation-delay:.8s; }
html[data-page="404"] .signal span:nth-child(3) { animation-delay:1.6s; }
html[data-page="404"] .center {
  background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  border:none!important;
}
@keyframes ping-404 {
  0% { width:12px; height:12px; opacity:.8; }
  100% { width:55px; height:55px; opacity:0; }
}
html[data-page="404"] h1 { font-size:22px; margin:10px 0; }
html[data-page="404"] p { color:var(--muted); font-size:14px; line-height:1.8; margin-bottom:25px; }
html[data-page="404"] .btn {
  display:inline-block;
  padding:12px 30px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  font-size:14px;
  font-weight:600;
  transition:.3s;
}
html[data-page="404"] .btn:hover {
  background:rgba(45,212,191,.1);
  border-color:#2dd4bf;
  transform:translateY(-3px);
}
html[data-page="404"] .status { margin-top:18px; font-size:12px; color:var(--muted); }

/* ==================== CERTIFICATES PAGE (certificates.html) — extends "doc" theme ==================== */
.doc-page .cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
  margin:40px 0;
}
.doc-page .cert-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(56,189,248,.08), rgba(34,197,94,.04));
  border:1px solid rgba(56,189,248,.15);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.doc-page .cert-card:hover{
  border-color:var(--accent);
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(56,189,248,.15);
}
.doc-page .cert-thumb{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#0a0e1a;
  border-bottom:1px solid rgba(56,189,248,.15);
}
.doc-page .cert-thumb img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.doc-page .cert-card:hover .cert-thumb img{ transform:scale(1.06); }
.doc-page .cert-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(6,9,19,.85) 100%);
}
.doc-page .cert-badge{
  position:absolute; top:12px; right:12px; z-index:1;
  padding:5px 12px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  background:rgba(6,9,19,.65);
  border:1px solid rgba(255,255,255,.16);
  color:var(--text-bright);
  backdrop-filter:blur(6px);
}
.doc-page .cert-badge.issuer-mkh{ color:#38bdf8; border-color:rgba(56,189,248,.35); }
.doc-page .cert-badge.issuer-inv{ color:#7ff2a6; border-color:rgba(34,197,94,.35); }
.doc-page .cert-body{
  padding:22px 24px 26px;
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
}
.doc-page .cert-title{
  font-size:1.18rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:6px;
  transition:color .3s ease;
}
.doc-page .cert-card:hover .cert-title{ color:var(--text-bright); }
.doc-page .cert-issuer{
  font-size:.85rem;
  color:var(--text-dim);
  margin-bottom:14px;
}
.doc-page .cert-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:.78rem;
  color:var(--text-bright);
  margin-bottom:16px;
}
.doc-page .cert-meta span{
  background:rgba(56,189,248,.15);
  padding:4px 10px;
  border-radius:6px;
  font-weight:500;
}
.doc-page .cert-view{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  font-weight:600;
  color:var(--accent-2);
}
.doc-page .cert-view svg{ transition:transform .25s ease; }
.doc-page .cert-card:hover .cert-view svg{ transform:translate(3px,-3px); }

/* Lightbox */
.doc-page .lightbox{
  position:fixed; inset:0; z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:rgba(4,6,11,.86);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
.doc-page .lightbox.open{ display:flex; }
.doc-page .lightbox-inner{
  position:relative;
  max-width:min(1100px, 92vw);
  max-height:88vh;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  background:#0a0e1a;
}
.doc-page .lightbox-inner img{
  display:block;
  width:100%;
  height:100%;
  max-height:88vh;
  object-fit:contain;
  background:#0a0e1a;
}
.doc-page .lightbox-close{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(6,9,19,.7);
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}
.doc-page .lightbox-close:hover{ background:rgba(56,189,248,.25); transform:rotate(90deg); }
.doc-page .lightbox-caption{
  position:absolute; left:14px; bottom:14px; right:150px;
  color:#e5e7eb;
  font-size:.85rem;
  background:rgba(6,9,19,.65);
  padding:8px 14px;
  border-radius:10px;
  backdrop-filter:blur(6px);
}
.doc-page .lightbox-verify{
  position:absolute; bottom:14px; right:14px;
  height:40px;
  padding:0 16px;
  border-radius:20px;
  border:1px solid rgba(34,197,94,.45);
  background:rgba(6,9,19,.78);
  color:#7ff2a6;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:700;
  text-decoration:none;
  backdrop-filter:blur(6px);
  transition:all .2s ease;
}
.doc-page .lightbox-verify:hover{
  background:rgba(34,197,94,.22);
  color:#c7ffd9;
  transform:translateY(-2px);
}
.doc-page .lightbox-verify[hidden]{ display:none; }

@media (max-width:480px){
  .doc-page .lightbox-verify span{ display:none; }
  .doc-page .lightbox-verify{ padding:0; width:40px; justify-content:center; border-radius:50%; }
}

@media (max-width:480px){
  .doc-page .cert-body{ padding:18px 18px 20px; }
}

/* ==================== GLOBAL NAVIGATION SYSTEM ==================== */
:root {
  --nav-bg: rgba(6, 9, 19, 0.8);
  --nav-blur: blur(12px);
  --nav-border: rgba(255, 255, 255, 0.1);
  --nav-text: #e5e7eb;
  --nav-accent: #38bdf8;
  --nav-accent-hover: #7ff2a6;
  --nav-dropdown-bg: rgba(15, 23, 43, 0.95);
  --nav-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: var(--nav-blur);
  -webkit-backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--nav-border);
  font-family: 'Inter', sans-serif;
  transition: var(--nav-transition);
  width: 100%;
}



.header-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Brand/Logo */
.brand-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
.brand-link:hover { opacity: 0.9; }
.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--nav-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  white-space: nowrap;
}
.brand-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  position: relative;
}

.nav-link, .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: var(--nav-transition);
}

.nav-link:hover, .dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.nav-link.active {
  color: var(--nav-accent);
  background: rgba(56, 189, 248, 0.1);
}

/* Dropdowns */
.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--nav-dropdown-bg);
  border: 1px solid var(--nav-border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--nav-transition);
  z-index: 1100;
}

.nav-item:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-content a {
  display: block;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 8px;
  transition: var(--nav-transition);
}

.dropdown-content a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding-left: 18px;
}

.arrow-down {
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  display: inline-block;
  margin-bottom: 3px;
  transition: transform 0.2s ease;
}
.nav-item:hover .arrow-down {
  transform: rotate(135deg);
  margin-bottom: -3px;
}

/* Search Button */
.search-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--nav-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--nav-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--nav-transition);
}
.search-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--nav-accent);
  color: var(--nav-accent);
}
.search-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Auth Menu */
.auth-menu {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.auth-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--nav-accent), #22c55e);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--nav-transition);
}
.auth-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.user-profile-trigger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--nav-border);
  cursor: pointer;
  object-fit: cover;
  transition: var(--nav-transition);
}
.user-profile-trigger:hover {
  border-color: var(--nav-accent);
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1200;
}
.mobile-toggle span {
  width: 100%;
  height: 2px;
  background: #fff;
  transition: var(--nav-transition);
}
.mobile-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile Menu Overlay */
/* Inline Header Search (desktop default — icon + floating dropdown panel).
   Placed BEFORE the mobile media query below so the mobile overrides
   (full-width, always-visible bar) win the cascade on small screens. */
.nav-search {
  position: relative;
  margin: 0 4px;
}
.nav-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: min(360px, 88vw);
  background: var(--nav-dropdown-bg);
  border: 1px solid var(--nav-border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--nav-transition);
  z-index: 1100;
}
.nav-search-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--nav-border);
  border-radius: 10px;
  padding: 8px 10px;
}
.nav-search-input-wrap .search-icon-small {
  width: 16px;
  height: 16px;
  stroke: #64748b;
  stroke-width: 2.5;
  fill: none;
  flex-shrink: 0;
}
.nav-search-input-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
}
.nav-search-input-wrap input::placeholder { color: #64748b; }
#closeSearchBtn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
#closeSearchBtn:hover { color: #fff; }
.search-results-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 45vh;
  overflow-y: auto;
}
.search-results-list:not(:empty) { margin-top: 10px; }
.search-result-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--nav-border);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--nav-transition);
}
.search-result-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--nav-accent);
}
.search-result-item .res-cat {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--nav-accent);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}
.search-result-item .res-text strong {
  display: block;
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.search-result-item .res-text p {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  .mobile-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    top: 76px;
    right: 0;
    width: 280px;
    height: calc(100vh - 76px);
    background: var(--nav-dropdown-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    z-index: 1100;
  }
  .nav-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Ensure close button is always accessible at top of menu */
  #mobileToggle {
    position: relative;
    z-index: 1101;
  }
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open .global-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-item { width: 100%; }
  .dropdown-trigger { width: 100%; justify-content: space-between; }
  .dropdown-content {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    margin-top: 5px;
    display: none;
  }
  .nav-item.open .dropdown-content { display: block; }
  .nav-link, .dropdown-trigger {
    width: 100%;
    padding: 12px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--nav-border);
  }

  /* Search — standard mobile pattern: full-width bar pinned to the
     top of the slide-out menu, always expanded (no icon-toggle).
     These overrides come AFTER the desktop rules above, so they win. */
  .nav-search {
    order: -1;
    width: 100%;
    margin: 0 0 14px;
  }
  .nav-search .search-btn { display: none; }
  .nav-search-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .nav-search-input-wrap {
    background: rgba(255, 255, 255, 0.06);
  }
  .nav-search .search-results-list:not(:empty) {
    margin-top: 12px;
    max-height: 40vh;
  }
}

/* Index and Documents/Certificates pages use the fixed .global-header
   and have no other layout offsetting it, so they need this space
   reserved at ALL screen sizes, not just mobile. */
html[data-page="index"] body,
html[data-page="doc"] body,
.doc-page body {
  padding-top: 76px;
}

/* Padding-top for fixed header on the sidebar-layout pages (mobile only —
   on desktop these already reserve the space via .main-layout/main). */
@media (max-width: 1024px) {
  html[data-page="network_lab"] body,
  html[data-page="ai"] body,
  html[data-page="linux"] body,
  html[data-page="netsec"] body,
  html[data-page="python"] body {
    padding-top: 76px;
  }
}

/* ==========================================================================
   FIX: horizontal scrolling inside the global header search results
   --------------------------------------------------------------------------
   Cause: .search-results-list is a grid with `overflow-y: auto`. Per CSS spec,
   when one axis is `auto`/`scroll`, the other axis can no longer be `visible`
   and is computed to `auto` too — so any child wider than the panel produces a
   horizontal scrollbar. The children WERE wider because grid/flex items default
   to `min-width: auto`, which refuses to shrink below their longest unbreakable
   content (e.g. "ai-env\Scripts\activate;" or long command strings in the
   result descriptions).
   Fix: lock the inline axis (min-width: 0 + overflow-x: clip) and allow long
   tokens to wrap. Scoped to .nav-search so the per-page doc search is untouched.
   ========================================================================== */
.nav-search .search-results-list {
  overflow-x: hidden;
  overscroll-behavior: contain;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.nav-search .search-results-list > .search-result-item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: block;          /* neutralise the per-page flex rule */
  border-bottom: 1px solid var(--nav-border);
  overflow: hidden;
}

/* Let long words / paths / commands break instead of pushing the row wider. */
.nav-search .search-result-item .result-meta,
.nav-search .search-result-item .result-title,
.nav-search .search-result-item .result-desc {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Keep descriptions to 2 lines so a long entry can't dominate the panel. */
.nav-search .search-result-item .result-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The category label ("AI", "LINUX", …) had no styling at all — .res-cat in the
   stylesheet never matched the markup, which emits .result-meta. */
.nav-search .search-result-item .result-meta {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--nav-accent);
  margin-bottom: 4px;
}
.nav-search .search-result-item .result-title {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.nav-search .search-result-item .result-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.4;
}

/* Thin, unobtrusive vertical scrollbar for the results panel. */
.nav-search .search-results-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}
.nav-search .search-results-list::-webkit-scrollbar { width: 6px; height: 0; }
.nav-search .search-results-list::-webkit-scrollbar-track { background: transparent; }
.nav-search .search-results-list::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.35);
  border-radius: 999px;
}

@media (max-width: 1024px) {
  /* Inside the slide-out menu the panel is only as wide as the drawer, so the
     same clamp has to apply to the panel and input wrapper as well. */
  .nav-search,
  .nav-search-panel,
  .nav-search-input-wrap,
  .nav-search .search-results-list {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .nav-search-input-wrap input { min-width: 0; }
}

/* Same defensive clamp for the in-page (sidebar) document search dropdowns. */
html[data-page="ai"] .search-results,
html[data-page="linux"] .search-results,
html[data-page="netsec"] .search-results,
html[data-page="python"] .search-results {
  right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
html[data-page="ai"] .search-result-item,
html[data-page="linux"] .search-result-item,
html[data-page="netsec"] .search-result-item,
html[data-page="python"] .search-result-item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
html[data-page="ai"] .search-result-item > *,
html[data-page="linux"] .search-result-item > *,
html[data-page="netsec"] .search-result-item > *,
html[data-page="python"] .search-result-item > * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}