:root{
  --brand: #ac1a03;   /* main banner/background/color */
  --accent: #f2d16d;  /* primary button / highlight */
  --muted: #6e4315;   /* secondary / text accent */
  --bg: #fffdfa;
  --text: #111;
  --radius: 10px;
  --max-width: 980px;
}

/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;margin:0;padding:0;font-family:sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.8}

h1{line-height:1.4;font-size:2.3rem;margin-bottom:1rem}
h2{line-height:1.8;font-size:1.8rem;margin-top:1.5rem;margin-bottom:1rem}
h3{font-size:1.5rem;margin-top:1.2rem;margin-bottom:0.8rem}
p{line-height:1.8}
.container{max-width:var(--max-width);margin:0 auto;padding:0 12px}

/* Banner */
.banner{
  background:var(--brand);
  color: #fff;
  border-radius:0;
  margin:0;
  padding:10px 0;
}
.banner-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  margin: 0 12px;
}
.banner-message{font-weight:700}
.banner-actions{display:flex;gap:8px;align-items:center}
.banner-divider{
  width:1px;
  height:24px;
  background:rgba(255,255,255,0.3);
  margin:0 4px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  border:0;
}
.btn-secondary{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
}
.btn-secondary:hover{opacity:0.95;transform:translateY(-1px)}

/* Dropdown nav */
.nav-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.nav-dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
  min-width:180px;
  z-index:100;
  padding:4px 0;
  margin-top:4px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  display:block;
}
.nav-dropdown-menu a{
  display:block;
  padding:8px 16px;
  color:var(--text);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  white-space:nowrap;
}
.nav-dropdown-menu a:hover{
  background:rgba(172,26,3,0.07);
  color:var(--brand);
}

/* Hero Banner with Image */
.hero-banner{
  position:relative;
  width:100%;
  min-height:500px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255, 253, 250, 0.95) 0%, rgba(254, 246, 233, 0.92) 100%), url('/Images/The-Bot-Layer-Logo.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  margin-bottom:0;
  border-radius:0;
  padding:120px 58px 100px;
  animation:fadeInHero 1.2s ease-out;
}
.hero-banner-image-wrapper{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:30px;
}
.hero-banner-image{
  max-width:320px;
  width:75%;
  height:auto;
  object-fit:contain;
}
.hero-banner-content{
  text-align:center;
  padding:0 20px;
  max-width:1000px;
}
.hero-banner-headline{
  font-size:2.5rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 0.5rem 0;
  line-height:1.8;
  animation:fadeInUp 1s ease-out 0.3s backwards;
  text-shadow:0 2px 4px rgba(0,0,0,0.05);
}

/* Fade-in animation */
@keyframes fadeInHero{
  from{opacity:0}
  to{opacity:1}
}
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Responsive styles */
@media (max-width:820px){
  .hero-banner-headline{font-size:2rem}
  .hero-banner-image{max-width:250px}
  .hero-banner{min-height:400px;padding:90px 40px 70px}
}
@media (max-width:600px){
  .hero-banner-headline{font-size:1.5rem}
  .hero-banner-image{max-width:200px}
  .hero-banner{min-height:350px;padding:70px 28px 50px}
}

/* Simple hero / newsletter area (index) */
.hero{background:transparent;padding:12px 0;margin-bottom:0;margin-top:0}
.kicker{font-size:1.1rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}
.h-title{font-size:2.5rem;font-weight:800;line-height:1.4;margin-bottom:1rem;color:var(--text)}
.h-desc{font-size:1.3rem;line-height:1.6;font-weight:400;color:#3b2b20;margin-bottom:1.5rem}

/* Post list */
.post-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:820px){ .post-list{grid-template-columns:1fr} }

/* Post item */
.post-item{background:#fff;border-radius:0;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.post-item:not(:last-child){
  padding-bottom:20px;
  margin-bottom:20px;
  position:relative;
}
.post-item:not(:last-child)::after{
  content:'';
  position:absolute;
  bottom:-11px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 28px);
  height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--brand) 50%, transparent 100%);
  opacity:0.15;
}
.post-title{margin:0 0 6px 0;font-size:1.5rem;font-weight:600}
.post-title a{color:var(--text);text-decoration:none}
.post-meta{margin:0 0 8px 0;color:var(--muted);font-size:0.9rem}
.excerpt{margin:0;color:#4b3c31;line-height:1.8}

/* Article post styles for enhanced readability */
.back{
  display:inline-block;
  margin-bottom:1.5rem;
  color:var(--brand);
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
}
.back:hover{
  opacity:0.8;
}
.post{max-width:720px;margin:0 auto}
.post header{
  margin-bottom:2rem;
}
.post h1{
  font-size:2.3rem;
  margin:0 0 1rem 0;
  line-height:1.4;
}
.post h2{
  font-size:1.8rem;
  margin-top:1.5rem;
  margin-bottom:1rem;
}
.post h3{
  font-size:1.5rem;
  margin-top:1.2rem;
  margin-bottom:0.8rem;
}
.post-content{
  font-size:1.1rem;
  line-height:1.8;
  color:#2b2b2b;
}
.post-content p{
  margin:0 0 1.5em 0;
}
.post-content p:last-child{
  margin-bottom:0;
}
.post-content strong{
  color:var(--text);
  font-weight:700;
}
.post-end{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:2px solid rgba(0,0,0,0.06);
}
.post-end p{
  color:var(--muted);
  font-size:0.95rem;
}

/* Section headings */
.section-heading{font-size:1.8rem;font-weight:700;margin:1.5rem 0;color:var(--text)}

/* About page */
.lede{font-size:1.2rem;line-height:1.6;color:var(--muted);margin-bottom:2rem}
.about-photo{width:200px;height:200px;border-radius:12px;object-fit:cover}
.about-grid{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}

/* Footer */
.site-footer{margin-top:0;padding-top:18px;border-top:1px solid rgba(0,0,0,0.03);color:var(--muted);text-align:center;font-size:0.9rem}

/* More Articles Navigation Section */
.more-articles{
  margin-top:0;
  padding-top:2rem;
  border-top:2px solid rgba(0,0,0,0.06);
}
.more-articles-heading{
  font-size:1.4rem;
  font-weight:700;
  margin:0 0 1.5rem 0;
  color:var(--text);
}
.more-articles-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1rem;
}
.more-articles-item{
  background:#fff;
  border-radius:0;
  padding:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.more-articles-item:hover{
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}
.more-articles-item a{
  text-decoration:none;
  color:var(--text);
  display:block;
}
.more-articles-item-title{
  font-size:1.1rem;
  font-weight:600;
  margin:0 0 0.5rem 0;
  color:var(--text);
}
.more-articles-item-meta{
  font-size:0.85rem;
  color:var(--muted);
  margin:0;
}

/* Inline code / kbd / samp chip styling */
code,kbd,samp,.post-content code{
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:0.875em;
  background:rgba(172,26,3,0.08);
  color:var(--brand);
  border:1px solid rgba(172,26,3,0.15);
  border-radius:4px;
  padding:0.1em 0.35em;
  white-space:nowrap;
}

/* CVE badge */
.cve{
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:0.8em;
  font-weight:700;
  background:rgba(172,26,3,0.10);
  color:var(--brand);
  border:1px solid rgba(172,26,3,0.25);
  border-radius:999px;
  padding:0.15em 0.6em;
  white-space:nowrap;
  letter-spacing:0.02em;
}

/* ── Badge ──────────────────────────────────────────────────────────────── */
.badge-new{
  display:inline-block;
  font-size:0.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  background:var(--brand);
  color:#fff;
  border-radius:999px;
  padding:0.2em 0.65em;
  vertical-align:middle;
  margin-left:0.45em;
  line-height:1.4;
}

/* ── Library page ───────────────────────────────────────────────────────── */
.library-meta{
  font-size:0.85rem;
  color:var(--muted);
  margin-top:0.25rem;
}

.library-disclaimer{
  background:rgba(172,26,3,0.06);
  border-left:3px solid var(--brand);
  border-radius:0 6px 6px 0;
  padding:0.9rem 1.1rem;
  margin:1rem 0 2rem;
  font-size:0.9rem;
  line-height:1.7;
  color:var(--text);
}

.library-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-bottom:2.5rem;
}
@media (max-width:820px){ .library-grid{grid-template-columns:1fr} }

.library-card{
  background:#fff;
  border-radius:8px;
  padding:1.1rem 1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.library-card:hover{
  box-shadow:0 8px 24px rgba(0,0,0,0.09);
  transform:translateY(-2px);
}

.library-card-header{
  display:flex;
  align-items:baseline;
  gap:0.6rem;
  flex-wrap:wrap;
}
.library-card-title{
  font-size:1.1rem;
  font-weight:700;
  margin:0;
}
.library-card-title a{
  color:var(--text);
  text-decoration:none;
}
.library-card-title a:hover{
  color:var(--brand);
}
.library-card-org{
  font-size:0.78rem;
  color:var(--muted);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
}
.library-card-desc{
  font-size:0.92rem;
  line-height:1.7;
  color:#4b3c31;
  margin:0;
  flex:1;
}
.library-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
}

/* ── Template block (details/summary + pre/code) ──────────────────────── */
.template-block{
  margin-top:0.75rem;
  border:1px solid rgba(172,26,3,0.18);
  border-radius:6px;
  overflow:hidden;
}
.template-block summary{
  cursor:pointer;
  padding:0.45rem 0.9rem;
  font-size:0.82rem;
  font-weight:700;
  color:var(--brand);
  user-select:none;
  list-style:none;
}
.template-block summary::-webkit-details-marker{ display:none; }
.template-block summary::before{
  content:"▶ ";
  font-size:0.7em;
}
.template-block[open] summary::before{ content:"▼ "; }
.template-block pre{
  margin:0;
  padding:0.9rem 1rem;
  background:rgba(172,26,3,0.04);
  border-top:1px solid rgba(172,26,3,0.12);
  overflow-x:auto;
  font-size:0.8rem;
  line-height:1.6;
  white-space:pre;
}
.template-block pre code{
  background:none;
  border:none;
  padding:0;
  color:inherit;
  font-size:inherit;
  white-space:pre;
}

.tag{
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  border-radius:999px;
  padding:0.2em 0.7em;
  background:rgba(172,26,3,0.08);
  color:var(--brand);
  border:1px solid rgba(172,26,3,0.18);
}
.tag-offensive{ background:rgba(172,26,3,0.12); border-color:rgba(172,26,3,0.30); }
.tag-security{  background:rgba(172,26,3,0.08); border-color:rgba(172,26,3,0.20); }
.tag-guard{     background:rgba(111,26,172,0.08); color:#6f1aac; border-color:rgba(111,26,172,0.20); }
.tag-framework{ background:rgba(3,100,172,0.08); color:#036 ; border-color:rgba(3,100,172,0.18); }
.tag-test{      background:rgba(26,100,3,0.08);  color:#1a6403; border-color:rgba(26,100,3,0.18); }
.tag-build{     background:rgba(172,120,3,0.08); color:#7a5500; border-color:rgba(172,120,3,0.18); }

/* ── Featured library card on cyber.html ───────────────────────────────── */
.library-feature-card{
  background:linear-gradient(135deg,rgba(172,26,3,0.05) 0%,rgba(172,26,3,0.02) 100%);
  border:1px solid rgba(172,26,3,0.18);
  border-radius:10px;
  padding:1.4rem 1.6rem;
  margin-bottom:2rem;
}
.library-feature-title{
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 0.5rem;
  line-height:1.4;
  color:var(--text);
}
.library-feature-desc{
  font-size:1rem;
  line-height:1.7;
  color:#4b3c31;
  margin:0 0 1rem;
}
.btn-feature{
  background:var(--brand);
  color:#fff;
  border-radius:8px;
  padding:0.55rem 1.1rem;
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  transition:opacity 0.15s, transform 0.15s;
}
.btn-feature:hover{ opacity:0.88; transform:translateY(-1px); }

/* ── Live Agent Log terminal widget ─────────────────────────────────────── */
.al-widget{ margin:1.5rem 0; }

.al-terminal{
  background:#0d1117;
  border:1px solid #30363d;
  border-radius:10px;
  overflow:hidden;
  font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:0.82rem;
  line-height:1.65;
  box-shadow:0 4px 24px rgba(0,0,0,0.25);
}
.al-terminal--full{
  font-size:0.875rem;
}

.al-topbar{
  background:#161b22;
  border-bottom:1px solid #30363d;
  padding:8px 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.al-dot{
  width:12px; height:12px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.al-dot--red   { background:#ff5f57; }
.al-dot--yellow{ background:#febc2e; }
.al-dot--green { background:#28c840; }
.al-topbar-title{
  flex:1;
  text-align:center;
  color:#8b949e;
  font-size:0.78rem;
  margin-left:-36px; /* visually centre between dots and badge */
}
.al-badge{
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.08em;
  background:#22d3ee;
  color:#0d1117;
  border-radius:999px;
  padding:0.15em 0.6em;
}

.al-body{
  padding:12px 16px;
  max-height:180px;
  overflow:hidden;
  position:relative;
}
.al-terminal--full .al-body{
  max-height:340px;
}

.al-output{ display:flex; flex-direction:column; gap:0; }
.al-line{ white-space:pre; word-break:break-all; }

/* Line colour tokens */
.al-info   { color:#8b949e; }
.al-boot   { color:#e6edf3; font-weight:600; }
.al-evt    { color:#79c0ff; }
.al-alert  { color:#f85149; font-weight:600; }
.al-red    { color:#ff9a56; }
.al-blue   { color:#56d364; }

/* Blinking cursor */
.al-cursor{
  display:inline-block;
  width:8px; height:1.1em;
  background:#22d3ee;
  vertical-align:text-bottom;
  margin-left:4px;
  animation:al-blink 1.1s step-end infinite;
}
@keyframes al-blink{
  0%,100%{ opacity:1; }
  50%    { opacity:0; }
}

/* Light mode overrides — keep terminal dark even in light mode */
/* (terminal is inherently dark; no overrides needed for most vars) */
/* But the outer page may be light, so we just keep the dark bg regardless */

/* Cyber subsection nav list on cyber.html */
.cyber-nav-list{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:14px;
  margin:1rem 0 2rem;
}
.cyber-nav-item a{
  display:block;
  padding:1rem 1.2rem;
  background:#fff;
  border:1px solid rgba(172,26,3,0.14);
  border-radius:8px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  font-size:1rem;
  transition:box-shadow 0.18s, transform 0.18s, border-color 0.18s;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.cyber-nav-item a:hover{
  box-shadow:0 4px 16px rgba(0,0,0,0.09);
  transform:translateY(-2px);
  border-color:var(--brand);
  color:var(--brand);
}
.cyber-nav-item-desc{
  display:block;
  font-size:0.82rem;
  font-weight:400;
  color:var(--muted);
  margin-top:0.3rem;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* Mermaid diagram blocks */
.mermaid {
  margin: 1.5rem 0;
  overflow-x: visible;
}

/* Diagram zoom variable default (overridden per-page via JS) */
.diagram-panel {
  --diagram-zoom: 1.05;
}

/* Diagram zoom controls — base styles (light mode) */
.diagram-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.diagram-zoom {
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 4px;
  color: var(--brand);
  cursor: pointer;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9rem;
  padding: 0.25em 0.65em;
  transition: background 0.15s, border-color 0.15s;
}
.diagram-zoom:hover {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.35);
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --text: #e6edf3;
    --brand: #22d3ee;   /* cyan */
    --muted: #8b949e;
  }

  html, body {
    background: var(--bg);
    color: var(--text);
  }

  /* Banner */
  .banner {
    background: #161b22;
    border-bottom: 1px solid #30363d;
  }

  /* Dropdown menu — dark mode */
  .nav-dropdown-menu {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  .nav-dropdown-menu a {
    color: var(--text);
  }
  .nav-dropdown-menu a:hover {
    background: rgba(34,211,238,0.10);
    color: #22d3ee;
  }

  /* Hero banner: dark overlay, keep background image */
  .hero-banner {
    background:
      linear-gradient(135deg, rgba(13,17,23,0.93) 0%, rgba(22,27,34,0.90) 100%),
      url('/Images/The-Bot-Layer-Logo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Cards */
  .post-item {
    background: #161b22;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  .more-articles-item {
    background: #161b22;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  }
  .more-articles-item:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.55);
  }

  /* Borders */
  .post-end,
  .more-articles {
    border-top-color: rgba(255,255,255,0.08);
  }

  /* Links */
  a { color: var(--brand); }
  a:hover { opacity: 0.8; }

  /* Article / card title links keep near-white */
  .post-title a,
  .more-articles-item a,
  .more-articles-item-title { color: var(--text); }

  /* Body copy */
  .h-desc,
  .excerpt { color: #adbac7; }
  .post-content { color: #adbac7; }

  /* Inline code / kbd / samp chip — cyan tint */
  code, kbd, samp, .post-content code {
    background: rgba(34,211,238,0.10);
    color: #22d3ee;
    border-color: rgba(34,211,238,0.25);
  }

  /* CVE badge — cyan */
  .cve {
    background: rgba(34,211,238,0.12);
    color: #22d3ee;
    border-color: rgba(34,211,238,0.35);
  }

  /* Terminal / pre blocks */
  pre {
    background: #010409;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 1em 1.2em;
    overflow-x: auto;
  }
  /* pre code: terminal-green text, reset chip decoration */
  pre code {
    background: transparent;
    color: #3fb950;
    border: none;
    padding: 0;
    white-space: pre;
  }

  /* Diagram panel — terminal-style container for Mermaid diagrams */
  .diagram-panel {
    background: #010409;
    border: 1px solid rgba(34,211,238,0.35);
    border-radius: 8px;
    padding: 1.5em 1.2em;
    overflow-x: auto;
  }
  .diagram-panel pre {
    background: transparent;
    border: none;
    padding: 0;
    overflow-x: visible;
  }
  .diagram-panel .mermaid svg {
    display: block;
    max-width: 100%;
    transform-origin: top left;
    transform: scale(var(--diagram-zoom));
  }
  .diagram-panel .mermaid svg text, .diagram-panel .mermaid svg .label { font-size: 16px !important; }

  /* Diagram zoom controls — dark-mode color overrides */
  .diagram-zoom {
    background: #161b22;
    border-color: rgba(34,211,238,0.35);
    color: #22d3ee;
  }
  .diagram-zoom:hover {
    background: rgba(34,211,238,0.12);
    border-color: rgba(34,211,238,0.65);
  }

  /* Badge */
  .badge-new{
    background: #22d3ee;
    color: #0d1117;
  }

  /* Library disclaimer */
  .library-disclaimer{
    background: rgba(34,211,238,0.07);
    border-left-color: #22d3ee;
    color: #adbac7;
  }

  /* Library cards */
  .library-card{
    background: #161b22;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  .library-card:hover{
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  }
  .library-card-title a{ color: var(--text); }
  .library-card-title a:hover{ color: #22d3ee; }
  .library-card-desc{ color: #adbac7; }

  /* Template block — dark mode */
  .template-block{
    border-color: rgba(34,211,238,0.20);
  }
  .template-block summary{
    color: #22d3ee;
  }
  .template-block pre{
    background: rgba(34,211,238,0.05);
    border-top-color: rgba(34,211,238,0.15);
    color: #adbac7;
  }

  /* Tags — cyan palette in dark mode */
  .tag{
    background: rgba(34,211,238,0.08);
    color: #22d3ee;
    border-color: rgba(34,211,238,0.25);
  }
  .tag-offensive{ background:rgba(34,211,238,0.12); border-color:rgba(34,211,238,0.35); }
  .tag-security{  background:rgba(34,211,238,0.08); border-color:rgba(34,211,238,0.20); }
  .tag-guard{     background:rgba(180,140,240,0.10); color:#c9a7f0; border-color:rgba(180,140,240,0.25); }
  .tag-framework{ background:rgba(80,160,255,0.10);  color:#79c0ff; border-color:rgba(80,160,255,0.25); }
  .tag-test{      background:rgba(63,185,80,0.10);   color:#3fb950; border-color:rgba(63,185,80,0.25); }
  .tag-build{     background:rgba(240,200,80,0.10);  color:#e3b341; border-color:rgba(240,200,80,0.25); }

  /* Featured library card */
  .library-feature-card{
    background: linear-gradient(135deg,rgba(34,211,238,0.08) 0%,rgba(34,211,238,0.03) 100%);
    border-color: rgba(34,211,238,0.30);
  }
  .library-feature-desc{ color: #adbac7; }
  .btn-feature{
    background: #22d3ee;
    color: #0d1117;
  }

  /* Cyber subsection nav in dark mode */
  .cyber-nav-item a{
    background:#161b22;
    border-color:rgba(34,211,238,0.18);
    color:var(--text);
  }
  .cyber-nav-item a:hover{
    border-color:#22d3ee;
    color:#22d3ee;
    box-shadow:0 4px 16px rgba(0,0,0,0.45);
  }
  .cyber-nav-item-desc{ color:#8b949e; }
}

@media (max-width: 600px) {
  .diagram-panel .mermaid svg {
    transform: scale(var(--diagram-zoom));
  }
  .diagram-panel .mermaid svg text, .diagram-panel .mermaid svg .label { font-size: 15px !important; }
}