/* ================================================================
   Influencer platform — Design System
   Single source of truth for visual styling. Loaded by every layout.
   Refs: design.css and main.css now stub to this file.
   ================================================================ */

/* ── 1. Tokens (light theme) ───────────────────────────────────── */
:root {
  /* Brand */
  --hv-primary:        #f59e0b;
  --hv-primary-600:    #ea7a16;
  --hv-primary-700:    #b45309;
  --hv-primary-50:     rgba(245,158,11,.11);
  --hv-primary-100:    rgba(245,158,11,.20);
  --hv-gold:           #eab308;
  --hv-gold-accent:    #fbbf24;
  --hv-gold-hover:     #facc15;
  --hv-gold-muted:     #a16207;
  --hv-accent:         #f97316;
  --hv-warning:        #f59e0b;
  --hv-danger:         #ef4444;
  --hv-info:           #0ea5e9;

  /* Surfaces */
  --hv-bg:             #faf7f1;
  --hv-bg-elev:        rgba(255,253,248,.80);
  --hv-bg-muted:       #f3eadb;
  --hv-bg-subtle:      #fffaf2;
  --hv-surface-solid:  #fffdfa;
  --hv-surface-inset:  #f4eadc;

  /* Ink */
  --hv-ink:            #23170c;
  --hv-ink-soft:       #6b4d2f;
  --hv-ink-muted:      #7c6b5a;
  --hv-ink-faint:      #aa9a86;
  --hv-line:           rgba(161,98,7,.16);
  --hv-line-strong:    rgba(245,158,11,.30);

  /* Shadows */
  --hv-shadow-xs:      0 1px 2px rgba(45,33,14,.05);
  --hv-shadow-sm:      0 4px 6px -1px rgba(15,23,42,.08), 0 10px 15px -3px rgba(15,23,42,.06);
  --hv-shadow-md:      0 10px 25px -5px rgba(15,23,42,.12), 0 20px 40px -10px rgba(15,23,42,.08);
  --hv-shadow-lg:      0 18px 46px rgba(15,23,42,.14), 0 8px 18px rgba(245,158,11,.08);
  --hv-shadow-xl:      0 28px 70px rgba(15,23,42,.18), 0 18px 38px rgba(245,158,11,.12);
  --hv-shadow-glow:    0 0 0 1px rgba(245,158,11,.16), 0 16px 34px rgba(245,158,11,.22);
  --hv-ring:           0 0 0 3px rgba(245,158,11,.30);

  /* Spacing scale */
  --hv-1: .25rem; --hv-2: .5rem; --hv-3: .75rem; --hv-4: 1rem;
  --hv-5: 1.5rem; --hv-6: 2rem; --hv-7: 3rem; --hv-8: 4rem;

  /* Radii */
  --hv-r-xs: .375rem;
  --hv-r-sm: .625rem;
  --hv-r-md: .875rem;
  --hv-r-lg: 1.125rem;
  --hv-r-xl: 1.5rem;
  --hv-r-2xl: 1.75rem;
  --hv-r-pill: 999px;

  /* Motion */
  --hv-ease:           cubic-bezier(.22,.61,.36,1);
  --hv-duration-fast:  120ms;
  --hv-duration:       200ms;
  --hv-duration-slow:  320ms;

  /* Layout */
  --hv-sidebar-w:      264px;
  --hv-sidebar-w-collapsed: 76px;
  --hv-topbar-h:       72px;

  /* Glass */
  --hv-glass-bg:       rgba(255,253,248,.78);
  --hv-glass-border:   rgba(245,158,11,.20);
  --hv-glass-blur:     saturate(170%) blur(18px);

  /* Charts */
  --hv-chart-grid:     rgba(161,98,7,.14);
  --hv-chart-text:     #7c6b5a;
}

/* ── 2. Tokens (dark theme) ────────────────────────────────────── */
[data-theme="dark"] {
  --hv-primary:        #f59e0b;
  --hv-primary-600:    #fbbf24;
  --hv-primary-700:    #fde68a;
  --hv-primary-50:     rgba(245,158,11,.13);
  --hv-primary-100:    rgba(251,191,36,.22);
  --hv-gold:           #eab308;
  --hv-gold-accent:    #fbbf24;
  --hv-gold-hover:     #fde047;
  --hv-gold-muted:     #d6a22d;
  --hv-accent:         #f97316;
  --hv-warning:        #f59e0b;
  --hv-danger:         #ef4444;
  --hv-info:           #38bdf8;

  --hv-bg:             #070b12;
  --hv-bg-elev:        rgba(15,23,42,.62);
  --hv-bg-muted:       rgba(255,255,255,.07);
  --hv-bg-subtle:      #0f172a;
  --hv-surface-solid:  #0f172a;
  --hv-surface-inset:  #111827;

  --hv-ink:            #fbf7ef;
  --hv-ink-soft:       #e7dbc8;
  --hv-ink-muted:      #a8a29e;
  --hv-ink-faint:      #78716c;
  --hv-line:           rgba(251,191,36,.14);
  --hv-line-strong:    rgba(251,191,36,.28);

  --hv-shadow-xs:      0 1px 2px rgba(0,0,0,.55);
  --hv-shadow-sm:      0 10px 24px rgba(0,0,0,.38), 0 1px 1px rgba(255,255,255,.03) inset;
  --hv-shadow-md:      0 20px 42px rgba(0,0,0,.46), 0 1px 1px rgba(255,255,255,.04) inset;
  --hv-shadow-lg:      0 30px 70px rgba(0,0,0,.56), 0 1px 1px rgba(255,255,255,.04) inset;
  --hv-shadow-xl:      0 44px 90px rgba(0,0,0,.72), 0 1px 1px rgba(255,255,255,.05) inset;
  --hv-shadow-glow:    0 0 0 1px rgba(245,158,11,.18), 0 24px 64px rgba(245,158,11,.16);
  --hv-ring:           0 0 0 3px rgba(251,191,36,.28);

  --hv-glass-bg:       rgba(15,23,42,.58);
  --hv-glass-border:   rgba(251,191,36,.12);
  --hv-glass-blur:     saturate(150%) blur(22px);

  --hv-chart-grid:     rgba(251,191,36,.12);
  --hv-chart-text:     #a8a29e;
}

/* ── 3. Base & typography ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    linear-gradient(180deg, rgba(212,175,55,.05), transparent 24rem),
    var(--hv-bg);
  color: var(--hv-ink);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  letter-spacing: 0;
  transition: background var(--hv-duration) var(--hv-ease), color var(--hv-duration) var(--hv-ease);
}
.font-fa { font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important; }
.font-en { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; }

h1,h2,h3,h4,h5,h6 { color: var(--hv-ink); letter-spacing: 0; margin: 0; }
h1 { font-weight: 720; font-size: 1.75rem; line-height: 1.22; }
h2 { font-weight: 680; font-size: 1.35rem; line-height: 1.28; }
h3 { font-weight: 650; font-size: 1.06rem; line-height: 1.35; }
small,.small { color: var(--hv-ink-muted); }
.text-muted { color: var(--hv-ink-muted) !important; }
.text-soft  { color: var(--hv-ink-soft) !important; }

a { color: var(--hv-primary); text-decoration: none; transition: color var(--hv-duration-fast) var(--hv-ease); }
a:hover { color: var(--hv-primary-600); }

::selection { background: var(--hv-primary-100); color: var(--hv-ink); }
:focus-visible { outline: 2px solid var(--hv-primary); outline-offset: 3px; }
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 0%, rgba(212,175,55,.10), transparent 24rem),
    linear-gradient(180deg, #0b0b0c 0%, #101010 44%, #0b0b0c 100%);
}

/* Webkit scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(143,119,66,.48); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--hv-primary); border: 2px solid transparent; background-clip: padding-box; }

/* ── 4. Layout primitives (sidebar/topbar/wrapper) ─────────────── */
.hv-wrapper {
  min-height: 100vh; display: flex; align-items: stretch;
  background:
    radial-gradient(circle at 92% 6%, rgba(212,175,55,.08), transparent 18rem),
    var(--hv-bg);
}
.hv-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
}
.hv-content {
  flex: 1 0 auto;
  padding: 2rem;
  width: 100%; max-width: 100%;
}

/* Sidebar */
.hv-sidebar {
  width: var(--hv-sidebar-w); min-width: var(--hv-sidebar-w);
  background:
    linear-gradient(180deg, rgba(212,175,55,.08), transparent 18rem),
    var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border-right: 1px solid var(--hv-line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow: hidden;
  box-shadow: var(--hv-shadow-sm);
  transition: width var(--hv-duration) var(--hv-ease), min-width var(--hv-duration) var(--hv-ease), box-shadow var(--hv-duration) var(--hv-ease);
}
[dir="rtl"] .hv-sidebar { border-right: 0; border-left: 1px solid var(--hv-line); }

.hv-sidebar-brand {
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--hv-line);
  display: flex; align-items: center; gap: .65rem;
  font-weight: 700; color: var(--hv-ink); font-size: .98rem;
  min-height: var(--hv-topbar-h);
}
.hv-sidebar-brand .logo {
  width: 38px; height: 38px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.38), transparent 40%),
    linear-gradient(135deg, #f2d06b 0%, #d4af37 52%, #7b5f20 100%);
  display: flex; align-items: center; justify-content: center;
  color: #17130c; font-weight: 800; font-size: .85rem;
  box-shadow: 0 10px 22px rgba(184,144,45,.28);
  flex-shrink: 0;
}
.hv-sidebar-brand .logo.hv-logo-admin {
  background:
    linear-gradient(145deg, rgba(255,255,255,.28), transparent 40%),
    linear-gradient(135deg, #27210f 0%, #d4af37 100%);
  color: #fff8df;
}
.hv-sidebar-brand-text {
  min-width: 0; overflow: hidden; white-space: nowrap;
  display: flex; flex-direction: column; line-height: 1.15;
}
.hv-sidebar-brand-name { font-weight: 700; color: var(--hv-ink); }
.hv-sidebar-brand-sub  { font-size: .72rem; color: var(--hv-ink-muted); font-weight: 500; }

.hv-sidebar-nav {
  padding: 1rem .75rem; flex: 1 1 auto; overflow-y: auto;
}
.hv-sidebar-section {
  padding: 1rem .75rem .4rem;
  font-size: .68rem; font-weight: 760; color: var(--hv-gold-muted);
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}

.hv-sidebar a.nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .625rem .75rem;
  border-radius: 14px;
  color: var(--hv-ink-soft);
  font-weight: 560; font-size: .91rem;
  margin-bottom: 4px;
  position: relative;
  border: 1px solid transparent;
  transition: background var(--hv-duration-fast) var(--hv-ease),
              color var(--hv-duration-fast) var(--hv-ease),
              transform var(--hv-duration-fast) var(--hv-ease),
              border-color var(--hv-duration-fast) var(--hv-ease),
              box-shadow var(--hv-duration-fast) var(--hv-ease);
}
.hv-sidebar a.nav-link i {
  width: 18px; flex-shrink: 0; text-align: center; font-size: .95rem;
}
.hv-sidebar a.nav-link:hover {
  background: var(--hv-bg-muted); color: var(--hv-ink);
  border-color: var(--hv-line);
  transform: translateX(2px);
}
[dir="rtl"] .hv-sidebar a.nav-link:hover { transform: translateX(-2px); }

.hv-sidebar a.nav-link.active {
  background:
    linear-gradient(135deg, rgba(242,208,107,.18), rgba(212,175,55,.08)),
    var(--hv-bg-muted);
  color: var(--hv-primary);
  border-color: var(--hv-line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--hv-shadow-xs);
  font-weight: 700;
}
.hv-sidebar a.nav-link.active::before {
  content: ''; position: absolute;
  left: -0.65rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: linear-gradient(180deg, var(--hv-gold-accent), var(--hv-gold));
  border-radius: 0 3px 3px 0;
}
[dir="rtl"] .hv-sidebar a.nav-link.active::before {
  left: auto; right: -0.65rem; border-radius: 3px 0 0 3px;
}
.hv-sidebar a.nav-link .nav-count {
  margin-left: auto;
  background: var(--hv-bg-muted); color: var(--hv-ink-soft);
  border-radius: var(--hv-r-pill);
  padding: 0 .5rem; font-size: .7rem; font-weight: 700;
  min-width: 22px; text-align: center;
  flex-shrink: 0;
}
[dir="rtl"] .hv-sidebar a.nav-link .nav-count { margin-left: 0; margin-right: auto; }
.hv-sidebar a.nav-link.active .nav-count {
  background: linear-gradient(135deg, var(--hv-gold-accent), var(--hv-gold)); color: #17130c;
}

.hv-sidebar-footer {
  padding: .875rem;
  border-top: 1px solid var(--hv-line);
}
.hv-sidebar-logout-btn {
  display: flex; align-items: center; gap: .65rem;
  padding: .625rem .75rem;
  border-radius: 14px;
  font-size: .9rem; font-weight: 500;
  background: transparent; border: 0;
  color: var(--hv-danger);
  width: 100%;
  text-align: start;
  transition: background var(--hv-duration-fast) var(--hv-ease),
              color var(--hv-duration-fast) var(--hv-ease);
}
.hv-sidebar-logout-btn:hover {
  background: rgba(217,83,79,.12);
  color: var(--hv-danger);
}
.hv-sidebar-logout-btn i { width: 18px; flex-shrink: 0; text-align: center; }

/* ── Collapsed sidebar — icon-only mode ──────────────────────────
   Triggered by data-collapsed="1" on .hv-sidebar.

   Hides everything except icons; centers them; suppresses the active-
   item indicator bar (which lives outside the visible width); and
   surfaces the link label as a tooltip on hover via the data-tooltip
   attribute the templates set on each link. The tooltip is a single
   ::after pseudo-element, theme-aware via tokens. */
@media (min-width: 992px) {
  .hv-sidebar[data-collapsed="1"] {
    width: var(--hv-sidebar-w-collapsed);
    min-width: var(--hv-sidebar-w-collapsed);
  }
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-brand        { justify-content: center; padding: 1rem .5rem; }
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-brand-text   { display: none; }
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-section      { display: none; }
  .hv-sidebar[data-collapsed="1"] .hv-nav-label            { display: none; }
  .hv-sidebar[data-collapsed="1"] .nav-link .nav-count     { display: none; }
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-nav          { padding: .75rem .35rem; }
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-footer       { padding: .75rem .35rem; }
  .hv-sidebar[data-collapsed="1"] a.nav-link,
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-logout-btn {
    justify-content: center;
    padding: .55rem 0;
    gap: 0;
  }
  .hv-sidebar[data-collapsed="1"] a.nav-link i,
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-logout-btn i { margin: 0; font-size: 1.05rem; }
  .hv-sidebar[data-collapsed="1"] a.nav-link.active::before {
    left: 0; height: 70%;
  }
  [dir="rtl"] .hv-sidebar[data-collapsed="1"] a.nav-link.active::before {
    left: auto; right: 0;
  }
  /* Active-state dot indicator instead of the left bar — looks better
     when there's no text to anchor against. */
  .hv-sidebar[data-collapsed="1"] a.nav-link.active::before { display: none; }
  .hv-sidebar[data-collapsed="1"] a.nav-link.active {
    background: var(--hv-primary-50); color: var(--hv-primary);
    box-shadow: inset 0 0 0 1px var(--hv-line-strong), 0 10px 24px rgba(212,175,55,.10);
  }

  /* Hover tooltip — uses data-tooltip; theme-aware; ARIA-friendly. */
  .hv-sidebar[data-collapsed="1"] a.nav-link,
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-logout-btn {
    position: relative; overflow: visible;
  }
  .hv-sidebar[data-collapsed="1"] a.nav-link[data-tooltip]:hover::after,
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-logout-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute; top: 50%;
    left: calc(100% + .55rem);
    transform: translateY(-50%);
    background: var(--hv-ink);
    color: var(--hv-surface-solid);
    padding: .35rem .65rem;
    border-radius: var(--hv-r-sm);
    font-size: .8rem; font-weight: 500;
    white-space: nowrap;
    z-index: 1100; pointer-events: none;
    box-shadow: var(--hv-shadow-md);
  }
  [dir="rtl"] .hv-sidebar[data-collapsed="1"] a.nav-link[data-tooltip]:hover::after,
  [dir="rtl"] .hv-sidebar[data-collapsed="1"] .hv-sidebar-logout-btn[data-tooltip]:hover::after {
    left: auto; right: calc(100% + .55rem);
  }
}

/* Mobile drawer */
@media (max-width: 991.98px) {
  .hv-sidebar {
    position: fixed; top: 0; left: 0; height: 100%;
    transform: translateX(-100%); transition: transform var(--hv-duration-slow) var(--hv-ease);
    z-index: 1000; box-shadow: var(--hv-shadow-xl);
  }
  [dir="rtl"] .hv-sidebar { left: auto; right: 0; transform: translateX(100%); }
  .hv-sidebar.open { transform: translateX(0); }
  .hv-sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999; opacity: 0; pointer-events: none;
    transition: opacity var(--hv-duration) var(--hv-ease);
  }
  .hv-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
}

/* Topbar — glassmorphic */
.hv-topbar {
  height: var(--hv-topbar-h);
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border-bottom: 1px solid var(--hv-line);
  box-shadow: 0 10px 28px rgba(45,33,14,.05);
}
.hv-topbar .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .88rem; }
.hv-topbar .breadcrumb a { color: var(--hv-ink-muted); }
.hv-topbar .breadcrumb-item.active { color: var(--hv-ink); font-weight: 500; }

.hv-topbar .icon-btn {
  width: 40px; height: 40px; border-radius: 13px;
  background: rgba(255,255,255,.04);
  color: var(--hv-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; border: 1px solid var(--hv-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background var(--hv-duration-fast) var(--hv-ease),
              color var(--hv-duration-fast) var(--hv-ease),
              border-color var(--hv-duration-fast) var(--hv-ease),
              box-shadow var(--hv-duration-fast) var(--hv-ease),
              transform var(--hv-duration-fast) var(--hv-ease);
}
.hv-topbar .icon-btn:hover {
  background: var(--hv-primary-50); color: var(--hv-primary);
  border-color: var(--hv-line-strong);
  box-shadow: var(--hv-shadow-glow);
  transform: translateY(-1px);
}
.hv-topbar .icon-btn .badge-dot {
  position: absolute; top: 8px; right: 9px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--hv-danger);
  border: 2px solid var(--hv-surface-solid);
  box-shadow: 0 0 0 3px rgba(217,83,79,.18);
}
[dir="rtl"] .hv-topbar .icon-btn .badge-dot { right: auto; left: 9px; }

/* ── 5. Page header ────────────────────────────────────────────── */
.hv-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  margin-bottom: var(--hv-6);
}
.hv-page-header-text { min-width: 0; }
.hv-page-header-text h1 { margin: 0; }
.hv-page-header-subtitle {
  margin: .5rem 0 0; color: var(--hv-ink-muted); font-size: .94rem;
}
.hv-page-header-actions {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}

/* ── 6. Cards ──────────────────────────────────────────────────── */
.hv-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 58%),
    var(--hv-bg-elev);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-xl);
  box-shadow: var(--hv-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: border-color var(--hv-duration-fast) var(--hv-ease),
              box-shadow var(--hv-duration-fast) var(--hv-ease),
              transform var(--hv-duration-fast) var(--hv-ease);
}
.hv-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,208,107,.36), transparent);
  pointer-events: none;
}
.hv-card-body { padding: var(--hv-5); }
.hv-card-head {
  padding: 1rem var(--hv-5);
  border-bottom: 1px solid var(--hv-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  background: linear-gradient(180deg, rgba(212,175,55,.05), transparent);
}
.hv-card-head > h2, .hv-card-head > h3 { margin: 0; }

.hv-card-hover { cursor: pointer; }
.hv-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--hv-shadow-lg);
  border-color: var(--hv-line-strong);
}

.hv-card-glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent),
    var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border-color: var(--hv-glass-border);
}
.hv-card-gradient {
  background:
    radial-gradient(100% 90% at 0% 0%, rgba(242,208,107,.18) 0%, transparent 52%),
    radial-gradient(80% 80% at 100% 0%, rgba(212,175,55,.12) 0%, transparent 55%),
    var(--hv-bg-elev);
}

/* Tinted card variants — replace ad-hoc inline styles for alert-style cards. */
.hv-card-warning {
  background: rgba(232,163,23,.10);
  border-color: rgba(232,163,23,.30);
}
.hv-card-danger {
  background: rgba(217,83,79,.08);
  border-color: rgba(217,83,79,.30);
}
.hv-card-success {
  background: rgba(47,191,113,.08);
  border-color: rgba(47,191,113,.30);
}
.hv-card-danger-border { border-color: rgba(217,83,79,.40) !important; }

/* Utility — min-width-0 helper for flex children that need text truncation. */
.min-w-0 { min-width: 0 !important; }

/* Cover thumbnail used by discover cards & similar. */
.hv-thumb {
  width: 100%; height: 160px; object-fit: cover; display: block;
  border-top-left-radius: var(--hv-r-xl);
  border-top-right-radius: var(--hv-r-xl);
}
.hv-thumb-placeholder {
  height: 160px;
  background: linear-gradient(135deg, var(--hv-primary-50), var(--hv-primary-100));
  display: flex; align-items: center; justify-content: center;
  color: var(--hv-primary);
  border-top-left-radius: var(--hv-r-xl);
  border-top-right-radius: var(--hv-r-xl);
}

/* ── 7. Stat cards ─────────────────────────────────────────────── */
.hv-stat {
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), transparent 48%),
    var(--hv-bg-elev);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-xl);
  padding: var(--hv-4) var(--hv-5);
  display: flex; align-items: center; gap: var(--hv-4);
  box-shadow: var(--hv-shadow-sm);
  text-decoration: none; color: inherit;
  transition: border-color var(--hv-duration-fast) var(--hv-ease),
              box-shadow var(--hv-duration-fast) var(--hv-ease),
              transform var(--hv-duration-fast) var(--hv-ease);
}
.hv-stat:hover { color: inherit; }
.hv-stat-icon {
  width: 46px; height: 46px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(145deg, rgba(255,255,255,.25), transparent),
    var(--hv-primary-50);
  color: var(--hv-primary);
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  flex-shrink: 0;
}
.hv-stat-icon.success { background: rgba(47,191,113,.13); color: var(--hv-accent); }
.hv-stat-icon.warning { background: rgba(232,163,23,.16); color: var(--hv-warning); }
.hv-stat-icon.danger  { background: rgba(217,83,79,.15);  color: var(--hv-danger); }
.hv-stat-icon.info    { background: rgba(110,168,254,.15); color: var(--hv-info); }
.hv-stat-icon.neutral { background: var(--hv-bg-muted);   color: var(--hv-ink-soft); }

.hv-stat-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1 1 auto;
}
.hv-stat-label {
  color: var(--hv-ink-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hv-stat-value {
  font-size: 1.55rem; font-weight: 760;
  color: var(--hv-ink);
  line-height: 1.15;
  display: flex; align-items: baseline; gap: .35rem;
  flex-wrap: wrap;
}
.hv-stat-value small {
  font-size: .8rem; font-weight: 500; color: var(--hv-ink-muted);
}
.hv-stat-trend {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600;
  padding: .1rem .4rem; border-radius: var(--hv-r-pill);
  margin-top: 2px;
}
.hv-stat-trend.up   { background: rgba(47,191,113,.12); color: var(--hv-accent); }
.hv-stat-trend.down { background: rgba(217,83,79,.12);  color: var(--hv-danger); }
.hv-stat-trend.flat { background: var(--hv-bg-muted);   color: var(--hv-ink-muted); }

a.hv-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--hv-shadow-glow);
  border-color: var(--hv-line-strong);
}

/* ── 8. Pills / badges / tags ──────────────────────────────────── */
.hv-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .55rem;
  font-size: .72rem; font-weight: 600;
  border-radius: var(--hv-r-pill);
  background: var(--hv-bg-muted); color: var(--hv-ink-soft);
  border: 1px solid var(--hv-line);
  text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.4;
}
.hv-pill.success { background: rgba(47,191,113,.14); color: #127447; border-color: rgba(47,191,113,.28); }
.hv-pill.warning { background: rgba(232,163,23,.18); color: #7d5111; border-color: rgba(232,163,23,.30); }
.hv-pill.danger  { background: rgba(217,83,79,.16);  color: #9b262b; border-color: rgba(217,83,79,.28); }
.hv-pill.info    { background: rgba(110,168,254,.16); color: #285f9e; border-color: rgba(110,168,254,.28); }
.hv-pill.primary { background: var(--hv-primary-50); color: var(--hv-primary); }
.hv-pill.neutral { background: var(--hv-bg-muted);   color: var(--hv-ink-soft); }
[data-theme="dark"] .hv-pill.success { color: #4ade80; }
[data-theme="dark"] .hv-pill.warning { color: #fcd34d; }
[data-theme="dark"] .hv-pill.danger  { color: #fca5a5; }
[data-theme="dark"] .hv-pill.info    { color: #7dd3fc; }
.hv-pill.dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.hv-tag {
  display: inline-block; padding: .15rem .55rem;
  background: var(--hv-bg-muted); color: var(--hv-ink-soft);
  border-radius: var(--hv-r-pill);
  font-size: .72rem; font-weight: 600; line-height: 1.4;
}

/* Match score chip */
.hv-match {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .55rem; border-radius: var(--hv-r-pill);
  background: var(--hv-primary-50); color: var(--hv-primary);
  font-weight: 700; font-size: .78rem;
  white-space: nowrap;
}
.hv-match.high { background: rgba(47,191,113,.14); color: #127447; }
.hv-match.mid  { background: rgba(232,163,23,.18); color: #7d5111; }
.hv-match.low  { background: rgba(217,83,79,.16);  color: #9b262b; }
[data-theme="dark"] .hv-match.high { color: #4ade80; }
[data-theme="dark"] .hv-match.mid  { color: #fcd34d; }
[data-theme="dark"] .hv-match.low  { color: #fca5a5; }

/* ── 9. Trust ring (fixed centering, no magic margin) ──────────── */
.hv-trust-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .35rem;
  flex-shrink: 0;
}
.hv-trust {
  --pct: 0;
  --ring-size: 64px;
  --ring-thick: 8px;
  position: relative;
  width: var(--ring-size); height: var(--ring-size);
  border-radius: 50%;
  background:
    conic-gradient(var(--hv-primary) calc(var(--pct) * 1%), var(--hv-bg-muted) 0);
  display: flex; align-items: center; justify-content: center;
}
.hv-trust::after {
  content: '';
  position: absolute; inset: var(--ring-thick);
  background: var(--hv-surface-solid);
  border-radius: 50%;
}
.hv-trust-val {
  position: relative; z-index: 1;
  font-weight: 700; color: var(--hv-ink);
  font-size: 1rem; line-height: 1;
}
.hv-trust-caption {
  font-size: .72rem; color: var(--hv-ink-muted); text-align: center;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}

/* ── 10. Buttons (refining Bootstrap) ──────────────────────────── */
.btn {
  border-radius: 12px;
  font-weight: 650;
  padding: .55rem .95rem;
  border-width: 1px;
  transition: background var(--hv-duration-fast) var(--hv-ease),
              border-color var(--hv-duration-fast) var(--hv-ease),
              box-shadow var(--hv-duration-fast) var(--hv-ease),
              color var(--hv-duration-fast) var(--hv-ease),
              transform var(--hv-duration-fast) var(--hv-ease);
}
.btn:focus-visible { box-shadow: var(--hv-ring) !important; outline: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: inset 0 2px 8px rgba(0,0,0,.14); }
.btn-primary {
  background:
    linear-gradient(145deg, rgba(255,255,255,.26), transparent 36%),
    linear-gradient(135deg, var(--hv-gold-accent) 0%, var(--hv-gold) 48%, #9f7926 100%);
  border-color: rgba(212,175,55,.42);
  color: #17130c;
  box-shadow: 0 12px 28px rgba(184,144,45,.22);
}
.btn-primary:hover, .btn-primary:focus {
  background:
    linear-gradient(145deg, rgba(255,255,255,.30), transparent 36%),
    linear-gradient(135deg, #ffd875 0%, var(--hv-gold-accent) 44%, var(--hv-gold) 100%);
  border-color: rgba(255,216,117,.58);
  color: #17130c;
  box-shadow: 0 0 0 1px rgba(255,216,117,.14), 0 16px 34px rgba(212,175,55,.28);
}
.btn-soft {
  background: var(--hv-primary-50); color: var(--hv-primary);
  border: 1px solid var(--hv-line);
}
.btn-soft:hover {
  background: var(--hv-primary-100); color: var(--hv-primary-700);
  box-shadow: var(--hv-shadow-glow);
}
.btn-ghost {
  background: rgba(255,255,255,.03); color: var(--hv-ink-soft);
  border: 1px solid var(--hv-line);
}
.btn-ghost:hover {
  background: var(--hv-bg-muted); color: var(--hv-ink);
  border-color: var(--hv-line-strong);
  box-shadow: var(--hv-shadow-sm);
}
.btn-sm { padding: .36rem .68rem; font-size: .82rem; border-radius: 10px; }
.btn-lg { padding: .68rem 1.15rem; font-size: 1rem; border-radius: 14px; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem; width: 32px; height: 32px;
}

/* ── 11. Forms ─────────────────────────────────────────────────── */
.form-label {
  font-weight: 650; color: var(--hv-ink);
  margin-bottom: .35rem; font-size: .85rem;
}
.form-control, .form-select {
  border-radius: 12px;
  border: 1px solid var(--hv-line);
  padding: .64rem .8rem;
  font-size: .92rem;
  background: var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  color: var(--hv-ink);
  transition: border-color var(--hv-duration-fast) var(--hv-ease),
              box-shadow var(--hv-duration-fast) var(--hv-ease),
              background var(--hv-duration-fast) var(--hv-ease);
}
.form-control::placeholder { color: var(--hv-ink-faint); }
.form-control:focus, .form-select:focus {
  border-color: var(--hv-primary);
  box-shadow: var(--hv-ring);
  background: var(--hv-surface-solid); color: var(--hv-ink);
}
.form-text { color: var(--hv-ink-muted); }
.form-check-input {
  background-color: var(--hv-glass-bg);
  border-color: var(--hv-line-strong);
  box-shadow: none;
}
.form-check-input:checked {
  background-color: var(--hv-primary); border-color: var(--hv-primary);
}
.form-check-input:focus { border-color: var(--hv-primary); box-shadow: var(--hv-ring); }
.input-group-text {
  background: var(--hv-bg-muted); border-color: var(--hv-line);
  color: var(--hv-ink-soft);
  border-radius: 12px;
}

/* ── 12. Tables ────────────────────────────────────────────────── */
.hv-table {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent),
    var(--hv-bg-elev);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-xl);
  overflow: hidden;
  box-shadow: var(--hv-shadow-sm);
}
.hv-table-scroll {
  width: 100%; overflow-x: auto;
  scrollbar-width: thin;
}
.hv-table table { width: 100%; margin: 0; border-collapse: collapse; }
.hv-table thead th {
  background: linear-gradient(180deg, rgba(212,175,55,.10), var(--hv-bg-muted));
  color: var(--hv-gold-muted);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .82rem 1rem;
  border-bottom: 1px solid var(--hv-line);
  text-align: start;
  white-space: nowrap;
}
.hv-table tbody td {
  padding: .95rem 1rem;
  border-bottom: 1px solid var(--hv-line);
  vertical-align: middle;
  color: var(--hv-ink);
}
.hv-table tbody tr:last-child td { border-bottom: 0; }
.hv-table tbody tr { transition: background var(--hv-duration-fast) var(--hv-ease); }
.hv-table tbody tr:nth-child(even) td { background: rgba(143,119,66,.035); }
.hv-table tbody tr:hover td { background: var(--hv-primary-50); }

.table { color: var(--hv-ink); }
.table > :not(caption) > * > * {
  background-color: transparent; color: var(--hv-ink);
}
.font-monospace { font-family: 'JetBrains Mono','Courier New',monospace !important; font-size: .85rem; }

/* ── 13. Dropdowns / menus (glassmorphic) ──────────────────────── */
.dropdown-menu {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border: 1px solid var(--hv-glass-border);
  border-radius: var(--hv-r-lg);
  box-shadow: var(--hv-shadow-lg);
  padding: .45rem;
  color: var(--hv-ink);
  animation: hv-menu-in var(--hv-duration-fast) var(--hv-ease);
}
@keyframes hv-menu-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  border-radius: 10px;
  color: var(--hv-ink);
  padding: .52rem .7rem;
  font-size: .9rem;
  transition: background var(--hv-duration-fast) var(--hv-ease), color var(--hv-duration-fast) var(--hv-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--hv-primary-50); color: var(--hv-primary);
}
.dropdown-item.active { background: var(--hv-primary-50); color: var(--hv-primary); }
.dropdown-item-text { color: var(--hv-ink-muted); padding: .35rem .65rem; }
.dropdown-divider { border-color: var(--hv-line); margin: .35rem 0; }

/* Notification dropdown */
.hv-notif-dropdown {
  width: 380px; max-width: 92vw;
  padding: 0;
  border-radius: var(--hv-r-xl);
  overflow: hidden;
}
.hv-notif-dropdown > div:first-child {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--hv-line);
  background: linear-gradient(180deg, var(--hv-primary-50), transparent);
}
.hv-notif-item {
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--hv-line);
  display: flex; gap: .65rem;
  color: var(--hv-ink) !important;
  transition: background var(--hv-duration-fast) var(--hv-ease), color var(--hv-duration-fast) var(--hv-ease);
}
.hv-notif-item:last-child { border-bottom: 0; }
.hv-notif-item:hover { background: var(--hv-bg-subtle); }
.hv-notif-item.unread { background: var(--hv-primary-50); }
.hv-notif-item.unread:hover { background: var(--hv-primary-100); }
.hv-notif-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hv-primary); margin-top: 7px;
  box-shadow: 0 0 0 4px var(--hv-primary-50);
  flex-shrink: 0;
}

/* ── 14. Modals ────────────────────────────────────────────────── */
.modal-content {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border: 1px solid var(--hv-glass-border);
  border-radius: var(--hv-r-xl);
  box-shadow: var(--hv-shadow-xl);
}
.modal-header {
  background: var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border-bottom: 1px solid var(--hv-line);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  padding: 1rem 1.25rem;
}
.modal-title { color: var(--hv-ink); font-weight: 600; }
.modal-body { padding: 1.25rem; color: var(--hv-ink); }
.modal-footer { border-top: 1px solid var(--hv-line); padding: .85rem 1.25rem; }
.modal-backdrop.show {
  opacity: .62;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── 15. Alerts ────────────────────────────────────────────────── */
.alert {
  border-radius: var(--hv-r-lg);
  border: 1px solid transparent;
  padding: .75rem 1rem;
  font-size: .9rem;
}
.alert-success { background: rgba(47,191,113,.10); color: #0f6c4d; border-color: rgba(47,191,113,.30); }
.alert-warning { background: rgba(232,163,23,.12); color: #7d5111; border-color: rgba(232,163,23,.30); }
.alert-danger  { background: rgba(217,83,79,.10);  color: #952127; border-color: rgba(217,83,79,.30); }
.alert-info    { background: rgba(110,168,254,.10); color: #245b9c; border-color: rgba(110,168,254,.30); }
[data-theme="dark"] .alert-success { color: #6ee7b7; }
[data-theme="dark"] .alert-warning { color: #fcd34d; }
[data-theme="dark"] .alert-danger  { color: #fca5a5; }
[data-theme="dark"] .alert-info    { color: #7dd3fc; }

/* ── 16. Avatar ───────────────────────────────────────────────── */
.hv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(242,208,107,.18), transparent),
    var(--hv-bg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--hv-ink-soft); font-size: .85rem;
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--hv-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hv-avatar.sm { width: 28px; height: 28px; font-size: .72rem; }
.hv-avatar.lg { width: 64px; height: 64px; font-size: 1.2rem; }
.hv-avatar.xl { width: 84px; height: 84px; font-size: 1.5rem; }

/* ── 17. Empty state ──────────────────────────────────────────── */
.hv-empty {
  text-align: center;
  padding: var(--hv-7) var(--hv-5);
  color: var(--hv-ink-muted);
}
.hv-empty .icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--hv-primary-50);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--hv-primary);
  margin-bottom: var(--hv-3);
}
.hv-empty .fw-semibold { color: var(--hv-ink); }

/* ── 18. Timeline ─────────────────────────────────────────────── */
.hv-timeline { position: relative; padding-left: 1.25rem; }
[dir="rtl"] .hv-timeline { padding-left: 0; padding-right: 1.25rem; }
.hv-timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px;
  background: linear-gradient(180deg, var(--hv-primary), var(--hv-line));
}
[dir="rtl"] .hv-timeline::before { left: auto; right: 6px; }
.hv-timeline-item { position: relative; padding-bottom: 1rem; }
.hv-timeline-item::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--hv-primary); border: 2px solid var(--hv-surface-solid);
  box-shadow: 0 0 0 2px var(--hv-line), 0 0 18px rgba(212,175,55,.24);
}
[dir="rtl"] .hv-timeline-item::before { left: auto; right: 0; }
.hv-timeline-item .time { font-size: .75rem; color: var(--hv-ink-muted); }

/* ── 19. Skeletons & progress ─────────────────────────────────── */
.hv-skeleton {
  background: linear-gradient(90deg, var(--hv-bg-muted) 0%, var(--hv-primary-50) 50%, var(--hv-bg-muted) 100%);
  background-size: 200% 100%;
  animation: hv-skeleton 1.4s linear infinite;
  border-radius: var(--hv-r-sm);
  min-height: 1rem;
}
@keyframes hv-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.hv-progress {
  height: 6px; background: var(--hv-bg-muted);
  border-radius: var(--hv-r-pill); overflow: hidden;
}
.hv-progress > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--hv-gold), var(--hv-gold-accent));
  border-radius: inherit;
  transition: width var(--hv-duration-slow) var(--hv-ease);
}

/* ── 20. Auth pages ───────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(212,175,55,.18) 0%, transparent 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(143,119,66,.14) 0%, transparent 55%),
    var(--hv-bg);
}
.auth-page .card { border-radius: var(--hv-r-xl) !important; box-shadow: var(--hv-shadow-xl); }
.otp-input {
  font-size: 2rem; letter-spacing: .5rem; text-align: center; font-weight: 700;
}

/* ── 21. Misc ─────────────────────────────────────────────────── */
.hv-divider { height: 1px; background: var(--hv-line); margin: 1.25rem 0; }
.hv-card .border-bottom { border-color: var(--hv-line) !important; }
.bg-gradient-primary {
  background:
    linear-gradient(145deg, rgba(255,255,255,.24), transparent 36%),
    linear-gradient(135deg, var(--hv-gold-accent) 0%, var(--hv-gold) 52%, #8f7742 100%);
  color: #17130c;
}

/* Flash messages container — float to a corner of the page */
.flash-stack {
  position: fixed; top: calc(var(--hv-topbar-h) + .75rem); right: 1rem;
  display: flex; flex-direction: column; gap: .5rem; z-index: 1080;
  max-width: 360px; width: calc(100vw - 2rem);
}
[dir="rtl"] .flash-stack { right: auto; left: 1rem; }

/* RTL bootstrap helper fixes */
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
[dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; }
[dir="rtl"] .dropdown-menu-end { left: 0 !important; right: auto !important; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left !important; }

/* ── 22. Theme toggle button ──────────────────────────────────── */
/* The active icon uses inline-block, the inactive one is `display:none`.
   Avoid absolute-positioned overlay children so clicks always reach the
   button (Safari can otherwise intercept the click on an absolutely
   positioned descendant). pointer-events:none on the <i> children is a
   second line of defence — the click always bubbles to the button. */
.hv-theme-toggle { position: relative; }
.hv-theme-toggle > i {
  pointer-events: none;
  transition: transform var(--hv-duration) var(--hv-ease),
              opacity var(--hv-duration) var(--hv-ease);
}
[data-theme="light"] .hv-theme-toggle > i[data-theme-icon="light"] { display: none; }
[data-theme="light"] .hv-theme-toggle > i[data-theme-icon="dark"]  { display: inline-block; }
[data-theme="dark"]  .hv-theme-toggle > i[data-theme-icon="dark"]  { display: none; }
[data-theme="dark"]  .hv-theme-toggle > i[data-theme-icon="light"] { display: inline-block; }

/* ── PWA: install button + update banner ──────────────────────── */
#hvInstallBtn[hidden] { display: none !important; }
.hv-update-banner {
  position: fixed; left: 50%; bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1090;
  background: var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border: 1px solid var(--hv-line);
  box-shadow: var(--hv-shadow-lg);
  border-radius: var(--hv-r-md);
  padding: .65rem .85rem .65rem 1rem;
  display: flex; align-items: center; gap: .85rem;
  max-width: calc(100vw - 1.5rem);
  color: var(--hv-ink);
  font-size: .92rem;
}
[dir="rtl"] .hv-update-banner { left: auto; right: 50%; transform: translateX(50%); }
.hv-update-banner-msg { display: flex; align-items: center; gap: .55rem; }
.hv-update-banner-msg i { color: var(--hv-primary); }
.hv-update-banner-actions { display: flex; gap: .35rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
  .hv-update-banner { left: .75rem; right: .75rem; transform: none; bottom: .75rem;
    flex-direction: column; align-items: stretch; }
  [dir="rtl"] .hv-update-banner { right: .75rem; left: .75rem; transform: none; }
  .hv-update-banner-actions { justify-content: flex-end; }
}

/* ── 23. Charts (Chart.js color defaults respected via JS) ─────── */
.hv-chart-canvas { width: 100% !important; max-width: 100%; }

/* ── 24. Responsive niceties ──────────────────────────────────── */
@media (max-width: 575.98px) {
  .hv-content { padding: 1rem .85rem; }
  .hv-card-body { padding: 1rem; }
  .hv-card-head { padding: .85rem 1rem; }
  .hv-page-header { margin-bottom: 1.25rem; }
  .hv-stat { padding: .85rem 1rem; gap: .85rem; }
  .hv-stat-icon { width: 40px; height: 40px; }
  .hv-stat-value { font-size: 1.25rem; }
}

/* Ensure tables become scrollable on small screens automatically when
   wrapped in .hv-card; the inner .hv-table already handles its own scrollbar
   for overflow-x via .hv-table-scroll, but for unwrapped Bootstrap tables: */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ================================================================
   Reference visual refresh: Bloggerha Connect look-and-feel
   ----------------------------------------------------------------
   Visual-only overrides that map the current Jinja/Bootstrap classes
   to the reference project's warm glass dashboard language.
   ================================================================ */

body {
  background:
    radial-gradient(circle at 22% 18%, rgba(245,158,11,.16), transparent 18rem),
    radial-gradient(circle at 78% 84%, rgba(249,115,22,.10), transparent 22rem),
    linear-gradient(180deg, #fffaf2 0%, var(--hv-bg) 46%, #f7efe2 100%);
}
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 16% 0%, rgba(245,158,11,.14), transparent 23rem),
    radial-gradient(circle at 84% 82%, rgba(249,115,22,.10), transparent 25rem),
    linear-gradient(180deg, #070b12 0%, #0b1020 48%, #070b12 100%);
}

.hv-wrapper {
  background:
    radial-gradient(circle at 12% 8%, rgba(245,158,11,.13), transparent 18rem),
    radial-gradient(circle at 90% 14%, rgba(234,179,8,.10), transparent 20rem),
    transparent;
}

.hv-content {
  padding: 1.5rem;
  max-width: 1280px;
  margin-inline: auto;
}

.hv-brand-logo,
.hv-auth-logo,
.hv-sidebar-brand .logo {
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(245,158,11,.38));
}
.hv-brand-logo {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.hv-auth-logo {
  width: 52px;
  height: 52px;
  vertical-align: middle;
}
.auth-brand-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: linear-gradient(135deg, var(--hv-accent), var(--hv-gold-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.auth-brand-title img {
  color: initial;
}

.navbar.bg-primary {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 4rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent),
    var(--hv-glass-bg) !important;
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border-bottom: 1px solid var(--hv-line);
  box-shadow: var(--hv-shadow-sm);
}
.navbar-dark .navbar-brand {
  display: inline-flex;
  align-items: center;
  color: var(--hv-ink) !important;
  background: linear-gradient(135deg, var(--hv-accent), var(--hv-gold-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.navbar-dark .navbar-nav .nav-link {
  color: var(--hv-ink-soft);
  border-radius: 1rem;
  padding-inline: .85rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--hv-ink);
  background: var(--hv-primary-50);
}
.navbar .btn-light {
  background: var(--hv-primary-50);
  color: var(--hv-primary);
  border: 1px solid var(--hv-line-strong);
  border-radius: 1rem;
  font-weight: 700;
}

.hv-sidebar {
  width: 220px;
  min-width: 220px;
  top: 0;
  height: 100vh;
  margin: 0;
  background: var(--hv-glass-bg);
  border-color: var(--hv-glass-border);
  box-shadow: none;
}
.hv-sidebar-brand {
  min-height: 4rem;
  padding: .75rem .95rem;
}
.hv-sidebar-brand .logo {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}
.hv-sidebar-brand-name {
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--hv-accent), var(--hv-gold-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hv-sidebar-brand-sub {
  font-size: .7rem;
}
.hv-sidebar-nav {
  padding: 1rem .5rem;
}
.hv-sidebar a.nav-link,
.hv-sidebar-logout-btn {
  min-height: 42px;
  padding: .625rem .75rem;
  border-radius: .9rem;
  font-size: .88rem;
  font-weight: 650;
  color: var(--hv-ink-muted);
}
.hv-sidebar a.nav-link:hover {
  background: var(--hv-bg-muted);
  color: var(--hv-ink);
  border-color: transparent;
  transform: translateX(2px);
}
[dir="rtl"] .hv-sidebar a.nav-link:hover { transform: translateX(-2px); }
.hv-sidebar a.nav-link.active {
  background: var(--hv-primary-50);
  color: var(--hv-primary);
  border-color: transparent;
  box-shadow: none;
}
.hv-sidebar a.nav-link.active::before {
  left: 0;
  right: auto;
  width: 4px;
  height: calc(100% - .5rem);
  background: linear-gradient(180deg, var(--hv-accent), var(--hv-gold-accent));
  border-radius: var(--hv-r-pill);
}
[dir="rtl"] .hv-sidebar a.nav-link.active::before {
  left: auto;
  right: 0;
  border-radius: var(--hv-r-pill);
}
.hv-sidebar a.nav-link i,
.hv-sidebar-logout-btn i {
  font-size: 1rem;
}
.hv-sidebar-section {
  color: var(--hv-ink-faint);
  letter-spacing: .04em;
}

.hv-topbar {
  height: 4rem;
  padding: .75rem 1.5rem;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
.hv-topbar > .d-flex:last-child {
  gap: .5rem !important;
  padding: .35rem .55rem;
  border: 1px solid var(--hv-line);
  border-radius: 1.25rem;
  background: rgba(245,158,11,.05);
  box-shadow: 0 2px 12px -2px rgba(245,158,11,.22);
}
.hv-topbar .icon-btn {
  width: 38px;
  height: 38px;
  border-radius: .95rem;
  background: rgba(255,255,255,.18);
  border-color: rgba(245,158,11,.16);
}
[data-theme="dark"] .hv-topbar .icon-btn {
  background: rgba(255,255,255,.04);
}
.hv-topbar .btn-ghost {
  border-radius: 1rem;
}

.hv-page-header {
  margin-bottom: 1.5rem;
}
.hv-page-header-text h1 {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  font-weight: 850;
}
.hv-page-header-text h1,
.gradient-text {
  background: linear-gradient(135deg, var(--hv-accent), var(--hv-gold-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hv-card,
.card,
.hv-table,
.modal-content,
.dropdown-menu {
  border-radius: var(--hv-r-2xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent),
    var(--hv-glass-bg);
  border-color: var(--hv-glass-border);
  box-shadow: var(--hv-shadow-sm);
}
.hv-card {
  overflow: hidden;
}
.hv-card-hover:hover,
a.hv-stat:hover,
.hv-nav-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,.26);
  box-shadow: 0 8px 30px rgba(234,179,8,.18);
}
.hv-card-head {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(245,158,11,.08), transparent 70%);
}
.hv-card-body {
  padding: 1.25rem;
}

.hv-stat {
  min-height: 112px;
  align-items: flex-start;
  border-radius: 1.5rem;
  padding: 1.15rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 52%),
    var(--hv-glass-bg);
  border-color: var(--hv-line);
}
.hv-stat-icon,
.hv-nav-card i,
.hv-empty .icon {
  width: 48px;
  height: 48px;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  box-shadow: 0 10px 22px rgba(245,158,11,.22);
}
.hv-stat-icon.success,
.hv-nav-card:nth-child(4n+3) i { background: linear-gradient(135deg, #34d399, #14b8a6); color: #fff; }
.hv-stat-icon.warning,
.hv-nav-card:nth-child(4n+1) i { background: linear-gradient(135deg, #fb923c, #f59e0b); color: #fff; }
.hv-stat-icon.info,
.hv-nav-card:nth-child(4n+2) i { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: #fff; }
.hv-stat-icon.danger,
.hv-nav-card:nth-child(4n+4) i { background: linear-gradient(135deg, #fb7185, #ec4899); color: #fff; }
.hv-stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
  color: var(--hv-ink-muted);
}
.hv-stat-value {
  font-size: 1.45rem;
  font-weight: 850;
}

.hv-card-nav {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1rem;
}
.hv-nav-card {
  min-height: 108px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .7rem;
  padding: 1.1rem;
  border-radius: 1.5rem;
  background: rgba(255,247,237,.76);
  border-color: rgba(251,146,60,.22);
  transition: transform var(--hv-duration) var(--hv-ease),
              border-color var(--hv-duration) var(--hv-ease),
              box-shadow var(--hv-duration) var(--hv-ease);
}
[data-theme="dark"] .hv-nav-card {
  background: rgba(124,45,18,.18);
  border-color: rgba(251,146,60,.20);
}
.hv-nav-card span {
  font-weight: 800;
  font-size: .9rem;
}
.hv-nav-card.active {
  border-color: rgba(245,158,11,.42);
  box-shadow: 0 8px 30px rgba(234,179,8,.20);
}
.hv-nav-card-static {
  background: rgba(234,179,8,.10);
}

.btn,
.form-control,
.form-select,
.input-group-text {
  border-radius: 1rem;
}
.btn-primary {
  background: linear-gradient(135deg, var(--hv-accent), var(--hv-gold-accent));
  border-color: rgba(245,158,11,.30);
  color: #fff;
  box-shadow: 0 12px 26px rgba(245,158,11,.24);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #ea580c, #f59e0b);
  color: #fff;
}
.btn-soft {
  background: var(--hv-primary-50);
  border-color: rgba(245,158,11,.18);
}
.btn-ghost {
  background: rgba(255,255,255,.10);
  border-color: var(--hv-line);
}
.form-control,
.form-select {
  background: rgba(255,255,255,.38);
  border-color: rgba(161,98,7,.18);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: rgba(15,23,42,.48);
}

.hv-table {
  border-radius: 1.5rem;
}
.hv-table thead th,
.table > thead th {
  background: rgba(245,158,11,.08);
  color: var(--hv-ink-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 800;
}
.hv-table tbody tr:hover td,
.table-hover > tbody > tr:hover > * {
  background: rgba(245,158,11,.08);
}

.hv-pill,
.hv-tag,
.hv-match {
  border-radius: var(--hv-r-pill);
  text-transform: none;
  letter-spacing: 0;
}
.hv-empty {
  padding: 3rem 1.5rem;
}
.hv-skeleton {
  background: linear-gradient(90deg, var(--hv-bg-muted) 0%, rgba(245,158,11,.16) 50%, var(--hv-bg-muted) 100%);
  background-size: 200% 100%;
}
.auth-page {
  background:
    radial-gradient(circle at 22% 20%, rgba(245,158,11,.20), transparent 20rem),
    radial-gradient(circle at 80% 78%, rgba(249,115,22,.14), transparent 24rem),
    var(--hv-bg);
}
.auth-page .card {
  border-radius: 1.75rem !important;
}

@media (min-width: 992px) {
  .hv-sidebar[data-collapsed="1"] {
    width: 72px;
    min-width: 72px;
  }
  .hv-sidebar[data-collapsed="1"] .hv-sidebar-brand .logo {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 991.98px) {
  .hv-sidebar {
    top: 0;
    height: 100%;
  }
  .hv-content {
    padding: 1rem;
  }
  .hv-topbar {
    padding-inline: 1rem;
  }
}

@media (max-width: 575.98px) {
  .hv-card-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  .hv-nav-card {
    min-height: 100px;
    padding: .95rem;
  }
  .hv-topbar > .d-flex:last-child {
    padding: .25rem;
    gap: .25rem !important;
  }
  .hv-topbar .icon-btn {
    width: 36px;
    height: 36px;
  }
  .hv-auth-logo {
    width: 44px;
    height: 44px;
  }
}


/* ================================================================
   ── BOOTSTRAP DARK-MODE OVERRIDES ───────────────────────────────
   Bootstrap 5 ships with a small set of `--bs-*` CSS variables, but
   most components still use hardcoded hex colours in their selectors
   (e.g. `.pagination .page-link { color: #0d6efd }`).
   We re-bind those vars to our design tokens AND override the
   selectors directly so every component tracks the active theme.
   ================================================================ */

/* Map Bootstrap's own CSS variables to ours. This catches utilities
   that read from --bs-body-bg, --bs-body-color, --bs-border-color etc.,
   like row-cols, dividers, .border helpers, etc. */
:root, [data-theme] {
  --bs-body-bg:            var(--hv-bg);
  --bs-body-color:         var(--hv-ink);
  --bs-emphasis-color:     var(--hv-ink);
  --bs-secondary-color:    var(--hv-ink-soft);
  --bs-tertiary-color:     var(--hv-ink-muted);
  --bs-body-color-rgb:     23, 19, 12;
  --bs-secondary-bg:       var(--hv-bg-muted);
  --bs-tertiary-bg:        var(--hv-bg-subtle);
  --bs-secondary-bg-rgb:   239, 232, 216;
  --bs-tertiary-bg-rgb:    255, 250, 240;
  --bs-border-color:       var(--hv-line);
  --bs-border-color-translucent: var(--hv-line);
  --bs-link-color:         var(--hv-primary);
  --bs-link-hover-color:   var(--hv-primary-600);
  --bs-heading-color:      var(--hv-ink);
  --bs-emphasis-color-rgb: 23, 19, 12;
}
[data-theme="dark"] {
  --bs-body-color-rgb:     246, 244, 239;
  --bs-secondary-bg-rgb:   255, 255, 255;
  --bs-tertiary-bg-rgb:    18, 18, 20;
  --bs-emphasis-color-rgb: 246, 244, 239;
}

/* ── Raw Bootstrap card (when a template uses .card instead of .hv-card) */
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 58%),
    var(--hv-bg-elev);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  border-color: var(--hv-line);
  color: var(--hv-ink);
  border-radius: var(--hv-r-xl);
  box-shadow: var(--hv-shadow-sm);
}
.card-header, .card-footer {
  background-color: var(--hv-bg-subtle);
  border-color: var(--hv-line);
  color: var(--hv-ink);
}

/* ── Bootstrap tables — full theming  */
.table {
  --bs-table-bg:           transparent;
  --bs-table-color:        var(--hv-ink);
  --bs-table-color-state:  var(--hv-ink);
  --bs-table-border-color: var(--hv-line);
  --bs-table-striped-color: var(--hv-ink);
  --bs-table-striped-bg:   var(--hv-bg-subtle);
  --bs-table-hover-color:  var(--hv-ink);
  --bs-table-hover-bg:     var(--hv-bg-muted);
  color: var(--hv-ink);
  border-color: var(--hv-line);
}
.table > thead {
  background-color: var(--hv-bg-muted);
  color: var(--hv-ink-muted);
}
.table > thead th {
  background-color: var(--hv-bg-muted);
  color: var(--hv-gold-muted);
  border-color: var(--hv-line);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.table-light, .table-light > th, .table-light > td {
  background-color: var(--hv-bg-muted) !important;
  color: var(--hv-ink) !important;
  border-color: var(--hv-line) !important;
}
.table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  color: var(--hv-ink);
  border-bottom-color: var(--hv-line);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(143,119,66,.035); }
.table-hover > tbody > tr:hover > * { background-color: var(--hv-primary-50); }

/* ── Pagination */
.pagination { --bs-pagination-bg: var(--hv-bg-elev); }
.page-link {
  color: var(--hv-ink-soft);
  background-color: var(--hv-bg-elev);
  border-color: var(--hv-line);
  border-radius: 10px;
  margin-inline: 2px;
  transition: background var(--hv-duration-fast) var(--hv-ease),
              color var(--hv-duration-fast) var(--hv-ease),
              border-color var(--hv-duration-fast) var(--hv-ease);
}
.page-link:hover {
  background-color: var(--hv-bg-muted);
  color: var(--hv-ink);
  border-color: var(--hv-line-strong);
}
.page-link:focus {
  box-shadow: var(--hv-ring);
  color: var(--hv-primary);
  background-color: var(--hv-primary-50);
}
.page-item.active .page-link {
  background: linear-gradient(135deg, var(--hv-gold-accent), var(--hv-gold));
  border-color: var(--hv-primary);
  color: #17130c;
  box-shadow: var(--hv-shadow-glow);
}
.page-item.disabled .page-link {
  background-color: var(--hv-bg-elev);
  border-color: var(--hv-line);
  color: var(--hv-ink-faint);
  opacity: .65;
}

/* ── Alerts — extra variants beyond the four already declared */
.alert { border-radius: var(--hv-r-md); }
.alert-primary {
  background: var(--hv-primary-50);
  color: var(--hv-primary-700);
  border-color: var(--hv-primary-100);
}
.alert-secondary {
  background: var(--hv-bg-muted);
  color: var(--hv-ink-soft);
  border-color: var(--hv-line);
}
[data-theme="dark"] .alert-primary { color: var(--hv-gold-accent); }

/* ── List groups */
.list-group {
  background-color: var(--hv-bg-elev);
  border-color: var(--hv-line);
  border-radius: var(--hv-r-xl);
}
.list-group-item {
  background-color: var(--hv-bg-elev);
  border-color: var(--hv-line);
  color: var(--hv-ink);
}
.list-group-item.active {
  background: linear-gradient(135deg, var(--hv-gold-accent), var(--hv-gold));
  border-color: var(--hv-primary);
  color: #17130c;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--hv-bg-subtle);
  color: var(--hv-ink);
}

/* ── Breadcrumb */
.breadcrumb { color: var(--hv-ink-muted); }
.breadcrumb-item, .breadcrumb-item a { color: var(--hv-ink-muted); }
.breadcrumb-item a:hover { color: var(--hv-ink); }
.breadcrumb-item.active { color: var(--hv-ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--hv-ink-faint); }

/* ── Accordion */
.accordion {
  --bs-accordion-bg: var(--hv-bg-elev);
  --bs-accordion-border-color: var(--hv-line);
  --bs-accordion-color: var(--hv-ink);
  --bs-accordion-btn-color: var(--hv-ink);
  --bs-accordion-btn-bg: var(--hv-bg-elev);
  --bs-accordion-active-bg: var(--hv-primary-50);
  --bs-accordion-active-color: var(--hv-primary);
}
.accordion-button {
  background-color: var(--hv-bg-elev);
  color: var(--hv-ink);
}
.accordion-button:not(.collapsed) {
  background-color: var(--hv-primary-50);
  color: var(--hv-primary);
  box-shadow: inset 0 -1px 0 var(--hv-primary-100);
}
.accordion-item {
  background-color: var(--hv-bg-elev);
  border-color: var(--hv-line);
  color: var(--hv-ink);
}

/* ── Nav tabs + pills */
.nav-tabs {
  border-bottom-color: var(--hv-line);
}
.nav-tabs .nav-link {
  color: var(--hv-ink-muted);
  background-color: transparent;
  border-color: transparent;
  border-radius: 12px 12px 0 0;
}
.nav-tabs .nav-link:hover {
  border-color: var(--hv-line) var(--hv-line) transparent;
  color: var(--hv-ink);
}
.nav-tabs .nav-link.active {
  background-color: var(--hv-bg-elev);
  color: var(--hv-primary);
  border-color: var(--hv-line) var(--hv-line) var(--hv-bg-elev);
}
.nav-pills .nav-link {
  color: var(--hv-ink-soft);
  background: transparent;
}
.nav-pills .nav-link:hover {
  background: var(--hv-bg-muted);
  color: var(--hv-ink);
}
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--hv-gold-accent), var(--hv-gold));
  color: #17130c;
}

/* ── Offcanvas */
.offcanvas {
  background-color: var(--hv-bg-elev);
  color: var(--hv-ink);
  border-color: var(--hv-line);
}
.offcanvas-header, .offcanvas-footer { border-color: var(--hv-line); }

/* ── Toasts */
.toast {
  background-color: var(--hv-bg-elev);
  color: var(--hv-ink);
  border-color: var(--hv-line);
}
.toast-header { background-color: var(--hv-bg-subtle); color: var(--hv-ink); border-color: var(--hv-line); }
/* Variant toasts from main.js (text-bg-*) — re-paint for dark mode. */
[data-theme="dark"] .toast.text-bg-info    { background-color: rgba(110,168,254,.18) !important; color: #9fc5ff !important; }
[data-theme="dark"] .toast.text-bg-success { background-color: rgba(47,191,113,.18) !important; color: #73e0a4 !important; }
[data-theme="dark"] .toast.text-bg-warning { background-color: rgba(232,163,23,.18) !important; color: #f5c65b !important; }
[data-theme="dark"] .toast.text-bg-danger  { background-color: rgba(217,83,79,.18) !important; color: #f2aaa7 !important; }

/* ── Tooltips & popovers */
.tooltip-inner {
  background-color: var(--hv-ink);
  color: var(--hv-surface-solid);
  border-radius: 10px;
  box-shadow: var(--hv-shadow-lg);
}
.tooltip .tooltip-arrow::before { border-top-color: var(--hv-ink); }
.popover {
  background-color: var(--hv-bg-elev);
  border-color: var(--hv-line);
  color: var(--hv-ink);
}
.popover-header { background-color: var(--hv-bg-subtle); border-color: var(--hv-line); color: var(--hv-ink); }
.popover-body { color: var(--hv-ink); }

/* ── Form controls — extras Bootstrap ships beyond .form-control */
textarea.form-control { color: var(--hv-ink); background: var(--hv-glass-bg); }
input[type="date"].form-control, input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control, input[type="week"].form-control {
  color: var(--hv-ink); background: var(--hv-glass-bg);
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
  /* Filter inverts the native picker glyph so it shows on dark fields. */
  filter: invert(.85);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  background-color: var(--hv-bg-muted);
  color: var(--hv-ink-muted);
  opacity: .85;
}
.form-check-label { color: var(--hv-ink); }
.form-text { color: var(--hv-ink-muted); }
.input-group-text {
  background-color: var(--hv-bg-muted);
  color: var(--hv-ink-soft);
  border-color: var(--hv-line);
}

/* ── .form-select arrow — works in BOTH themes, BOTH text directions ──
   Why this is more careful than the default:
     1. Bootstrap embeds an SVG chevron that's grey; readable on light,
        almost invisible on dark. We swap the SVG by theme via data
        URIs (dark-ink for light theme, light-ink for dark theme).
     2. Bootstrap pins the arrow to `right .75rem center` (a PHYSICAL
        edge) — it never flips in RTL. We override so the chevron
        follows the LOGICAL inline-end edge of the field instead:
            LTR → arrow on the right
            RTL → arrow on the left
        Padding is reserved with logical properties so the option text
        never collides with the chevron in either direction.
     3. `background-repeat: no-repeat` is set explicitly so themed
        backgrounds never tile (some browsers default to repeat). */
.form-select {
  background-repeat: no-repeat;
  background-size: 16px 12px;
  /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23504636' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); */
  background-position: right .75rem center;
  padding-inline-start: .75rem;
  padding-inline-end: 2.25rem;
}
[dir="rtl"] .form-select {
  background-position: left .75rem center;
}
/* [data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d9d3c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
} */
/* Multi-line selects (size > 1) have no chevron — hide the background image. */
.form-select[size]:not([size="1"]), .form-select[multiple] {
  background-image: none;
  padding-inline-end: .75rem;
}

/* ── Buttons — Bootstrap outline variants (used in a few places) */
.btn-outline-primary {
  color: var(--hv-primary); border-color: var(--hv-primary);
}
.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--hv-gold-accent), var(--hv-gold));
  color: #17130c; border-color: var(--hv-primary);
  box-shadow: var(--hv-shadow-glow);
}
.btn-outline-secondary {
  color: var(--hv-ink-soft); border-color: var(--hv-line);
}
.btn-outline-secondary:hover {
  background: var(--hv-bg-muted); color: var(--hv-ink);
  border-color: var(--hv-line-strong);
}
.btn-outline-danger  { color: var(--hv-danger);  border-color: var(--hv-danger); }
.btn-outline-danger:hover  { background: var(--hv-danger); color: #fff; box-shadow: 0 12px 28px rgba(217,83,79,.18); }
.btn-outline-success { color: var(--hv-accent);  border-color: var(--hv-accent); }
.btn-outline-success:hover { background: var(--hv-accent); color: #fff; box-shadow: 0 12px 28px rgba(47,191,113,.18); }
.btn-outline-warning { color: var(--hv-warning); border-color: var(--hv-warning); }
.btn-outline-warning:hover { background: var(--hv-warning); color: #17130c; }
.btn-warning { background: var(--hv-warning); border-color: var(--hv-warning); color: #17130c; }
.btn-warning:hover { background: var(--hv-warning); border-color: var(--hv-warning); color: #17130c; filter: brightness(.98); }
.btn-success { background: var(--hv-accent); border-color: var(--hv-accent); color: #fff; }
.btn-success:hover { background: var(--hv-accent); border-color: var(--hv-accent); color: #fff; filter: brightness(.95); }
.btn-danger { background: var(--hv-danger); border-color: var(--hv-danger); color: #fff; }
.btn-danger:hover { background: var(--hv-danger); border-color: var(--hv-danger); color: #fff; filter: brightness(.95); }
.btn-close {
  filter: none;
  background-color: transparent;
}
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(2); }

/* ── Bootstrap utility classes that ignore theme tokens — fix them */
.bg-white, .bg-body { background-color: var(--hv-bg-elev) !important; }
.bg-light           { background-color: var(--hv-bg-muted) !important; }
.bg-dark            { background-color: var(--hv-ink) !important; color: var(--hv-bg-elev) !important; }
.bg-transparent     { background-color: transparent !important; }
.bg-body-tertiary   { background-color: var(--hv-bg-subtle) !important; }

.text-body          { color: var(--hv-ink) !important; }
.text-body-secondary { color: var(--hv-ink-soft) !important; }
.text-muted         { color: var(--hv-ink-muted) !important; }
.text-warning       { color: var(--hv-warning) !important; }
.text-success       { color: var(--hv-accent) !important; }
.text-danger        { color: var(--hv-danger) !important; }
.text-info          { color: var(--hv-info) !important; }
.text-primary       { color: var(--hv-primary) !important; }
.text-secondary     { color: var(--hv-ink-soft) !important; }
.text-dark          { color: var(--hv-ink) !important; }
.text-white         { color: #fff !important; }
.text-black         { color: #000 !important; }

.border             { border-color: var(--hv-line) !important; }
.border-top         { border-top-color: var(--hv-line) !important; }
.border-bottom      { border-bottom-color: var(--hv-line) !important; }
.border-start       { border-inline-start-color: var(--hv-line) !important; }
.border-end         { border-inline-end-color: var(--hv-line) !important; }

hr { color: var(--hv-line); opacity: 1; }

/* ── text-bg-* badges (Bootstrap 5.3 helpers) — theme aware variants */
.text-bg-info    { background-color: rgba(110,168,254,.16) !important; color: #285f9e !important; }
.text-bg-success { background-color: rgba(47,191,113,.14) !important; color: #127447 !important; }
.text-bg-warning { background-color: rgba(232,163,23,.18) !important; color: #7d5111 !important; }
.text-bg-danger  { background-color: rgba(217,83,79,.16)  !important; color: #9b262b !important; }
.text-bg-primary { background-color: var(--hv-primary-50) !important; color: var(--hv-primary) !important; }
.text-bg-secondary { background-color: var(--hv-bg-muted) !important; color: var(--hv-ink-soft) !important; }
[data-theme="dark"] .text-bg-info    { color: #9fc5ff !important; }
[data-theme="dark"] .text-bg-success { color: #73e0a4 !important; }
[data-theme="dark"] .text-bg-warning { color: #f5c65b !important; }
[data-theme="dark"] .text-bg-danger  { color: #f2aaa7 !important; }

/* ── Badge fallback */
.badge { border-radius: var(--hv-r-pill); font-weight: 600; }
.badge.bg-warning { background-color: var(--hv-warning) !important; color: #fff !important; }
.badge.bg-success { background-color: var(--hv-accent)  !important; color: #fff !important; }
.badge.bg-danger  { background-color: var(--hv-danger)  !important; color: #fff !important; }
.badge.bg-info    { background-color: var(--hv-info)    !important; color: #fff !important; }
.badge.bg-primary { background-color: var(--hv-primary) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--hv-bg-muted) !important; color: var(--hv-ink-soft) !important; }

/* ── Ticket internal-note highlight (replaces inline bg-warning bg-opacity-10) */
.hv-msg-internal {
  background: rgba(232,163,23,.10);
  border-inline-start: 3px solid var(--hv-warning);
}
[data-theme="dark"] .hv-msg-internal { background: rgba(232,163,23,.16); }

/* ── Charts container */
canvas { color: var(--hv-ink); }

/* ── Code / pre */
code, kbd, samp, pre {
  background-color: var(--hv-bg-muted);
  color: var(--hv-ink);
  border-radius: var(--hv-r-xs);
}
pre { padding: .65rem .85rem; }

/* ── Img/video opacity tweak — dark mode reduces glare slightly. */
[data-theme="dark"] img { filter: brightness(.92); }
[data-theme="dark"] img:hover { filter: none; }

/* ── Calendar / date utilities (used by performance pages) — already
   covered by .form-control overrides above. */

.hv-wrapper-cards .hv-main {
  margin-inline-start: 0;
}
.hv-card-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: .75rem;
}
.hv-nav-card {
  min-height: 76px;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-md);
  background: var(--hv-bg-elev);
  color: var(--hv-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  box-shadow: var(--hv-shadow-sm);
}
.hv-nav-card i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hv-primary-50);
  color: var(--hv-primary);
}
.hv-nav-card.active {
  border-color: var(--hv-primary);
  box-shadow: var(--hv-shadow-glow);
}
.hv-nav-card-static {
  background: var(--hv-bg-muted);
}
.hv-tabs, .hv-switch-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.hv-tab, .hv-switch {
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-pill);
  background: var(--hv-bg-elev);
  color: var(--hv-ink-soft);
  text-decoration: none;
  padding: .55rem .9rem;
  font-size: .9rem;
  font-weight: 600;
}
.hv-tab.active, .hv-switch.active {
  background: var(--hv-primary);
  border-color: var(--hv-primary);
  color: #17130c;
}
.campaign-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}
.campaign-category {
  margin: 0;
}
.campaign-category input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.campaign-category span {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-md);
  background: var(--hv-bg-muted);
  font-weight: 700;
  cursor: pointer;
}
.campaign-category input:checked + span {
  border-color: var(--hv-primary);
  background: var(--hv-primary-50);
  color: var(--hv-primary);
}
.campaign-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .75rem;
}
.campaign-upload-box {
  min-height: 112px;
  border: 1px dashed var(--hv-line-strong);
  border-radius: var(--hv-r-md);
  background: var(--hv-bg-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  text-align: center;
  color: var(--hv-ink-soft);
  cursor: pointer;
  padding: .8rem;
}
.campaign-upload-box input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.campaign-upload-box i {
  font-size: 1.35rem;
  color: var(--hv-primary);
}
.campaign-upload-box.is-placeholder {
  cursor: default;
}
.hv-city-display {
  min-height: 52px;
  border-radius: var(--hv-r-md);
  background: var(--hv-bg-muted);
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  font-weight: 700;
}
.campaign-history-card {
  opacity: .62;
}
.hv-alert-warning {
  border-radius: var(--hv-r-md);
  background: rgba(232,163,23,.12);
  color: var(--hv-ink);
  padding: .75rem;
}

/* Final reference-card pass: this sits after legacy appendices so the
   business/blogger shortcut navigation keeps the reference proportions. */
[data-theme="dark"] .hv-brand-logo,
[data-theme="dark"] .hv-auth-logo,
[data-theme="dark"] .hv-sidebar-brand .logo {
  filter: drop-shadow(0 0 8px rgba(245,158,11,.38));
}
.hv-card-nav {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1rem;
}
.hv-nav-card {
  min-height: 108px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .7rem;
  padding: 1.1rem;
  border-radius: 1.5rem;
  background: rgba(255,247,237,.76);
  border-color: rgba(251,146,60,.22);
  transition: transform var(--hv-duration) var(--hv-ease),
              border-color var(--hv-duration) var(--hv-ease),
              box-shadow var(--hv-duration) var(--hv-ease);
}
[data-theme="dark"] .hv-nav-card {
  background: rgba(124,45,18,.18);
  border-color: rgba(251,146,60,.20);
}
.hv-nav-card i {
  width: 48px;
  height: 48px;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  box-shadow: 0 10px 22px rgba(245,158,11,.22);
}
.hv-nav-card:nth-child(4n+2) i { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: #fff; }
.hv-nav-card:nth-child(4n+3) i { background: linear-gradient(135deg, #34d399, #14b8a6); color: #fff; }
.hv-nav-card:nth-child(4n+4) i { background: linear-gradient(135deg, #fb7185, #ec4899); color: #fff; }
.hv-nav-card span {
  font-weight: 800;
  font-size: .9rem;
}
.hv-nav-card.active {
  border-color: rgba(245,158,11,.42);
  box-shadow: 0 8px 30px rgba(234,179,8,.20);
}
.hv-nav-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,.26);
  box-shadow: 0 8px 30px rgba(234,179,8,.18);
}
.hv-nav-card-static {
  background: rgba(234,179,8,.10);
}
@media (max-width: 575.98px) {
  .hv-card-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  .hv-nav-card {
    min-height: 100px;
    padding: .95rem;
  }
}

/* ── Public landing page ──────────────────────────────────────── */
.landing-page {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(245,158,11,.10), transparent 21rem),
    linear-gradient(135deg, rgba(14,165,233,.06), transparent 28rem),
    var(--hv-bg);
  color: var(--hv-ink);
}
[data-theme="dark"] .landing-page {
  background:
    linear-gradient(180deg, rgba(245,158,11,.10), transparent 24rem),
    linear-gradient(135deg, rgba(14,165,233,.08), transparent 28rem),
    #070b12;
}
.landing-header {
  position: sticky;
  top: .75rem;
  z-index: 40;
  width: calc(100% - 2rem);
  max-width: 1120px;
  min-height: 64px;
  margin: .75rem auto 0;
  padding: .65rem .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--hv-glass-border);
  border-radius: var(--hv-r-xl);
  background: var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  box-shadow: var(--hv-shadow-md);
}
.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  color: var(--hv-ink);
  font-weight: 820;
}
.landing-brand:hover { color: var(--hv-ink); }
.landing-brand span { min-width: 0; }
.landing-brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 0 22px rgba(245,158,11,.30);
}
.landing-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.landing-nav a,
.landing-login-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 14px;
  color: var(--hv-ink-soft);
  font-weight: 720;
  font-size: .9rem;
  transition: background var(--hv-duration) var(--hv-ease),
              color var(--hv-duration) var(--hv-ease),
              transform var(--hv-duration) var(--hv-ease);
}
.landing-nav a:hover,
.landing-login-link:hover {
  color: var(--hv-ink);
  background: var(--hv-primary-50);
  transform: translateY(-1px);
}
.landing-login-link {
  border: 1px solid var(--hv-line);
  background: rgba(255,255,255,.32);
}
[data-theme="dark"] .landing-login-link { background: rgba(255,255,255,.06); }
.landing-hero,
.landing-section,
.landing-footer {
  width: calc(100% - 2rem);
  max-width: 1120px;
  margin-inline: auto;
}
.landing-hero {
  min-height: min(760px, calc(100vh - 7rem));
  padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}
.landing-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--hv-line-strong);
  border-radius: var(--hv-r-pill);
  background: var(--hv-primary-50);
  color: var(--hv-primary-700);
  font-size: .86rem;
  font-weight: 800;
  white-space: normal;
}
[data-theme="dark"] .landing-kicker { color: var(--hv-gold-accent); }
.landing-hero h1 {
  width: 100%;
  max-width: 760px;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: 1.12;
  font-weight: 900;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, var(--hv-primary-600), var(--hv-gold-accent), var(--hv-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-hero h1 span {
  display: block;
}
.landing-hero p {
  width: 100%;
  max-width: 670px;
  margin: 0;
  color: var(--hv-ink-soft);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 2;
}
.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: .5rem;
}
.landing-btn {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.25rem;
  border-radius: 18px;
  font-weight: 850;
  box-shadow: var(--hv-shadow-sm);
  transition: transform var(--hv-duration) var(--hv-ease),
              box-shadow var(--hv-duration) var(--hv-ease),
              border-color var(--hv-duration) var(--hv-ease);
}
.landing-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--hv-shadow-glow);
}
.landing-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--hv-accent), var(--hv-gold-accent));
}
.landing-btn-primary:hover { color: #fff; }
.landing-btn-secondary {
  color: var(--hv-ink);
  border: 1px solid var(--hv-line-strong);
  background: var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
}
.landing-btn-secondary:hover {
  color: var(--hv-ink);
  border-color: rgba(245,158,11,.44);
}
.landing-hero-panel {
  position: relative;
  min-height: 530px;
  border: 1px solid var(--hv-glass-border);
  border-radius: var(--hv-r-2xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.08)),
    var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  box-shadow: var(--hv-shadow-xl);
  overflow: hidden;
}
[data-theme="dark"] .landing-hero-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    var(--hv-glass-bg);
}
.landing-logo-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(72%, 350px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(245,158,11,.18);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 48px rgba(245,158,11,.12);
}
[dir="rtl"] .landing-logo-orbit { transform: translate(-50%, -50%); }
.landing-logo-orbit img {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 22px rgba(245,158,11,.42));
}
.landing-metric-card {
  position: absolute;
  width: min(215px, 48%);
  padding: 1rem;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-r-lg);
  background: rgba(255,253,248,.78);
  box-shadow: var(--hv-shadow-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .landing-metric-card {
  background: rgba(15,23,42,.76);
}
.landing-metric-card span {
  display: block;
  color: var(--hv-ink-muted);
  font-size: .78rem;
  font-weight: 740;
}
.landing-metric-card strong {
  display: block;
  color: var(--hv-ink);
  font-size: 1rem;
  margin-top: .35rem;
}
.landing-metric-card-a { top: 2rem; inset-inline-start: 2rem; border-color: rgba(14,165,233,.22); }
.landing-metric-card-b { top: 42%; inset-inline-end: 1.5rem; border-color: rgba(52,211,153,.22); }
.landing-metric-card-c { bottom: 2rem; inset-inline-start: 2.5rem; border-color: rgba(236,72,153,.22); }
.landing-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.landing-section-heading {
  max-width: 690px;
  margin: 0 auto 2rem;
  text-align: center;
}
.landing-section-heading span {
  display: inline-flex;
  margin-bottom: .75rem;
  color: var(--hv-primary-700);
  font-weight: 860;
  font-size: .88rem;
}
[data-theme="dark"] .landing-section-heading span { color: var(--hv-gold-accent); }
.landing-section-heading h2 {
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  line-height: 1.28;
  font-weight: 880;
}
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.landing-card,
.landing-flow,
.landing-contact-card {
  border: 1px solid var(--hv-glass-border);
  border-radius: var(--hv-r-xl);
  background: var(--hv-glass-bg);
  backdrop-filter: var(--hv-glass-blur);
  -webkit-backdrop-filter: var(--hv-glass-blur);
  box-shadow: var(--hv-shadow-sm);
  transition: transform var(--hv-duration) var(--hv-ease),
              border-color var(--hv-duration) var(--hv-ease),
              box-shadow var(--hv-duration) var(--hv-ease);
}
.landing-card:hover,
.landing-flow:hover,
.landing-contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,158,11,.30);
  box-shadow: var(--hv-shadow-glow);
}
.landing-card {
  min-height: 205px;
  padding: 1.2rem;
}
.landing-card i,
.landing-flow-title i,
.landing-contact-card i {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  box-shadow: 0 10px 22px rgba(245,158,11,.22);
  font-size: 1.15rem;
}
.landing-card:nth-child(3n+2) i { background: linear-gradient(135deg, #38bdf8, #3b82f6); }
.landing-card:nth-child(3n+3) i { background: linear-gradient(135deg, #34d399, #14b8a6); }
.landing-card:nth-child(5) i { background: linear-gradient(135deg, #fb7185, #ec4899); }
.landing-card h3 {
  margin-top: 1rem;
  margin-bottom: .65rem;
  font-weight: 850;
}
.landing-card p,
.landing-flow li,
.landing-contact-card span,
.landing-footer p {
  color: var(--hv-ink-soft);
  line-height: 1.9;
}
.landing-card p { margin: 0; font-size: .94rem; }
.landing-card-wide {
  grid-column: span 3;
  min-height: 0;
}
.landing-how {
  border-block: 1px solid var(--hv-line);
}
.landing-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.landing-flow {
  padding: 1.35rem;
}
.landing-flow-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--hv-ink);
  font-size: 1.1rem;
  font-weight: 880;
  margin-bottom: 1rem;
}
.landing-flow:nth-child(2) .landing-flow-title i {
  background: linear-gradient(135deg, #34d399, #14b8a6);
}
.landing-flow ol {
  margin: 0;
  padding-inline-start: 1.35rem;
}
.landing-flow li {
  padding-block: .4rem;
}
.landing-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
}
.landing-contact-card {
  min-height: 170px;
  padding: 1.25rem;
  color: var(--hv-ink);
}
.landing-contact-card:hover { color: var(--hv-ink); }
.landing-contact-card strong {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
}
.landing-contact-card span {
  display: block;
  margin-top: .35rem;
}
.landing-contact-card:first-child i { background: linear-gradient(135deg, #22c55e, #16a34a); }
.landing-contact-card:nth-child(2) i { background: linear-gradient(135deg, #fb7185, #f97316); }
.landing-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--hv-line);
}
.landing-footer-brand { margin-bottom: .65rem; }
.landing-footer p {
  max-width: 540px;
  margin: 0;
}
.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}
.landing-footer-links a {
  padding: .55rem .8rem;
  border: 1px solid var(--hv-line);
  border-radius: 14px;
  color: var(--hv-ink-soft);
  font-weight: 760;
}
.landing-footer-links a:hover {
  color: var(--hv-ink);
  border-color: var(--hv-line-strong);
  background: var(--hv-primary-50);
}

@media (max-width: 991.98px) {
  .landing-header {
    top: .5rem;
    width: calc(100% - 1rem);
    max-width: 720px;
  }
  .landing-nav { display: none; }
  .landing-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }
  .landing-hero-panel {
    min-height: 420px;
  }
  .landing-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-card-wide {
    grid-column: span 2;
  }
  .landing-footer {
    grid-template-columns: 1fr;
  }
  .landing-footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .landing-header {
    border-radius: var(--hv-r-lg);
  }
  .landing-brand span {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .landing-brand {
    gap: .45rem;
    font-size: .88rem;
  }
  .landing-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .landing-login-link {
    padding-inline: .7rem;
  }
  .landing-hero,
  .landing-section,
  .landing-footer {
    width: calc(100% - 1rem);
    max-width: 1120px;
  }
  .landing-hero-copy {
    align-items: stretch;
    text-align: center;
  }
  .landing-kicker {
    align-self: center;
    justify-content: center;
    border-radius: var(--hv-r-lg);
    font-size: .78rem;
  }
  .landing-hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.05rem);
    line-height: 1.32;
    word-break: break-word;
    padding-inline: .35rem;
  }
  .landing-hero p {
    font-size: .9rem;
    line-height: 1.9;
    padding-inline: .35rem;
  }
  .landing-cta-row,
  .landing-btn {
    width: 100%;
  }
  .landing-hero-panel {
    min-height: 230px;
  }
  .landing-logo-orbit {
    width: min(72%, 210px);
  }
  .landing-metric-card { display: none; }
  .landing-feature-grid,
  .landing-flow-grid,
  .landing-contact-grid {
    grid-template-columns: 1fr;
  }
  .landing-card,
  .landing-card-wide {
    grid-column: auto;
  }
  .landing-footer-links {
    flex-direction: column;
  }
}