/* =========================================================================
   DBApreneur — Main Stylesheet
   Day/Night themes with animated sky, sun, moon, clouds, stars
   ========================================================================= */

:root[data-theme="day"] {
  --sky-top: #b8e0ff;
  --sky-mid: #87c8ff;
  --sky-horizon: #a5d4ff;
  --ink: #0b2540;
  --ink-dim: #2d4a6e;
  --ink-mute: #5c7a9a;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.85);
  --accent: #f59e0b;
  --accent-hot: #fbbf24;
  --accent-deep: #d97706;
  --accent-glow: rgba(245, 158, 11, 0.4);
  --green: #16a34a;
  --red: #dc2626;
  --line: rgba(11, 37, 64, 0.12);
  --line-strong: rgba(11, 37, 64, 0.22);
  --dot-color: rgba(11, 37, 64, 0.1);
  --cloud-color: rgba(255, 255, 255, 0.85);
  --star-opacity: 0;
  --sun-opacity: 1;
  --moon-opacity: 0;
  --ticker-bg: #0b2540;
  --ticker-text: #d4e3f5;
  --nav-bg: rgba(184, 224, 255, 0.6);
  --nav-pill-bg: rgba(255, 255, 255, 0.8);
  --footer-bg: rgba(255, 255, 255, 0.4);
}

:root[data-theme="night"] {
  --sky-top: #020410;
  --sky-mid: #050a1f;
  --sky-horizon: #061025;
  --ink: #f4f1ea;
  --ink-dim: #b8c2d4;
  --ink-mute: #7a8499;
  --surface: #0f1830;
  --surface-soft: rgba(15, 24, 48, 0.85);
  --accent: #fbbf24;
  --accent-hot: #fde047;
  --accent-deep: #f59e0b;
  --accent-glow: rgba(251, 191, 36, 0.45);
  --green: #4ade80;
  --red: #f87171;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --dot-color: rgba(255, 255, 255, 0.07);
  --cloud-color: rgba(30, 40, 70, 0.55);
  --star-opacity: 1;
  --sun-opacity: 0;
  --moon-opacity: 1;
  --ticker-bg: #0f1830;
  --ticker-text: #c5d1e8;
  --nav-bg: rgba(5, 10, 31, 0.75);
  --nav-pill-bg: rgba(15, 24, 48, 0.75);
  --footer-bg: rgba(5, 10, 31, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--sky-mid);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  transition: background 2s ease;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hot); }

img { max-width: 100%; height: auto; }

/* ========== SKY BACKGROUND ========== */
.sky-bg {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-horizon) 100%);
  z-index: 0;
  pointer-events: none;
  transition: background 2s ease;
}

.dotted-bg {
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  transition: background-image 2s ease;
}

/* ========== SUN ========== */
.sun {
  position: fixed;
  top: 6%; right: 8%;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff8d6, #fde047 25%, #fbbf24 55%, #f59e0b 90%);
  box-shadow: 0 0 60px rgba(251, 191, 36, 0.7), 0 0 120px rgba(251, 191, 36, 0.5), 0 0 200px rgba(251, 191, 36, 0.3);
  z-index: 2;
  pointer-events: none;
  opacity: var(--sun-opacity);
  animation: sun-breathe 5s ease-in-out infinite;
  transition: opacity 2s ease;
}
@keyframes sun-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.sun-rays {
  position: fixed;
  top: 6%; right: 8%;
  width: 130px; height: 130px;
  z-index: 2;
  pointer-events: none;
  opacity: var(--sun-opacity);
  animation: sun-rotate 60s linear infinite;
  transition: opacity 2s ease;
}
.sun-rays::before, .sun-rays::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(251, 191, 36, 0.15) 5deg, transparent 10deg,
    transparent 60deg, rgba(251, 191, 36, 0.15) 65deg, transparent 70deg,
    transparent 120deg, rgba(251, 191, 36, 0.15) 125deg, transparent 130deg,
    transparent 180deg, rgba(251, 191, 36, 0.15) 185deg, transparent 190deg,
    transparent 240deg, rgba(251, 191, 36, 0.15) 245deg, transparent 250deg,
    transparent 300deg, rgba(251, 191, 36, 0.15) 305deg, transparent 310deg);
  border-radius: 50%;
  mask-image: radial-gradient(circle, transparent 35%, black 36%, black 50%, transparent 60%);
}
.sun-rays::after { animation: sun-rotate-rev 80s linear infinite; }
@keyframes sun-rotate { to { transform: rotate(360deg); } }
@keyframes sun-rotate-rev { to { transform: rotate(-360deg); } }

/* ========== MOON ========== */
.moon-wrap {
  position: fixed;
  top: 7%; right: 9%;
  z-index: 2;
  pointer-events: none;
  opacity: var(--moon-opacity);
  transition: opacity 2s ease;
}
.moon {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9e0, #f5ecc8 35%, #d9c896 75%, #a89968 100%);
  box-shadow: 0 0 50px rgba(255, 245, 200, 0.5), 0 0 100px rgba(255, 245, 200, 0.3), inset -15px -10px 35px rgba(60, 50, 30, 0.3);
  position: relative;
  animation: moon-breathe 8s ease-in-out infinite;
}
@keyframes moon-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.moon::before {
  content: '';
  position: absolute;
  top: 25%; left: 55%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(120, 100, 70, 0.4);
  box-shadow: 18px 8px 0 -3px rgba(120, 100, 70, 0.35), -8px 28px 0 -2px rgba(120, 100, 70, 0.3),
              28px -10px 0 -5px rgba(120, 100, 70, 0.3), 5px 45px 0 -4px rgba(120, 100, 70, 0.25);
}
.moon-halo {
  position: absolute;
  top: -45px; left: -45px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 200, 0.25), transparent 60%);
  animation: sun-breathe 4s ease-in-out infinite;
}

/* ========== STARS ========== */
.stars {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--star-opacity);
  transition: opacity 2s ease;
}
.star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle var(--dur, 3s) ease-in-out infinite; }
.star.bright { box-shadow: 0 0 4px #fff, 0 0 8px rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 245, 200, 0.4); }
.star.medium { box-shadow: 0 0 3px #fff, 0 0 6px rgba(255, 255, 255, 0.5); }
.star.dim { box-shadow: 0 0 2px #fff; }
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

.shooting-star {
  position: fixed;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px #fff, 0 0 16px rgba(255, 245, 200, 0.6);
  opacity: var(--star-opacity);
  z-index: 1;
  pointer-events: none;
  animation: shoot 8s linear infinite;
  animation-delay: 3s;
}
.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%; right: 0;
  width: 80px; height: 1px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
  transform: translateY(-50%);
}
@keyframes shoot {
  0% { top: 10%; right: -10%; opacity: 0; }
  5% { opacity: 1; }
  25% { top: 40%; right: 90%; opacity: 0; }
  100% { top: 40%; right: 90%; opacity: 0; }
}

/* ========== CLOUDS ========== */
.cloud { position: fixed; pointer-events: none; z-index: 2; }
.cloud-svg { width: 100%; height: 100%; }
.cloud-svg path { fill: var(--cloud-color); transition: fill 2s ease; }
.cloud-1 { width: 240px; height: 90px; top: 12%; left: -300px; animation: drift-r 55s linear infinite; }
.cloud-2 { width: 320px; height: 110px; top: 28%; left: -300px; animation: drift-r 75s linear infinite; animation-delay: -25s; }
.cloud-3 { width: 180px; height: 70px; top: 45%; right: -250px; animation: drift-l 65s linear infinite; }
.cloud-4 { width: 280px; height: 100px; top: 62%; left: -300px; animation: drift-r 85s linear infinite; animation-delay: -40s; }
.cloud-5 { width: 200px; height: 80px; top: 78%; right: -250px; animation: drift-l 70s linear infinite; animation-delay: -15s; }
.cloud-6 { width: 260px; height: 95px; top: 92%; left: -300px; animation: drift-r 90s linear infinite; animation-delay: -50s; }
@keyframes drift-r { to { transform: translateX(calc(100vw + 300px)); } }
@keyframes drift-l { to { transform: translateX(calc(-100vw - 300px)); } }

/* ========== Content stays above ========== */
.nav-wrap, main, footer { position: relative; z-index: 5; }

/* ========== THEME TOGGLE ========== */
.theme-toggle {
  position: fixed;
  top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px;
  display: flex;
  gap: 4px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.theme-btn {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.theme-btn.active { background: var(--accent); color: #fff; }
.theme-btn:hover:not(.active) { color: var(--ink); }

/* ========== NAV ========== */
.nav-wrap {
  position: sticky; top: 0;
  padding: 20px 5vw;
  backdrop-filter: blur(12px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  z-index: 100;
  transition: background 2s ease;
  margin-top: 50px;
}
.nav {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--nav-pill-bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 14px 10px 28px;
  box-shadow: 0 4px 24px rgba(11, 37, 64, 0.08);
  gap: 16px;
}
.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 1.5px;
  color: var(--accent);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.logo::after { content: '◆'; color: var(--accent-hot); animation: spark 2s ease-in-out infinite; }
@keyframes spark {
  0%, 100% { transform: rotate(0) scale(1); opacity: 1; }
  50% { transform: rotate(180deg) scale(1.3); opacity: 0.7; }
}
.nav-links { display: flex; gap: 24px; flex-wrap: wrap; }
.nav-links a {
  color: var(--ink-dim); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-cta {
  background: var(--ink);
  color: var(--sky-top);
  border: 1px solid var(--ink);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-cta::after { content: '↗'; }

/* ========== FLASH ========== */
.flash-wrap { max-width: 800px; margin: 16px auto; padding: 0 5vw; position: relative; z-index: 10; }
.flash {
  padding: 12px 18px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
  backdrop-filter: blur(10px);
}
.flash-success { background: rgba(22, 163, 74, 0.12); border-color: var(--green); color: var(--green); }
.flash-error { background: rgba(220, 38, 38, 0.12); border-color: var(--red); color: var(--red); }
.flash-info, .flash-message { background: var(--surface-soft); border-color: var(--line); color: var(--ink); }
.flash-warning { background: rgba(245, 158, 11, 0.12); border-color: var(--accent); color: var(--accent-deep); }

/* ========== HERO ========== */
.hero {
  max-width: 1280px; margin: 0 auto;
  padding: 60px 5vw 80px;
  text-align: center;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  margin-bottom: 36px;
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-weight: 500;
}
.status-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

h1.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -1px;
  margin-bottom: 32px;
}
.hero-title .line { display: block; }
.hero-title .accent-text { color: var(--accent); }
.hero-title .ink-text { color: var(--ink); }
.hero-title .diamond {
  display: inline-block;
  color: var(--accent-hot);
  margin: 0 0.2em;
  animation: spark 3s ease-in-out infinite;
}
.billboard { position: relative; display: inline-block; color: var(--accent); }
.billboard::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  color: var(--accent-hot);
  opacity: 0;
  animation: neon-flicker 4s linear infinite;
  text-shadow: 0 0 12px var(--accent);
}
@keyframes neon-flicker {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.9; }
  94% { opacity: 0; }
  95% { opacity: 0.7; }
  96% { opacity: 0; }
}

.hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-dim);
  max-width: 580px; margin: 0 auto 36px;
  line-height: 1.6;
}
.hero-cta-row {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 60px;
}

/* ========== BUTTONS ========== */
.btn-primary, .btn-ghost, .btn-danger {
  border-radius: 100px;
  padding: 14px 28px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s;
  font-family: inherit;
  border: none;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hot); transform: translateY(-2px); }
.btn-ghost {
  background: var(--surface-soft);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn-danger {
  background: var(--red);
  color: #fff;
}
.btn-danger:hover { opacity: 0.9; }

/* ========== TICKER ========== */
.ticker {
  margin: 40px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ticker-bg);
  overflow: hidden;
  transition: background 2s ease;
}
.ticker-track {
  display: flex;
  gap: 64px;
  padding: 18px 0;
  animation: scroll-left 40s linear infinite;
  white-space: nowrap;
  width: max-content;
}
@keyframes scroll-left { to { transform: translateX(-50%); } }
.ticker-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ticker-text);
  display: flex; align-items: center; gap: 8px;
}
.ticker-item .tag { color: var(--accent-hot); font-weight: 500; }
.ticker-item .up { color: var(--green); }
.ticker-sep { color: rgba(255, 255, 255, 0.3); }

/* ========== SECTIONS ========== */
.section {
  max-width: 1280px; margin: 0 auto;
  padding: 80px 5vw;
}
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; gap: 24px; flex-wrap: wrap;
}
.section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--accent);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.section-tag::before { content: '◆'; }
h2.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.section-desc {
  color: var(--ink-dim);
  max-width: 380px;
  line-height: 1.6;
  font-size: 15px;
}

/* ========== PILLAR CARDS ========== */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: 0 4px 20px rgba(11, 37, 64, 0.06);
}
.pillar::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, var(--accent-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.pillar:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 16px 40px var(--accent-glow); }
.pillar:hover::before { opacity: 0.3; }
.pillar-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 24px;
  font-weight: 500;
}
.pillar-icon {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px; color: var(--accent);
  margin-bottom: 16px;
  line-height: 1;
}
.pillar h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: var(--ink);
}
.pillar p {
  color: var(--ink-dim);
  font-size: 14px; line-height: 1.6;
}
.pillar .arrow {
  position: absolute;
  bottom: 24px; right: 24px;
  font-size: 20px;
  color: var(--ink-mute);
  transition: all 0.3s;
}
.pillar:hover .arrow { color: var(--accent); transform: translate(4px, -4px); }

/* ========== POST CARDS ========== */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: 0 4px 20px rgba(11, 37, 64, 0.06);
}
.post-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 16px 40px var(--accent-glow); }
.post-img {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--accent), var(--accent-hot));
  position: relative;
}
.post-img::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 12px 12px;
}
.post-img.cat-database { background: linear-gradient(135deg, #1e6fc4, #87c1ff); }
.post-img.cat-product { background: linear-gradient(135deg, #6366f1, #a5b4fc); }
.post-img.cat-entrepreneurship { background: linear-gradient(135deg, #16a34a, #86efac); }
.post-img.cat-ai { background: linear-gradient(135deg, #f59e0b, #fde047); }

.post-content { padding: 24px; }
.post-meta {
  display: flex; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  font-weight: 500;
  flex-wrap: wrap;
}
.post-meta .cat { color: var(--accent); }
.post-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; letter-spacing: 0.3px;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--ink);
}
.post-card p {
  color: var(--ink-dim);
  font-size: 13px; line-height: 1.6;
}

/* ========== POST DETAIL (article) ========== */
.article {
  max-width: 760px; margin: 0 auto;
  padding: 60px 5vw 80px;
}
.article-header {
  margin-bottom: 40px;
  text-align: center;
}
.article-meta {
  display: flex; justify-content: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  font-weight: 500;
  flex-wrap: wrap;
}
.article-meta .cat { color: var(--accent); }
.article h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 20px;
}
.article .excerpt {
  font-size: 18px;
  color: var(--ink-dim);
  line-height: 1.6;
}
.article-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.article-body p { margin-bottom: 20px; }
.article-body h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  margin: 48px 0 16px;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.article-body h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  margin: 32px 0 12px;
  color: var(--ink);
}
.article-body ul, .article-body ol { margin: 0 0 20px 24px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--accent); text-decoration: underline; }
.article-body code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}
.article-body pre {
  background: var(--ticker-bg);
  color: #f4f1ea;
  border-radius: 12px;
  padding: 20px;
  overflow-x: auto;
  margin: 20px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
}
.article-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}
.article-body blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 20px;
  margin: 20px 0;
  color: var(--ink-dim);
  font-style: italic;
}
.article-body img {
  border-radius: 12px;
  margin: 20px 0;
}

/* ========== NEWSLETTER ========== */
.newsletter {
  margin: 40px 5vw 100px;
  max-width: 1280px;
  margin-left: auto; margin-right: auto;
  background: var(--ticker-bg);
  border-radius: 32px;
  padding: 60px 5vw;
  text-align: center;
  overflow: hidden;
  position: relative;
  color: #fff;
  transition: background 2s ease;
}
.newsletter::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, var(--accent-glow), transparent 50%);
  animation: sun-breathe 10s ease-in-out infinite;
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1; margin-bottom: 16px;
  letter-spacing: -0.5px;
  color: #fff;
}
.newsletter h2 .accent-text { color: var(--accent-hot); }
.newsletter p {
  color: #d4e3f5;
  max-width: 500px; margin: 0 auto 32px;
  font-size: 15px; line-height: 1.6;
}
.news-form {
  display: flex; gap: 8px;
  max-width: 480px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 6px;
}
.news-form input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.news-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.news-form button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 12px 24px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.news-form button:hover { background: var(--accent-hot); }
.news-form .honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ========== FORMS ========== */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  box-shadow: 0 8px 32px rgba(11, 37, 64, 0.08);
}
.form-card.wide { max-width: 900px; }
.form-card h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
  color: var(--ink);
}
.form-card .lead {
  color: var(--ink-dim);
  margin-bottom: 32px;
  font-size: 15px;
}
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="url"],
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field .errors {
  color: var(--red);
  font-size: 12px;
  margin-top: 6px;
}
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.form-check input { width: auto; }
.form-check label { margin: 0; cursor: pointer; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0; width: 0; }

/* ========== ADMIN ========== */
.admin-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  max-width: 1280px;
  margin: 40px auto;
  padding: 0 5vw;
}
.admin-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  height: fit-content;
  position: sticky; top: 120px;
  box-shadow: 0 4px 20px rgba(11, 37, 64, 0.06);
}
.admin-side h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.admin-side a {
  display: block;
  padding: 10px 14px;
  color: var(--ink-dim);
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  transition: all 0.2s;
}
.admin-side a:hover, .admin-side a.active { background: var(--accent-glow); color: var(--accent-deep); }
.admin-main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(11, 37, 64, 0.06);
}
.admin-main h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: -0.3px;
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}
.stat-card .num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card .lbl {
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.admin-table th { font-weight: 600; color: var(--ink-mute); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.admin-table tr:hover { background: var(--surface-soft); }
.admin-table .actions { display: flex; gap: 8px; }
.admin-table .actions a, .admin-table .actions button {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.admin-table .actions .btn-del { color: var(--red); border-color: var(--red); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-pub { background: rgba(22, 163, 74, 0.15); color: var(--green); }
.badge-draft { background: var(--surface-soft); color: var(--ink-mute); }

/* ========== FOOTER ========== */
footer {
  border-top: 1px solid var(--line);
  padding: 40px 5vw 32px;
  background: var(--footer-bg);
  backdrop-filter: blur(8px);
  transition: background 2s ease;
}
.foot-row {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  align-items: center;
}
.foot-row p { font-size: 12px; color: var(--ink-mute); }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-dim); text-decoration: none; font-size: 12px; font-weight: 500; }
.foot-links a:hover { color: var(--accent); }

/* ========== PAGINATION ========== */
.pagination {
  display: flex; justify-content: center; gap: 8px;
  margin: 40px 0;
  flex-wrap: wrap;
}
.pagination a, .pagination .current, .pagination .disabled {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination .disabled { opacity: 0.4; }

/* ========== EMPTY STATE ========== */
.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-mute);
}
.empty h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--ink);
}

/* ========== MOBILE ========== */
@media (max-width: 920px) {
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-side { position: static; }
}
@media (max-width: 720px) {
  .nav-wrap { padding: 12px 4vw; }
  .nav { padding: 8px 8px 8px 18px; gap: 8px; }
  .nav-links { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .sun, .sun-rays { width: 80px; height: 80px; top: 5%; right: 6%; }
  .moon { width: 80px; height: 80px; }
  .moon-wrap { top: 6%; right: 6%; }
  .form-card { padding: 24px; }
  .admin-main { padding: 20px; }
  .news-form { flex-direction: column; border-radius: 20px; padding: 8px; }
  .news-form input { text-align: center; }
  .news-form button { width: 100%; padding: 14px; }
}

/* Mobile nav drawer */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 10px;
}
@media (max-width: 720px) {
  .mobile-menu-btn { display: block; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 4vw; right: 4vw;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    z-index: 100;
  }
}

/* ============================================================
   SUB-NAV (Database → Oracle/Postgres/etc)
   ============================================================ */
.subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
}
.subnav-item {
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: all 0.2s;
  white-space: nowrap;
}
.subnav-item:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.subnav-item.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   TAG CHIPS
   ============================================================ */
.tag-chip {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink-dim);
}

/* ============================================================
   CODE BLOCKS — with language label + copy button
   ============================================================ */
.codeblock {
  position: relative;
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0d1b2a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.codeblock pre {
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 48px 20px 20px !important;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #e4e9f2 !important;
  overflow-x: auto;
  white-space: pre;
}
.codeblock pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  white-space: pre !important;
}
.codeblock-label {
  position: absolute;
  top: 0; left: 0;
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent-hot);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom-right-radius: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.codeblock-copy {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e4e9f2;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.codeblock-copy:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Special styling for output / sqlplus blocks (green-ish, terminal feel) */
.codeblock-output, .codeblock-sqlplus {
  background: #0a0f1c;
  border-color: rgba(34, 197, 94, 0.2);
}
.codeblock-output .codeblock-label,
.codeblock-sqlplus .codeblock-label {
  color: #4ade80;
}
.codeblock-output pre,
.codeblock-sqlplus pre {
  color: #a3e9b8 !important;
}

/* Language-specific accent colors */
.codeblock-sql .codeblock-label,
.codeblock-plsql .codeblock-label { color: #60a5fa; }
.codeblock-python .codeblock-label { color: #fde047; }
.codeblock-bash .codeblock-label,
.codeblock-shell .codeblock-label { color: #f87171; }
.codeblock-cql .codeblock-label { color: #c084fc; }
.codeblock-mongo .codeblock-label,
.codeblock-mongodb .codeblock-label { color: #4ade80; }
.codeblock-json .codeblock-label,
.codeblock-yaml .codeblock-label { color: #fbbf24; }

/* For inline code outside the article body (fallback) */
.article-body p code,
.article-body li code,
.article-body td code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  color: var(--accent-deep);
}

/* ============================================================
   SHARE BAR
   ============================================================ */
.share-bar {
  margin-top: 48px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(11, 37, 64, 0.06);
}
.share-label {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 16px;
}
.share-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 37, 64, 0.1);
}
.share-btn svg { flex-shrink: 0; }

.share-x:hover { background: #000; color: #fff; border-color: #000; }
.share-li:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.share-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-rd:hover { background: #ff4500; color: #fff; border-color: #ff4500; }
.share-hn:hover { background: #ff6600; color: #fff; border-color: #ff6600; }
.share-copy:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

@media (max-width: 720px) {
  .share-buttons { gap: 8px; }
  .share-btn { padding: 8px 12px; font-size: 12px; }
  .share-btn span { display: none; }
  .share-copy span { display: inline; }
}