/*
Theme Name: SEO Tools Hub Pro
Theme URI: https://seotoolshub.xyz
Author: SEO Tools Hub
Author URI: https://seotoolshub.xyz
Description: A cutting-edge, 3D-powered WordPress theme with particle effects, glassmorphism, and interactive JavaScript animations. Built for SEO Tools Hub with AI Tools, Email Marketing, Reviews, and SEO content.
Version: 11.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seotoolshub
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, custom-logo, seo-friendly, responsive-layout
*/

/* ============================================
   DESIGN TOKENS - Dark Tech Theme
   ============================================ */
:root {
  --bg-base: #06080F;
  --bg-surface: #0D1117;
  --bg-elevated: #161B26;
  --bg-card: #1A1F2E;
  --bg-card-hover: #212840;
  --bg-glass: rgba(13,17,23,0.75);
  --bg-glass-light: rgba(26,31,46,0.6);

  --border-default: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --border-glow: rgba(99,102,241,0.3);

  --text-primary: #F0F2F8;
  --text-secondary: #9CA3C0;
  --text-muted: #5C6384;
  --text-faint: #3D4463;

  --accent-primary: #6366F1;
  --accent-secondary: #8B5CF6;
  --accent-tertiary: #06B6D4;
  --accent-pink: #EC4899;
  --accent-green: #10B981;
  --accent-amber: #F59E0B;
  --accent-red: #EF4444;

  --glow-primary: 0 0 30px rgba(99,102,241,0.3), 0 0 60px rgba(99,102,241,0.1);
  --glow-secondary: 0 0 30px rgba(139,92,246,0.3), 0 0 60px rgba(139,92,246,0.1);
  --glow-cyan: 0 0 30px rgba(6,182,212,0.3);

  --shadow-card: 0 4px 24px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-elevated: 0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-float: 0 20px 60px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --font-heading: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container-max: 1280px;
  --header-h: 72px;
  --sidebar-w: 340px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-width: 0;
}

::selection { background: var(--accent-primary); color: #fff; }

img, video, iframe, embed, object { max-width: 100%; height: auto; }
img { display: block; }
ul, ol { list-style: none; }
a { color: var(--accent-primary); text-decoration: none; transition: color 0.3s var(--ease-smooth); }
a:hover { color: var(--accent-tertiary); }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
p { margin-bottom: 1.2rem; }

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
  z-index: 10000;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px var(--accent-primary);
}

/* ============================================
   CUSTOM CURSOR GLOW
   ============================================ */
#cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.06), transparent 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: transform;
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.site-content {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 40px;
  padding: 48px 0;
  align-items: start;
}

/* ============================================
   HEADER - 3D Glassmorphism
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(6,8,15,0.7);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-default);
  transition: all 0.4s var(--ease-out-expo);
  transform-style: preserve-3d;
  perspective: 1000px;
}
.site-header.scrolled {
  background: rgba(6,8,15,0.9);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 1px rgba(99,102,241,0.3);
  border-bottom-color: transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  min-width: 0;
  gap: 18px;
}

.site-logo { display:flex; align-items:center; gap:12px; min-width:0; flex:0 1 auto; }
.site-logo a { display:inline-flex; align-items:center; min-height:60px; max-width:100%; }
.site-logo img { height:48px; width:auto; max-width:220px; transition: all 0.5s var(--ease-spring); filter: brightness(1.1); }
.site-logo:hover img { transform: scale(1.05) rotateY(-5deg); }
.site-logo .site-name { font-family:var(--font-heading); font-size:1.4rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.04em; }
.site-logo .site-name span {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navigation */
.main-navigation { display:flex; align-items:center; min-width:0; }
.main-navigation ul { display:flex; align-items:center; gap:2px; }
.main-navigation li { position:relative; }
.main-navigation a {
  display:block; padding:8px 16px; font-size:0.9rem; font-weight:600;
  color:var(--text-secondary); border-radius:var(--radius-sm);
  transition: all 0.3s var(--ease-out-expo);
  position:relative; letter-spacing:-0.01em;
}
.main-navigation a::after {
  content:''; position:absolute; bottom:2px; left:16px; right:16px; height:2px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
  border-radius:2px; transform:scaleX(0); transition:transform 0.4s var(--ease-out-expo);
  box-shadow: 0 0 8px var(--accent-primary);
}
.main-navigation a:hover::after, .main-navigation .current-menu-item > a::after { transform:scaleX(1); }
.main-navigation a:hover, .main-navigation .current-menu-item > a {
  color:var(--text-primary);
  background: rgba(99,102,241,0.08);
  text-shadow: 0 0 20px rgba(99,102,241,0.3);
}

/* Dropdown */
.main-navigation .sub-menu {
  display:none; position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(8px) perspective(600px) rotateX(-8deg);
  min-width:240px; background:rgba(22,27,38,0.95); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px); border:1px solid var(--border-hover);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-float); padding:8px;
  z-index:100; opacity:0; transition:all 0.35s var(--ease-out-expo);
}
.main-navigation li:hover > .sub-menu {
  display:block; opacity:1; transform:translateX(-50%) translateY(0) perspective(600px) rotateX(0);
}
.main-navigation .sub-menu a { padding:10px 14px; font-size:0.88rem; font-weight:500; }
.main-navigation .sub-menu a::after { display:none; }

/* Mobile toggle */
.menu-toggle {
  display:none; background:none; border:1px solid var(--border-default); cursor:pointer;
  padding:9px; color:var(--text-secondary); border-radius:var(--radius-sm);
  transition:all 0.3s var(--ease-out-expo);
}
.menu-toggle:hover { background:rgba(99,102,241,0.1); border-color:var(--accent-primary); color:var(--accent-primary); }
.menu-toggle svg { width:22px; height:22px; }

/* Header CTA */
.header-cta { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.header-search-btn {
  background:var(--bg-elevated); border:1px solid var(--border-default); padding:9px 11px;
  border-radius:var(--radius-full); cursor:pointer; color:var(--text-muted); transition:all 0.3s var(--ease-out-expo);
}
.header-search-btn:hover {
  border-color:var(--accent-primary); color:var(--accent-primary);
  box-shadow: 0 0 16px rgba(99,102,241,0.2);
}
.header-search-btn svg { width:18px; height:18px; }

.header-search-overlay {
  position:absolute; left:0; right:0; top:100%; z-index:1001;
  background:rgba(6,8,15,0.95); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--border-hover);
  padding:16px 0; box-shadow:var(--shadow-elevated);
}
.header-search-overlay[hidden] { display:none!important; }

/* ============================================
   HERO - Full 3D Particle Canvas
   ============================================ */
.hero-section {
  position:relative; overflow:hidden; padding:100px 0 120px;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(99,102,241,0.12), transparent),
              radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139,92,246,0.08), transparent),
              var(--bg-base);
}
#hero-canvas {
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero-grid-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
}
.hero-3d-shapes {
  position:absolute; inset:0; z-index:1; pointer-events:none; perspective: 800px;
}
.hero-shape {
  position:absolute; border:1px solid rgba(99,102,241,0.15);
  border-radius:var(--radius-md); animation: shapeFloat 20s ease-in-out infinite;
}
.hero-shape:nth-child(1) { width:120px; height:120px; top:15%; left:8%; animation-delay:0s; transform:rotate(45deg); }
.hero-shape:nth-child(2) { width:80px; height:80px; top:60%; right:12%; animation-delay:-5s; transform:rotate(20deg); border-color:rgba(139,92,246,0.12); }
.hero-shape:nth-child(3) { width:60px; height:60px; bottom:20%; left:20%; animation-delay:-10s; border-radius:50%; border-color:rgba(6,182,212,0.12); }
.hero-shape:nth-child(4) { width:100px; height:100px; top:20%; right:25%; animation-delay:-15s; transform:rotate(60deg); border-color:rgba(236,72,153,0.08); }

@keyframes shapeFloat {
  0%, 100% { transform: rotate(45deg) translate3d(0, 0, 0) scale(1); opacity:0.6; }
  25% { transform: rotate(55deg) translate3d(15px, -20px, 30px) scale(1.05); opacity:1; }
  50% { transform: rotate(40deg) translate3d(-10px, 15px, -20px) scale(0.95); opacity:0.7; }
  75% { transform: rotate(50deg) translate3d(20px, 10px, 15px) scale(1.02); opacity:0.9; }
}

.hero-content { position:relative; z-index:2; max-width:800px; }
.hero-section h1 {
  color:var(--text-primary); font-size:clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight:800; margin-bottom:20px; line-height:1.08;
  letter-spacing:-0.04em;
}
.hero-section h1 .typed-cursor {
  display:inline-block; width:3px; height:0.85em; background:var(--accent-primary);
  margin-left:4px; vertical-align:baseline;
  animation: cursorBlink 0.8s ease infinite;
  box-shadow: 0 0 12px var(--accent-primary);
}
@keyframes cursorBlink { 0%, 50% { opacity:1; } 51%, 100% { opacity:0; } }

.hero-section .hero-subtitle {
  font-size:1.15rem; color:var(--text-secondary); margin-bottom:36px;
  max-width:600px; line-height:1.7; opacity:0.85;
}
.hero-section .hero-subtitle .gradient-text {
  background:linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-search {
  display:flex; max-width:560px; background:rgba(22,27,38,0.8);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:var(--radius-full); padding:5px;
  border:1px solid var(--border-hover); transition:all 0.4s var(--ease-out-expo);
}
.hero-search:focus-within {
  border-color:var(--accent-primary); box-shadow:var(--glow-primary);
}
.hero-search input {
  flex:1; border:none; background:transparent; padding:14px 22px;
  font-size:0.95rem; color:var(--text-primary); outline:none; font-family:var(--font-body);
}
.hero-search input::placeholder { color:var(--text-muted); }
.hero-search button {
  background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color:#fff; border:none; padding:12px 30px; border-radius:var(--radius-full);
  font-weight:700; font-size:0.92rem; cursor:pointer;
  transition:all 0.4s var(--ease-out-expo); font-family:var(--font-body);
  letter-spacing:-0.01em; box-shadow:0 4px 16px rgba(99,102,241,0.3);
}
.hero-search button:hover {
  transform:translateY(-2px); box-shadow:0 8px 30px rgba(99,102,241,0.4);
}

.hero-stats {
  display:flex; gap:40px; margin-top:48px; padding-top:32px;
  border-top:1px solid var(--border-default);
}
.hero-stat { text-align:left; }
.hero-stat-number {
  font-family:var(--font-heading); font-size:2rem; font-weight:800;
  color:var(--text-primary); letter-spacing:-0.04em; line-height:1;
}
.hero-stat-number .counter-suffix {
  font-size:1.2rem; color:var(--accent-primary); font-weight:700;
}
.hero-stat-label { font-size:0.82rem; color:var(--text-muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }

/* ============================================
   CATEGORY BAR - Neon Active States
   ============================================ */
.category-bar {
  background:var(--bg-surface); border-bottom:1px solid var(--border-default);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.category-bar::-webkit-scrollbar { display:none; }
.category-nav { display:flex; align-items:center; gap:0; padding:0 24px; }
.category-nav a {
  display:flex; align-items:center; gap:7px; padding:14px 20px;
  font-size:0.88rem; font-weight:600; color:var(--text-muted);
  white-space:nowrap; border-bottom:2px solid transparent;
  transition:all 0.3s var(--ease-out-expo); position:relative;
}
.category-nav a:hover { color:var(--accent-primary); background:rgba(99,102,241,0.05); }
.category-nav a.active {
  color:var(--accent-primary); border-bottom-color:var(--accent-primary);
  text-shadow:0 0 20px rgba(99,102,241,0.3);
}
.category-nav a svg { width:16px; height:16px; opacity:0.6; transition:all 0.3s; }
.category-nav a:hover svg, .category-nav a.active svg { opacity:1; color:var(--accent-primary); }

/* ============================================
   POST CARDS - 3D Tilt Effect
   ============================================ */
.posts-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
.post-card {
  background:var(--bg-card); border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-default); position:relative;
  transform-style:preserve-3d; perspective:800px;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.5s var(--ease-out-expo);
  box-shadow:var(--shadow-card);
  will-change:transform;
}
.post-card::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius-xl);
  background:radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.06), transparent 40%);
  pointer-events:none; z-index:1; opacity:0; transition:opacity 0.5s;
}
.post-card:hover::before { opacity:1; }
.post-card:hover {
  border-color:var(--border-glow);
  box-shadow:var(--shadow-float), 0 0 40px rgba(99,102,241,0.08);
}
.post-card-featured {
  grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr;
}
.post-card-thumb {
  position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--bg-elevated);
}
.post-card-featured .post-card-thumb { aspect-ratio:auto; min-height:360px; }
.post-card-thumb img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s var(--ease-out-expo), filter 0.5s;
}
.post-card:hover .post-card-thumb img { transform:scale(1.08); filter:brightness(1.1); }
.post-card-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(6,8,15,0.6) 100%);
  pointer-events:none;
}
.post-card-thumb .category-badge {
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(99,102,241,0.9); backdrop-filter:blur(8px);
  padding:5px 14px; border-radius:var(--radius-full);
  font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:#fff; border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 4px 16px rgba(99,102,241,0.3);
}
.post-card-thumb .category-badge.cat-ai-tools { background:rgba(139,92,246,0.9); box-shadow:0 4px 16px rgba(139,92,246,0.3); }
.post-card-thumb .category-badge.cat-email-marketing { background:rgba(16,185,129,0.9); box-shadow:0 4px 16px rgba(16,185,129,0.3); }
.post-card-thumb .category-badge.cat-review { background:rgba(245,158,11,0.9); box-shadow:0 4px 16px rgba(245,158,11,0.3); color:#000; }
.post-card-thumb .category-badge.cat-seo { background:rgba(6,182,212,0.9); box-shadow:0 4px 16px rgba(6,182,212,0.3); }

.post-card-body { padding:24px; position:relative; z-index:2; }
.post-card-featured .post-card-body { display:flex; flex-direction:column; justify-content:center; padding:36px; }
.post-card-meta { display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:0.8rem; color:var(--text-muted); }
.post-card-meta a { color:var(--text-muted); font-weight:500; }
.post-card-meta a:hover { color:var(--accent-primary); }
.post-card-meta .meta-sep { width:3px; height:3px; background:var(--text-faint); border-radius:50%; }
.post-card-title {
  font-family:var(--font-heading); font-size:1.15rem; font-weight:700;
  margin-bottom:10px; line-height:1.4; letter-spacing:-0.02em; color:var(--text-primary);
}
.post-card-featured .post-card-title { font-size:1.55rem; }
.post-card-title a { color:var(--text-primary); transition:all 0.3s; }
.post-card-title a:hover { color:var(--accent-primary); text-shadow:0 0 30px rgba(99,102,241,0.2); }
.post-card-excerpt {
  font-size:0.9rem; color:var(--text-secondary); line-height:1.65; margin-bottom:18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card-footer { display:flex; align-items:center; justify-content:space-between; }
.read-more {
  font-size:0.86rem; font-weight:600; color:var(--accent-primary); display:inline-flex;
  align-items:center; gap:6px; letter-spacing:-0.01em; transition:all 0.3s var(--ease-out-expo);
}
.read-more:hover { color:var(--accent-tertiary); gap:10px; }
.read-more svg { width:16px; height:16px; transition:transform 0.3s var(--ease-spring); }
.read-more:hover svg { transform:translateX(4px); }
.post-rating { display:flex; align-items:center; gap:3px; }
.post-rating .star { color:var(--accent-amber); font-size:0.82rem; }
.post-rating .star.empty { color:var(--text-faint); }
.post-rating .rating-num { font-size:0.8rem; font-weight:700; color:var(--text-primary); margin-left:5px; }

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar { position:sticky; top:calc(var(--header-h) + 24px); align-self:start; }
.widget {
  background:var(--bg-card); border-radius:var(--radius-xl); padding:24px; margin-bottom:24px;
  border:1px solid var(--border-default); transition:all 0.4s var(--ease-out-expo);
}
.widget:hover { border-color:var(--border-hover); box-shadow:var(--shadow-card); }
.widget-title {
  font-family:var(--font-heading); font-size:1rem; font-weight:700; color:var(--text-primary);
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary), transparent) 1;
  display:flex; align-items:center; gap:8px; letter-spacing:-0.02em;
}
.widget-title svg { width:18px; height:18px; color:var(--accent-primary); }

.widget_search .search-form {
  display:flex; border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden;
  background:var(--bg-elevated); transition:all 0.3s var(--ease-out-expo);
}
.widget_search .search-form:focus-within { border-color:var(--accent-primary); box-shadow:0 0 20px rgba(99,102,241,0.15); }
.widget_search input[type="search"] { flex:1; border:none; padding:12px 16px; font-size:0.92rem; font-family:var(--font-body); outline:none; background:transparent; color:var(--text-primary); }
.widget_search button { background:var(--accent-primary); color:#fff; border:none; padding:12px 18px; cursor:pointer; transition:all 0.3s; }
.widget_search button:hover { background:var(--accent-secondary); }
.widget_search button svg { width:18px; height:18px; }

.widget_categories ul li { border-bottom:1px solid var(--border-default); transition:all 0.3s; }
.widget_categories ul li:last-child { border-bottom:none; }
.widget_categories ul li a { display:flex; justify-content:space-between; align-items:center; padding:10px 0; color:var(--text-secondary); font-size:0.9rem; font-weight:500; }
.widget_categories ul li a:hover { color:var(--accent-primary); }
.widget_categories .count { background:rgba(99,102,241,0.1); color:var(--accent-primary); font-size:0.75rem; font-weight:700; padding:2px 10px; border-radius:var(--radius-full); }

.widget_recent_entries ul li { padding:14px 0; border-bottom:1px solid var(--border-default); }
.widget_recent_entries ul li:last-child { border-bottom:none; }
.widget_recent_entries ul li a { font-weight:600; font-size:0.9rem; color:var(--text-primary); font-family:var(--font-heading); letter-spacing:-0.01em; }
.widget_recent_entries ul li a:hover { color:var(--accent-primary); }
.widget_recent_entries .post-date { font-size:0.78rem; color:var(--text-muted); margin-top:5px; }

/* Newsletter */
.newsletter-widget {
  background:linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1));
  border:1px solid rgba(99,102,241,0.2); color:#fff; position:relative; overflow:hidden;
}
.newsletter-widget::before {
  content:''; position:absolute; top:-50%; right:-30%; width:200px; height:200px;
  background:radial-gradient(circle, rgba(99,102,241,0.2), transparent 70%); border-radius:50%;
}
.newsletter-widget .widget-title { color:var(--text-primary); border-bottom-color:rgba(99,102,241,0.2); position:relative; }
.newsletter-widget .widget-title svg { color:var(--accent-primary); }
.newsletter-widget p { font-size:0.88rem; color:var(--text-secondary); margin-bottom:18px; line-height:1.6; position:relative; }
.newsletter-form input[type="email"] {
  width:100%; padding:13px 18px; border:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0.3);
  border-radius:var(--radius-md); color:var(--text-primary); font-size:0.92rem; margin-bottom:12px;
  outline:none; font-family:var(--font-body); transition:all 0.3s;
}
.newsletter-form input[type="email"]::placeholder { color:var(--text-muted); }
.newsletter-form input[type="email"]:focus { border-color:var(--accent-primary); box-shadow:0 0 20px rgba(99,102,241,0.15); }
.newsletter-form button {
  width:100%; padding:13px; background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color:#fff; border:none; border-radius:var(--radius-md); font-weight:700; font-size:0.92rem;
  cursor:pointer; transition:all 0.4s var(--ease-out-expo); font-family:var(--font-body);
}
.newsletter-form button:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(99,102,241,0.3); }

.tagcloud { display:flex; flex-wrap:wrap; gap:8px; }
.tagcloud a {
  display:inline-block; padding:6px 14px; background:var(--bg-elevated); color:var(--text-secondary);
  font-size:0.8rem; font-weight:500; border-radius:var(--radius-full);
  border:1px solid var(--border-default); transition:all 0.3s var(--ease-out-expo);
}
.tagcloud a:hover {
  background:var(--accent-primary); color:#fff; border-color:var(--accent-primary);
  transform:translateY(-3px) scale(1.05); box-shadow:0 8px 20px rgba(99,102,241,0.3);
}

/* ============================================
   SINGLE POST / ARTICLE - 3D Experience
   ============================================ */
.professional-article { background:var(--bg-base); }
.article-hero {
  background:radial-gradient(ellipse 80% 50% at 50% 40%, rgba(99,102,241,0.15), transparent),
              radial-gradient(ellipse 50% 40% at 80% 30%, rgba(139,92,246,0.1), transparent),
              var(--bg-base);
  color:#fff; padding:clamp(48px,8vw,96px) 0 clamp(64px,9vw,110px);
  position:relative; overflow:hidden;
}
.article-hero::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(99,102,241,0.02) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(99,102,241,0.02) 1px, transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
}
.article-hero-inner { max-width:980px; text-align:center; position:relative; z-index:1; }
.article-category {
  display:inline-flex; padding:8px 18px; border-radius:var(--radius-full);
  background:rgba(99,102,241,0.15); backdrop-filter:blur(8px);
  border:1px solid rgba(99,102,241,0.2); color:var(--accent-primary);
  font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; transition:all 0.3s;
}
.article-category:hover { background:rgba(99,102,241,0.25); color:var(--accent-primary); }
.article-hero h1 {
  max-width:860px; margin:22px auto 20px; color:var(--text-primary);
  font-size:clamp(2rem,5vw,3.5rem); line-height:1.1; letter-spacing:-0.04em;
}
.article-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; color:var(--text-muted); font-size:0.92rem; }

.article-shell { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; padding-bottom:80px; }
.article-main { min-width:0; margin-top:-52px; position:relative; z-index:2; }
.article-featured-image { margin:0 0 28px; overflow:hidden; border-radius:var(--radius-2xl); box-shadow:var(--shadow-float); border:1px solid var(--border-default); }
.article-featured-image img { display:block; width:100%; height:auto; max-height:580px; object-fit:cover; }

.article-content {
  background:var(--bg-card); padding:clamp(28px,5vw,60px); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-elevated); border:1px solid var(--border-default);
  font-size:1.06rem; line-height:1.85; color:var(--text-secondary);
}
.article-content > *:first-child { margin-top:0; }
.article-content > *:last-child { margin-bottom:0; }
.article-content h2 { font-size:clamp(1.5rem,3vw,1.9rem); line-height:1.25; margin:2.4em 0 0.8em; color:var(--text-primary); letter-spacing:-0.03em; padding-bottom:12px; border-bottom:1px solid var(--border-default); }
.article-content h3 { font-size:clamp(1.25rem,2.5vw,1.5rem); line-height:1.3; margin:2em 0 0.7em; color:var(--text-primary); letter-spacing:-0.02em; }
.article-content p { margin:0 0 1.3em; }
.article-content ul, .article-content ol { margin:0 0 1.4em; padding-left:1.5em; }
.article-content li { margin:0.5em 0; line-height:1.75; }
.article-content ul { list-style:disc; }
.article-content ol { list-style:decimal; }
.article-content img, .article-content video { max-width:100%; height:auto; border-radius:var(--radius-lg); margin:1.5rem 0; }
.article-content iframe { width:100%; min-height:380px; border:0; border-radius:var(--radius-lg); }
.article-content blockquote {
  margin:2em 0; padding:24px 28px; border-left:4px solid var(--accent-primary);
  background:rgba(99,102,241,0.06); border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  font-style:italic; color:var(--text-primary); font-size:1.02rem;
}
.article-content pre {
  background:var(--bg-base); color:#E2E8F0; padding:24px 28px; border-radius:var(--radius-lg);
  overflow-x:auto; margin:1.5rem 0; font-size:0.88rem; line-height:1.65; border:1px solid var(--border-default);
}
.article-content code { background:var(--bg-elevated); padding:3px 8px; border-radius:5px; font-size:0.88em; font-family:var(--font-mono); border:1px solid var(--border-default); }
.article-content pre code { background:none; padding:0; border:none; color:inherit; }
.article-content a { color:var(--accent-primary); text-decoration:underline; text-decoration-color:rgba(99,102,241,0.3); text-underline-offset:3px; }
.article-content a:hover { text-decoration-color:var(--accent-primary); }
.article-content table { display:block; width:100%; overflow-x:auto; border-collapse:collapse; margin:1.5rem 0; border-radius:var(--radius-md); border:1px solid var(--border-default); }
.article-content table th { background:var(--bg-elevated); padding:12px 16px; font-weight:600; text-align:left; border-bottom:1px solid var(--border-hover); color:var(--text-primary); }
.article-content table td { padding:12px 16px; border-bottom:1px solid var(--border-default); }

.review-summary { display:flex; gap:24px; align-items:flex-start; padding:28px; margin-bottom:28px; border-radius:var(--radius-2xl); border:1px solid var(--border-default); background:var(--bg-card); box-shadow:var(--shadow-card); }
.review-score { flex:0 0 110px; text-align:center; padding:16px; border-radius:var(--radius-xl); background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color:#fff; box-shadow:0 8px 30px rgba(99,102,241,0.3); }
.review-score strong { display:block; font-size:2.2rem; line-height:1; font-family:var(--font-heading); }
.review-score small { display:block; margin-top:8px; opacity:0.85; font-size:0.78rem; font-weight:500; }
.review-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; flex:1; }
.review-columns h3 { margin:0 0 10px; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); }
.review-columns p { margin:6px 0; font-size:0.92rem; line-height:1.5; }

.article-sidebar { min-width:0; padding-top:24px; }
.article-sidebar .widget { margin-bottom:24px; }
.article-tags { margin-top:28px; padding:22px 26px; border-radius:var(--radius-2xl); background:var(--bg-card); border:1px solid var(--border-default); }
.article-tags a { display:inline-block; margin:4px 6px 4px 0; padding:6px 14px; border-radius:var(--radius-full); background:rgba(99,102,241,0.1); color:var(--accent-primary); font-size:0.82rem; font-weight:600; border:1px solid transparent; transition:all 0.3s; }
.article-tags a:hover { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); transform:translateY(-2px); }
.article-navigation { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; padding:22px 26px; border-radius:var(--radius-2xl); background:var(--bg-card); border:1px solid var(--border-default); }
.article-navigation > div:last-child { text-align:right; }
.article-navigation span { display:block; font-size:0.76rem; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
.article-navigation strong { font-size:0.95rem; color:var(--text-primary); }
.article-navigation a { color:var(--accent-primary); }
.article-comments { margin-top:28px; padding:28px; border-radius:var(--radius-2xl); background:var(--bg-card); border:1px solid var(--border-default); }

.post-tags { display:flex; align-items:center; gap:10px; padding:26px 0; border-top:1px solid var(--border-default); margin-top:36px; }
.post-tags .tags-label { font-weight:700; font-size:0.88rem; color:var(--text-primary); }
.post-tags a { display:inline-block; padding:5px 14px; background:var(--bg-elevated); color:var(--text-secondary); font-size:0.8rem; font-weight:500; border-radius:var(--radius-full); border:1px solid var(--border-default); transition:all 0.3s; }
.post-tags a:hover { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }

.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; padding-top:32px; border-top:1px solid var(--border-default); }
.post-navigation a { display:block; padding:22px; background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border-default); transition:all 0.4s var(--ease-out-expo); }
.post-navigation a:hover { background:rgba(99,102,241,0.05); transform:translateY(-4px); border-color:var(--border-glow); box-shadow:0 12px 40px rgba(99,102,241,0.1); }
.post-navigation .nav-label { font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-bottom:6px; }
.post-navigation .nav-title { font-weight:700; color:var(--text-primary); font-size:0.95rem; }

.comments-section { margin-top:44px; padding-top:36px; border-top:1px solid var(--border-default); }
.comments-title { font-family:var(--font-heading); font-size:1.3rem; margin-bottom:28px; letter-spacing:-0.02em; }
.comment { display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--border-default); }
.comment .avatar { width:48px; height:48px; border-radius:50%; background:var(--bg-elevated); flex-shrink:0; border:2px solid var(--border-hover); }
.comment .comment-author { font-weight:700; color:var(--text-primary); font-size:0.95rem; }
.comment .comment-date { font-size:0.8rem; color:var(--text-muted); margin-left:8px; }
.comment .comment-content { margin-top:8px; font-size:0.95rem; line-height:1.65; }
.comment-respond { background:var(--bg-card); padding:32px; border-radius:var(--radius-2xl); border:1px solid var(--border-default); }
.comment-respond h3 { margin-bottom:22px; }
.comment-form input, .comment-form textarea { width:100%; padding:13px 18px; border:1px solid var(--border-default); border-radius:var(--radius-md); font-size:0.95rem; margin-bottom:14px; font-family:var(--font-body); outline:none; transition:all 0.3s; background:var(--bg-elevated); color:var(--text-primary); }
.comment-form input:focus, .comment-form textarea:focus { border-color:var(--accent-primary); box-shadow:0 0 20px rgba(99,102,241,0.15); }
.comment-form textarea { min-height:140px; resize:vertical; }
.comment-form .submit { background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color:#fff; border:none; padding:13px 36px; border-radius:var(--radius-md); font-weight:700; font-size:0.95rem; cursor:pointer; transition:all 0.4s var(--ease-out-expo); width:auto; }
.comment-form .submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(99,102,241,0.3); }

/* ============================================
   PAGE TEMPLATES
   ============================================ */
.page-header {
  background:radial-gradient(ellipse 80% 50% at 50% 40%, rgba(99,102,241,0.12), transparent), var(--bg-base);
  color:#fff; padding:64px 0; text-align:center; position:relative; overflow:hidden;
}
.page-header::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(99,102,241,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.02) 1px, transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
}
.page-header .container { position:relative; z-index:1; }
.page-header h1 { color:var(--text-primary); font-size:2.5rem; margin-bottom:14px; letter-spacing:-0.03em; }
.page-header p { color:var(--text-secondary); font-size:1.1rem; max-width:620px; margin:0 auto; line-height:1.65; }
.page-header .breadcrumb { margin-top:20px; font-size:0.86rem; color:var(--text-muted); }
.page-header .breadcrumb a { color:var(--text-secondary); }
.page-header .breadcrumb a:hover { color:var(--text-primary); }

.page-content-wrap { max-width:860px; margin:0 auto; padding:56px 24px; }
.page-content-wrap h2 { margin:2.2rem 0 1rem; font-size:1.6rem; letter-spacing:-0.02em; }
.page-content-wrap h3 { margin:1.8rem 0 0.8rem; }
.page-content-wrap p { margin-bottom:1.2rem; font-size:1.05rem; line-height:1.8; }
.page-content-wrap ul, .page-content-wrap ol { margin-bottom:1.2rem; padding-left:1.5rem; }
.page-content-wrap li { margin-bottom:0.6rem; line-height:1.7; }
.page-content-wrap ul { list-style:disc; }
.page-content-wrap ol { list-style:decimal; }

.contact-form { background:var(--bg-card); padding:40px; border-radius:var(--radius-2xl); box-shadow:var(--shadow-elevated); border:1px solid var(--border-default); }
.contact-form .form-group { margin-bottom:22px; }
.contact-form label { display:block; font-weight:600; font-size:0.9rem; color:var(--text-primary); margin-bottom:8px; }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; padding:13px 18px; border:1px solid var(--border-default); border-radius:var(--radius-md); font-size:0.95rem; font-family:var(--font-body); outline:none; transition:all 0.3s; background:var(--bg-elevated); color:var(--text-primary); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--accent-primary); box-shadow:0 0 20px rgba(99,102,241,0.15); }
.contact-form textarea { min-height:150px; resize:vertical; }
.contact-form .submit-btn { background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color:#fff; border:none; padding:15px 40px; border-radius:var(--radius-md); font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.4s var(--ease-out-expo); font-family:var(--font-body); }
.contact-form .submit-btn:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(99,102,241,0.3); }

.contact-info-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:44px; }
.contact-info-card { background:var(--bg-card); padding:30px; border-radius:var(--radius-xl); text-align:center; border:1px solid var(--border-default); transition:all 0.4s var(--ease-out-expo); }
.contact-info-card:hover { border-color:var(--border-glow); box-shadow:var(--shadow-elevated), 0 0 40px rgba(99,102,241,0.06); transform:translateY(-6px); }
.contact-info-card .icon { width:56px; height:56px; background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.15); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--accent-primary); }
.contact-info-card h4 { font-size:1rem; margin-bottom:6px; }
.contact-info-card p { font-size:0.9rem; color:var(--text-secondary); margin-bottom:0; }

/* ============================================
   FOOTER - Neon Dark
   ============================================ */
.site-footer {
  background:var(--bg-surface); color:rgba(255,255,255,0.5); padding:72px 0 0;
  position:relative; border-top:1px solid var(--border-default);
}
.site-footer::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:200px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  box-shadow:0 0 20px var(--accent-primary);
}
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--border-default); }
.footer-brand .footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer-brand .footer-logo img { height:40px; filter:brightness(1.2); }
.footer-brand p { font-size:0.88rem; line-height:1.7; margin-bottom:24px; color:var(--text-muted); }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:42px; height:42px; background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all 0.4s var(--ease-out-expo); }
.footer-social a:hover { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); transform:translateY(-4px) rotateZ(-3deg); box-shadow:0 8px 24px rgba(99,102,241,0.3); }
.footer-social a svg { width:18px; height:18px; }
.footer-col h4 { color:var(--text-primary); font-size:0.92rem; margin-bottom:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.footer-col ul li { margin-bottom:12px; }
.footer-col ul li a { color:var(--text-muted); font-size:0.88rem; transition:all 0.3s var(--ease-out-expo); position:relative; display:inline-block; }
.footer-col ul li a:hover { color:var(--text-primary); transform:translateX(6px); }
.footer-bottom { padding:24px 0; display:flex; align-items:center; justify-content:space-between; font-size:0.82rem; color:var(--text-faint); }
.footer-bottom a { color:var(--text-muted); }
.footer-bottom a:hover { color:var(--text-primary); }
.footer-bottom-links { display:flex; gap:24px; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:48px; padding:36px 0; }
.pagination .page-numbers { display:flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 14px; border:1px solid var(--border-default); border-radius:var(--radius-md); font-weight:600; font-size:0.9rem; color:var(--text-secondary); transition:all 0.3s var(--ease-out-expo); background:var(--bg-card); }
.pagination .page-numbers:hover { border-color:var(--accent-primary); color:var(--accent-primary); background:rgba(99,102,241,0.08); transform:translateY(-3px); box-shadow:0 8px 20px rgba(99,102,241,0.15); }
.pagination .page-numbers.current { background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(99,102,241,0.3); }
.pagination .page-numbers.dots { border:none; color:var(--text-muted); background:none; }

/* ============================================
   404 - Neon Gradient
   ============================================ */
.error-404 { text-align:center; padding:100px 24px; }
.error-404 h1 {
  font-size:8rem; font-weight:800; line-height:1; margin-bottom:12px; letter-spacing:-0.06em;
  background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow:none; filter:drop-shadow(0 0 30px rgba(99,102,241,0.3));
}
.error-404 h2 { font-size:1.5rem; margin-bottom:18px; }
.error-404 p { color:var(--text-secondary); max-width:480px; margin:0 auto 36px; font-size:1.05rem; }
.error-404 .btn-primary { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color:#fff; padding:15px 36px; border-radius:var(--radius-md); font-weight:700; transition:all 0.4s var(--ease-out-expo); }
.error-404 .btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(99,102,241,0.3); color:#fff; }

/* ============================================
   SEARCH PAGE
   ============================================ */
.search-results-header { text-align:center; padding:48px 0 24px; }
.search-results-header h1 { margin-bottom:10px; }
.search-results-header p { color:var(--text-muted); }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.9) rotateX(10deg); } to { opacity:1; transform:scale(1) rotateX(0); } }

.sth-reveal { opacity:0; transform:translateY(30px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
.sth-reveal.visible { opacity:1; transform:translateY(0); }

/* ============================================
   BACK TO TOP - Neon Glow
   ============================================ */
.back-to-top {
  position:fixed; bottom:32px; right:32px; width:50px; height:50px; border-radius:50%;
  background:var(--accent-primary); color:#fff; border:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(99,102,241,0.4); display:none; align-items:center;
  justify-content:center; z-index:999; transition:all 0.4s var(--ease-out-expo); opacity:0; transform:translateY(12px);
}
.back-to-top:hover { background:var(--accent-secondary); transform:translateY(-4px) scale(1.1); box-shadow:0 8px 30px rgba(139,92,246,0.4); }
.back-to-top svg { width:20px; height:20px; }

/* ============================================
   AD SLOTS
   ============================================ */
.sth-ad-slot { width:100%; min-height:90px; margin:32px auto; padding:16px 14px; background:var(--bg-card); border:1px solid var(--border-default); border-radius:var(--radius-lg); text-align:center; overflow:hidden; position:relative; clear:both; }
.sth-ad-label { display:block; font-size:10px; line-height:1; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; }
.sth-ad-slot ins { max-width:100%; }
.sth-ad-header_code { max-width:var(--container-max); margin:14px auto 0; }
.sth-ad-before_content_code { margin-top:0; }
.sth-ad-in_content_code { margin:36px 0; min-height:120px; }
.sth-ad-sidebar_code { margin:24px 0; }
.sth-ad-footer_code { max-width:var(--container-max); margin:0 auto 28px; background:rgba(255,255,255,0.02); border-color:var(--border-default); }
.sth-ads-admin { max-width:1100px; }
.sth-ads-admin h1 { font-size:32px; margin-bottom:8px; }
.sth-ads-admin h2 { margin-top:32px; padding-bottom:10px; border-bottom:1px solid var(--border-default); }
.sth-ads-admin textarea { background:#111827; color:#e5e7eb; border-radius:var(--radius-md); padding:14px; }

/* Admin responsive */
@media screen and (max-width: 782px) {
  .sth-gemini-admin .form-table, .sth-gemini-admin .form-table tbody, .sth-gemini-admin .form-table tr, .sth-gemini-admin .form-table th, .sth-gemini-admin .form-table td { display:block; width:100%; }
  .sth-gemini-admin .form-table th { padding-bottom:4px; }
  .sth-gemini-admin .form-table td { padding:4px 0 16px; }
  .sth-gemini-admin select, .sth-gemini-admin input[type="number"], .sth-gemini-admin input[type="password"] { width:100%; max-width:none; min-height:44px; }
  .sth-gemini-admin .button { min-height:44px; padding:8px 16px; }
}

/* Logo fallback */
.site-logo-fallback { display:none; font-family:var(--font-heading); font-weight:800; font-size:1.35rem; letter-spacing:-0.04em; color:var(--text-primary); }
.site-logo-fallback strong { background:linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Utilities */
.text-center { text-align:center; }
.text-left { text-align:left; }
.screen-reader-text { border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; width:1px; }
.entry-content, .single-post-content, .page-content-wrap, .article-content { overflow-wrap:anywhere; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px) {
  .site-header { position:sticky; top:0; }
  .header-inner { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:8px 0; }
  .site-logo { flex:1 1 auto; min-width:0; overflow:hidden; }
  .site-logo img { max-width:min(220px,60vw); height:auto; max-height:42px; }
  .header-cta { flex:0 0 auto; margin-left:auto; }
  .main-navigation {
    display:none!important; position:fixed!important; top:64px!important; left:0!important; right:0!important; bottom:0!important;
    width:100%!important; height:calc(100dvh - 64px)!important; max-height:none!important;
    overflow-y:auto!important; -webkit-overflow-scrolling:touch;
    background:rgba(6,8,15,0.97)!important; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    padding:16px 20px 32px!important; border-top:1px solid var(--border-default);
    box-shadow:0 24px 60px rgba(0,0,0,0.5); z-index:10000!important;
    animation:mobileMenuIn 0.3s var(--ease-out-expo);
  }
  @keyframes mobileMenuIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
  .main-navigation.active { display:block!important; }
  .main-navigation > div, .main-navigation > ul, .main-navigation ul { width:100%!important; max-width:none!important; }
  .main-navigation ul { display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; }
  .main-navigation li { width:100%!important; display:block!important; }
  .main-navigation a { width:100%!important; min-height:52px; padding:15px 14px!important; display:flex!important; align-items:center; font-size:1rem; border-bottom:1px solid var(--border-default); border-radius:0!important; }
  .main-navigation a::after { display:none!important; }
  .main-navigation .sub-menu { display:block!important; position:static!important; width:100%!important; padding:0 0 0 14px!important; border:0!important; box-shadow:none!important; background:transparent!important; backdrop-filter:none!important; transform:none!important; opacity:1!important; animation:none!important; }
  .menu-toggle { display:inline-flex!important; align-items:center; justify-content:center; }
  body.sth-menu-open { overflow:hidden!important; }
  .site-content { grid-template-columns:1fr; padding:32px 0; }
  .article-shell { grid-template-columns:1fr; }
  .article-sidebar { padding-top:0; }
}

@media (max-width:768px) {
  :root { --header-h:64px; }
  h1 { font-size:1.85rem; } h2 { font-size:1.5rem; }
  .container { padding-left:16px; padding-right:16px; }
  .header-inner { min-height:60px; padding:7px 0; }
  .site-logo img { max-width:170px; max-height:38px; }
  .header-search-btn, .menu-toggle { width:44px; height:44px; min-width:44px; padding:10px; }
  .hero-section { padding:60px 0 80px!important; }
  .hero-section h1 { font-size:clamp(1.8rem,8vw,2.6rem)!important; }
  .hero-stats { flex-wrap:wrap; gap:24px; margin-top:32px; padding-top:24px; }
  .hero-stat-number { font-size:1.6rem; }
  .hero-search { width:100%; max-width:none; flex-direction:column; gap:10px; padding:10px; border-radius:var(--radius-lg); }
  .hero-search input { width:100%; min-width:0; }
  .hero-search button { width:100%; }
  .posts-grid { grid-template-columns:1fr!important; gap:20px!important; }
  .article-hero { padding:40px 0 76px; }
  .article-hero h1 { font-size:clamp(1.8rem,8vw,2.7rem); }
  .article-content { padding:24px 20px; border-radius:var(--radius-xl); font-size:1rem; }
  .review-summary { flex-direction:column; }
  .review-score { width:100%; flex-basis:auto; }
  .review-columns { grid-template-columns:1fr; }
  .article-navigation { grid-template-columns:1fr; }
  .article-navigation > div:last-child { text-align:left; }
  .footer-grid { grid-template-columns:1fr!important; gap:32px!important; }
  .footer-bottom { flex-direction:column; text-align:center; gap:14px; }
  .footer-bottom-links { justify-content:center; flex-wrap:wrap; gap:14px 20px; }
  .page-header { padding:44px 0; }
  .page-header h1 { font-size:clamp(1.7rem,8vw,2.3rem); }
  .contact-info-cards { grid-template-columns:1fr; }
  .error-404 { padding:72px 16px; }
  .error-404 h1 { font-size:clamp(4.5rem,20vw,7rem); }
  #cursor-glow { display:none!important; }
  input, select, textarea, button { max-width:100%; font-size:16px; }
  pre { white-space:pre; overflow-x:auto; }
}

@media (max-width:640px) {
  .container { padding-left:14px; padding-right:14px; }
  .site-logo img { height:34px; max-width:145px; }
  .back-to-top { right:16px!important; bottom:16px!important; width:44px; height:44px; }
}

@media (max-width:420px) {
  .container { padding-left:12px; padding-right:12px; }
  .site-logo img { max-width:130px; max-height:32px; }
}

/* ============================================
   LIGHT MODE
   ============================================ */
[data-theme="light"] {
  --bg-base: #F5F7FB;
  --bg-surface: #FFFFFF;
  --bg-elevated: #EDF0F7;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F0F2F8;
  --bg-glass: rgba(255,255,255,0.8);
  --bg-glass-light: rgba(245,247,251,0.7);

  --border-default: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.14);
  --border-glow: rgba(99,102,241,0.35);

  --text-primary: #1A1D2E;
  --text-secondary: #4B5068;
  --text-muted: #7C809A;
  --text-faint: #B0B4C8;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-elevated: 0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-float: 0 20px 60px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);

  --glow-primary: 0 0 20px rgba(99,102,241,0.15), 0 0 40px rgba(99,102,241,0.05);
  --glow-secondary: 0 0 20px rgba(139,92,246,0.15), 0 0 40px rgba(139,92,246,0.05);
  --glow-cyan: 0 0 20px rgba(6,182,212,0.15);
}

/* Light mode specific overrides */
[data-theme="light"] .site-header {
  background: rgba(255,255,255,0.8);
}
[data-theme="light"] .site-header.scrolled {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 30px rgba(0,0,0,0.06), 0 0 1px rgba(99,102,241,0.15);
}
[data-theme="light"] .hero-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(99,102,241,0.07), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(139,92,246,0.05), transparent),
    var(--bg-base);
}
[data-theme="light"] .hero-grid-overlay {
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
}
[data-theme="light"] .hero-search {
  background: rgba(255,255,255,0.85);
}
[data-theme="light"] .hero-shape {
  border-color: rgba(99,102,241,0.12);
}
[data-theme="light"] .main-navigation .sub-menu {
  background: rgba(255,255,255,0.97);
}
[data-theme="light"] .header-search-overlay {
  background: rgba(255,255,255,0.97);
}
[data-theme="light"] .post-card-thumb::after {
  background: linear-gradient(180deg, transparent 50%, rgba(26,29,46,0.3) 100%);
}
[data-theme="light"] .article-hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(99,102,241,0.08), transparent),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(139,92,246,0.05), transparent),
    var(--bg-base);
  color: var(--text-primary);
}
[data-theme="light"] .article-hero::before {
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
}
[data-theme="light"] .article-content pre {
  background: var(--bg-surface);
  color: #1E293B;
}
[data-theme="light"] .page-header {
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(99,102,241,0.07), transparent),
    var(--bg-base);
  color: var(--text-primary);
}
[data-theme="light"] .page-header::before {
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
}
[data-theme="light"] .site-footer {
  background: var(--bg-elevated);
  color: var(--text-muted);
}
[data-theme="light"] .newsletter-widget {
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.04));
}
[data-theme="light"] .newsletter-form input[type="email"] {
  background: rgba(0,0,0,0.03);
  border-color: var(--border-default);
}
[data-theme="light"] .sth-ad-footer_code {
  background: rgba(0,0,0,0.02);
}
[data-theme="light"] #cursor-glow {
  background: radial-gradient(circle, rgba(99,102,241,0.04), transparent 70%);
}
[data-theme="light"] .category-bar {
  background: var(--bg-surface);
}
/* Light mode mobile menu */
@media (max-width:1024px) {
  [data-theme="light"] .main-navigation {
    background: rgba(255,255,255,0.98)!important;
  }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-full);
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.3s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(99,102,241,0.1);
  box-shadow: 0 0 20px rgba(99,102,241,0.2);
  transform: rotate(15deg) scale(1.1);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.5s var(--ease-spring), opacity 0.3s;
}
/* In dark mode: show sun icon (click to switch to light) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* In light mode: show moon icon (click to switch to dark) */
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* Fallback: if no data-theme attribute, assume dark */
html:not([data-theme]) .theme-toggle .icon-sun { display: block; }
html:not([data-theme]) .theme-toggle .icon-moon { display: none; }

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; scroll-behavior:auto!important; }
  .hero-shape { animation:none!important; opacity:0.3; }
  .sth-reveal { opacity:1!important; transform:none!important; }
  .back-to-top { opacity:1; transform:none; }
  #cursor-glow { display:none!important; }
  #scroll-progress { display:none!important; }
}