/* ═══════════════════════════════════════════════════════════════
   NEK v6 — Dark Purple Theme
   Include AFTER all inline <style> blocks so cascade wins.
   Matches NEK Creator app visual language.
   Designed: web-designer agent | Implemented: web-developer agent
═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Core surfaces */
  --bg:           #0D0B1A;
  --card:         #141228;
  --softer:       #1A1830;
  --dark:         #090816;
  --dark-soft:    #0F0D22;

  /* Text */
  --text:         #EFECFF;
  --text-soft:    #9B9BC0;
  --text-muted:   #5F5F85;

  /* Borders */
  --line:         #2A2748;
  --line-soft:    #1F1D3A;
  --line-strong:  #3D3966;

  /* Accent — yellow var kept for backward compat, now purple */
  --yellow:       #7B6FFF;
  --yellow-deep:  #6358E8;

  /* Semantic */
  --success:      #2ECC7A;
  --success-bg:   rgba(46, 204, 122, 0.10);
  --error:        #FF5F7E;
  --danger:       #FF5F7E;
  --danger-bg:    rgba(255, 95, 126, 0.10);
  --warning:      #F0A830;
  --warning-bg:   rgba(240, 168, 48, 0.10);
  --info:         #6B9FF8;
  --info-bg:      rgba(107, 159, 248, 0.10);

  /* Glow / ambient */
  --glow-accent:  rgba(123, 111, 255, 0.18);
  --glow-surface: rgba(123, 111, 255, 0.07);
  --mist:         #201E3C;
}

/* ── 2. BASE ──────────────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

::selection {
  background: var(--yellow);
  color: var(--dark);
}

/* ── 3. NAVIGATION (marketing pages) ─────────────────────────── */
/* Override hardcoded rgba(239,235,227,...) nav backgrounds */
.nav {
  background: rgba(13, 11, 26, 0.82) !important;
  border-bottom-color: transparent !important;
}
.nav.scrolled {
  background: rgba(13, 11, 26, 0.96) !important;
  border-bottom-color: var(--line) !important;
}

/* Nav links & brand */
.nav__brand { color: var(--text) !important; }
.nav__brand .brand-mark { color: var(--yellow) !important; }
.nav__menu a,
.nav__link,
.nav__menu-link { color: var(--text-soft) !important; }
.nav__menu a:hover,
.nav__link:hover,
.nav__menu-link:hover {
  color: var(--text) !important;
  background: var(--softer) !important;
}

/* Login ghost link */
.nav__login,
[data-auth-link] { color: var(--text-soft) !important; }
.nav__login:hover { color: var(--text) !important; }

/* Get started / CTA button in nav */
.nav__cta,
.nav__signup {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border-color: var(--yellow) !important;
}
.nav__cta:hover,
.nav__signup:hover {
  background: var(--yellow-deep) !important;
  border-color: var(--yellow-deep) !important;
  box-shadow: 0 8px 24px var(--glow-accent) !important;
}

/* Mobile nav toggle */
.nav__toggle span { background: var(--text) !important; }

/* Mobile menu overlay */
.nav__mobile {
  background: rgba(13, 11, 26, 0.98) !important;
  border-bottom-color: var(--line) !important;
}

/* ── 4. USER PILL (logged-in nav) ──────────────────────────────── */
.nav__user-pill {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.nav__user-pill:hover { border-color: var(--line-strong) !important; }
.nav__user-pill.open { background: var(--softer) !important; border-color: var(--line-strong) !important; }
.nav__user-avatar { background: var(--yellow) !important; color: var(--dark) !important; }
.nav__user-dropdown {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.nav__user-dd-item { color: var(--text) !important; }
.nav__user-dd-item:hover { background: var(--softer) !important; }
.nav__user-dd-sep { background: var(--line) !important; }
.nav__user-dd-item--danger { color: var(--text-soft) !important; }

/* ── 5. APP SIDEBAR (dashboard / projects / settings) ─────────── */
/* Fix: sidebar was using color:var(--bg) for light text — now --bg is dark */
.sidebar {
  background: var(--dark) !important;
  color: var(--text) !important;
}
.sidebar__brand {
  color: var(--text) !important;
  border-bottom-color: rgba(239, 236, 255, 0.10) !important;
}
.sidebar__brand svg { color: var(--yellow) !important; }
.sidebar__brand-text { color: var(--text) !important; }

.sidebar__link,
.sidebar__nav a {
  color: var(--text-soft) !important;
}
.sidebar__link:hover,
.sidebar__nav a:hover {
  background: rgba(123, 111, 255, 0.08) !important;
  color: var(--text) !important;
}
.sidebar__link.active,
.sidebar__nav a.active {
  background: rgba(123, 111, 255, 0.15) !important;
  color: var(--yellow) !important;
}

.sidebar__link svg,
.sidebar__nav a svg { color: inherit !important; }

.sidebar__section-label { color: var(--text-muted) !important; }

/* Sidebar bottom: user info & plan card */
.sidebar__user-name,
.sidebar__user-role { color: var(--text-soft) !important; }

.sidebar__plan {
  background: rgba(123, 111, 255, 0.08) !important;
  border-color: rgba(123, 111, 255, 0.18) !important;
}
.sidebar__plan-name { color: var(--text) !important; }
.sidebar__plan-badge {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}
.sidebar__plan-storage { background: rgba(255, 255, 255, 0.08) !important; }
.sidebar__plan-storage-fill { background: var(--yellow) !important; }
.sidebar__plan-storage-text { color: var(--text-muted) !important; }

.sidebar__upgrade {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border-color: var(--yellow) !important;
}
.sidebar__upgrade:hover {
  background: var(--yellow-deep) !important;
  border-color: var(--yellow-deep) !important;
  box-shadow: 0 6px 20px var(--glow-accent) !important;
}

/* Language switcher in sidebar */
.left__lang span,
.sidebar__lang span {
  color: var(--text-muted) !important;
  border-color: var(--line) !important;
}
.left__lang span.active,
.sidebar__lang span.active {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border-color: var(--yellow) !important;
}

/* ── 6. BUTTONS ───────────────────────────────────────────────── */
.btn--primary,
.btn--yellow {
  background: var(--yellow) !important;
  color: #EFECFF !important;
  border-color: var(--yellow) !important;
}
.btn--primary:hover,
.btn--yellow:hover {
  background: var(--yellow-deep) !important;
  border-color: var(--yellow-deep) !important;
  box-shadow: 0 10px 30px var(--glow-accent) !important;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent !important;
  color: var(--text-soft) !important;
  border-color: var(--line) !important;
}
.btn--ghost:hover {
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
  background: var(--softer) !important;
}

.btn--dark {
  background: var(--softer) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.btn--dark:hover {
  background: var(--card) !important;
  border-color: var(--line-strong) !important;
}

/* ── 7. CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--card) !important;
  border-color: var(--line-soft) !important;
}
.card:hover { border-color: var(--line) !important; }
.card__title { color: var(--text) !important; }
.card__sub { color: var(--text-soft) !important; }

/* Why-section accent card (was yellow) → now purple */
.why-card--accent {
  background: var(--yellow) !important;
  color: #EFECFF !important;
}
.why-card--accent .why-card__label { color: rgba(239, 236, 255, 0.65) !important; }
.why-card--accent .why-card__title { color: #EFECFF !important; }
.why-card--accent .why-card__copy { color: rgba(239, 236, 255, 0.78) !important; }
.why-card--accent .why-card__big { color: #EFECFF !important; }
.why-card--accent .why-card__label::before { background: rgba(239, 236, 255, 0.5) !important; }
.why-card--accent .why-card__cta { color: #EFECFF !important; border-color: rgba(239, 236, 255, 0.4) !important; }

/* Dark feature card */
.why-card--feature {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
.why-card--plain {
  background: var(--card) !important;
  border-color: var(--line) !important;
}

/* ── 8. FORMS / INPUTS ────────────────────────────────────────── */
.input, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=url],
textarea, select {
  background: var(--softer) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
.input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--yellow) !important;
  box-shadow: 0 0 0 3px rgba(123, 111, 255, 0.18) !important;
  outline: none !important;
}

.field__label { color: var(--text-soft) !important; }
.field__hint { color: var(--text-muted) !important; }

/* Toggle switch accent */
input[type=checkbox] { accent-color: var(--yellow); }
.switch__slider { background: var(--line-strong) !important; }
input:checked ~ .switch__slider { background: var(--yellow) !important; }

/* ── 9. SECTIONS / PAGE BACKGROUNDS ──────────────────────────── */

/* Main content area in app pages */
.main, .app-main, .content, .page-content {
  background: var(--bg) !important;
}

/* Section backgrounds that were hardcoded warm colors */
section,
.section {
  background: transparent;
}

/* Dark sections (keep same var, but --dark is now #090816) */
.section--dark,
[style*="background: var(--dark)"],
[style*="background:var(--dark)"] {
  background: var(--dark) !important;
  color: var(--text) !important;
}

/* ── 10. BADGES ────────────────────────────────────────────────── */
.badge {
  background: var(--softer) !important;
  color: var(--text-soft) !important;
  border-color: var(--line) !important;
}
.badge--success {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  border-color: rgba(46, 204, 122, 0.25) !important;
}
.badge--danger,
.badge--error {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
  border-color: rgba(255, 95, 126, 0.22) !important;
}
.badge--warning {
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
  border-color: rgba(240, 168, 48, 0.22) !important;
}
.badge--yellow,
.badge--accent {
  background: rgba(123, 111, 255, 0.15) !important;
  color: var(--yellow) !important;
  border-color: rgba(123, 111, 255, 0.28) !important;
}
.badge--dark,
.badge--neutral {
  background: var(--softer) !important;
  color: var(--text-soft) !important;
  border-color: var(--line) !important;
}

/* ── 11. FOOTER ────────────────────────────────────────────────── */
footer, .footer, .site-footer {
  background: var(--dark) !important;
  border-top-color: var(--line) !important;
  color: var(--text-soft) !important;
}
.footer__brand { color: var(--text) !important; }
.footer__nav a,
footer a { color: var(--text-muted) !important; }
.footer__nav a:hover,
footer a:hover { color: var(--text) !important; }
.footer__copy,
.footer__legal { color: var(--text-muted) !important; }

/* ── 12. PRICING PAGE ─────────────────────────────────────────── */
.pricing-card {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
.pricing-card--featured {
  background: var(--yellow) !important;
  border-color: var(--yellow) !important;
}
.pricing-card--featured .pricing-card__name,
.pricing-card--featured .pricing-card__price,
.pricing-card--featured .pricing-card__sub,
.pricing-card--featured .pricing-card__feature,
.pricing-card--featured .pricing-card__period { color: #EFECFF !important; }

/* Pricing toggle (monthly/annual) */
.billing-toggle { background: var(--card) !important; border-color: var(--line) !important; }
.billing-toggle__btn { color: var(--text-muted) !important; }
.billing-toggle__btn.active { background: var(--softer) !important; color: var(--text) !important; }
.billing-toggle__save { background: rgba(123, 111, 255, 0.15) !important; color: var(--yellow) !important; }

/* ── 13. AUTH PAGES (login, signup, etc.) ────────────────────── */
.auth-card,
.auth-box,
.auth-panel {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
}
.auth-title { color: var(--text) !important; }
.auth-sub { color: var(--text-soft) !important; }
.auth-divider { color: var(--text-muted) !important; }
.auth-divider::before, .auth-divider::after { background: var(--line) !important; }

/* Google btn */
.btn--google {
  background: var(--softer) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.btn--google:hover {
  background: var(--card) !important;
  border-color: var(--line-strong) !important;
}

/* ── 14. PROGRESS BARS ─────────────────────────────────────────── */
.progress-bar,
.progress-track { background: var(--softer) !important; }
.progress-bar__fill,
.progress-fill { background: var(--yellow) !important; }

/* ── 15. TABLE (admin pages already have their own dark theme) ── */
.table-wrap { background: var(--card) !important; border-color: var(--line-soft) !important; }
.table thead th { background: var(--softer) !important; color: var(--text-muted) !important; border-color: var(--line) !important; }
.table tbody td { color: var(--text) !important; border-color: var(--line-soft) !important; }
.table tbody tr:hover td { background: rgba(123, 111, 255, 0.04) !important; }

/* ── 16. DIVIDERS ─────────────────────────────────────────────── */
hr { border-color: var(--line) !important; }

/* ── 17. HERO — nav background override (marketing index.html) ── */
/* Nav bg was hardcoded rgba(239,235,227,...) — handled above in section 3 */

/* Hero section nebula gradient */
.hero__bg-gradient {
  background:
    radial-gradient(ellipse 55% 60% at 72% 15%,  rgba(123, 111, 255, 0.13), transparent 65%),
    radial-gradient(ellipse 70% 50% at 15% 80%,  rgba(99,  88, 232, 0.09), transparent 70%),
    radial-gradient(ellipse 42% 48% at 55% 95%,  rgba(79,  62, 180, 0.06), transparent 65%) !important;
}

/* Hero demo frame → dark card with purple glow */
.hero__demo-frame {
  background: var(--card) !important;
  box-shadow:
    0 40px 100px -20px rgba(0, 0, 0, 0.6),
    0 12px 40px -10px rgba(123, 111, 255, 0.15),
    0 0 0 1px var(--line) !important;
}

/* Demo chrome bar */
.hero__demo-chrome {
  background: #0D0B1A !important;
  border-bottom-color: var(--line) !important;
}
.hero__demo-chrome-dot--red   { background: #FF5F7E !important; }
.hero__demo-chrome-dot--amber { background: #F0A830 !important; }
.hero__demo-chrome-dot--green { background: #2ECC7A !important; }

/* Stage areas */
.hero__demo-stage-area { background: var(--softer) !important; }
.stage__hud {
  background: rgba(9, 8, 22, 0.78) !important;
  border-color: rgba(123, 111, 255, 0.22) !important;
}
.stage-indicator {
  background: var(--card) !important;
  border-color: var(--line-soft) !important;
}
.stage-label { color: var(--text-soft) !important; }
.stage-label:hover { background: rgba(123, 111, 255, 0.06) !important; }
.stage-label.active { background: var(--softer) !important; color: var(--text) !important; }
.stage-label__num { color: var(--text-muted) !important; }
.stage-label.active .stage-label__num { color: var(--yellow) !important; }
.stage-dots__dot { background: var(--line-strong) !important; }
.stage-dots__dot.active { background: var(--yellow) !important; }

/* ── 18. PROJECT CARDS ────────────────────────────────────────── */
.project-card,
.proj-card {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
.project-card:hover,
.proj-card:hover {
  border-color: var(--line-strong) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}
.project-card__name,
.proj-card__name { color: var(--text) !important; }
.project-card__meta,
.proj-card__meta { color: var(--text-soft) !important; }

/* Project empty state */
.projects-empty,
.empty-state { color: var(--text-soft) !important; }
.projects-empty svg,
.empty-state svg { color: var(--text-muted) !important; }

/* ── 19. MODULE CARDS (platform section) ─────────────────────── */
.module {
  background: rgba(123, 111, 255, 0.03) !important;
  border-color: rgba(123, 111, 255, 0.12) !important;
}
.module:hover {
  background: rgba(123, 111, 255, 0.06) !important;
  border-color: rgba(123, 111, 255, 0.22) !important;
}
.module--builder {
  background: rgba(123, 111, 255, 0.05) !important;
  border-color: rgba(123, 111, 255, 0.20) !important;
}
.module__icon { background: rgba(123, 111, 255, 0.12) !important; }
.module__icon svg { stroke: var(--yellow) !important; }
.module__ai-badge { background: var(--yellow) !important; color: var(--dark) !important; }
.module__features span {
  background: rgba(239, 236, 255, 0.06) !important;
  color: var(--text-soft) !important;
}

/* ── 20. SECTION IDs / LABELS ─────────────────────────────────── */
.section__id { color: var(--text-muted) !important; }
.section__id::before { background: var(--yellow) !important; }
.section__lede { color: var(--text-soft) !important; }
.section__title em { color: var(--text) !important; }

/* ── 21. LANG SWITCHER (marketing pages) ─────────────────────── */
.lang-switch__trigger {
  color: var(--text-soft) !important;
  border-color: var(--line) !important;
}
.lang-switch__trigger:hover,
.lang-switch.open .lang-switch__trigger {
  background: var(--softer) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.lang-switch__menu {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.lang-switch__option { color: var(--text-soft) !important; }
.lang-switch__option:hover { background: var(--softer) !important; color: var(--text) !important; }
.lang-switch__option.active { background: var(--softer) !important; }
.lang-switch__option.active::after { background: var(--yellow) !important; }
.lang-switch__code { background: var(--softer) !important; color: var(--text-soft) !important; }
.lang-switch__option.active .lang-switch__code { background: var(--yellow) !important; color: var(--dark) !important; }

/* ── 22. BACK TO TOP / SCROLL BUTTON ─────────────────────────── */
.back-top,
.scroll-top {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
.back-top:hover { background: var(--yellow) !important; color: var(--dark) !important; border-color: var(--yellow) !important; }

/* ── 23. NOTIFICATION / BANNER ────────────────────────────────── */
.site-banner,
.announcement-banner {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}

/* ── 24. MODAL / OVERLAY ──────────────────────────────────────── */
.modal, .dialog {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5) !important;
}
.modal-backdrop,
.overlay {
  background: rgba(9, 8, 22, 0.75) !important;
}

/* ── 25. PLAN UPGRADE CARD ────────────────────────────────────── */
.plan-card,
.upgrade-card {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
.plan-card--current { border-color: var(--yellow) !important; }

/* ── 26. MISC CLEANUP ─────────────────────────────────────────── */
/* Remove any remaining warm cream backgrounds that leaked through */
[style*="background:#EFEBE3"],
[style*="background: #EFEBE3"],
[style*="background-color:#EFEBE3"],
[style*="background-color: #EFEBE3"] {
  background: var(--bg) !important;
}

[style*="background:#F7F3EA"],
[style*="background: #F7F3EA"] {
  background: var(--card) !important;
}

[style*="background:#1F1B16"],
[style*="background: #1F1B16"] {
  background: var(--dark) !important;
}

/* Warm text that should now be light */
[style*="color:#1F1B16"],
[style*="color: #1F1B16"] {
  color: var(--text) !important;
}

/* ── 27. ADMIN-SPECIFIC FIXES ─────────────────────────────────── */

/* Admin sidebar */
.admin-sidebar {
  background: var(--dark) !important;
  border-right-color: var(--line) !important;
}
.admin-sidebar__brand { border-bottom-color: var(--line) !important; }
.admin-sidebar__brand-text { color: var(--text) !important; }
.admin-sidebar__brand-badge {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}
.admin-sidebar__nav .admin-sidebar__link { color: var(--text-soft) !important; }
.admin-sidebar__nav .admin-sidebar__link:hover {
  background: rgba(123, 111, 255, 0.08) !important;
  color: var(--text) !important;
}
.admin-sidebar__nav .admin-sidebar__link.active {
  background: rgba(123, 111, 255, 0.15) !important;
  color: var(--yellow) !important;
}
.admin-sidebar__link-count {
  background: var(--softer) !important;
  color: var(--text-muted) !important;
}
.admin-sidebar__section-label { color: var(--text-muted) !important; }
.admin-sidebar__back { color: var(--text-soft) !important; }
.admin-sidebar__back:hover { color: var(--text) !important; }
.admin-sidebar__user-avatar { background: var(--yellow) !important; color: var(--dark) !important; }
.admin-sidebar__user-name { color: var(--text) !important; }
.admin-sidebar__user-role { color: var(--text-muted) !important; }

/* Admin topbar */
.admin-topbar {
  background: var(--bg) !important;
  border-bottom-color: var(--line) !important;
}
.admin-topbar h1 { color: var(--text) !important; }
.admin-topbar h1 em { color: var(--text-soft) !important; }
.admin-topbar__sub { color: var(--text-soft) !important; }
.admin-topbar__breadcrumb a { color: var(--text-muted) !important; }
.admin-topbar__breadcrumb span { color: var(--text) !important; }

/* Admin main content */
.admin-main {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Admin stat cards */
.stat { background: var(--card) !important; border-color: var(--line-soft) !important; }
.stat--yellow { background: var(--yellow) !important; border-color: var(--yellow) !important; }
.stat--yellow .stat__value,
.stat--yellow .stat__label { color: var(--dark) !important; }
.stat--dark { background: var(--dark) !important; border-color: var(--dark) !important; }
.stat--dark .stat__value,
.stat--dark .stat__label { color: var(--text) !important; }
.stat__value { color: var(--text) !important; }
.stat__label { color: var(--text-soft) !important; }
.stat__label-dot { background: var(--yellow) !important; }
.stat__delta--up { color: var(--success) !important; }
.stat__delta--down { color: var(--danger) !important; }
.stat__delta--flat { color: var(--text-muted) !important; }

/* Admin card */
.admin-app .card {
  background: var(--card) !important;
  border-color: var(--line-soft) !important;
}
.card__title em { color: var(--text-soft) !important; }

/* Settings nav active — was background:var(--text), color:var(--bg) → now purple */
.settings-nav__link.active {
  background: var(--yellow) !important;
  color: var(--dark) !important;
}
.settings-nav__link:hover {
  background: var(--softer) !important;
  color: var(--text) !important;
}

/* Tier editor featured (was color:var(--bg) = cream on dark = now dark on dark = broken) */
.tier-editor--featured { color: var(--text) !important; }
.tier-editor--featured .tier-editor__name { color: var(--text) !important; }

/* Lang pill active in admin settings */
.lang-pill.active {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border-color: var(--yellow) !important;
}

/* Filter bar chips */
.chip {
  background: var(--softer) !important;
  border-color: var(--line) !important;
  color: var(--text-soft) !important;
}
.chip:hover { color: var(--text) !important; border-color: var(--line-strong) !important; }
.chip.active {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  border-color: var(--yellow) !important;
}
.chip__count { color: inherit !important; }

/* Table user cells */
.table__user-avatar { background: var(--softer) !important; color: var(--text) !important; }
.table__user-name { color: var(--text) !important; }
.table__user-email { color: var(--text-muted) !important; }
.table__icon-btn {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--text-muted) !important;
}
.table__icon-btn:hover { background: var(--softer) !important; color: var(--text) !important; }

/* Pagination */
.pagination__btn { background: var(--softer) !important; border-color: var(--line) !important; color: var(--text-soft) !important; }
.pagination__btn:hover { color: var(--text) !important; border-color: var(--line-strong) !important; }
.pagination__btn.active { background: var(--yellow) !important; color: var(--dark) !important; border-color: var(--yellow) !important; }
.pagination__btn:disabled { opacity: 0.35 !important; cursor: not-allowed !important; }

/* Table footer */
.table-footer { color: var(--text-muted) !important; border-top-color: var(--line-soft) !important; }

/* Section heads */
.section-head__title { color: var(--text) !important; }
.section-head__title em { color: var(--text-soft) !important; }
.section-head__sub { color: var(--text-soft) !important; }
.section-head__link { color: var(--yellow) !important; }

/* ── 28. SCROLLBAR (dark theme cosmetic) ───────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }