@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

/* ============================================================
   flat.css — YB Zone monochrome content theme (2026 refresh).

   A calm, near-black monochrome system inspired by the new home
   page: Space Grotesk headings, Inter body, hairline-bordered
   cards with a gentle hover lift, and the YB brand colours used
   VERY sparingly — indigo (Vibe) for accents/links, rose (Rant)
   reserved for danger / rant references.

   Loaded LAST on: features / terms / privacy / report /
   delete-account / manual.  NOT on index.html (home has its own
   self-contained build).  Because it is linked after each page's
   own <style>, its rules win the cascade.
   ============================================================ */

:root {
  /* Monochrome base */
  --bg: #07070a !important;
  --void: #07070a !important;
  --deep: #0e0e12 !important;
  --surface: #0e0e12 !important;
  --bg-card: #0e0e12 !important;
  --bg-elevated: #141418 !important;
  --text: #e8e8ec !important;
  --text-bright: #ffffff !important;
  --muted: #8a8a94 !important;
  --dim: #55555f !important;

  /* Brand — used minimally */
  --brand: #6366f1 !important;      /* indigo · Vibe */
  --brand-dim: rgba(99, 102, 241, 0.14) !important;
  --rant: #f43f5e !important;       /* rose · Rant / danger */

  /* Accent aliases the pages reference (recoloured in place) */
  --accent: #6366f1 !important;
  --accent-dim: rgba(99, 102, 241, 0.14) !important;
  --cyan: #6366f1 !important;
  --cyan-dim: rgba(99, 102, 241, 0.14) !important;
  --ferrari: #f43f5e !important;

  /* Hairlines */
  --border: rgba(255, 255, 255, 0.07) !important;
  --border-hover: rgba(255, 255, 255, 0.14) !important;
  --line: rgba(255, 255, 255, 0.07) !important;
  --line-strong: rgba(255, 255, 255, 0.14) !important;
  --radius: 14px !important;
}

/* ---- Base ---- */
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  background:
    radial-gradient(circle at 30% -10%, rgba(99, 102, 241, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 8%, rgba(244, 63, 94, 0.035) 0%, transparent 42%),
    linear-gradient(180deg, #07070a 0%, #050509 100%) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Drop decorative noise layers */
.noise { display: none !important; }

/* ---- Typography ---- */
h1, h2, h3, .wordmark, .brand,
.hero h1, .hero .tagline {
  font-family: "Space Grotesk", "Inter", sans-serif !important;
}

h1 {
  color: var(--text-bright) !important;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
}

.lede, .lead, .sub, .hint, .tagline,
p, li { color: var(--muted) !important; }
strong { color: var(--text) !important; }

a { color: var(--brand) !important; text-decoration: none; }
a:hover { color: #8b8df5 !important; }

code {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
  border-radius: 5px !important;
}

/* ---- Sections + hairline-underlined headings ---- */
section { margin-bottom: 2.5rem !important; scroll-margin-top: 96px !important; }

section h2,
.prose h2,
.content h2,
.wrap > h2 {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--text-bright) !important;
  padding-bottom: 0.5rem !important;
  margin: 0 0 0.9rem !important;
  border-bottom: 1px solid var(--border) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
.wrap > h2 { margin: 1.75rem 0 0.9rem !important; }

section h3,
.prose h3,
.panel h3 {
  color: var(--text) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
}

/* ============================================================
   Cards — hairline-bordered blocks with a gentle hover lift
   (mirrors the home page's feature cards).
   ============================================================ */
.site-card,
.panel,
.toc,
.card,
.feature-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.45s ease, box-shadow 0.45s ease !important;
}

.site-card,
.panel,
.feature-card { padding: 1.6rem 1.5rem !important; }

.toc { padding: 1.25rem 1.4rem !important; margin-bottom: 2.25rem !important; }

.site-card:hover,
.panel:hover,
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

.feature-card h3, .site-card h3 { color: var(--text-bright) !important; }

/* Keep the uneven-card grid intact (do NOT flatten it) */
.uneven-cards, .features { position: relative; z-index: 1; }

/* ---- Table of contents ---- */
.toc h2 {
  border: none !important; padding: 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 0.7rem !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: var(--muted) !important;
  margin-bottom: 0.7rem !important;
}
.toc a { color: var(--muted) !important; }
.toc a:hover { color: var(--brand) !important; }

/* ---- Notes / callouts: soft left-accent, not a heavy box ---- */
.callout {
  margin: 1rem 0 !important;
  padding: 0.7rem 0 0.7rem 1rem !important;
  border: none !important;
  border-left: 3px solid var(--brand) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--brand-dim), transparent 70%) !important;
  color: var(--muted) !important;
}
.callout strong { color: var(--text) !important; }

.warn {
  margin: 1rem 0 1.25rem !important;
  padding: 0.7rem 0 0.7rem 1rem !important;
  border: none !important;
  border-left: 3px solid var(--rant) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.12), transparent 70%) !important;
  color: #f6c9d2 !important;
}
.warn strong { color: #ffe0e6 !important; }

/* ---- Deletion "scope" choice rows ---- */
.scope {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  transition: border-color 0.3s ease, background 0.3s ease !important;
}
.scope:hover { border-color: var(--border-hover) !important; background: var(--bg-elevated) !important; }
.scope strong { color: var(--text) !important; }
.card h4 { color: var(--text-bright) !important; }

/* ============================================================
   Navigation — clean blurred bars (site-header / top-nav)
   ============================================================ */
.site-header {
  background: rgba(7, 7, 10, 0.82) !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
}
.wordmark { color: var(--text-bright) !important; }
.wordmark span { color: var(--brand) !important; }

.top-nav {
  padding: 0.85rem 1.1rem !important;
  margin-bottom: 1.9rem !important;
  background: rgba(7, 7, 10, 0.82) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(22px) !important;
}
.top-nav .brand { color: var(--text-bright) !important; }
.top-nav .brand img { border-radius: 7px !important; }
.nav-links a { color: var(--muted) !important; }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--text-bright) !important; }

/* ---- Header dropdown menu ---- */
.dropdown-menu {
  background: rgba(10, 10, 14, 0.96) !important;
  border: 1px solid var(--border-hover) !important;
}
.dropdown-menu a:hover { background: var(--brand-dim) !important; color: var(--text-bright) !important; }
.dropdown-menu a.highlight {
  background: var(--brand) !important;
  color: #fff !important;
}
.dropdown-trigger {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.dropdown-trigger:hover { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: none !important; }

/* ============================================================
   Buttons — pill shaped, monochrome with a soft brand hover
   ============================================================ */
button, .btn, .btn-header, .btn-outline, .btn-line, .cta-button,
.btn-header-primary, .btn-header-ghost, .btn-primary, .btn-ghost {
  box-shadow: none !important;
  border-radius: 999px !important;
  font-family: "Inter", sans-serif !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease, border-color 0.3s ease, filter 0.2s ease !important;
}

/* Primary / brand CTAs — subtle indigo.
   NOTE: intentionally NOT applied to bare `.btn` so the delete-account
   danger button keeps its rose identity (it uses a literal red gradient). */
.btn-header-primary, .btn-primary, .cta-button {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}
.btn-header-primary:hover, .btn-primary:hover, .cta-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Ghost / secondary */
.btn-header-ghost, .btn-ghost, .btn-outline, .btn-line {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-header-ghost:hover, .btn-ghost:hover, .btn-outline:hover, .btn-line:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-bright) !important;
}

/* Danger button (delete-account) keeps its rose identity */
.btn.btn-ghost[href*="login"] { background: rgba(255,255,255,0.03) !important; color: var(--text) !important; }

/* ---- Forms ---- */
input, select, textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-family: "Inter", sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(99, 102, 241, 0.55) !important;
}
label, label.field { color: var(--text) !important; }
.status { color: var(--brand) !important; }

/* ---- Tables — flat with hairline rows ---- */
table {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
th, td { border-bottom: 1px solid var(--border) !important; }
th { background: none !important; color: var(--text-bright) !important; font-family: "Space Grotesk", sans-serif !important; }

/* ---- Badges (manual hero) ---- */
.badge {
  background: var(--brand-dim) !important;
  border: 1px solid var(--border-hover) !important;
  color: var(--brand) !important;
}

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
footer a { color: var(--brand) !important; }
footer a:hover { color: #8b8df5 !important; }

/* ============================================================
   Extended coverage — app shell, blog, and discover surfaces.
   Most of these pages colour themselves through CSS variables,
   so the :root overrides above recolour them automatically.
   Here we pin the remaining app-only variables + a few
   hard-coded greens so every interlinked page matches.
   ============================================================ */
:root {
  --surface-2: #141418 !important;
  --danger: #f43f5e !important;
  --ogilvy: #6366f1 !important;
  --accent-glow: rgba(99, 102, 241, 0.2) !important;
  --accent-men: #6366f1 !important;
  --accent-women: #8b8df5 !important;
}

/* Headings on app / discover / blog use Space Grotesk too */
.title, .brand, .display-title, .horizon-brand, .horizon-axis,
.discover-tab, .pane-title, .blog-top h1, .blog-article h1,
.profile-name {
  font-family: "Space Grotesk", sans-serif !important;
}

/* App-shell + discover top bars -> hairline bar echoing the site nav */
.topbar, .horizon-bar {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 0.85rem !important;
  margin-bottom: 1.1rem !important;
}
.brand { color: var(--text-bright) !important; }
.brand small { color: var(--muted) !important; }
.horizon-brand { color: var(--muted) !important; }
.horizon-axis--active { color: var(--brand) !important; }
.horizon-btn { border-color: var(--border) !important; color: var(--text) !important; }

/* Nav pills */
.nav-pills .pill { color: var(--muted) !important; border-color: var(--border) !important; background: rgba(255, 255, 255, 0.03) !important; }
.nav-pills .pill.active { background: var(--brand) !important; color: #fff !important; border-color: transparent !important; }

/* Mode / mood chips */
.mode-chip.active, .mood-chip.active {
  background: var(--brand) !important; color: #fff !important;
  border-color: transparent !important; box-shadow: none !important; transform: none !important;
}
.mode-chip[data-mode="women"].active { background: #8b8df5 !important; }
body.yb-discover .mode-chip.active {
  background: transparent !important; color: var(--brand) !important; border-color: var(--brand) !important;
}

/* Reaction / tag surfaces */
.tag-btn:hover { border-color: var(--brand) !important; }
.emoji-btn.active { background: var(--brand-dim) !important; border-color: var(--brand) !important; }
.emoji-btn.active .c { color: var(--brand) !important; }
.discover-tab.active { border-bottom-color: var(--brand) !important; color: var(--text-bright) !important; }
.layer-heading { color: var(--brand) !important; }

/* Buttons that render solid via var(--accent) or hard greens */
.app-shell .btn, body.yb-discover .btn, #apk-link {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.app-shell .btn-outline, body.yb-discover .btn-outline {
  background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--border) !important; color: var(--text) !important;
}

/* Status text */
.notice { color: var(--muted) !important; }
.ok { color: var(--brand) !important; }
.error { color: var(--danger) !important; }

/* ---- Blog ---- */
.blog-nav a { color: var(--muted) !important; text-decoration: none !important; }
.blog-nav a:hover { color: var(--brand) !important; }
.blog-card {
  background: var(--bg-card) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s ease !important;
}
.blog-card:hover { border-color: var(--border-hover) !important; transform: translateY(-4px) !important; }
.blog-card h2 { color: var(--text-bright) !important; font-family: "Space Grotesk", sans-serif !important; }
.blog-body a, .blog-footer a { color: var(--brand) !important; }
.blog-body blockquote { border-left-color: var(--brand) !important; }
.blog-empty, .blog-loading { border-color: var(--border) !important; color: var(--muted) !important; }
.blog-error { border-color: rgba(244, 63, 94, 0.4) !important; color: #f6c9d2 !important; }