/* Bright Vibrant unified theme */

:root {
  --bg: #0b1020;
  --bg-2: #0e1430;
  --text: #eaf2ff;
  --muted: #b9c7e6;
  --border: #20304d;
  --accent: #22d3ee;
  --accent-2: #a78bfa;
  --accent-3: #f59e0b;
  --glow: rgba(34, 211, 238, 0.35);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  line-height: 1.4;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(167,139,250,.22), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
}

/* Header */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(11,16,32,.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .2px; color: var(--text); text-decoration: none; }
.brand-badge { display:inline-block; padding:4px 8px; border-radius: 999px; font-size: 12px; background: rgba(34,211,238,.20); color: var(--accent); font-weight:700; }
.filler { margin-left: auto; }
.small { opacity:.8; font-size: 14px; }

/* Generic cards and grids */
.grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { display:block; border:1px solid var(--border); border-radius:16px; padding:16px; background: rgba(255,255,255,0.04); box-shadow: 0 6px 30px rgba(0,0,0,0.18); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; color: inherit; text-decoration: none; }
.card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 40px var(--glow); }
.card h3 { margin: 0 0 6px; color: #ffffff; }
.card p  { color: var(--muted); margin: 0; }

/* Hashtag page common elements */
.hh-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px; }
.hh-tab { border:1px solid var(--border); padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none; }
.hh-tab.active { background: rgba(34,211,238,.16); color: var(--accent); border-color: var(--accent); }
.hh-row { display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); }
.hh-copy { border:1px solid var(--border); padding:6px 10px; border-radius:8px; cursor:pointer; background: transparent; color: var(--text); }
.hh-copy:hover { border-color: var(--accent); color: var(--accent); }


/* HashHero Pro Styles */
:root {
  --bg: #0b0d10;
  --surface: #0e1318;
  --card: #12161c;
  --elev: #0f141a;
  --text: #e8eef6;
  --muted: #9aa7bc;
  --accent: #6ad1ff;
  --accent-2: #88e0ff;
  --line: #1c232d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: url('/assets/bg-hero.jpg') no-repeat center top / cover;
  color: var(--text);
}
.container { max-width: 1120px; margin: 0 auto; padding: 28px; }

.nav { position: sticky; top:0; z-index:10; backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(11,13,16,.9), rgba(11,13,16,.7)); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; gap:20px; align-items:center; padding:14px 28px; max-width:1120px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text); text-decoration:none; }
.brand img { width:24px; height:24px; }
.nav-links { display:flex; gap:14px; margin-left:auto; }
.nav-links a { color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px; }
.nav-links a:hover { color:var(--text); background: rgba(255,255,255,.06); }
.nav-links a.active { color:var(--text); background: rgba(106,209,255,.14); }

.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; padding-top:28px; }
h1 { font-size:40px; line-height:1.1; margin:0; letter-spacing:-.4px; }
.lead { color:var(--muted); font-size:18px; }
.badge { display:inline-flex; gap:8px; padding:6px 10px; border-radius:999px; background: rgba(106,209,255,.15);
  border:1px solid rgba(106,209,255,.35); color:#dff6ff; font-weight:700; font-size:12px; letter-spacing:.3px; }
.cta { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.btn { border:1px solid var(--line); background:var(--elev); color:var(--text); padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; }
.btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color:#001520; border-color:transparent; box-shadow: 0 8px 24px rgba(106,209,255,.25); }

.section { margin-top:24px; }
.grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; transition: transform .2s; }
.card h3 { margin:0 0 8px; font-size:18px; }
.card p { color:var(--muted); margin:6px 0 0; }

.page { max-width:1120px; margin:0 auto; padding:24px; }
.form, .area { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.row { display:flex; gap:12px; }
input[type="text"], input[type="file"], input[type="color"], input[type="number"], select, input[type="range"], textarea {
  width:100%; background:var(--elev); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:12px;
}
.footer { color:var(--muted); font-size:12px; text-align:center; padding:24px; border-top:1px solid var(--line); margin-top:28px; }

@media (max-width:980px) {
  .hero { grid-template-columns:1fr; }
  .grid { grid-template-columns:1fr; }
  .row { flex-direction:column; }
}

/* Clean redesign additions */
.backdrop-panel { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.hero-center { text-align: center; padding: 52px 24px; }
.hero-title { font-size: 48px; letter-spacing: -0.6px; margin: 0 0 10px; }
.hero-sub { color: var(--muted); max-width: 760px; margin: 0 auto; }
.hero-cta { display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap: wrap; }
.section-title { font-size: 22px; margin: 6px 0 12px; }
.section-wrap { margin-top: 18px; padding: 18px; }
.card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; transition: transform .2s; }
.nav .nav-inner { justify-content: space-between; }
.tools-menu { position: relative; }
.tools-button { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
.tools-dropdown { position: absolute; top: 44px; right: 0; min-width: 240px; display: none; flex-direction: column; background: rgba(14,19,24,0.98); border:1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 20; }
.tools-dropdown a { padding: 10px 12px; color: var(--muted); text-decoration: none; }
.tools-dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
@media (max-width: 980px) { .tools-dropdown { right: 0; left: auto; } }

/* ---- Readability overlay + hero tweaks ---- */
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 420px at 50% 18%, rgba(0,0,0,0.35), transparent),
    linear-gradient(to bottom, rgba(0,0,0,0.50), rgba(0,0,0,0.50));
  pointer-events: none;
  z-index: 0;
}
.nav, .container, .page { position: relative; z-index: 1; }
.backdrop-panel { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.hero-title, .hero-sub { text-shadow: 0 2px 14px rgba(0,0,0,.75); }
.btn.primary { box-shadow: 0 8px 26px rgba(0,0,0,.35); }

.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* Gradient mask behind hero title/subtitle */
.hero-center {
  position: relative;
}
.hero-center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, transparent 100%);
  z-index: 0;
  border-radius: 18px;
}
.hero-title, .hero-sub, .hero-cta {
  position: relative;
  z-index: 1;
}

/* === Theme Toggle (Light Mode) === */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="light"] {
  --bg: #f5f7fb;
  --surface: rgba(255,255,255,0.9);
  --card: rgba(255,255,255,0.85);
  --elev: rgba(255,255,255,0.95);
  --text: #0b1220;
  --muted: #445064;
  --line: rgba(9,14,30,0.12);
}

/* Light overlay over background image */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(900px 420px at 50% 18%, rgba(255,255,255,0.55), transparent),
    linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.55));
}

/* Panels & cards in light mode */
:root[data-theme="light"] .backdrop-panel {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(9,14,30,0.12);
}
:root[data-theme="light"] .card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(9,14,30,0.12);
}

/* Buttons */
:root[data-theme="light"] .btn {
  background: var(--elev);
  color: var(--text);
  border: 1px solid var(--line);
}
:root[data-theme="light"] .btn.primary {
  color: #002433;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Nav */
:root[data-theme="light"] .nav {
  background: linear-gradient(to bottom, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(9,14,30,0.1);
}
:root[data-theme="light"] .tools-dropdown {
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(9,14,30,0.12);
}
:root[data-theme="light"] .tools-dropdown a {
  color: var(--text);
}
:root[data-theme="light"] .tools-dropdown a:hover {
  background: rgba(9,14,30,0.06);
}

/* Text shadow tuned for light */
:root[data-theme="light"] .hero-title, 
:root[data-theme="light"] .hero-sub {
  text-shadow: none;
}

/* === Pro Polish === */
:root {
  --radius: 14px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.30);
}
h1 { font-size: 42px; font-weight: 850; letter-spacing: -0.6px; }
h2 { font-size: 24px; font-weight: 800; }
h3 { font-size: 18px; font-weight: 750; }

/* Buttons */
.btn { border-radius: var(--radius); padding: 12px 16px; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease; }
.btn:focus-visible { outline: 3px solid rgba(106,209,255,.8); outline-offset: 2px; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn.primary:hover { box-shadow: var(--shadow-md); }

/* Focus states */
a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(106,209,255,.7);
  outline-offset: 2px;
}

/* Cleaner cards */
.card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: 16px; top: 12px; width: auto; height: auto; padding: 8px 12px; background: #000; color:#fff; border-radius: 10px; z-index: 1000; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Dark overlay tame */
body::before {
  background:
    radial-gradient(1200px 520px at 40% 10%, rgba(0,0,0,0.28), transparent),
    linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(0,0,0,0.38));
}

/* Light-mode background image */
:root[data-theme="light"] body {
  background: url('/assets/bg-hero-light.jpg') no-repeat center top / cover;
}

/* Light panels/cards adjustments */
:root[data-theme="light"] .backdrop-panel { background: rgba(255,255,255,0.86); }
:root[data-theme="light"] .card { background: rgba(255,255,255,0.94); }

/* Hero layout: left-aligned, tighter width */
.hero-center { text-align: left; padding: 48px 28px; }
.hero-title { max-width: 780px; }
.hero-sub { max-width: 720px; }

/* Container width tweak */
.container { max-width: 1160px; }

/* Tools dropdown fix */
.tools-dropdown { display: none; z-index: 50; }
.tools-menu.open .tools-dropdown { display: flex; }


/* Featured Hashtag card */
.card.featured { outline: 2px solid var(--accent,#19e68c); box-shadow: 0 0 0 6px rgba(25,230,140,0.12); position: relative; }
.card.featured .badge {
  position: absolute; top: 10px; left: 10px; background: var(--accent,#19e68c);
  color: #0b0f14; font-weight: 700; padding: 4px 8px; border-radius: 999px; font-size: 12px;
}

/* === HashHero Hashtag Enhancements === */
.tools-dropdown a[href$="hashtags.html"],
.tools-dropdown a:is([href$="hashtags.html"]).is-primary {
  background: var(--accent-weak, rgba(25,230,140,0.14));
  color: var(--accent, #19e68c);
  font-weight: 700;
  border-radius: 8px;
}
.hh-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px; }
.hh-tab { border:1px solid var(--border,#1e2633); padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none; }
.hh-tab.active { background: var(--accent-weak, rgba(25,230,140,0.14)); color: var(--accent,#19e68c); border-color: var(--accent,#19e68c); }

.hh-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px; }
.hh-topbar .copy-all { padding:10px 14px; border-radius:10px; border:1px solid var(--border,#1e2633); cursor:pointer; }
.hh-topbar .copy-all:hover { border-color: var(--accent,#19e68c); color: var(--accent,#19e68c); }

.hh-row { display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--border,#111a24); }
.hh-tag { font-weight:600; }
.hh-metric { font-variant-numeric: tabular-nums; opacity:0.85; }
.hh-copy { border:1px solid var(--border,#1e2633); padding:6px 10px; border-radius:8px; cursor:pointer; }
.hh-copy:hover { border-color: var(--accent,#19e68c); color: var(--accent,#19e68c); }

/* AI Assist panel */
.ai-assist { margin-top: 14px; border:1px dashed var(--border,#1e2633); border-radius:12px; padding:12px; }
.ai-assist h4 { margin: 0 0 8px; }
.ai-assist textarea { width:100%; min-height: 110px; border-radius:10px; border:1px solid var(--border,#1e2633); background: transparent; color: inherit; padding:10px; }
.ai-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.ai-actions button { border:1px solid var(--border,#1e2633); padding:8px 12px; border-radius:10px; cursor:pointer; }
.ai-actions button:hover { border-color: var(--accent,#19e68c); color: var(--accent,#19e68c); }
.ai-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.ai-row input { flex:1 1 220px; padding:8px 10px; border-radius:10px; border:1px solid var(--border,#1e2633); background: transparent; color: inherit; }

/* Shared nav active and primary states */
.tools-dropdown a.active { background: rgba(255,255,255,0.06); }
.tools-dropdown a.is-primary { background: var(--accent-weak, rgba(25,230,140,0.14)); color: var(--accent,#19e68c); font-weight:700; border-radius:8px; }


/* === Home: Hashtag-first hero === */
.primary-hero { margin-top: 16px; }
.hero-inner { display:grid; grid-template-columns: 1.1fr 1.4fr; gap:22px; align-items:flex-start; }
@media (max-width: 980px){ .hero-inner { grid-template-columns: 1fr; } }
.hero-copy .hero-title { font-size: clamp(28px, 5vw, 40px); margin: 4px 0 8px; }
.hero-copy .hero-sub { opacity: .9; margin-bottom: 12px; }
.hero-points { margin: 0; padding-left: 18px; opacity: .85; }
.hero-tool { background: rgba(255,255,255,0.03); border:1px solid var(--border,#1e2633); border-radius: 16px; padding: 14px; box-shadow: 0 6px 30px rgba(0,0,0,0.18); }
.hero .row { display:flex; gap:8px; }
.hero .row input { flex: 1; }
.hero .btn { padding: 10px 14px; border-radius: 10px; border:1px solid var(--border,#1e2633); cursor:pointer; }
.hero .btn:hover { border-color: var(--accent,#19e68c); color: var(--accent,#19e68c); }
.subdued { opacity: .8; }


/* Card links: inherit color, remove underline */
.card, .card h3, .card h3 a, .card p, .card a { color: inherit; text-decoration: none; }
.card:hover { transform: translateY(-1px); transition: transform .15s ease; }
.grid .card { display:block; border:1px solid var(--border,#1e2633); border-radius:16px; padding:16px; background: rgba(255,255,255,0.03); }
.grid .card h3 { margin: 0 0 6px; }


/* Spacing and hierarchy */
.main .primary-hero { margin-bottom: 18px; }
.main section h2 { margin-top: 24px; }


/* === Bright Vibrant Theme (fixed) === */
:root {
  --bg: #0b1020;
  --bg-2: #0e1430;
  --text: #eaf2ff;
  --muted: #b9c7e6;
  --border: #20304d;
  --accent: #22d3ee;        /* cyan */
  --accent-2: #a78bfa;      /* violet */
  --accent-3: #f59e0b;      /* amber */
  --glow: rgba(34, 211, 238, 0.35);
}

/* Page background with vibrant gradient */
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(167,139,250,.22), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
}

/* Headings & accents */
h1, h2, h3 { color: var(--text); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Cards (Add‑on Tools) */
.addons { margin-top: 18px; }
.addons-title { margin: 8px 0 14px; font-size: 22px; opacity: .95; }
.grid .card {
  display:block;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 6px 30px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.grid .card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 40px var(--glow);
}
.grid .card h3 { margin: 0 0 6px; color: #ffffff; }
.grid .card p  { color: var(--muted); }

/* Hero tweaks for bright theme */
.hero-tool { background: rgba(255,255,255,0.05); border:1px solid var(--border); }
.hero .btn { border-color: var(--border); }
.hero .btn:hover { border-color: var(--accent); color: var(--accent); }

/* Tabs & controls */
.hh-tab { border-color: var(--border); }
.hh-tab.active { background: rgba(34,211,238,.16); color: var(--accent); border-color: var(--accent); }
.hh-topbar .copy-all { border-color: var(--border); }
.hh-topbar .copy-all:hover { border-color: var(--accent); color: var(--accent); }

/* Copy buttons & rows */
.hh-row { border-bottom: 1px solid var(--border); }
.hh-copy { border-color: var(--border); }
.hh-copy:hover { border-color: var(--accent); color: var(--accent); }

/* Tools dropdown highlight */
.tools-dropdown a.active { background: rgba(255,255,255,0.10); }
.tools-dropdown a.is-primary { background: rgba(34,211,238,.20); color: var(--accent); font-weight:700; border-radius:8px; }


/* === Preview‑matched styles === */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(11,16,32,.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .2px; color: var(--text); text-decoration: none; }
.brand-badge { display:inline-block; padding:4px 8px; border-radius: 999px; font-size: 12px; background: rgba(34,211,238,.20); color: var(--accent); font-weight:700; }
.filler { margin-left: auto; }
.small { opacity:.8; font-size: 14px; }

.main { max-width: 1200px; margin: 0 auto; padding: 18px; }
.primary-hero { margin-top: 16px; }
.hero-inner { display:grid; grid-template-columns: 1.1fr 1.4fr; gap:22px; align-items:flex-start; }
@media (max-width: 980px){ .hero-inner { grid-template-columns: 1fr; } }
.hero-copy .hero-title { font-size: clamp(28px, 5vw, 40px); margin: 4px 0 8px; }
.hero-copy .hero-sub { opacity: .9; margin-bottom: 12px; }
.hero-points { margin: 0 0 10px 18px; padding: 0; opacity: .85; }
.hero-points li { margin: 4px 0; }

.hero-tool { background: rgba(255,255,255,0.05); border:1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: 0 6px 30px rgba(0,0,0,0.18); }
.tool-body .label { display:block; margin-bottom:6px; font-weight:600; color: var(--text); }
.row { display:flex; gap:8px; }
.row input { flex: 1; padding: 12px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--text); }
.btn { padding: 12px 14px; border-radius: 12px; border:1px solid var(--border); background: transparent; color: var(--text); cursor:pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent); }

.hh-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 8px; }
.hh-tab { border:1px solid var(--border); padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none; }
.hh-tab.active { background: rgba(34,211,238,.16); color: var(--accent); border-color: var(--accent); }

.ai-assist, .ai-levers { margin-top: 14px; border:1px dashed var(--border); border-radius:12px; padding:12px; background: rgba(255,255,255,0.03); }
.ai-assist h4, .ai-levers h4 { margin: 0 0 8px; }
.ai-assist textarea { width:100%; min-height: 110px; border-radius:10px; border:1px solid var(--border); background: transparent; color: inherit; padding:10px; }
.ai-row { display:flex; gap:10px; flex-wrap:wrap; margin-top: 8px; }
.ai-row input, .ai-row select { flex:1 1 220px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background: transparent; color: inherit; }
.ai-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.ai-actions .btn { padding: 10px 12px; }

.hh-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px; }
.hh-note { font-size: 12px; opacity: 0.7; margin-top: 8px; }
.copy-all { padding:10px 14px; border-radius:10px; border:1px solid var(--border); cursor:pointer; background: transparent; color: var(--text); }
.copy-all:hover { border-color: var(--accent); color: var(--accent); }

.results { border:1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hh-row { display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border); }
.hh-tag { font-weight:600; }
.hh-metric { font-variant-numeric: tabular-nums; opacity:0.85; }
.hh-copy { border:1px solid var(--border); padding:6px 10px; border-radius:8px; cursor:pointer; background: transparent; color: var(--text); }
.hh-copy:hover { border-color: var(--accent); color: var(--accent); }

.addons { margin-top: 18px; }
.addons-title { margin: 8px 0 14px; font-size: 22px; opacity: .95; }
.grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px){ .grid { grid-template-columns: 1fr; } }
.card { display:block; border:1px solid var(--border); border-radius:16px; padding:16px; background: rgba(255,255,255,0.04); box-shadow: 0 6px 30px rgba(0,0,0,0.18); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 40px rgba(34, 211, 238, 0.35); }
.card h3 { margin: 0 0 6px; color: #ffffff; }
.card p  { color: #b9c7e6; margin: 0; }
.card a { color: inherit; text-decoration: none; }

.footer { max-width: 1200px; margin: 28px auto 40px; padding: 0 18px; opacity: .7; }

/* Bright background */
body { background:
    radial-gradient(1200px 600px at 80% -10%, rgba(167,139,250,.22), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, #0b1020, #0e1430);
  color: #eaf2ff;
}
:root { --border:#20304d; --accent:#22d3ee; }