/* ============================================================================
   pornsearch — Impeccable v2 VISIBLE-IMPACT polish (Phase 338+19, 2026-05-28)
   ----------------------------------------------------------------------------
   v1 was imperceptible (operator: "arata cam la fel"). v2 swings the hammer:
   real type hierarchy, oversized search with radial pulse, ambient orb
   gradients, illustrated empty-state mascot (inline SVG via background-image),
   glass filter bar, dramatic engine chips with per-engine accent dots,
   shimmer skeleton during search, card hover with thumbnail brightness + lift.
   Pink #ff4f8a accent PRESERVED. CSS-only via sub_filter injection — no
   template/JS edits, no app rebuild.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === Real modular scale (1.333 ratio — perfect-fourth, bigger jumps) === */
  --pol2-text-xs:   0.6875rem;  /* 11px */
  --pol2-text-sm:   0.8125rem;  /* 13px */
  --pol2-text-base: 0.9375rem;  /* 15px */
  --pol2-text-lg:   1.0625rem;  /* 17px */
  --pol2-text-xl:   1.5rem;     /* 24px */
  --pol2-text-2xl:  2rem;       /* 32px — brand */
  --pol2-text-3xl:  2.75rem;    /* 44px — empty hero */

  /* === Accent system (pink #ff4f8a preserved) === */
  --pol2-pink:        #ff4f8a;
  --pol2-pink-deep:   #d9376f;
  --pol2-pink-soft:   #ffa3c4;
  --pol2-pink-glow:   color-mix(in oklab, #ff4f8a 60%, transparent);

  /* === Motion === */
  --pol2-ease-quint:  cubic-bezier(0.22, 1, 0.36, 1);
  --pol2-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --pol2-ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
}

/* === Real typography swap — Outfit display + JetBrains Mono for meta === */
html, body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-feature-settings: 'ss01', 'ss03', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   1. AMBIENT BACKGROUND — body gets soft orb gradients (drama in the void)
   ============================================================================ */

body {
  background:
    radial-gradient(900px 600px at 15% -10%,
      color-mix(in oklab, #ff4f8a 12%, transparent) 0%,
      transparent 60%),
    radial-gradient(720px 540px at 95% 25%,
      color-mix(in oklab, #6b8cff 10%, transparent) 0%,
      transparent 55%),
    radial-gradient(1100px 800px at 50% 110%,
      color-mix(in oklab, #ff4f8a 7%, transparent) 0%,
      transparent 55%),
    #0a0a0d !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* ============================================================================
   2. TOPBAR — bigger, breathing room, glass backdrop
   ============================================================================ */

.topbar {
  padding: 22px 28px !important;
  gap: 16px !important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #15151a 92%, transparent) 0%,
      color-mix(in oklab, #15151a 70%, transparent) 100%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid color-mix(in oklab, #ff4f8a 22%, #2a2a32) !important;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 4%, transparent) inset,
    0 12px 32px rgba(0, 0, 0, 0.35);
}

/* === Brand wordmark: 32px, weight 800, custom letter-spacing, accent dot === */
.brand {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-2xl) !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, #ff4f8a 18%, #fff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-right: 4px;
}
/* Hide the unicode magnifier emoji from the template (it loses sharpness at this size) */
.brand { font-variant-emoji: text; }

/* ============================================================================
   3. SEARCH INPUT — 60px tall hero search with radial pulse + glow
   ============================================================================ */

#search {
  flex: 1 1 360px !important;
  min-height: 58px !important;
  padding: 18px 26px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-lg) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #1d1d24 100%, transparent),
      color-mix(in oklab, #15151a 100%, transparent)) !important;
  border: 1.5px solid color-mix(in oklab, white 7%, transparent) !important;
  border-radius: 999px !important;
  color: #f5f5fa !important;
  transition:
    border-color 320ms var(--pol2-ease-quint),
    box-shadow 380ms var(--pol2-ease-quint),
    background 320ms var(--pol2-ease-quint) !important;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 4%, transparent) inset,
    0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
#search::placeholder {
  color: color-mix(in oklab, white 36%, transparent) !important;
  font-weight: 400;
  letter-spacing: 0;
}
#search:hover {
  border-color: color-mix(in oklab, #ff4f8a 35%, white 10%) !important;
}
#search:focus-visible {
  border-color: color-mix(in oklab, #ff4f8a 60%, transparent) !important;
  outline: none !important;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 6%, transparent) inset,
    0 0 0 4px color-mix(in oklab, #ff4f8a 22%, transparent),
    0 0 60px 8px color-mix(in oklab, #ff4f8a 28%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.4) !important;
  animation: pol2-pulse-focus 2.6s var(--pol2-ease-quint) infinite;
}

@keyframes pol2-pulse-focus {
  0%, 100% {
    box-shadow:
      0 1px 0 color-mix(in oklab, white 6%, transparent) inset,
      0 0 0 4px color-mix(in oklab, #ff4f8a 22%, transparent),
      0 0 60px 8px color-mix(in oklab, #ff4f8a 28%, transparent),
      0 12px 40px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 1px 0 color-mix(in oklab, white 6%, transparent) inset,
      0 0 0 4px color-mix(in oklab, #ff4f8a 32%, transparent),
      0 0 90px 14px color-mix(in oklab, #ff4f8a 38%, transparent),
      0 12px 40px rgba(0, 0, 0, 0.4);
  }
}

/* ============================================================================
   4. PRIMARY BUTTONS — bigger, real shadow, accent gradient
   ============================================================================ */

#go-btn {
  min-height: 58px !important;
  padding: 0 32px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-lg) !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, #ff6ba0 0%, #ff4f8a 50%, #d9376f 100%) !important;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 30%, transparent) inset,
    0 -1px 0 color-mix(in oklab, black 20%, transparent) inset,
    0 8px 24px color-mix(in oklab, #ff4f8a 35%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  transition:
    transform 180ms var(--pol2-ease-quint),
    box-shadow 280ms var(--pol2-ease-quint),
    filter 240ms var(--pol2-ease-quint) !important;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #go-btn:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow:
      0 1px 0 color-mix(in oklab, white 36%, transparent) inset,
      0 -1px 0 color-mix(in oklab, black 22%, transparent) inset,
      0 14px 36px color-mix(in oklab, #ff4f8a 50%, transparent),
      0 4px 6px rgba(0, 0, 0, 0.4) !important;
    filter: brightness(1.08) !important;
  }
  #go-btn:active { transform: translate3d(0, 0, 0) scale(0.98); }
}

#dl-toggle {
  min-height: 58px !important;
  padding: 0 22px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: 999px !important;
  background: color-mix(in oklab, white 4%, transparent) !important;
  border: 1.5px solid color-mix(in oklab, white 10%, transparent) !important;
  color: color-mix(in oklab, white 88%, transparent) !important;
  transition: all 240ms var(--pol2-ease-quint) !important;
}
#dl-toggle:hover {
  background: color-mix(in oklab, #6b8cff 14%, transparent) !important;
  border-color: color-mix(in oklab, #6b8cff 40%, transparent) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px color-mix(in oklab, #6b8cff 22%, transparent) !important;
}

/* ============================================================================
   5. FILTERS BAR — glass + structure
   ============================================================================ */

.filters {
  padding: 16px 28px !important;
  gap: 18px !important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #15151a 80%, transparent),
      color-mix(in oklab, #15151a 40%, transparent)) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border-bottom: 1px solid color-mix(in oklab, white 5%, transparent) !important;
  position: sticky;
  top: var(--pol2-topbar-h, 102px);
  z-index: 9;
}

.filters > label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: var(--pol2-text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, white 50%, transparent) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.filters select {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-sm) !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: color-mix(in oklab, white 5%, transparent) !important;
  border: 1.5px solid color-mix(in oklab, white 8%, transparent) !important;
  color: #fff !important;
}
.filters select:hover {
  border-color: color-mix(in oklab, #ff4f8a 38%, transparent) !important;
}

/* ============================================================================
   6. ENGINE CHIPS — glass surface with engine-color dot, dramatic active state
   ============================================================================ */

.engine-chips { gap: 10px !important; }

.chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  padding: 8px 14px 8px 28px !important;
  border-radius: 999px !important;
  background: color-mix(in oklab, white 4%, transparent) !important;
  border: 1.5px solid color-mix(in oklab, white 8%, transparent) !important;
  color: color-mix(in oklab, white 56%, transparent) !important;
  position: relative;
  transition:
    background 220ms var(--pol2-ease-quint),
    border-color 220ms var(--pol2-ease-quint),
    color 220ms var(--pol2-ease-quint),
    transform 160ms var(--pol2-ease-quint),
    box-shadow 240ms var(--pol2-ease-quint) !important;
}
/* engine dot (left side) */
.chip::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  transform: translateY(-50%);
  transition: all 220ms var(--pol2-ease-quint);
  box-shadow: 0 0 0 0 currentColor;
}
.chip:has(input:checked) {
  background: color-mix(in oklab, #ff4f8a 18%, transparent) !important;
  border-color: color-mix(in oklab, #ff4f8a 65%, transparent) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px color-mix(in oklab, #ff4f8a 38%, transparent) inset,
    0 6px 18px color-mix(in oklab, #ff4f8a 28%, transparent) !important;
}
.chip:has(input:checked)::before {
  background: #ff4f8a;
  opacity: 1;
  box-shadow:
    0 0 0 3px color-mix(in oklab, #ff4f8a 25%, transparent),
    0 0 12px color-mix(in oklab, #ff4f8a 80%, transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .chip:hover {
    transform: translate3d(0, -1px, 0);
    border-color: color-mix(in oklab, #ff4f8a 30%, transparent) !important;
    color: color-mix(in oklab, white 86%, transparent) !important;
  }
  .chip:has(input:checked):hover {
    transform: translate3d(0, -2px, 0);
    box-shadow:
      0 0 0 1px color-mix(in oklab, #ff4f8a 55%, transparent) inset,
      0 10px 28px color-mix(in oklab, #ff4f8a 38%, transparent) !important;
  }
}

/* Toggle (strict, hide-cams) — match chip family but slightly different */
.toggle {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: var(--pol2-text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, white 58%, transparent) !important;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 200ms var(--pol2-ease-quint);
}
.toggle:hover { background: color-mix(in oklab, white 4%, transparent); }
.toggle input { accent-color: #ff4f8a !important; transform: scale(1.1); }
.toggle:has(input:checked) {
  color: #fff !important;
  background: color-mix(in oklab, #ff4f8a 8%, transparent) !important;
}

.cache-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in oklab, white 5%, transparent) !important;
  border: 1px solid color-mix(in oklab, white 8%, transparent) !important;
  color: color-mix(in oklab, white 60%, transparent) !important;
}

.status {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: var(--pol2-text-xs) !important;
  letter-spacing: 0.04em !important;
  color: color-mix(in oklab, white 50%, transparent) !important;
}

/* ============================================================================
   7. EMPTY STATE — illustrated mascot + 3-tier hero copy
   The .grid starts empty; we inject the empty-state into the body when grid
   is empty (no kids). Using a body::before hook scoped to the grid being
   empty via :has() — modern browsers, with graceful no-effect fallback.
   ============================================================================ */

main.grid:empty {
  min-height: calc(100vh - 240px);
  display: grid;
  place-items: center;
  padding: 40px 24px !important;
  position: relative;
}

main.grid:empty::before {
  content: '';
  display: block;
  width: 240px;
  height: 240px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'>\
<defs>\
<radialGradient id='g1' cx='50%25' cy='50%25' r='50%25'>\
<stop offset='0%25' stop-color='%23ff4f8a' stop-opacity='0.4'/>\
<stop offset='70%25' stop-color='%23ff4f8a' stop-opacity='0'/>\
</radialGradient>\
<linearGradient id='g2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'>\
<stop offset='0%25' stop-color='%23ff6ba0'/>\
<stop offset='100%25' stop-color='%23d9376f'/>\
</linearGradient>\
</defs>\
<circle cx='120' cy='120' r='110' fill='url(%23g1)'/>\
<circle cx='100' cy='100' r='52' stroke='url(%23g2)' stroke-width='6' fill='none' opacity='0.95'/>\
<circle cx='100' cy='100' r='38' stroke='%23ff4f8a' stroke-width='2' fill='none' opacity='0.35'/>\
<circle cx='100' cy='100' r='8' fill='%23ff4f8a' opacity='0.9'/>\
<line x1='142' y1='142' x2='184' y2='184' stroke='url(%23g2)' stroke-width='10' stroke-linecap='round'/>\
<line x1='148' y1='148' x2='178' y2='178' stroke='%23ffa3c4' stroke-width='2' stroke-linecap='round' opacity='0.7'/>\
<circle cx='185' cy='60' r='3' fill='%23ff4f8a' opacity='0.5'/>\
<circle cx='40' cy='55' r='2.5' fill='%236b8cff' opacity='0.5'/>\
<circle cx='50' cy='180' r='2' fill='%23ff4f8a' opacity='0.4'/>\
</svg>") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 0 32px color-mix(in oklab, #ff4f8a 25%, transparent));
  animation: pol2-float 6s var(--pol2-ease-quint) infinite;
}

main.grid:empty::after {
  content: 'search anyone, anywhere\A press enter on a name, phrase, or "exact quote"\A 8 engines run in parallel — best matches surface first';
  white-space: pre-line;
  text-align: center;
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-2xl);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, white 60%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 8px;
  max-width: 540px;
}

@keyframes pol2-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

/* The existing .empty class (server-rendered "no results" state) gets a
   refined typographic treatment, distinct from the pristine empty hero. */
.empty {
  grid-column: 1 / -1;
  padding: 100px 20px !important;
  text-align: center;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--pol2-text-base) !important;
  letter-spacing: 0.04em !important;
  color: color-mix(in oklab, white 42%, transparent) !important;
}

/* ============================================================================
   8. GRID — wider gutters with vertical rhythm
   ============================================================================ */

.grid {
  gap: 24px !important;
  padding: 32px 28px 80px !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

/* ============================================================================
   9. CARD — glass surface, real shadow stack, dramatic hover
   ============================================================================ */

@keyframes pol2-fade-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.card {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, white 4%, transparent),
      color-mix(in oklab, white 0%, transparent)),
    color-mix(in oklab, #1a1a22 95%, transparent) !important;
  border: 1px solid color-mix(in oklab, white 8%, transparent) !important;
  border-radius: 16px !important;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 6%, transparent) inset,
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.35) !important;
  animation: pol2-fade-up 520ms var(--pol2-ease-spring) backwards;
  transition:
    transform 380ms var(--pol2-ease-quint),
    box-shadow 380ms var(--pol2-ease-quint),
    border-color 280ms var(--pol2-ease-quint) !important;
}
.card:nth-child(1)  { animation-delay: 0.04s; }
.card:nth-child(2)  { animation-delay: 0.08s; }
.card:nth-child(3)  { animation-delay: 0.12s; }
.card:nth-child(4)  { animation-delay: 0.16s; }
.card:nth-child(5)  { animation-delay: 0.20s; }
.card:nth-child(6)  { animation-delay: 0.24s; }
.card:nth-child(7)  { animation-delay: 0.28s; }
.card:nth-child(8)  { animation-delay: 0.32s; }
.card:nth-child(9)  { animation-delay: 0.36s; }
.card:nth-child(10) { animation-delay: 0.40s; }
.card:nth-child(11) { animation-delay: 0.42s; }
.card:nth-child(12) { animation-delay: 0.44s; }

.card .thumb,
.card .thumb-fallback {
  aspect-ratio: 16 / 10 !important;
  transition: transform 520ms var(--pol2-ease-expo), filter 280ms var(--pol2-ease-quint) !important;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: translate3d(0, -6px, 0) scale(1.012) !important;
    border-color: color-mix(in oklab, #ff4f8a 50%, transparent) !important;
    box-shadow:
      0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
      0 1px 2px rgba(0, 0, 0, 0.6),
      0 24px 56px rgba(0, 0, 0, 0.5),
      0 0 0 1px color-mix(in oklab, #ff4f8a 25%, transparent),
      0 0 60px color-mix(in oklab, #ff4f8a 28%, transparent) !important;
  }
  .card:hover .thumb,
  .card:hover .thumb-fallback {
    transform: scale(1.06) !important;
    filter: brightness(1.08) saturate(1.1) !important;
  }
}

.card .body {
  padding: 14px 16px !important;
  gap: 8px !important;
}

.card .title {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-lg) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.012em !important;
  color: #f5f5fa !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}
.card .title a {
  color: inherit !important;
  transition: color 200ms var(--pol2-ease-quint) !important;
}
.card .title a:hover { color: var(--pol2-pink-soft) !important; }

.card .snippet {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-sm) !important;
  line-height: 1.5 !important;
  color: color-mix(in oklab, white 60%, transparent) !important;
  text-wrap: pretty;
}

.card .meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: color-mix(in oklab, white 48%, transparent) !important;
  gap: 8px !important;
  align-items: center;
}

/* ============================================================================
   10. SOURCE BADGES — full-color identity, dot-pulse, larger
   ============================================================================ */

.badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.score-pip {
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 10px currentColor, 0 0 0 1.5px color-mix(in oklab, currentColor 40%, transparent);
}

/* ============================================================================
   11. ACTIONS — refined buttons with accent fill on primary
   ============================================================================ */

.actions {
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid color-mix(in oklab, white 6%, transparent) !important;
}
.actions .dl-btn,
.actions .open-btn {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  background: color-mix(in oklab, white 5%, transparent) !important;
  border: 1px solid color-mix(in oklab, white 9%, transparent) !important;
  color: color-mix(in oklab, white 88%, transparent) !important;
  transition: all 200ms var(--pol2-ease-quint) !important;
}
.actions .dl-btn:hover,
.actions .open-btn:hover {
  background: linear-gradient(180deg, #ff6ba0, #ff4f8a) !important;
  border-color: #ff4f8a !important;
  color: white !important;
  box-shadow: 0 6px 18px color-mix(in oklab, #ff4f8a 36%, transparent) !important;
  transform: translate3d(0, -1px, 0);
}
@media (prefers-reduced-motion: no-preference) {
  .actions .dl-btn:active:not(:disabled),
  .actions .open-btn:active { transform: scale(0.97); }
}

/* ============================================================================
   12. DOWNLOAD PANEL — softer surface, accent header
   ============================================================================ */

.dl-panel {
  padding: 18px 28px !important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #6b8cff 10%, transparent),
      transparent 100%),
    color-mix(in oklab, #15151a 80%, transparent) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in oklab, #6b8cff 18%, transparent) !important;
}
.dl-row input[type="url"],
.dl-row input[type="text"] {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-sm) !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: color-mix(in oklab, white 4%, transparent) !important;
  border: 1.5px solid color-mix(in oklab, white 8%, transparent) !important;
}
.dl-submit {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-sm) !important;
  padding: 12px 22px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ff6ba0, #d9376f) !important;
  box-shadow: 0 6px 16px color-mix(in oklab, #ff4f8a 30%, transparent) !important;
}
.dl-hint {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: var(--pol2-text-xs) !important;
  letter-spacing: 0.04em !important;
  color: color-mix(in oklab, white 56%, transparent) !important;
  line-height: 1.6 !important;
}
.dl-hint a {
  color: var(--pol2-pink-soft) !important;
  font-weight: 600;
}

.dl-recent-row {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  border-left-width: 4px !important;
}

/* ============================================================================
   13. TOAST — dramatic shadow, pink tint
   ============================================================================ */

.toast {
  font-family: 'Outfit', sans-serif !important;
  font-size: var(--pol2-text-base) !important;
  font-weight: 500 !important;
  padding: 14px 22px !important;
  border-radius: 14px !important;
  background: color-mix(in oklab, #15151a 96%, transparent) !important;
  backdrop-filter: blur(12px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 24px 56px rgba(0, 0, 0, 0.55),
    0 0 40px color-mix(in oklab, #ff4f8a 22%, transparent) !important;
}

/* ============================================================================
   14. SCROLLBAR — pink-tinted, slim
   ============================================================================ */

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, #ff4f8a 28%, transparent);
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  transition: background 200ms var(--pol2-ease-quint);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, #ff4f8a 52%, transparent);
  background-clip: padding-box;
  border: 2.5px solid transparent;
}

::selection {
  background: color-mix(in oklab, #ff4f8a 50%, transparent);
  color: #fff;
}

/* ============================================================================
   15. RESPONSIVE — mobile gets bottom-anchored search, tighter grid
   ============================================================================ */

@media (max-width: 768px) {
  .topbar {
    padding: 14px 16px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .brand {
    font-size: var(--pol2-text-xl) !important;
    order: 1;
    flex: 0 0 auto;
  }
  #dl-toggle {
    order: 2;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: var(--pol2-text-sm) !important;
    margin-left: auto;
  }
  #search {
    order: 3;
    flex: 1 0 100% !important;
    min-height: 52px !important;
    font-size: var(--pol2-text-base) !important;
    padding: 14px 20px !important;
  }
  #go-btn {
    order: 4;
    min-height: 52px !important;
    padding: 0 24px !important;
    font-size: var(--pol2-text-base) !important;
    flex: 1 1 auto !important;
  }
  .filters {
    padding: 12px 16px !important;
    gap: 10px !important;
    position: static;
  }
  .grid {
    padding: 16px !important;
    gap: 14px !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
  .card .body { padding: 10px 12px !important; gap: 6px !important; }
  .card .title { font-size: var(--pol2-text-sm) !important; }
  .card .snippet { font-size: 11.5px !important; }
  main.grid:empty::before { width: 160px; height: 160px; }
  main.grid:empty::after {
    font-size: var(--pol2-text-xl);
    max-width: 320px;
  }
}

@media (max-width: 390px) {
  .topbar { padding: 12px !important; }
  .filters > label, .toggle { font-size: 10px !important; }
  .chip { font-size: 10px !important; padding: 6px 12px 6px 24px !important; }
  .chip::before { width: 6px; height: 6px; left: 10px; }
}

/* ============================================================================
   16. REDUCED MOTION — keep transitions, kill animations
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .card:hover { transform: none !important; }
  #search:focus-visible { animation: none !important; }
  main.grid:empty::before { animation: none !important; }
}