/* ============================================================
 * theme-flat.css · KOLflow H palette · Binance-style minimal
 *
 * Loaded AFTER shared.css + dashboard.css so it overrides
 * decorative effects without touching the underlying files.
 * Scope: home.html only (for now). Once approved, fold into
 * shared.css and remove this file.
 *
 * Palette H:
 *   bg            #0a0a0a    page background
 *   card          #131313    surface
 *   line          #1f1f1f    hairline border
 *   line-strong   #262626    border on hover / emphasis
 *   text          #f5f5f5    primary
 *   text-dim      #a3a3a3    secondary
 *   text-faint    #737373    tertiary / labels
 *   teal          #5eead4    action · numbers · CTA · price
 *   teal-bright   #7df1de    hover state
 *   purple        #a78bfa    niche tags · AI Insight identifier
 *
 * Stripped: gradients, glows, blurs, hero/card animations,
 *           hover transforms, conic glow rings, shimmer overlays.
 * ============================================================ */

/* ----- Tokens (override shared.css :root) ----- */
:root{
  --bg:#0a0a0a;
  --ink-950:#0a0a0a;
  --ink-900:#0a0a0a;
  --ink-800:#131313;
  --ink-700:#1f1f1f;
  --line:#1f1f1f;
  --line-strong:#262626;
  --text:#f5f5f5;
  --text-dim:#a3a3a3;
  --text-faint:#737373;
  --accent-300:#5eead4;
  --accent-400:#5eead4;
  --accent-500:#5eead4;
  --accent-600:#5eead4;
  --accent-purple:#a78bfa;
  --shadow-card:none;
  --radius-md:6px;
  --radius-lg:8px;
}
html,body{ background:#0a0a0a !important; color:#f5f5f5 !important; }

/* ----- Kill decorative background layers ----- */
.mesh, .blob, .b1, .b2, .b3, .noise, .grid-bg{ display:none !important; }

/* ----- Kill decorative animations ----- */
.hero-fadeup, .hero-fadeup-delayed{ animation:none !important; opacity:1 !important; transform:none !important; }
.ai-spark, .ai-live-dot, .ai-scan, .card-glow, .pulse-dot::after{ animation:none !important; }
.pulse-dot::after{ display:none !important; }
.card-glow{ display:none !important; }
#roster-grid .kol-card{ animation:none !important; opacity:1 !important; transform:none !important; }
.hero-italic{ animation:none !important; background-position:0 0 !important; }

/* ----- Header — solid bg, no blur ----- */
header{
  background:#0a0a0a !important;
  border-bottom:1px solid #1f1f1f !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
header.is-shrunk{
  background:#0a0a0a !important;
  border-bottom-color:#1f1f1f !important;
}
/* Logo K square — flatten gradient to solid teal.
 * Matches BOTH header and footer instances of the same gradient div
 * (footer reuses the same Tailwind class chain). */
header > .container > a:first-of-type > div:first-child,
footer .h-8.w-8.rounded-lg,
.bg-gradient-to-br.from-accent-400{
  background:#5eead4 !important;
  background-image:none !important;
  color:#0a0a0a !important;
}

/* ----- Hero typography — flatten gradient text ----- */
.hero-grad{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#f5f5f5 !important;
  -webkit-text-fill-color:#f5f5f5 !important;
}
.hero-italic{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#5eead4 !important;
  -webkit-text-fill-color:#5eead4 !important;
  /* V3.4 — Option 5: SF Pro / system sans italic (was Instrument Serif).
   * User feedback: Instrument Serif looked "学生作品级" (student-grade free font).
   * Same sans family as body, just italic + heavier weight + teal color.
   * Linear / Stripe Dashboard / Notion all use this pattern. */
  font-family:-apple-system,'SF Pro Display','SF Pro Text','Inter','Geist',system-ui,sans-serif !important;
  font-style:italic !important;
  font-weight:600 !important;
  letter-spacing:-0.025em !important;
  padding:0;
}

/* ----- Nav links — flatten underline glow ----- */
.nav-link{ color:#a3a3a3 !important; text-shadow:none !important; }
.nav-link:hover, .nav-link.current{ color:#f5f5f5 !important; text-shadow:none !important; }
.nav-link::after{ background:#5eead4 !important; }

/* ----- Glass cards — slightly elevated surface for layer separation -----
 * V3 refinement: card bg #161618 (was #131313) gives a 6-step contrast
 * from page bg #0a0a0a, so cards "lift" off the page instead of blending.
 * Hover lifts another step to #1c1c1e. */
.glass{
  background:#161618 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid #1f1f1f !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transition:border-color .15s ease, background .15s ease !important;
}
.glass::before{ display:none !important; }
.glass:hover{
  transform:none !important;
  border-color:#262626 !important;
  background:#1c1c1e !important;
  box-shadow:none !important;
}

/* ----- KOL card — flat + subtle teal avatar ring (V3 anchor) ----- */
.kol-card{
  background:#161618 !important;
  transition:border-color .15s ease, background .15s ease !important;
}
.kol-card:hover{
  transform:none !important;
  background:#1c1c1e !important;
  border-color:#262626 !important;
  box-shadow:none !important;
}
/* Avatar gets a 1.5px dim teal ring — always on. This is the V3
 * "visual anchor" — eye lands on the face first. */
.kol-card .avatar{
  box-shadow:0 0 0 1.5px rgba(94,234,212,0.28) !important;
}
.kol-card:hover .avatar{
  box-shadow:0 0 0 1.5px rgba(94,234,212,0.5) !important;
}

/* ----- Niche pill — V3 Option 4 "Teal Family Mono" -----
 * niche tags use a brighter teal #7DF1DE (one shade lighter than the
 * reach number #5EEAD4) — keeps KOLflow palette strict + tag layer
 * visually distinguished from data layer. Subtle bg fill so pills
 * are actually visible (V2 was transparent → too quiet).
 * Hover = pop up to full brightness. */
.niche-pill{
  background:rgba(125,241,222,0.08) !important;
  background-image:none !important;
  color:#7df1de !important;
  border:1px solid rgba(125,241,222,0.2) !important;
  transition:border-color .15s ease, background .15s ease, color .15s ease !important;
  font-weight:normal !important;
}
.niche-pill:hover{
  background:rgba(125,241,222,0.15) !important;
  border-color:rgba(125,241,222,0.4) !important;
  color:#a7f3d0 !important;
}

/* ----- Buttons — solid teal CTA, no shimmer / glow / shadow ----- */
.btn-primary{
  background:#5eead4 !important;
  background-image:none !important;
  color:#0a0a0a !important;
  border:none !important;
  box-shadow:none !important;
  font-weight:500 !important;
  transition:background .15s ease !important;
}
.btn-primary::before{ display:none !important; }
.btn-primary:hover{
  background:#7df1de !important;
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}
.btn-primary:active{ transform:none !important; filter:none !important; }
.btn-primary.btn-xl{ box-shadow:none !important; }
.btn-primary.btn-xl:hover{ box-shadow:none !important; transform:none !important; }

.btn-secondary{
  background:transparent !important;
  border:1px solid #262626 !important;
  color:#f5f5f5 !important;
  transition:border-color .15s ease, background .15s ease !important;
}
.btn-secondary:hover{
  background:#161616 !important;
  border-color:#3a3a3a !important;
  color:#f5f5f5 !important;
}

/* ----- See-more (inline) ----- */
.home-see-more{ color:#5eead4 !important; transition:color .15s ease !important; }
.home-see-more:hover{ color:#7df1de !important; gap:6px !important; }
.home-see-more:hover svg{ transform:none !important; }
.home-see-more svg{ transition:none !important; }

/* ----- See-more (big bottom CTA) — flat button ----- */
.home-see-more-big{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#5eead4 !important;
  border-radius:6px !important;
  transition:border-color .15s ease, background .15s ease, color .15s ease !important;
}
.home-see-more-big::before{ display:none !important; }
.home-see-more-big:hover{
  background:#161616 !important;
  border-color:#3a3a3a !important;
  color:#7df1de !important;
  transform:none !important;
}
.home-see-more-big:hover svg{ transform:none !important; }
.home-see-more-big svg{ transition:none !important; }

/* ----- Hero tagline ----- */
.home-hero-tagline{ color:#737373 !important; }
.home-hero-tagline::before{
  background:#5eead4 !important;
  box-shadow:none !important;
}

/* ============================================================
 * AI Digest card — flat surface, purple left edge (H semantic
 * rule: purple = AI / algorithm-generated content).
 * Removes: backdrop-blur, gradient bg, glow shadow, scan animation,
 *          gradient sparkle, pulse live-dot glow.
 * ============================================================ */
.ai-digest-card{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  border-left:2px solid #a78bfa !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-radius:0 8px 8px 0 !important;
}
.ai-digest-card:hover{
  border-color:#1f1f1f !important;
  border-left-color:#a78bfa !important;
  box-shadow:none !important;
}
.ai-digest-card .ai-scan{ display:none !important; }
.ai-digest-badge{
  background:rgba(167,139,250,.12) !important;
  background-image:none !important;
  border:1px solid rgba(167,139,250,.3) !important;
  color:#a78bfa !important;
}
.ai-spark{
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#a78bfa !important;
  -webkit-text-fill-color:#a78bfa !important;
}
.ai-live-chip{
  background:rgba(94,234,212,.08) !important;
  border:1px solid rgba(94,234,212,.22) !important;
  color:#5eead4 !important;
}
.ai-live-dot{
  background:#5eead4 !important;
  box-shadow:none !important;
}
.ai-digest-headline{ color:#f5f5f5 !important; }
.ai-digest-section-label{ color:#a78bfa !important; }
.ai-digest-section-label::before{ background:#a78bfa !important; }
.ai-digest-divider{
  background:#1f1f1f !important;
  background-image:none !important;
}
.ai-narrative-list{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
}
.ai-nrow{ border-bottom:1px solid #1f1f1f !important; }
.ai-nrow:hover{ background:#161616 !important; }
.ai-nrow-num{
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#5eead4 !important;
  -webkit-text-fill-color:#5eead4 !important;
}
.ai-digest-toggle{
  background:transparent !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#a3a3a3 !important;
}
.ai-digest-toggle:hover{
  background:#161616 !important;
  border-color:#3a3a3a !important;
  color:#f5f5f5 !important;
}
.ai-tag{
  background:#131313 !important;
  border:1px solid #1f1f1f !important;
  color:#a3a3a3 !important;
  transition:border-color .15s ease, background .15s ease, color .15s ease !important;
}
.ai-tag:hover{
  background:#161616 !important;
  border-color:#3a3a3a !important;
  color:#f5f5f5 !important;
}

/* ----- Filter / Tier pills ----- */
.pill, .filter-pill, .tier-pill{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  color:#a3a3a3 !important;
  box-shadow:none !important;
  transition:border-color .15s ease, background .15s ease, color .15s ease !important;
}
.pill:hover:not(.active):not([disabled]),
.filter-pill:hover:not(.on),
.tier-pill:hover:not(.on){
  background:#161616 !important;
  border-color:#262626 !important;
  color:#f5f5f5 !important;
  transform:none !important;
}
.pill.active, .filter-pill.on, .tier-pill.on{
  background:rgba(94,234,212,.12) !important;
  background-image:none !important;
  border-color:rgba(94,234,212,.35) !important;
  color:#5eead4 !important;
  box-shadow:none !important;
}

/* ----- Status pills (kpill) — no glow on the colored dot ----- */
.kpill .dot{ box-shadow:none !important; }
.pill-available, .pill-verified, .pill-priority, .pill-inactive{ box-shadow:none !important; }

/* ============================================================
 * Sort dropdown (custom /home sort menu) — flatten everything
 * Was: gradient bg, backdrop-blur panel, teal glow ring on open,
 *      gradient hover for active, multi-shadow drop.
 * Now: solid #161618 surface, hairline #1f1f1f border, no blur,
 *      no glow, no shadow. Matches the rest of the H palette.
 * ============================================================ */
.sort-trigger{
  background:#161618 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#f5f5f5 !important;
  border-radius:6px !important;
  transition:border-color .15s ease, background .15s ease !important;
  box-shadow:none !important;
}
.sort-trigger:hover{
  background:#1c1c1e !important;
  border-color:#3a3a3a !important;
  box-shadow:none !important;
}
.sort-trigger[aria-expanded="true"]{
  background:#1c1c1e !important;
  border-color:#3a3a3a !important;
  box-shadow:none !important;
}
.sort-trigger[aria-expanded="true"] .chev{
  color:#a3a3a3 !important;
  opacity:1 !important;
}

.sort-menu{
  background:#161618 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  border-radius:6px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

.sort-option{
  color:#a3a3a3 !important;
  border-radius:4px !important;
  transition:background .15s ease, color .15s ease !important;
}
.sort-option:hover{
  background:#1f1f1f !important;
  color:#f5f5f5 !important;
}
.sort-option.active{
  background:#1f1f1f !important;
  background-image:none !important;
  color:#5eead4 !important;
}
.sort-option .check{ color:#5eead4 !important; }

/* ----- Section titles ----- */
.section-eyebrow{ color:#737373 !important; }
.section-title{ color:#f5f5f5 !important; }
.hr-fine{
  background:#1f1f1f !important;
  background-image:none !important;
}

/* ----- Selection / scrollbar ----- */
::selection{ background:rgba(94,234,212,.25); color:#f5f5f5; }

/* ----- Mobile nav / drawer ----- */
.mobile-nav{
  background:#0a0a0a !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid #1f1f1f !important;
}
@media (max-width:767px){
  .mobile-nav{
    background:#0a0a0a !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:none !important;
    border:1px solid #1f1f1f !important;
    border-bottom:0 !important;
  }
}

/* ----- Bottom nav (mobile) ----- */
.app-bottom-nav{
  background:#0a0a0a !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-top:1px solid #1f1f1f !important;
  box-shadow:none !important;
}
.app-bottom-nav::before, .app-bottom-nav::after{ display:none !important; }

/* Center FAB (Trending) — flatten teal→purple→fuchsia gradient to solid teal */
.app-bottom-nav .abn-item.abn-center .abn-icon{
  background:#5eead4 !important;
  background-image:none !important;
  border:2px solid #0a0a0a !important;
  box-shadow:none !important;
}
.app-bottom-nav .abn-item.abn-center .abn-icon::after{ display:none !important; }
.app-bottom-nav .abn-item.abn-center .abn-icon svg{ stroke:#0a0a0a !important; }
.app-bottom-nav .abn-item.abn-center:active .abn-icon{
  background:#7df1de !important;
  transform:scale(.96) !important;
}

/* Non-center bottom nav items — flat */
.app-bottom-nav .abn-item .abn-icon{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
.app-bottom-nav .abn-item.active:not(.abn-center) .abn-icon{
  background:transparent !important;
  color:#5eead4 !important;
}
.app-bottom-nav .abn-item.active:not(.abn-center) .abn-label{ color:#5eead4 !important; }
.app-bottom-nav .abn-item:not(.active):not(.abn-center) .abn-label{ color:#a3a3a3 !important; }
.app-bottom-nav .abn-item:not(.active):not(.abn-center) .abn-icon{ color:#a3a3a3 !important; }

/* ----- Toast ----- */
.toast{
  background:#131313 !important;
  border:1px solid #262626 !important;
  box-shadow:none !important;
}
.toast .dot{ box-shadow:none !important; }

/* ----- Back-to-top button ----- */
.back-to-top{
  background:#5eead4 !important;
  background-image:none !important;
  color:#0a0a0a !important;
  box-shadow:none !important;
}
.back-to-top:hover{
  background:#7df1de !important;
  transform:none !important;
  box-shadow:none !important;
}

/* ----- Floating back button (other pages, but shared.css declares it) ----- */
.floating-back{
  background:#131313 !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid #262626 !important;
  color:#5eead4 !important;
  box-shadow:none !important;
}
.floating-back:hover{
  background:#161616 !important;
  border-color:#3a3a3a !important;
  color:#7df1de !important;
  transform:none !important;
  box-shadow:none !important;
}
.floating-back svg{ transition:none !important; }
.floating-back:hover svg{ transform:none !important; }

/* ----- Bio links ----- */
.bio-link{
  color:#5eead4 !important;
  border-bottom:1px dotted rgba(94,234,212,.35) !important;
}
.bio-link:hover{
  color:#7df1de !important;
  border-bottom-color:rgba(125,241,222,.6) !important;
}

/* ============================================================
 * V3 — visual anchors + hierarchy refinements
 * ============================================================ */

/* (Removed in V3.1 — top-right reach badge duplicated platform-pill
 *  audience number for single-platform KOLs. Reach is now read off
 *  the platform pill row directly.) */

/* Platform pill — V3.1: clean icon + optional label + teal mono audience.
 * Was: icon + label + " · " + audience all same color (loud).
 * Now: icon dim grey, label dim grey, audience teal mono = data layer. */
.kol-card .platform-icons .pl{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:3px 9px !important;
  background:#1a1a1a !important;
  border:1px solid #1f1f1f !important;
  border-radius:4px !important;
  font-size:10.5px !important;
  color:#a3a3a3 !important;
  font-family:inherit !important;
}
.kol-card .platform-icons .pl svg{
  color:#737373 !important;
  flex-shrink:0;
}
.kol-card .platform-icons .pl .pl-lbl{
  color:#a3a3a3 !important;
  font-family:inherit !important;
}
.kol-card .platform-icons .pl .pl-aud{
  color:#5eead4 !important;
  font-family:'Geist Mono', ui-monospace, monospace !important;
  font-weight:500 !important;
  font-size:10.5px !important;
  letter-spacing:-0.01em !important;
}

/* Context tag color — Global / EN / region / language metadata.
 * Cool grey-blue distinguishes it from passive grey text. Reads as
 * "filterable context" not "decorative". */
.kf-ctx{
  color:#94a3b8 !important;
}

/* Hero subtitle — bump brightness from default text-slate-400 → #c4c4c4
 * so the supporting copy actually reads instead of fading into bg. */
.text-slate-400{ color:#c4c4c4 !important; }

/* Hero h1 — bump from semibold (600) → bold (700) for more presence */
h1.hero-grad{ font-weight:700 !important; }

/* Section divider between hero and roster */
.hero-tight{
  border-bottom:1px solid #1f1f1f !important;
  margin-bottom:0 !important;
}

/* ============================================================
 * Trending cards (rendered by dashboard.js — .trend-card)
 * Make sure they pick up the H palette too. dashboard.css has
 * heavy decoration on these; we flatten.
 * ============================================================ */
.trend-card{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
  transition:border-color .15s ease, background .15s ease !important;
}
.trend-card:hover{
  background:#161616 !important;
  border-color:#262626 !important;
  transform:none !important;
  box-shadow:none !important;
}
.trend-card::before, .trend-card::after{ display:none !important; }
.trend-card-avatar img{ filter:none !important; }
.trend-card .trend-source-pill{
  background:#1f1f1f !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#a3a3a3 !important;
  box-shadow:none !important;
}
.trend-card .trend-engagement{
  color:#5eead4 !important;
  font-family:ui-monospace,'Geist Mono',monospace !important;
}

/* ============================================================
 * Profile avatar pill in header
 * ============================================================ */
.profile-avatar{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#5eead4 !important;
  box-shadow:none !important;
}
.profile-avatar:hover{
  background:#161616 !important;
  border-color:#3a3a3a !important;
  transform:none !important;
}

/* ============================================================
 * Language switcher — flatten
 * ============================================================ */
.lang-switcher-btn{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#a3a3a3 !important;
  box-shadow:none !important;
}
.lang-switcher-btn:hover{
  background:#161616 !important;
  border-color:#3a3a3a !important;
  color:#f5f5f5 !important;
}
.lang-switcher-menu{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.lang-switcher-menu button{
  background:transparent !important;
  color:#a3a3a3 !important;
}
.lang-switcher-menu button:hover{
  background:#1f1f1f !important;
  color:#f5f5f5 !important;
}

/* ============================================================
 * "Verified" / status badges on KOL card — flatten gradient/glow
 * ============================================================ */
.kol-card .platform-icons .pl{
  background:#1f1f1f !important;
  border:1px solid #262626 !important;
  color:#a3a3a3 !important;
}

/* ============================================================
 * Reduced motion — already handled in shared.css, but
 * we re-disable any decorative animation that may still leak.
 * ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
  }
}

/* ============================================================
 * V3 — page-level decorative kills (all other pages)
 *
 * Now that theme-flat.css ships globally, kill the per-page
 * decorative SVG orbs, scan lines, particle systems, gradient
 * heroes, etc. that lived in each page's inline <style>.
 * ============================================================ */

/* /trending — spinning concentric-ring orb in hero */
.trend-orb{ display:none !important; }

/* /insight — multi-orbit particle orb in hero */
.ai-hero-orb{ display:none !important; }

/* /today — animated scan lines, eyebrow blink, load dot pulse */
.today-hero-scan,
.today-eyebrow-dot,
.today-load-dot,
[class*="todayHeroScan"],
[class*="todayLoadDot"]{ animation:none !important; }

/* /topic — spinning loaders, dot pulse, shimmer overlay */
[class*="topicSpin"],
[class*="topicShimmer"],
.topic-spin,
.topic-shimmer{ animation:none !important; }

/* /search — hero italic gradient (uses .hero-italic, already handled
   in earlier block) — but also kills background ghost text if any */
.search-hero-ghost,
.search-bg-text{ display:none !important; }

/* /about — homepage mkt strips that bled into header zone */
.mkt-band,
.mkt-band > *{
  background:#0a0a0a !important;
  background-image:none !important;
}

/* Any KOL micro-strip with 3D color flags (used on about/regulatory) */
.kf-reg-flag-orb,
.kf-flag-strip,
.kf-flag-deco{
  background:#1f1f1f !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* "+ N more" filter toggle (trending KOL filter, today, etc.) */
.kf-show-more,
.kfilter-show-more,
.kol-filter-more,
button[onclick*="ToggleAllKols"],
button[onclick*="toggleAllFilter"]{
  background:transparent !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#5eead4 !important;
  box-shadow:none !important;
}

/* Catch-all: any element with backdrop-filter that we missed */
[style*="backdrop-filter"]{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ============================================================
 * AI digest detailed view (/insight expanded card)
 * The digest renders its inner narrative list using shared.css
 * classes — make sure they pick up the H palette too.
 * ============================================================ */
.ai-digest-section-label[class],
.ai-digest-divider[class],
.ai-narrative-list[class]{
  background-image:none !important;
}

/* ============================================================
 * Topic chips on /trending and /insight (clickable token tags)
 * Was: gradient bg with teal/purple. Now: flat hairline + dim.
 * ============================================================ */
.topic-chip,
.token-chip,
.ai-tag{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  color:#a3a3a3 !important;
  box-shadow:none !important;
  transition:border-color .15s ease, color .15s ease !important;
}
.topic-chip:hover,
.token-chip:hover,
.ai-tag:hover{
  background:#161616 !important;
  border-color:rgba(94,234,212,0.3) !important;
  color:#5eead4 !important;
}
.topic-chip.active,
.token-chip.active{
  background:rgba(94,234,212,0.08) !important;
  border-color:rgba(94,234,212,0.35) !important;
  color:#5eead4 !important;
}

/* ============================================================
 * Trend card on /trending — flatten further (.trend-card was
 * already in earlier block but trending uses richer variants).
 * ============================================================ */
.trend-card-source,
.trend-card-time,
.trend-card-author{
  color:#a3a3a3 !important;
}
.trend-card-x-icon{ color:#737373 !important; }

/* ============================================================
 * /search — search input + result rows
 * ============================================================ */
.search-input,
input[type="search"],
input[type="text"]#searchInput{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  color:#f5f5f5 !important;
  box-shadow:none !important;
  border-radius:6px !important;
}
.search-input:focus,
input[type="search"]:focus,
input[type="text"]#searchInput:focus{
  border-color:#5eead4 !important;
  box-shadow:none !important;
  outline:none !important;
}
.kol-result-row{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
}
.kol-result-row:hover{
  background:#161616 !important;
  border-color:#262626 !important;
}

/* ============================================================
 * /regulatory — circular flag cards (decorative gradient bgs)
 * The flag panels use bright country-color gradients. We keep
 * the country logo but flatten the surrounding panel to fit H.
 * (Don't kill the flag-circle bg — that IS the regulator's logo.)
 * ============================================================ */
.reg-card,
.regulator-card,
.kf-reg-card{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
}
.reg-card:hover,
.regulator-card:hover,
.kf-reg-card:hover{
  background:#161616 !important;
  border-color:#262626 !important;
  transform:none !important;
}
.reg-modal,
.regulator-modal{
  background:#161618 !important;
  background-image:none !important;
  border:1px solid #262626 !important;
  box-shadow:none !important;
}

/* ============================================================
 * /today — NB2 image hero stays (it's actual content). But the
 * surrounding scan-line / eyebrow-dot decorations get stripped.
 * ============================================================ */
.today-image-wrap{
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
}

/* ============================================================
 * /about — mission cards
 * ============================================================ */
.mission-card,
.about-card{
  background:#131313 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
}

/* ============================================================
 * Filter toggle button row ("+23 more KOLs" on trending) — make
 * sure it's teal not green. Was using .pulse-dot or similar.
 * ============================================================ */
[class*="filter-more"],
[class*="toggle-all"]{
  color:#5eead4 !important;
}

/* ============================================================
 * /insight V3.1 — unify the 3 "Today's hot X" cards to single
 * teal accent. Was: token=teal, project=violet, topic=fuchsia
 * (3 colors made the page look like a color test page).
 * Differentiation now comes from the LABEL text only.
 * ============================================================ */
.ai-today3-card,
.ai-today3-card.violet,
.ai-today3-card.fuchsia{
  background:#161618 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
}
.ai-today3-card::before,
.ai-today3-card.violet::before,
.ai-today3-card.fuchsia::before{ display:none !important; }
.ai-today3-card:hover,
.ai-today3-card.violet:hover,
.ai-today3-card.fuchsia:hover{
  background:#1c1c1e !important;
  border-color:#262626 !important;
  transform:none !important;
}
.ai-today3-label .dot,
.ai-today3-card.violet .ai-today3-label .dot,
.ai-today3-card.fuchsia .ai-today3-label .dot{
  background:#5eead4 !important;
  box-shadow:none !important;
}
.ai-today3-meta .num,
.ai-today3-card.violet .ai-today3-meta .num,
.ai-today3-card.fuchsia .ai-today3-meta .num{
  color:#5eead4 !important;
}

/* ============================================================
 * /insight stats line — was breaking awkwardly with "2m ago"
 * on its own row. Tighter mono format + nowrap on each metric.
 * ============================================================ */
.ai-hero-stats{
  font-family:'Geist Mono', ui-monospace, monospace !important;
  font-size:11px !important;
  letter-spacing:0.04em !important;
  color:#737373 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  align-items:baseline !important;
  text-transform:uppercase !important;
}
.ai-hero-stat{
  white-space:nowrap !important;
}
.ai-hero-stat .v{
  color:#5eead4 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  margin-right:5px !important;
}

/* ============================================================
 * V3.2 — "No ambient lights" final pass
 * User feedback: still seeing glow halos. Kill EVERY remaining
 * decorative glow (box-shadow + text-shadow) site-wide.
 * ============================================================ */

/* /trending hero — remove 🔥 flame SVG entirely (per user) */
.trend-icon-wrap,
.trend-icon-glow,
.trend-icon,
.trend-icon-wrap::after,
.trend-icon-wrap::before{
  display:none !important;
}

/* Universal kill — any element with "-glow" in class name */
[class*="-glow"]{ display:none !important; }

/* Home hero tagline dot — kill the 8px teal halo, keep solid dot */
.home-hero-tagline::before{
  box-shadow:none !important;
}

/* KOL card avatar — remove the V3 teal ring (was too "ambient") */
.kol-card .avatar,
.kol-card:hover .avatar{
  box-shadow:none !important;
}

/* Bottom nav center FAB — solid teal, no shadow halo (mobile + desktop) */
.app-bottom-nav .abn-item.abn-center .abn-icon,
.app-bottom-nav .abn-center .abn-icon{
  box-shadow:none !important;
}
@media (max-width:767px){
  .app-bottom-nav .abn-item.abn-center .abn-icon{
    box-shadow:none !important;
  }
}

/* Bottom nav active top-bar indicator — drop the teal underglow */
.app-bottom-nav .abn-item.active::before,
.app-bottom-nav .abn-item.active::after,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"]::before{
  box-shadow:none !important;
}

/* All decorative dots — KPill, AI live, Toast, ai today3, etc. */
.kpill .dot,
.ai-live-dot,
.toast .dot,
.ai-today3-label .dot,
.kpill,
.pulse-dot::after,
.profile-avatar{
  box-shadow:none !important;
}

/* Text shadow on h1/h2/h3 and nav links — kill all glow text effects */
h1, h2, h3,
.nav-link, .nav-link.current, .nav-link:hover{
  text-shadow:none !important;
}

/* News card / regulator card / trend-orb / sort-trigger residual glow */
.news-card,
.news-card:hover,
.trend-card,
.trend-card:hover,
.reg-card,
.reg-card:hover{
  box-shadow:none !important;
}

/* Tier/filter/sort active pills — kill highlight glow */
.tier-pill,
.tier-pill.on,
.filter-pill,
.filter-pill.on,
.pill,
.pill.active,
.sort-trigger,
.sort-trigger[aria-expanded="true"],
.sort-menu,
.sort-option,
.sort-option.active{
  box-shadow:none !important;
}

/* Trending scroll fade overlays (left/right edge gradients) — kill */
.trend-scroll::before,
.trend-scroll::after,
.trend-scroll-fade,
.trend-scroll-arrow{
  display:none !important;
}

/* Regulator status bars + flag rings */
.reg-status-bar,
.reg-flag-ring{
  box-shadow:none !important;
}

/* AI digest card — kill any remaining inset/glow */
.ai-digest-card,
.ai-digest-card:hover,
.ai-digest-badge,
.ai-digest-toggle{
  box-shadow:none !important;
}

/* Trending preview gradient overlay & scroll edge fades */
.trend-preview-fade,
.trend-strip-fade{ display:none !important; }

/* Mobile bottom nav backdrop glow */
.app-bottom-nav,
.app-bottom-nav::before,
.app-bottom-nav::after{
  box-shadow:none !important;
}

/* Back-to-top button — flat */
.back-to-top,
.back-to-top:hover{
  box-shadow:none !important;
}

/* Floating back button (other pages) */
.floating-back,
.floating-back:hover{
  box-shadow:none !important;
}

/* Modal dialogs (regulator modal, etc.) */
.kf-modal,
.modal,
[role="dialog"]{
  box-shadow:none !important;
}

/* Mobile nav drawer shadow */
.mobile-nav{
  box-shadow:none !important;
}

/* Toast notification — flat */
.toast{
  box-shadow:none !important;
}

/* Lang switcher menu */
.lang-switcher-menu,
.lang-switcher-btn,
.lang-switcher-btn:hover{
  box-shadow:none !important;
}

/* Trending source filter row tabs */
.trend-source-tab,
.trend-source-tab.active,
.trend-source-tab:hover{
  box-shadow:none !important;
}

/* Today/hero scan/eyebrow dots — kill any remaining halo */
.today-hero-eyebrow .dot,
.today-eyebrow-dot{
  box-shadow:none !important;
}

/* Search input focus ring — change from teal halo to thin border */
.search-input:focus,
input[type="search"]:focus,
input[type="text"]:focus,
#searchInput:focus{
  box-shadow:none !important;
}

/* ============================================================
 * V3.3 - The big one. Animated flowing borders + sweep shines.
 *
 * Root cause of desktop "ambient lights": dashboard.css adds a
 * ::after pseudo to every .glass and .trend-card painting a
 * conic-gradient(teal/purple) border that animates via
 * @keyframes dapp-border-flow (7-10s infinite per card).
 * Also .ai-rank-row::before sweeps a teal shine left-to-right.
 *
 * Invisible on mobile (small cards mask the edges) but on desktop
 * these are clearly rotating teal/purple halos.
 * ============================================================ */
.glass::after,
.trend-card::after,
.ai-rank-row::before,
.ai-rank-row::after{
  display:none !important;
  animation:none !important;
  content:none !important;
}

/* ai-rank-row hover bg was a teal sweep gradient - flatten */
.ai-rank-row:hover{
  background:#161618 !important;
  background-image:none !important;
}

/* Sparkline SVG on /insight ranking rows (decorative line chart,
 * deterministic-from-name, not real data). User wants removed. */
.ai-rank-spark,
.ai-rank-spark polyline,
svg.ai-rank-spark{
  display:none !important;
}

/* ============================================================
 * Section eyebrows ("TODAY", "REGULATORY", "TODAY'S HOT TOKENS")
 * dashboard.css turns these into heavy gradient pills with
 * text-shadow glow + animated pulsing dot + flowing ring.
 * Flatten to plain mono uppercase + solid dot.
 * ============================================================ */
.section-eyebrow{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  color:#737373 !important;
  font-weight:500 !important;
  text-shadow:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  letter-spacing:0.18em !important;
}
.section-eyebrow::before{
  content:'' !important;
  display:inline-block !important;
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:#5eead4 !important;
  box-shadow:none !important;
  animation:none !important;
  margin-right:9px !important;
  vertical-align:middle !important;
  padding:0 !important;
  position:static !important;
}
.section-eyebrow::after{ display:none !important; }

/* Kill all dapp-* animation classes site-wide */
[class*="dapp-"]{ animation:none !important; }

/* Strip animation on commonly-animated containers */
.glass,
.glass:hover,
.trend-card,
.trend-card:hover,
.ai-rank-row,
.ai-rank-row:hover,
.section-eyebrow,
.section-eyebrow::before,
.section-eyebrow::after{
  animation:none !important;
}

/* Final catch: any element using conic-gradient (rotating halo) */
[style*="conic-gradient"]{
  background-image:none !important;
}

/* ============================================================
 * V3.3.1 FIX - Correct class names for /insight rank list
 * Actual DOM uses .rank-spark + .ai-rank-card (renamed from
 * the .ai-rank-spark + .ai-rank-row in dashboard.css comments).
 * ============================================================ */
.rank-spark,
.rank-spark polyline,
svg.rank-spark{
  display:none !important;
}

.ai-rank-card,
.ai-rank-card:hover{
  background:#161618 !important;
  background-image:none !important;
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
  animation:none !important;
}
.ai-rank-card::before,
.ai-rank-card::after{
  display:none !important;
  animation:none !important;
  content:none !important;
}
.ai-rank-card:hover{
  background:#1c1c1e !important;
}

/* Also kill any "ai-rank-*" residual animations */
[class*="ai-rank-"]{ animation:none !important; }

/* ============================================================
 * V3.5 - /insight hero background scan + grid mask
 * .ai-hero::before = subtle grid mask (visible faint dots)
 * .ai-hero::after  = diagonal scan gradient looping 16s
 * Both are decorative ambient effects - kill them.
 * ============================================================ */
.ai-hero::before,
.ai-hero::after{
  display:none !important;
  animation:none !important;
  content:none !important;
  background:none !important;
  background-image:none !important;
}
.ai-hero{
  background:transparent !important;
  background-image:none !important;
}

/* Kill the underlying keyframes from playing anywhere */
[class*="aiHero"],
[class*="aiOrb"]{ animation:none !important; }

/* ============================================================
 * V3.6 FIX - residual pulsing dots near AI Insight hero
 * .today-card-dot - todayCardDotPulse animation (next to "TODAY")
 * .brk-dot        - brkDotPulse animation (next to "MORE BREAKING")
 * Kept the solid teal dot, just kill the pulse animation + glow.
 * ============================================================ */
.today-card-dot,
.brk-dot,
.today-eyebrow-dot,
.today-hero-eyebrow .dot,
[class*="-dot"]:not(.pulse-dot){
  animation:none !important;
  box-shadow:none !important;
}

/* Catch any other "*Pulse" animations that might leak through */
[style*="Pulse"]{ animation:none !important; }

/* ============================================================
 * V3.7 - Bottom nav active indicator visibility
 * Was: 28px x 2px teal bar centered above icon (too subtle on
 *      narrow viewports, esp. when adjacent to bright FAB).
 * Now: 40px x 3px bar, full opacity teal, drop the transform
 *      shift so it sits dead-center above the icon.
 * Applies to Home / Search / Insight (not center FAB / not More).
 * ============================================================ */
.app-bottom-nav .abn-item.active:not(.abn-center):not([data-abn-id="more"])::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:40px !important;
  height:3px !important;
  background:#5eead4 !important;
  background-image:none !important;
  box-shadow:none !important;
  border-radius:0 0 2px 2px !important;
}

/* ============================================================
 * V3.8 - Active indicator unified across ALL bottom-nav tabs
 *
 * Previous ::before bar approach was inconsistent (cut off /
 * not visible on Insight side). Switch to top-edge border:
 *   - 3px teal border-top on active item
 *   - Applies to Home / Search / Insight (normal active)
 *   - Applies to Trending FAB when on /trending (visual cue
 *     beyond the always-teal FAB color)
 *   - Applies to More when mobile-nav drawer is open
 *
 * Uses border-top so it's always at the exact top edge,
 * no positioning math, no overflow issues.
 * ============================================================ */

/* Remove previous ::before bar approach (V3.7) — replaced */
.app-bottom-nav .abn-item.active::before{
  display:none !important;
  content:none !important;
}

/* New unified top-edge indicator — 3px teal border at top of active tab */
.app-bottom-nav .abn-item.active,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"]{
  border-top:3px solid #5eead4 !important;
  padding-top:5px !important;  /* compensate so icon doesn't shift down */
}

/* Center FAB (Trending) - also get the bar but DON'T compensate
 * padding because the FAB sits above the nav with -8px margin already. */
.app-bottom-nav .abn-item.active.abn-center{
  border-top:3px solid #5eead4 !important;
  padding-top:0 !important;  /* keep FAB position unchanged */
}

/* Active label + icon stays teal (already set in earlier V3.2 block) */
.app-bottom-nav .abn-item.active:not(.abn-center) .abn-icon,
.app-bottom-nav .abn-item.active:not(.abn-center) .abn-label,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"] .abn-icon,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"] .abn-label{
  color:#5eead4 !important;
}

/* ============================================================
 * V3.9 - User feedback batch
 *
 * (1) Revert top bar to original short 28x2 - V3.8 border-top
 *     was too thick / spanned full tab width.
 * (2) Active tab needs icon "glow" - add subtle teal pill
 *     background behind the icon so it reads "lit up" like Home does.
 * (3) Re-kill ai-orb-* child animations - parent is display:none
 *     but children still run animation cycles burning GPU.
 * ============================================================ */

/* (1) Undo V3.8 border-top approach */
.app-bottom-nav .abn-item.active,
.app-bottom-nav .abn-item.active.abn-center,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"]{
  border-top:0 !important;
  padding-top:8px !important;  /* restore original */
}

/* Bring back the short top bar - centered, 28x2 like original */
.app-bottom-nav .abn-item.active:not(.abn-center)::before,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"]::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:28px !important;
  height:2px !important;
  background:#5eead4 !important;
  background-image:none !important;
  border-radius:0 0 2px 2px !important;
  box-shadow:none !important;
  display:block !important;
}

/* (2) Active icon "glow" - subtle teal pill behind the SVG */
.app-bottom-nav .abn-item.active:not(.abn-center) .abn-icon,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"] .abn-icon{
  background:rgba(94,234,212,0.13) !important;
  border-radius:14px !important;
  padding:6px 14px !important;
  color:#5eead4 !important;
}

/* (3) Kill the still-animating orb children (parent hidden, kids still running) */
.ai-orb-arc, .ai-orb-core, .ai-orb-particle,
.ai-orb-particle.p1, .ai-orb-particle.p2, .ai-orb-particle.p3{
  animation:none !important;
  display:none !important;
}

/* V3.9 specificity fix - V3.7's ::before still winning because it had
 * higher specificity with extra :not() chain. Match it here. */
.app-bottom-nav .abn-item.active:not(.abn-center):not([data-abn-id="more"])::before,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"]:not(.abn-center)::before{
  width:28px !important;
  height:2px !important;
  background:#5eead4 !important;
  border-radius:0 0 2px 2px !important;
}

/* ============================================================
 * V3.10 ROLLBACK - undo the icon pill background.
 * That broke nav layout: pill added 6/14px padding to icon
 * which made the icon container taller/wider, shifting label
 * down and creating a "stacked indicator" look.
 *
 * Revert to original: just teal color change on icon + label.
 * Top bar (28x2 from V3.9 fix) stays.
 * ============================================================ */
.app-bottom-nav .abn-item.active:not(.abn-center) .abn-icon,
body.mobile-nav-open .app-bottom-nav .abn-item[data-abn-id="more"] .abn-icon{
  background:transparent !important;
  background-image:none !important;
  border-radius:0 !important;
  padding:0 !important;
  color:#5eead4 !important;
}

/* Restore default icon container sizing so it matches inactive tabs */
.app-bottom-nav .abn-item .abn-icon{
  background:transparent !important;
  padding:0 !important;
}

/* ============================================================
 * V3.11 - Sync hero italic font to pages with inline overrides
 * /regulatory has .reg-headline em with Instrument Serif baked into
 * its own <style> block. Override it too so the SF Pro italic is
 * consistent across ALL pages, not just .hero-italic users.
 * ============================================================ */
.reg-headline em,
.reg-headline em.hero-italic,
.hero em,
h1 em, h2 em{
  font-family:-apple-system,'SF Pro Display','SF Pro Text','Inter','Geist',system-ui,sans-serif !important;
  font-style:italic !important;
  font-weight:600 !important;
  letter-spacing:-0.025em !important;
  color:#5eead4 !important;
}

/* ============================================================
 * V3.12 - Single-source K logo
 * User: 所有K的logo移除，全部统一用 左上角KOLflow的logo
 * Only the header (top-left of every page) keeps the K square +
 * KOLflow wordmark. Everywhere else (footer, signin centered brand,
 * regulatory hero brand, about brand) - hide the K square.
 *
 * Selector strategy: hide any element using the gradient classes
 * .bg-gradient-to-br.from-accent-400, then re-enable only inside <header>.
 * Also catches the smaller decorative variants (h-6, h-7 versions).
 * ============================================================ */

/* Hide K square logos globally */
.bg-gradient-to-br.from-accent-400.to-fuchsia-500,
.bg-gradient-to-br.from-accent-400.via-violet-500,
.brand-logo.bg-gradient-to-br{
  display:none !important;
}

/* Re-enable header K logo (the single source of truth) */
header .bg-gradient-to-br.from-accent-400.to-fuchsia-500,
header .bg-gradient-to-br.from-accent-400.via-violet-500,
header .brand-logo.bg-gradient-to-br,
header > .container > a:first-of-type > div:first-child{
  display:grid !important;
  background:#5eead4 !important;
  background-image:none !important;
  color:#0a0a0a !important;
}

/* ============================================================
 * V3.12 CORRECTION - user wants K square GONE everywhere.
 * Only "KOLflow" wordmark text (with italic "flow") remains.
 * Including header - no K box, just the typography logo.
 * ============================================================ */

/* Hide K square logo EVERYWHERE - including header */
header .bg-gradient-to-br.from-accent-400,
header .bg-gradient-to-br.from-accent-400.to-fuchsia-500,
header .bg-gradient-to-br.from-accent-400.via-violet-500,
header .brand-logo.bg-gradient-to-br,
header > .container > a:first-of-type > div:first-child{
  display:none !important;
}

/* ============================================================
 * V3.13 ROLLBACK - I misread the request twice.
 * User clarified: 左下角 (bottom-left = footer) logo move,
 *                 左上角 (top-left = header) logo KEEP.
 * Restore header K square, keep footer K hidden.
 * ============================================================ */
header .bg-gradient-to-br.from-accent-400,
header .bg-gradient-to-br.from-accent-400.to-fuchsia-500,
header .bg-gradient-to-br.from-accent-400.via-violet-500,
header .brand-logo.bg-gradient-to-br,
header > .container > a:first-of-type > div:first-child{
  display:grid !important;
  background:#5eead4 !important;
  background-image:none !important;
  color:#0a0a0a !important;
}

/* Footer/other K squares stay hidden (handled by V3.12 main block) */

/* V3.14 - Final: NO K square anywhere. Only "KOLflow" wordmark text. */
header .bg-gradient-to-br.from-accent-400,
header .bg-gradient-to-br.from-accent-400.to-fuchsia-500,
header .bg-gradient-to-br.from-accent-400.via-violet-500,
header .brand-logo.bg-gradient-to-br,
header > .container > a:first-of-type > div:first-child{
  display:none !important;
}

/* V3.15 FINAL BRUTE FORCE - K square hidden everywhere, any variant */
.brand-logo,
[class*="from-accent-400"][class*="to-fuchsia"],
[class*="from-accent-400"][class*="via-violet"],
header div[class*="bg-gradient"],
footer div[class*="bg-gradient"],
a[href="home.html"] > div:first-child{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* ============================================================
 * V3.16 - /search "Show N more" toggle button fix
 * Was: inside grid container, treated as 1 grid cell, width ~80px,
 *      text "SHOW 12 MORE" wraps to 3 lines = ugly tall pill.
 * Fix: span all grid columns + auto-centered + compact size.
 * Applies to both .kol-results and .term-results grids.
 * ============================================================ */
.results-toggle{
  grid-column:1 / -1 !important;
  width:auto !important;
  max-width:200px !important;
  margin:14px auto 0 !important;
  padding:8px 20px !important;
  font-size:10px !important;
  letter-spacing:.16em !important;
  white-space:nowrap !important;
  height:auto !important;
  border-radius:99px !important;
  border:1px solid #262626 !important;
  background:transparent !important;
  color:#a3a3a3 !important;
  box-shadow:none !important;
}
.results-toggle:hover{
  background:#161618 !important;
  border-color:#5eead4 !important;
  color:#5eead4 !important;
  box-shadow:none !important;
}

/* ============================================================
 * V3.17 - today.html + topic.html cleanup
 * (1) `.brand-flow` wordmark italic teal (was unstyled plain text)
 * (2) Kill today-hero scan animation + ambient glow
 * ============================================================ */
.brand-flow{
  font-style:italic !important;
  font-weight:400 !important;
  color:#5eead4 !important;
  font-family:-apple-system,'SF Pro Display','SF Pro Text',Inter,Geist,system-ui,sans-serif !important;
}

/* Kill the scanline sweep on today-hero-wrap */
.today-hero-wrap::after{
  display:none !important;
  animation:none !important;
}
.today-hero-wrap{
  border:1px solid #1f1f1f !important;
  box-shadow:none !important;
}

/* ============================================================
 * V3.18 - /trending two-section split
 * Top: Today's Top 10 (by engagement, UTC today)
 * Bottom: Latest (sorted by time)
 * Each section gets a mono-style eyebrow header with a dot.
 * ============================================================ */
.trend-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px 0;
  font-family:"Geist Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#94a3b8;
}
.trend-section-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5eead4;
  flex-shrink:0;
}
.trend-section-dot-latest{
  background:#a78bfa;
}
.trend-section-title{
  color:#f5f5f5;
  font-weight:600;
}
.trend-section-sub{
  color:#737373;
  font-weight:400;
  font-size:10px;
  letter-spacing:.18em;
}
@media (max-width: 640px){
  .trend-section-sub{ display:none; }
}

/* ============================================================
 * V3.19 - Standardize trending card sizes
 * Issues addressed:
 *  - Variable card heights (some too tall with empty space, some cut off)
 *  - Long body text overflows readability
 *  - Image floating far from text when body is short
 *  - Inconsistent visual rhythm across cards
 *
 * Fix:
 *  - Body text clamped to 3 lines (or 4 on top-strip cards) with ellipsis
 *  - Title clamped to 2 lines
 *  - Cards have consistent minimum padding/spacing
 *  - "See more →" link appended via ::after for posts with truncated body
 *  - Image always sits directly below body (gap controlled by margin)
 * ============================================================ */

/* ============================================================
 * V3.20 (replaces V3.19) - Uniform-size trending cards
 *
 * Hard requirements per user:
 *   - ALL cards must be the EXACT same size (no min/max — fixed)
 *   - Visible inline "See more →" link in every card
 *
 * Implementation:
 *   - Top strip card: fixed 240px tall, image hidden (text-only) so a card
 *     with photo doesn't dwarf a card without
 *   - Stream card: fixed min-height 200px, image clamped to 140px high
 *   - Title clamped 2 lines, body clamped 3 lines (auto … ellipsis)
 *   - "See more →" pinned with mt-auto so it sits at bottom of card
 *   - Image (where present) is the bottom edge of the card
 * ============================================================ */

/* Tighten the gap between the platform filter tabs and the top strip cards.
 * The #trending hero section has 48px bottom padding that creates a big
 * empty band before the first card. Reduce to 16px. */
#trending{ padding-bottom: 16px !important; }
.top-strip-wrap{ padding-top: 4px !important; }

/* ---- Top strip cards (horizontal scroll) ALL EXACT SAME HEIGHT ----
 * V3.25: 300px tall, body flex-grows to absorb height variance so image
 * always anchors to the bottom edge with no empty band below.
 *   head (36) + gap (10) + body (flex-grow, min 0) + gap (10) + thumb (140) + padding (32)
 *   = 228 fixed + body fills 72px on average
 * Body content uses dashboard.css line-clamp:5 so long text still truncates. */
.trend-card{
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  align-self: start !important;
  gap: 10px !important;
}
.trend-card .trend-card-head{ flex-shrink: 0; margin-bottom: 0; }
/* Body fills remaining vertical space so the image is always at the bottom
 * edge. Override dashboard.css's `min-height: 100px` (kept text from
 * collapsing) — with flex-grow the body fills regardless. */
.trend-card .trend-card-body{
  overflow: hidden;
  line-height: 1.5;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-bottom: 0;
}
/* Image: LANDSCAPE — fixed HEIGHT (not aspect-ratio) so wider desktop cards
 * don't blow up the image's height and overflow the card. width auto-fills,
 * image is object-fit:cover to handle any aspect ratio. */
.trend-card .trend-card-thumb{
  display: block !important;
  margin-top: 0 !important;
  height: 140px !important;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
  aspect-ratio: auto !important;  /* override V3.23 16/9 */
}
/* Desktop (≥768px): grid stretches card width to ~370px+. Cap card max width
 * to keep 340px height balanced with body+image+padding. */
@media (min-width: 768px){
  .trend-scroll > .trend-card{
    max-width: 340px;
  }
}
.trend-card .trend-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fallback image: when post has no media, we use the source/KOL's avatar as a
 * large background. Dim + blur it slightly so it reads as a "placeholder"
 * card cover rather than a duplicate of the small avatar at top. */
.trend-card .trend-card-thumb-fallback{
  position: relative;
}
/* Fallback image (KOL avatar shown when post.image missing/failed): use
 * gentle blur + darken so it's clearly NOT the actual post media but still
 * recognizable as the KOL. Was blur(8px) — too aggressive, made cards look
 * broken. Now blur(3px) + dim — looks like an intentional darkened backdrop. */
.trend-card .trend-card-thumb-fallback img{
  filter: blur(3px) brightness(0.45) saturate(1.1);
  transform: scale(1.1);
}
/* Add a teal-tinted dark overlay so the fallback reads as a "placeholder
 * with KOL identity" rather than "broken / loading". */
.trend-card .trend-card-thumb-fallback::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(94,234,212,.08), rgba(0,0,0,.45));
  pointer-events: none;
}
.trend-card .trend-card-thumb-fallback::after{
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  pointer-events: none;
}
.trend-card .trend-card-foot{ flex-shrink: 0; margin-top: auto; }

/* ---- Stream cards (vertical list) ALL EXACT SAME HEIGHT ---- */
#streamRoot article.post{
  display: flex !important;
  flex-direction: column !important;
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
  overflow: hidden !important;
}
#streamRoot article.post h4{
  overflow: hidden;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.7em;
}
#streamRoot article.post p.text-slate-200{
  overflow: hidden;
  line-height: 1.55;
}
/* Stream image: ALWAYS true 16:9 aspect ratio.
 * Mobile previously had `height: 100px` which on a 375px-wide card produced a
 * 3.75:1 squashed image (looked like a banner strip). Now mobile and desktop
 * both use aspect-ratio:16/9 → ~210px tall on mobile, ~478px on desktop. */
#streamRoot .post-img{
  display: block !important;
  margin-top: 10px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (min-width: 768px){
  /* Desktop cap so the image doesn't dominate the viewport on very wide
   * windows. For typical 850px cards, image is 850 × 9/16 = 478px tall. */
  #streamRoot .post-img{
    max-height: 500px;
  }
  /* Let cards size to content — single column doesn't need uniform height. */
  #streamRoot article.post{
    height: auto !important;
    min-height: 280px !important;
    max-height: none !important;
  }
}
@media (max-width: 767px){
  /* Mobile: the fixed 340px card height needs to allow room for the 16:9
   * image (~210px on a 375px card) + header + body. Let the card grow. */
  #streamRoot article.post{
    height: auto !important;
    min-height: 280px !important;
    max-height: none !important;
  }
}
#streamRoot article.post > div.mt-4{
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10px;
}

/* ---- Inline "see more..." text (italic teal at end of body) ---- */
.see-more-inline{
  color: #5eead4;
  font-style: italic;
  font-size: 0.95em;
  white-space: nowrap;
}

/* ============================================================
 * V3.27 - Strict 3-line max on mobile cards.
 * User requirement: body must end with "see more..." on the 3rd line,
 * no 4th line overflow even if text is very long. CSS line-clamp does
 * the truncation visually (JS truncation might miss edge cases).
 * ============================================================ */
@media (max-width: 767px){
  .trend-card .trend-card-body,
  #streamRoot article.post p.text-slate-200{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.6em;
    line-height: 1.5;
  }
  #streamRoot article.post h4{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.8em;
    line-height: 1.35;
  }
}

/* ============================================================
 * V3.29 — Stream card no-image collapse (mobile) + top strip 3×2 desktop.
 *
 * MOBILE (≤767px): STREAM posts (#streamRoot article.post) WITHOUT a real
 *   image collapse — the 340px fixed height looks like a hollow box for
 *   text-only posts (e.g. Polymarket). With no image area to fill, we let
 *   the card height shrink to fit content.
 *   TopStrip (.trend-card) is UNCHANGED — those are horizontally-scrolling
 *   thumbnail cards where uniform height is desirable.
 *
 * DESKTOP (≥768px): top strip shows exactly 6 cards in a 3×2 grid.
 *   Cards become rectangular (~248px tall, was 300px). Image 96px (was 140px),
 *   body line-clamp 3 (was 5).
 * ============================================================ */
@media (max-width: 767px){
  #streamRoot article.post.post-noimg{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  /* Loosen body — no image to fight for space */
  #streamRoot article.post.post-noimg p.text-slate-200{
    -webkit-line-clamp: 5;
    max-height: none;
  }
}

@media (min-width: 768px){
  /* Show only 6 cards on desktop top strip */
  .trend-scroll > .trend-card:nth-child(n+7){
    display: none !important;
  }
  /* Rectangular landscape: shorter cards, wider via grid auto-fit */
  .trend-scroll > .trend-card{
    height: 248px !important;
    min-height: 248px !important;
    max-height: 248px !important;
    max-width: none !important;  /* override the 340px cap so grid fills column */
    gap: 8px !important;
  }
  .trend-scroll > .trend-card .trend-card-thumb,
  .trend-scroll > .trend-card .trend-card-thumb-fallback{
    height: 96px !important;
  }
  /* Tighten body to 3 lines on desktop (was 5) so it fits 248px card */
  .trend-scroll > .trend-card .trend-card-body{
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    max-height: 4.6em;
    line-height: 1.5;
  }
}

/* ============================================================
 * V3.28 - /insight today-card click-to-origin hint.
 * Adds a small "↗ Tap to read full article" badge on the image AND a
 * caption row below so users know the card is interactive.
 * ============================================================ */
.today-card{ position: relative; cursor: pointer; }
.today-card-hint{
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.75);
  color: #5eead4;
  font-size: 11px;
  font-family: "Geist Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-radius: 99px;
  border: 1px solid rgba(94,234,212,.3);
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.today-card-caption{
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  font-family: "Geist Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.today-card-caption-arrow{ color: #5eead4; font-size: 14px; }