/* ============================================================
   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;
  gap: 3px;
  color: var(--app-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
}
.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; }