/* ═══════════════════════════════════════════════════════════════
   AI Marketplace — Main Stylesheet
   Theming: CSS custom properties → light default, [data-theme="dark"] override
   Shadows: multi-layer for premium depth
═══════════════════════════════════════════════════════════════ */


[data-theme="colorful"] {
  /* Reference-inspired: deep charcoal UI + restrained warm yellow accent.
     This is intentionally separate from the existing light and black themes. */
  --ink:          #F5F5F2;
  --ink-sec:      #C9C9C2;
  --surface:      #11110F;
  --off:          #0B0B0A;
  --border:       #2B2B27;
  --border-hover: #44443C;
  --muted:        #92928A;
  --muted-light:  #66665F;
  --accent:       #FFD21F;
  --accent-dk:    #E3B900;
  --accent-tint:  rgba(255, 210, 31, 0.12);
  --accent-tint2: #25220E;
  --accent-ring:  #5B511B;
  --like:         #34D058;
  --like-bg:      #102417;
  --like-border:  #285A35;
  --success:      #34D058;

  --header-bg:    #11110F;
  --hero-bg:      #11110F;
  --card-bg:      #191916;
  --popular-bg:   #11110F;
  --footer-bg:    #080807;
  --footer-text:  #F5F5F2;
  --modal-bg:     #191916;
  --detail-footer-bg: #11110F;
  --input-bg:     #151513;
  --input-ro-bg:  #0D0D0C;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 6px 18px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.28);
  --shadow-card: 0 6px 24px rgba(0,0,0,.40), 0 1px 5px rgba(0,0,0,.28);
  --shadow-card-hover: 0 12px 34px rgba(0,0,0,.50), 0 3px 9px rgba(0,0,0,.30);
  --shadow-lg: 0 16px 46px rgba(0,0,0,.52), 0 4px 12px rgba(0,0,0,.30);
  --shadow-modal: 0 24px 64px rgba(0,0,0,.62), 0 8px 20px rgba(0,0,0,.35);
  --shadow-header: 0 1px 0 var(--border), 0 5px 16px rgba(0,0,0,.28);
  --shadow-search: 0 10px 34px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.25);
  --shadow-toast: 0 8px 28px rgba(0,0,0,.50);
  --shadow-btn: 0 2px 5px rgba(0,0,0,.30);
  --shadow-btn-hover: 0 5px 14px rgba(0,0,0,.42);
}
/* ─── Theme Tokens ──────────────────────────────────────────── */
:root {
  --ink:          #0D0D0D;
  --ink-sec:      #3A3A3A;
  --surface:      #FFFFFF;
  --off:          #F5F5F4;
  --border:       #E4E4E4;
  --border-hover: #C8C8C8;
  --muted:        #6B6B6B;
  --muted-light:  #A0A0A0;
  --accent:       #1A56DB;
  --accent-dk:    #1340B0;
  --accent-tint:  rgba(26, 86, 219, 0.10);
  --accent-tint2: #EFF4FF;
  --accent-ring:  #C7D9FF;
  --like:         #E8401C;
  --like-bg:      #FEF2EE;
  --like-border:  #F8C9BC;
  --success:      #16A34A;

  /* Surface layers */
  --header-bg:    #FFFFFF;
  --hero-bg:      #FFFFFF;
  --card-bg:      #FFFFFF;
  --popular-bg:   #FFFFFF;
  --footer-bg:    #0D0D0D;
  --footer-text:  #FFFFFF;
  --modal-bg:     #FFFFFF;
  --detail-footer-bg: #F9F9F9;
  --input-bg:     #FFFFFF;
  --input-ro-bg:  #F5F5F4;

  /* Premium shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.08);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-modal:0 24px 64px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.10);
  --shadow-header: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-search: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-toast: 0 6px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
  --shadow-btn:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-btn-hover: 0 3px 10px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.10);

  /* Transitions */
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --ink:          #F0F0EF;
  --ink-sec:      #C8C8C8;
  --surface:      #1C1C1E;
  --off:          #111113;
  --border:       #2C2C2E;
  --border-hover: #48484A;
  --muted:        #8A8A8E;
  --muted-light:  #636366;
  --accent:       #4B7EF5;
  --accent-dk:    #3A6CE0;
  --accent-tint:  rgba(75, 126, 245, 0.14);
  --accent-tint2: #1A2640;
  --accent-ring:  #2A3D66;
  --like:         #FF6B47;
  --like-bg:      #2A1510;
  --like-border:  #5A2E22;

  --header-bg:    #1C1C1E;
  --hero-bg:      #1C1C1E;
  --card-bg:      #242426;
  --popular-bg:   #1C1C1E;
  --footer-bg:    #0A0A0A;
  --modal-bg:     #242426;
  --detail-footer-bg: #1C1C1E;
  --input-bg:     #1C1C1E;
  --input-ro-bg:  #111113;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.5), 0 1px 6px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.65), 0 3px 10px rgba(0,0,0,0.5);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.65), 0 4px 14px rgba(0,0,0,0.5);
  --shadow-modal:0 24px 64px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.6);
  --shadow-header: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-search: 0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-toast: 0 6px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5);
  --shadow-btn:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-btn-hover: 0 3px 10px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
}

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--off);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

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

/* ─── Layout ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.02em; }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-btn);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent); color: #fff;
  border: 2px solid var(--accent);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--accent-dk); border-color: var(--accent-dk);
}

.btn--outline {
  background: transparent; color: var(--ink);
  border: 2px solid var(--border); box-shadow: var(--shadow-xs);
}
.btn--outline:hover, .btn--outline:focus-visible {
  border-color: var(--border-hover);
}

.btn--ghost {
  background: transparent; color: var(--muted);
  border: 2px solid transparent; padding: 8px 14px;
  box-shadow: none;
}
.btn--ghost:hover { background: var(--off); color: var(--ink); box-shadow: none; }
.btn--ghost:hover { transform: none; }

.btn--full { width: 100%; justify-content: center; }
.btn--sm { padding: 7px 14px; font-size: 13px; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ─── Header ────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 8px; z-index: 100;
  padding: 0 10px;
  transition: background var(--transition), box-shadow var(--transition);
  pointer-events: none;
}

.header-inner {
  display: flex; align-items: center; gap: 12px; height: 48px;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: var(--shadow-header), 0 4px 24px rgba(0,0,0,0.08);
  padding: 0 16px;
  pointer-events: all;
  overflow: visible;
  transition: background var(--transition), border-color var(--transition);
  max-width: 960px;
  margin: 0 auto;
  min-width: 0;
}

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

/* Logo mark — no background, pure image/emoji */
.logo-mark {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
}
.logo-img {
  width: 32px; height: 32px; object-fit: cover; display: block;
}
.logo-emoji {
  font-size: 24px; line-height: 1;
  display: none;
}
/* Show emoji when img has no valid src */
.logo-img:not([src]), .logo-img[src=""] { display: none; }
.logo-img:not([src]) + .logo-emoji,
.logo-img[src=""] + .logo-emoji { display: inline; }

/* AI Marketplace mascot logo */
.ai-bot-logo {
  width: 32px;
  height: 32px;
  overflow: visible;
  color: var(--ink);
  border-radius: 0;
}
.ai-bot-svg {
  width: 32px;
  height: 32px;
  overflow: visible;
  display: block;
  animation: aiBotFloat 2.4s ease-in-out infinite;
}
.bot-ear-left { transform-origin: 22px 35px; animation: aiBotEarL 2.8s ease-in-out infinite; }
.bot-ear-right { transform-origin: 78px 35px; animation: aiBotEarR 2.8s ease-in-out infinite; }
.bot-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: aiBotBlink 4.2s ease-in-out infinite;
}
@keyframes aiBotFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes aiBotEarL {
  0%,88%,100% { transform: rotate(0); }
  92% { transform: rotate(-8deg); }
}
@keyframes aiBotEarR {
  0%,88%,100% { transform: rotate(0); }
  92% { transform: rotate(8deg); }
}
@keyframes aiBotBlink {
  0%,45%,48%,100% { transform: scaleY(1); }
  46%,47% { transform: scaleY(.12); }
}

.logo-text {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 16px; color: var(--ink); letter-spacing: -0.025em;
  transition: color var(--transition);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

.header-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }

.nav-link {
  padding: 6px 12px; border-radius: 6px; font-size: 14px;
  font-weight: 500; color: var(--muted);
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--ink); background: var(--off); }

/* ─── Theme Toggle ──────────────────────────────────────────── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--muted);
  background: var(--off);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--border); color: var(--ink);
  transform: rotate(15deg) scale(1.08);
  box-shadow: var(--shadow-sm);
}
.theme-toggle:active { transform: scale(0.95); }

/* Theme button cycles: Light → Dark → Colorful */
.theme-icon--sun   { display: none; }
.theme-icon--moon  { display: block; }
.theme-icon--color { display: none; }
[data-theme="dark"] .theme-icon--sun   { display: block; }
[data-theme="dark"] .theme-icon--moon  { display: none; }
[data-theme="colorful"] .theme-icon--sun,
[data-theme="colorful"] .theme-icon--moon { display: none; }
[data-theme="colorful"] .theme-icon--color { display: block; }

/* ─── Mobile nav ────────────────────────────────────────────── */
.mobile-menu-btn {
  display: none; flex-direction: column; gap: 5px;
  padding: 6px; border-radius: 6px;
  flex-shrink: 0;
  transition: background var(--transition);
}
.mobile-menu-btn:hover { background: var(--off); }
.mobile-menu-btn span {
  display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s, background var(--transition);
}
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column;
  padding: 12px 16px 16px;
  gap: 4px;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  margin: 8px 12px 0;
  max-width: 960px;
  pointer-events: all;
  transition: background var(--transition);
}
.mobile-nav .nav-link { display: block; padding: 10px 12px; border-radius: 10px; }
.mobile-nav.open { display: flex; }

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  background: var(--hero-bg);
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  transition: background var(--transition);
}

.hero-inner { max-width: 680px; }

.hero-label {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}

.hero-heading {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(36px, 5vw, 56px); color: var(--ink);
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 18px;
  transition: color var(--transition);
}

.hero-sub {
  font-size: 17px; color: var(--muted); line-height: 1.65;
  max-width: 540px; margin-bottom: 36px;
  transition: color var(--transition);
}

/* Search */
.search-wrap { position: relative; max-width: 560px; margin-bottom: 28px; }
.search-box { position: relative; display: flex; align-items: center; }

.search-icon {
  position: absolute; left: 16px; color: var(--muted);
  pointer-events: none; flex-shrink: 0;
}

.search-input {
  width: 100%; height: 52px; padding: 0 48px 0 48px;
  border: 2px solid var(--border); border-radius: 20px;
  background: var(--surface); font-size: 15px; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition);
  outline: none;
}
.search-input::placeholder { color: var(--muted-light); }
.search-input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-search), 0 0 0 4px var(--accent-tint);
}

.search-clear {
  position: absolute; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; color: var(--muted);
  transition: background var(--transition), color var(--transition);
}
.search-clear:hover { background: var(--off); color: var(--ink); }

/* Search dropdown */
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg); z-index: 200;
  overflow: hidden; max-height: 360px; overflow-y: auto;
  transition: background var(--transition);
}

.search-dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  transition: background var(--transition);
  border-bottom: 1px solid var(--off);
}
.search-dropdown-item:last-child { border-bottom: none; }
.search-dropdown-item:hover, .search-dropdown-item.focused { background: var(--off); }

.search-dropdown-img {
  width: 36px; height: 36px; border-radius: 8px;
  object-fit: cover; background: var(--off); flex-shrink: 0;
}

.search-dropdown-img-placeholder {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700;
  color: var(--muted); flex-shrink: 0;
}

.search-dropdown-info { flex: 1; min-width: 0; }
.search-dropdown-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transition);
}
.search-dropdown-meta { font-size: 12px; color: var(--muted); }

.search-dropdown-empty {
  padding: 20px 16px; text-align: center;
  font-size: 14px; color: var(--muted);
}

/* Hero pills */
.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-pill {
  display: inline-block; padding: 5px 12px;
  background: var(--off); border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition);
}

/* ─── Section base ───────────────────────────────────────────── */
.section { padding: 56px 0; }

.section-header {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 28px; flex-wrap: wrap;
}

.section-title {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 24px; color: var(--ink); letter-spacing: -0.025em;
  transition: color var(--transition);
}

.section-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.result-count { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: auto; }

/* ─── Filter Bar ─────────────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}

.filter-cats { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }

.filter-cat {
  padding: 7px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  white-space: nowrap;
}
.filter-cat:hover {
  border-color: var(--border-hover); color: var(--ink);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.filter-cat.active {
  background: var(--ink); color: var(--surface);
  border-color: var(--ink); box-shadow: var(--shadow-sm);
}

.filter-right { flex-shrink: 0; }

.sort-select {
  appearance: none; -webkit-appearance: none;
  padding: 7px 32px 7px 14px; border: 1.5px solid var(--border);
  border-radius: 8px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-xs);
  cursor: pointer; outline: none;
  transition: border-color var(--transition), background-color var(--transition),
              color var(--transition);
}
.sort-select:focus { border-color: var(--accent); }

/* Subcategory pills */
.subcats-bar { margin-bottom: 16px; }
.subcats-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.subcat-pill {
  padding: 5px 14px; border-radius: 100px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  cursor: pointer; white-space: nowrap;
}
.subcat-pill:hover {
  border-color: var(--accent); color: var(--accent);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.subcat-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Active filter indicator */
.active-filter-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding: 8px 14px;
  background: var(--accent-tint2); border-radius: 8px;
  border: 1.5px solid var(--accent-ring);
  box-shadow: var(--shadow-xs);
}
.active-filter-label { font-size: 13px; font-weight: 600; color: var(--accent); flex: 1; }
.clear-filter-btn {
  font-size: 12px; font-weight: 600; color: var(--accent);
  padding: 2px 8px; border-radius: 4px;
  transition: background var(--transition);
}
.clear-filter-btn:hover { background: var(--accent-ring); }

/* ─── Tools Grid ─────────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* ─── Service Card ───────────────────────────────────────────── */
.service-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition), background var(--transition);
}
.service-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.card-header { display: flex; align-items: flex-start; gap: 14px; }

.card-logo {
  width: 52px; height: 52px; border-radius: 12px;
  object-fit: cover; background: var(--off);
  flex-shrink: 0; border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.card-logo-placeholder {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--off); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 18px; color: var(--muted); flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.card-title-block { flex: 1; min-width: 0; }

.card-name {
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em;
  transition: color var(--transition);
}

.card-tags { display: flex; gap: 5px; flex-wrap: wrap; }

.card-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; background: var(--off);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
  transition: background var(--transition), color var(--transition);
}
.card-tag--cat { background: var(--accent-tint2); color: var(--accent); }

/* Pricing badge */
.pricing-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 100px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; flex-shrink: 0;
}
.pricing-badge--free    { background: #d1fae5; color: #065f46; }
.pricing-badge--paid    { background: #fee2e2; color: #991b1b; }
.pricing-badge--freemium{ background: #fef3c7; color: #92400e; }
.pricing-badge--mostly-free { background: #e0f2fe; color: #075985; }
[data-theme="dark"] .pricing-badge--free     { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .pricing-badge--paid     { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .pricing-badge--freemium { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .pricing-badge--mostly-free { background: #0c4a6e; color: #7dd3fc; }

.card-desc {
  font-size: 13px; color: var(--muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--transition);
}

.card-usecases { display: flex; gap: 5px; flex-wrap: wrap; }

.card-usecase {
  display: inline-block; padding: 3px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 500; background: var(--off);
  color: var(--muted); border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.card-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Like button */
.like-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--off); border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  flex-shrink: 0;
}
.like-btn:hover {
  background: var(--like-bg); color: var(--like);
  border-color: var(--like-border); transform: scale(1.04);
  box-shadow: var(--shadow-sm);
}
.like-btn.liked { background: var(--like-bg); color: var(--like); border-color: var(--like-border); }
.like-btn svg { transition: transform 0.15s; }
.like-btn:hover svg, .like-btn.liked svg { transform: scale(1.2); }
.like-btn .like-count { font-variant-numeric: tabular-nums; }

/* Dislike button */
.dislike-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--off); border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  flex-shrink: 0;
}
.dislike-btn:hover {
  background: #fee2e2; color: #991b1b; border-color: #fca5a5;
  transform: scale(1.04); box-shadow: var(--shadow-sm);
}
.dislike-btn.disliked { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.dislike-btn svg { transition: transform 0.15s; }
.dislike-btn:hover svg, .dislike-btn.disliked svg { transform: scale(1.2); }
.dislike-btn .dislike-count { font-variant-numeric: tabular-nums; }
[data-theme="dark"] .dislike-btn:hover,
[data-theme="dark"] .dislike-btn.disliked {
  background: #7f1d1d; color: #fca5a5; border-color: #991b1b;
}

.card-actions {
  display: flex; gap: 6px;
  width: 100%;
}

/* Keep tool action buttons consistent with the mobile card layout on desktop too. */
.card-actions .card-view-btn,
.card-actions .card-help-btn {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
}

.card-view-btn {
  padding: 7px 14px; border-radius: 8px; font-size: 13px;
  font-weight: 600; color: var(--ink); background: var(--off);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card-view-btn:hover {
  background: var(--border); border-color: var(--border-hover);
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}

.card-help-btn {
  padding: 7px 14px; border-radius: 8px; font-size: 13px;
  font-weight: 600; color: #fff; background: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: var(--shadow-btn);
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card-help-btn:hover {
  background: var(--accent-dk); border-color: var(--accent-dk);
  box-shadow: var(--shadow-btn-hover); transform: translateY(-1px);
}

/* ─── Skeleton Loader ────────────────────────────────────────── */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

.skeleton-card {
  height: 220px; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.skeleton-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton-card::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%);
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─── Empty State ────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 64px 20px; gap: 14px;
}
.empty-icon { color: var(--border); }
.empty-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.empty-text { font-size: 14px; color: var(--muted); }

/* ─── Popular Section ────────────────────────────────────────── */
.section--popular {
  background: var(--popular-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.popular-list {
  display: flex; flex-direction: column; gap: 1px;
  border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-md);
}

.popular-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; background: var(--card-bg);
  transition: background var(--transition); cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.popular-item:last-child { border-bottom: none; }
.popular-item:hover { background: var(--off); }

.popular-rank {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 20px; color: var(--border); width: 32px;
  flex-shrink: 0; letter-spacing: -0.04em;
}
.popular-rank-1 { color: #F59E0B; }
.popular-rank-2 { color: #9CA3AF; }
.popular-rank-3 { color: #B45309; }

.popular-logo {
  width: 40px; height: 40px; border-radius: 10px;
  object-fit: cover; background: var(--off);
  border: 1.5px solid var(--border); flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.popular-logo-placeholder {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--off); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--muted); flex-shrink: 0;
}

.popular-info { flex: 1; min-width: 0; }
.popular-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transition);
}
.popular-cat { font-size: 12px; color: var(--muted); }

.popular-likes {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--like); flex-shrink: 0;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
  padding: 32px 0; background: var(--footer-bg);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.04);
  transition: background var(--transition);
}

.footer-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.footer-brand {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 16px; color: var(--footer-text); letter-spacing: -0.03em;
}

.footer-copy { font-size: 13px; color: #6B6B6B; flex: 1; }

.footer-admin-link {
  font-size: 12px; color: #6B6B6B; font-weight: 500;
  padding: 4px 10px; border-radius: 6px; border: 1px solid #2A2A2A;
  transition: color var(--transition), border-color var(--transition);
}
.footer-admin-link:hover { color: var(--footer-text); border-color: #6B6B6B; }

/* ─── Modals ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(13,13,13,0.65);
  z-index: 500; display: flex; align-items: center;
  justify-content: center; padding: 20px;
  animation: overlay-in 0.2s ease;
  backdrop-filter: blur(2px);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--modal-bg); border-radius: 16px; width: 100%;
  max-height: 90vh; overflow-y: auto; position: relative;
  animation: modal-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--border);
  transition: background var(--transition);
}
@keyframes modal-in {
  from { transform: scale(0.94) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal--detail { max-width: 640px; }
.modal--form { max-width: 480px; padding: 32px; }

.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--off);
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition), transform var(--transition);
  z-index: 10;
}
.modal-close:hover {
  background: var(--border); color: var(--ink);
  box-shadow: var(--shadow-sm); transform: scale(1.08);
}

/* Detail modal content */
.detail-hero {
  padding: 28px 28px 0;
  display: flex; align-items: flex-start; gap: 18px;
}

.detail-logo {
  width: 72px; height: 72px; border-radius: 16px;
  object-fit: cover; border: 1.5px solid var(--border);
  flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.detail-logo-placeholder {
  width: 72px; height: 72px; border-radius: 16px;
  background: var(--off); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 24px; color: var(--muted); flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.detail-title {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 22px; color: var(--ink); letter-spacing: -0.025em;
  margin-bottom: 6px;
  transition: color var(--transition);
}
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.detail-section {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}
.detail-section:last-of-type { border-bottom: none; }

.detail-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-light); margin-bottom: 8px;
}

.detail-text { font-size: 14px; color: var(--ink-sec); line-height: 1.65; }

.detail-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.detail-pill {
  padding: 4px 12px; border-radius: 100px;
  font-size: 12px; font-weight: 500; background: var(--off);
  color: var(--muted); border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition);
}

.detail-footer {
  padding: 20px 28px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--detail-footer-bg); border-top: 1px solid var(--border);
  border-radius: 0 0 16px 16px;
  transition: background var(--transition);
}

.detail-visit-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 8px; font-size: 14px;
  font-weight: 600; color: var(--surface); background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-btn);
  transition: background var(--transition), box-shadow var(--transition),
              transform var(--transition), border-color var(--transition);
}
.detail-visit-btn:hover {
  background: var(--ink-sec); border-color: var(--ink-sec);
  box-shadow: var(--shadow-btn-hover); transform: translateY(-1px);
}

/* ─── Form styles ────────────────────────────────────────────── */
.modal-title {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 20px; color: var(--ink); letter-spacing: -0.025em;
  margin-bottom: 6px; padding-right: 36px;
  transition: color var(--transition);
}
.modal-subtitle { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.55; }

.form-group { margin-bottom: 16px; }

.form-group--row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 16px;
}
.form-group--row .form-group { margin-bottom: 0; }

.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-label span { color: var(--like); }

.form-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 14px; color: var(--ink); background: var(--input-bg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition);
  outline: none;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.form-input[readonly] { background: var(--input-ro-bg); color: var(--muted); cursor: default; }

.form-textarea { resize: vertical; min-height: 100px; }

.form-error { display: block; font-size: 12px; color: var(--like); margin-top: 4px; min-height: 16px; }

/* ─── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: #111111; color: #ffffff;
  padding: 8px 14px; border-radius: 10px;
  font-size: 12px; line-height: 1.25; font-weight: 600; z-index: 4000;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
  opacity: 0; white-space: nowrap;
  max-width: min(88vw, 320px); overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border: 1px solid #333333;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast--success, .toast--error { background: #111111; color: #ffffff; border-color: #333333; }
@media (prefers-color-scheme: light) {
  .toast { background: #111111; color: #ffffff; }
}


/* ─── Utilities ──────────────────────────────────────────────── */
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .tools-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 640px) {
  .header-nav { display: none; }
  .mobile-menu-btn { display: flex; }

  .hero { padding: 48px 0 40px; }
  .hero-heading { font-size: 32px; }
  .hero-sub { font-size: 15px; }
  .search-input { height: 48px; font-size: 14px; }

  .section { padding: 40px 0; }
  .tools-grid { grid-template-columns: 1fr; }
  .skeleton-grid { grid-template-columns: 1fr; }

  .filter-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .filter-right { width: 100%; }
  .sort-select { width: 100%; }

  .card-footer { flex-wrap: wrap; }
  .card-actions { width: 100%; }
  .card-help-btn, .card-view-btn { flex: 1; justify-content: center; }

  .modal--form { padding: 24px 20px; }
  .form-group--row { grid-template-columns: 1fr; }

  .detail-hero { flex-direction: column; }
  .detail-footer { flex-direction: row; align-items: center; }
  .detail-footer .detail-visit-btn,
  .detail-footer .wishlist-btn,
  .detail-footer .btn { width: 100%; justify-content: center; }
  .detail-footer .like-btn,
  .detail-footer .dislike-btn { width: auto; min-width: 0; flex: 1 1 0; justify-content: center; }

  .popular-item { padding: 14px 16px; }
  .footer-inner { gap: 10px; }
  .footer-copy { order: 3; flex-basis: 100%; }
  
  .auth-area { margin-left: auto; margin-right: 2px; }
  .theme-toggle { margin-left: 0; }
}

@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero-heading { font-size: 28px; }
}


/* CRO: clarify the primary discovery path without changing existing functionality. */
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:-12px 0 10px}
.hero-actions .btn{min-height:40px}
.hero-friction-note{margin:0 0 18px;font-size:12px;line-height:1.55;color:var(--muted);max-width:560px}
.section-cta{display:flex;justify-content:center;margin-top:22px}
@media (max-width:560px){
  .hero-actions{margin-top:-6px}
  .hero-actions .btn{flex:1 1 160px;justify-content:center}
  .hero-friction-note{font-size:11.5px}
}

/* ═══════════════════════════════════════════════════════════════
   AUTH AREA — Header button + user avatar chip
═══════════════════════════════════════════════════════════════ */
.auth-area {
  display: flex;
  align-items: center;
  margin-right: 4px;
  flex-shrink: 0;
}

.btn--auth {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn--auth:hover {
  background: var(--accent);
  color: #fff;
}

/* User chip (avatar + dropdown) */
/* Prevent a logged-in user from seeing the Sign In button while Firebase restores auth state.
   The auth area is revealed only after onAuthStateChanged resolves. */
.auth-area.auth-loading {
  visibility: hidden;
}
.auth-area.auth-ready {
  visibility: visible;
}

.user-chip { position: relative; }

.user-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.15s;
}
.user-avatar-btn:hover { opacity: 0.85; }

.user-avatar-inner {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  pointer-events: none;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
  padding: 12px 0 8px;
}
[data-theme="dark"] .user-dropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.user-dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 14px 2px;
}
.user-dropdown-email {
  font-size: 12px;
  color: var(--ink);
  padding: 0 14px 8px;
  word-break: break-all;
}
.user-dropdown-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.user-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  font-family: inherit;
  transition: background 0.12s;
}
.user-dropdown-item:hover {
  background: var(--bg);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   AUTH MODAL
═══════════════════════════════════════════════════════════════ */
.modal--auth {
  max-width: 420px;
  padding: 32px 32px 28px;
  position: relative;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  border: none;
  background: none;
  border-radius: 7px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.auth-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.auth-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.auth-error {
  font-size: 13px;
  color: #e53e3e;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
[data-theme="dark"] .auth-error {
  background: rgba(229,62,62,0.12);
  border-color: rgba(229,62,62,0.3);
  color: #fc8181;
}

/* ═══════════════════════════════════════════════════════════════
   WISHLIST BUTTON
═══════════════════════════════════════════════════════════════ */
.wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.wishlist-btn:hover {
  border-color: #8B5CF6;
  color: #8B5CF6;
}
.wishlist-btn.wishlisted {
  border-color: #8B5CF6;
  color: #8B5CF6;
}
.wishlist-btn.wishlisted svg {
  fill: #8B5CF6;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--off);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}
.share-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════════════════════════ */
.detail-reviews {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
}

.reviews-loading,
.reviews-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0;
}

.review-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.review-item:last-child { border-bottom: none; }

.review-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.review-stars {
  color: #F59E0B;
  font-size: 14px;
  letter-spacing: -1px;
}
.review-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.review-date {
  font-size: 11px;
  color: var(--text-muted);
}
.review-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Review form */
.review-form { margin-top: 16px; }

.review-form-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-login-prompt {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}

.review-stars-row {
  display: flex;
  gap: 4px;
}
.star-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #D1D5DB;
  padding: 0;
  line-height: 1;
  transition: color 0.1s, transform 0.1s;
}
.star-btn:hover,
.star-btn.hover { color: #F59E0B; transform: scale(1.15); }
.star-btn.active { color: #F59E0B; }

.review-textarea {
  min-height: 80px;
  resize: vertical;
  font-size: 13px;
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
  .modal--auth { padding: 24px 20px; }
  .user-dropdown { min-width: 180px; }
}


/* ═══════════════════════════ POPUP BANNERS ═══════════════════════════ */
html.popup-scroll-lock,
body.popup-scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

.popup-banners-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(13, 13, 13, 0.58);
  overscroll-behavior: none;
  touch-action: none;
}
.popup-banners-overlay[hidden] { display: none !important; }

.popup-banners-grid {
  width: min(820px, 94vw);
  max-height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clean premium shell: the image block and close control stay visually separate. */
.popup-banner-card {
  width: min(820px, 94vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.popup-banner-text {
  width: 100%;
  flex: 0 0 auto;
  padding: 0 12px 12px;
  text-align: center;
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
  overflow-wrap: anywhere;
}

.popup-banner-cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  max-width: 90%;
  min-height: 38px;
  margin: 0 0 10px;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ad-cta-bg, #111111);
  color: var(--ad-cta-color, #ffffff);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  transition: transform .18s ease, filter .18s ease;
  box-sizing: border-box;
}
.popup-banner-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
.popup-banner-cta:active { transform: translateY(0); }

.popup-banner-image-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  box-shadow: 0 18px 48px rgba(0,0,0,.30);
}

.popup-banner-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(94vh - 92px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Separate close control — never overlays or touches the image itself. */
.popup-banner-close {
  position: static !important;
  flex: 0 0 auto;
  margin-top: 12px !important;
  width: auto !important;
  min-width: 92px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  background: rgba(20,20,20,.94) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
  cursor: pointer !important;
  z-index: 1 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.popup-banner-close:hover { background: rgba(35,35,35,.98) !important; }
.popup-banner-close:active { transform: translateY(1px); }
.popup-banner-close:focus-visible {
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .popup-banners-overlay { padding: 8px; }
  .popup-banners-grid { width: 96vw; max-height: 95vh; }
  .popup-banner-card {
    width: 96vw;
    max-height: 95vh;
  }
  .popup-banner-text {
    padding: 0 8px 10px;
    font-size: 16px;
  }
  .popup-banner-image-wrap {
    border-radius: 11px;
  }
  .popup-banner-card img {
    max-width: 100%;
    max-height: calc(95vh - 92px);
  }
  .popup-banner-close {
    margin-top: 10px !important;
    min-height: 38px !important;
  }
}

/* Reference-inspired theme: charcoal + warm yellow, kept restrained and premium. */
[data-theme="colorful"] .site-header { border-bottom-color: #2B2B27; }
[data-theme="colorful"] .section-title,
[data-theme="colorful"] .hero-title { letter-spacing: -0.03em; }
[data-theme="colorful"] .theme-toggle {
  color: #FFD21F;
  border-color: #4B451B;
  background: #171713;
}
[data-theme="colorful"] .theme-toggle:hover {
  background: #25220E;
  border-color: #6A5E1D;
}
[data-theme="colorful"] .card-tag--cat {
  background: #25220E;
  border-color: #514A18;
  color: #FFD21F;
}
[data-theme="colorful"] .like-btn.liked {
  background: #102417;
  color: #55E26F;
  border-color: #2B6540;
}
[data-theme="colorful"] .dislike-btn.disliked {
  background: #2A1111;
  color: #FF6B6B;
  border-color: #6A2A2A;
}
[data-theme="colorful"] .primary-btn,
[data-theme="colorful"] .btn-primary {
  background: #FFD21F;
  color: #11110F;
  border-color: #FFD21F;
}
[data-theme="colorful"] .primary-btn:hover,
[data-theme="colorful"] .btn-primary:hover {
  background: #FFE05A;
  color: #11110F;
}

/* Reference theme button contrast: yellow actions use near-black text. */
[data-theme="colorful"] .btn--primary {
  color: #11110F;
  background: #FFD21F;
  border-color: #FFD21F;
}
[data-theme="colorful"] .btn--primary:hover,
[data-theme="colorful"] .btn--primary:focus-visible {
  color: #11110F;
  background: #FFE05A;
  border-color: #FFE05A;
}
[data-theme="colorful"] .btn--auth:hover {
  color: #11110F;
}


/* ═══════════════════════════════════════════════════════════════
   YELLOW THEME — HIGH-CONTRAST BLACK + YELLOW
   Intentionally stronger than the previous restrained version.
   Like/dislike colors remain untouched.
═══════════════════════════════════════════════════════════════ */
[data-theme="colorful"] {
  --ink: #F7F7F2;
  --ink-sec: #D6D6CA;
  --surface: #0B0B09;
  --off: #12120F;
  --border: #3A391F;
  --border-hover: #706B24;
  --muted: #A6A697;
  --muted-light: #747568;
  --accent: #FFD400;
  --accent-dk: #E4B900;
  --accent-tint: rgba(255, 212, 0, .16);
  --accent-tint2: #2B2708;
  --accent-ring: #6E6214;
  --header-bg: #080806;
  --hero-bg: #0B0B09;
  --card-bg: #15150F;
  --popular-bg: #0B0B09;
  --footer-bg: #050504;
  --modal-bg: #15150F;
  --detail-footer-bg: #0B0B09;
  --input-bg: #11110D;
  --input-ro-bg: #090907;
}

/* Make the yellow identity visible across the main UI. */
[data-theme="colorful"] body {
  background: #0B0B09;
}
[data-theme="colorful"] .site-header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
[data-theme="colorful"] .header-inner {
  background: #0B0B09;
  border-color: #3A391F;
  box-shadow: 0 4px 24px rgba(0,0,0,.38);
}
[data-theme="colorful"] .logo-mark,
[data-theme="colorful"] .logo-text,
[data-theme="colorful"] .nav-link,
[data-theme="colorful"] .section-title,
[data-theme="colorful"] .hero-title {
  color: #FFD400;
}
[data-theme="colorful"] .hero-title {
  text-shadow: 0 0 28px rgba(255,212,0,.12);
}
[data-theme="colorful"] .hero-subtitle,
[data-theme="colorful"] .section-subtitle,
[data-theme="colorful"] .card-desc {
  color: #BDBDAF;
}
[data-theme="colorful"] .search-wrap,
[data-theme="colorful"] .search-box,
[data-theme="colorful"] .service-card,
[data-theme="colorful"] .category-pill,
[data-theme="colorful"] .subcat-pill,
[data-theme="colorful"] .filter-select {
  border-color: #4B4717;
}
[data-theme="colorful"] .search-wrap:focus-within,
[data-theme="colorful"] .search-box:focus-within {
  border-color: #FFD400;
  box-shadow: 0 0 0 3px rgba(255,212,0,.12), 0 10px 30px rgba(0,0,0,.42);
}
[data-theme="colorful"] .service-card:hover {
  border-color: #FFD400;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,212,0,.18);
}
[data-theme="colorful"] .category-pill.active,
[data-theme="colorful"] .subcat-pill.active,
[data-theme="colorful"] .primary-btn,
[data-theme="colorful"] .btn-primary,
[data-theme="colorful"] .btn--primary {
  background: #FFD400;
  border-color: #FFD400;
  color: #0B0B09;
}
[data-theme="colorful"] .category-pill.active:hover,
[data-theme="colorful"] .subcat-pill.active:hover,
[data-theme="colorful"] .primary-btn:hover,
[data-theme="colorful"] .btn-primary:hover,
[data-theme="colorful"] .btn--primary:hover {
  background: #FFE45C;
  border-color: #FFE45C;
  color: #0B0B09;
}
[data-theme="colorful"] .card-tag--cat {
  background: #302B08;
  border-color: #746818;
  color: #FFD400;
}
[data-theme="colorful"] .theme-toggle {
  color: #FFD400;
  border-color: #665D18;
  background: #16160E;
}
[data-theme="colorful"] .theme-toggle:hover {
  background: #2A2608;
  border-color: #FFD400;
}
[data-theme="colorful"] .site-footer {
  border-top: 2px solid #FFD400;
}
[data-theme="colorful"] .section-title::after {
  background: #FFD400;
}


/* ─── Consistent semantic reaction colors ───────────────────── */
.like-btn,
.like-btn:hover,
.like-btn.liked {
  color: #16A34A;
  border-color: #22C55E;
}
.like-btn.liked { background: rgba(34,197,94,.10); }
.dislike-btn,
.dislike-btn:hover,
.dislike-btn.disliked {
  color: #DC2626;
  border-color: #EF4444;
}
.dislike-btn.disliked { background: rgba(239,68,68,.10); }

/* ─── Category / subcategory / plan metadata: outline only ─── */
.card-tag,
.card-tag--cat,
.pricing-badge,
[data-theme="colorful"] .card-tag,
[data-theme="colorful"] .card-tag--cat {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: none;
}
.pricing-badge { border-radius: 6px; }

/* ─── Theme-aware user avatar ───────────────────────────────── */
.user-avatar-btn {
  background: #0D0D0D;
  border-color: #0D0D0D;
}
.user-avatar-inner { color: #fff; }
[data-theme="dark"] .user-avatar-btn {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
[data-theme="colorful"] .user-avatar-btn {
  background: #FFD400;
  border-color: #FFD400;
}
[data-theme="dark"] .user-avatar-inner,
[data-theme="colorful"] .user-avatar-inner {
  color: #fff;
}

/* ─── User dashboard ────────────────────────────────────────── */
.user-dashboard[hidden] { display: none; }
.user-dashboard {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
}
.user-dashboard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(5px);
}
.user-dashboard-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  padding: 30px 26px 24px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.user-dashboard-close {
  position: absolute;
  top: 10px;
  right: 13px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 25px;
}
.user-dashboard-close:hover { background: var(--off); color: var(--ink); }
.dashboard-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0D0D0D;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
}
[data-theme="dark"] .dashboard-avatar {
  background: #fff;
  color: #fff;
}
[data-theme="colorful"] .dashboard-avatar {
  background: #FFD400;
  color: #fff;
}
.user-dashboard-card h2 {
  font-size: 20px;
  margin-bottom: 8px;
}
.dashboard-user-name {
  font-size: 17px;
  font-weight: 700;
}
.dashboard-user-email {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  word-break: break-all;
}
.dashboard-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0;
}
.dashboard-stats > div {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--off);
}
.dashboard-stats strong,
.dashboard-stats span { display: block; }
.dashboard-stats strong { font-size: 19px; }
.dashboard-stats span { color: var(--muted); font-size: 11px; margin-top: 2px; }
.dashboard-signout { width: 100%; justify-content: center; }
body.dashboard-open { overflow: hidden; }


/* ─── Floating navbar / page background alignment ───────────── */
.site-header { background: transparent; border-bottom: 0; box-shadow: none; }
.header-inner { background: var(--off); }
[data-theme="dark"] .header-inner { background: var(--off); }
[data-theme="colorful"] .header-inner { background: #0B0B09; }

/* ─── Admin-managed metadata tag colors ─────────────────────── */
:root {
  --meta-category-color: #2563EB;
  --meta-category-border: #2563EB;
  --meta-subcategory-color: #4B5563;
  --meta-subcategory-border: #6B7280;
  --meta-free-color: #16A34A;
  --meta-free-border: #22C55E;
  --meta-freemium-color: #CA8A04;
  --meta-freemium-border: #EAB308;
  --meta-mostlyfree-color: #0284C7;
  --meta-mostlyfree-border: #0EA5E9;
  --meta-paid-color: #DC2626;
  --meta-paid-border: #EF4444;
}
[data-theme="dark"] {
  --meta-category-color: #60A5FA;
  --meta-category-border: #60A5FA;
  --meta-subcategory-color: #D1D5DB;
  --meta-subcategory-border: #9CA3AF;
  --meta-free-color: #4ADE80;
  --meta-free-border: #4ADE80;
  --meta-freemium-color: #FACC15;
  --meta-freemium-border: #FACC15;
  --meta-mostlyfree-color: #38BDF8;
  --meta-mostlyfree-border: #38BDF8;
  --meta-paid-color: #F87171;
  --meta-paid-border: #F87171;
}
[data-theme="colorful"] {
  --meta-category-color: #FFD400;
  --meta-category-border: #FFD400;
  --meta-subcategory-color: #FFD400;
  --meta-subcategory-border: #FFD400;
  --meta-free-color: #55E26F;
  --meta-free-border: #55E26F;
  --meta-freemium-color: #FFD400;
  --meta-freemium-border: #FFD400;
  --meta-mostlyfree-color: #38BDF8;
  --meta-mostlyfree-border: #38BDF8;
  --meta-paid-color: #FF6B6B;
  --meta-paid-border: #FF6B6B;
}

/* Admin can override these variables globally from Settings. */
.card-tag,
.card-tag--cat,
.pricing-badge {
  background: transparent !important;
  box-shadow: none !important;
}
.card-tag--cat {
  color: var(--meta-category-color) !important;
  border-color: var(--meta-category-border) !important;
}
.card-tag:not(.card-tag--cat) {
  color: var(--meta-subcategory-color) !important;
  border-color: var(--meta-subcategory-border) !important;
}
.pricing-badge--free {
  color: var(--meta-free-color) !important;
  border-color: var(--meta-free-border) !important;
}
.pricing-badge--freemium {
  color: var(--meta-freemium-color) !important;
  border-color: var(--meta-freemium-border) !important;
}
.pricing-badge--mostly-free {
  color: var(--meta-mostlyfree-color) !important;
  border-color: var(--meta-mostlyfree-border) !important;
}
.pricing-badge--paid {
  color: var(--meta-paid-color) !important;
  border-color: var(--meta-paid-border) !important;
}

/* Avatar contrast: background + initial must never have the same color. */
.user-avatar-btn { background: #0D0D0D; border-color: #0D0D0D; }
.user-avatar-inner { color: #fff !important; }
[data-theme="dark"] .user-avatar-btn {
  background: #fff;
  border-color: #fff;
}
[data-theme="dark"] .user-avatar-inner {
  color: #0D0D0D !important;
}
[data-theme="colorful"] .user-avatar-btn {
  background: #FFD400;
  border-color: #FFD400;
}
[data-theme="colorful"] .user-avatar-inner {
  color: #0B0B09 !important;
}
.dashboard-avatar { background: #0D0D0D; color: #fff; }
[data-theme="dark"] .dashboard-avatar { background: #fff; color: #0D0D0D; }
[data-theme="colorful"] .dashboard-avatar { background: #FFD400; color: #0B0B09; }


/* ─── Mobile hero/header visual alignment ──────────────────────
   Let the first content block extend behind the floating navbar so
   the background behind the pill matches the hero surface. */
@media (max-width: 640px) {
  .site-header {
    margin-bottom: -48px;
  }

  .hero {
    padding-top: 96px;
  }
}

/* ── Admin-controlled ads ── */
.ad-slot{width:100%;margin:18px 0 26px}
.market-ad{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;min-height:0;padding:6px;border:1px solid var(--border);border-radius:14px;background:var(--surface,#fff);box-shadow:0 6px 20px rgba(0,0,0,.05);overflow:hidden;box-sizing:border-box}
.market-ad-media{display:block;width:100%;min-width:0}
.market-ad-media img{display:block;width:100%;height:110px;object-fit:cover;border-radius:9px}
.market-ad-badge{position:absolute;top:10px;left:12px;z-index:2;font-size:9px;line-height:1;padding:4px 5px;border-radius:4px;background:rgba(0,0,0,.62);color:#fff;letter-spacing:.06em}
.market-ad-close{position:absolute;right:10px;top:10px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:20px;padding:0;cursor:pointer;z-index:3}
.market-ad-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;margin-top:6px;padding:8px 14px;border-radius:9px;background:var(--ad-cta-bg,#111);color:var(--ad-cta-color,#fff);text-decoration:none;font-size:13px;font-weight:700;line-height:1.2;text-align:center;box-sizing:border-box;transition:transform .18s ease,filter .18s ease}
.market-ad-cta:hover{filter:brightness(.94);transform:translateY(-1px)}
#tools-grid .market-ad{grid-column:1/-1;margin:4px 0}
#tools-grid .market-ad-media img{height:96px}
[data-theme="dark"] .market-ad{background:var(--surface,#111);box-shadow:none}
@media(max-width:600px){.market-ad-media img{height:82px}.market-ad-cta{min-height:36px;font-size:12px;padding:7px 12px}.ad-slot--main-top{padding:0 8px}}

/* Ads: admin-controlled ratio + independent close control */
.market-ad-media img{height:110px;aspect-ratio:var(--ad-ratio,auto);object-fit:cover}
#tools-grid .market-ad-media img{height:auto;min-height:96px;max-height:260px}
.market-ad{align-items:stretch}
.market-ad-media{width:100%}
.ad-slot--main-top{margin:10px auto 18px;max-width:1200px;padding:0 10px}
.market-ad-close{display:inline-flex;align-items:center;justify-content:center}
.ad-slot--main-top{margin:10px auto 18px;max-width:1200px;padding:0 20px}
.popup-banner-image-wrap{aspect-ratio:var(--ad-ratio,auto)}
.popup-banner-image-wrap .popup-banner-link{display:block;width:100%;height:100%}
.popup-banner-image-wrap .popup-banner-link img{width:100%;height:100%;max-width:100%;max-height:calc(94vh - 92px);object-fit:contain}


/* Additional admin-controlled ad placements */
.ad-slot--nav-bottom{width:100%;max-width:100%;margin:0 0 18px;padding:0;box-sizing:border-box;position:relative;z-index:1}
.adsense-slot{width:100%;margin:0 0 18px;min-height:0;box-sizing:border-box;position:relative;z-index:1}.adsense-slot--main-top{max-width:1200px;margin:10px auto 18px;padding:0 10px}
.adsense-slot.is-visible{min-height:90px}
.adsense-slot .adsbygoogle{display:block;width:100%;min-height:90px}
.hero-inner{position:relative}
.hero-copy{min-width:0}
.ad-slot--hero-side{width:55%;align-self:center;flex:0 0 55%;box-sizing:border-box;min-width:0}
.hero-inner:has(.ad-slot--hero-side:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,55%);gap:24px;align-items:center}
.hero-inner:has(.ad-slot--hero-side:not([hidden])) .hero-copy{min-width:0;min-width:0}
.hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-media{width:100%;min-width:0}
.hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-media img{width:100%;height:auto;max-height:min(72vh,720px);object-fit:contain}
.popup-banner-card{position:relative}
.popup-banner-badge{position:absolute;top:-10px;left:12px;z-index:5;font-size:9px;line-height:1;padding:4px 5px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;letter-spacing:.06em;box-shadow:0 3px 10px rgba(0,0,0,.2)}
@media(max-width:800px){.hero-inner:has(.ad-slot--hero-side:not([hidden])){display:flex;flex-direction:column;align-items:stretch;gap:12px}.ad-slot--hero-side{width:100%;flex:auto;margin:0!important}.ad-slot--hero-side .market-ad-media img{width:100%;height:auto!important;max-height:none!important;object-fit:contain}}
.market-ad--transparent-png{background:transparent!important;box-shadow:none!important;padding:0!important;border-color:transparent!important;border-width:0!important;overflow:visible!important}
.ad-slot--hero-side .market-ad--transparent-png .market-ad-media{background:transparent!important}
.ad-slot--hero-side .market-ad--transparent-png .market-ad-media img{height:auto!important;max-height:min(72vh,720px)!important;min-height:0!important;width:100%!important;max-width:100%!important;object-fit:contain!important;border-radius:0!important;background:transparent!important;filter:drop-shadow(0 12px 18px rgba(0,0,0,.20)) drop-shadow(0 3px 7px rgba(0,0,0,.12));}
.mobile-hero-side-ad-slot .market-ad--transparent-png .market-ad-media img{height:auto!important;max-height:none!important;min-height:0!important;width:100%!important;max-width:100%!important;object-fit:contain!important;border-radius:0!important;background:transparent!important;filter:drop-shadow(0 10px 16px rgba(0,0,0,.20)) drop-shadow(0 2px 6px rgba(0,0,0,.12));}
.ad-slot--hero-side .market-ad--transparent-png .market-ad-badge{display:none}
.ad-slot--hero-side .market-ad--transparent-png .market-ad-cta{margin-top:8px}


/* ── Final ad controls ── */
.market-ad{border-style:solid;border-color:var(--ad-outline-color,var(--border));border-width:var(--ad-outline-width,1px)}
.market-ad--no-outline{border-width:0!important}
.ad-slot--hero-bg{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0;pointer-events:none;overflow:hidden}
.ad-slot--hero-bg .market-ad{height:100%;min-height:100%;border-radius:0;box-shadow:none;opacity:.16;background:transparent;pointer-events:auto}
.ad-slot--hero-bg .market-ad-media{height:100%}
.ad-slot--hero-bg .market-ad-media img{height:100%!important;max-height:none!important;min-height:100%;object-fit:cover;border-radius:0}
.ad-slot--hero-bg .market-ad-cta,.ad-slot--hero-bg .market-ad-close{display:none}
.hero:has(.ad-slot--hero-bg:not([hidden])){position:relative;isolation:isolate;overflow:hidden}
.hero:has(.ad-slot--hero-bg:not([hidden])) .hero-inner{position:relative;z-index:2}
@media(max-width:800px){
  .ad-slot--hero-side,.adsense-slot#adsense-slot-hero-side{display:none!important}
  .ad-slot--nav-bottom{position:relative;z-index:3;width:100%;margin:0 0 18px!important;padding:0!important;box-sizing:border-box}
  .ad-slot--nav-bottom .market-ad{position:relative;z-index:4;width:100%;max-width:100%;box-sizing:border-box;margin:0 auto 12px!important}
  .ad-slot--nav-bottom .market-ad-media img{display:block;width:100%;height:auto;max-height:180px;object-fit:contain}
  .hero-inner:has(.ad-slot--nav-bottom:not([hidden])){position:relative;z-index:2}
}
.page-ad{border-style:solid;border-color:var(--ad-outline-color,var(--border));border-width:var(--ad-outline-width,1px)}
.page-ad--no-outline{border-width:0!important}
.popup-banner-card{border-style:solid;border-color:var(--ad-outline-color,#e4e4e4);border-width:var(--ad-outline-width,1px)}
.popup-banner-card--no-outline{border-width:0!important}
/* Final ad controls: admin-selectable hero background opacity. */
.ad-slot--hero-bg .market-ad{opacity:var(--ad-hero-opacity,.16)}
.market-ad-cta[type="button"],.page-ad-cta[type="button"]{border:0;cursor:default}

/* ── Desktop navigation-ad alignment fix ───────────────────────
   When the navigation-placement ad is enabled, keep it directly
   under the floating navigation instead of leaving a large hero
   padding gap above it. The ad remains inside the hero flow, so it
   cannot slide behind the sticky navigation.
*/
@media (min-width: 801px) {
  .hero:has(.ad-slot--hero-bg:not([hidden])) {
    margin-top: -64px;
    padding-top: 136px;
  }
  .hero:has(.ad-slot--hero-bg:not([hidden])) .ad-slot--hero-bg {
    top: -64px;
    height: calc(100% + 64px);
  }
  .hero:has(.ad-slot--nav-bottom:not([hidden])) {
    padding-top: 10px;
  }
  .hero:has(.ad-slot--nav-bottom:not([hidden])) .ad-slot--nav-bottom {
    margin-top: 0;
    margin-bottom: 18px;
  }
  .hero:has(.ad-slot--nav-bottom:not([hidden])) .ad-slot--nav-bottom .market-ad {
    margin-top: 0;
  }
}

.review-admin-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;background:var(--accent,#f59e0b);color:#111}.review-item--admin-response{margin:8px 0 0 28px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2,rgba(127,127,127,.06))}.review-item--admin-response .review-text{margin-bottom:0}
.review-like-btn{margin-top:8px;border:0;background:none;color:var(--text-muted);display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:7px;cursor:pointer;font-size:12px}
.review-like-btn:hover{background:var(--bg);color:var(--text-primary)}
.review-like-btn.is-liked{color:#e25555;font-weight:600}
.review-like-count{min-width:8px}

/* HERO SIDE AD — floating visual treatment
   Keep the original hero copy comfortable and give the ad its own right-side space. */
@media (min-width: 801px) {
  .hero-inner:has(.ad-slot--hero-side:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 56px;
    align-items: center;
    max-width: 1200px;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .hero-copy {
    width: 100%;
    max-width: 620px;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .hero-heading {
    max-width: 600px;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .hero-sub {
    max-width: 560px;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .search-wrap {
    max-width: 560px;
  }

  /* Floating image: no card, border, padding or shadow around the ad. */
  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side {
    width: 100%;
    max-width: 440px;
    justify-self: end;
    align-self: center;
    margin: 0 -18px 0 0;
    overflow: visible;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad {
    width: 100%;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-media,
  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-media img {
    width: 100% !important;
    max-width: 100%;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-media img {
    height: auto !important;
    max-height: 520px !important;
    min-height: 0 !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-badge,
  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-close {
    display: none !important;
  }

  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .ad-slot--hero-side .market-ad-cta {
    margin-top: 10px;
  }
}

@media (max-width: 800px) {
  .hero-inner:has(.ad-slot--hero-side:not([hidden])) .hero-copy {
    width: 100%;
    max-width: 100%;
  }
}

/* ─── Tool detail action layout ─────────────────────────────── */
.detail-footer {
  align-items: stretch;
  gap: 12px;
}

.detail-feedback-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}

.detail-feedback-group .like-btn,
.detail-feedback-group .dislike-btn,
.detail-feedback-group .wishlist-btn {
  margin: 0;
  box-shadow: none;
}

.detail-feedback-group .wishlist-btn {
  width: 36px;
  min-width: 36px;
  height: 34px;
  justify-content: center;
  padding: 7px;
}

.detail-support-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.detail-support-actions .btn {
  min-height: 36px;
  white-space: nowrap;
}

/* Strong theme-aware contrast for How-to / YouTube popups */
.tool-help-modal {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

.tool-help-step {
  border-top-color: var(--border) !important;
}

.tool-help-step-text {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.tool-help-empty {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.tool-help-video {
  color: var(--ink) !important;
  background: var(--off) !important;
  border-color: var(--border) !important;
}

.tool-help-video strong {
  color: var(--ink) !important;
}

.tool-help-video span {
  color: var(--muted) !important;
}

@media (max-width: 640px) {
  .detail-footer {
    gap: 10px;
  }

  .detail-feedback-group,
  .detail-support-actions {
    width: 100%;
    margin-left: 0;
  }

  .detail-feedback-group {
    justify-content: center;
  }

  .detail-support-actions .btn {
    flex: 1 1 0;
  }
}

/* ─── Detail action layout: desktop mirrors the original mobile arrangement ─── */
/* Remove the visual grouping added previously; keep the original button order. */
.detail-feedback-group,
.detail-support-actions {
  display: contents;
}

.detail-footer {
  align-items: center;
  gap: 10px;
}

/* Same sizing/flow on desktop that the phone layout uses. */
.detail-footer .detail-visit-btn,
.detail-footer .wishlist-btn,
.detail-footer .btn {
  width: 100%;
  justify-content: center;
}

.detail-footer .like-btn,
.detail-footer .dislike-btn {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  justify-content: center;
}

/* Keep the feedback controls visually clean without the old wrapper card. */
.detail-footer .like-btn,
.detail-footer .dislike-btn,
.detail-footer .wishlist-btn {
  margin: 0;
}

@media (min-width: 641px) {
  .detail-footer .detail-visit-btn,
  .detail-footer .wishlist-btn,
  .detail-footer .btn {
    flex: 0 0 100%;
  }

  .detail-footer .like-btn,
  .detail-footer .dislike-btn {
    flex: 1 1 calc(50% - 5px);
  }
}

/* Admin-selected ad ratios: ratio applies to the media box on desktop and mobile. */
.market-ad-media--ratio{aspect-ratio:var(--ad-ratio);height:auto;overflow:hidden}
.market-ad-media--ratio img{display:block;width:100%;height:100%!important;min-height:0!important;max-height:none!important;aspect-ratio:auto;object-fit:cover;border-radius:9px}
.market-ad-media:not(.market-ad-media--ratio) img{display:block;width:100%;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto;object-fit:contain;border-radius:9px}
#tools-grid .market-ad-media--ratio{height:auto}
#tools-grid .market-ad-media:not(.market-ad-media--ratio) img{height:auto!important;min-height:0!important}

.show-more-wrap{display:flex;justify-content:center;align-items:center;margin:24px 0 8px}
.show-more-btn{min-width:140px;font-weight:700}

/* Footer readability in the light/white theme. */
.footer-copy,.footer-admin-link{color:#fff!important}

/* Contact details are white ONLY in the light/white site theme.
   The app theme is controlled by [data-theme], not the device color scheme. */
[data-theme="light"] .site-footer .footer-contact,
[data-theme="light"] .site-footer .footer-contact *,
[data-theme="light"] .site-footer .footer-contact-item,
[data-theme="light"] .site-footer .footer-social {
  color:#fff !important;
}

.card-tags .card-tag--custom{border-color:var(--tag-custom-border,var(--accent))!important;color:var(--tag-custom-color,var(--accent))!important;background:var(--tag-custom-bg,var(--accent-tint))!important}
.card-tags .card-tag--performance{border-color:var(--tag-performance-border,#16A34A)!important;color:var(--tag-performance-color,#15803D)!important;background:var(--tag-performance-bg,rgba(22,163,74,.08))!important}
[data-theme="dark"] .card-tags .card-tag--performance{color:#4ade80!important;background:rgba(34,197,94,.12)!important;border-color:#22c55e!important}


/* Tool-list ads: size follows the selected aspect ratio and tool-card grid.
   1:1 = one card, 4:3/16:9 = two cards, 21:9 = max three cards. */
#tools-grid .market-ad {
  grid-column: span var(--ad-grid-span, 2);
  width: 100%;
  min-width: 0;
  margin: 4px 0;
}
#tools-grid .market-ad-media img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ad-ratio, auto);
  object-fit: cover;
  min-height: 0;
  max-height: none;
}
@media (max-width: 900px) {
  #tools-grid .market-ad { grid-column: 1 / -1; }
}

/* Requested theme refinements */
[data-theme="colorful"] .card-help-btn {
  color: #11110F;
}
[data-theme="colorful"] .card-help-btn:hover {
  color: #11110F;
}

/* ── Requested UI refinements ── */
.hero-browse-btn{border-radius:999px!important}

.like-btn,.dislike-btn{
  background:#fff!important;
  color:var(--ink)!important;
  border-color:var(--border)!important;
}
.like-btn:hover,.like-btn:focus-visible{background:#fff!important;color:var(--ink)!important;border-color:var(--border)!important}
.like-btn.liked{background:#dcfce7!important;color:#15803d!important;border-color:#86efac!important}
.dislike-btn:hover,.dislike-btn:focus-visible{background:#fff!important;color:var(--ink)!important;border-color:var(--border)!important}
.dislike-btn.disliked{background:#fee2e2!important;color:#b91c1c!important;border-color:#fca5a5!important}

@keyframes heroSideAdFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.hero-side-floating-enabled .ad-slot--hero-side:not([hidden]),
.hero-side-floating-enabled .mobile-hero-side-ad-slot:not([hidden]){
  animation:heroSideAdFloat 4.8s ease-in-out infinite;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .hero-side-floating-enabled .ad-slot--hero-side:not([hidden]),
  .hero-side-floating-enabled .mobile-hero-side-ad-slot:not([hidden]){animation:none!important}
}
@keyframes heroSideAdAutoFlip{
  0%,42%{transform:scaleX(1)}
  50%,92%{transform:scaleX(-1)}
  100%{transform:scaleX(1)}
}
.hero-side-auto-flip-enabled .ad-slot--hero-side:not([hidden]) > .market-ad,
.hero-side-auto-flip-enabled .mobile-hero-side-ad-slot:not([hidden]) > .market-ad{
  /* Flip the ad itself, while the slot remains responsible for floating.
     Keeping transforms on separate elements lets both effects run together. */
  animation:heroSideAdAutoFlip 6.4s ease-in-out infinite;
  transform-origin:center center;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .hero-side-auto-flip-enabled .ad-slot--hero-side:not([hidden]) > .market-ad,
  .hero-side-auto-flip-enabled .mobile-hero-side-ad-slot:not([hidden]) > .market-ad{animation:none!important}
}

@media (max-width:800px){
  .hero-side-floating-enabled .ad-slot--hero-side:not([hidden]){animation:none!important}
}


/* Community hero CTA + rounded search controls */
.search-box{border-radius:999px;overflow:hidden}
.hero-browse-btn{border-radius:999px}
.hero-community-action{margin-top:12px}
.hero-community-btn{background:#f5c400!important;color:#111!important;border:2px solid #f5c400!important;border-radius:999px!important;box-shadow:0 6px 18px rgba(245,196,0,.18)}
.hero-community-btn:hover,.hero-community-btn:focus-visible{background:#ffd52f!important;border-color:#ffd52f!important;color:#111!important}
@media(max-width:700px){.hero-community-action{margin-top:10px}}

/* ── Final hero/community + feedback refinements ── */
.search-input,
.search-box { border-radius: 999px !important; }

.hero-community-action {
  width: min(560px, 100%);
  margin: 0 0 14px !important;
}
.hero-community-btn {
  display: flex !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  background: var(--accent) !important;
  border: 2px solid var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-btn) !important;
}
.hero-community-btn:hover,
.hero-community-btn:focus-visible {
  background: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
  color: #fff !important;
}

/* The Browse button must sit below Community with no negative pull-up. */
.hero-community-action + .hero-actions {
  margin: 0 0 10px !important;
}

/* Yellow/colorful theme uses its yellow accent with dark text. */
[data-theme="colorful"] .hero-community-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #11110F !important;
}
[data-theme="colorful"] .hero-community-btn:hover,
[data-theme="colorful"] .hero-community-btn:focus-visible {
  background: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
  color: #11110F !important;
}

/* Like/dislike stay white and readable in every theme until selected. */
[data-theme="dark"] .like-btn:not(.liked),
[data-theme="dark"] .dislike-btn:not(.disliked),
[data-theme="colorful"] .like-btn:not(.liked),
[data-theme="colorful"] .dislike-btn:not(.disliked) {
  background: #fff !important;
  color: #111 !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .like-btn:hover:not(.liked),
[data-theme="dark"] .like-btn:focus-visible:not(.liked),
[data-theme="dark"] .dislike-btn:hover:not(.disliked),
[data-theme="dark"] .dislike-btn:focus-visible:not(.disliked),
[data-theme="colorful"] .like-btn:hover:not(.liked),
[data-theme="colorful"] .like-btn:focus-visible:not(.liked),
[data-theme="colorful"] .dislike-btn:hover:not(.disliked),
[data-theme="colorful"] .dislike-btn:focus-visible:not(.disliked) {
  background: #fff !important;
  color: #111 !important;
  border-color: var(--border) !important;
}

@media (max-width: 700px) {
  .hero-community-action { width: 100%; }
  .hero-community-btn { height: 48px !important; min-height: 48px !important; }
  .search-input { height: 48px; }
}


/* ─── Hero analytics strip ─────────────────────────────────── */
.hero-analytics{
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  margin:0 0 16px;
  width:min(100%, 680px);
  border:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius:18px;
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.hero-analytics-item{
  min-width:0;
  flex:1 1 0;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 13px;
  color:var(--ink);
  border-right:1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.hero-analytics-item:last-child{border-right:0}
.hero-analytics-icon{
  width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;
  color:var(--ink);opacity:.58;background:transparent;
}
.hero-analytics-icon svg{width:19px;height:19px;display:block}
.hero-analytics-item span:last-child{display:flex;flex-direction:column;min-width:0}
.hero-analytics-item strong{font-size:15px;line-height:1.1;font-weight:750;letter-spacing:-.01em}
.hero-analytics-item small{margin-top:3px;font-size:10px;line-height:1.15;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-popular-btn{border-radius:999px !important}
@media(max-width:720px){
  .hero-analytics{width:100%;border-radius:16px;margin-bottom:14px}
  .hero-analytics-item{padding:9px 8px;gap:6px;justify-content:center}
  .hero-analytics-icon{width:25px;height:25px;flex-basis:25px}
  .hero-analytics-icon svg{width:17px;height:17px}
  .hero-analytics-item strong{font-size:13px}
  .hero-analytics-item small{font-size:9px}
}
@media(max-width:480px){
  .hero-analytics-item{padding:8px 5px;gap:4px}
  .hero-analytics-icon{display:none}
  .hero-analytics-item strong{font-size:12px}
  .hero-analytics-item small{font-size:8px}
}

/* ── Premium transparent Community CTA ── */
.hero-community-btn{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:inherit !important;
  box-shadow:0 8px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.hero-community-btn::before{
  content:"";
  position:absolute;
  top:-80%;
  bottom:-80%;
  left:-45%;
  width:28%;
  transform:skewX(-22deg) translateX(-260%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.72),rgba(255,255,255,.08),transparent);
  filter:blur(1px);
  pointer-events:none;
  z-index:-1;
  animation:communityPremiumShine 3.8s ease-in-out infinite;
}
.hero-community-btn::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.13) 50%,transparent 64%);
  opacity:.7;
  pointer-events:none;
}
.hero-community-btn:hover,
.hero-community-btn:focus-visible{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.55) !important;
  color:inherit !important;
  transform:translateY(-1px);
  box-shadow:0 12px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
[data-theme="colorful"] .hero-community-btn,
[data-theme="colorful"] .hero-community-btn:hover,
[data-theme="colorful"] .hero-community-btn:focus-visible{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(17,17,15,.30) !important;
  color:#fff !important;
}
@keyframes communityPremiumShine{
  0%,25%{transform:skewX(-22deg) translateX(-260%);opacity:0}
  35%{opacity:1}
  62%,100%{transform:skewX(-22deg) translateX(620%);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-community-btn::before{animation:none !important;display:none !important;}
  .hero-community-btn{transition:none !important;}
}


/* ── Hero-side ad mobile fallback ─────────────────────────────
   The mobile copy of a Hero-Side ad lives directly after the sticky
   navigation, so it can never be hidden behind the navbar or overlap
   the hero content. It is rendered only when the admin mobile switch
   is enabled for that ad.
*/
.mobile-hero-side-ad-slot{
  display:none;
  width:100%;
  box-sizing:border-box;
  position:relative;
  z-index:20;
  margin:0 auto;
  padding:10px 14px 0;
  background:var(--bg,#fff);
}
.mobile-hero-side-ad-slot .market-ad{
  width:100%;
  max-width:1200px;
  margin:0 auto 12px;
  box-sizing:border-box;
}
.mobile-hero-side-ad-slot .market-ad-media img{
  display:block;
  width:100%;
  height:auto!important;
  max-height:220px;
  object-fit:contain;
}
@media(max-width:800px){
  .mobile-hero-side-ad-slot:not([hidden]){display:block;}
  .mobile-hero-side-ad-slot .market-ad{position:relative;z-index:21;}
}
@media(min-width:801px){
  .mobile-hero-side-ad-slot{display:none!important;}
}

/* ── Desktop hero quick-action alignment ───────────────────── */
@media(min-width:701px){
  .hero-community-action{width:min(560px,100%);margin:0 0 14px!important;}
  .hero-actions{width:min(560px,100%);display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px!important;}
  .hero-actions .btn{width:100%;min-width:0;justify-content:center;}
}
/* Mobile keeps the original stacked quick-action layout. */
@media(max-width:700px){
  /* Restore the original mobile quick-action layout. Desktop-only alignment stays above. */
  .hero-community-action{width:100%;margin-top:10px!important;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin:-6px 0 10px!important;}
  .hero-actions .btn{flex:1 1 160px;width:auto;min-width:0;justify-content:center;}
}

/* ── Community CTA shine: visible in the white theme too ───── */
[data-theme="light"] .hero-community-btn{
  background:rgba(255,255,255,.96)!important;
  color:var(--ink)!important;
  border-color:rgba(17,17,15,.16)!important;
  box-shadow:0 8px 24px rgba(17,17,15,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
[data-theme="light"] .hero-community-btn::before{
  z-index:0;
  background:linear-gradient(90deg,transparent,rgba(245,196,0,.10),rgba(245,196,0,.82),rgba(255,255,255,.96),rgba(245,196,0,.18),transparent);
  animation:communityPremiumShine 3.2s ease-in-out infinite;
}
[data-theme="light"] .hero-community-btn::after{
  z-index:1;
  background:linear-gradient(115deg,transparent 0%,rgba(245,196,0,.05) 38%,rgba(245,196,0,.18) 50%,transparent 64%);
}
[data-theme="light"] .hero-community-btn:hover,
[data-theme="light"] .hero-community-btn:focus-visible{
  color:var(--ink)!important;
  border-color:rgba(245,196,0,.62)!important;
}


/* Tool-card tags: one predictable wrapping row; never overlap the title/each other. */
.card-name-row{min-width:0;display:block;}
.card-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-tags{display:flex!important;align-items:center;flex-wrap:wrap!important;gap:6px!important;min-width:0;width:100%;margin-top:7px;}
.card-tags .card-tag{position:static!important;display:inline-flex!important;align-items:center;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.card-tags .card-tag--performance,.card-tags .card-tag--custom,.card-tags .card-tag--customer{flex:0 1 auto;}
.card-tag--title{display:none!important;}

/* Floating back-to-top control. */
.scroll-top-btn{position:fixed;right:22px;bottom:22px;z-index:9999;width:46px;height:46px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.16);display:grid;place-items:center;font-size:22px;font-weight:800;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,background .2s ease;}
.scroll-top-btn.is-visible{opacity:1;transform:none;pointer-events:auto;}
.scroll-top-btn:hover{background:var(--accent);color:#111;border-color:var(--accent);}
@media(max-width:700px){.scroll-top-btn{right:14px;bottom:14px;width:42px;height:42px;font-size:20px;}}

.card-tags .card-tag--customer{border-color:var(--tag-customer-border,#0F766E)!important;color:var(--tag-customer-color,#0F766E)!important;background:var(--tag-customer-bg,#CCFBF1)!important}

/* Final mobile hero-side ad guarantee: it sits in normal document flow below the navbar. */
@media (max-width:800px){
  .mobile-hero-side-ad-slot{
    display:block;
    position:relative;
    z-index:30;
    clear:both;
    min-height:0;
  }
  .mobile-hero-side-ad-slot[hidden]{display:none!important;}
  .mobile-hero-side-ad-slot:not([hidden]) + .hero{margin-top:0!important;}
  .mobile-hero-side-ad-slot:not([hidden]) .market-ad{
    position:relative;
    z-index:31;
    width:100%;
    max-width:100%;
    margin:0 auto 12px!important;
  }
}


/* ── Final Hero-Side mobile ad treatment ───────────────────────
   Keep the mobile version inside the hero block, below the navbar,
   while preserving the same transparent/floating visual treatment
   as the desktop Hero-Side placement. */
.mobile-hero-side-ad-slot{display:none}

@media (max-width:800px){
  .mobile-hero-side-ad-slot{
    display:block;
    width:100%;
    max-width:1200px;
    margin:0 auto 14px;
    padding:0 16px;
    box-sizing:border-box;
    background:transparent!important;
    position:relative;
    z-index:8;
    overflow:visible;
  }
  .mobile-hero-side-ad-slot .market-ad{
    width:100%;
    padding:0;
    border:0!important;
    border-radius:0;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible;
  }
  .mobile-hero-side-ad-slot .market-ad-media,
  .mobile-hero-side-ad-slot .market-ad-media img{
    display:block;
    width:100%!important;
    max-width:100%;
  }
  .mobile-hero-side-ad-slot .market-ad-media img{
    height:auto!important;
    max-height:360px!important;
    min-height:0!important;
    object-fit:contain!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .mobile-hero-side-ad-slot .market-ad--transparent-png{
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .mobile-hero-side-ad-slot .market-ad-badge,
  .mobile-hero-side-ad-slot .market-ad-close{display:none!important}
  .mobile-hero-side-ad-slot .market-ad-cta{margin-top:8px}

  /* The mobile Hero-Side ad uses the same floating animation as desktop. */
  .hero-side-floating-enabled .mobile-hero-side-ad-slot:not([hidden]){
    animation:heroSideAdFloat 4.8s ease-in-out infinite;
    will-change:transform;
  }
  @media (prefers-reduced-motion:reduce){
    .hero-side-floating-enabled .mobile-hero-side-ad-slot:not([hidden]){animation:none!important}
  }

  /* Keep the hero ad safely below the floating/sticky navigation. */
  .mobile-hero-side-ad-slot + .hero-copy{position:relative;z-index:2}

  /* Navigation-placement ads remain below the navbar and never behind it. */
  .ad-slot--nav-bottom{
    position:relative!important;
    z-index:40!important;
    margin-top:12px!important;
    clear:both;
  }
  .ad-slot--nav-bottom .market-ad{position:relative!important;z-index:21!important}
}

@media (min-width:801px){
  .mobile-hero-side-ad-slot{display:none!important}
}

/* Community-specific visual polish: ads use the same rounded language as the community cards. */
.community-page .ad-slot .market-ad,
.community-page .adsense-slot .market-ad{border-radius:18px;overflow:hidden}
.community-page .ad-slot .market-ad-media,
.community-page .adsense-slot .market-ad-media,
.community-page .ad-slot .market-ad-media img,
.community-page .adsense-slot .market-ad-media img{border-radius:16px;overflow:hidden}

@media (min-width:801px){
  .community-tabs{gap:10px;padding:7px;border-radius:20px}
  .community-tab{padding:14px 18px;min-height:48px;font-size:14px}
}

@media (max-width:700px){
  /* Keep the Community kicker safely below the sticky navbar; mobile tab sizing/layout stays untouched. */
  .community-hero{padding-top:78px}
}


/* Pinned tool indicator */
.service-card{position:relative;}
.card-name-row{display:flex;align-items:center;gap:6px;min-width:0;padding-right:28px;}
.tool-pin-badge{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--accent-tint2);border:1px solid var(--accent);font-size:12px;line-height:1;flex:0 0 auto;z-index:4;box-shadow:0 2px 8px rgba(0,0,0,.14);}
.tool-pin-badge:hover{transform:scale(1.06);}


/* Dual hero animation: floating and flip are deliberately applied to different DOM levels,
   so enabling one never replaces the other. */
.hero-side-floating-enabled .ad-slot--hero-side:not([hidden]),
.hero-side-floating-enabled .mobile-hero-side-ad-slot:not([hidden]){
  animation:heroSideAdFloat 4.8s ease-in-out infinite !important;
  will-change:transform;
}
.hero-side-auto-flip-enabled .ad-slot--hero-side:not([hidden]) > .market-ad,
.hero-side-auto-flip-enabled .mobile-hero-side-ad-slot:not([hidden]) > .market-ad{
  animation:heroSideAdAutoFlip 6.4s ease-in-out infinite !important;
  transform-origin:center center;
  will-change:transform;
}

/* Tool metadata tags: compact full-color pills, custom tag first. */
.card-tags .card-tag{padding:4px 9px;border-radius:999px;border:1px solid transparent;background:var(--off);}
.card-tags .card-tag--cat{background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important;color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 28%,var(--border))!important;}
.card-tags .card-tag--subcat{background:color-mix(in srgb,#64748b 10%,var(--surface))!important;color:#475569!important;border-color:color-mix(in srgb,#64748b 24%,var(--border))!important;}
.card-tags .card-tag--custom,.card-tags .card-tag--performance,.card-tags .card-tag--customer{border-width:1px!important;}
.copy-details-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;padding:0;border:1.5px solid var(--border);border-radius:10px;background:var(--off);color:var(--ink);cursor:pointer;flex-shrink:0;transition:all var(--transition);}
.copy-details-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-tint);transform:translateY(-1px);}
.opportunities-header-btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--off);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;}
.opportunities-header-btn:hover{border-color:var(--accent);color:var(--accent);}
@media(max-width:700px){.opportunities-header-btn{font-size:11px;padding:0 9px;min-height:32px;}}

/* Compact promotional popup/toast treatment */
.popup-banner-card{border-radius:14px!important;max-width:360px!important;}
.popup-banner-text{font-size:12px!important;line-height:1.4!important;}
.popup-banner-cta{background:var(--ad-cta-bg,#111111)!important;color:var(--ad-cta-color,#ffffff)!important;border:0!important;box-shadow:none!important;padding:7px 11px!important;border-radius:9px!important;}

/* Premium compact AI Opportunities navbar icon */
.nav-opportunities-link{position:relative;width:34px;min-width:34px;height:34px;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:18px!important;line-height:1;border-radius:10px;overflow:visible;color:#d6a21a!important;isolation:isolate;}
.nav-opportunities-link::before{content:"";position:absolute;inset:-3px;border-radius:12px;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.85) 45%,transparent 68%);background-size:220% 100%;opacity:.45;filter:blur(1px);z-index:-1;animation:opportunityGoldShine 4.8s ease-in-out infinite;}
.nav-opportunities-link::after{content:"";position:absolute;inset:2px;border-radius:9px;box-shadow:0 0 7px rgba(230,180,40,.24),0 0 14px rgba(230,180,40,.10);pointer-events:none;animation:opportunityGoldFlicker 3.2s ease-in-out infinite;}
.nav-opportunities-link:hover{color:#f0c84b!important;transform:translateY(-1px);}
.nav-opportunities-link span{display:block;filter:drop-shadow(0 0 3px rgba(232,184,47,.45));animation:opportunityIconFlicker 3.2s ease-in-out infinite;}
@keyframes opportunityGoldShine{0%,55%{background-position:180% 0;opacity:.12}72%{background-position:-20% 0;opacity:.7}100%{background-position:-40% 0;opacity:.12}}
@keyframes opportunityGoldFlicker{0%,100%{opacity:.45}45%{opacity:.72}52%{opacity:.3}60%{opacity:.65}}
@keyframes opportunityIconFlicker{0%,100%{filter:drop-shadow(0 0 2px rgba(232,184,47,.35)) brightness(1)}48%{filter:drop-shadow(0 0 6px rgba(255,210,70,.8)) brightness(1.16)}55%{filter:drop-shadow(0 0 3px rgba(232,184,47,.45)) brightness(1.03)}}
@media(prefers-reduced-motion:reduce){.nav-opportunities-link::before,.nav-opportunities-link::after,.nav-opportunities-link span{animation:none!important;}}

/* Robust premium AI Opportunities icon */
.nav-opportunities-link .opportunity-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;color:#d6a21a;filter:drop-shadow(0 0 3px rgba(232,184,47,.45));animation:opportunityIconFlicker 3.2s ease-in-out infinite;position:relative;z-index:2;}
.nav-opportunities-link .opportunity-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.nav-opportunities-link .opportunity-icon::after{content:"";position:absolute;inset:1px;border-radius:50%;background:radial-gradient(circle,rgba(255,211,75,.16),transparent 68%);pointer-events:none;animation:opportunityIconGlow 2.8s ease-in-out infinite;}
@keyframes opportunityIconGlow{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.85;transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.nav-opportunities-link .opportunity-icon,.nav-opportunities-link .opportunity-icon::after{animation:none!important;}}
/* Final navbar refinement: Opportunities icon is visible on every viewport; Browse/Popular remain desktop-hidden. */
.nav-opportunities-link{display:inline-flex!important;visibility:visible!important;opacity:1!important;flex:0 0 34px;}
@media (max-width:800px){
  .header-nav .nav-opportunities-link{display:inline-flex!important;visibility:visible!important;opacity:1!important;width:34px!important;min-width:34px!important;height:34px!important;}
}
@media (min-width:801px){
  .header-nav > a[href="#browse"],
  .header-nav > a[href="#popular"]{display:none!important;}
}


/* AI Opportunities navbar final visibility */
.header-nav .nav-link:nth-child(1),
.header-nav .nav-link:nth-child(2) { display:none !important; }
.header-nav .nav-opportunities-link { display:inline-flex !important; }

@media (max-width:640px) {
  .header-nav {
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:4px;
  }
  .header-nav .nav-opportunities-link {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }
}

/* YouTube tool action */
.detail-support-actions .btn--youtube {
  background: #ff0000 !important;
  color: #fff !important;
  border-color: #ff0000 !important;
}
.detail-support-actions .btn--youtube:hover,
.detail-support-actions .btn--youtube:focus-visible {
  background: #cc0000 !important;
  color: #fff !important;
  border-color: #cc0000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Hero premium CTA + interaction polish
═══════════════════════════════════════════════════════════════ */
.hero-actions .hero-gold-btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff8df;
  border:1px solid rgba(255,215,115,.72);
  background:
    linear-gradient(135deg, rgba(255,226,140,.22), rgba(183,124,18,.22)),
    rgba(22,20,16,.62);
  box-shadow:0 0 0 1px rgba(255,215,115,.08) inset, 0 8px 24px rgba(181,125,20,.18), 0 0 22px rgba(255,202,72,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-shadow:0 1px 10px rgba(255,211,92,.35);
}
.hero-actions .hero-gold-btn::before{
  content:"";
  position:absolute;
  inset:-80% -25%;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.62) 50%, transparent 65%);
  transform:translateX(-90%) rotate(8deg);
  animation:goldCtaShine 3.2s ease-in-out infinite;
  pointer-events:none;
}
.hero-actions .hero-gold-btn:hover{
  transform:translateY(-2px);
  border-color:#ffd76d;
  box-shadow:0 10px 30px rgba(181,125,20,.25), 0 0 30px rgba(255,211,91,.20);
}
.hero-actions .hero-gold-btn svg,
.hero-actions .hero-gold-btn span{position:relative;z-index:1}
@keyframes goldCtaShine{
  0%,35%{transform:translateX(-90%) rotate(8deg)}
  65%,100%{transform:translateX(90%) rotate(8deg)}
}
.hero-community-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.hero-community-btn svg{flex:0 0 auto}

/* Animated search icon */
.search-box > svg:first-child{
  animation:searchPulse 2.2s ease-in-out infinite;
  transform-origin:center;
}
.search-box:focus-within > svg:first-child{
  animation:searchSpin .7s ease-out;
}
@keyframes searchPulse{
  0%,100%{transform:scale(1);opacity:.78}
  50%{transform:scale(1.1);opacity:1}
}
@keyframes searchSpin{
  from{transform:rotate(-18deg) scale(.92)}
  to{transform:rotate(0) scale(1)}
}

/* Popular tools modal */
.modal--popular-tools{
  width:min(760px,100%);
  max-height:min(82vh,820px);
  overflow:auto;
  padding:26px;
}
.popular-modal-head{padding-right:34px;margin-bottom:18px}
.popular-modal-kicker{
  display:inline-block;
  margin-bottom:5px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b88320;
}
.popular-modal-sub{color:var(--muted);margin-top:4px}
.popular-modal-list{display:grid;gap:10px}
.popular-modal-item{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:13px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--card-bg);
  cursor:pointer;
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.popular-modal-item:hover{
  transform:translateY(-1px);
  border-color:rgba(205,153,48,.65);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
.popular-modal-logo{
  width:46px;height:46px;border-radius:12px;object-fit:cover;
  border:1px solid var(--border);background:var(--off);display:grid;place-items:center;
  font-weight:800;
}
.popular-modal-name{font-weight:800}
.popular-modal-meta{font-size:12px;color:var(--muted);margin-top:2px}
.popular-modal-rank{
  min-width:32px;height:28px;border-radius:999px;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#9a6c16;background:rgba(205,153,48,.12);
  border:1px solid rgba(205,153,48,.25);
}
@media (max-width:600px){
  .modal--popular-tools{padding:20px}
  .popular-modal-item{grid-template-columns:42px 1fr auto;padding:11px}
  .popular-modal-logo{width:42px;height:42px}
}

/* Final hero/tool discovery refinements */
.hero-opportunity-action{width:min(560px,100%);margin:0 0 18px!important;}
.hero-opportunity-btn{
  display:flex!important;width:100%!important;height:52px!important;min-height:52px!important;
  align-items:center;justify-content:center;gap:7px;border-radius:999px!important;
  background:var(--accent)!important;border:2px solid var(--accent)!important;color:#fff!important;
  box-shadow:var(--shadow-btn)!important;text-decoration:none;
}
.hero-opportunity-btn:hover,.hero-opportunity-btn:focus-visible{background:var(--accent-dk)!important;border-color:var(--accent-dk)!important;color:#fff!important;transform:translateY(-1px);}
[data-theme="colorful"] .hero-opportunity-btn{background:var(--accent)!important;border-color:var(--accent)!important;color:#11110F!important;}
[data-theme="colorful"] .hero-opportunity-btn:hover,[data-theme="colorful"] .hero-opportunity-btn:focus-visible{background:var(--accent-dk)!important;border-color:var(--accent-dk)!important;color:#11110F!important;}
/* Search is now the first control in the tools section. */
.section--browse .search-wrap{max-width:760px;margin:0 auto 22px;}
/* User requested no search-icon animation. */
.search-box > svg:first-child,.search-box:focus-within > svg:first-child{animation:none!important;transform:none!important;}
/* Keep popular modal self-scrolling without moving the page behind it. */
.modal-overlay{overscroll-behavior:contain;touch-action:none;}
.modal--popular-tools{overscroll-behavior:contain;touch-action:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Hide the old navbar opportunity icon; it now lives with the hero CTAs. */
.nav-opportunities-link{display:none!important;}


/* ── Floating hero analytics + most-liked tools ── */
.hero-side-floaters{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}
.hero-side-floaters[hidden]{display:none!important}
.hero-float-card{position:absolute;display:flex;align-items:center;gap:8px;min-width:118px;max-width:165px;padding:9px 11px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(0,0,0,.16),0 0 20px rgba(255,255,255,.035);color:var(--ink);line-height:1.05;pointer-events:auto;transform:translateZ(0);animation:heroFloatIn .55s ease both}
.hero-float-card strong,.hero-float-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-float-analytics{animation:heroFloatBob 3.8s ease-in-out infinite!important;will-change:transform}
.hero-float-analytics{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.20)!important;box-shadow:0 10px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.10)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-theme="dark"] .hero-float-analytics{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.14)!important}
[data-theme="colorful"] .hero-float-analytics{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.18)!important}
.hero-float-a2{animation-delay:-1.1s!important}
.hero-float-a3{animation-delay:-2.2s!important}
.hero-float-a4{animation-delay:-3.1s!important}
@keyframes heroFloatBob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
.hero-float-card strong{font-size:12px;font-weight:800}
.hero-float-card small{font-size:10px;color:var(--muted);margin-top:3px}
.hero-float-icon{width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px;border-radius:8px;color:var(--accent)}
.hero-float-icon svg{width:18px;height:18px}
.hero-float-tool{text-decoration:none;color:var(--ink);border-color:rgba(201,151,54,.34);background:color-mix(in srgb,var(--surface) 82%,rgba(201,151,54,.12));}
.hero-float-tool:hover{transform:translateY(-3px) scale(1.01);border-color:rgba(201,151,54,.7);box-shadow:0 14px 34px rgba(0,0,0,.2),0 0 24px rgba(201,151,54,.12)}
.hero-float-rank{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:900;color:#9a6c16;background:rgba(205,153,48,.14);border:1px solid rgba(205,153,48,.28);flex:0 0 22px}
.hero-float-a1{left:calc(var(--float-ad-left) - 112px);top:calc(var(--float-ad-top) + 18px)}
.hero-float-a2{left:calc(var(--float-ad-left) + var(--float-ad-width) - 2px);top:calc(var(--float-ad-top) + 18px)}
.hero-float-a3{left:calc(var(--float-ad-left) - 112px);top:calc(var(--float-ad-top) + var(--float-ad-height) - 58px)}
.hero-float-a4{left:calc(var(--float-ad-left) + var(--float-ad-width) - 2px);top:calc(var(--float-ad-top) + var(--float-ad-height) - 58px)}
.hero-float-t1{left:calc(var(--float-ad-left) + 8px);top:calc(var(--float-ad-top) + var(--float-ad-height) + 12px)}
.hero-float-t2{left:calc(var(--float-ad-left) + 50% - 82px);top:calc(var(--float-ad-top) + var(--float-ad-height) + 12px)}
.hero-float-t3{left:calc(var(--float-ad-left) + var(--float-ad-width) - 173px);top:calc(var(--float-ad-top) + var(--float-ad-height) + 12px)}
@keyframes heroFloatIn{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:800px){
  .hero-side-floaters{z-index:8}
  .hero-float-card{min-width:104px;max-width:140px;padding:7px 8px;border-radius:12px}
  .hero-float-card strong{font-size:10.5px}.hero-float-card small{font-size:9px}.hero-float-icon{width:21px;height:21px;flex-basis:21px}.hero-float-icon svg{width:15px;height:15px}
  .hero-float-a1{left:8px;top:calc(var(--float-ad-top) + 8px)}
  .hero-float-a2{left:auto;right:8px;top:calc(var(--float-ad-top) + 8px)}
  .hero-float-a3{left:8px;top:calc(var(--float-ad-top) + var(--float-ad-height) - 45px)}
  .hero-float-a4{left:auto;right:8px;top:calc(var(--float-ad-top) + var(--float-ad-height) - 45px)}
  .hero-float-t1{left:8px;top:calc(var(--float-ad-top) + var(--float-ad-height) + 8px)}
  .hero-float-t2{left:50%;transform:translateX(-50%);top:calc(var(--float-ad-top) + var(--float-ad-height) + 8px)}
  .hero-float-t3{left:auto;right:8px;top:calc(var(--float-ad-top) + var(--float-ad-height) + 8px)}
}
@media(prefers-reduced-motion:reduce){.hero-float-card,.hero-float-analytics{animation:none!important}}

/* Opportunity CTA — same footprint as Community, but transparent + premium shine. */
.hero-opportunity-btn{position:relative;overflow:hidden;background:transparent!important;border:2px solid var(--accent)!important;color:var(--accent)!important;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 8px 26px rgba(0,0,0,.12),0 0 22px color-mix(in srgb,var(--accent) 20%,transparent)!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease!important}
.hero-opportunity-btn::after{content:"";position:absolute;inset:-30% auto -30% -30%;width:24%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:opportunityShine 3.2s ease-in-out infinite;pointer-events:none}
.hero-opportunity-btn:hover,.hero-opportunity-btn:focus-visible{background:color-mix(in srgb,var(--accent) 8%,transparent)!important;border-color:var(--accent)!important;color:var(--accent)!important;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.16),0 0 28px color-mix(in srgb,var(--accent) 28%,transparent)!important}
[data-theme="colorful"] .hero-opportunity-btn{background:transparent!important;color:var(--accent)!important;border-color:var(--accent)!important}
[data-theme="colorful"] .hero-opportunity-btn:hover,[data-theme="colorful"] .hero-opportunity-btn:focus-visible{background:rgba(255,255,255,.08)!important;color:var(--accent)!important;border-color:var(--accent)!important}
@keyframes opportunityShine{0%,55%{left:-35%;opacity:0}65%{opacity:1}82%,100%{left:125%;opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-opportunity-btn::after{animation:none!important}}


/* Analytics: desktop left cards stay INSIDE the hero-side image corners. */
@media (min-width:801px){
  .hero-float-a1, .hero-float-a3{left:calc(var(--float-ad-left) + 10px)!important;}
}

/* AI Opportunities CTA: exact same glass treatment as Community CTA. */
.hero-opportunity-btn{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  color:inherit!important;
  box-shadow:0 8px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.16)!important;
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}
.hero-opportunity-btn::before{
  content:"";position:absolute;top:-80%;bottom:-80%;left:-45%;width:28%;
  transform:skewX(-22deg) translateX(-260%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.72),rgba(255,255,255,.08),transparent);
  filter:blur(1px);pointer-events:none;z-index:-1;
  animation:communityPremiumShine 3.8s ease-in-out infinite;
}
.hero-opportunity-btn::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.13) 50%,transparent 64%);
  opacity:.7;pointer-events:none;
}
.hero-opportunity-btn:hover,.hero-opportunity-btn:focus-visible{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.55)!important;
  color:inherit!important;transform:translateY(-1px);
  box-shadow:0 12px 34px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
[data-theme="colorful"] .hero-opportunity-btn,[data-theme="colorful"] .hero-opportunity-btn:hover,[data-theme="colorful"] .hero-opportunity-btn:focus-visible{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(17,17,15,.30)!important;
  color:#fff!important;
}
@media(prefers-reduced-motion:reduce){.hero-opportunity-btn::before{animation:none!important;display:none!important}.hero-opportunity-btn{transition:none!important}}

/* Final hero refinements: analytics live only as floating cards beside the hero ad. */
.hero-analytics{display:none!important}

/* AI Opportunities — transparent in every theme. */
.hero-opportunity-btn,.hero-opportunity-btn:hover,.hero-opportunity-btn:focus-visible,
[data-theme="colorful"] .hero-opportunity-btn,[data-theme="colorful"] .hero-opportunity-btn:hover,[data-theme="colorful"] .hero-opportunity-btn:focus-visible{
  background:transparent!important;
  color:var(--accent)!important;
  border-color:var(--accent)!important;
}

/* White theme: give Viral Prompts + Popular Tools a clean blue accent instead of the gold treatment. */
[data-theme="light"] .hero-browse-btn.hero-gold-btn,
[data-theme="light"] .hero-popular-btn.hero-gold-btn{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;box-shadow:0 8px 22px rgba(37,99,235,.18)!important}
[data-theme="light"] .hero-browse-btn.hero-gold-btn:hover,
[data-theme="light"] .hero-browse-btn.hero-gold-btn:focus-visible,
[data-theme="light"] .hero-popular-btn.hero-gold-btn:hover,
[data-theme="light"] .hero-popular-btn.hero-gold-btn:focus-visible{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important}

/* Remove the previously-added floating Top 3 tool cards completely. */
.hero-float-tool,.hero-float-t1,.hero-float-t2,.hero-float-t3{display:none!important}

/* Non-spinner ad loading treatment for the fixed hero-side advertisement. */
.market-ad--hero-side-loading .market-ad-media{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 45%),color-mix(in srgb,var(--surface) 88%,transparent)}
.market-ad--hero-side-loading .market-ad-media > img{opacity:0;transition:opacity .42s ease}
.market-ad--hero-side-loading.is-ad-loaded .market-ad-media > img{opacity:1}
.market-ad-loadfx{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none;overflow:hidden}
.market-ad-loadfx i,.market-ad-loadfx b,.market-ad-loadfx em{position:absolute;display:block;border:1px solid currentColor;border-radius:50%;font-style:normal}
.market-ad-loadfx i{width:58px;height:58px;color:var(--accent);opacity:.28;animation:adOrbit 2.8s linear infinite}
.market-ad-loadfx b{width:38px;height:38px;color:var(--accent);opacity:.55;border-top-color:transparent;border-right-color:transparent;animation:adOrbitReverse 1.7s linear infinite}
.market-ad-loadfx em{width:10px;height:10px;border:0;background:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 72%,transparent);animation:adCorePulse 1.35s ease-in-out infinite}
.market-ad-loadfx span{position:absolute;top:calc(50% + 42px);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.8}
.market-ad--hero-side-loading.is-ad-loaded .market-ad-loadfx{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
@keyframes adOrbit{to{transform:rotate(360deg)}}
@keyframes adOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes adCorePulse{0%,100%{transform:scale(.72);opacity:.55}50%{transform:scale(1.18);opacity:1}}
@media(prefers-reduced-motion:reduce){.market-ad-loadfx i,.market-ad-loadfx b,.market-ad-loadfx em{animation:none!important}.market-ad--hero-side-loading .market-ad-media > img{transition:none!important}}


/* Compact category/subcategory filters with Show More */
.filter-more-btn,.subcat-more-btn{font-weight:700;letter-spacing:.01em;border-style:dashed!important;opacity:.92}
.filter-more-btn:hover,.subcat-more-btn:hover{opacity:1}
/* Hero-side transparent PNG ads: never add a card/background behind the artwork. */
.ad-slot--hero-side .market-ad--hero-side-loading,.ad-slot--hero-side .market-ad{background:transparent!important}
.ad-slot--hero-side .market-ad-media,.ad-slot--hero-side .market-ad-media--ratio{background:transparent!important;box-shadow:none!important}
.ad-slot--hero-side .market-ad-media img{background:transparent!important}


.filter-more-btn,.subcat-more-btn{font-weight:700;letter-spacing:.01em;border-style:dashed!important;opacity:.92}
.filter-more-btn:hover,.subcat-more-btn:hover{opacity:1}
.ad-slot--hero-side .market-ad--hero-side-loading,.ad-slot--hero-side .market-ad{background:transparent!important}
.ad-slot--hero-side .market-ad-media,.ad-slot--hero-side .market-ad-media--ratio{background:transparent!important;box-shadow:none!important}
.ad-slot--hero-side .market-ad-media img{background:transparent!important}


/* Hero-side PNG ads: transparency must belong to the whole rendering chain,
   not only the image element, so no white/light or dark card can appear behind
   genuinely transparent artwork. */
.ad-slot--hero-side .market-ad--transparent-png,
.mobile-hero-side-ad-slot .market-ad--transparent-png{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
.ad-slot--hero-side .market-ad--transparent-png .market-ad-media,
.mobile-hero-side-ad-slot .market-ad--transparent-png .market-ad-media{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
}
.ad-slot--hero-side .market-ad--transparent-png .market-ad-media img,
.mobile-hero-side-ad-slot .market-ad--transparent-png .market-ad-media img{
  background:transparent!important;
  border:0!important;
  mix-blend-mode:normal!important;
}
@media (min-width:801px){
  .hero-side-floaters .hero-float-analytics{
    min-width:112px;
    max-width:122px;
    padding:8px 9px;
    animation:heroAnalyticsFloat 4.2s ease-in-out infinite;
    will-change:transform;
  }
  .hero-side-floaters .hero-float-analytics .hero-float-icon{
    width:22px;height:22px;flex-basis:22px;
  }
  .hero-side-floaters .hero-float-analytics .hero-float-icon svg{
    width:16px;height:16px;
  }
  .hero-side-floaters .hero-float-analytics:nth-child(2){animation-delay:-1.05s}
  .hero-side-floaters .hero-float-analytics:nth-child(3){animation-delay:-2.1s}
  .hero-side-floaters .hero-float-analytics:nth-child(4){animation-delay:-3.15s}
}
@keyframes heroAnalyticsFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-5px,0)}
}
.mobile-hero-side-ad-slot{background:transparent!important}


/* FINAL: AI Opportunities is an exact visual copy of the Community glass CTA. */
.hero-opportunity-btn,
.hero-community-btn{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  color:inherit!important;
  box-shadow:0 8px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.16)!important;
  backdrop-filter:blur(10px) saturate(125%);
  -webkit-backdrop-filter:blur(10px) saturate(125%);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;
}
.hero-opportunity-btn::before,
.hero-community-btn::before{
  content:"";
  position:absolute;
  top:-80%; bottom:-80%; left:-45%; width:28%;
  transform:skewX(-22deg) translateX(-260%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.72),rgba(255,255,255,.08),transparent);
  filter:blur(1px); pointer-events:none; z-index:-1;
  animation:communityPremiumShine 3.8s ease-in-out infinite;
}
.hero-opportunity-btn::after,
.hero-community-btn::after{
  content:""; position:absolute; inset:1px; border-radius:inherit;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.13) 50%,transparent 64%);
  opacity:.7; pointer-events:none;
}
.hero-opportunity-btn:hover,
.hero-opportunity-btn:focus-visible,
.hero-community-btn:hover,
.hero-community-btn:focus-visible{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.55)!important;
  color:inherit!important;
  transform:translateY(-1px);
  box-shadow:0 12px 34px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
[data-theme="colorful"] .hero-opportunity-btn,
[data-theme="colorful"] .hero-opportunity-btn:hover,
[data-theme="colorful"] .hero-opportunity-btn:focus-visible{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(17,17,15,.30)!important;
  color:#fff!important;
}
[data-theme="light"] .hero-opportunity-btn{
  background:rgba(255,255,255,.96)!important;
  color:var(--ink)!important;
  border-color:rgba(17,17,15,.16)!important;
  box-shadow:0 8px 24px rgba(17,17,15,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
[data-theme="light"] .hero-opportunity-btn::before{
  z-index:0;
  background:linear-gradient(90deg,transparent,rgba(245,196,0,.10),rgba(245,196,0,.82),rgba(255,255,255,.96),rgba(245,196,0,.18),transparent);
  animation:communityPremiumShine 3.2s ease-in-out infinite;
}
[data-theme="light"] .hero-opportunity-btn::after{
  z-index:1;
  background:linear-gradient(115deg,transparent 0%,rgba(245,196,0,.05) 38%,rgba(245,196,0,.18) 50%,transparent 64%);
}
[data-theme="light"] .hero-opportunity-btn:hover,
[data-theme="light"] .hero-opportunity-btn:focus-visible{
  color:var(--ink)!important;
  border-color:rgba(245,196,0,.62)!important;
}

/* Mobile: Popular Tools symbol should match the recognizable Virel Prompts symbol scale. */
@media(max-width:700px){
  .hero-popular-btn > svg{width:22px!important;height:22px!important;flex:0 0 22px!important;}
  .hero-browse-btn > svg{width:22px!important;height:22px!important;flex:0 0 22px!important;}
}

/* FINAL: premium horizontal-strip/glitch reveal for hero-side images */
.market-ad--hero-side-loading .market-ad-media{background:transparent!important;position:relative;overflow:hidden!important;}
.market-ad--hero-side-loading .market-ad-media > img{opacity:1!important;filter:saturate(.92);}
.market-ad-loadfx{position:absolute;inset:0;display:grid;grid-template-rows:repeat(9,1fr);z-index:2;pointer-events:none;overflow:hidden;}
.market-ad-loadfx i,.market-ad-loadfx b{position:relative;display:block;width:100%;height:100%;background:linear-gradient(90deg,rgba(8,8,10,.98),rgba(35,35,40,.90),rgba(8,8,10,.98));box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 12px rgba(0,0,0,.12);transform:scaleX(1);}
.market-ad-loadfx i{grid-row:1/4;transform-origin:left center;animation:heroStripLeft .82s cubic-bezier(.72,0,.18,1) forwards;}
.market-ad-loadfx b{grid-row:4/7;transform-origin:right center;animation:heroStripRight .92s cubic-bezier(.72,0,.18,1) .08s forwards;}
.market-ad-loadfx em{grid-row:7/10;display:block;background:repeating-linear-gradient(180deg,rgba(255,255,255,.10) 0 2px,rgba(255,255,255,0) 2px 8px);animation:heroStripNoise .78s steps(5,end) .16s forwards;}
.market-ad-loadfx span{display:none!important;}
.market-ad--hero-side-loading.is-ad-loaded .market-ad-loadfx{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;}
@keyframes heroStripLeft{0%{transform:scaleX(1);opacity:1}55%{transform:scaleX(.35);opacity:.9}100%{transform:scaleX(0);opacity:0}}
@keyframes heroStripRight{0%{transform:scaleX(1);opacity:1}48%{transform:scaleX(.42);opacity:.85}100%{transform:scaleX(0);opacity:0}}
@keyframes heroStripNoise{0%{transform:translateX(0);opacity:1}30%{transform:translateX(-5px);opacity:.9}55%{transform:translateX(7px);opacity:.65}100%{transform:translateX(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.market-ad-loadfx{display:none!important}.market-ad--hero-side-loading .market-ad-media > img{opacity:1!important;filter:none!important;}}

/* FINAL POLISH: truly transparent glass navbar */
.site-header .header-inner{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%)!important;
}
[data-theme="light"] .site-header .header-inner{
  background:rgba(255,255,255,.48)!important;
  border-color:rgba(17,17,15,.12)!important;
  box-shadow:0 10px 28px rgba(17,17,15,.08), inset 0 1px 0 rgba(255,255,255,.72)!important;
}
[data-theme="dark"] .site-header .header-inner{
  background:rgba(12,12,14,.30)!important;
  border-color:rgba(255,255,255,.14)!important;
}
[data-theme="colorful"] .site-header .header-inner{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.20)!important;
}

/* FINAL HERO-SIDE LOADING: looping glitch/scanline effect until the image really loads. */
.market-ad--hero-side-loading .market-ad-media{background:transparent!important;position:relative;overflow:hidden!important;isolation:isolate;}
.market-ad--hero-side-loading .market-ad-media > img{
  opacity:.10!important;
  filter:saturate(.55) contrast(1.12) blur(1.2px)!important;
  transform:scale(1.012)!important;
  transition:opacity .22s ease,filter .22s ease,transform .22s ease!important;
}
.market-ad--hero-side-loading.is-ad-loaded .market-ad-media > img{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
.market-ad-loadfx{
  position:absolute!important;inset:0!important;display:block!important;z-index:3!important;
  pointer-events:none!important;overflow:hidden!important;opacity:1!important;visibility:visible!important;
  background:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.055) 5px 6px),
    linear-gradient(90deg,rgba(0,0,0,.10),transparent 24%,rgba(255,255,255,.055) 50%,transparent 76%,rgba(0,0,0,.10));
  mix-blend-mode:screen;
  animation:heroGlitchFlicker .9s steps(2,end) infinite;
}
.market-ad-loadfx i,
.market-ad-loadfx b,
.market-ad-loadfx em{
  position:absolute!important;display:block!important;border:0!important;border-radius:0!important;font-style:normal!important;
  width:100%!important;height:auto!important;left:-8%!important;right:auto!important;
  background:rgba(255,255,255,.10)!important;box-shadow:none!important;
  animation:heroGlitchSlice 1.15s steps(5,end) infinite!important;
}
.market-ad-loadfx i{top:18%;height:3px!important;}
.market-ad-loadfx b{top:53%;height:7px!important;animation-delay:-.42s!important;background:rgba(255,255,255,.055)!important;}
.market-ad-loadfx em{top:78%;height:2px!important;animation-delay:-.77s!important;background:rgba(255,255,255,.12)!important;}
.market-ad-loadfx span{display:none!important;}
.market-ad--hero-side-loading.is-ad-loaded .market-ad-loadfx{
  opacity:0!important;visibility:hidden!important;transition:opacity .18s ease,visibility .18s ease!important;
}
@keyframes heroGlitchSlice{
  0%,100%{transform:translateX(-6%) scaleX(1);opacity:.18}
  18%{transform:translateX(19%) scaleX(.82);opacity:.62}
  31%{transform:translateX(-12%) scaleX(1.14);opacity:.28}
  47%{transform:translateX(7%) scaleX(.76);opacity:.72}
  63%{transform:translateX(-2%) scaleX(1.08);opacity:.22}
  79%{transform:translateX(24%) scaleX(.62);opacity:.55}
}
@keyframes heroGlitchFlicker{
  0%,100%{opacity:.72;transform:translateX(0)}
  23%{opacity:.88;transform:translateX(1px)}
  24%{opacity:.48;transform:translateX(-2px)}
  57%{opacity:.82;transform:translateX(0)}
  58%{opacity:.42;transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce){
  .market-ad-loadfx,.market-ad-loadfx i,.market-ad-loadfx b,.market-ad-loadfx em{animation:none!important}
  .market-ad--hero-side-loading .market-ad-media > img{opacity:1!important;filter:none!important;transform:none!important;}
  .market-ad--hero-side-loading .market-ad-loadfx{display:none!important;}
}


/* ═══════════════════════════════════════════════════════════════
   FINAL HERO BACKGROUND AD FIX
   The admin-selected hero background ad fills the complete hero
   block edge-to-edge with no visible margin/gap.
═══════════════════════════════════════════════════════════════ */
.hero:has(.ad-slot--hero-bg:not([hidden])) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.hero:has(.ad-slot--hero-bg:not([hidden])) .ad-slot--hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.hero:has(.ad-slot--hero-bg:not([hidden])) .ad-slot--hero-bg .market-ad,
.hero:has(.ad-slot--hero-bg:not([hidden])) .ad-slot--hero-bg .market-ad-media {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.hero:has(.ad-slot--hero-bg:not([hidden])) .ad-slot--hero-bg .market-ad-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

/* The desktop navbar overlap adjustment still keeps the ad continuous
   across the whole hero instead of leaving a top strip/gap. */
@media (min-width: 801px) {
  .hero:has(.ad-slot--hero-bg:not([hidden])) .ad-slot--hero-bg {
    top: -64px !important;
    height: calc(100% + 64px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FINAL TOOL ACTION ICONS
   Like / dislike remain icon-only. The save/bookmark button keeps
   its outline; when saved, its outline + icon follow the theme text
   color (dark in light theme, white in dark theme).
═══════════════════════════════════════════════════════════════ */
.like-btn,
.dislike-btn {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.like-btn:hover,
.like-btn:focus-visible,
.dislike-btn:hover,
.dislike-btn:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tools-card save button: outline is intentionally visible. */
.service-card .wishlist-btn {
  border: 1.5px solid var(--border) !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.service-card .wishlist-btn:hover,
.service-card .wishlist-btn:focus-visible {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Saved state: theme-aware — light = dark, dark = white. */
.service-card .wishlist-btn.wishlisted {
  border-color: var(--ink) !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.service-card .wishlist-btn.wishlisted svg {
  fill: currentColor !important;
  color: currentColor !important;
}

[data-theme="dark"] .like-btn:not(.liked),
[data-theme="dark"] .dislike-btn:not(.disliked),
[data-theme="colorful"] .like-btn:not(.liked),
[data-theme="colorful"] .dislike-btn:not(.disliked) {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .like-btn:hover:not(.liked),
[data-theme="dark"] .like-btn:focus-visible:not(.liked),
[data-theme="dark"] .dislike-btn:hover:not(.disliked),
[data-theme="dark"] .dislike-btn:focus-visible:not(.disliked),
[data-theme="colorful"] .like-btn:hover:not(.liked),
[data-theme="colorful"] .like-btn:focus-visible:not(.liked),
[data-theme="colorful"] .dislike-btn:hover:not(.disliked),
[data-theme="colorful"] .dislike-btn:focus-visible:not(.disliked) {
  background: transparent !important;
  border: 0 !important;
}

.like-btn.liked {
  color: #15803d !important;
}

.dislike-btn.disliked {
  color: #b91c1c !important;
}

.wishlist-btn.wishlisted {
  color: #8B5CF6 !important;
}

/* Mobile hero background ad: preserve the source image's aspect ratio.
   Desktop behavior remains unchanged. On narrow screens, avoid forcing a
   desktop banner into the tall mobile hero box, which makes the artwork
   appear distorted/cropped. */
@media (max-width: 800px) {
  .ad-slot--hero-bg .market-ad-media {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ad-slot--hero-bg .market-ad-media img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* Grid Show More card */
.tools-grid .tools-show-more-card{min-height:100%;min-width:0;border:1.5px solid var(--border);border-radius:14px;background:var(--card-bg);box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;padding:22px;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition)}
.tools-grid .tools-show-more-card:hover{transform:translateY(-2px);border-color:var(--accent-ring);box-shadow:var(--shadow-card-hover)}
.tools-grid .tools-show-more-card .show-more-btn{width:100%;min-width:0;min-height:100%;border:0;background:transparent;color:var(--ink);box-shadow:none;font-weight:800;font-size:14px}
.tools-grid .tools-show-more-card .show-more-btn:hover{background:transparent;color:var(--ink)}
.hero-pills--browse{margin:0 auto 12px;justify-content:center}
@media (max-width:800px){.tools-grid .tools-show-more-card{min-height:220px}}
/* Public inner-page Home button */
.site-home-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card-bg);color:var(--ink);text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap;transition:background var(--transition),border-color var(--transition),transform var(--transition)}
.site-home-btn:hover{border-color:var(--accent-ring);transform:translateY(-1px)}
.site-home-nav{position:fixed;top:14px;right:18px;z-index:1000}

.op-header .container{display:flex;align-items:center;justify-content:space-between;gap:10px}
.op-header .container > .site-home-btn{margin-left:auto}
.op-header .container > .site-home-btn + .btn{margin-left:0}

/* Admin-controlled tools visual system */
.tools-grid{position:relative;padding:14px;border-radius:24px;background:color-mix(in srgb,var(--tools-bg-color,#f4f4f4) calc(var(--tools-bg-opacity,0) * 100%), transparent);background-image:var(--tools-bg-image,none);background-size:cover;background-position:center;overflow:visible}
.tools-grid::before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;opacity:.5;background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 34%),radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 38%)}
html[data-tools-bg-effect="glow"] .tools-grid::before{filter:blur(12px);opacity:.7}
html[data-tools-bg-effect="dots"] .tools-grid::before{background-image:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent) 1px,transparent 1.5px);background-size:22px 22px;opacity:.32}
html[data-tools-bg-effect="mesh"] .tools-grid::before{background:linear-gradient(120deg,transparent 0 30%,color-mix(in srgb,var(--accent) 10%,transparent) 50%,transparent 70%);opacity:.35}
.tool-cards-glass .service-card{background:color-mix(in srgb,var(--card-bg) 58%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:color-mix(in srgb,var(--border) 72%,transparent);box-shadow:0 12px 34px rgba(0,0,0,.08)}
.filter-cats,.subcats-pills{display:flex;gap:12px;overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x proximity;padding:7px 3px 10px;scrollbar-width:none}
.filter-cats::-webkit-scrollbar,.subcats-pills::-webkit-scrollbar{display:none}
.filter-cat,.subcat-pill{flex:0 0 auto;min-width:118px;min-height:58px;border:1px solid var(--border);border-radius:16px;background:var(--card-bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-weight:750;box-shadow:var(--shadow-sm);scroll-snap-align:start}
.filter-cat img,.subcat-pill img{width:24px;height:24px;object-fit:contain;border-radius:6px}
.filter-icon-fallback{font-size:18px;opacity:.7}
.tool-pin-badge{display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
.tools-show-more-card{align-self:stretch}
.tools-show-more-card .show-more-btn{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
@keyframes miniBotTravelCute{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  8%{transform:translate3d(calc(var(--bot-dx) * .06),calc(var(--bot-dy) * .06),0) rotate(-5deg) scale(1.03)}
  18%{transform:translate3d(calc(var(--bot-dx) * .16),calc(var(--bot-dy) * .16),0) rotate(7deg) scale(1.07)}
  30%{transform:translate3d(calc(var(--bot-dx) * .32),calc(var(--bot-dy) * .32),0) rotate(-8deg) scale(1.05)}
  42%{transform:translate3d(calc(var(--bot-dx) * .52),calc(var(--bot-dy) * .52),0) rotate(7deg) scale(1.09)}
  50%{transform:translate3d(var(--bot-dx),var(--bot-dy),0) rotate(0deg) scale(1.02)}
  58%{transform:translate3d(calc(var(--bot-dx) * .84),calc(var(--bot-dy) * .84),0) rotate(-7deg) scale(1.08)}
  70%{transform:translate3d(calc(var(--bot-dx) * .64),calc(var(--bot-dy) * .64),0) rotate(7deg) scale(1.06)}
  82%{transform:translate3d(calc(var(--bot-dx) * .42),calc(var(--bot-dy) * .42),0) rotate(-6deg) scale(1.04)}
  92%{transform:translate3d(calc(var(--bot-dx) * .18),calc(var(--bot-dy) * .18),0) rotate(4deg) scale(1.02)}
  100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
.site-header .ai-bot-logo.mini-bot-moving{position:relative;z-index:2200;animation:miniBotTravelCute var(--bot-duration,4s) cubic-bezier(.2,.78,.22,1) both;filter:drop-shadow(0 7px 16px rgba(0,0,0,.18))}
.site-header .ai-bot-logo.mini-bot-moving .ai-bot-svg{animation:aiBotCuteBounce .45s ease-in-out infinite alternate}
@keyframes aiBotCuteBounce{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)}}
@media(max-width:700px){.filter-cat,.subcat-pill{min-width:104px;min-height:54px}.tools-grid{padding:10px;border-radius:20px}.site-header .ai-bot-logo{z-index:2200}}

/* Category/subcategory horizontal scrollers: keep overflow inside the filter row */
.filter-bar,
.subcats-bar {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.filter-cats,
.subcats-pills {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  scrollbar-width: none;
}

.filter-cats::-webkit-scrollbar,
.subcats-pills::-webkit-scrollbar { display: none; }

.filter-cat,
.subcat-pill {
  flex: 0 0 auto !important;
  max-width: none;
}

@media (max-width: 800px) {
  .filter-bar { width: 100%; }
  .filter-cats,
  .subcats-pills { width: 100%; }
}

/* Prevent a wide filter control from creating page-level horizontal scrolling. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Final UI polish: consistent mascot, labels, and permanently sticky navbar */
.site-header{position:fixed!important;top:8px!important;left:0!important;right:0!important;width:100%!important;z-index:10000!important;transform:none!important;}
.header-actions{margin-left:auto!important;display:flex;align-items:center;gap:8px;}
.site-header .ai-bot-logo{width:32px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--ink)!important;}
.site-header .ai-bot-svg{width:32px!important;height:32px!important;display:block!important;}
.filter-label,.subfilter-label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:2px 0 6px;padding-left:2px;}
.subfilter-label{margin-top:4px;}
.tools-block-title{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:18px 0 10px;}

/* External admin-published social/web posts */
.external-posts{display:grid;gap:18px;margin:0 0 22px}
.external-post-card{padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--card-bg,rgba(255,255,255,.04));overflow:hidden}
.external-post-caption{font-weight:600;line-height:1.55;margin-bottom:14px;color:var(--ink)}
.external-preview-image{width:100%;max-width:760px;margin:0 auto 14px;border-radius:14px;overflow:hidden;background:var(--off,rgba(0,0,0,.04));border:1px solid var(--border)}
.external-preview-image img{display:block;width:100%;max-height:560px;object-fit:cover}
.external-post-card blockquote{margin:0 auto!important;max-width:550px}
.external-video{position:relative;width:100%;max-width:760px;margin:auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.external-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.external-link-card{min-height:90px;padding:18px;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:6px;background:var(--off,rgba(0,0,0,.03))}
.external-link-card span{font-size:13px;color:var(--muted)}

/* External post clarity + embed fallback */
.external-post-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border);font-size:12px}
.external-post-platform{display:inline-flex;align-items:center;gap:6px;font-weight:800;letter-spacing:.02em}
.external-post-meta a{color:var(--accent);font-weight:700;text-decoration:none}
.external-embed-wrap{position:relative}
.external-embed-fallback{display:flex;justify-content:center;margin-top:8px;font-size:12px}
.external-embed-fallback a{color:var(--muted);text-decoration:underline}
.external-post-card .instagram-media,.external-post-card .twitter-tweet{min-height:180px}

@keyframes miniBotPeek{0%,100%{opacity:1;transform:translateY(0) rotate(0)}35%{opacity:.2;transform:translateY(-3px) rotate(-5deg)}55%{opacity:.15;transform:translateY(2px) rotate(5deg)}72%{opacity:1;transform:translateY(0) rotate(0)}}
.site-header .ai-bot-logo.mini-bot-moving{will-change:transform,opacity;}
.site-header .ai-bot-logo.mini-bot-peek .ai-bot-svg{animation:miniBotPeek 1.15s ease-in-out both;}

/* ═════════════════════ AI COMPARISON + SHOWCASE ═════════════════════ */
.feature-section{padding:56px 0;border-top:1px solid var(--border)}
.feature-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.section-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.compare-panel{border:1px solid var(--border);border-radius:24px;background:var(--card-bg,rgba(255,255,255,.04));padding:18px;box-shadow:0 12px 35px rgba(0,0,0,.05)}
.compare-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.compare-search-wrap{flex:1 1 280px}.compare-search-wrap input{width:100%;min-height:44px;border:1px solid var(--border);border-radius:12px;background:var(--input-bg,var(--bg));color:var(--ink);padding:0 14px;font:inherit}
.compare-count{font-size:13px;font-weight:800;color:var(--muted);margin-left:auto}.compare-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-height:330px;overflow:auto;padding:3px}
.compare-tool-option{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:15px;cursor:pointer;background:var(--bg);transition:.18s ease}.compare-tool-option:hover,.compare-tool-option.is-selected{border-color:var(--accent);transform:translateY(-1px)}
.compare-tool-option input{accent-color:var(--accent)}.compare-tool-logo{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center;background:var(--off,rgba(0,0,0,.05));font-weight:900;overflow:hidden}.compare-tool-logo img{width:100%;height:100%;object-fit:contain}.compare-tool-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.compare-tool-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-tool-copy small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-selected{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.compare-chip{border:1px solid var(--accent);background:transparent;color:var(--ink);border-radius:999px;padding:7px 11px;cursor:pointer}.compare-result{margin-top:20px;border-top:1px solid var(--border);padding-top:18px}.compare-result-head{display:flex;justify-content:space-between;margin-bottom:12px}.compare-result-head strong{display:block;font-size:18px}.compare-result-head small{color:var(--muted)}.compare-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px}.compare-table{border-collapse:collapse;min-width:max(720px,100%);width:max-content}.compare-table th,.compare-table td{padding:13px 14px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:left;vertical-align:top;max-width:280px}.compare-table thead th{background:var(--off,rgba(0,0,0,.04));position:sticky;top:0;z-index:1}.compare-table tbody th{background:var(--off,rgba(0,0,0,.025));font-size:12px;white-space:nowrap}.compare-table-tool{display:flex;align-items:center;gap:8px;min-width:150px}.compare-table-tool img{width:28px;height:28px;object-fit:contain;border-radius:7px}.compare-table a,.showcase-link{color:var(--accent);font-weight:800;text-decoration:none}.compare-empty,.showcase-loading{padding:24px;text-align:center;color:var(--muted)}
.showcase-heading-row{align-items:center}.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.showcase-card{overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--card-bg,rgba(255,255,255,.04));box-shadow:0 10px 28px rgba(0,0,0,.05)}.showcase-image{aspect-ratio:16/9;background:var(--off,rgba(0,0,0,.05));overflow:hidden}.showcase-image img{width:100%;height:100%;object-fit:cover}.showcase-card-body{padding:17px}.showcase-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin-bottom:9px}.showcase-card h3{margin:0 0 8px;font-size:18px}.showcase-card p{margin:0 0 13px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.showcase-empty{grid-column:1/-1;border:1px dashed var(--border);border-radius:20px;padding:40px 20px;text-align:center;display:flex;flex-direction:column;gap:7px;color:var(--muted)}.showcase-empty strong{color:var(--ink);font-size:17px}.showcase-empty-icon{font-size:28px;color:var(--accent)}
.showcase-modal{max-width:620px}.showcase-form{display:grid;gap:14px}.showcase-form label{display:grid;gap:7px;font-size:13px;font-weight:800}.showcase-form input,.showcase-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:var(--input-bg,var(--bg));color:var(--ink);padding:11px 12px;font:inherit;resize:vertical}.field-hint{font-weight:500;color:var(--muted)}.showcase-form-actions{display:flex;justify-content:flex-end;gap:9px}.showcase-form-error{color:#c62828;font-size:13px;min-height:18px}
@media(max-width:900px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.feature-section{padding:42px 0}.feature-heading-row{align-items:flex-start;flex-direction:column}.showcase-grid{grid-template-columns:1fr}.compare-toolbar .btn{flex:1}.compare-count{margin-left:0}.compare-picker{grid-template-columns:1fr}}

/* Additional ad placements and post-showcase reveal */
.ad-slot--tools-top,.ad-slot--comparison-top,.ad-slot--showcase-top,
.adsense-slot--tools-top,.adsense-slot--comparison-top,.adsense-slot--showcase-top{width:100%;max-width:1180px;margin:0 auto 18px;padding-inline:22px;box-sizing:border-box}
.below-showcase-more-wrap{display:flex;justify-content:center;padding:4px 22px 28px}
.below-showcase-more-btn{min-width:140px}
@media(max-width:600px){
  .ad-slot--tools-top,.ad-slot--comparison-top,.ad-slot--showcase-top,
  .adsense-slot--tools-top,.adsense-slot--comparison-top,.adsense-slot--showcase-top{padding-inline:15px}
  .prompts-nav-inner{padding-inline:15px;min-height:64px;gap:8px}
  .prompts-nav-links{gap:0}
  .prompts-nav-link{padding:8px 7px;font-size:12px}
  .prompts-auth-btn{padding:8px 10px;font-size:12px}
}


/* FINAL REQUESTED POLISH — yellow theme mascot + theme control */
[data-theme="colorful"] .site-header .ai-bot-logo{color:var(--accent)!important;}
[data-theme="colorful"] .site-header .ai-bot-logo .bot-eye{fill:#11110F!important;}
[data-theme="colorful"] .site-header .ai-bot-logo .bot-ear{stroke:var(--accent)!important;}
[data-theme="colorful"] .theme-toggle{width:38px!important;height:34px!important;border-radius:12px!important;color:#11110F!important;background:linear-gradient(135deg,#FFD21F,#E3B900)!important;border:1px solid #FFD21F!important;box-shadow:0 5px 16px rgba(255,210,31,.22),inset 0 1px 0 rgba(255,255,255,.45)!important;}
[data-theme="colorful"] .theme-toggle:hover{background:linear-gradient(135deg,#FFE04A,#FFD21F)!important;border-color:#FFE04A!important;color:#11110F!important;transform:translateY(-1px) rotate(8deg) scale(1.05)!important;box-shadow:0 8px 22px rgba(255,210,31,.30),inset 0 1px 0 rgba(255,255,255,.5)!important;}
[data-theme="colorful"] .theme-toggle .theme-icon--color{stroke:#11110F!important;}

/* Yellow theme mascot: yellow shell + visible yellow eyes */
[data-theme="colorful"] .site-header .ai-bot-logo{color:#FFD400!important;}
[data-theme="colorful"] .site-header .ai-bot-svg{color:#FFD400!important;}
[data-theme="colorful"] .site-header .ai-bot-svg .bot-eye{fill:#FFD400!important;}
[data-theme="colorful"] .site-header .ai-bot-svg .bot-ear{stroke:#FFD400!important;}
[data-theme="colorful"] .site-header .ai-bot-svg .bot-eye + circle{fill:#FFD400!important;}
/* Keep theme control circular; update only the colorful-theme inner mark. */
.theme-toggle{border-radius:50%!important;}
[data-theme="colorful"] .theme-toggle .theme-icon--color circle:first-child{fill:transparent;}
[data-theme="colorful"] .theme-toggle .theme-icon--color path{stroke-width:2.4;}


/* Google sign-in + email verification */
.auth-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--surface);color:var(--text-primary);border:1px solid var(--border);font-weight:600;margin-bottom:14px}
.auth-google-btn:hover{background:var(--bg)}
.google-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-weight:800;font-size:15px;background:#fff;color:#4285f4;border:1px solid rgba(0,0,0,.12)}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:11px;margin:2px 0 16px;text-transform:uppercase;letter-spacing:.06em}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border);flex:1}
.auth-verify-panel{text-align:center}
.verify-icon{font-size:42px;line-height:1;margin:4px 0 16px}
.verify-steps{text-align:left;border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:12px 14px;margin:18px 0 12px}
.verify-steps div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-secondary);padding:6px 0}
.verify-steps b{color:var(--text-primary);min-width:16px}
.auth-verify-note{font-size:12px;color:var(--text-muted);margin:0 0 16px}
.auth-verify-resend{color:var(--text-primary);border:1px solid var(--border);margin-top:9px}
.auth-verify-logout{color:var(--text-muted);font-size:12px;margin-top:4px}

/* ═══════════════════ EMAIL VERIFICATION SCREEN ═══════════════════ */
.verification-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(8,10,12,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.verification-overlay[hidden]{display:none}
.verification-card{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:34px 30px 26px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 24px 80px rgba(0,0,0,.28);text-align:center}
.verification-icon{width:62px;height:62px;margin:0 auto 14px;display:grid;place-items:center;border-radius:18px;background:var(--surface-2);font-size:29px}
.verification-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--text-muted);margin-bottom:8px}
.verification-card h2{margin:0;font-size:28px;letter-spacing:-.02em}
.verification-lead{margin:8px 0 18px;color:var(--text-secondary);font-size:14px}
.verification-email-wrap{padding:13px 16px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px;margin-bottom:20px;font-size:12px;color:var(--text-muted)}
.verification-email-wrap strong{color:var(--text);font-size:14px;overflow-wrap:anywhere}
.verification-steps{list-style:none;margin:0;padding:0;text-align:left;display:grid;gap:11px}
.verification-steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.verification-steps li>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--surface);font-size:12px;font-weight:800}
.verification-note{font-size:12px;color:var(--text-muted);margin:18px 0}
.verification-actions{display:grid;gap:9px}
.verification-logout{border:0;background:none;color:var(--text-muted);font-size:12px;padding:8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.verification-status{min-height:18px;margin:9px 0 0;font-size:12px;color:var(--text-muted)}
@media (max-width:520px){.verification-card{padding:28px 20px 22px;border-radius:20px}.verification-card h2{font-size:24px}}

/* Per-user ad preference: hide Google Auto Ads for users with ads disabled.
   Hero background and Hero-Side manual ads are rendered separately and are not affected. */
html[data-user-ads-disabled="true"] .google-auto-placed,
html[data-user-ads-disabled="true"] ins.adsbygoogle {
  display: none !important;
}