/*
 * Theme Name: CalculatHub
 * Theme URI: https://calculathub.com
 * Author: CalculatHub Team
 * Author URI: https://calculathub.com
 * Description: Ultra-fast, glassmorphic SaaS WordPress theme for 1000+ interactive calculators. Built with pure PHP 8.x, CSS3, and Vanilla JS. No Elementor. No bloat.
 * Version: 2.0.0
 * Requires at least: 6.0
 * Tested up to: 6.5
 * Requires PHP: 8.0
 * License: GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: calculathub
 * Tags: glassmorphism, saas, calculators, dark-mode, pwa
 */

/* ═══════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
  /* Brand */
  --ch-primary:         #1A5BB9;
  --ch-primary-dark:    #124090;
  --ch-primary-light:   #3D7DD4;
  --ch-accent:          #FF9100;
  --ch-accent-dark:     #D97800;
  --ch-accent-light:    #FFB347;

  /* ── 10-Color Neon Palette ── */
  --neon-blue:          #1A5BB9;
  --neon-orange:        #FF9100;
  --neon-purple:        #A855F7;
  --neon-green:         #22C55E;
  --neon-pink:          #EC4899;
  --neon-cyan:          #06B6D4;
  --neon-yellow:        #EAB308;
  --neon-red:           #EF4444;
  --neon-lime:          #84CC16;
  --neon-magenta:       #D946EF;

  /* Glass */
  --ch-glass-bg:        rgba(255,255,255,0.08);
  --ch-glass-border:    rgba(255,255,255,0.18);
  --ch-glass-blur:      blur(25px);
  --ch-glass-shadow:    0 8px 32px rgba(26,91,185,0.18);

  /* Surfaces */
  --ch-surface:         #ffffff;
  --ch-surface-2:       #f4f7fc;
  --ch-surface-3:       #e8eef8;
  --ch-bg:              #f0f4ff;

  /* Text */
  --ch-text:            #0d1b2e;
  --ch-text-muted:      #5a6a84;
  --ch-text-light:      #8fa0b9;

  /* UI */
  --ch-radius:          20px;
  --ch-radius-sm:       10px;
  --ch-radius-lg:       28px;
  --ch-transition:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ch-shadow:          0 4px 24px rgba(26,91,185,0.10);
  --ch-shadow-lg:       0 12px 48px rgba(26,91,185,0.18);

  /* Typography */
  --ch-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ch-font-mono:       'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --ch-container:       1280px;
  --ch-nav-h:           70px;

  /* Tilt */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

/* Dark Mode */
[data-theme="dark"] {
  --ch-surface:         #0d1b2e;
  --ch-surface-2:       #13263d;
  --ch-surface-3:       #1a3150;
  --ch-bg:              #091628;
  --ch-text:            #e8f0fe;
  --ch-text-muted:      #8fa0b9;
  --ch-text-light:      #5a6a84;
  --ch-glass-bg:        rgba(255,255,255,0.05);
  --ch-glass-border:    rgba(255,255,255,0.10);
  --ch-glass-shadow:    0 8px 32px rgba(0,0,0,0.40);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ch-font);
  background-color: var(--ch-bg);
  color: var(--ch-text);
  line-height: 1.65;
  transition: background-color var(--ch-transition), color var(--ch-transition);
  overflow-x: hidden;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ch-primary); text-decoration: none; transition: color var(--ch-transition); }
a:hover { color: var(--ch-accent); }
button { font-family: var(--ch-font); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.25; color: var(--ch-text); }

/* ═══════════════════════════════════════════════
   3. BACKGROUND MATH ANIMATION — 10-COLOR NEON
═══════════════════════════════════════════════ */
.ch-math-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ch-math-symbol {
  position: absolute;
  font-weight: 700;
  user-select: none;
  font-family: var(--ch-font-mono);
  animation: floatSymbolMed linear infinite;
  will-change: transform, opacity;
}

/* Size tiers for 3D parallax depth effect */
.ch-math-symbol.tier-lg {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  opacity: 0.18;
  animation-name: floatSymbolFast;
  filter: blur(0px);
}
.ch-math-symbol.tier-md {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  opacity: 0.12;
  animation-name: floatSymbolMed;
  filter: blur(0.5px);
}
.ch-math-symbol.tier-sm {
  font-size: clamp(0.8rem, 1.5vw, 1.2rem);
  opacity: 0.07;
  animation-name: floatSymbolSlow;
  filter: blur(1.5px);
}

[data-theme="dark"] .ch-math-symbol.tier-lg  { opacity: 0.22; }
[data-theme="dark"] .ch-math-symbol.tier-md  { opacity: 0.15; }
[data-theme="dark"] .ch-math-symbol.tier-sm  { opacity: 0.09; }

@keyframes floatSymbolFast {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  4%   { opacity: var(--sym-opacity, 0.18); }
  96%  { opacity: var(--sym-opacity, 0.18); }
  100% { transform: translateY(-12vh) rotate(900deg); opacity: 0; }
}
@keyframes floatSymbolMed {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  5%   { opacity: var(--sym-opacity, 0.12); }
  95%  { opacity: var(--sym-opacity, 0.12); }
  100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}
@keyframes floatSymbolSlow {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  8%   { opacity: var(--sym-opacity, 0.07); }
  92%  { opacity: var(--sym-opacity, 0.07); }
  100% { transform: translateY(-8vh)  rotate(540deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════
   4. LAYOUT & CONTAINERS
═══════════════════════════════════════════════ */
.ch-container {
  max-width: var(--ch-container);
  margin: 0 auto;
  padding: 0 24px;
}

.ch-section { padding: 80px 0; position: relative; }
.ch-section-sm { padding: 48px 0; position: relative; }
main { padding-top: var(--ch-nav-h); min-height: 80vh; position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════
   5. GLASSMORPHISM UTILITIES
═══════════════════════════════════════════════ */
.glass {
  background: var(--ch-glass-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--ch-glass-border);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-glass-shadow);
}

/* Double-glass: outer blur + inner frosted card */
.glass-outer {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: calc(var(--ch-radius) + 6px);
  box-shadow: 0 16px 64px rgba(26,91,185,0.22), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 8px;
}
.glass-inner {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--ch-radius);
  overflow: hidden;
}
[data-theme="dark"] .glass-inner {
  background: rgba(13,27,46,0.9);
  border-color: rgba(255,255,255,0.1);
}

.glass-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow);
  transition: box-shadow var(--ch-transition), transform var(--ch-transition);
}

.glass-card:hover {
  box-shadow: var(--ch-shadow-lg);
  transform: translateY(-4px);
}

/* Neon gradient border input */
.ch-input-neon {
  position: relative;
}
.ch-input-neon input,
.ch-input-neon select,
.ch-input-neon textarea {
  background: var(--ch-surface);
  border: 2px solid transparent;
  border-radius: var(--ch-radius-sm);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: var(--ch-font);
  color: var(--ch-text);
  outline: none;
  width: 100%;
  transition: all var(--ch-transition);
  background-clip: padding-box;
}
.ch-input-neon input:focus,
.ch-input-neon select:focus,
.ch-input-neon textarea:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--neon-blue), 0 0 0 4px var(--neon-orange), 0 0 16px rgba(255,145,0,0.25);
}

/* Tilt card */
.ch-tilt {
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.1s ease, box-shadow var(--ch-transition);
  will-change: transform;
}

/* ═══════════════════════════════════════════════
   6. HEADER / NAV
═══════════════════════════════════════════════ */
.ch-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--ch-nav-h);
  z-index: 1000;
  background: var(--ch-glass-bg);
  backdrop-filter: var(--ch-glass-blur);
  -webkit-backdrop-filter: var(--ch-glass-blur);
  border-bottom: 1px solid var(--ch-glass-border);
  box-shadow: var(--ch-glass-shadow);
  transition: background var(--ch-transition);
}

.ch-header.scrolled {
  background: rgba(255,255,255,0.92);
}
[data-theme="dark"] .ch-header.scrolled {
  background: rgba(9,22,40,0.95);
}

.ch-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.ch-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ch-logo img {
  height: 40px;
  width: auto;
}

.ch-logo__text {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.ch-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  margin: 0 16px;
}

.ch-nav__link {
  padding: 8px 14px;
  border-radius: var(--ch-radius-sm);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ch-text);
  transition: all var(--ch-transition);
}

.ch-nav__link:hover,
.ch-nav__link.active {
  background: var(--ch-primary);
  color: #fff;
}

/* AJAX Search Bar */
.ch-search-wrap {
  flex: 1;
  max-width: 380px;
  position: relative;
}

.ch-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ch-glass-bg);
  border: 1px solid var(--ch-glass-border);
  border-radius: 50px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
  transition: all var(--ch-transition);
}

.ch-search-bar:focus-within {
  border-color: var(--ch-primary);
  box-shadow: 0 0 0 3px rgba(26,91,185,0.15);
  background: var(--ch-surface);
}
.ch-search-bar--neon:focus-within {
  border-color: var(--neon-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,145,0,0.18), 0 0 20px rgba(255,145,0,0.15) !important;
}

.ch-search-bar input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 0.9rem;
  color: var(--ch-text);
  font-family: var(--ch-font);
}

.ch-search-bar input::placeholder { color: var(--ch-text-muted); }

.ch-search-btn, .ch-voice-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ch-text-muted);
  transition: all var(--ch-transition);
  flex-shrink: 0;
}

.ch-search-btn:hover, .ch-voice-btn:hover { color: var(--ch-primary); }
.ch-voice-btn.listening { color: var(--ch-accent); animation: pulse 1s infinite; }

.ch-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius-sm);
  box-shadow: var(--ch-shadow-lg);
  max-height: 380px;
  overflow-y: auto;
  z-index: 2000;
  display: none;
}

.ch-search-results.open { display: block; }

.ch-search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ch-surface-3);
  transition: background var(--ch-transition);
  cursor: pointer;
}

.ch-search-result-item:hover { background: var(--ch-surface-2); }
.ch-search-result-item:last-child { border-bottom: none; }

.ch-search-result-item .icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-light));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ch-search-result-item .info .title { font-weight: 600; font-size: 0.9rem; }
.ch-search-result-item .info .cat { font-size: 0.75rem; color: var(--ch-text-muted); }

/* Header Actions */
.ch-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ch-theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ch-text-muted);
  transition: all var(--ch-transition);
}

.ch-theme-toggle:hover { color: var(--ch-accent); background: var(--ch-surface-2); }

.ch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--ch-transition);
  cursor: pointer;
  text-decoration: none;
}

.ch-btn-primary {
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-light));
  color: #fff;
  box-shadow: 0 4px 16px rgba(26,91,185,0.35);
}

.ch-btn-primary:hover {
  box-shadow: 0 8px 24px rgba(26,91,185,0.5);
  transform: translateY(-2px);
  color: #fff;
}

.ch-btn-accent {
  background: linear-gradient(135deg, var(--ch-accent), var(--ch-accent-light));
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,145,0,0.35);
}

.ch-btn-accent:hover {
  box-shadow: 0 8px 24px rgba(255,145,0,0.5);
  transform: translateY(-2px);
  color: #fff;
}

.ch-btn-outline {
  border: 2px solid var(--ch-primary);
  color: var(--ch-primary);
  background: transparent;
}

.ch-btn-outline:hover {
  background: var(--ch-primary);
  color: #fff;
}

.ch-btn-ghost {
  background: var(--ch-glass-bg);
  color: var(--ch-text);
  border: 1px solid var(--ch-glass-border);
  backdrop-filter: blur(10px);
}

.ch-btn-ghost:hover {
  background: var(--ch-primary);
  color: #fff;
  border-color: var(--ch-primary);
}

/* Hamburger */
.ch-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}

.ch-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ch-text);
  border-radius: 2px;
  transition: all var(--ch-transition);
}

.ch-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.ch-hamburger.open span:nth-child(2) { opacity: 0; }
.ch-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile Menu (Slide-out) */
.ch-mobile-menu {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: 280px;
  background: var(--ch-glass-bg);
  backdrop-filter: var(--ch-glass-blur);
  -webkit-backdrop-filter: var(--ch-glass-blur);
  border-left: 1px solid var(--ch-glass-border);
  padding: 80px 24px 24px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: -8px 0 32px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
}

.ch-mobile-menu.open { 
  transform: translateX(0);
  visibility: visible;
}

.ch-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 46, 0.3);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ch-transition);
}

.ch-mobile-overlay.open {
  opacity: 1;
  visibility: visible;
}
.ch-mobile-menu .ch-nav__link { display: block; padding: 12px 16px; border-radius: var(--ch-radius-sm); }

/* ═══════════════════════════════════════════════
   7. HERO SECTION
═══════════════════════════════════════════════ */
.ch-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 60px 24px;
}

.ch-hero__gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26,91,185,0.12) 0%, transparent 70%),
              radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255,145,0,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.ch-hero__content { position: relative; z-index: 1; max-width: 760px; }

.ch-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26,91,185,0.1);
  border: 1px solid rgba(26,91,185,0.25);
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ch-primary);
  margin-bottom: 24px;
  animation: fadeSlideUp 0.6s ease both;
}

.ch-hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 24px;
  animation: fadeSlideUp 0.6s 0.1s ease both;
}

.ch-hero h1 .gradient-text {
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ch-hero__sub {
  font-size: 1.15rem;
  color: var(--ch-text-muted);
  max-width: 560px;
  margin: 0 auto 36px;
  animation: fadeSlideUp 0.6s 0.2s ease both;
}

.ch-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.6s 0.3s ease both;
}

.ch-hero__search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ch-surface);
  border: 2px solid var(--ch-surface-3);
  border-radius: 50px;
  padding: 12px 20px;
  box-shadow: var(--ch-shadow-lg);
  max-width: 560px;
  width: 100%;
  animation: fadeSlideUp 0.6s 0.4s ease both;
  margin-top: 28px;
  transition: border-color var(--ch-transition), box-shadow 0.4s ease;
}

.ch-hero__search:focus-within {
  border-color: var(--neon-orange);
  box-shadow: 0 0 0 4px rgba(255,145,0,0.15), 0 0 32px rgba(255,145,0,0.2), var(--ch-shadow-lg);
}

.ch-hero__search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background: none;
  color: var(--ch-text);
  font-family: var(--ch-font);
}

.ch-hero__search input::placeholder { color: var(--ch-text-muted); }

.ch-hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 48px;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.6s 0.5s ease both;
}

.ch-stat { text-align: center; }
.ch-stat__num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ch-primary);
  letter-spacing: -1px;
}
.ch-stat__label { font-size: 0.8rem; color: var(--ch-text-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════
   8. BENTO CATEGORY GRID
═══════════════════════════════════════════════ */
.ch-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .ch-bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .ch-bento-grid { grid-template-columns: 1fr; }
}

.ch-bento-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--ch-transition), border-color var(--ch-transition);
  cursor: pointer;
  text-decoration: none;
  color: var(--ch-text);
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  will-change: transform;
}

.ch-bento-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-orange), var(--neon-purple), var(--neon-pink));
  background-size: 200% 100%;
  transform: scaleX(0);
  transition: transform var(--ch-transition);
  animation: chGradientShift 3s linear infinite;
}

@keyframes chGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.ch-bento-card:hover {
  box-shadow: 0 20px 48px rgba(26,91,185,0.18), 0 0 0 1px var(--neon-blue);
  color: var(--ch-text);
  border-color: rgba(26,91,185,0.3);
}
.ch-bento-card:hover::before { transform: scaleX(1); }

.ch-bento-card .icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-light));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.3rem;
}

.ch-bento-card .name { font-weight: 700; font-size: 1rem; }
.ch-bento-card .count { font-size: 0.8rem; color: var(--ch-text-muted); }

/* ═══════════════════════════════════════════════
   9. CALCULATOR CARDS
═══════════════════════════════════════════════ */
.ch-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .ch-calc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ch-calc-grid { grid-template-columns: 1fr; }
}

.ch-calc-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--ch-transition), border-color var(--ch-transition);
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  will-change: transform;
}

.ch-calc-card:hover {
  box-shadow: 0 20px 48px rgba(26,91,185,0.16), 0 0 0 1.5px var(--neon-cyan);
  border-color: rgba(6,182,212,0.3);
}

.ch-calc-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ch-calc-card__icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-light));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ch-calc-card__badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-premium { background: rgba(255,145,0,0.15); color: var(--ch-accent); }
.badge-free { background: rgba(26,91,185,0.1); color: var(--ch-primary); }
.badge-new { background: rgba(16,185,129,0.1); color: #10b981; }

.ch-calc-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.ch-calc-card p { font-size: 0.875rem; color: var(--ch-text-muted); line-height: 1.5; flex: 1; }

.ch-calc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--ch-surface-3);
}

.ch-calc-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--ch-text-muted);
}

/* ═══════════════════════════════════════════════
   10. SINGLE CALCULATOR PAGE
═══════════════════════════════════════════════ */
.ch-single-calc {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.ch-calc-area {
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius-lg);
  padding: 32px;
  box-shadow: var(--ch-shadow);
}

.ch-calc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ch-surface-3);
}

.ch-calc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1.5px solid var(--ch-surface-3);
  color: var(--ch-text-muted);
  background: var(--ch-surface);
  transition: all var(--ch-transition);
}

.ch-calc-action-btn:hover { border-color: var(--ch-primary); color: var(--ch-primary); }
.ch-calc-action-btn.premium-action { border-color: var(--ch-accent); color: var(--ch-accent); }
.ch-calc-action-btn.premium-action:hover { background: var(--ch-accent); color: #fff; }

/* Premium Lock Overlay */
.ch-premium-lock {
  position: relative;
}

.ch-premium-lock .lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--ch-bg), 0.85);
  backdrop-filter: blur(8px);
  border-radius: var(--ch-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
  text-align: center;
  padding: 32px;
}

.ch-premium-lock .lock-overlay .lock-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--ch-accent), var(--ch-accent-light));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.4rem;
}

/* Comparison Mode */
.ch-compare-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Calculator Sidebar */
.ch-calc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--ch-nav-h) + 20px);
}

.ch-sidebar-widget {
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius);
  padding: 20px;
}

.ch-sidebar-widget h4 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ch-text);
}

/* Ad Placeholder */
.ch-ad-zone {
  background: var(--ch-surface-2);
  border: 1px dashed var(--ch-surface-3);
  border-radius: var(--ch-radius-sm);
  padding: 20px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ch-text-muted);
}

/* ═══════════════════════════════════════════════
   11. BREADCRUMB
═══════════════════════════════════════════════ */
.ch-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ch-text-muted);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ch-breadcrumb a { color: var(--ch-text-muted); }
.ch-breadcrumb a:hover { color: var(--ch-primary); }
.ch-breadcrumb .sep { color: var(--ch-text-light); }
.ch-breadcrumb .current { color: var(--ch-text); font-weight: 500; }

/* ═══════════════════════════════════════════════
   12. PRICING PAGE
═══════════════════════════════════════════════ */
.ch-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

.ch-toggle-switch {
  position: relative;
  width: 56px; height: 30px;
}

.ch-toggle-switch input { display: none; }

.ch-toggle-switch label {
  position: absolute;
  inset: 0;
  background: var(--ch-surface-3);
  border-radius: 50px;
  cursor: pointer;
  transition: background var(--ch-transition);
}

.ch-toggle-switch label::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--ch-transition);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.ch-toggle-switch input:checked + label { background: var(--ch-primary); }
.ch-toggle-switch input:checked + label::after { transform: translateX(26px); }

.ch-toggle-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ch-text-muted);
}

.ch-toggle-label.active { color: var(--ch-text); }

.ch-save-badge {
  background: rgba(16,185,129,0.1);
  color: #10b981;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
}

.ch-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.ch-pricing-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius-lg);
  padding: 36px 30px;
  position: relative;
  transition: all var(--ch-transition);
  text-align: center;
}

.ch-pricing-card:hover { transform: translateY(-6px); box-shadow: var(--ch-shadow-lg); }

.ch-pricing-card.featured {
  background: linear-gradient(160deg, var(--ch-primary), var(--ch-primary-dark));
  border-color: var(--ch-primary);
  color: #fff;
  transform: scale(1.04);
}

.ch-pricing-card.featured:hover { transform: scale(1.04) translateY(-6px); }

.ch-pricing-card.featured h3,
.ch-pricing-card.featured p,
.ch-pricing-card.featured li { color: rgba(255,255,255,0.9); }

.ch-best-value {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ch-accent), var(--ch-accent-light));
  color: #fff;
  padding: 4px 20px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ch-pricing-card .tier-name {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ch-primary);
  margin-bottom: 8px;
}

.ch-pricing-card.featured .tier-name { color: rgba(255,255,255,0.7); }

.ch-price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin: 16px 0;
}

.ch-price .amount { font-size: 3rem; font-weight: 900; line-height: 1; }
.ch-price .period { font-size: 0.85rem; color: var(--ch-text-muted); padding-bottom: 6px; }
.ch-pricing-card.featured .ch-price .period { color: rgba(255,255,255,0.65); }

.ch-pricing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 28px 0;
  text-align: left;
}

.ch-pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ch-text-muted);
}

.ch-pricing-features li .check { color: #10b981; flex-shrink: 0; }
.ch-pricing-features li .cross { color: var(--ch-text-light); flex-shrink: 0; }
.ch-pricing-card.featured .ch-pricing-features li { color: rgba(255,255,255,0.85); }

/* Comparison Table */
.ch-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 60px;
}

.ch-comparison-table th,
.ch-comparison-table td {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid var(--ch-surface-3);
}

.ch-comparison-table th { font-size: 0.85rem; font-weight: 700; }
.ch-comparison-table td:first-child { text-align: left; font-weight: 500; }
.ch-comparison-table th:nth-child(3) { background: rgba(26,91,185,0.06); }
.ch-comparison-table td:nth-child(3) { background: rgba(26,91,185,0.03); }
.ch-comparison-table .check-icon { color: #10b981; }
.ch-comparison-table .cross-icon { color: var(--ch-text-light); }

/* FAQ */
.ch-faq {
  max-width: 720px;
  margin: 60px auto 0;
}

.ch-faq-item {
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}

.ch-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 600;
  background: var(--ch-surface);
  transition: background var(--ch-transition);
}

.ch-faq-question:hover { background: var(--ch-surface-2); }
.ch-faq-question .arrow { transition: transform var(--ch-transition); color: var(--ch-text-muted); }
.ch-faq-item.open .ch-faq-question .arrow { transform: rotate(180deg); }

.ch-faq-answer {
  display: none;
  padding: 0 24px 18px;
  font-size: 0.9rem;
  color: var(--ch-text-muted);
  background: var(--ch-surface);
  line-height: 1.7;
}

.ch-faq-item.open .ch-faq-answer { display: block; }

/* ═══════════════════════════════════════════════
   13. FOOTER
═══════════════════════════════════════════════ */
.ch-footer {
  background: var(--ch-surface-2);
  border-top: 1px solid var(--ch-surface-3);
  padding: 64px 0 0;
}

.ch-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.8fr;
  gap: 40px;
  padding-bottom: 48px;
}

.ch-footer__brand .tagline {
  font-size: 0.9rem;
  color: var(--ch-text-muted);
  margin: 12px 0 20px;
  line-height: 1.6;
}

.ch-social-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ch-social-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--ch-text-muted);
  font-size: 0.9rem;
  transition: all var(--ch-transition);
}

.ch-social-link:hover { background: var(--ch-primary); color: #fff; border-color: var(--ch-primary); }

.ch-footer__col h5 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ch-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ch-footer__links a {
  font-size: 0.875rem;
  color: var(--ch-text-muted);
  transition: color var(--ch-transition);
}

.ch-footer__links a:hover { color: var(--ch-primary); }

.ch-newsletter-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ch-newsletter-form input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--ch-surface-3);
  border-radius: 50px;
  background: var(--ch-surface);
  font-size: 0.875rem;
  color: var(--ch-text);
  font-family: var(--ch-font);
  outline: none;
  transition: border-color var(--ch-transition);
}

.ch-newsletter-form input:focus { border-color: var(--ch-primary); }

.ch-footer__bottom {
  border-top: 1px solid var(--ch-surface-3);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ch-footer__bottom p { font-size: 0.85rem; color: var(--ch-text-muted); }

/* ═══════════════════════════════════════════════
   14. QUICK-CALC FLOATING WIDGET
═══════════════════════════════════════════════ */
.ch-quick-calc {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
}

/* ── Mesh Gradient FAB ── */
.ch-quick-calc__fab {
  width: 62px; height: 62px;
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  background: conic-gradient(
    var(--neon-blue)    0deg 36deg,
    var(--neon-purple) 36deg 72deg,
    var(--neon-pink)   72deg 108deg,
    var(--neon-orange) 108deg 144deg,
    var(--neon-cyan)  144deg 180deg,
    var(--neon-green) 180deg 216deg,
    var(--neon-yellow)216deg 252deg,
    var(--neon-red)   252deg 288deg,
    var(--neon-lime)  288deg 324deg,
    var(--neon-magenta)324deg 360deg
  );
  background-size: 200% 200%;
  animation: chMeshPulse 3s linear infinite, chFabRotate 8s linear infinite;
  box-shadow: 0 0 0 0 rgba(168,85,247,0.6);
}

@keyframes chFabRotate {
  to { filter: hue-rotate(360deg); }
}

@keyframes chMeshPulse {
  0%   { box-shadow: 0 0 0 0   rgba(168,85,247,0.7); }
  40%  { box-shadow: 0 0 0 16px rgba(168,85,247,0); }
  70%  { box-shadow: 0 0 0 0   rgba(6,182,212,0.6); }
  100% { box-shadow: 0 0 0 16px rgba(6,182,212,0); }
}

.ch-quick-calc__fab:hover {
  transform: scale(1.12);
  animation: chMeshPulse 1.2s linear infinite, chFabRotate 3s linear infinite;
}

/* Ripple on click */
.ch-fab-ripple {
  position: absolute;
  width: 10px; height: 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  transform: scale(0);
  animation: chRipple 0.6s linear;
  pointer-events: none;
}
@keyframes chRipple {
  to { transform: scale(14); opacity: 0; }
}

/* Overlay */
.ch-qc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 46, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ch-transition);
}
.ch-qc-overlay.open { opacity: 1; visibility: visible; }

/* Double-glass mini calc panel */
.ch-quick-calc__panel {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 296px;
  display: none;
  animation: chScaleIn 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ch-quick-calc__panel.open { display: block; }

@keyframes chScaleIn {
  from { opacity: 0; transform: scale(0.88) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

.ch-qc-glass-outer {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: calc(var(--ch-radius-lg) + 4px);
  box-shadow: 0 20px 60px rgba(26,91,185,0.3), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 6px;
}
[data-theme="dark"] .ch-qc-glass-outer {
  background: rgba(9,22,40,0.5);
  border-color: rgba(255,255,255,0.12);
}
.ch-qc-glass-inner {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--ch-radius-lg);
  overflow: hidden;
}
[data-theme="dark"] .ch-qc-glass-inner {
  background: rgba(13,27,46,0.96);
  border-color: rgba(255,255,255,0.08);
}

.ch-quick-calc__display {
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
  padding: 20px 20px 16px;
  text-align: right;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.ch-quick-calc__display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(168,85,247,0.15), rgba(6,182,212,0.1), rgba(255,145,0,0.12), rgba(168,85,247,0.15));
  animation: chFabRotate 6s linear infinite;
}

.ch-quick-calc__expr   { font-size: 0.8rem;  color: rgba(255,255,255,0.6);  min-height: 20px; position: relative; }
.ch-quick-calc__result { font-size: 2.1rem;  font-weight: 700; color: #fff; font-family: var(--ch-font-mono); position: relative; }

/* Neon Keypad */
.ch-quick-calc__btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ch-surface-3);
}

.ch-quick-calc__btn {
  padding: 16px;
  background: var(--ch-surface);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ch-text);
  transition: background var(--ch-transition), color var(--ch-transition), box-shadow var(--ch-transition);
  cursor: pointer;
  border: none;
  font-family: var(--ch-font-mono);
  position: relative;
}

/* Neon hover per color index (0-9) */
.ch-quick-calc__btn[data-neon="0"]:hover { background: rgba(26,91,185,0.12);  color: var(--neon-blue);    box-shadow: inset 0 -2px 0 var(--neon-blue); }
.ch-quick-calc__btn[data-neon="1"]:hover { background: rgba(255,145,0,0.12);  color: var(--neon-orange);  box-shadow: inset 0 -2px 0 var(--neon-orange); }
.ch-quick-calc__btn[data-neon="2"]:hover { background: rgba(168,85,247,0.12); color: var(--neon-purple);  box-shadow: inset 0 -2px 0 var(--neon-purple); }
.ch-quick-calc__btn[data-neon="3"]:hover { background: rgba(34,197,94,0.12);  color: var(--neon-green);   box-shadow: inset 0 -2px 0 var(--neon-green); }
.ch-quick-calc__btn[data-neon="4"]:hover { background: rgba(236,72,153,0.12); color: var(--neon-pink);    box-shadow: inset 0 -2px 0 var(--neon-pink); }
.ch-quick-calc__btn[data-neon="5"]:hover { background: rgba(6,182,212,0.12);  color: var(--neon-cyan);    box-shadow: inset 0 -2px 0 var(--neon-cyan); }
.ch-quick-calc__btn[data-neon="6"]:hover { background: rgba(234,179,8,0.12);  color: var(--neon-yellow);  box-shadow: inset 0 -2px 0 var(--neon-yellow); }
.ch-quick-calc__btn[data-neon="7"]:hover { background: rgba(239,68,68,0.12);  color: var(--neon-red);     box-shadow: inset 0 -2px 0 var(--neon-red); }
.ch-quick-calc__btn[data-neon="8"]:hover { background: rgba(132,204,22,0.12); color: var(--neon-lime);    box-shadow: inset 0 -2px 0 var(--neon-lime); }
.ch-quick-calc__btn[data-neon="9"]:hover { background: rgba(217,70,239,0.12); color: var(--neon-magenta); box-shadow: inset 0 -2px 0 var(--neon-magenta); }

.ch-quick-calc__btn.op     { color: var(--neon-blue); }
.ch-quick-calc__btn.clear  { color: var(--neon-red); }
.ch-quick-calc__btn.equals {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
  color: #fff;
  text-shadow: 0 0 8px rgba(168,85,247,0.5);
}
.ch-quick-calc__btn.equals:hover {
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
  box-shadow: 0 0 16px rgba(236,72,153,0.4);
}

/* ═══════════════════════════════════════════════
   15. DASHBOARD PAGE
═══════════════════════════════════════════════ */
.ch-dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  min-height: 600px;
}

.ch-dashboard__sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ch-dashboard__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--ch-radius-sm);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ch-text-muted);
  cursor: pointer;
  transition: all var(--ch-transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.ch-dashboard__tab:hover { background: var(--ch-surface-2); color: var(--ch-text); }
.ch-dashboard__tab.active { background: var(--ch-primary); color: #fff; }

.ch-dashboard__content { min-height: 400px; }
.ch-dashboard__panel { display: none; }
.ch-dashboard__panel.active { display: block; }

/* ═══════════════════════════════════════════════
   16. ADMIN STYLES (FRONT-FACING OVERLAYS)
═══════════════════════════════════════════════ */
.ch-embed-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.ch-embed-modal.open { display: flex; }

.ch-embed-modal__box {
  background: var(--ch-surface);
  border-radius: var(--ch-radius-lg);
  padding: 36px;
  width: 100%;
  max-width: 560px;
  box-shadow: var(--ch-shadow-lg);
  position: relative;
}

.ch-embed-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ch-text-muted);
  transition: all var(--ch-transition);
  cursor: pointer;
}

.ch-embed-modal__close:hover { background: var(--ch-surface-3); color: var(--ch-text); }

.ch-code-box {
  background: var(--ch-surface-2);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius-sm);
  padding: 16px;
  font-family: var(--ch-font-mono);
  font-size: 0.82rem;
  color: var(--ch-text);
  word-break: break-all;
  margin: 16px 0;
}

/* ═══════════════════════════════════════════════
   17. ANIMATIONS & KEYFRAMES
═══════════════════════════════════════════════ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,145,0,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(255,145,0,0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Typing cursor blink */
@keyframes chBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.ch-typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--neon-orange);
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: chBlink 0.9s ease infinite;
}

/* Sparkle burst */
@keyframes chSparkle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx),var(--sy)) scale(0); opacity: 0; }
}
.ch-sparkle-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: chSparkle 0.7s ease-out forwards;
  z-index: 9999;
}

/* Counter glow */
@keyframes chCountGlow {
  0%   { text-shadow: 0 0 0px transparent; }
  50%  { text-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-blue); }
  100% { text-shadow: 0 0 0px transparent; }
}
.ch-result-glow { animation: chCountGlow 0.8s ease both; }

/* Scroll reveal */
.ch-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
.ch-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children */
.ch-reveal:nth-child(2) { transition-delay: 0.08s; }
.ch-reveal:nth-child(3) { transition-delay: 0.14s; }
.ch-reveal:nth-child(4) { transition-delay: 0.20s; }
.ch-reveal:nth-child(5) { transition-delay: 0.26s; }
.ch-reveal:nth-child(6) { transition-delay: 0.32s; }

/* ═══════════════════════════════════════════════
   18. FILTERS / TAG PILLS
═══════════════════════════════════════════════ */
.ch-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.ch-pill {
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1.5px solid var(--ch-surface-3);
  color: var(--ch-text-muted);
  background: var(--ch-surface);
  cursor: pointer;
  transition: all var(--ch-transition);
}

.ch-pill:hover, .ch-pill.active {
  background: var(--ch-primary);
  border-color: var(--ch-primary);
  color: #fff;
}

/* ═══════════════════════════════════════════════
   19. UTILITY CLASSES
═══════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-muted { color: var(--ch-text-muted); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.fw-bold { font-weight: 700; }
.fw-900 { font-weight: 900; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.w-100 { width: 100%; }
.gradient-text {
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Section Headers */
.ch-section-header { text-align: center; margin-bottom: 56px; }
.ch-section-header .label {
  display: inline-block;
  background: rgba(26,91,185,0.08);
  color: var(--ch-primary);
  border: 1px solid rgba(26,91,185,0.2);
  border-radius: 50px;
  padding: 5px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.ch-section-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.ch-section-header p {
  font-size: 1.05rem;
  color: var(--ch-text-muted);
  max-width: 560px;
  margin: 0 auto;
}

/* Back to top */
.ch-back-top {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ch-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 16px rgba(26,91,185,0.35);
  transition: all var(--ch-transition);
  opacity: 0; visibility: hidden;
}

.ch-back-top.visible { opacity: 1; visibility: visible; }
.ch-back-top:hover { background: var(--ch-primary-dark); transform: translateY(-2px); }

/* Premium CTA stripe */
.ch-premium-stripe {
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
  border-radius: var(--ch-radius-lg);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ch-premium-stripe::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: rgba(255,145,0,0.12);
  border-radius: 50%;
}

.ch-premium-stripe h2, .ch-premium-stripe p { color: #fff; }
.ch-premium-stripe p { opacity: 0.8; margin: 16px auto 32px; max-width: 440px; }

/* ═══════════════════════════════════════════════
   20. RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .ch-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-calc-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ch-single-calc { grid-template-columns: 1fr; }
  .ch-calc-sidebar { position: static; }
  .ch-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .ch-pricing-card.featured { transform: scale(1); }
}

@media (max-width: 768px) {
  :root { --ch-nav-h: 60px; }
  .ch-header { height: var(--ch-nav-h); }
  .ch-logo img { height: 32px; }
  .ch-nav { display: none; }
  .ch-search-wrap { display: none; }
  .ch-hamburger { display: flex; }
  .ch-bento-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ch-calc-grid { grid-template-columns: 1fr; }
  .ch-compare-wrap { grid-template-columns: 1fr; }
  .ch-dashboard { grid-template-columns: 1fr; }
  .ch-footer__grid { grid-template-columns: 1fr; }
  .ch-section { padding: 48px 0; }
  .ch-hero { min-height: 80vh; }
  .ch-hero h1 { font-size: 2.22rem; }
  .ch-hero__stats { gap: 24px; }
  
  /* Touch-friendly inputs */
  .ch-btn, input, select, textarea {
    min-height: 48px;
    padding: 12px 20px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }
}

@media (max-width: 480px) {
  .ch-container { padding: 0 16px; }
  .ch-bento-grid { grid-template-columns: 1fr; gap: 10px; }
  .ch-hero h1 { font-size: 1.8rem; letter-spacing: -0.5px; }
  .ch-btn { width: 100%; justify-content: center; }
  .ch-quick-calc { bottom: 16px; right: 16px; }
  .ch-quick-calc__fab { width: 50px; height: 50px; font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════
   21. PRINT STYLES
═══════════════════════════════════════════════ */
@media print {
  .ch-header, .ch-footer, .ch-quick-calc,
  .ch-calc-actions, .ch-calc-sidebar, .ch-ad-zone { display: none !important; }
  main { padding-top: 0; }
  body { background: #fff; color: #000; }
  .ch-calc-area { box-shadow: none; border: 1px solid #ddd; }
}
/* ═══════════════════════════════════════════════
   22. ADVANCED INTEGRATIONS (SEO & PRICING)
═══════════════════════════════════════════════ */

/* Breadcrumbs bar */
.ch-breadcrumbs-bar {
  background: var(--ch-surface-2);
  border-bottom: 1px solid var(--ch-surface-3);
  padding: 12px 0;
  font-size: 0.85rem;
}
.ch-breadcrumbs-bar a { color: var(--ch-text-muted); }
.ch-breadcrumbs-bar a:hover { color: var(--ch-primary); }
.ch-breadcrumbs-bar span { color: var(--ch-text-light); }
.ch-breadcrumbs-bar i { margin: 0 8px; font-size: 0.7rem; opacity: 0.5; }

/* Pricing Toggle */
.ch-pricing-toggle-wrap {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-weight: 600;
}
.ch-pricing-toggle-wrap .active { color: var(--ch-primary); }
.ch-switch {
  position: relative; display: inline-block; width: 50px; height: 26px;
}
.ch-switch input { opacity: 0; width: 0; height: 0; }
.ch-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--ch-surface-3); transition: .4s; border-radius: 34px;
}
.ch-slider:before {
  position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px;
  background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .ch-slider { background-color: var(--ch-primary); }
input:checked + .ch-slider:before { transform: translateX(24px); }

/* Pricing Card Enhancements */
.ch-pricing-card {
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}
.ch-pricing-card:hover { transform: translateY(-8px); box-shadow: var(--ch-shadow-lg); }
.ch-pricing-card--popular {
  border: 2px solid var(--ch-primary);
  position: relative;
}
.popular-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--ch-primary); color: #fff; padding: 4px 16px;
  border-radius: 20px; font-size: 0.75rem; font-weight: 700;
}
.ch-pricing-card .price { font-size: 2.5rem; font-weight: 800; margin: 16px 0; }
.ch-pricing-card .val { color: var(--ch-primary); }
.ch-pricing-card .dur { font-size: 1rem; color: var(--ch-text-muted); }
.ch-pricing-card ul.features { list-style: none; padding: 0; margin-bottom: 24px; text-align: left; }
.ch-pricing-card ul.features li { margin-bottom: 12px; font-size: 0.9rem; }
.ch-pricing-card ul.features li i { color: var(--ch-primary); margin-right: 8px; width: 16px; }

/* Security protection */
.ch-calc-protected { user-select: none; -webkit-user-select: none; }
/* Logo Styling */
.ch-logo__img {
  max-height: 60px;
  width: auto;
  transition: transform 0.3s ease-in-out;
  display: block;
}
.ch-logo:hover .ch-logo__img { transform: scale(1.05); }

/* Mobile Menu Header */
.ch-mobile-menu__header {
  padding: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ch-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Login Page Logo constraint */
body.login #login h1 a {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   23. CATEGORY HUB — Ultra-Modern Category Template
═══════════════════════════════════════════════════════════ */

/* ── Floating background symbols ── */
.ch-cat-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ch-cat-sym {
  position: absolute;
  user-select: none;
  font-weight: 700;
  animation: chCatFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes chCatFloat {
  0%   { transform: translateY(108vh) rotate(0deg);   opacity: 0; }
  6%   { opacity: var(--cat-sym-op, 0.09); }
  94%  { opacity: var(--cat-sym-op, 0.09); }
  100% { transform: translateY(-10vh)  rotate(540deg); opacity: 0; }
}

/* ── Hub wrapper ── */
.ch-cat-hub { position: relative; z-index: 1; }

/* ── Hero Section ── */
.ch-cat-hero {
  padding: calc(var(--ch-nav-h) + 36px) 0 40px;
  position: relative;
  overflow: hidden;
}
.ch-cat-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ch-cat-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ch-cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ch-text-muted);
}
.ch-cat-breadcrumb a { color: var(--ch-text-muted); }
.ch-cat-breadcrumb a:hover { color: var(--cat-color, var(--ch-primary)); }
.ch-cat-breadcrumb i { font-size: 0.65rem; opacity: 0.5; }

.ch-cat-hero__title-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ch-cat-hero__icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  flex-shrink: 0;
}
.ch-cat-hero__h1 {
  font-size: clamp(1.8rem,4vw,3rem);
  font-weight: 900;
  letter-spacing: -1px;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ch-cat-count-badge {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 50px;
  border: 1.5px solid currentColor;
  background: transparent;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.ch-cat-hero__desc {
  font-size: 1rem;
  color: var(--ch-text-muted);
  margin: 0;
  max-width: 560px;
}
.ch-cat-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.ch-cat-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ch-cat-stat .num {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.ch-cat-stat .lbl {
  font-size: 0.75rem;
  color: var(--ch-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Controls Bar ── */
.ch-cat-controls {
  background: var(--ch-surface);
  border-bottom: 1px solid var(--ch-surface-3);
  position: sticky;
  top: var(--ch-nav-h);
  z-index: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.88);
}
[data-theme="dark"] .ch-cat-controls {
  background: rgba(13,27,46,0.92);
}
.ch-cat-controls__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}

/* Quick Search */
.ch-cat-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ch-surface-2);
  border: 1.5px solid var(--ch-surface-3);
  border-radius: 50px;
  padding: 8px 14px;
  transition: all var(--ch-transition);
  flex-shrink: 0;
  min-width: 200px;
}
.ch-cat-search-wrap:focus-within {
  border-color: var(--neon-orange);
  background: var(--ch-surface);
  box-shadow: 0 0 0 3px rgba(255,145,0,0.15), 0 0 20px rgba(255,145,0,0.12);
}
.ch-cat-search-wrap i { color: var(--ch-text-muted); font-size: 0.85rem; flex-shrink:0; }
.ch-cat-search {
  border: none;
  background: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--ch-text);
  font-family: var(--ch-font);
  width: 100%;
}
.ch-cat-search::placeholder { color: var(--ch-text-muted); }
.ch-cat-search-clear {
  background: none;
  border: none;
  color: var(--ch-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--ch-transition);
}
.ch-cat-search-clear:hover { color: var(--neon-red); }

/* Category Tabs */
.ch-cat-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.ch-cat-tabs::-webkit-scrollbar { display: none; }
.ch-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ch-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--ch-transition);
  border: 1.5px solid transparent;
  flex-shrink: 0;
}
.ch-cat-tab:hover {
  background: rgba(var(--tab-color, 26,91,185),0.08);
  color: var(--tab-color, var(--ch-primary));
  border-color: var(--tab-color, var(--ch-primary));
}
.ch-cat-tab.active {
  background: var(--tab-color, var(--ch-primary));
  color: #fff !important;
  border-color: var(--tab-color, var(--ch-primary));
}
.ch-cat-tab-count {
  background: rgba(255,255,255,0.25);
  border-radius: 50px;
  font-size: 0.7rem;
  padding: 1px 6px;
}
.ch-cat-tab.active .ch-cat-tab-count { background: rgba(255,255,255,0.3); }

/* Controls Right */
.ch-cat-controls__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ch-cat-sort {
  padding: 8px 14px;
  border: 1.5px solid var(--ch-surface-3);
  border-radius: 50px;
  background: var(--ch-surface);
  color: var(--ch-text);
  font-family: var(--ch-font);
  font-size: 0.83rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--ch-transition);
}
.ch-cat-sort:focus { border-color: var(--ch-primary); }

/* View Toggle */
.ch-cat-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--ch-surface-2);
  border: 1.5px solid var(--ch-surface-3);
  border-radius: 50px;
  padding: 3px;
}
.ch-view-btn {
  width: 32px; height: 32px;
  border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  color: var(--ch-text-muted);
  cursor: pointer;
  transition: all var(--ch-transition);
  font-size: 0.85rem;
}
.ch-view-btn.active { background: var(--ch-primary); color: #fff; }

/* Result Count */
.ch-cat-result-count {
  font-size: 0.82rem;
  color: var(--ch-text-muted);
  padding: 6px 0 10px;
}

/* ── Calculator Card (Glassmorphic) ── */
.ch-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 0 0;
}
@media (max-width: 1100px) { .ch-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ch-cat-grid { grid-template-columns: 1fr; gap: 16px; } }

.ch-cat-card {
  position: relative;
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  /* Glassmorphism */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: box-shadow var(--ch-transition), border-color var(--ch-transition);
  will-change: transform;
}
[data-theme="dark"] .ch-cat-card {
  background: rgba(13,27,46,0.75);
  border-color: rgba(255,255,255,0.08);
}

/* Neon glow line at bottom — reveals on hover */
.ch-cat-card__glow-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-color), transparent, var(--card-color));
  transform: scaleX(0);
  transition: transform 0.35s ease;
  border-radius: 0 0 var(--ch-radius) var(--ch-radius);
}
.ch-cat-card:hover .ch-cat-card__glow-line { transform: scaleX(1); }

/* Neon glow border on hover */
.ch-cat-card:hover {
  border-color: rgba(var(--card-color-rgb, 26,91,185), 0.35);
  box-shadow:
    0 0 0 1.5px var(--card-color, var(--ch-primary)),
    0 8px 32px color-mix(in srgb, var(--card-color, #1A5BB9) 30%, transparent),
    0 2px 8px rgba(0,0,0,0.08);
}

/* Trending badge (floating at top-right) */
.ch-cat-trend-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: linear-gradient(135deg, #FF9100, #EF4444);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(255,145,0,0.45);
  animation: chTrendPulse 2.2s ease infinite;
}
@keyframes chTrendPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(255,145,0,0.45); }
  50%       { box-shadow: 0 4px 24px rgba(255,145,0,0.75); }
}

/* ── Pro Blur Overlay ── */
.ch-cat-pro-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(var(--ch-bg-rgb, 240,244,255),0.55);
  border-radius: var(--ch-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 10;
  text-align: center;
  padding: 16px;
  transition: backdrop-filter var(--ch-transition);
}
[data-theme="dark"] .ch-cat-pro-overlay {
  background: rgba(9,22,40,0.6);
}
.ch-cat-pro-lock {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EAB308, #F97316);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 8px 24px rgba(234,179,8,0.5);
  animation: chGoldPulse 2s ease infinite;
}
@keyframes chGoldPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(234,179,8,0.5); }
  50%       { box-shadow: 0 8px 36px rgba(234,179,8,0.85); }
}
.ch-cat-pro-overlay > span {
  font-size: 0.85rem;
  font-weight: 700;
  background: linear-gradient(135deg, #EAB308, #F97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ch-cat-pro-btn {
  background: linear-gradient(135deg, #EAB308, #F97316);
  color: #fff;
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(234,179,8,0.4);
  transition: all var(--ch-transition);
}
.ch-cat-pro-btn:hover { box-shadow: 0 6px 20px rgba(234,179,8,0.65); transform: translateY(-1px); color: #fff; }

/* Card internals */
.ch-cat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ch-cat-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
}
.ch-cat-card:hover .ch-cat-card__icon {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--card-color,#1A5BB9) 40%, transparent);
}
.ch-cat-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ch-badge-hot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#FF9100,#EF4444);
  color: #fff;
  font-size: 0.7rem;
}
.ch-badge-type {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  display: flex; align-items: center; gap: 4px;
}
.ch-badge-free { background: rgba(26,91,185,0.1);   color: var(--neon-blue); }
.ch-badge-pro  { background: rgba(234,179,8,0.15);   color: #B45309; }
[data-theme="dark"] .ch-badge-pro { color: #EAB308; }

.ch-cat-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ch-cat-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--ch-text);
}
.ch-cat-card__desc {
  font-size: 0.855rem;
  color: var(--ch-text-muted);
  line-height: 1.55;
  margin: 0;
}
.ch-cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--ch-surface-3);
  flex-wrap: wrap;
}
.ch-cat-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ch-text-muted);
}
.ch-cat-pill {
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
}
.ch-cat-use-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--ch-transition);
  white-space: nowrap;
}
.ch-cat-use-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.2); color:#fff; }

/* List view override */
.ch-cat-grid--list { grid-template-columns: 1fr; gap: 12px; }
.ch-cat-grid--list .ch-cat-card {
  flex-direction: row;
  align-items: center;
  padding: 16px 20px;
}
.ch-cat-grid--list .ch-cat-card__body { flex-direction: row; align-items: center; }
.ch-cat-grid--list .ch-cat-card__desc { display: none; }
.ch-cat-grid--list .ch-cat-card__glow-line { bottom: 0; left: 0; right: auto; top: 0; width: 3px; height: auto; transform: scaleY(0); }
.ch-cat-grid--list .ch-cat-card:hover .ch-cat-card__glow-line { transform: scaleY(1); }

/* ── Empty + No results states ── */
.ch-cat-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 24px;
  color: var(--ch-text-muted);
}
.ch-cat-empty i { font-size: 3rem; opacity: 0.25; margin-bottom: 16px; display: block; }
.ch-cat-empty h3 { font-size: 1.2rem; margin: 0 0 8px; }
.ch-cat-no-results {
  text-align: center;
  padding: 40px 24px;
  color: var(--ch-text-muted);
}
.ch-cat-no-results i { font-size: 2rem; opacity: 0.3; display: block; margin-bottom: 10px; }

/* ── Upgrade CTA Stripe ── */
.ch-cat-upsell {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
  border-radius: var(--ch-radius-lg);
  padding: 28px 32px;
  margin-top: 40px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.ch-cat-upsell::before {
  content:'';
  position:absolute;
  top:-40%;right:-5%;
  width:240px;height:240px;
  background:rgba(255,145,0,0.12);
  border-radius:50%;
}
.ch-cat-upsell__icon { font-size: 2.2rem; flex-shrink: 0; }
.ch-cat-upsell > div { flex: 1; min-width: 200px; }
.ch-cat-upsell h3 { color: #fff; font-size: 1.1rem; margin: 0 0 4px; }
.ch-cat-upsell p  { color: rgba(255,255,255,0.75); font-size: 0.875rem; margin: 0; }

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  .ch-cat-hero { padding: calc(var(--ch-nav-h) + 20px) 0 28px; }
  .ch-cat-hero__icon { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 14px; }
  .ch-cat-hero__h1 { font-size: 1.7rem; }
  .ch-cat-controls__inner { flex-wrap: wrap; gap: 8px; padding: 10px 0; }
  .ch-cat-search-wrap { min-width: 0; flex: 1; }
  .ch-cat-tabs { order: 3; width: 100%; }
  .ch-cat-controls__right { order: 2; }
  .ch-cat-upsell { flex-direction: column; text-align: center; padding: 24px 20px; }
  .ch-cat-grid--list .ch-cat-card__body { flex-direction: column; }
}

@media (max-width: 480px) {
  .ch-cat-stats { gap: 20px; }
  .ch-cat-hero__title-row { gap: 14px; }
  .ch-cat-count-badge { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   24. MOST POPULAR CALCULATORS — V2 Grid
═══════════════════════════════════════════════════════════ */

/* Section wrapper */
.ch-popular-section { background: var(--ch-surface-2); }

/* ── 3-Column Responsive Grid ── */
.ch-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 12px;
}
@media (max-width: 1024px) { .ch-popular-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ch-popular-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ── Glassmorphic Card (25px blur, 1px semi-transparent border) ── */
.ch-pop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 22px;
  border-radius: var(--ch-radius);
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 4px 28px rgba(0,0,0,0.07), inset 0 0 0 1px rgba(255,255,255,0.5);
  overflow: hidden;
  transition:
    transform 0.28s cubic-bezier(.23,1,.32,1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  will-change: transform;
}
[data-theme="dark"] .ch-pop-card {
  background: rgba(13,27,46,0.72);
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 4px 28px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Hover: lift + neon glow border in card color */
.ch-pop-card:hover {
  transform: scale(1.05) translateY(-5px);
  border-color: var(--card-color, var(--ch-primary));
  box-shadow:
    0 0 0 1.5px var(--card-color, var(--ch-primary)),
    0 12px 40px color-mix(in srgb, var(--card-color, #1A5BB9) 35%, transparent),
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* Neon glow inner ring (opacity 0→1 on hover) */
.ch-pop-card__glow {
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--ch-radius) + 1px);
  border: 2px solid transparent;
  background: linear-gradient(var(--ch-surface), var(--ch-surface)) padding-box,
              linear-gradient(135deg, var(--card-color, #1A5BB9), transparent 60%, var(--card-color, #1A5BB9)) border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ch-pop-card:hover .ch-pop-card__glow { opacity: 1; }

/* ── Header row ── */
.ch-pop-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Category icon — switches to vivid orange on hover */
.ch-pop-card__icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease;
}
.ch-pop-card:hover .ch-pop-card__icon {
  background: linear-gradient(135deg, #FF9100, #EF4444) !important;
  box-shadow: 0 6px 22px rgba(255,145,0,0.55);
  transform: scale(1.1) rotate(-5deg);
}

/* ── Badges ── */
.ch-pop-badge {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.ch-pop-badge--free {
  background: rgba(26,91,185,0.1);
  color: var(--neon-blue);
  border: 1px solid rgba(26,91,185,0.2);
}
/* Gold gradient Pro badge */
.ch-pop-badge--pro {
  background: linear-gradient(135deg, #F9A105, #FFD700);
  color: #6B3A00;
  border: 1px solid rgba(249,161,5,0.3);
  box-shadow: 0 2px 10px rgba(249,161,5,0.35);
}
[data-theme="dark"] .ch-pop-badge--pro { color: #fff; }

/* ── Body ── */
.ch-pop-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.ch-pop-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--ch-text);
  transition: color 0.25s ease;
}
.ch-pop-card:hover .ch-pop-card__title { color: var(--card-color, var(--ch-primary)); }

.ch-pop-card__desc {
  font-size: 0.862rem;
  color: var(--ch-text-muted);
  line-height: 1.57;
  margin: 0;
}

/* ── Footer ── */
.ch-pop-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--ch-surface-3);
  padding-top: 14px;
  flex-wrap: wrap;
}

/* "Used by X+ users today" */
.ch-pop-card__usage {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--ch-text-muted);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.ch-pop-card__usage i { color: var(--card-color, var(--ch-primary)); font-size: 0.8rem; flex-shrink: 0; }
.ch-pop-card__usage strong { color: var(--ch-text); }

.ch-pop-card__cat-pill {
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 0.71rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* "Use Now" CTA — Blue gradient that flips to vibrant orange on hover */
.ch-pop-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #1A5BB9, #2563EB);
  box-shadow: 0 4px 15px rgba(26,91,185,0.5);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.22s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ch-pop-card:hover .ch-pop-card__cta {
  background: linear-gradient(135deg, #FF9100, #F05200);
  box-shadow: 0 4px 20px rgba(255,145,0,0.55);
  transform: translateX(3px);
  color: #fff;
}
.ch-pop-card__cta i { transition: transform 0.22s ease; }
.ch-pop-card:hover .ch-pop-card__cta i { transform: translateX(4px); }

/* ── Inline Upsell Banner ── */
.ch-popular-upsell {
  grid-column: 1 / -1;
  border-radius: var(--ch-radius);
  padding: 2px; /* Gradient border trick */
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple), var(--neon-orange));
  position: relative;
  overflow: hidden;
}
.ch-popular-upsell::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; right: 100%; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: chUpsellShimmer 2.6s ease infinite;
}
@keyframes chUpsellShimmer {
  0%   { left: -100%; right: 100%; }
  100% { left: 100%;  right: -100%; }
}
.ch-popular-upsell__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(10,20,40,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: calc(var(--ch-radius) - 2px);
  padding: 18px 24px;
  flex-wrap: wrap;
}
.ch-popular-upsell__icon {
  font-size: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255,200,0,0.7));
}
.ch-popular-upsell__inner > div {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ch-popular-upsell__inner strong { color: #fff; font-size: 0.97rem; font-weight: 700; }
.ch-popular-upsell__inner span  { color: rgba(255,255,255,0.72); font-size: 0.85rem; }
.ch-popular-upsell__inner em    { font-style: normal; color: #FFD700; font-weight: 700; }

.ch-popular-upsell__btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg, #F9A105, #FFD700);
  color: #6B3A00;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(249,161,5,0.5);
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ch-popular-upsell__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,161,5,0.65);
  color: #6B3A00;
}

/* Empty state */
.ch-pop-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ch-text-muted);
  padding: 48px 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ch-pop-card { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
  .ch-pop-card:hover { transform: none; }
  .ch-popular-upsell::before { animation: none; }
}
@media (max-width: 480px) {
  .ch-popular-upsell__inner { padding: 14px 16px; gap: 12px; }
  .ch-pop-card { padding: 20px 18px 18px; }
}

/* ═══════════════════════════════════════════════════════════
   25. SINGLE CALCULATOR — Elite Hub V2
═══════════════════════════════════════════════════════════ */

/* Page wrapper */
.ch-single-hub { position: relative; z-index: 1; }

/* ── Glassmorphic Hero Section ── */
.ch-calc-hero {
  position: relative;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--ch-radius-lg);
  padding: 32px 36px 24px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.55);
}
[data-theme="dark"] .ch-calc-hero {
  background: rgba(13,27,46,0.75);
  border-color: rgba(255,255,255,0.08);
}
.ch-calc-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Hero main row */
.ch-calc-hero__main {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ch-calc-hero__icon {
  width: 68px; height: 68px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.7rem;
  flex-shrink: 0;
}
.ch-calc-hero__info { flex: 1; min-width: 0; }

/* Breadcrumb */
.ch-calc-hero__crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ch-text-muted);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ch-calc-hero__crumb a { color: var(--ch-text-muted); }
.ch-calc-hero__crumb a:hover { color: var(--cat-color, var(--ch-primary)); }
.ch-calc-hero__crumb i { font-size: 0.6rem; opacity: .5; }

/* H1 + cursor */
.ch-calc-hero__title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 0 0 10px;
  line-height: 1.25;
  color: var(--ch-text);
}

/* ── Interactive Star Rating ── */
.ch-star-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ch-stars { display: flex; gap: 3px; }
.ch-star {
  font-size: 1.05rem;
  cursor: pointer;
  color: #D1D5DB; /* empty */
  transition: color 0.18s ease, transform 0.18s ease;
  position: relative;
}
.ch-star.full, .ch-star.hover { color: #EAB308; }
.ch-star.half::after {
  content: '\f089'; /* fa-star-half-stroke unicode */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  color: #EAB308;
  clip-path: inset(0 50% 0 0);
}
.ch-star:hover { transform: scale(1.25); }
.ch-star-score { font-size: 0.9rem; font-weight: 700; color: var(--ch-text); }
.ch-star-count { font-size: 0.78rem; color: var(--ch-text-muted); }
.ch-hero-cat-pill {
  padding: 2px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
}

/* ── Hero Action Bar ── */
.ch-calc-hero__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--ch-surface-3);
}
.ch-hero-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--ch-surface-2);
  border: 1.5px solid var(--ch-surface-3);
  color: var(--ch-text);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ch-transition);
  white-space: nowrap;
}
.ch-hero-action-btn:hover {
  background: var(--ch-surface);
  border-color: var(--ch-primary);
  color: var(--ch-primary);
}
/* Locked PDF (gate to pricing) */
.ch-hero-action-btn--pdf-gate {
  border-color: rgba(234,179,8,0.35);
  color: var(--ch-text-muted);
}
.ch-hero-action-btn--pdf-gate:hover {
  border-color: #EAB308;
  color: #EAB308;
}
/* Gold gradient PDF button (elite) */
.ch-hero-action-btn--pdf {
  background: linear-gradient(135deg, #F9A105, #FFD700);
  border-color: transparent;
  color: #6B3A00;
  box-shadow: 0 4px 16px rgba(249,161,5,0.45);
}
.ch-hero-action-btn--pdf:hover {
  box-shadow: 0 6px 24px rgba(249,161,5,0.65);
  transform: translateY(-2px);
  color: #6B3A00;
  background: linear-gradient(135deg, #F9A105, #FFD700);
}
[data-theme="dark"] .ch-hero-action-btn--pdf { color: #fff; }

/* ── Floating Social Share ── */
.ch-float-social {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ch-float-social__btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--ch-transition), box-shadow var(--ch-transition);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.ch-float-social__btn:hover { transform: scale(1.18); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.ch-float-social__x  { background: #000; }
.ch-float-social__fb { background: #1877f2; }
.ch-float-social__li { background: #0077b5; }
.ch-float-social__copy { background: var(--ch-primary); }
@media (max-width: 1100px) { .ch-float-social { display: none; } }

/* ── Main content column ── */
.ch-single-main { min-width: 0; }

/* ── Pro blur analytics overlay ── */
.ch-pro-blur-section { padding: 0; overflow: hidden; position: relative; }
.ch-pro-blur-inner { position: relative; }
.ch-blur-placeholder {
  width: 100%;
  max-height: 240px;
  filter: blur(8px) saturate(0.3);
  opacity: 0.55;
  display: block;
}
.ch-pro-blur-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 28px 20px;
  background: rgba(var(--ch-bg-rgb,240,244,255),0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .ch-pro-blur-overlay { background: rgba(9,22,40,0.6); }
.ch-pro-blur-lock {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EAB308, #F97316);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 8px 24px rgba(234,179,8,0.5);
  animation: chGoldPulse 2s ease infinite;
}
.ch-pro-blur-overlay h4 { margin: 0; font-size: 1rem; color: var(--ch-text); }
.ch-pro-blur-overlay p  { margin: 0; font-size: 0.85rem; color: var(--ch-text-muted); }
.ch-pro-blur-overlay strong { color: var(--ch-text); }

/* ── How to Use ── */
.ch-how-to__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-how-to__steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ch-how-to__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease calc(var(--step-delay,0s)), transform 0.4s ease calc(var(--step-delay,0s));
}
.ch-how-to__step.visible { opacity: 1; transform: translateY(0); }
.ch-how-to__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}
.ch-how-to__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--ch-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  border: 1.5px solid var(--ch-surface-3);
}
.ch-how-to__step > div:last-child strong {
  font-size: 0.95rem;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  color: var(--ch-text);
}
.ch-how-to__step > div:last-child p {
  font-size: 0.845rem;
  color: var(--ch-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ── Related Calculators Header ── */
.ch-related__header {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-related__header i { color: var(--cat-color, var(--ch-primary)); }

/* ── Related Tools 3-Column Grid ── */
.ch-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .ch-related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .ch-related-grid { grid-template-columns: 1fr; } }

.ch-rel-card {
  position: relative;
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.28s cubic-bezier(.23,1,.32,1), box-shadow 0.28s ease, border-color 0.28s ease;
  will-change: transform;
}
[data-theme="dark"] .ch-rel-card {
  background: rgba(13,27,46,0.72);
  border-color: rgba(255,255,255,0.07);
}
.ch-rel-card:hover {
  border-color: var(--card-color, var(--ch-primary));
  box-shadow: 0 0 0 1.5px var(--card-color, var(--ch-primary)),
              0 8px 28px color-mix(in srgb, var(--card-color, #1A5BB9) 30%, transparent);
}
.ch-rel-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ch-rel-card__icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.28s ease;
}
.ch-rel-card:hover .ch-rel-card__icon { transform: scale(1.1) rotate(-4deg); }
.ch-rel-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--ch-text);
}
.ch-rel-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.73rem;
  color: var(--ch-text-muted);
  flex-wrap: wrap;
}
.ch-rel-stars { display: flex; align-items: center; gap: 2px; }
.ch-rel-stars span { margin-left: 3px; font-weight: 600; color: var(--ch-text); }
.ch-rel-views { display: flex; align-items: center; gap: 4px; }
.ch-rel-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 50px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--ch-transition);
  align-self: flex-start;
}
.ch-rel-card__btn:hover { transform: translateX(3px); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* ── Sidebar upgrades ── */
.ch-sidebar-cta {
  background: linear-gradient(135deg, var(--ch-primary), var(--ch-primary-dark));
  border: none;
  color: #fff;
}
.ch-sidebar-stats {
  display: flex;
  gap: 16px;
  justify-content: space-around;
  text-align: center;
}
.ch-sidebar-stat .num {
  font-size: 1.4rem;
  font-weight: 900;
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}
.ch-sidebar-stat .lbl {
  font-size: 0.72rem;
  color: var(--ch-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ch-sidebar-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .ch-calc-hero { padding: 22px 18px 18px; }
  .ch-calc-hero__icon { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 14px; }
  .ch-calc-hero__actions { gap: 6px; }
  .ch-hero-action-btn span { display: none; }
  .ch-hero-action-btn { padding: 9px 12px; border-radius: 50%; }
  .ch-hero-action-btn--pdf span,
  .ch-hero-action-btn--pdf-gate span { display: none; }
  .ch-how-to__steps { gap: 14px; }
}
@media (max-width: 480px) {
  .ch-calc-hero__main { gap: 14px; }
  .ch-star-rating { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   26. CONTACT PAGE — Elite Hub V2
═══════════════════════════════════════════════════════════ */

/* Section header adjustments */
.ch-contact-header { text-align: center; margin-bottom: 50px; }
.ch-contact-header .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ch-surface-2);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ch-text);
  border: 1px solid var(--ch-surface-3);
  margin-bottom: 16px;
}
.ch-contact-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -1px;
  margin: 0 0 16px;
  line-height: 1.1;
  color: var(--ch-text);
}
.ch-contact-title__gradient {
  background: linear-gradient(135deg, var(--ch-primary), #06B6D4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ch-contact-header p {
  font-size: 1.1rem;
  color: var(--ch-text-muted);
  max-width: 500px;
  margin: 0 auto;
}

/* ── Split Layout ── */
.ch-contact-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .ch-contact-layout { grid-template-columns: 1fr; }
}

/* ── Left form column ── */
.ch-contact-form-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Pro / Teaser Boxes */
.ch-contact-pro-box, .ch-contact-pro-teaser {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface-2);
  border: 1px solid var(--ch-surface-3);
}
.ch-contact-pro-box {
  background: linear-gradient(135deg, rgba(234,179,8,0.08), rgba(249,115,22,0.08));
  border-color: rgba(234,179,8,0.2);
}
.ch-contact-pro-box i {
  font-size: 1.5rem;
  color: #EAB308;
  filter: drop-shadow(0 2px 8px rgba(234,179,8,0.4));
}
.ch-contact-pro-teaser i {
  font-size: 1.5rem;
  color: var(--ch-text-muted);
}
.ch-contact-pro-box strong, .ch-contact-pro-teaser strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ch-text);
  margin-bottom: 2px;
}
.ch-contact-pro-box span, .ch-contact-pro-teaser span {
  display: block;
  font-size: 0.85rem;
  color: var(--ch-text-muted);
}
.ch-contact-pro-teaser a {
  color: var(--ch-primary);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}

/* Form Glass */
.ch-contact-glass {
  background: var(--ch-surface);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius-lg);
  padding: 36px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.05);
}
[data-theme="dark"] .ch-contact-glass {
  background: rgba(13,27,46,0.6);
  border-color: rgba(255,255,255,0.06);
}
.ch-contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ch-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .ch-form-row { grid-template-columns: 1fr; } }

.ch-form-group { position: relative; }
.ch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ch-text);
}
.ch-label i { color: var(--ch-text-muted); opacity: 0.6; }

/* Neon Input cycling */
.ch-neon-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--ch-surface-2);
  border: 1.5px solid var(--ch-surface-3);
  border-radius: 12px;
  color: var(--ch-text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  outline: none;
  --neon-focus: var(--ch-primary);
}
.ch-neon-input::placeholder { color: var(--ch-text-muted); opacity: 0.6; }
/* Select wrap */
.ch-select-wrap { position: relative; }
.ch-neon-select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.ch-select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ch-text-muted);
  pointer-events: none;
}
.ch-neon-textarea { resize: vertical; min-height: 120px; }
.ch-char-count {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 0.72rem;
  color: var(--ch-text-muted);
  pointer-events: none;
  background: var(--ch-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Animated gradient Send button */
.ch-contact-send-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--ch-primary), #A855F7, #EC4899, var(--ch-primary));
  background-size: 300% 300%;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  animation: chGradientMove 8s ease infinite;
  box-shadow: 0 6px 20px rgba(26,91,185,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px;
}
.ch-contact-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,91,185,0.4);
}
.ch-contact-send-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.ch-contact-send-btn__text {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ch-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  pointer-events: none;
  z-index: 1;
}
@keyframes chRippleAnim {
  to { transform: scale(1); opacity: 0; }
}
.ch-contact-send-btn:focus .ch-btn-ripple, .ch-contact-send-btn:active .ch-btn-ripple {
  animation: chRippleAnim 0.6s linear;
}

/* Response message */
.ch-contact-response {
  display: none;
  padding: 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}
.ch-contact-response i { margin-right: 6px; }
.ch-contact-response--success {
  background: rgba(34,197,94,0.12);
  color: #166534;
  border: 1px solid rgba(34,197,94,0.3);
}
[data-theme="dark"] .ch-contact-response--success { color: #4ade80; }
.ch-contact-response--error {
  background: rgba(239,68,68,0.12);
  color: #991b1b;
  border: 1px solid rgba(239,68,68,0.3);
}
[data-theme="dark"] .ch-contact-response--error { color: #f87171; }

/* ── Right info column (3D Cards) ── */
.ch-contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ch-contact-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius);
  padding: 24px;
  display: flex;
  gap: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.28s cubic-bezier(.23,1,.32,1), box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}
[data-theme="dark"] .ch-contact-card { background: rgba(13,27,46,0.6); }
.ch-contact-card:hover {
  border-color: var(--ch-primary);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.ch-contact-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ch-contact-card__body h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ch-text);
}
.ch-contact-card__link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ch-text);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
.ch-contact-card__link:hover { color: var(--ch-primary); }
.ch-contact-card__note {
  font-size: 0.8rem;
  color: var(--ch-text-muted);
  margin: 0;
}

/* Response List */
.ch-contact-response-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ch-contact-response-list li {
  font-size: 0.82rem;
  color: var(--ch-text-muted);
  display: flex; align-items: center; gap: 6px;
}
.ch-contact-response-list .dot { width: 8px; height: 8px; border-radius: 50%; }
.ch-contact-response-list strong { color: var(--ch-text); }

/* Socials Grid */
.ch-contact-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-contact-social {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ch-contact-social:hover { transform: scale(1.15) translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* FAQ shortcut */
.ch-contact-faq-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 30px 24px;
  background: var(--ch-surface-2);
}
}
.ch-contact-faq-card:hover { transform: none; box-shadow: none; border-color: var(--ch-surface-3); }


/* ═══════════════════════════════════════════════════════════
   27. ELITE DASHBOARD V4.0
═══════════════════════════════════════════════════════════ */

.ch-elite-hub { position: relative; z-index: 1; margin-top: 20px; }

/* ── Reusable Glass Panel (Double-Glassmorphism) ── */
.ch-glass-panel {
  background: var(--ch-surface);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius-lg);
  padding: 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4);
  margin-bottom: 24px;
}
[data-theme="dark"] .ch-glass-panel {
  background: rgba(13,27,46,0.65);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ch-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.ch-panel-head h2 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--ch-text); }
.ch-panel-head i { font-size: 1.25rem; }

/* ── Top Horizontal User Header ── */
.ch-elite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 32px;
}
.ch-elite-header__user { display: flex; align-items: center; gap: 18px; }
.ch-elite-avatar img {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--ch-surface-2); box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ch-elite-user-info h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 6px; line-height: 1; }
.ch-elite-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
  color: var(--badge-color);
  padding: 4px 12px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--badge-color) 30%, transparent);
}
.ch-elite-header__actions { display: flex; align-items: center; gap: 12px; }
.ch-elite-icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ch-surface-2); border: 1px solid var(--ch-surface-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--ch-text); font-size: 1.1rem; text-decoration: none;
  transition: all 0.2s ease;
}
.ch-elite-icon-btn:hover { background: var(--ch-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,91,185,0.3); border-color: var(--ch-primary); }
.ch-elite-logout:hover { background: #ef4444; box-shadow: 0 4px 12px rgba(239,68,68,0.3); border-color: #ef4444; }

/* ── Elite Masonry Grid ── */
.ch-elite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .ch-elite-grid { grid-template-columns: 1fr; } }
.ch-elite-col { display: flex; flex-direction: column; gap: 0; }

/* ── Analytics Visuals ── */
.ch-analytics-wrap {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 30px;
  align-items: center;
}
@media (max-width: 600px) { .ch-analytics-wrap { grid-template-columns: 1fr; text-align: center; } }
.ch-circular-chart { position: relative; width: 100%; max-width: 180px; margin: 0 auto; }
.ch-circular-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ch-circular-label strong { font-size: 1.8rem; font-weight: 900; line-height: 1; color: var(--ch-text); }
.ch-circular-label span { font-size: 0.75rem; color: var(--ch-text-muted); font-weight: 600; margin-top: 2px; }
.ch-line-chart { width: 100%; height: 160px; position: relative; }

/* ── Recent Activity Table ── */
.ch-table-wrap { overflow-x: auto; margin: -10px -10px; padding: 10px; }
.ch-glass-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.ch-glass-table th {
  text-align: left; padding: 0 16px 8px;
  font-size: 0.8rem; color: var(--ch-text-muted); text-transform: uppercase; letter-spacing: 0.5px;
}
.ch-glass-table td {
  background: var(--ch-surface-2);
  padding: 14px 16px;
  font-size: 0.9rem;
  border-top: 1px solid var(--ch-surface-3); border-bottom: 1px solid var(--ch-surface-3);
}
.ch-glass-table td:first-child { border-left: 1px solid var(--ch-surface-3); border-radius: 10px 0 0 10px; font-weight: 600; color: var(--ch-text); }
.ch-glass-table td:last-child { border-right: 1px solid var(--ch-surface-3); border-radius: 0 10px 10px 0; text-align: right; }

/* ── Membership Hub ── */
.ch-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .ch-hub-grid { grid-template-columns: 1fr; } }
.ch-hub-card {
  background: var(--ch-surface-2); border: 1px solid var(--ch-surface-3);
  border-radius: var(--ch-radius); padding: 20px;
}
.ch-hub-card__lbl { font-size: 0.78rem; font-weight: 600; color: var(--ch-text-muted); text-transform: uppercase; margin: 0 0 6px; display: block; }
.ch-hub-card h3 { font-size: 1.5rem; font-weight: 900; margin: 0; line-height: 1; }
.ch-glow-gold {
  background: linear-gradient(135deg, #F9A105, #FFD700); border: none; color: #6B3A00;
  box-shadow: 0 4px 16px rgba(249,161,5,0.45);
}
.ch-glow-gold:hover { box-shadow: 0 6px 24px rgba(249,161,5,0.65); transform: translateY(-2px); color: #6B3A00; margin-top:10px; margin-bottom:2px; }
.ch-hub-active-tag { display: inline-flex; align-items: center; gap: 6px; color: #22C55E; font-size: 0.8rem; font-weight: 600; margin-top: 14px; background: rgba(34,197,94,0.1); padding: 4px 12px; border-radius: 50px; }
.ch-support-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
.ch-support-tag--priority { background: rgba(234,179,8,0.15); color: #EAB308; }
.ch-ticket-status { display: inline-block; padding: 4px 10px; border-radius: 5px; font-size: 0.75rem; font-weight: 600; margin-top: 8px; }
.ch-ticket-status--resolved { background: rgba(34,197,94,0.15); color: #166534; }
[data-theme="dark"] .ch-ticket-status--resolved { color: #4ade80; }

/* ── Pro Branding Suite ── */
.ch-branding-suite { position: relative; }
.ch-hub-lock { margin-left: auto; background: rgba(239,68,68,0.1); color: #ef4444; padding: 4px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; }
.ch-branding-content { position: relative; }
.ch-locked-blur > .ch-branding-form { filter: blur(8px) grayscale(0.5); opacity: 0.6; pointer-events: none; user-select: none; }
.ch-lock-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.ch-bounce-lock { font-size: 2.5rem; color: #EAB308; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(234,179,8,0.4)); animation: chGoldPulse 2s ease infinite; }
.ch-lock-overlay h3 { font-size: 1.4rem; font-weight: 800; margin: 0 0 8px; color: var(--ch-text); }
.ch-lock-overlay p { font-size: 0.95rem; color: var(--ch-text-muted); max-width: 320px; margin: 0 0 20px; line-height: 1.5; }

.ch-brand-inputs { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.ch-brand-group > label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--ch-text); }

/* Dropzone */
.ch-dropzone {
  position: relative; border: 2px dashed var(--ch-surface-3); border-radius: 12px;
  background: var(--ch-surface-2); padding: 24px; text-align: center;
  cursor: pointer; transition: all 0.2s; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 100px;
}
.ch-dropzone:hover { border-color: var(--ch-primary); background: color-mix(in srgb, var(--ch-primary) 5%, var(--ch-surface-2)); }
.ch-drop-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ch-text-muted); }
.ch-drop-prompt i { font-size: 1.6rem; color: var(--ch-primary); }
.ch-drop-prompt span { font-size: 0.85rem; font-weight: 600; }
.ch-dropzone img { max-height: 80px; max-width: 100%; object-fit: contain; }
.ch-drop-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0;
  display: flex; align-items: center; justify-content: center; transition: opacity 0.2s;
}
.ch-dropzone:hover .ch-drop-overlay { opacity: 1; }
.ch-drop-btn { background: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; color: #ef4444; font-size: 1rem; cursor: pointer; }

/* Live Preview Document */
.ch-brand-preview-pane { padding-top: 24px; border-top: 1px solid var(--ch-surface-3); }
.ch-brand-preview-pane > label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; color: var(--ch-text); }
.ch-pdf-paper {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; border-top: 4px solid var(--ch-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06); padding: 24px;
}
.ch-pdf-head { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #f3f4f6; padding-bottom: 16px; margin-bottom: 20px; }
.ch-pdf-head img { max-width: 80px; max-height: 35px; object-fit: contain; }
.ch-pdf-company { text-align: right; }
.ch-pdf-company h4 { margin: 0 0 4px; font-size: 0.9rem; font-weight: 800; color: #111827; }
.ch-pdf-company p { margin: 0 0 2px; font-size: 0.6rem; color: #6b7280; }
.ch-pdf-body { display: flex; flex-direction: column; gap: 12px; }
.ch-pdf-skeleton { background: #f3f4f6; height: 12px; border-radius: 4px; }
[data-theme="dark"] .ch-pdf-paper { background: #1f2937; border-color: #374151; }
[data-theme="dark"] .ch-pdf-head { border-bottom-color: #374151; }
[data-theme="dark"] .ch-pdf-company h4 { color: #f9fafb; }
[data-theme="dark"] .ch-pdf-company p { color: #9ca3af; }
[data-theme="dark"] .ch-pdf-skeleton { background: #374151; }

.ch-btn-glow { position: relative; overflow: hidden; }
.ch-btn-glow::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%); animation: shimglow 3s infinite;
}
@keyframes shimglow { 50%, 100% { transform: translateX(100%); } }
#chBrandResponse { margin-top: 8px; font-size: 0.85rem; font-weight: 600; text-align: center; }
}
.ch-res-success { color: #22C55E; } .ch-res-error { color: #ef4444; }


/* ═══════════════════════════════════════════════════════════
   28. INFINITE CATEGORIES V5.0
═══════════════════════════════════════════════════════════ */

.ch-neon-pulse-badge {
  position: relative;
  background: rgba(6, 182, 212, 0.1) !important;
  color: #06B6D4 !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
  animation: chNeonPulse 3s infinite;
}
@keyframes chNeonPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(6, 182, 212, 0.1); }
  50% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.4); }
}

.ch-cat5-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .ch-cat5-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ch-cat5-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.ch-cat5-card {
  position: relative;
  background: var(--ch-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--ch-radius);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
  overflow: hidden;
}
[data-theme="dark"] .ch-cat5-card {
  background: rgba(13,27,46,0.5);
  border-color: rgba(255,255,255,0.06);
}

/* Base neon glow transition */
.ch-cat5-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, var(--neon-hover, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ch-cat5-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: color-mix(in srgb, var(--neon-hover) 4%, var(--ch-surface));
  border-color: transparent;
  box-shadow: 0 15px 35px color-mix(in srgb, var(--neon-hover) 15%, transparent);
  z-index: 2;
}
.ch-cat5-card:hover::before { opacity: 1; }

.ch-cat5-card__icon {
  font-size: 2rem;
  margin-bottom: 16px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.ch-cat5-card:hover .ch-cat5-card__icon {
  transform: scale(1.15) translateY(-2px);
  filter: drop-shadow(0 4px 12px var(--neon-hover));
}

.ch-cat5-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ch-text);
  letter-spacing: -0.3px;
}

.ch-cat5-card__count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ch-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ch-counter-val { color: var(--ch-text); font-weight: 800; }

.ch-cat5-card__arr {
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--neon-hover);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}
.ch-cat5-card:hover .ch-cat5-card__arr {
  opacity: 1;
  transform: translateX(0);
}


/* ═══════════════════════════════════════════════════════════
   29. V6 ARCHIVE DIGITAL LIBRARY (All Calculators)
═══════════════════════════════════════════════════════════ */

/* Search Header */
.ch-archive-header { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 48px; }

.ch-archive-search-wrap {
  position: relative; width: 100%; max-width: 600px; z-index: 10;
}
.ch-archive-search-input {
  width: 100%;
  padding: 16px 20px 16px 54px;
  border-radius: 50px;
  background: var(--ch-surface);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ch-text);
  font-family: var(--ch-font);
  font-size: 1.1rem;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.ch-archive-search-icon {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  color: var(--ch-text-muted); font-size: 1.2rem; transition: color 0.3s ease;
}
.ch-archive-search-glow {
  position: absolute; inset: -2px; border-radius: 52px; z-index: -1;
  background: linear-gradient(90deg, #1A5BB9, #A855F7, #EC4899, #FF9100);
  background-size: 200% 200%;
  opacity: 0; filter: blur(8px); transition: opacity 0.3s ease;
  animation: bgPanLeft 4s linear infinite;
}
.ch-archive-search-input:focus { border-color: transparent; }
.ch-archive-search-input:focus + .ch-archive-search-glow { opacity: 1; }
.ch-archive-search-input:focus ~ .ch-archive-search-icon { color: #EC4899; }

/* Horizontal scrolling pills */
.ch-archive-cats-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; width: 100%; justify-content: center;
  scrollbar-width: none; /* Firefox */
}
.ch-archive-cats-scroll::-webkit-scrollbar { display: none; }
@media(max-width:800px) { .ch-archive-cats-scroll { justify-content: flex-start; padding: 0 20px; } }

.ch-archive-pill {
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: 50px;
  background: var(--ch-surface);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ch-text);
  font-family: var(--ch-font); font-weight: 600; font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.ch-archive-pill:hover, .ch-archive-pill.active {
  background: color-mix(in srgb, var(--pill-color) 15%, var(--ch-surface));
  color: var(--pill-color);
  border-color: var(--pill-color);
  box-shadow: 0 0 15px color-mix(in srgb, var(--pill-color) 30%, transparent);
}

/* Smart Grid (4-col) */
.ch-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1200px) { .ch-archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  850px) { .ch-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  550px) { .ch-archive-grid { grid-template-columns: 1fr; } }

/* Archive Card */
.ch-archive-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--ch-surface);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--ch-radius);
  padding: 24px;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-style: preserve-3d;
}
.ch-archive-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, transparent, var(--card-neon, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.ch-archive-card:hover {
  transform: translateY(-8px) translateZ(20px);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 20px color-mix(in srgb, var(--card-neon) 20%, transparent);
  z-index: 2;
}
.ch-archive-card:hover::before { opacity: 1; }

.ch-archive-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; transform: translateZ(30px); }
.ch-archive-card__icon { font-size: 2rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.ch-archive-card__title { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; line-height: 1.4; transform: translateZ(25px); }

.ch-archive-card__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.85rem; }
.ch-rating-num { font-weight: 700; color: var(--ch-text); }

.ch-archive-card__usage { font-size: 0.85rem; color: var(--ch-text-muted); margin-bottom: 24px; display: flex; align-items: center; gap: 6px; }

.ch-archive-card__actions { margin-top: auto; display: flex; gap: 10px; transform: translateZ(35px); }
.ch-btn-quick-view {
  flex: 1; padding: 10px; border-radius: 50px; border: 1px solid var(--ch-border);
  background: var(--ch-surface-3); color: var(--ch-text); font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.ch-btn-quick-view:hover { background: var(--ch-border); }
.ch-btn-use-now {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: #fff; transition: transform 0.2s;
}
.ch-btn-use-now:hover { transform: scale(1.1); }

/* Spotlight Animation */
@keyframes chSpotlightIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Quick View Modal */
.ch-quick-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 20px;
}
.ch-modal-active { opacity: 1; pointer-events: auto; }
.ch-quick-modal-content {
  position: relative; width: 100%; max-width: 1000px; height: 85vh;
  background: var(--ch-surface); border-radius: 16px; border: 1px solid var(--ch-border);
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ch-modal-active .ch-quick-modal-content { transform: scale(1); }
.ch-quick-modal-close {
  position: absolute; right: 20px; top: -50px; width: 40px; height: 40px;
  background: var(--ch-surface); border-radius: 50%; border: none; color: var(--ch-text);
  font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ch-quick-modal-close:hover { background: #ef4444; color: #fff; }

.ch-quick-modal-loader { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }

/* V6 10-Color Spinner Loading Button */
.ch-archive-load-wrap { text-align: center; margin-top: 50px; }
.ch-v6-load-btn {
  position: relative; overflow: hidden;
  padding: 14px 40px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1);
  background: var(--ch-surface); backdrop-filter: blur(10px); color: var(--ch-text);
  font-family: var(--ch-font); font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s;
}
.ch-v6-load-btn:hover { background: var(--ch-surface-3); transform: translateY(-2px); }
.ch-v6-spinner {
  width: 24px; height: 24px; border-radius: 50%; padding: 3px; display: none; margin: 0 auto;
  background: conic-gradient(#1A5BB9, #A855F7, #EC4899, #FF9100, #EAB308, #84CC16, #22C55E, #06B6D4, #1A5BB9);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bgPanLeft 1s linear infinite;
}
.ch-v6-load-btn.ch-loading .ch-v6-load-text { display: none; }
.ch-v6-load-btn.ch-loading .ch-v6-spinner { display: block; }


/* ═══════════════════════════════════════════════════════════
   30. V7 FLOATING CALCULATOR V2 (Mini-App Redesign)
═══════════════════════════════════════════════════════════ */

/* Pulsar Mesh FAB */
.ch-mesh-pulse {
  background: conic-gradient(from 0deg, #1A5BB9, #A855F7, #EC4899, #FF9100, #EAB308, #84CC16, #22C55E, #06B6D4, #1A5BB9) !important;
  background-size: 200% 200%;
  animation: chMeshSpin 4s linear infinite, chFabPulse 2s ease-in-out infinite !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(26, 91, 185, 0.4) !important;
}
@keyframes chMeshSpin { 100% { transform: rotate(360deg); } }
@keyframes chFabPulse {
  0%, 100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 15px rgba(26, 91, 185, 0.4); }
  50% { transform: scale(1.08) rotate(180deg); box-shadow: 0 0 35px rgba(236, 72, 153, 0.6); }
}

/* Double-Glass UI */
.ch-qc-glass-outer {
  padding: 8px; border-radius: 28px;
  background: rgba(255,255,255,0.03); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}
.ch-qc-glass-inner {
  background: var(--ch-surface); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
[data-theme="dark"] .ch-qc-glass-inner { background: rgba(15,23,42,0.6); }

/* OLED Screen */
.ch-oled-screen {
  background: #000 !important; color: #22C55E !important;
  border-radius: 12px !important; padding: 16px 20px !important;
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 20px rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.8) !important;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
}
.ch-oled-screen::after { /* Scanline effect */
  content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%); background-size: 100% 4px; pointer-events: none; opacity: 0.4;
}
.ch-quick-calc__expr { font-size: 0.9rem; color: rgba(34, 197, 94, 0.6); min-height: 1.2rem; }
.ch-quick-calc__result { font-size: 2.2rem !important; font-weight: 800; font-family: monospace; letter-spacing: 1px; }

.ch-qc-copy {
  position: absolute; left: 12px; bottom: 12px; background: transparent; border: none; color: rgba(34, 197, 94, 0.6); font-size: 1.1rem; cursor: pointer; transition: all 0.2s; z-index: 10;
}
.ch-qc-copy:hover { color: #fff; text-shadow: 0 0 10px #fff; transform: scale(1.1); }

/* Keypad Bounce & Hover */
.ch-bounce-eff { transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, box-shadow 0.2s, border-color 0.2s !important; }
.ch-bounce-eff:active { transform: scale(0.92) !important; }

/* Numeric & Operator Glow */
.ch-quick-calc__btn { position: relative; overflow: hidden; background: var(--ch-surface-3) !important; border: 1px solid rgba(255,255,255,0.05) !important; }
.ch-quick-calc__btn.num:hover {
  background: color-mix(in srgb, #1A5BB9 15%, var(--ch-surface)) !important;
  color: #1A5BB9 !important; border-color: #1A5BB9 !important;
  box-shadow: 0 0 15px rgba(26, 91, 185, 0.4) !important;
}
.ch-quick-calc__btn.op:hover, .ch-quick-calc__btn.equals:hover, .ch-quick-calc__btn.clear:hover {
  background: color-mix(in srgb, #FF9100 15%, var(--ch-surface)) !important;
  color: #FF9100 !important; border-color: #FF9100 !important;
  box-shadow: 0 0 15px rgba(255, 145, 0, 0.4) !important;
}

/* Extra Widgets */
.ch-qc-widgets { display: flex; gap: 8px; margin-top: 4px; }
.ch-qc-hist-btn, .ch-qc-all-btn {
  flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--ch-border);
  background: var(--ch-surface); color: var(--ch-text-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; text-decoration: none;
}
.ch-qc-hist-btn:hover { background: color-mix(in srgb, #A855F7 10%, var(--ch-surface)); color: #A855F7; border-color: #A855F7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
.ch-qc-all-btn:hover { background: color-mix(in srgb, #06B6D4 10%, var(--ch-surface)); color: #06B6D4; border-color: #06B6D4; box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); }

/* History Panel */
.ch-qc-history-panel { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 10px; margin-top: 8px; max-height: 120px; overflow-y: auto; }
#chQcHistList { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--ch-text-muted); }

/* Sparkles for Copy */
.ch-sparkle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 10px #22C55E; pointer-events: none;
  animation: qcSparklePop 0.6s ease-out forwards;
}
@keyframes qcSparklePop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  50% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)*1.5), calc(-50% + var(--ty)*1.5)) scale(0); opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════
   31. V8 PREMIUM ELITE BANNER (Glassmorphic Gold CSS)
═══════════════════════════════════════════════════════════ */

/* Elite Glass Card Container */
.ch-premium-elite {
  position: relative; overflow: hidden;
  border-radius: 24px; padding: 48px;
  background: var(--ch-surface);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d; transition: transform 0.3s ease;
}
.ch-premium-elite:hover { transform: translateY(-5px); }

/* Rotating Gold Neon Border */
.ch-premium-elite::before {
  content: ''; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; padding: 1px;
  background: linear-gradient(0deg, transparent, transparent, #EAB308); background-size: 100% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: chGoldRotate 4s linear infinite;
}
.ch-premium-elite__glow {
  position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(234, 179, 8, 0.4) 0%, transparent 70%); border-radius: 50%; opacity: 0; filter: blur(40px); transition: opacity 0.5s; top: -150px; left: -150px; pointer-events: none;
}
.ch-premium-elite:hover .ch-premium-elite__glow { opacity: 1; animation: chGlowFloat 6s ease-in-out infinite alternate; }

@keyframes chGoldRotate { 100% { background-position: 0 200%; } }
@keyframes chGlowFloat { 100% { transform: translate(100%, 100%); } }

/* Inner Content Layout */
.ch-premium-elite__content { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; width: 100%; max-width: 1000px; }
@media(max-width: 900px) { .ch-premium-elite__content { flex-direction: column; text-align: center; } }

/* Floating Gold Star */
.ch-premium-elite__icon {
  font-size: 5rem; color: #EAB308; filter: drop-shadow(0 0 20px rgba(234, 179, 8, 0.8));
  animation: chFloatStar 3s ease-in-out infinite; transform-style: preserve-3d;
}
@keyframes chFloatStar { 0%, 100% { transform: translateY(0) rotateY(0deg) scale(1); filter: drop-shadow(0 0 20px rgba(234, 179, 8, 0.8)); } 50% { transform: translateY(-15px) rotateY(15deg) scale(1.05); filter: drop-shadow(0 20px 30px rgba(234, 179, 8, 1)); } }

/* Text & Features */
.ch-premium-elite__text { flex: 1; }
.ch-premium-elite__title {
  font-family: 'Outfit', var(--ch-font); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -1px; margin: 0 0 20px;
  background: linear-gradient(135deg, #FF9100, #EAB308, #FF9100); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: chGradientText 5s linear infinite;
}
.ch-premium-elite__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ch-premium-elite__features li { font-size: 1.1rem; color: var(--ch-text); display: flex; align-items: center; gap: 10px; }
@media(max-width: 900px) { .ch-premium-elite__features li { justify-content: center; } }

/* Actions */
.ch-premium-elite__actions { display: flex; flex-direction: column; gap: 16px; min-width: 200px; }
@media(max-width: 900px) { .ch-premium-elite__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; width: 100%; mt: 24px; } }

/* Buttons */
.ch-btn-neon-orange {
  position: relative; display: flex; justify-content: center; padding: 16px 32px; font-size: 1.1rem; font-weight: 700; color: #fff; border-radius: 50px; text-decoration: none;
  background: linear-gradient(135deg, #FF9100, #EC4899); border: none; box-shadow: 0 10px 30px rgba(255, 145, 0, 0.4); overflow: hidden; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ch-btn-neon-pulse { position: absolute; inset: 0; border-radius: 50px; box-shadow: 0 0 20px rgba(255, 145, 0, 0.8); animation: chBtnPulse 2s infinite; pointer-events: none; opacity: 0; }
.ch-btn-neon-orange:hover { transform: scale(1.05); background: linear-gradient(135deg, #EC4899, #FF9100); color: #fff; }
.ch-btn-neon-orange:hover .ch-btn-neon-pulse { opacity: 1; }

.ch-btn-glass-outline {
  display: flex; justify-content: center; padding: 14px 32px; font-size: 1.05rem; font-weight: 600; color: var(--ch-text); border-radius: 50px; text-decoration: none;
  background: var(--ch-surface); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.4); transition: all 0.3s;
}
.ch-btn-glass-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; transform: translateY(-2px); color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); }


/* ═══════════════════════════════════════════════════════════
   32. V7 UNIVERSAL CATEGORY SYSTEM
═══════════════════════════════════════════════════════════ */

/* Category Header Glass Card */
.ch-univ-header {
  position: relative; overflow: hidden;
  padding: 60px 40px; border-radius: 24px; text-align: center;
  background: var(--ch-surface); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin-bottom: 40px;
}
.ch-univ-header__glow {
  position: absolute; inset: -50%; opacity: 0.2; z-index: 0; pointer-events: none;
  animation: chPulseGlow 4s ease-in-out infinite alternate;
}
.ch-univ-header__icon { font-size: 4.5rem; margin-bottom: 20px; position: relative; z-index: 1; }
.ch-univ-header__title {
  font-family: 'Outfit', var(--ch-font); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -1.5px;
  margin: 0 0 16px; position: relative; z-index: 1; color: var(--ch-text);
}
.ch-univ-header__desc {
  font-size: 1.2rem; color: var(--ch-text-muted); max-width: 600px; margin: 0 auto;
  position: relative; z-index: 1;
}

@keyframes chPulseGlow {
  0% { transform: scale(1); opacity: 0.1; }
  100% { transform: scale(1.1); opacity: 0.3; }
}

/* Category Page Specific Enhancements */
.ch-archive-card:hover { border-color: var(--card-neon, var(--ch-border)); box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 30px var(--ch-cat-neon-glow, transparent); }
.ch-btn-use-now:hover { transform: scale(1.03); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE ELITE — Core Web Vitals & Touch Optimization
   Target: <2s LCP on 4G, zero horizontal scroll, 44px+ targets
═══════════════════════════════════════════════════════════════ */

/* ── Content Visibility (CWV: reduces render time) ─────────────── */
.ch-section,
.ch-section-sm,
.ch-related-tools,
.ch-calc-grid,
.ch-bento-grid {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ── Global: No Horizontal Overflow ────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

*, *::before, *::after {
  max-width: 100%;
}

/* ── Touch Targets: 48×48px minimum (WCAG 2.5.5 AAA) ──────────── */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
.ch-btn,
.ch-btn-login,
.ch-btn-primary,
.ch-btn-accent,
.ch-btn-outline,
.ch-btn-ghost,
.ch-nav__link,
.ch-action-btn,
.ch-cpt-action-btn,
.ch-search-btn,
.ch-hamburger {
  min-height: 44px;
  min-width: 44px;
}

/* ── Input Fields: Full height for easy mobile interaction ─────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
select,
textarea {
  min-height: 48px;
  font-size: 1rem; /* Prevent iOS zoom on focus */
  -webkit-appearance: none;
  border-radius: var(--ch-radius-sm);
}

/* ── Reduced Motion: CSS-only math animation kill ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .ch-math-symbol,
  .ch-math-bg { display: none !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Mobile Math Symbols: Reduce intensity on small screens ─────── */
@media (max-width: 768px) {
  .ch-math-symbol.tier-sm { display: none; }          /* Remove blurred bg layer */
  .ch-math-symbol.tier-md { opacity: 0.05 !important; }
  .ch-math-symbol.tier-lg { opacity: 0.12 !important; }
}

/* ══════════════════════════════════════
   BREAKPOINTS SYSTEM — 6-tier
══════════════════════════════════════ */

/* ── 1. Laptop (≤1200px) ─────────────────── */
@media (max-width: 1200px) {
  .ch-container { max-width: 100%; padding: 0 20px; }
  .ch-calc-grid { grid-template-columns: repeat(3, 1fr); }
  .ch-bento-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 2. Tablet Landscape (≤1024px) ──────── */
@media (max-width: 1024px) {
  .ch-header__inner { gap: 12px; }
  .ch-nav { display: none; }           /* Hide desktop nav; hamburger takes over */
  .ch-hamburger { display: flex; }
  .ch-search-wrap { max-width: 280px; }
  .ch-calc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ch-bento-grid { grid-template-columns: repeat(2, 1fr); }

  /* Calculator wrapper goes full-width */
  .ch-cpt-wrapper { width: 96%; margin: 0 auto; }
  .ch-cpt-card    { width: 100%; }
}

/* ── 3. Tablet Portrait (≤768px) ─────────── */
@media (max-width: 768px) {
  :root { --ch-nav-h: 60px; }

  main { padding-top: var(--ch-nav-h); }

  .ch-hero { min-height: 80vh; padding: 40px 16px; }
  .ch-hero h1 { font-size: clamp(1.8rem, 7vw, 3rem); }
  .ch-hero__sub { font-size: 1rem; }
  .ch-hero__stats { gap: 24px; }

  .ch-section { padding: 48px 0; }
  .ch-section-sm { padding: 32px 0; }

  /* Calculator: 98% of viewport width — zero horizontal scroll */
  .ch-cpt-wrapper {
    width: 98%;
    padding: 20px 12px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .ch-cpt-card {
    width: 100%;
    padding: 20px 12px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* All calc inputs full width */
  .ch-cpt-card input,
  .ch-cpt-card select,
  .ch-cpt-card textarea,
  .ch-cpt-card .ch-input-neon {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Action buttons stack on mobile */
  .ch-cpt-actions {
    flex-direction: column;
    gap: 10px;
  }
  .ch-cpt-action-btn,
  .ch-action-btn {
    width: 100%;
    justify-content: center;
  }

  /* Grid reflows */
  .ch-calc-grid { grid-template-columns: 1fr; }
  .ch-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-related-grid { grid-template-columns: 1fr; }

  /* Logo: compact */
  .ch-logo__text { font-size: 1.2rem; }

  /* Breadcrumbs: smaller */
  .ch-breadcrumbs-bar { padding: 8px 0; font-size: 0.8rem; }

  /* Card adjustments */
  .ch-bento-card { padding: 20px 16px; }
}

/* ── 4. Large Phone (≤600px) ─────────────── */
@media (max-width: 600px) {
  .ch-container { padding: 0 12px; }

  .ch-hero__actions { flex-direction: column; align-items: stretch; }
  .ch-hero__actions .ch-btn { text-align: center; justify-content: center; }
  .ch-hero__search { padding: 10px 14px; }

  .ch-bento-grid { grid-template-columns: 1fr; }

  /* Search wrap in header: hide on very small */
  .ch-search-wrap { display: none; }

  /* Calculator card: zero horizontal padding on tiny */
  .ch-cpt-card {
    padding: 16px 8px;
    border-radius: 16px;
  }

  .ch-cpt-wrapper {
    border-radius: 0;
    width: 100%;
    padding: 12px 8px;
  }

  /* Stack action buttons */
  .ch-cpt-actions {
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }

  /* Stat grid */
  .ch-hero__stats {
    gap: 20px;
  }
  .ch-stat__num { font-size: 1.6rem; }
}

/* ── 5. Phone (≤480px) ───────────────────── */
@media (max-width: 480px) {
  :root { --ch-nav-h: 56px; }

  .ch-logo__text { font-size: 1.1rem; }

  .ch-hero h1 { font-size: clamp(1.5rem, 8vw, 2.2rem); letter-spacing: -0.5px; }

  /* Full-bleed calculator */
  .ch-cpt-wrapper {
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 12px 6px;
  }

  /* Result display */
  .ch-result-display {
    font-size: clamp(1.4rem, 7vw, 2rem);
    padding: 16px;
  }

  /* Utility buttons */
  .ch-btn { padding: 10px 16px; font-size: 0.85rem; }

  .ch-calc-grid { gap: 12px; }
}

/* ── 6. Small Phone (≤375px) ─────────────── */
@media (max-width: 375px) {
  .ch-container { padding: 0 8px; }
  .ch-logo__text { font-size: 1rem; }

  .ch-hero { padding: 32px 8px; }
  .ch-hero h1 { font-size: 1.5rem; }

  .ch-cpt-card {
    padding: 12px 6px;
    border-radius: 12px;
  }

  /* Ensure related tools cards are touch-friendly */
  .ch-related-card {
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 12px;
  }
  .ch-related-card__meta { display: none; } /* Hide views on tiny phones */
}

/* ── Safe Area: iPhone notch support ────────────────────────────── */
@supports (padding: max(0px)) {
  .ch-header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  main {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  .ch-mobile-menu {
    padding-right: max(24px, env(safe-area-inset-right));
  }
}

/* ── Print Styles: Clean output ─────────────────────────────────── */
@media print {
  .ch-header,
  .ch-mobile-menu,
  .ch-math-bg,
  .ch-breadcrumbs-bar,
  .ch-related-tools,
  .ch-cpt-actions { display: none !important; }

  body { background: #fff; color: #000; }
  .ch-cpt-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: DARK MODE TOGGLE BUTTON
   The .ch-theme-toggle class is used on both the desktop header
   button and the mobile slide-out menu button.
═══════════════════════════════════════════════════════════════ */
.ch-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ch-text);
  background: var(--ch-glass-bg);
  border: 1px solid var(--ch-glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
  flex-shrink: 0;
}

.ch-theme-toggle:hover {
  background: var(--ch-primary);
  color: #ffffff;
  border-color: var(--ch-primary);
  box-shadow: 0 0 16px rgba(26, 91, 185, 0.35);
  transform: scale(1.08);
}

/* Sun icon spins when switching to light mode */
[data-theme="light"] .ch-theme-toggle i.fa-sun,
[data-theme="dark"] .ch-theme-toggle i.fa-moon {
  animation: ch-icon-spin 0.4s ease;
}
@keyframes ch-icon-spin {
  0%   { transform: rotate(0deg) scale(0.6); opacity: 0; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

/* Mobile toggle button label sync */
[data-theme="dark"] .ch-theme-toggle .ch-toggle-label::after {
  content: "Dark Mode";
}
[data-theme="light"] .ch-theme-toggle .ch-toggle-label::after {
  content: "Light Mode";
}
/* Replace static text with dynamic label */
[data-theme] .ch-toggle-label {
  font-size: 0;  /* hide original text */
}
[data-theme] .ch-toggle-label::after {
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: FULL DARK MODE PALETTE
   All dark-mode overrides for the global site when
   [data-theme="dark"] is active on <html>.
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --ch-surface:      #0d1b2e;
  --ch-surface-2:    #13263d;
  --ch-surface-3:    #1a3150;
  --ch-bg:           #0a0f1d;
  --ch-text:         #e8f0fe;
  --ch-text-muted:   #8fa0b9;
  --ch-text-light:   #5a6a84;
  --ch-glass-bg:     rgba(255,255,255,0.05);
  --ch-glass-border: rgba(255,255,255,0.10);
  --ch-glass-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* Body + layout */
[data-theme="dark"] body {
  background-color: #0a0f1d;
  color: #e8f0fe;
}

/* Header */
[data-theme="dark"] .ch-header {
  background: rgba(10,15,29,0.85);
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .ch-header.scrolled {
  background: rgba(10,15,29,0.97);
}

/* Nav links */
[data-theme="dark"] .ch-nav__link {
  color: #e8f0fe;
}
[data-theme="dark"] .ch-nav__link:hover,
[data-theme="dark"] .ch-nav__link.active {
  background: var(--ch-primary);
  color: #ffffff;
}

/* Search bar */
[data-theme="dark"] .ch-search-bar {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .ch-search-bar input {
  color: #e8f0fe;
}
[data-theme="dark"] .ch-search-bar input::placeholder {
  color: rgba(255,255,255,0.35);
}

/* Cards + surfaces */
[data-theme="dark"] .glass-card,
[data-theme="dark"] .ch-bento-card,
[data-theme="dark"] .ch-calc-card {
  background: #13263d;
  border-color: rgba(255,255,255,0.08);
}

/* Mobile menu */
[data-theme="dark"] .ch-mobile-menu {
  background: rgba(10,15,29,0.97);
  border-left-color: rgba(255,255,255,0.08);
}

/* Glassmorphism containers in dark mode */
[data-theme="dark"] .glass {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}

/* Breadcrumbs */
[data-theme="dark"] .ch-breadcrumbs-bar {
  background: rgba(10,15,29,0.6);
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .ch-breadcrumbs-bar a,
[data-theme="dark"] .ch-breadcrumbs-bar span {
  color: #e8f0fe;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION: LIGHT MODE NAV & SURFACE CORRECTIONS
   Ensure nav text stays readable when user switches to light mode.
═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .ch-nav__link {
  color: #0d1b2e;
}
[data-theme="light"] .ch-hamburger span {
  background: #0d1b2e;
}
[data-theme="light"] .ch-search-bar input {
  color: #0d1b2e;
}
[data-theme="light"] .ch-search-bar input::placeholder {
  color: rgba(0,0,0,0.4);
}
[data-theme="light"] body {
  background-color: #f0f4ff;
  color: #0d1b2e;
}