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

/*
Theme Name: CybersecurityWaala
Theme URI: https://cybersecuritywaala.com
Author: CybersecurityWaala Team
Description: Explore cybersecurity blog posts covering latest threats, vulnerabilities, ethical hacking techniques, and security best practices. Learn how cyber attacks work and how to prevent them.
Version: 9.0.0
License: GNU General Public License v2 or later
Text Domain: csw-theme-v9
Tags: cybersecurity, cybersecurity wala, cybersecurity waala, cybersecuritywaala
*/

/* ============================================================
   CSS RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --emerald-400: #34d399;
  --emerald-600: #059669;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;
  --white: #ffffff;
  --black: #000000;
  --red-50:  #fef2f2;
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --yellow-50: #fefce8;
  --yellow-200: #fef08a;
  --yellow-600: #ca8a04;

  /* Theme tokens */
  --bg-primary: var(--white);
  --bg-secondary: var(--gray-50);
  --bg-card: var(--white);
  --bg-nav: rgba(255,255,255,0.92);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --border-color: var(--gray-200);
  --border-card: var(--gray-200);
  --nav-border: var(--gray-200);
  --footer-bg: var(--white);
  --input-bg: var(--gray-50);
  --hover-bg: var(--gray-100);
  --code-bg: #1e1e1e;
}

/* Dark Mode — exact match to React dark:bg-gray-950 (#030712) everywhere */
html.dark {
  --bg-primary:   #030712;
  --bg-secondary: #030712;
  --bg-card:      #111827;
  --bg-nav:       rgba(3,7,18,0.92);
  --text-primary:   #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted:     #6b7280;
  --border-color: #1f2937;
  --border-card:  #1f2937;
  --nav-border:   #1f2937;
  --footer-bg:    #030712;
  --input-bg:     #000;
  --hover-bg:     #1f2937;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
html.dark body { background-color: #030712; color: #f3f4f6; }

::selection { background: var(--green-500); color: var(--black); }

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================================
   UTILITY CLASSES
============================================================ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.container-md { max-width: 896px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container-md { padding: 0 1.5rem; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.text-green { color: var(--green-600); }
html.dark .text-green { color: var(--green-500); }

.bg-green-badge {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid rgba(34,197,94,0.3);
}
html.dark .bg-green-badge {
  background: rgba(20,83,45,0.2);
  color: var(--green-400);
}

.gradient-text {
  background: linear-gradient(to right, var(--green-600), var(--emerald-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.625rem 1.25rem;
  background: var(--gray-900); color: var(--white);
  font-weight: 600; font-size: 0.9rem; border-radius: 0.375rem;
  transition: all 0.2s ease; border: 1px solid transparent;
}
html.dark .btn-primary { background: var(--white); color: var(--black); }
.btn-primary:hover { background: var(--gray-800); }
html.dark .btn-primary:hover { background: var(--gray-200); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.625rem 0.9rem;
  border: 1px solid var(--green-200); color: var(--green-700);
  background: var(--green-50); font-weight: 700; font-size: 0.9rem; border-radius: 0.375rem;
  transition: all 0.2s ease;
}
html.dark .btn-secondary {
  border-color: rgba(20,83,45,0.8); color: var(--green-400);
  background: rgba(20,83,45,0.2);
}
.btn-secondary:hover { background: var(--green-100); }
html.dark .btn-secondary:hover { background: rgba(20,83,45,0.4); }

.btn-ai {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(to right, var(--green-600), var(--emerald-600));
  color: var(--white); font-weight: 700; font-size: 0.875rem; border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(34,197,94,0.2); transition: all 0.2s ease;
}
.btn-ai:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ============================================================
   NAVBAR — exact match to React Navbar.tsx
============================================================ */
#site-header {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e7eb;
  transition: background 0.3s, border-color 0.3s;
}
html.dark #site-header {
  background: rgba(3,7,18,0.9);
  border-bottom-color: #1f2937;
}

/* max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between */
.navbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
@media (min-width: 640px) { .navbar-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .navbar-inner { padding: 0 2rem; } }

/* Logo — left side */
.navbar-left { display: flex; align-items: center; }
.site-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.logo-icon {
  background: #dcfce7; padding: 0.5rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
html.dark .logo-icon { background: rgba(20,83,45,0.3); }
.site-logo:hover .logo-icon { background: #bbf7d0; }
html.dark .site-logo:hover .logo-icon { background: rgba(20,83,45,0.5); }
.logo-icon svg { width: 1.5rem; height: 1.5rem; color: #16a34a; }
html.dark .logo-icon svg { color: #22c55e; }
.logo-text {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.025em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #111827;
}
@media (min-width: 640px) { .logo-text { font-size: 1.25rem; } }
html.dark .logo-text { color: #fff; }
.logo-text span { color: #16a34a; }
html.dark .logo-text span { color: #22c55e; }

/* Desktop nav — hidden on mobile, flex on md+ */
.navbar-desktop { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .navbar-desktop { display: flex; } }

/* Nav links group — ml-8 space-x-2 lg:space-x-4 */
.nav-links-group {
  display: flex; align-items: center;
  margin-left: 2rem; gap: 0.5rem;
}
@media (min-width: 1024px) { .nav-links-group { gap: 1rem; } }

/* Individual nav link — px-3 py-2 rounded-md text-sm font-medium */
.nav-link {
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  font-size: 0.875rem; font-weight: 500;
  color: #4b5563; /* gray-600 */
  transition: all 0.2s; border: 1px solid transparent;
  white-space: nowrap; text-decoration: none;
}
html.dark .nav-link { color: #d1d5db; } /* gray-300 */
.nav-link:hover { color: #111827; background: #f3f4f6; }
html.dark .nav-link:hover { color: #fff; background: #1f2937; }
.nav-link.active {
  background: #f0fdf4; color: #15803d;
  border-color: #bbf7d0;
}
html.dark .nav-link.active {
  background: rgba(22,163,74,0.1); color: #4ade80;
  border-color: rgba(22,163,74,0.5);
}

/* AI Chat button — gradient rectangle with sparkle */
.btn-ai-nav {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 0.375rem;
  font-size: 0.875rem; font-weight: 700; color: #fff;
  background: linear-gradient(to right, #16a34a, #059669);
  box-shadow: 0 10px 15px -3px rgba(34,197,94,0.2);
  transition: all 0.2s; white-space: nowrap; text-decoration: none;
}
.btn-ai-nav:hover {
  background: linear-gradient(to right, #15803d, #047857);
  transform: translateY(-1px);
}
.btn-ai-nav svg:first-child { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Theme toggle — ml-6 rounded-full ring-1 */
#theme-toggle {
  margin-left: 1.5rem;
  padding: 0.5rem; border-radius: 9999px;
  color: #4b5563;
  box-shadow: 0 0 0 1px #e5e7eb; /* ring-1 ring-gray-200 */
  background: transparent; border: none;
  transition: background 0.2s; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
}
html.dark #theme-toggle {
  color: #9ca3af;
  box-shadow: 0 0 0 1px #1f2937; /* ring-1 ring-gray-800 */
}
#theme-toggle:hover { background: #f3f4f6; }
html.dark #theme-toggle:hover { background: #1f2937; }
#theme-toggle svg { width: 1.25rem; height: 1.25rem; display: block; flex-shrink: 0; }

/* Show only one icon at a time */
.icon-sun  { display: none; }
.icon-moon { display: block; }
html.dark .icon-sun  { display: block; }
html.dark .icon-moon { display: none; }

/* Mobile controls — flex on mobile, hidden on md+ */
.navbar-mobile {
  display: flex; align-items: center; gap: 1rem;
}
@media (min-width: 768px) { .navbar-mobile { display: none; } }

/* Mobile theme toggle — no ring, just icon */
#theme-toggle-mobile {
  padding: 0.5rem; border-radius: 9999px;
  color: #4b5563; background: transparent; border: none;
  transition: background 0.2s; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
html.dark #theme-toggle-mobile { color: #9ca3af; }
#theme-toggle-mobile:hover { background: #f3f4f6; }
html.dark #theme-toggle-mobile:hover { background: #1f2937; }
#theme-toggle-mobile svg { width: 1.25rem; height: 1.25rem; display: block; }
/* Mobile toggle also only shows one icon */
#theme-toggle-mobile .icon-sun  { display: none; }
#theme-toggle-mobile .icon-moon { display: block; }
html.dark #theme-toggle-mobile .icon-sun  { display: block; }
html.dark #theme-toggle-mobile .icon-moon { display: none; }

/* Hamburger button */
.mobile-menu-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem; border-radius: 0.375rem;
  color: #4b5563; background: transparent; border: none;
  transition: all 0.2s; cursor: pointer;
}
html.dark .mobile-menu-btn { color: #9ca3af; }
.mobile-menu-btn:hover { color: #111827; background: #f3f4f6; }
html.dark .mobile-menu-btn:hover { color: #fff; background: #374151; }

/* Mobile dropdown */
#mobile-menu {
  display: none;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
html.dark #mobile-menu { background: #111827; border-bottom-color: #1f2937; }
#mobile-menu.open { display: block; }
.mobile-nav-links { padding: 0.5rem 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav-link {
  display: block; padding: 0.75rem 1rem; border-radius: 0.5rem;
  font-size: 1rem; font-weight: 500; color: #4b5563; transition: all 0.2s; text-decoration: none;
}
html.dark .mobile-nav-link { color: #d1d5db; }
.mobile-nav-link:hover { background: #f3f4f6; color: #111827; }
html.dark .mobile-nav-link:hover { background: #1f2937; color: #fff; }
.mobile-nav-link.active { background: #f0fdf4; color: #15803d; }
html.dark .mobile-nav-link.active { background: rgba(20,83,45,0.2); color: #4ade80; }
.mobile-ai-btn {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.5rem; margin-top: 1rem;
  font-size: 1rem; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(to right, #16a34a, #059669);
}
.mobile-ai-btn {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem;
  padding: 0.75rem 1rem; border-radius: 0.5rem;
  background: linear-gradient(to right, var(--green-600), var(--emerald-600));
  color: var(--white); font-weight: 700; font-size: 1rem;
}

/* ============================================================
   SITE LAYOUT
============================================================ */
#site-content { flex: 1; padding-top: 0px; }

/* ============================================================
   HERO SECTION (Homepage)
============================================================ */
.hero-section {
  padding: 6rem 0 3rem;
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 640px) { .hero-section { padding: 8rem 0 5rem; } }

.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
}
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.hero-title {
  font-size: 1.875rem; font-weight: 800; line-height: 1.15;
  color: var(--text-primary); margin-bottom: 1rem; letter-spacing: -0.025em;
}
@media (min-width: 640px) { .hero-title { font-size: 3rem; } }
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }

.hero-desc {
  font-size: 1rem; color: var(--text-secondary); max-width: 36rem;
  line-height: 1.75; margin-bottom: 1.75rem;
}
@media (min-width: 640px) { .hero-desc { font-size: 1.125rem; } }

.hero-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.hero-visual {
  display: none; justify-content: flex-end;
}
@media (min-width: 1024px) { .hero-visual { display: flex; } }

.hero-graphic {
  width: 100%; max-width: 28rem; aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--green-50), #eff6ff);
  border-radius: 1rem; border: 1px solid var(--border-color);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
html.dark .hero-graphic { background: linear-gradient(135deg, var(--gray-900), var(--gray-800)); }
.hero-graphic .shield-icon {
  position: absolute; width: 8rem; height: 8rem;
  color: rgba(22,163,74,0.2);
}
html.dark .hero-graphic .shield-icon { color: rgba(34,197,94,0.2); }
.hero-graphic .globe-icon {
  position: absolute; bottom: 3rem; right: 3rem;
  width: 6rem; height: 6rem; color: rgba(37,99,235,0.2);
}
html.dark .hero-graphic .globe-icon { color: rgba(59,130,246,0.2); }

/* ============================================================
   POSTS GRID SECTION
============================================================ */
.posts-section { padding: 3rem 0; }
@media (min-width: 640px) { .posts-section { padding: 5rem 0; } }

.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2rem;
}
@media (min-width: 640px) { .section-header { margin-bottom: 3rem; } }

.section-title { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.25rem; }
@media (min-width: 640px) { .section-title { font-size: 2rem; } }
.section-subtitle { font-size: 0.875rem; color: var(--text-muted); }

.view-all-link {
  display: none; align-items: center; gap: 0.5rem;
  color: var(--green-600); font-weight: 600; font-size: 0.9rem;
}
html.dark .view-all-link { color: var(--green-500); }
.view-all-link:hover { text-decoration: underline; }
@media (min-width: 768px) { .view-all-link { display: flex; } }

/* Post Grid */
.posts-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 768px) { .posts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } }

/* Featured Post Card */
.post-card-featured {
  grid-column: 1 / -1;
  position: relative; overflow: hidden; border-radius: 1rem;
  background: var(--gray-100); min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem; transition: transform 0.3s; text-decoration: none;
}
@media (min-width: 640px) { .post-card-featured { min-height: 400px; padding: 2rem; } }
@media (min-width: 1024px) { .post-card-featured { grid-column: span 2; } }
html.dark .post-card-featured { background: var(--gray-900); }
.post-card-featured:hover { transform: translateY(-4px); }

.featured-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.post-card-featured:hover .featured-img { transform: scale(1.05); }
.featured-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.5), transparent);
}
.featured-content { position: relative; z-index: 10; }
.featured-meta { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.8); font-size: 0.8rem; margin-bottom: 0.75rem; }
.featured-category { color: var(--green-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; }
.featured-title { font-size: 1.75rem; font-weight: 800; color: var(--white); line-height: 1.25; transition: color 0.2s; }
@media (min-width: 640px) { .featured-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .featured-title { font-size: 2.5rem; } }
.post-card-featured:hover .featured-title { color: var(--green-400); }
.featured-excerpt { font-size: 0.875rem; color: var(--gray-300); margin-top: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 48rem; }

/* Standard Post Card */
.post-card {
  background: var(--bg-card); border-radius: 1rem; overflow: hidden;
  border: 1px solid var(--border-card); display: flex; flex-direction: column;
  transition: all 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  text-decoration: none;
}
.post-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  transform: translateY(-4px); border-color: rgba(34,197,94,0.3);
}
html.dark .post-card:hover { box-shadow: 0 0 15px rgba(34,197,94,0.1); }

.post-card-img-wrap { aspect-ratio: 16/9; overflow: hidden; background: var(--gray-100); position: relative; }
html.dark .post-card-img-wrap { background: var(--gray-800); }
.post-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post-card:hover .post-card-img { transform: scale(1.05); }

.post-card-body { padding: 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.post-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.post-category-badge {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--green-600); background: var(--green-50);
  padding: 0.2rem 0.5rem; border-radius: 0.25rem;
}
html.dark .post-category-badge { color: var(--green-500); background: rgba(20,83,45,0.2); }
.post-date { font-size: 0.6rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.2rem; }
.post-card-title {
  font-size: 1.125rem; font-weight: 700; color: var(--text-primary);
  line-height: 1.4; margin-bottom: 0.75rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.2s;
}
.post-card:hover .post-card-title { color: var(--green-600); }
html.dark .post-card:hover .post-card-title { color: var(--green-500); }
.post-card-excerpt {
  font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1; margin-bottom: 1rem;
}
.post-card-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.post-author { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

/* Tags */
.post-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.post-tag {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); background: var(--hover-bg);
  padding: 0.15rem 0.4rem; border-radius: 0.2rem;
}

.read-more {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--green-600); font-weight: 700; font-size: 0.875rem;
}
html.dark .read-more { color: var(--green-500); }
.read-more:hover { text-decoration: underline; }

/* Mobile "View all" button */
.view-all-mobile {
  margin-top: 3rem; text-align: center;
}
@media (min-width: 768px) { .view-all-mobile { display: none; } }
.view-all-mobile-btn {
  display: inline-flex; align-items: center;
  padding: 0.75rem 1.5rem; border: 1px solid var(--border-color);
  border-radius: 0.375rem; color: var(--text-secondary); font-size: 1rem; font-weight: 500;
  transition: background 0.2s;
}
.view-all-mobile-btn:hover { background: var(--hover-bg); }

/* ============================================================
   NEWSLETTER SECTION
============================================================ */
.newsletter-section {
  background: var(--bg-primary); padding: 4rem 0;
  border-top: 1px solid var(--border-color); text-align: center;
}
@media (min-width: 640px) { .newsletter-section { padding: 3rem 0; } }

.newsletter-inner { max-width: 64rem; margin: 0 auto; padding: 0 0rem; }
.newsletter-title { font-size: 1.75rem; font-weight: 800; color: var(--green-600); margin-bottom: 1rem; }
html.dark .newsletter-title { color: var(--green-500); }
@media (min-width: 640px) { .newsletter-title { font-size: 2rem; } }
.newsletter-desc { font-size: 1rem; color: var(--text-secondary); max-width: 36rem; margin: 0 auto 2rem; }

.newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 28rem; margin: 0 auto; }
@media (min-width: 640px) { .newsletter-form { flex-direction: row; } }

.newsletter-input {
  flex: 1; padding: 0.75rem 1rem; border-radius: 0.375rem;
  border: 1px solid var(--border-color); background: var(--bg-primary);
  color: var(--text-primary); font-size: 1rem; outline: none; transition: all 0.2s;
  font-family: inherit;
}
.newsletter-input:focus { border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
.newsletter-btn {
  padding: 0.75rem 1.5rem; background: var(--green-600); color: var(--white);
  font-weight: 700; border-radius: 0.375rem; transition: background 0.2s;
  font-size: 1rem; min-width: 130px; display: flex; align-items: center; justify-content: center;
}


@media (max-width: 639px) {
  .newsletter-btn {
    width: auto;
    align-self: center;
    min-width: 130px;
    max-width: 200px;
  }
}

.newsletter-btn:hover:not(:disabled) { background: var(--green-700); }
.newsletter-btn:disabled { opacity: 0.7; cursor: not-allowed; }

.newsletter-privacy { margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted); }
.newsletter-privacy a { text-decoration: underline; }
.newsletter-privacy a:hover { color: var(--text-primary); }

.newsletter-success { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; color: var(--green-600); }
html.dark .newsletter-success { color: var(--green-400); }

/* ============================================================
   BLOGS PAGE
============================================================ */
.page-hero { text-align: center; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .page-hero { margin-bottom: 4rem; } }
.page-title { font-size: 2rem; font-weight: 800; font-family: ui-monospace, monospace; color: var(--text-primary); margin-bottom: 0.75rem; }
@media (min-width: 640px) { .page-title { font-size: 2.5rem; } }
.page-subtitle { font-size: 1rem; color: var(--text-secondary); max-width: 40rem; margin: 0 auto; }
@media (min-width: 640px) { .page-subtitle { font-size: 1.125rem; } }

.terminal-bar {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem;
}
.terminal-label {
  font-size: 0.875rem; font-weight: 700; font-family: ui-monospace, monospace;
  color: var(--green-600); border-left: 4px solid var(--green-600); padding-left: 1rem;
}
html.dark .terminal-label { color: var(--green-500); border-color: var(--green-500); }
.refresh-btn {
  padding: 0.5rem; border-radius: 9999px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-secondary); transition: color 0.2s; line-height: 0;
}
.refresh-btn:hover { color: var(--green-600); }
.refresh-btn svg { width: 1rem; height: 1rem; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.blogs-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 768px) { .blogs-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .blogs-grid { grid-template-columns: 1fr 1fr 1fr; } }

.blog-card {
  background: var(--bg-card); border-radius: 0.75rem; overflow: hidden;
  border: 1px solid var(--border-card); display: flex; flex-direction: column;
  transition: all 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.blog-card:hover {
  border-color: rgba(34,197,94,0.5); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
html.dark .blog-card:hover { box-shadow: 0 0 15px rgba(34,197,94,0.1); }

.blog-card-img-wrap { height: 12rem; overflow: hidden; position: relative; background: var(--gray-100); }
html.dark .blog-card-img-wrap { background: var(--gray-800); }
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-card:hover .blog-card-img { transform: scale(1.1); }
.blog-card-cat-badge {
  position: absolute; top: 1rem; left: 1rem;
  padding: 0.25rem 0.75rem;
  background: rgba(255,255,255,0.95); color: var(--green-700);
  border: 1px solid rgba(34,197,94,0.3); border-radius: 0.25rem;
  font-family: ui-monospace, monospace; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}
html.dark .blog-card-cat-badge { background: rgba(0,0,0,0.8); color: var(--green-400); }

.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta { display: flex; align-items: center; font-size: 0.7rem; color: var(--text-muted); font-family: ui-monospace, monospace; gap: 1rem; margin-bottom: 1rem; }
.blog-card-meta svg { width: 0.75rem; height: 0.75rem; }
.blog-card-title {
  font-size: 1.2rem; font-weight: 700; color: var(--text-primary); line-height: 1.4;
  margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.2s;
}
.blog-card:hover .blog-card-title { color: var(--green-600); }
html.dark .blog-card:hover .blog-card-title { color: var(--green-400); }
.blog-card-excerpt {
  font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; flex: 1;
  margin-bottom: 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.blog-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }

/* ============================================================
   SINGLE POST — matches React PostDetail + index.html prose styles exactly
============================================================ */
.post-header-bg { background: var(--bg-card); border-bottom: 1px solid var(--border-color); padding-top: 4rem; }
@media (min-width: 640px) { .post-header-bg { padding-top: 5rem; } }
.post-header-inner { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1rem; }
@media (min-width: 640px) { .post-header-inner { padding: 4rem 1.5rem; } }

.back-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.5rem; transition: color 0.2s;
}
.back-link:hover { color: var(--green-600); }
html.dark .back-link { color: var(--gray-400); }
html.dark .back-link:hover { color: var(--green-500); }

.post-cat-pill {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--green-100); color: var(--green-700);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 0.375rem; margin-bottom: 1.5rem;
}
html.dark .post-cat-pill { background: rgba(20,83,45,0.3); color: var(--green-500); }

/* Title: text-2xl sm:text-3xl md:text-5xl font-extrabold */
.post-main-title {
  font-size: 1.5rem; font-weight: 800;
  color: var(--text-primary); line-height: 1.2; margin-bottom: 1.5rem; word-break: break-word;
  font-family: 'Inter', sans-serif;
}
@media (min-width: 640px) { .post-main-title { font-size: 1.875rem; } }
@media (min-width: 768px) { .post-main-title { font-size: 3rem; } }
html.dark .post-main-title { color: #fff; }

.post-author-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.author-avatar {
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: linear-gradient(135deg, var(--green-500), var(--emerald-600));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2);
}
@media (min-width: 640px) { .author-avatar { width: 2.5rem; height: 2.5rem; } }
.author-name { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
html.dark .author-name { color: #fff; }
.author-role { font-size: 0.75rem; color: var(--text-muted); display: none; }
@media (min-width: 640px) { .author-role { display: block; } }
.post-date-display { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); }

.post-body-wrap { max-width: 56rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
@media (min-width: 640px) { .post-body-wrap { padding: 3rem 1.5rem 4rem; } }

.post-featured-img {
  border-radius: 0.75rem; overflow: hidden; margin-bottom: 2rem;
  border: 1px solid var(--border-color); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
@media (min-width: 640px) { .post-featured-img { margin-bottom: 3rem; } }
.post-featured-img img { width: 100%; height: auto; }

/* ── wp-prose: exact mirror of React index.html .prose styles ── */
.wp-content {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem; line-height: 1.8; color: #374151;
}
html.dark .wp-content { color: #d1d5db; }

.wp-content p { margin-bottom: 1.5rem; font-size: 1.125rem; line-height: 1.8; color: #374151; }
html.dark .wp-content p { color: #d1d5db; }
@media (max-width: 640px) { .wp-content p, .wp-content li { font-size: 0.9375rem !important; line-height: 1.6; } }

/* h1 — gray-900 */
.wp-content h1 {
  font-family: 'Inter', sans-serif; font-size: 2.5rem; font-weight: 900;
  color: #111827; line-height: 1.2; margin-top: 2em; margin-bottom: 1rem;
}
html.dark .wp-content h1 { color: #f9fafb; }
@media (max-width: 640px) { .wp-content h1 { font-size: 1.75rem; margin-top: 1.5em; } }

/* h2 — brand green */
.wp-content h2 {
  font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 800;
  color: #16a34a !important; line-height: 1.3; margin-top: 2em; margin-bottom: 1em;
}
html.dark .wp-content h2 { color: #4ade80 !important; }
@media (max-width: 640px) { .wp-content h2 { font-size: 1.5rem; margin-top: 1.5em; } }

/* h3 — sky blue */
.wp-content h3 {
  font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700;
  color: #0284c7 !important; line-height: 1.3; margin-top: 1.5em; margin-bottom: 0.75em;
}
html.dark .wp-content h3 { color: #38bdf8 !important; }
@media (max-width: 640px) { .wp-content h3 { font-size: 1.25rem; margin-top: 1.25em; } }

/* h4 — indigo */
.wp-content h4 {
  font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700;
  color: #4f46e5 !important; line-height: 1.3; margin-top: 1.5em; margin-bottom: 0.5em;
}
html.dark .wp-content h4 { color: #818cf8 !important; }
@media (max-width: 640px) { .wp-content h4 { font-size: 1.125rem; } }

.wp-content h1 *, .wp-content h2 *, .wp-content h3 *, .wp-content h4 * { color: inherit !important; }

/* Links — blue */
.wp-content a { color: #2563eb; text-decoration: underline; font-weight: 600; transition: color 0.2s; }
.wp-content a:hover { color: #1d4ed8; }
html.dark .wp-content a { color: #60a5fa; }
html.dark .wp-content a:hover { color: #93c5fd; }
.wp-content a strong, .wp-content a b { color: inherit !important; }

.wp-content strong, .wp-content b { font-weight: 700; color: #111827; }
html.dark .wp-content strong, html.dark .wp-content b { color: #f3f4f6; }

.wp-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.wp-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.wp-content li { margin-bottom: 0.5rem; font-size: 1.125rem; line-height: 1.8; color: #374151; }
html.dark .wp-content li { color: #d1d5db; }

.wp-content blockquote {
  border-left: 4px solid var(--green-500); padding: 0.75rem 1.25rem;
  margin: 2rem 0; background: var(--bg-secondary);
  border-radius: 0 0.5rem 0.5rem 0; color: var(--text-secondary); font-style: italic;
}
.wp-content blockquote p { margin-bottom: 0; }

/* Inline code — pink */
.wp-content p code, .wp-content li code, .wp-content td code {
  background: #e5e7eb; color: #be185d;
  padding: 0.2em 0.4em; border-radius: 4px;
  font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.9em;
}
html.dark .wp-content p code, html.dark .wp-content li code, html.dark .wp-content td code {
  background: #1f2937; color: #f472b6;
}


/* Code blocks — dark bg, JetBrains Mono */
.wp-content pre {
  background-color: #1e1e1e !important; color: #e5e7eb !important;
  border-radius: 8px; padding: 1.5rem; margin: 2rem 0;
  overflow-x: auto; border: 1px solid #333;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); font-size: 0.9em; line-height: 1.6;
}
.wp-content pre code {
  background: transparent !important; color: inherit !important;
  padding: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.9em;
}
@media (max-width: 640px) {
  .wp-content pre { padding: 0.75rem; margin: 1rem 0; border-radius: 6px; }
  .wp-content pre code { font-size: 0.75rem; line-height: 1.4; }
}

/* Tables */
.wp-content table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 1rem; }
@media (max-width: 640px) {
  .wp-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 0.8rem; }
}
.wp-content thead th {
  color: #111827; font-weight: 700; border-bottom: 2px solid #e5e7eb; padding: 0.75rem;
}
html.dark .wp-content thead th { color: #f3f4f6; border-color: #374151; }
.wp-content tbody td { border-bottom: 1px solid #e5e7eb; padding: 0.75rem; color: #374151; }
html.dark .wp-content tbody td { border-color: #374151; color: #d1d5db; }
.wp-content tbody tr:nth-child(odd) { background-color: rgba(243,244,246,0.5); }
html.dark .wp-content tbody tr:nth-child(odd) { background-color: rgba(31,41,55,0.5); }

.wp-content img { border-radius: 0.75rem; margin: 1.75rem 0; max-width: 100%; height: auto; }
.wp-content hr { border: none; border-top: 1px solid var(--border-color); margin: 2.5rem 0; }

.post-tags-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
@media (min-width: 640px) { .post-tags-section { margin-top: 3rem; } }
.tags-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.tags-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-pill {
  padding: 0.25rem 0.75rem; background: var(--bg-secondary);
  color: var(--text-secondary); border-radius: 9999px; font-size: 0.875rem;
  border: 1px solid var(--border-color);
}

/* Loading & Error States */
.state-center { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 1rem; text-align: center; }
.state-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; }
.state-loading-icon { color: var(--green-600); animation: spin 1s linear infinite; }
.state-text { font-family: ui-monospace, monospace; color: var(--text-muted); font-size: 0.875rem; }
.error-box {
  background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-600);
  border-radius: 0.75rem; padding: 2rem; text-align: center;
}
html.dark .error-box { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #f87171; }
.error-box h3 { font-weight: 700; margin-bottom: 0.5rem; }

/* ============================================================
   TOOLS PAGE
============================================================ */
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .tools-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; } }

.tool-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0.75rem; border-radius: 0.75rem; border: 1px solid var(--border-color);
  background: var(--bg-card); cursor: pointer; transition: all 0.2s;
}
@media (min-width: 640px) { .tool-card { flex-direction: row; text-align: left; align-items: flex-start; padding: 1rem; } }
.tool-card.active {
  background: var(--green-50); border-color: var(--green-500);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transform: scale(1.02);
}
html.dark .tool-card.active { background: rgba(20,83,45,0.2); }
.tool-card-icon {
  padding: 0.5rem; border-radius: 0.5rem; flex-shrink: 0;
  background: var(--gray-100); color: var(--text-muted); margin-bottom: 0.5rem;
}
@media (min-width: 640px) { .tool-card-icon { margin-bottom: 0; margin-right: 0.75rem; } }
.tool-card.active .tool-card-icon { background: var(--green-100); color: var(--green-600); }
html.dark .tool-card.active .tool-card-icon { background: rgba(20,83,45,0.4); color: var(--green-400); }
.tool-card svg { width: 1.25rem; height: 1.25rem; }
.tool-card-label { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.tool-card.active .tool-card-label { color: var(--green-700); }
html.dark .tool-card.active .tool-card-label { color: var(--green-400); }
.tool-card-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; display: none; }
@media (min-width: 640px) { .tool-card-desc { display: block; } }

.tool-interface {
  background: var(--bg-card); border-radius: 1rem;
  border: 1px solid var(--border-color); padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-height: 400px; display: flex; flex-direction: column;
}
@media (min-width: 640px) { .tool-interface { padding: 2rem; min-height: 500px; } }

.tool-interface-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1.5rem;
}
.tool-interface-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .tool-interface-title { font-size: 1.5rem; } }
.tool-interface-title svg { width: 1.25rem; height: 1.25rem; color: var(--green-500); }
@media (min-width: 640px) { .tool-interface-title svg { width: 1.5rem; height: 1.5rem; } }

.tool-input { margin-bottom: 1.5rem; }
.tool-input label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.5rem; }
.tool-input-row { display: flex; gap: 0.5rem; }
.tool-input input, .tool-input select {
  flex: 1; padding: 0.625rem 1rem; border-radius: 0.5rem;
  border: 1px solid var(--border-color); background: var(--input-bg);
  color: var(--text-primary); font-size: 0.9rem; outline: none; font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tool-input input:focus, .tool-input select:focus {
  border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}
.tool-input select { flex: 0 0 auto; }
.run-btn {
  padding: 0.625rem 1.5rem; background: var(--green-600); color: var(--white);
  font-weight: 600; border-radius: 0.5rem; font-size: 0.9rem; transition: background 0.2s;
}
.run-btn:hover:not(:disabled) { background: var(--green-700); }
.run-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tool-output {
  flex: 1; background: var(--bg-secondary); border-radius: 0.75rem;
  border: 1px solid var(--border-color); padding: 1rem; overflow: auto;
  position: relative; min-height: 250px;
}
@media (min-width: 640px) { .tool-output { padding: 1.5rem; } }

.output-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--gray-400); text-align: center; padding: 1rem;
}
.output-placeholder svg { width: 3rem; height: 3rem; margin-bottom: 1rem; opacity: 0.2; }
.output-placeholder p { font-family: ui-monospace, monospace; font-size: 0.875rem; }

.ip-display {
  background: linear-gradient(135deg, var(--green-50), #eff6ff);
  border-radius: 0.75rem; border: 1px solid var(--green-100);
  padding: 1.5rem; text-align: center; margin-bottom: 1.5rem;
}
html.dark .ip-display { background: linear-gradient(135deg, rgba(20,83,45,0.2), rgba(30,58,138,0.2)); border-color: rgba(20,83,45,0.3); }
.ip-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.ip-value { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 700; color: var(--text-primary); word-break: break-all; }
@media (min-width: 640px) { .ip-value { font-size: 3rem; } }

.result-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .result-grid { grid-template-columns: 1fr 1fr; } }
.result-row {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 0.5rem; padding: 0.75rem 1rem;
}
.result-row.full { grid-column: 1 / -1; }
.result-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.35rem; }
.result-label svg { width: 0.875rem; height: 0.875rem; color: var(--green-600); }
.result-value { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); word-break: break-all; }

.dns-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dns-table th {
  background: var(--bg-secondary); color: var(--text-muted);
  padding: 0.75rem 1rem; text-align: left; font-family: ui-monospace, monospace;
  font-size: 0.75rem; text-transform: uppercase;
}
.dns-table th:first-child { border-radius: 0.5rem 0 0 0; }
.dns-table th:last-child  { border-radius: 0 0.5rem 0 0; }
.dns-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); word-break: break-all; font-family: ui-monospace, monospace; color: var(--text-primary); }
.dns-table tr:hover td { background: var(--hover-bg); }

.json-toggle-btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.75rem; border: 1px solid var(--border-color);
  border-radius: 0.375rem; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
  margin-bottom: 1rem; margin-left: auto;
  transition: background 0.2s;
}
.json-toggle-btn:hover { background: var(--hover-bg); }
.json-pre {
  background: var(--gray-100); color: var(--gray-800);
  font-family: ui-monospace, monospace; font-size: 0.75rem;
  padding: 1rem; border-radius: 0.5rem; overflow-x: auto; white-space: pre-wrap;
}
html.dark .json-pre { background: var(--gray-800); color: var(--gray-300); }

.ping-status { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.ping-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
.ping-dot.up   { background: var(--green-500); }
.ping-dot.down { background: var(--red-500); }
.ping-status-text { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }
.ping-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ping-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 1rem; }
.ping-card-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.25rem; }
.ping-card-value { font-size: 1.25rem; font-weight: 700; }
.ping-card-value.up   { color: var(--green-600); }
.ping-card-value.down { color: var(--red-500); }
.ping-url-info { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.75rem; word-break: break-all; }

.whois-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.whois-card-title {
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
  border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.whois-card-title svg { width: 1.25rem; height: 1.25rem; color: var(--green-600); }
.whois-row { display: grid; grid-template-columns: 1fr; gap: 0.25rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.whois-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
@media (min-width: 640px) { .whois-row { grid-template-columns: 1fr 2fr; } }
.whois-key { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); }
.whois-val { font-size: 0.875rem; color: var(--text-primary); font-family: ui-monospace, monospace; word-break: break-all; }
.status-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; margin: 0.1rem; }
html.dark .status-badge { background: rgba(30,58,138,0.3); color: #93c5fd; border-color: rgba(30,58,138,0.5); }

/* ============================================================
   NEWS PAGE
============================================================ */
.news-list { display: flex; flex-direction: column; gap: 1.5rem; }
.news-card {
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: 0.5rem; padding: 1.5rem; transition: border-color 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.news-card:hover { border-color: rgba(34,197,94,0.3); }
.news-card-inner { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .news-card-inner { flex-direction: row; gap: 1.5rem; } }
.news-card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-family: ui-monospace, monospace; color: var(--green-600); margin-bottom: 0.5rem; }
html.dark .news-card-meta { color: var(--green-500); }
.news-card-title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.4; }
.news-card-title a { transition: color 0.2s; }
.news-card-title a:hover { color: var(--green-600); }
html.dark .news-card-title a:hover { color: var(--green-400); }
.news-card-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-source-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); transition: color 0.2s; margin-top: 1rem; }
.news-source-link:hover { color: var(--green-600); }
html.dark .news-source-link:hover { color: var(--green-500); }
.news-thumb { width: 100%; height: 10rem; flex-shrink: 0; background: var(--bg-secondary); border-radius: 0.5rem; overflow: hidden; }
@media (min-width: 768px) { .news-thumb { width: 12rem; height: 8rem; } }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity 0.2s; }
.news-thumb img:hover { opacity: 1; }
.news-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--gray-400); }

/* ============================================================
   ABOUT PAGE
============================================================ */
.about-content-card {
  max-width: 56rem; margin: 0 auto 3rem;
  background: var(--bg-card); border-radius: 0.75rem;
  border: 1px solid var(--border-card); padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
@media (min-width: 640px) { .about-content-card { padding: 3rem; margin-bottom: 4rem; } }
.about-content-card h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; }
.about-content-card p { color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.5rem; }
.about-signature { font-weight: 700; color: var(--green-700); }
html.dark .about-signature { color: var(--green-500); }

.mission-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .mission-grid { grid-template-columns: 1fr 1fr 1fr; } }
.mission-card {
  background: var(--bg-card); padding: 2rem; border-radius: 0.75rem;
  border: 1px solid var(--border-card); transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.mission-card:hover { border-color: var(--green-500); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.mission-icon {
  width: 3rem; height: 3rem; border-radius: 0.5rem;
  background: var(--green-100); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;
}
html.dark .mission-icon { background: rgba(20,83,45,0.3); }
.mission-icon svg { width: 1.5rem; height: 1.5rem; color: var(--green-600); }
html.dark .mission-icon svg { color: var(--green-500); }
.mission-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem; }
.mission-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-info-card {
  background: var(--bg-card); border-radius: 0.75rem;
  border: 1px solid var(--border-card); padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.contact-info-card h3 { font-size: 1.2rem; font-weight: 700; font-family: ui-monospace, monospace; color: var(--text-primary); margin-bottom: 1.5rem; }
.contact-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.contact-item-icon { background: var(--bg-secondary); padding: 0.75rem; border-radius: 0.5rem; flex-shrink: 0; display: flex; align-items: center; }
.contact-item-icon svg { width: 1.5rem; height: 1.5rem; color: var(--green-600); }
html.dark .contact-item-icon svg { color: var(--green-500); }
.contact-item h4 { font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.contact-item p { color: var(--text-secondary); font-size: 0.9rem; }
.contact-item span { font-size: 0.75rem; color: var(--text-muted); }

.contact-form-card {
  background: var(--bg-card); border-radius: 0.75rem;
  border: 1px solid var(--border-card); padding: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
html.dark .contact-form-card { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.5rem; }
.form-group input, .form-group textarea {
  width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem;
  border: 1px solid var(--border-color); background: var(--input-bg);
  color: var(--text-primary); font-size: 1rem; outline: none; font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--green-500); box-shadow: 0 0 0 1px var(--green-500);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.submit-btn {
  width: 100%; padding: 0.875rem 1.5rem;
  background: var(--green-600); color: var(--white);
  font-weight: 700; border-radius: 0.5rem; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: all 0.2s;
}
.submit-btn:hover { background: var(--green-700); }
html.dark .submit-btn:hover { background: var(--green-500); }

/* ============================================================
   FOOTER
============================================================ */
#site-footer {
  background: var(--footer-bg); border-top: 1px solid var(--border-color);
  padding: 4rem 0 2rem; transition: background 0.3s, border-color 0.3s;
}
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }

.footer-brand { grid-column: 1; }
.footer-logo { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; text-decoration: none; }
.footer-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.75; max-width: 22rem; }
.footer-col-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: 1.5rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-link { font-size: 0.875rem; color: var(--text-secondary); transition: color 0.2s; }
.footer-link:hover { color: var(--green-600); }
html.dark .footer-link:hover { color: var(--green-400); }
.footer-email {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;
  color: var(--text-secondary); transition: color 0.2s; word-break: break-all;
}
.footer-email svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.footer-email:hover { color: var(--green-600); }

.footer-bottom {
  border-top: 1px solid var(--border-color); padding-top: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-size: 0.75rem; color: var(--text-muted);
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-status { display: flex; align-items: center; gap: 0.5rem; font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.1em; }
.status-dot { width: 0.5rem; height: 0.5rem; background: var(--green-500); border-radius: 9999px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ============================================================
   STATIC PAGES (Privacy)
============================================================ */
.static-page-wrap { max-width: 56rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
@media (min-width: 640px) { .static-page-wrap { padding: 3rem 1.5rem 5rem; } }
.static-page-wrap h1 { font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1rem; }
.static-page-wrap h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-top: 2rem; margin-bottom: 1rem; }
.static-page-wrap p { color: var(--text-secondary); line-height: 1.75; margin-bottom: 1rem; }
.static-page-wrap ul { padding-left: 1.5rem; color: var(--text-secondary); margin-bottom: 1rem; }
.static-page-wrap li { margin-bottom: 0.25rem; }
.static-page-wrap a { color: var(--green-600); text-decoration: underline; }
html.dark .static-page-wrap a { color: var(--green-400); }

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.5s ease forwards; }

/* ============================================================
   WORDPRESS SPECIFIC OVERRIDES
============================================================ */
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1rem auto; }
.wp-block-image { margin: 1.5rem 0; }
.wp-block-image img { border-radius: 0.5rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-top: 0.5rem; }

/* Responsive utility */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ============================================================
   ICON SIZING FIXES (SVGs rendered inline via PHP)
============================================================ */
.logo-icon svg,
.footer-logo svg { width: 1.5rem; height: 1.5rem; }

#theme-toggle svg { width: 1.25rem; height: 1.25rem; }

.mobile-menu-btn svg { width: 1.5rem; height: 1.5rem; }

.mission-icon svg { width: 1.5rem; height: 1.5rem; }

.contact-item-icon svg { width: 1.5rem; height: 1.5rem; }

.refresh-btn svg { width: 1rem; height: 1rem; }

.tool-card svg { width: 1.25rem; height: 1.25rem; }

.tool-interface-title svg { width: 1.25rem; height: 1.25rem; }

.state-icon { width: 2.5rem !important; height: 2.5rem !important; }

.blog-card-meta svg,
.post-date svg { width: 0.75rem; height: 0.75rem; }

.post-tag svg { width: 0.6rem; height: 0.6rem; }

.hero-graphic .shield-icon { width: 8rem !important; height: 8rem !important; }
.hero-graphic .globe-icon  { width: 6rem !important; height: 6rem !important; }

.btn-secondary svg,
.btn-secondary svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.read-more svg { width: 1rem; height: 1rem; }

.view-all-link svg { width: 1rem; height: 1rem; }

.back-link svg { width: 1rem; height: 1rem; }

.footer-email svg { width: 1rem; height: 1rem; }

/* Fix navbar AI button sparkles icon color */
.btn-ai svg:last-child { color: #fde047; }

/* ============================================================
   DARK MODE FLASH PREVENTION
   Applied via inline script in header before CSS loads
============================================================ */
html:not(.dark) { color-scheme: light; }
html.dark        { color-scheme: dark;  }

/* ============================================================
   BODY BG FIX — ensure background always matches theme
============================================================ */
html, body {
  background-color: var(--bg-primary);
}

/* ============================================================
   CONTACT & ABOUT PAGE SPECIFIC FIXES
============================================================ */
.contact-info-card h3 {
  font-family: ui-monospace, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}
.contact-item h4 {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}
.contact-item p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
}
.contact-item span {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: block;
}
.contact-form-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

/* ============================================================
   BLOGS PAGE — ensure WP page wrapper doesn't add extra styles
============================================================ */
.page-template-page-blogs .entry-content,
.page-template-page-blogs .entry-header,
.page-template-page-about .entry-content,
.page-template-page-about .entry-header,
.page-template-page-contact .entry-content,
.page-template-page-contact .entry-header,
.page-template-page-tools .entry-content,
.page-template-page-tools .entry-header,
.page-template-page-news .entry-content,
.page-template-page-news .entry-header {
  display: none !important;
}

/* ============================================================
   PAGINATION STYLES
============================================================ */
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.875rem; margin: 0.25rem;
  border: 1px solid var(--border-color); border-radius: 0.375rem;
  color: var(--text-secondary); font-size: 0.875rem; transition: all 0.2s;
}
.page-numbers:hover { background: var(--hover-bg); color: var(--text-primary); }
.page-numbers.current {
  background: var(--green-600); color: var(--white); border-color: var(--green-600);
}
.page-numbers.dots { border: none; }
nav.navigation { margin-top: 3rem; text-align: center; }

/* ============================================================
   MISSING MOBILE CLASSES
============================================================ */
@media (max-width: 767px) {
  .hide-mobile  { display: none !important; }
  .news-thumb.hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ============================================================
   ABOUT PAGE — new classes used by updated page-about.php
============================================================ */
.about-page-wrap { min-height:100vh; background:var(--bg-primary); padding-top:6rem; padding-bottom:4rem; }
.about-header { text-align:center; margin-bottom:2.05rem; }
@media (min-width:640px) { .about-header { margin-bottom:4rem; } }
.about-header h1 { font-size:1.875rem; font-weight:700; color:var(--text-primary); font-family:'JetBrains Mono',ui-monospace,monospace; margin-bottom:0.75rem; }
@media (min-width:640px) { .about-header h1 { font-size:2.05rem; } }
.about-header p { max-width:48rem; margin:0 auto; font-size:1rem; color:var(--text-secondary); line-height:1.5; }
@media (min-width:640px) { .about-header p { font-size:1.15rem; } }
.about-mission-card { max-width:56rem; margin:0 auto 2.5rem; background:var(--bg-card); border-radius:0.75rem; border:1px solid var(--border-card); padding:1.5rem; }
@media (min-width:640px) { .about-mission-card { padding:2rem; margin-bottom:4rem; } }
@media (min-width:768px) { .about-mission-card { padding:3rem; } }
.about-mission-card h2 { font-size:1.5rem; font-weight:700; color:var(--text-primary); margin-bottom:1.5rem; }
.about-mission-card p { color:var(--text-secondary); line-height:1.5; margin-bottom:1.5rem; }
.about-signature { margin-top:2rem; font-weight:700; color:var(--green-700); }
html.dark .about-signature { color:var(--green-500); }
.about-cards-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px) { .about-cards-grid { grid-template-columns:repeat(3,1fr); } }
.about-feature-card { background:var(--bg-card); border-radius:0.75rem; border:1px solid var(--border-card); padding:2rem; transition:border-color 0.2s,box-shadow 0.2s; }
.about-feature-card:hover { border-color:var(--green-500); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.about-feature-icon { width:3rem; height:3rem; background:var(--green-100); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; color:var(--green-600); }
html.dark .about-feature-icon { background:rgba(20,83,45,0.3); color:var(--green-500); }
.about-feature-card h3 { font-size:1.25rem; font-weight:700; color:var(--text-primary); margin-bottom:0.75rem; }
.about-feature-card p { color:var(--text-secondary); line-height:1.65; font-size:0.9375rem; }

/* ============================================================
   CONTACT PAGE — new classes used by updated page-contact.php
============================================================ */
.contact-page-wrap { min-height:100vh; background:var(--bg-primary); padding-top:6rem; padding-bottom:4rem; }
.contact-header { text-align:center; margin-bottom:2.5rem; }
@media (min-width:640px) { .contact-header { margin-bottom:3.5rem; } }
.contact-header h1 { font-size:1.875rem; font-weight:700; color:var(--text-primary); margin-bottom:0.75rem; font-family: 'JetBrains Mono', ui-monospace, monospace; }
@media (min-width:640px) { .contact-header h1 { font-size:2.25rem; } }
.contact-header p { color:var(--text-secondary); font-size:1rem; }
.contact-layout { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px) { .contact-layout { grid-template-columns:1fr 2fr; gap:2.5rem; } }
.contact-info-panel { background:var(--bg-card); border-radius:0.75rem; border:1px solid var(--border-card); padding:1.5rem; }
@media (min-width:640px) { .contact-info-panel { padding:2rem; } }
.contact-info-panel h3 { font-size:1.125rem; font-weight:700; font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--text-primary); margin-bottom:1.5rem; }
.contact-info-row { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:1.25rem; }
.contact-info-icon { width:2.5rem; height:2.5rem; flex-shrink:0; background:var(--green-100); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; color:var(--green-600); }
html.dark .contact-info-icon { background:rgba(20,83,45,0.3); color:var(--green-500); }
.contact-info-row h4 { font-size:0.875rem; font-weight:600; color:var(--text-primary); margin-bottom:0.2rem; }
.contact-info-row p { font-size:0.875rem; color:var(--text-secondary); }
.contact-info-row span { font-size:0.75rem; color:var(--text-muted); font-family:'JetBrains Mono',monospace; }
.contact-form-panel { background:var(--bg-card); border-radius:0.75rem; border:1px solid var(--border-card); padding:1.5rem; }
@media (min-width:640px) { .contact-form-panel { padding:2rem; } }
.contact-form-panel h3 { font-size:1.125rem; font-weight:700; font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--text-primary); margin-bottom:1.5rem; }
.form-row { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
@media (min-width:640px) { .form-row { grid-template-columns:1fr 1fr; } }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:0.875rem; font-weight:500; color:var(--text-secondary); margin-bottom:0.4rem; }
.form-group input,.form-group textarea { width:100%; padding:0.625rem 0.875rem; background:var(--input-bg); border:1px solid var(--border-color); border-radius:0.5rem; color:var(--text-primary); font-size:0.9375rem; font-family:inherit; outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
.form-group input:focus,.form-group textarea:focus { border-color:var(--green-500); box-shadow:0 0 0 3px rgba(34,197,94,0.15); }
.form-group textarea { resize:vertical; min-height:8rem; }
.form-submit-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.75rem 1.5rem; background:var(--green-600); color:#fff; font-weight:700; border-radius:0.5rem; font-size:0.9375rem; transition:background 0.2s; width:100%; }
@media (min-width:640px) { .form-submit-btn { width:auto; } }
.form-submit-btn:hover { background:var(--green-700); }
.form-submit-btn:disabled { opacity:0.7; cursor:not-allowed; }
.form-status { margin-top:1rem; padding:0.75rem 1rem; border-radius:0.5rem; font-size:0.875rem; display:none; }
.form-status.success { background:var(--green-50); color:var(--green-700); border:1px solid var(--green-200); display:flex; align-items:center; gap:0.5rem; }
.form-status.error { background:var(--red-50); color:var(--red-600); border:1px solid var(--red-200); display:flex; align-items:center; gap:0.5rem; }
html.dark .form-status.success { background:rgba(20,83,45,0.15); color:var(--green-400); border-color:rgba(20,83,45,0.4); }
html.dark .form-status.error { background:rgba(239,68,68,0.1); color:#f87171; border-color:rgba(239,68,68,0.3); }

/* Green scrollbar + selection — matches React */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#22c55e; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#16a34a; }
::selection { background:var(--green-500); color:#000; }

/* =============================================
   WORDPRESS NAV MENU — Dropdown Styles
   ============================================= */

/* Strip default ul/li styles from WP menu */
.csw-nav-menu,
.csw-nav-menu li,
.csw-mobile-menu,
.csw-mobile-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Desktop: top-level items wrap */
.csw-nav-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) { .csw-nav-menu { gap: 1rem; } }

/* Each nav item is relative so dropdown positions correctly */
.csw-nav-item {
  position: relative;
}

/* Chevron icon sits inline with the label */
.csw-chevron {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.csw-nav-item.has-dropdown:hover .csw-chevron,
.csw-nav-item.has-dropdown:focus-within .csw-chevron {
  transform: rotate(180deg);
}

/* ── DESKTOP DROPDOWN ── */
.csw-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 9999;
  padding: 0.4rem 0;
  animation: csw-dropdown-fade 0.15s ease;
}
html.dark .csw-dropdown {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Show dropdown on hover or keyboard focus */
.csw-nav-item.has-dropdown:hover .csw-dropdown,
.csw-nav-item.has-dropdown:focus-within .csw-dropdown {
  display: block;
}

@keyframes csw-dropdown-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown items */
.csw-dropdown-item {
  display: block;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
html.dark .csw-dropdown-item { color: #d1d5db; }
.csw-dropdown-item:hover {
  background: #f0fdf4;
  color: #15803d;
}
html.dark .csw-dropdown-item:hover {
  background: rgba(22,163,74,0.1);
  color: #4ade80;
}
.csw-dropdown-item.active {
  color: #15803d;
  background: #f0fdf4;
}
html.dark .csw-dropdown-item.active {
  color: #4ade80;
  background: rgba(22,163,74,0.1);
}

/* ── MOBILE SUB-MENU ── */
.mobile-sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.mobile-sub-link {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s;
  border-left: 2px solid #d1d5db;
}
html.dark .mobile-sub-link { color: #9ca3af; border-color: #374151; }
.mobile-sub-link:hover {
  background: #f0fdf4;
  color: #15803d;
  border-color: #16a34a;
}
html.dark .mobile-sub-link:hover {
  background: rgba(22,163,74,0.1);
  color: #4ade80;
  border-color: #16a34a;
}
.mobile-sub-link.active {
  color: #15803d;
  border-color: #16a34a;
  background: #f0fdf4;
}
html.dark .mobile-sub-link.active {
  color: #4ade80;
  border-color: #16a34a;
  background: rgba(22,163,74,0.1);
}


/* =============================================
   WORDPRESS NAV MENU — Dropdown Support
   Added in v9 — appended, nothing overwritten
   ============================================= */

.csw-nav-menu,
.csw-nav-menu li,
.csw-mobile-menu,
.csw-mobile-menu li { list-style:none; margin:0; padding:0; }

.csw-nav-menu { display:flex; align-items:center; gap:0.5rem; }
@media (min-width:1024px) { .csw-nav-menu { gap:1rem; } }

.csw-nav-item { position:relative; }

/* Chevron */
.csw-chevron { display:inline-block; vertical-align:middle; margin-left:3px; transition:transform 0.2s; flex-shrink:0; }
.csw-nav-item.has-dropdown:hover .csw-chevron,
.csw-nav-item.has-dropdown:focus-within .csw-chevron { transform:rotate(180deg); }

/* Desktop Dropdown */
.csw-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  min-width:190px; background:#fff; border:1px solid #e5e7eb;
  border-radius:0.5rem; box-shadow:0 8px 24px rgba(0,0,0,0.12);
  z-index:9999; padding:0.4rem 0;
  animation:csw-dd-fade 0.15s ease;
}
html.dark .csw-dropdown { background:#1f2937; border-color:#374151; box-shadow:0 8px 24px rgba(0,0,0,0.4); }

.csw-nav-item.has-dropdown:hover .csw-dropdown,
.csw-nav-item.has-dropdown:focus-within .csw-dropdown { display:block; }

@keyframes csw-dd-fade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.csw-dropdown-item {
  display:block; padding:0.6rem 1.1rem; font-size:0.875rem; font-weight:500;
  color:#374151; text-decoration:none; transition:background 0.15s, color 0.15s; white-space:nowrap;
}
html.dark .csw-dropdown-item { color:#d1d5db; }
.csw-dropdown-item:hover { background:#f0fdf4; color:#15803d; }
html.dark .csw-dropdown-item:hover { background:rgba(22,163,74,0.1); color:#4ade80; }
.csw-dropdown-item.active { color:#15803d; background:#f0fdf4; }
html.dark .csw-dropdown-item.active { color:#4ade80; background:rgba(22,163,74,0.1); }

/* Mobile Sub-menu */
.csw-mobile-menu,
.csw-mobile-menu li { list-style:none; margin:0; padding:0; }
.mobile-sub-menu { list-style:none; margin:0; padding:0 0 0 1.25rem; display:flex; flex-direction:column; gap:0.1rem; }

.mobile-sub-link {
  display:block; padding:0.55rem 1rem; border-radius:0.375rem;
  font-size:0.9rem; font-weight:500; color:#6b7280; text-decoration:none;
  transition:all 0.2s; border-left:2px solid #d1d5db;
}
html.dark .mobile-sub-link { color:#9ca3af; border-color:#374151; }
.mobile-sub-link:hover { background:#f0fdf4; color:#15803d; border-color:#16a34a; }
html.dark .mobile-sub-link:hover { background:rgba(22,163,74,0.1); color:#4ade80; border-color:#16a34a; }
.mobile-sub-link.active { color:#15803d; border-color:#16a34a; background:#f0fdf4; }
html.dark .mobile-sub-link.active { color:#4ade80; border-color:#16a34a; background:rgba(22,163,74,0.1); }



/* =============================================
   TOOLS OVERVIEW PAGE — single card list
   ============================================= */
.tools-overview-card { padding: 2rem 2.5rem; }
.tools-overview-group { margin-bottom: 0.5rem; }
.tools-overview-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-500);
  margin-bottom: 0.75rem;
}
.tools-overview-heading svg { flex-shrink:0; }
.tools-overview-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tools-overview-list li { display:flex; align-items:center; gap:0.5rem; }
.tools-overview-list li svg { color:var(--text-muted); flex-shrink:0; width:15px; height:15px; }
.tools-overview-list a {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.tools-overview-list a:hover { color: var(--green-500); }
.tools-overview-divider {
  border: none;
  border-top: 1px solid var(--border-card);
  margin: 1.5rem 0;
}
.tools-overview-list li::before { display:none; }
.tools-overview-card ul { list-style:none !important; padding-left:0 !important; }
.tools-overview-card ul li { list-style:none !important; }