/* ── TOKENS ── */
:root {
  --canvas:   #F7F6F3;
  --white:    #FFFFFF;
  --ink:      #111110;
  --ink2:     #3A3A37;
  --ink3:     #6B6A66;
  --ink4:     #9B9A96;
  --rule:     #E2E0D8;
  --rule2:    #CCCAB8;
  --accent:   #0052CC;
  --accent-h: #003D99;
  --accent-bg:#EBF1FF;
  --red:      #C0392B;
  --green:    #1A7A4A;
  --nav-h:    58px;
  --serif:    'DM Serif Display', Georgia, serif;
  --sans:     'DM Sans', system-ui, sans-serif;
  --mono:     'JetBrains Mono', 'Courier New', monospace;
  --radius:   4px;
  --radius-md:8px;
  --trans:    0.15s ease;
}
[data-theme="dark"] {
  --canvas:   #141413;
  --white:    #1C1C1A;
  --ink:      #F0EFE8;
  --ink2:     #C8C7BF;
  --ink3:     #8A897F;
  --ink4:     #5A5950;
  --rule:     #2A2A27;
  --rule2:    #3A3A36;
  --accent:   #4D90F0;
  --accent-h: #6BA3F5;
  --accent-bg:#1A2640;
  --green:    #34D399;
  --red:      #F87171;
  --nav-bg:   #0A0A09;
}
:root { --nav-bg: #111110; }
 
/* Applied briefly during theme toggle (see setTheme in ui.js) to force an
   instant, zero-animation switch — overrides every transition on the page
   for one frame instead of relying on every rule using the same duration. */
.theme-switching, .theme-switching * {
  transition: none !important;
}
 
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background var(--trans), color var(--trans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--sans); cursor: pointer; }
img { display: block; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--rule2); border-radius: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--nav-bg);
  display: flex; align-items: center;
  padding: 0 24px; gap: 20px;
}
.nav-logo {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nav-logo em {
  font-style: normal;
  color: rgba(255,255,255,0.42);
}
.nav-logo-img { height: 26px; width: auto; max-width: 100%; display: block; }
.nav-menu {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
}
.nav-menu-link {
  font-family: var(--sans);
  font-size: 0.82rem; font-weight: 500;
  color: rgba(255,255,255,0.65);
  transition: color var(--trans);
  white-space: nowrap;
}
.nav-menu-link:hover { color: #fff; }
.nav-menu-divider {
  width: 1px; height: 14px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
@media(max-width:880px){ .nav-menu { display: none; } }
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-count {
  font-family: var(--mono);
  font-size: 0.7rem; color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em; display: none;
}
.nav-count.visible { display: block; }
 
/* font size controls */
.font-ctrl { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.font-ctrl button {
  width: 30px; height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: rgba(255,255,255,0.75);
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--trans), color var(--trans);
}
.font-ctrl button:hover { background: rgba(255,255,255,0.09); color: #fff; }
.font-ctrl button:active { background: rgba(255,255,255,0.16); }
.font-ctrl button:disabled { opacity: 0.35; cursor: default; }
.font-ctrl button:disabled:hover { background: transparent; color: rgba(255,255,255,0.75); }
 
/* ── LANGUAGE SWITCHER ── */
.lang-switcher { position: relative; flex-shrink: 0; }
.lang-switcher-btn {
  display: flex; align-items: center; gap: 3px;
  height: 32px;
  padding: 0 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: rgba(255,255,255,0.75);
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  transition: background var(--trans), color var(--trans);
}
.lang-switcher-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
.lang-switcher-icon { flex-shrink: 0; opacity: 0.85; }
.lang-switcher-chevron { flex-shrink: 0; opacity: 0.6; transition: transform var(--trans); margin-left: 1px; }
.lang-switcher.open .lang-switcher-chevron { transform: rotate(180deg); }
.lang-current-name { white-space: nowrap; letter-spacing: 0.02em; }
 
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  padding: 6px;
  display: none;
  z-index: 500;
}
.lang-switcher.open .lang-dropdown { display: block; }
.lang-option {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: none; background: transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background var(--trans);
}
.lang-option:hover { background: var(--accent-bg); }
.lang-option.active { background: var(--accent-bg); }
.lang-option.locked { cursor: default; }
.lang-option.locked:hover { background: transparent; }
.lang-option-script {
  width: 26px; flex-shrink: 0;
  text-align: center;
  font-size: 1.05rem; font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.lang-option-lock { width: 26px; flex-shrink: 0; color: var(--ink4); }
.lang-option-name { font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.lang-option.locked .lang-option-name { color: var(--ink3); }
.lang-option-default { font-size: 0.7rem; color: var(--ink4); margin-left: auto; }
.lang-option-soon {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.66rem; font-weight: 700;
  color: #B8830A;
  background: #FFF6E0;
  border: 1px solid #F0CA80;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
 
/* slide-style theme toggle (track + sliding thumb), no emoji — icons are SVG */
.theme-toggle {
  position: relative;
  width: 58px; height: 32px;
  padding: 3px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  display: flex; align-items: center;
  transition: background var(--trans), border-color var(--trans);
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,0.18); }
.theme-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
  transform: translateX(0);
}
.theme-toggle.is-dark .theme-thumb { transform: translateX(26px); }
.theme-thumb svg { width: 17px; height: 17px; flex-shrink: 0; }
#theme-icon-sun { color: #F5A623; }
#theme-icon-moon { color: #3B6FE0; }
.submit-btn {
  height: 32px; padding: 0 18px;
  background: #0052CC; border: none;
  border-radius: var(--radius);
  color: #fff; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--trans);
}
.submit-btn:hover { background: #003D99; }
 
/* ── CATEGORY STRIP (wraps, calm chip style) ── */
.cat-strip {
  position: sticky; top: var(--nav-h); z-index: 190;
  background: var(--canvas);
  transition: background var(--trans);
  overflow: visible;
}
.cat-strip-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  max-width: 1360px; margin: 0 auto;
  padding: 7px 24px; gap: 5px 6px;
  max-height: 118px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--rule2) transparent;
}
.cat-strip-inner::-webkit-scrollbar { width: 7px; }
.cat-strip-inner::-webkit-scrollbar-track { background: transparent; }
.cat-strip-inner::-webkit-scrollbar-thumb {
  background: var(--rule2);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.cat-strip-inner::-webkit-scrollbar-thumb:hover { background: var(--ink4); background-clip: content-box; }
 
.cat-strip-inner.expanded {
  max-height: none;
  overflow-y: visible;
}
 
/* expand/collapse toggle row, sits below the chip strip */
.cat-strip-expand-row {
  display: flex; justify-content: center;
  padding: 0 24px 7px;
  margin: 12px auto 0;
  max-width: 1360px;
}
.cat-strip-expand-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px;
  border: 1px solid var(--rule2);
  background: var(--white);
  border-radius: 999px;
  color: var(--ink3);
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.cat-strip-expand-btn:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.cat-strip-expand-btn svg {
  width: 11px; height: 11px;
  transition: transform var(--trans);
}
.cat-strip-expand-btn.is-open svg { transform: rotate(180deg); }
/* hide the toggle row entirely when the chip strip never overflows */
.cat-strip-expand-row.is-hidden { display: none; }
 
.cat-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border: none;
  background: var(--white);
  font-size: 0.79rem; font-weight: 500;
  color: var(--ink3);
  border-radius: 20px;
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
}
.cat-btn:hover { background: var(--rule); color: var(--ink); }
.cat-btn:active { opacity: 0.7; }
.cat-btn.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}
.cat-count {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  line-height: 1;
  color: var(--ink4);
  transition: color var(--trans);
}
.cat-btn.active .cat-count { color: var(--accent); }
.cat-btn:hover .cat-count { color: var(--ink2); }
 
/* ── CAT DROPDOWN (subcategories on hover) ── */
.cat-item {
  position: relative;
  flex-shrink: 0;
}
.cat-item .cat-dropdown {
  position: fixed;
  padding-top: 6px;
  min-width: 200px;
  max-width: 280px;
  background: transparent;
  display: none;
  flex-direction: column;
  z-index: 9999;
}
.cat-item .cat-dropdown-inner {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Hover/focus-within only opens the dropdown on real hover-capable pointers
   (mouse/trackpad). Left un-guarded, tapping a button on touch devices also
   satisfies :focus-within, which raced against the JS-controlled .open class
   below and caused the first tap to appear to do nothing (needing a 2nd tap). */
@media (hover: hover) and (pointer: fine) {
  .cat-item:hover .cat-dropdown,
  .cat-item:focus-within .cat-dropdown {
    display: flex;
  }
  .cat-item:hover .cat-dropdown { animation: catDropIn 0.14s ease; }
}
@media (hover: hover) and (pointer: fine) {
  .cat-item.suppress-dropdown .cat-dropdown {
    display: none !important;
  }
}
@keyframes catDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cat-sub-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none; background: transparent;
  border-radius: 6px;
  font-size: 0.78rem; font-weight: 500;
  color: var(--ink2);
  text-align: left;
  white-space: nowrap;
  transition: background var(--trans), color var(--trans);
}
.cat-sub-btn:hover { background: var(--accent-bg); color: var(--accent); }
.cat-sub-btn .cat-sub-count {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  color: var(--ink4);
}
.cat-sub-btn:hover .cat-sub-count { color: var(--accent); }
.cat-btn.has-sub::after {
  content: '▾';
  font-size: 0.62rem;
  margin-left: 2px;
  opacity: 0.6;
}
.cat-btn.featured-tab {
  position: relative;
}
.cat-btn.featured-tab::before {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}
 
/* ── SPECIAL: "Internet Curiosities" themed tab (minimal/modern) ── */
.cat-btn[data-cat="Internet Curiosities"] {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #3a2a24;
  background: #1c1412;
  color: #D8C7A1;
  font-family: var(--sans);
  font-weight: 500;
}
.cat-btn[data-cat="Internet Curiosities"]:hover {
  background: #261c19;
  border-color: #4a3830;
  color: #EFE0BB;
}
.cat-btn[data-cat="Internet Curiosities"].active {
  background: #2a1f1b;
  border-color: #6b4a2f;
  color: #F5E6C0;
}
.cat-btn[data-cat="Internet Curiosities"]::before {
  content: '💀';
  font-size: 0.85em;
  line-height: 1;
  filter: grayscale(0.3);
}
.cat-btn[data-cat="Internet Curiosities"] .cat-count {
  color: #9C8460;
}
.cat-btn[data-cat="Internet Curiosities"]:hover .cat-count,
.cat-btn[data-cat="Internet Curiosities"].active .cat-count {
  color: #C7AD7A;
}
@media (hover: none) {
  /* touch devices: no hover available — dropdown opens via tap instead (see initCatDropdownTouch JS).
     Default closed; JS toggles .cat-dropdown.open on tap. */
  .cat-item .cat-dropdown { display: none; }
  .cat-item .cat-dropdown.open { display: flex; animation: catDropIn 0.14s ease; }
  .cat-btn.has-sub.dropdown-open::after { transform: rotate(180deg); display: inline-block; }
}
.parent-group-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
  margin: 28px 24px 10px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.parent-group-title:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
 
/* ── HERO ── */
.hero {
  padding: calc(var(--nav-h) + 48px) 0 44px;
  position: relative;
  overflow: hidden;
  background: var(--canvas);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(77,144,240,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 15% 75%, rgba(0,82,204,0.12) 0%, transparent 60%);
  pointer-events: none;
}
#hero-outer {
  max-width: 100%;
  margin: 0;
}
.hero-inner {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 24px;
  box-sizing: border-box;
}
.hero-main { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 660px; position: relative; z-index: 1; }
.hero-art {
  flex: 0 1 480px; min-width: 340px; max-width: 48%;
  align-self: flex-start;
  position: relative; z-index: 1;
}
.hero-recent-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.hero-recent-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink4);
}
.hero-recent-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  position: relative;
}
.hero-recent-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: heroRecentPulse 1s infinite;
}
@keyframes heroRecentPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.live-pulse {
  width: 10px;
  height: 10px;
  background: #12b76a;
  border-radius: 50%;
  position: relative;
  top: -1px;
}
.live-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #12b76a;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.hero-recent-viewall {
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--trans);
}
.hero-recent-viewall:hover { color: var(--accent-h); }
.hero-recent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.hero-recent-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 8px 8px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius-md);
  text-decoration: none;
  min-width: 0;
  position: relative;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.hero-recent-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.hero-recent-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  margin-bottom: 2px;
}
.hero-recent-icon img { width: 17px; height: 17px; object-fit: contain; }
.hero-recent-icon-fb {
  width: 17px; height: 17px;
  align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.hero-recent-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-recent-name {
  font-size: 0.72rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-recent-cat {
  font-size: 0.6rem; color: var(--ink4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Pricing tag — top right corner of card. Typography + colors are defined
   together with .row-tag.pricing-* (see "SHARED PRICING TAG STYLES" further
   down) so the two always look identical and stay in sync. Only positioning
   lives here. */
.hero-recent-tag {
  position: absolute;
  top: 5px; right: 5px;
}
/* label text for hero recent */
.hero-recent-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink4);
}
.hero-recent-viewall {
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink3);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--trans);
}
.hero-recent-viewall:hover { color: var(--ink); }
@media(prefers-reduced-motion: reduce) {
  .hero-recent-dot::after { animation: none; opacity: 0; }
}
 
/* Hide entirely below desktop — only the desktop layout has room for this
   beside the hero copy without squeezing or awkward stacking. */
@media(max-width:1099px){
  .hero-art { display: none; }
}
/* Large desktop: shrink art column slightly so it never squeezes the hero copy. */
@media(min-width:1100px){
  .hero-art { width: 480px; }
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  color: var(--ink3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 720px;
  margin-bottom: 14px;
}
.hero h1 .italic { font-style: italic; color: var(--ink3); }
.trust-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
  width: fit-content;
  max-width: 100%;
}
.trust-line .stars-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}
.trust-line .stars-wrap svg {
  width: 14px; height: 14px;
  fill: var(--ink2);
  flex-shrink: 0;
}
.trust-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.trust-line .trust-text {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink2);
  white-space: normal;
  letter-spacing: -0.01em;
}
.trust-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.trust-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--canvas);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
  color: #fff;
  margin-left: -10px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  object-fit: cover;
  background: var(--ink4);
}
.trust-avatars .trust-avatar:first-child { margin-left: 0; }
.trust-avatar-more {
  background: var(--ink4);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 300;
}
.trust-line .trust-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.hero-sub {
  font-size: 0.96rem; color: var(--ink2); font-weight: 300;
  max-width: 620px; margin-bottom: 1px; line-height: 1.6;
}
/* Big search in hero */
.hero-search {
  position: relative;
  display: flex; align-items: center;
  max-width: 520px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: var(--radius-md);
  padding: 0 16px; gap: 10px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.hero-search:focus-within {
  border-color: rgba(77,144,240,0.7);
  box-shadow: 0 0 0 3px rgba(77,144,240,0.15);
}
.hero-search svg { color: var(--ink4); flex-shrink: 0; }
.hero-search input {
  flex: 1; height: 40px;
  background: none; border: none; outline: none;
  font-family: var(--sans); font-size: 0.88rem; color: var(--ink);
}
.hero-search input::placeholder { color: var(--ink4); }
.hero-search input[type="search"]::-webkit-search-cancel-button,
.hero-search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; appearance: none; display: none;
}
.hero-search input[type="search"]::-ms-clear,
.hero-search input[type="search"]::-ms-reveal {
  display: none; width: 0; height: 0;
}
 
/* ── LIVE SEARCH DROPDOWN ── */
.search-live-dropdown {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  max-height: 420px;
  overflow-y: auto;
  z-index: 400;
  display: none;
  padding: 6px;
}
.search-live-dropdown.show { display: block; }
.sld-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none; background: transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background var(--trans);
}
.sld-row:hover, .sld-row.kbd-active { background: var(--accent-bg); }
.sld-favicon {
  width: 24px; height: 24px; border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
  background: var(--accent); color: #fff;
}
.sld-text { flex: 1; min-width: 0; }
.sld-name { font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sld-cat { font-size: 0.72rem; color: var(--ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sld-row mark.hl { background: rgba(0,82,204,0.16); color: var(--accent); border-radius: 2px; }
.sld-viewall {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 10px;
  margin-top: 2px;
  border: none; background: transparent;
  border-top: 1px solid var(--rule);
  border-radius: 0 0 8px 8px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.sld-viewall:hover { background: var(--accent-bg); }
.sld-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink4);
}
.hero-search-clear {
  background: none; border: none;
  color: var(--ink4); font-size: 0.85rem;
  display: none; padding: 4px;
  transition: color var(--trans);
}
.hero-search-clear:hover { color: var(--ink); }
.hero-meta {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.68rem; color: var(--ink4);
  letter-spacing: 0.04em;
}
.hero-meta strong { color: var(--ink3); font-weight: 600; }
 
/* ── HERO QUICK TAGS ── */
.hero-quick-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  margin-top: 14px; margin-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-quick-tags::-webkit-scrollbar { display: none; }
.hero-qtag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 999px;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  color: var(--ink2);
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-qtag:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.hero-qtag svg { width: 14px; height: 14px; flex-shrink: 0; }
 
.hero-trending {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.68rem; color: var(--ink4);
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0; width: 100%;
}
.trend-ctrl { position: relative; flex-shrink: 0; }
.trend-ctrl-btn {
  display: inline-flex; align-items: center; gap: 3px;
  border: none;
  background: none;
  color: var(--ink4);
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 0;
  border-bottom: 1px dotted var(--ink4);
  transition: color var(--trans), border-color var(--trans);
}
.trend-ctrl-btn:hover { color: var(--ink); border-color: var(--ink); }
.trend-ctrl-btn svg { width: 8px; height: 8px; flex-shrink: 0; transition: transform var(--trans); opacity: 0.6; }
.trend-ctrl.open .trend-ctrl-btn svg { transform: rotate(180deg); }
.trend-ctrl.open .trend-ctrl-btn { color: var(--ink); border-color: var(--ink); }
.trend-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 210;
  min-width: 150px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
  padding: 5px;
  display: none;
}
.trend-ctrl.open .trend-menu { display: block; }
.trend-menu::before {
  content: '';
  position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}
.trend-menu-item {
  display: block; width: 100%; text-align: left;
  border: none; background: none;
  font-family: var(--sans);
  font-size: 0.79rem; color: var(--ink2);
  padding: 6px 9px;
  border-radius: 5px;
  transition: background var(--trans), color var(--trans);
}
.trend-menu-item:hover { background: var(--rule); color: var(--ink); }
.trend-menu-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
 
.hero-metas {
  font-family: var(--mono);
  font-size: 0.78rem; color: var(--ink4);
  letter-spacing: 0.04em; white-space: nowrap;
}
.hero-metas strong { color: var(--ink3); font-weight: 600; }