:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg-base: #f0f2f5;
  --bg-elevated: rgba(255, 255, 255, 0.72);
  --bg-surface: rgba(255, 255, 255, 0.5);
  --bg-card: rgba(255, 255, 255, 0.65);
  --border-glass: rgba(255, 255, 255, 0.4);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --text-primary: #1a1b23;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-lg: rgba(0, 0, 0, 0.12);
  --accent-primary: #06b6d4;
  --accent-secondary: #a855f7;
  --accent-glow: rgba(6, 182, 212, 0.15);
  --accent-glow-secondary: rgba(168, 85, 247, 0.15);
  --dot-color: rgba(0, 0, 0, 0.07);
  --hero-gradient: linear-gradient(135deg, #06b6d4 0%, #a855f7 50%, #f59e0b 100%);
  --card-hover: rgba(255, 255, 255, 0.85);
}

.dark {
  --bg-base: #12131a;
  --bg-elevated: rgba(255, 255, 255, 0.06);
  --bg-surface: rgba(255, 255, 255, 0.04);
  --bg-card: rgba(255, 255, 255, 0.05);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --text-primary: #f0f2f5;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-lg: rgba(0, 0, 0, 0.5);
  --accent-primary: #22d3ee;
  --accent-secondary: #c084fc;
  --accent-glow: rgba(34, 211, 238, 0.12);
  --accent-glow-secondary: rgba(192, 132, 252, 0.12);
  --dot-color: rgba(255, 255, 255, 0.04);
  --hero-gradient: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #fbbf24 100%);
  --card-hover: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg-base);
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 896px; }
.main-content { padding-top: 4rem; min-height: 72vh; }
.section { padding-top: 4rem; padding-bottom: 4rem; }
.page-pad { padding-top: 2rem; padding-bottom: 2rem; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.layout-sidebar { display: flex; gap: 2rem; align-items: flex-start; }
.layout-main { flex: 1 1 auto; min-width: 0; }
.sidebar { width: 18rem; flex: 0 0 18rem; display: grid; gap: 1.5rem; }
.stack { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 1.5rem; }
.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-1 { gap: .375rem; }
.gap-2 { gap: .75rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.glass, .glass-strong, .glass-subtle {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.glass { background: var(--bg-elevated); border: 1px solid var(--border-glass); box-shadow: 0 4px 24px var(--shadow-color); }
.glass-strong { background: var(--bg-card); border: 1px solid var(--border-glass); box-shadow: 0 8px 32px var(--shadow-lg); backdrop-filter: blur(24px); }
.glass-subtle { background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.card { border-radius: 1rem; padding: 1.5rem; }
.card-sm { border-radius: .75rem; padding: 1rem; }
.card-lg { border-radius: 1.5rem; padding: 2rem; }
.hover-card:hover { background: var(--card-hover); box-shadow: 0 8px 32px var(--shadow-lg); transform: translateY(-2px); }
.gradient-border { position: relative; }
.gradient-border:before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--hero-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.gradient-text { background: var(--hero-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.site-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: all .3s ease; }
.site-nav.is-scrolled { background: var(--bg-card); border-bottom: 1px solid var(--border-glass); box-shadow: 0 8px 32px var(--shadow-lg); backdrop-filter: blur(24px); }
.nav-inner { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.25rem; }
.brand-mark { width: 2rem; height: 2rem; border-radius: .5rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.desktop-nav { display: flex; align-items: center; gap: .25rem; }
.desktop-nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.desktop-nav .menu-item a { display: inline-flex; align-items: center; gap: .375rem; border-radius: .5rem; color: var(--text-secondary); transition: all .2s ease; padding: .5rem .75rem; font-size: .875rem; font-weight: 500; }
.desktop-nav .menu-item a:hover { color: var(--text-primary); background: var(--bg-surface); }
.nav-link, .icon-button { display: inline-flex; align-items: center; gap: .375rem; border-radius: .5rem; color: var(--text-secondary); transition: all .2s ease; }
.nav-link { padding: .5rem .75rem; font-size: .875rem; font-weight: 500; }
.nav-link:hover, .icon-button:hover { color: var(--text-primary); background: var(--bg-surface); }
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.icon-button { border: 0; background: transparent; padding: .5rem; cursor: pointer; }
.mobile-menu { display: none; border-top: 1px solid var(--border-glass); padding: .75rem 1rem; }
.mobile-menu[hidden], .mobile-search[hidden] { display: none; }
.mobile-menu:not([hidden]) { display: grid; gap: .25rem; }
.mobile-search:not([hidden]) { display: block; padding-bottom: .75rem; }

.search-field { position: relative; }
.search-field i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--text-muted); }
.search-field input, .field, textarea.field, select.field {
  width: 100%; border-radius: .75rem; border: 1px solid var(--border-glass); background: var(--bg-surface);
  color: var(--text-primary); padding: .7rem .9rem; outline: none; transition: box-shadow .2s ease;
}
.search-field input { padding-left: 2.5rem; }
.search-field input::placeholder, .field::placeholder { color: var(--text-muted); }
.search-field input:focus, .field:focus { box-shadow: 0 0 0 3px rgba(6, 182, 212, .22); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; border: 0; cursor: pointer;
  font-weight: 700; font-size: .875rem; padding: .72rem 1.25rem; transition: all .2s ease;
}
.btn-sm { padding: .45rem .75rem; font-size: .875rem; }
.btn-lg { padding: .95rem 1.75rem; font-size: 1rem; }
.btn-primary { background: var(--accent-primary); color: #fff; box-shadow: 0 10px 24px var(--accent-glow); }
.btn-secondary { background: var(--accent-secondary); color: #fff; box-shadow: 0 10px 24px var(--accent-glow-secondary); }
.btn-outline { background: transparent; border: 1px solid var(--border-glass); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn:hover { opacity: .9; }

.badge {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .16rem .62rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; white-space: nowrap;
}
.badge-default { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.badge-ai { background: var(--accent-glow-secondary); color: var(--accent-secondary); border: 1px solid rgba(168,85,247,.3); }
.badge-static { background: var(--accent-glow); color: var(--accent-primary); border: 1px solid rgba(6,182,212,.3); }
.badge-points { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.badge-free, .badge-success, .badge-new { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.badge-info { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.badge-danger { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.badge-pro { background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }

.section-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-header h2, .page-title, h1, h2, h3 { color: var(--text-primary); margin-top: 0; }
.page-title { font-size: 1.875rem; line-height: 1.2; margin-bottom: .5rem; }
.section-header h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.action-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent-primary); font-size: .875rem; font-weight: 600; }

.hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .9; }
.hero-orb { position: absolute; border-radius: 999px; filter: blur(48px); opacity: .07; }
.hero-orb.one { width: 18rem; height: 18rem; top: 5rem; left: 2.5rem; background: var(--accent-primary); }
.hero-orb.two { width: 24rem; height: 24rem; top: 10rem; right: 5rem; background: var(--accent-secondary); }
.hero-orb.three { width: 20rem; height: 20rem; bottom: 5rem; left: 50%; background: #f59e0b; opacity: .05; }
.hero-inner { position: relative; display: flex; align-items: center; gap: 3rem; padding-top: 5rem; padding-bottom: 4rem; }
.hero-copy, .hero-visual { flex: 1 1 0; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.08; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: 0; }
.hero p { color: var(--text-secondary); font-size: 1.125rem; line-height: 1.7; max-width: 36rem; }
.stats-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; color: var(--text-muted); font-size: .875rem; }
.mock-line { height: 2rem; background: var(--bg-surface); border-radius: .5rem; display: flex; align-items: center; padding: 0 .75rem; color: var(--accent-primary); font-family: var(--font-mono); font-size: .78rem; overflow: hidden; }

.icon-tile { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon-tile-lg { width: 4rem; height: 4rem; border-radius: 1rem; }
.icon-primary { color: var(--accent-primary); background: var(--accent-glow); }
.icon-secondary { color: var(--accent-secondary); background: var(--accent-glow-secondary); }
.icon-amber { color: #f59e0b; background: rgba(245,158,11,.15); }

.resource-card { height: 100%; display: flex; flex-direction: column; }
.resource-card h3 { font-size: 1rem; margin: .5rem 0; }
.resource-card p { color: var(--text-muted); font-size: .875rem; line-height: 1.6; flex: 1; margin: 0; }
.card-media { height: 10rem; border-radius: .75rem; background: linear-gradient(135deg, rgba(6,182,212,.2), rgba(168,85,247,.2)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--accent-primary); }
.product-media { height: 11rem; background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(6,182,212,.15)); }
.card-footer { border-top: 1px solid var(--border-subtle); padding-top: .75rem; margin-top: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.thread-row { display: flex; align-items: center; gap: 1rem; border-radius: .75rem; padding: 1rem; }
.thread-title { font-size: .9rem; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.thread-meta { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; color: var(--text-muted); font-size: .75rem; }
.ad-zone {
  min-height: 90px; border: 1px dashed var(--text-muted); border-radius: .75rem; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: var(--bg-surface); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
}
.ad-slot { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad-slot ins { max-width: 100%; }
.ad-slot-sidebar { width: 300px; min-height: 250px; max-width: 100%; }
.ad-slot-banner, .ad-slot-inline { min-height: 90px; }
.ad-slot-footer { min-height: 60px; }
.ad-sidebar { width: 300px; height: 250px; max-width: 100%; }
.ad-footer { height: 60px; }

.filter-bar, .tabs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border-radius: 1rem; padding: 1rem; margin-bottom: 2rem; }
.tabs { padding: .25rem; }
.tab-button { border: 0; border-radius: .75rem; background: transparent; color: var(--text-secondary); padding: .65rem 1rem; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; }
.tab-button.is-active, .search-tab.is-active { background: var(--accent-primary); color: #fff; box-shadow: 0 10px 24px var(--accent-glow); }
.prose-tech { color: var(--text-primary); }
.prose-tech p { color: var(--text-secondary); line-height: 1.75; }
.prose-tech pre { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: .75rem; padding: 1rem; overflow-x: auto; color: var(--text-secondary); }
.skeleton { background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.rounded-lg { border-radius: .5rem; }

.site-footer { border-top: 1px solid var(--border-glass); margin-top: 5rem; }
.footer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; padding: 3rem 0; }
.footer-brand p, .site-footer a { color: var(--text-muted); font-size: .875rem; line-height: 1.6; }
.footer-title { font-size: .875rem; font-weight: 800; margin-bottom: .75rem; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.newsletter { display: flex; align-items: center; gap: 1rem; }
.newsletter .field { min-width: 12rem; }
.footer-bottom { border-top: 1px solid var(--border-subtle); padding: 2rem 0; display: flex; justify-content: space-between; color: var(--text-muted); font-size: .75rem; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  border: 0;
  background: var(--accent-primary);
  color: #fff;
  font-weight: 700;
  padding: .72rem 1.25rem;
  box-shadow: 0 10px 24px var(--accent-glow);
}
.woocommerce div.product .product_title,
.woocommerce-loop-product__title { color: var(--text-primary); }
.woocommerce table.shop_table,
.woocommerce-cart-form,
.cart_totals,
.woocommerce div.product div.summary {
  background: var(--bg-elevated);
  border: 1px solid var(--border-glass);
  border-radius: 1rem;
  padding: 1.5rem;
}
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
  border-radius: .75rem;
  border: 1px solid var(--border-glass);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: .7rem .9rem;
}

*:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-glow); color: var(--text-primary); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-sidebar { display: block; }
  .sidebar { display: none; }
}
@media (max-width: 768px) {
  .desktop-nav, .desktop-search { display: none; }
  .hero-inner { flex-direction: column; text-align: center; padding-top: 3.5rem; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-actions, .stats-row { justify-content: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: span 2; }
  .newsletter, .footer-bottom { flex-direction: column; align-items: stretch; }
  .section-header { align-items: flex-start; flex-direction: column; }
}
@media (min-width: 769px) {
  .mobile-only { display: none; }
}
@media (max-width: 560px) {
  .container { padding: 0 .875rem; }
  .card, .card-lg { padding: 1rem; }
  .thread-row { align-items: flex-start; }
  .hide-sm { display: none; }
}