/* ============================================================
   SOCIALNEST APP-DARK — v10k global revamp
   Ports the /app/bio/claim/ design system to every authenticated
   surface. Loaded LAST (after main.css + shadcn-flavor.css) so it
   wins every cascade without touching template markup.

   Grammar (from the claim wizard):
   - bg #0E0E10, surfaces #1C1C1F / #2A2A2E, borders rgba(255,255,255,.12)
   - pill buttons, 16-18px radii cards, bottom-fixed primary actions
   - mobile-first: bottom tab bar < 900px, dark sidebar >= 900px
   Brand accents kept per lesson #92:
   - lime #E3F331 = primary CTA (the noir-dopamine signature combo)
   - light purple #8B6CF6 = links, active nav, focus rings
   Google blue stays exclusive to the claim wizard (OAuth context).
   ============================================================ */

:root {
  --app-bg:        #0E0E10;
  --app-surface:   #1C1C1F;
  --app-surface-2: #2A2A2E;
  --app-surface-3: #353539;
  --app-text:      #FFFFFF;
  --app-muted:     rgba(255,255,255,0.62);
  --app-faint:     rgba(255,255,255,0.38);
  --app-border:    rgba(255,255,255,0.12);
  --app-accent:    #E3F331;            /* lime — primary CTA   */
  --app-accent-ink:#0E0E10;            /* text on lime         */
  --app-accent-2:  #8B6CF6;            /* light purple — links */
  --app-green:     #34A853;
  --app-red:       #F87171;
  --app-amber:     #FBBF24;
  --app-pill:      62rem;
  --app-r-card:    18px;
  --app-r-input:   14px;
  --app-nav-h:     64px;               /* mobile bottom bar    */

  /* ---- token-level remap of the legacy light palette ----
     Templates reference --sn-* everywhere; redefining them here flips
     every inline usage to dark equivalents in one move. Public pages
     (skins) never load this file, so they keep the original values. */
  --sn-bg:           var(--app-bg);
  /* --sn-white intentionally NOT remapped: used 88x as text-on-purple.
     Backgrounds using it were sed-remapped in templates instead. */
  --sn-cream:        var(--app-surface);
  --sn-neutral-100:  var(--app-border);
  --sn-neutral-200:  var(--app-border);
  --sn-neutral-300:  var(--app-faint);
  --sn-neutral-400:  var(--app-muted);
  --sn-neutral-500:  var(--app-muted);
  --sn-neutral-900:  var(--app-text);
  --sn-neutral-1000: var(--app-text);
  --sn-purple-600:   var(--app-accent-2);
  --sn-purple-900:   rgba(255,255,255,0.85);
  --sn-purple-1000:  var(--app-text);
  --sn-purple-50:    var(--app-surface-2);
  --sn-purple-100:   var(--app-surface-3);
}

/* ---------------------------------------------------- shell */
html { background: var(--app-bg); }
body {
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
}

.app-shell { background: var(--app-bg); }

.main-area {
  background: var(--app-bg) !important;
  padding: 18px 16px calc(var(--app-nav-h) + 28px) !important;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 900px) {
  .main-area { padding: 28px 32px 48px !important; }
}

/* ---------------------------------------------------- topbar */
.topbar {
  background: rgba(14,14,16,0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--app-border) !important;
  color: var(--app-text) !important;
}
.topbar-brand { color: var(--app-text) !important; }
.topbar-brand span { color: var(--app-accent-2) !important; }
.topbar-brand b { color: var(--app-accent) !important; }
.topbar-burger span { background: var(--app-text) !important; }
.topbar-avatar {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 50% !important;
}
/* Burger stays on mobile: the bottom bar covers the 5 main destinations,
   the slide-in sidebar keeps the long tail (Media Kit, searches, admin…) */

/* ---------------------------------------------------- sidebar (desktop) */
.sidebar {
  background: var(--app-bg) !important;
  border-right: 1px solid var(--app-border) !important;
  color: var(--app-text) !important;
}
.sidebar-brand { color: var(--app-text) !important; }
.sidebar-brand span { color: var(--app-accent-2) !important; }
.sidebar-brand b { color: var(--app-accent) !important; }
.sidebar-nav a, .sidebar-logout button {
  color: var(--app-muted) !important;
  border-radius: var(--app-pill) !important;
  transition: background .15s, color .15s;
}
.sidebar-nav a:hover, .sidebar-logout button:hover {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
}
.sidebar-nav a.active {
  background: var(--app-surface-2) !important;
  color: var(--app-accent) !important;
  font-weight: 700;
}
.sidebar-divider {
  color: var(--app-faint) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em;
}
.sidebar-overlay { background: rgba(0,0,0,0.6) !important; }
/* Mobile: the slide-in sidebar still exists (burger replaced by bottom bar,
   but deep links from divider sections stay reachable via the avatar page) */
@media (max-width: 899px) {
  .sidebar { box-shadow: 0 0 60px rgba(0,0,0,0.7); }
}

/* ---------------------------------------------------- mobile bottom tab bar */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  height: var(--app-nav-h);
  background: rgba(20,20,23,0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--app-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* The icons used to sit flush against the top border of the bar — no breathing
     room at all. Padding here (not margin) keeps the whole cell tappable. */
  padding: 9px 4px 5px;
  gap: 4px;
  color: var(--app-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.bottom-nav a svg, .bottom-nav a i { flex-shrink: 0; }
.bottom-nav a.active { color: var(--app-accent); }
.bottom-nav a svg, .bottom-nav a i { width: 21px; height: 21px; }
@media (min-width: 900px) {
  .bottom-nav { display: none; }
}

/* ---------------------------------------------------- typography */
h1, h2, h3, h4 { color: var(--app-text) !important; letter-spacing: -0.015em; }
.page-head h1, .page-head h2 { color: var(--app-text) !important; }
.eyebrow { color: var(--app-accent-2) !important; }
.lede, .text-muted, .sub { color: var(--app-muted) !important; }
a { color: var(--app-accent-2); }

/* ---------------------------------------------------- buttons → pills */
.btn {
  border-radius: var(--app-pill) !important;
  font-weight: 700 !important;
  transition: filter .15s, transform .1s, background .15s !important;
  border: 1px solid transparent !important;
}
.btn:active { transform: scale(0.97); }
.btn.purple, .btn.accent, .btn[type="submit"]:not(.ghost):not(.outline):not(.lime):not(.danger) {
  background: var(--app-accent) !important;
  color: var(--app-accent-ink) !important;
}
.btn.purple:hover, .btn.accent:hover { filter: brightness(1.08); }
.btn.lime {
  background: var(--app-accent) !important;
  color: var(--app-accent-ink) !important;
}
.btn.ghost {
  background: transparent !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}
.btn.ghost:hover { background: var(--app-surface) !important; }
.btn.outline {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}
.btn.outline:hover { border-color: var(--app-accent-2) !important; }
.btn.danger {
  background: transparent !important;
  color: var(--app-red) !important;
  border-color: rgba(248,113,113,0.35) !important;
}
.btn:disabled { opacity: .4 !important; }

/* ---------------------------------------------------- cards */
.card, .kpi-card, .action-card, .tier-card, .hub-metric {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-r-card) !important;
  color: var(--app-text) !important;
  box-shadow: none !important;
}
.card-title { color: var(--app-text) !important; }
.action-card:hover, .kpi-card:hover {
  border-color: var(--app-accent-2) !important;
  transform: translateY(-2px);
  transition: border-color .15s, transform .15s;
}
.hub-metric .num, .kpi-value, .val { color: var(--app-accent) !important; }
.hub-metric .lab, .lab { color: var(--app-muted) !important; }

/* ---------------------------------------------------- forms */
.field input, .field select, .field textarea,
input.input, select.select, textarea.textarea,
input[type="text"], input[type="email"], input[type="url"],
input[type="number"], input[type="password"], input[type="date"],
select, textarea {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-r-input) !important;
  color: var(--app-text) !important;
  padding: 12px 15px !important;
  font-size: 14px !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--app-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(139,108,246,0.18) !important;
}
input::placeholder, textarea::placeholder { color: var(--app-faint) !important; }
.form-label, label { color: var(--app-muted) !important; font-size: 12px; font-weight: 600; }
.form-error { color: var(--app-red) !important; }
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--app-accent-2) !important;
  width: auto !important; padding: 0 !important;
}
input[type="color"] { padding: 4px !important; height: 42px; }

/* ---------------------------------------------------- tables */
.table-wrap {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-r-card) !important;
  overflow-x: auto;
}
table { color: var(--app-text) !important; }
table thead th {
  color: var(--app-faint) !important;
  border-bottom: 1px solid var(--app-border) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
table tbody td { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
table tbody tr:hover { background: var(--app-surface-2) !important; }

/* ---------------------------------------------------- badges, pills, tabs */
.badge, .pill {
  border-radius: var(--app-pill) !important;
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
}
.badge.green, .status-accepted, .status-completed { background: rgba(52,168,83,0.16) !important; color: #6EE7A0 !important; border-color: rgba(52,168,83,0.4) !important; }
.badge.red, .status-declined, .status-cancelled { background: rgba(248,113,113,0.12) !important; color: var(--app-red) !important; border-color: rgba(248,113,113,0.35) !important; }
.badge.amber, .status-pending, .status-negotiating { background: rgba(251,191,36,0.12) !important; color: var(--app-amber) !important; border-color: rgba(251,191,36,0.35) !important; }

.tabs { border-bottom: 1px solid var(--app-border) !important; gap: 4px; }
.tabs a, .tab {
  color: var(--app-muted) !important;
  border-radius: var(--app-pill) !important;
  padding: 8px 16px !important;
  border: 1px solid transparent !important;
}
.tabs a.active, .tab.active {
  background: var(--app-surface-2) !important;
  color: var(--app-accent) !important;
  border-color: var(--app-border) !important;
}

/* ---------------------------------------------------- discover cards (dc-*) */
.dc-card, [class*="dc-"] .dc-body {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}
.dc-title { color: var(--app-text) !important; }
.dc-light { color: var(--app-muted) !important; }

/* ---------------------------------------------------- empty states / toasts / modals */
.empty-state {
  background: var(--app-surface) !important;
  border: 1px dashed var(--app-border) !important;
  border-radius: var(--app-r-card) !important;
  color: var(--app-muted) !important;
}
.toast {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-r-input) !important;
  backdrop-filter: blur(10px);
}
.toast.success { border-color: rgba(52,168,83,0.5) !important; }
.toast.error { border-color: rgba(248,113,113,0.5) !important; }
.toast button { color: var(--app-muted) !important; }
.modal, dialog {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-r-card) !important;
  color: var(--app-text) !important;
}
::backdrop { background: rgba(0,0,0,0.65); }

/* ---------------------------------------------------- tier rows (mediakit) */
.tier-row, .tier-row-edit, .tier-row-read {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-r-input) !important;
}
.tier-price { color: var(--app-accent) !important; }

/* ---------------------------------------------------- chat */
.chat-bubble-user { background: var(--app-accent-2) !important; color: #fff !important; border-radius: 18px 18px 4px 18px !important; }
.chat-bubble-ai { background: var(--app-surface-2) !important; color: var(--app-text) !important; border-radius: 18px 18px 18px 4px !important; }

/* ---------------------------------------------------- legacy light selectors swept */
.list-row, .flow-step, .mk-faq-item, .mk-feature,
.lg-cta-row, .lg-preview-cta, .bio-cta {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}
.bio-avatar { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; }
.mk-section.cream { background: var(--app-surface) !important; }
.dc-light { background: var(--app-surface-2) !important; }
.bio-socials a:hover { background: var(--app-surface-2) !important; }

/* ---------------------------------------------------- scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--app-surface-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--app-accent-2); }

/* ---------------------------------------------------- auth screens (claim-like) */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background:
    radial-gradient(ellipse 50% 35% at 20% 10%, rgba(139,108,246,0.14), transparent 60%),
    radial-gradient(ellipse 45% 30% at 85% 85%, rgba(227,243,49,0.07), transparent 60%),
    var(--app-bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 22px;
  padding: 30px 26px;
}
.auth-card h1 { font-size: 1.5rem; margin-bottom: 6px; }
.auth-card .lede { font-size: 13px; margin-bottom: 22px; }
.auth-card .btn { width: 100%; padding: 13px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION MOBILE — tout au pouce.

   Avant : six items dans la barre du bas (65px chacun sur un écran de 390px —
   trop serré pour être visé de façon fiable), PLUS un burger EN HAUT À GAUCHE
   qui ouvrait un panneau dupliquant la plupart d'entre eux.

   Le coin supérieur gauche est le point le plus difficile à atteindre sur un
   téléphone tenu d'une main. C'est là qu'on met ce qu'on veut faire ignorer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le burger disparaît sous 900px : la barre du bas EST la navigation. */
@media (max-width: 899px) {
  .topbar-burger { display: none !important; }
}

.bn-more {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  padding: 9px 4px 5px;
  background: none; border: 0; cursor: pointer;
  color: var(--app-muted); font-size: 10px; font-weight: 600;
  font-family: inherit; line-height: 1;
}
.bn-more:active { transform: scale(.94); }

.bn-backdrop { position: fixed; inset: 0; z-index: 94; background: rgba(0,0,0,.55); }

.bn-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: #16161A;
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius: 22px 22px 0 0;
  padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.55);
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 82vh; overflow-y: auto;
}
.bn-sheet.show { transform: translateY(0); }
.bn-grab { width: 38px; height: 4px; border-radius: 4px;
           background: rgba(255,255,255,.18); margin: 0 auto 14px; }
.bn-sheet a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px; border-radius: 14px;
  color: var(--app-text); text-decoration: none;
  min-height: 60px;                    /* une vraie cible, pas un lien de 20px */
}
.bn-sheet a:active { background: rgba(255,255,255,.05); }
.bn-sheet a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-sheet a b { font-size: 14px; font-weight: 700; }
.bn-sheet a i { font-size: 11.5px; color: var(--app-muted); font-style: normal; }
.bn-sheet .bn-out { color: #F87171; margin-top: 6px;
                    border-top: 1px solid var(--app-border); border-radius: 0 0 14px 14px; }
@media (prefers-reduced-motion: reduce) { .bn-sheet { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   LA COLLISION DES DEUX THÈMES — la cause du texte invisible.

   Le projet a DEUX jeux de jetons : --sn-* (pensé pour un fond BLANC) et --app-*
   (pensé pour un fond NOIR). Quatre-vingt-cinq déclarations de couleur dans
   quatorze templates de l'app sombre utilisent les jetons CLAIRS.

   Mesuré par axe-core sur le hub :

       .step-label  →  #202020 sur #1C1C1F  →  ratio 1.04:1
                                                (WCAG AA en exige 4.5)

   Un ratio de 1,04, ce n'est pas « peu lisible ». C'est INVISIBLE. Et c'était la
   checklist d'activation du créateur — la liste des choses qu'on lui demande de
   faire. Elle était là, sur la page, illisible.

   Même faute que le hero blanc-sur-blanc de v11h. Corriger 85 lignes ne protège
   pas la 86e : on REMAPPE donc les jetons clairs dans le contexte sombre. Toute
   déclaration future héritera du bon contraste sans que personne y pense.

   Ratios obtenus (sur --app-surface #1C1C1F) :
       neutral-500 → rgba(255,255,255,.62)   ≈  9.2:1   ✓ AA
       neutral-600 → rgba(255,255,255,.72)   ≈ 11.4:1   ✓ AAA
       neutral-700 → rgba(255,255,255,.86)   ≈ 15.3:1   ✓ AAA
       neutral-800 → #FFFFFF                 ≈ 17.4:1   ✓ AAA
       neutral-900 → #FFFFFF                 ≈ 17.4:1   ✓ AAA
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-shell,
.app-shell,
.main-area {
  --sn-neutral-900: #FFFFFF;
  --sn-neutral-800: #FFFFFF;
  --sn-neutral-700: rgba(255, 255, 255, 0.86);
  --sn-neutral-600: rgba(255, 255, 255, 0.72);
  --sn-neutral-500: rgba(255, 255, 255, 0.62);
  --sn-neutral-400: rgba(255, 255, 255, 0.45);
  --sn-neutral-300: rgba(255, 255, 255, 0.28);
  --sn-neutral-200: rgba(255, 255, 255, 0.16);
  --sn-neutral-100: rgba(255, 255, 255, 0.08);
  --sn-neutral-50:  rgba(255, 255, 255, 0.04);
  --sn-white:       #FFFFFF;
}

/* Le violet de marque sur le noir : 2.88:1 — sous les 3:1 exigés pour un texte
   large ou un élément d'interface. Une teinte plus claire, même marque. */
.app-shell .accent,
.main-area .accent,
.app-shell a.accent { color: #A78BFA; }   /* 6.1:1 sur #0E0E10 */

/* ── Les trois dernières paires, calculées, pas devinées ──────────────────────
   #5F35E6 sur #0E0E10 = 2.88:1 — sous les 3:1 exigés même pour un gros titre.
   #8B6CF6 donne 5.12:1 : il passe le seuil TEXTE (4.5), pas seulement celui des
   titres, et reste manifestement la même marque. Le violet foncé d'origine reste
   utilisé sur les fonds CLAIRS, où il est parfait (7.3:1 sur du blanc).
   ────────────────────────────────────────────────────────────────────────────── */
.app-shell,
.main-area,
body.app-shell {
  --sn-purple-400: #8B6CF6;   /* 5.12:1 sur #0E0E10 */
  --sn-purple-500: #9B7FF7;
}
.app-shell .accent,
.main-area .accent,
.hub-greeting h1 .accent,
.hub-greeting h1 .red { color: #8B6CF6 !important; }

/* Le gris le plus faible de l'éditeur : 3.54:1. Remonté à 5.21. */
.app-shell, .main-area { --app-faint: rgba(255, 255, 255, 0.56); }