/* ════════════════════════════════
   CREATORAIHUB — GLOBAL HEADER
   ════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(10, 10, 20, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(124,58,237,0.18);
  transition: background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: visible;
}

/* ── LOGO ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  flex-shrink: 0;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.nav-logo-text {
  font-size: 15.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

/* ── RESET main.css nav-item background ────────────────────────────
   main.css (styles/main.css) contains a legacy ".nav-item:hover"
   rule that sets background-color:#f3f4f6 (near-white) on the <li>
   container. That produces the white rectangle the user sees around
   the nav pill on hover/click. Override it here so the <li> is always
   transparent — only the <a.nav-link> pill ever gets coloured. */
.nav-links .nav-item,
.nav-links .nav-item:hover,
.nav-links .nav-item:focus,
.nav-links .nav-item:focus-within,
.nav-links .nav-item.active,
.nav-links .nav-item.has-dropdown:hover {
  background-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
}

/* ── DESKTOP NAV LINKS ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav-item {
  position: relative;
}

/* ── FIT-ON-ONE-LINE OVERRIDES ──────────────────────────────────────
   styles/main.css (loaded on index.html) leaks a legacy layout rule
   ".nav-item { padding:0.75rem; gap:0.75rem }" onto the shared header.
   That inflates every one of the 9 nav items by ~24px, pushing the
   right-side CTA (Contact + "Free Tools →") off the edge so it appears
   cut off. Reset those to the compact header design so all nav items
   and the Free Tools button sit on one line with consistent spacing.
   Colours, fonts and sizes are unchanged. */
.nav-links .nav-item {
  padding: 0;
  gap: 0;
}
.nav-links .nav-link {
  padding: 7px 12px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 7px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.22);
}

/* ── Kill the browser's white click-flash on every nav link ──────────
   When a user clicks a non-active tab (e.g. clicking Bundles from /),
   the browser briefly shows its default :focus ring and a white/light
   :active background before the new page loads. We suppress ALL of that
   so the tab only ever shows hover-purple or active-purple — never
   white. High specificity (ul.nav-links li a.nav-link) beats anything
   that might be added by page-level inline styles. */
ul.nav-links li a.nav-link,
ul.nav-links li a.nav-link:focus,
ul.nav-links li a.nav-link:focus-visible,
ul.nav-links li a.nav-link:active,
ul.nav-links li a.nav-link:visited {
  outline: 0 none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-focus-ring-color: transparent !important;
}

/* Mouse-click focus on a non-active tab: render as transparent (let
   :hover show through if the mouse is still over the element). Never
   white. */
ul.nav-links li a.nav-link:focus:not(:focus-visible):not(.nav-active),
ul.nav-links li a.nav-link:active:not(.nav-active) {
  background: rgba(124, 58, 237, 0.12) !important;
  background-color: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Keyboard-focus (Tab key) on a non-active tab: same subtle purple as
   hover. Still no white. */
ul.nav-links li a.nav-link:focus-visible:not(.nav-active) {
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3) !important;
}

/* Active tab — solid filled purple pill, identical in every state
   (rest, hover, focus, focus-visible, active/mouse-down, and when the
    dropdown is open). The selector list is duplicated rather than using
    :is() so older browsers still match each state correctly. */
.nav-link.nav-active,
.nav-link.nav-active:hover,
.nav-link.nav-active:focus,
.nav-link.nav-active:focus-visible,
.nav-link.nav-active:active,
.has-dropdown:hover > .nav-link.nav-active,
.has-dropdown.dd-open > .nav-link.nav-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  background-color: #7c3aed !important;
  border: 1px solid rgba(167, 139, 250, 0.9) !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.35),
    0 4px 14px rgba(124, 58, 237, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  font-weight: 600 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.nav-link.nav-active:hover,
.has-dropdown:hover > .nav-link.nav-active,
.has-dropdown.dd-open > .nav-link.nav-active {
  background: linear-gradient(135deg, #9d6bff 0%, #8b5cf6 100%) !important;
  background-color: #8b5cf6 !important;
}

.nav-link.nav-active .nav-chevron,
.nav-link.nav-active:hover .nav-chevron {
  opacity: 1 !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* chevron icon */
.nav-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.55;
}

.has-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── DROPDOWN MENU ── */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: rgba(11, 11, 22, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 14px;
  padding: 8px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 0.2s ease,
              transform 0.2s ease,
              visibility 0.2s ease;
  pointer-events: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

/* Invisible bridge — keeps dropdown open when
   mouse moves from trigger into the panel */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

.has-dropdown:hover .nav-dropdown,
.nav-dropdown.dd-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Keep dropdown open while mouse is inside it */
.nav-dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.nav-dropdown-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.28);
  padding: 4px 10px 6px;
}

.nav-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 5px 0;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-dropdown-item:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.18);
}

.nav-di-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.nav-di-purple { background: rgba(124,58,237,0.18); }
.nav-di-blue   { background: rgba(99,102,241,0.18); }
.nav-di-teal   { background: rgba(20,184,166,0.18); }
.nav-di-amber  { background: rgba(245,158,11,0.18); }

.nav-di-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

.nav-di-desc {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-top: 2px;
  line-height: 1.3;
}

/* ── RIGHT SIDE CTAs ── */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-cta-ghost {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 7px;
  text-decoration: none;
  color: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.1);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.nav-cta-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
}

.nav-cta-primary {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 7px;
  text-decoration: none;
  color: #ffffff;
  background: #7c3aed;
  border: 1px solid #7c3aed;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}

.nav-cta-primary:hover {
  background: #6d28d9;
  border-color: #6d28d9;
  transform: translateY(-1px);
}

.nav-cta-primary:active {
  transform: translateY(0);
}

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.nav-hamburger:hover {
  border-color: rgba(124,58,237,0.4);
  background: rgba(124,58,237,0.08);
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(255,255,255,0.65);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── MOBILE MENU ── */
.nav-mobile-menu {
  display: none;
  background: rgba(9, 9, 20, 0.98);
  border-top: 1px solid rgba(124,58,237,0.12);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s ease;
}

.nav-mobile-menu.open {
  max-height: 1100px;
}

.nav-mobile-inner {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 1.25rem;
}

.nav-mobile-item {
  display: block;
  text-decoration: none;
  border-radius: 9px;
  border: 0.5px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: border-color 0.15s;
  background: rgba(255,255,255,0.02);
}

a.nav-mobile-item:hover {
  border-color: rgba(124,58,237,0.28);
  background: rgba(124,58,237,0.05);
}

.nav-mobile-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  cursor: pointer;
}

.nav-mobile-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(124,58,237,0.4);
  flex-shrink: 0;
  transition: background 0.15s;
}

.nav-mobile-item:hover .nav-mobile-dot,
.nav-mobile-item.sub-open .nav-mobile-dot {
  background: #7c3aed;
}

.nav-mobile-txt {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  flex: 1;
  transition: color 0.15s;
}

a.nav-mobile-item:hover .nav-mobile-txt {
  color: #fff;
}

.nav-mobile-item.nav-mobile-active .nav-mobile-txt {
  color: #a78bfa;
}

.nav-mobile-item.nav-mobile-active .nav-mobile-dot {
  background: #7c3aed;
}

.nav-mobile-arrow {
  font-size: 11px;
  color: rgba(255,255,255,0.22);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.has-sub.sub-open > .nav-mobile-row .nav-mobile-arrow {
  transform: rotate(180deg);
  color: rgba(124,58,237,0.7);
}

.nav-mobile-sub {
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 0 10px 10px;
}

.has-sub.sub-open .nav-mobile-sub {
  display: flex;
}

.nav-mobile-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.52);
  text-decoration: none;
  border-radius: 7px;
  background: rgba(124,58,237,0.05);
  border: 0.5px solid rgba(124,58,237,0.1);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.nav-mobile-sub-item:hover {
  color: #c4b5fd;
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.25);
}

.nav-mobile-cta-wrap {
  padding: 0.5rem 0.25rem 0;
}

.nav-mobile-cta {
  display: block;
  text-align: center;
  background: #7c3aed;
  color: #fff;
  padding: 13px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}

.nav-mobile-cta:hover {
  background: #6d28d9;
  transform: translateY(-1px);
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 960px) {
  .nav-links      { display: none !important; }
  .nav-cta        { display: none !important; }
  .nav-hamburger  { display: flex !important; }
  .nav-mobile-menu { display: block !important; }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 1rem;
    height: 58px;
  }
  .nav-logo-text { font-size: 14px; }
  .nav-logo-icon {
    width: 30px;
    height: 30px;
    font-size: 0;
  }
}


/* ═══════════════════════════════════
   PAGE HERO BANNER (inner pages)
   ═══════════════════════════════════ */
.page-hero {
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(124,58,237,0.08) 0%,
    transparent 100%
  );
  border-bottom: 1px solid rgba(124,58,237,0.1);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(
    ellipse,
    rgba(124,58,237,0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.page-hero-badge {
  display: inline-block;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.3);
  color: #a78bfa;
  font-size: 0.75rem;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.page-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ════════════════════════════════
   GPT LIBRARY — DETAIL PAGES
   ════════════════════════════════ */

.gpt-back-link {
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
}
.gpt-back-link a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.15s;
}
.gpt-back-link a:hover { color: #a78bfa; }

.gpt-detail-wrap {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1.5rem 4rem;
}

.gpt-detail-header {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
  align-items: start;
}
.gpt-detail-cover {
  height: 180px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gpt-detail-cover-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gpt-detail-emoji { font-size: 4rem; }
.gpt-detail-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin: 0.5rem 0;
}
.gpt-detail-tagline {
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.gpt-chat-btn {
  display: inline-block;
  background: #7c3aed;
  color: #ffffff;
  padding: 0.85rem 2rem;
  border-radius: 9px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  transition: all 0.15s;
  box-shadow: 0 0 25px rgba(124,58,237,0.4);
}
.gpt-chat-btn:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  box-shadow: 0 0 35px rgba(124,58,237,0.6);
}
.gpt-chat-btn.large { font-size: 1.1rem; padding: 1rem 2.5rem; }
.gpt-chat-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  margin-top: 0.5rem;
}

.gpt-detail-body { display: flex; flex-direction: column; gap: 2rem; }

.gpt-detail-section {
  padding: 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.gpt-detail-section h2 {
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(124,58,237,0.2);
}
.gpt-detail-section p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.gpt-example-prompt {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 8px;
  padding: 1rem;
  position: relative;
}
.gpt-example-prompt code {
  display: block;
  font-size: 0.88rem;
  color: #a78bfa;
  line-height: 1.7;
  font-family: monospace;
  padding-right: 2.5rem;
}
.gpt-example-prompt button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.3);
  color: #a78bfa;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.gpt-example-prompt button:hover { background: #7c3aed; color: #fff; }

.gpt-platforms { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gpt-platform-tag {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.82rem;
}

.gpt-detail-cta {
  margin-top: 2.5rem;
  text-align: center;
  padding: 2.5rem;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 16px;
}
.gpt-detail-cta h3 { font-size: 1.4rem; color: #ffffff; margin-bottom: 0.5rem; }
.gpt-detail-cta p { color: rgba(255,255,255,0.5); margin-bottom: 1.5rem; font-size: 0.95rem; }

.gpt-related { margin-top: 2.5rem; }
.gpt-related h3 { font-size: 1.2rem; color: #ffffff; margin-bottom: 1.25rem; }
.gpt-related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.gpt-related-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.1rem;
  text-decoration: none;
  transition: all 0.2s;
  display: block;
}
.gpt-related-card:hover { border-color: rgba(124,58,237,0.35); transform: translateY(-2px); }
.gpt-related-emoji { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.gpt-related-name { font-size: 0.88rem; font-weight: 600; color: #ffffff; line-height: 1.3; }
.gpt-related-cat { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-top: 0.25rem; }

/* GPT Library card — single View Details button */
.gpt-details-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.3);
  color: #a78bfa;
  padding: 0.65rem;
  border-radius: 7px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
  margin-top: 0.5rem;
}
.gpt-details-btn:hover { background: #7c3aed; color: #ffffff; border-color: #7c3aed; }

@media (max-width: 768px) {
  .gpt-detail-header { grid-template-columns: 1fr; }
  .gpt-detail-cover { height: 140px; }
  .gpt-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .gpt-related-grid { grid-template-columns: 1fr; }
}

/* GPT card image covers */
.gpt-card-cover-img {
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}

/* ── Star ratings & badges ── */
.tool-rating{display:flex;align-items:center;gap:5px;margin:5px 0 8px;flex-wrap:wrap}
.tool-stars{display:flex;gap:1px;line-height:1}
.s-full::before{content:'★';color:#fbbf24;font-size:12px}
.s-half::before{content:'★';color:#fbbf24;font-size:12px;opacity:.5}
.s-empty::before{content:'★';color:rgba(255,255,255,.15);font-size:12px}
.rating-num{font-size:11px;font-weight:700;color:#fbbf24}
.rating-count{font-size:9px;color:rgba(255,255,255,.3)}
.price-badge{font-size:8px;font-weight:600;padding:2px 7px;border-radius:4px}
.price-badge.free{background:rgba(16,185,129,.12);color:#6ee7b7;border:1px solid rgba(16,185,129,.2)}
.price-badge.freemium{background:rgba(99,102,241,.12);color:#a5b4fc;border:1px solid rgba(99,102,241,.2)}
.price-badge.paid{background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.2)}
.tool-label-badge{display:inline-block;font-size:8px;font-weight:700;padding:2px 7px;border-radius:4px;margin-bottom:5px}
.tool-label-badge.affiliate{background:rgba(245,158,11,.1);color:#fcd34d;border:1px solid rgba(245,158,11,.2)}
.tool-label-badge.popular{background:rgba(239,68,68,.1);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}
.tool-label-badge.new-tool{background:rgba(16,185,129,.1);color:#6ee7b7;border:1px solid rgba(16,185,129,.2)}
.tool-label-badge.trending{background:rgba(124,58,237,.1);color:#a78bfa;border:1px solid rgba(124,58,237,.2)}
.tool-label-badge.creator-pick{background:rgba(124,58,237,.15);color:#c4b5fd;border:1px solid rgba(124,58,237,.3)}
.tool-label-badge.free-training{background:rgba(16,185,129,.15);color:#6ee7b7;border:1px solid rgba(16,185,129,.3)}
.usage-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:rgba(255,255,255,.45);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:2px 8px;border-radius:10px;margin:4px 0 7px}

/* ── Detail page rating display ── */
.detail-rating-wrap{display:flex;align-items:center;gap:8px;margin:12px 0 20px;flex-wrap:wrap}
.detail-rating-wrap .tool-stars .s-full::before,.detail-rating-wrap .tool-stars .s-half::before,.detail-rating-wrap .tool-stars .s-empty::before{font-size:16px}
.detail-rating-wrap .rating-num{font-size:15px;font-weight:700;color:#fbbf24}
.detail-rating-wrap .rating-count{font-size:11px;color:rgba(255,255,255,.4)}
.detail-rating-wrap .price-badge{font-size:10px;padding:3px 9px}
.detail-rating-wrap .tool-label-badge{font-size:9px;padding:3px 9px}

.footer-legal-note{color:#475569;font-size:0.75rem;text-align:center;margin-top:16px;line-height:1.5;padding:0 20px;}

/* ── Creator's Verified Pick Badge ── */
.tool-card{position:relative}
@keyframes cpGlow{0%,100%{box-shadow:0 2px 14px rgba(124,58,237,.5),0 0 0 1.5px rgba(253,224,71,.28)}50%{box-shadow:0 2px 22px rgba(124,58,237,.8),0 0 0 2px rgba(253,224,71,.55)}}
.creators-pick-badge{position:absolute;top:8px;right:8px;z-index:10;background:linear-gradient(135deg,#6d28d9 0%,#b45309 100%);color:#fef3c7;font-size:.6rem;font-weight:700;padding:4px 9px 4px 6px;border-radius:20px;display:inline-flex;align-items:center;gap:3px;letter-spacing:.04em;animation:cpGlow 2.8s ease-in-out infinite;white-space:nowrap;pointer-events:none;text-decoration:none;text-transform:uppercase;line-height:1}
.creators-pick-badge .cp-star{font-size:.75rem;line-height:1}

/* ── Upvote Button (replaces star ratings on tool cards) ── */
.upvote-btn{display:inline-flex;align-items:center;gap:4px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.25);color:#a78bfa;font-size:.7rem;font-weight:600;padding:4px 11px;border-radius:20px;cursor:pointer;transition:background .2s,border-color .2s,transform .15s,color .2s;font-family:inherit;letter-spacing:.01em;white-space:nowrap;line-height:1.4;vertical-align:middle}
.upvote-btn:hover:not(.voted){background:rgba(124,58,237,.22);border-color:rgba(124,58,237,.5);transform:translateY(-1px)}
.upvote-btn:active:not(.voted){transform:translateY(0)}
.upvote-btn.voted{background:linear-gradient(135deg,rgba(109,40,217,.25) 0%,rgba(180,83,9,.25) 100%);border-color:rgba(253,224,71,.4);color:#fef3c7;cursor:default}

/* ── FAQ Accordion ── */
.faq-item{cursor:pointer;transition:border-color .2s;}
.faq-item:hover{border-color:rgba(124,58,237,.35);}
.faq-item h3{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:0 !important;}
.faq-item h3::after{content:'+';color:#7c3aed;font-size:1.1rem;font-weight:400;flex-shrink:0;line-height:1.4;}
.faq-item > p,.faq-item > ul,.faq-item > ol{display:none;margin-top:.75rem;}
.faq-item.faq-open > p,.faq-item.faq-open > ul,.faq-item.faq-open > ol{display:block;}
.faq-item.faq-open h3::after{content:'−';}