/* ============================================================
   Vinted Manager — theme tokens (matches vintedmanager.com)
   Bootstrap 5.3's data-bs-theme handles base components;
   we layer brand teal + custom surfaces on top.
   ============================================================ */
:root,
[data-bs-theme="dark"] {
  --vm-brand: #00e5b3;
  --vm-brand-dim: #00c99d;
  --vm-brand-strong: #3affd0;
  --vm-brand-glow: rgba(0,229,179,.14);
  --vm-brand-glow-lg: 0 0 28px rgba(0,229,179,.18);
  --vm-brand-border: rgba(0,229,179,.28);

  --vm-bg: #05060b;
  --vm-bg-sidebar: #07080e;
  --vm-bg-topbar: rgba(8,9,15,.72);
  --vm-bg-elev: #0c0c18;
  --vm-bg-elev-1: #0d0f17;
  --vm-bg-elev-2: #131521;
  --vm-bg-inset: #03040a;
  --vm-bg-card: rgba(255,255,255,.04);
  --vm-border: rgba(255,255,255,.08);
  --vm-border-strong: rgba(255,255,255,.14);

  --vm-text: #eef0f8;
  --vm-text-muted: #8a8fab;
  --vm-text-dim: #4d5168;

  --vm-warn: #f5c842;
  --vm-warn-glow: rgba(245,200,66,.12);
  --vm-danger: #ff6b8a;
  --vm-danger-glow: rgba(255,107,138,.12);
  --vm-info: #7aa7ff;
  --vm-info-glow: rgba(122,167,255,.12);

  --vm-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02);
  --vm-shadow-md: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03);
  --vm-shadow-glow: 0 0 0 1px rgba(0,229,179,.18), 0 8px 32px rgba(0,229,179,.1);

  --vm-nav-bg: #0a0a14;
  --vm-statusbar-bg: rgba(5,5,10,.95);

  /* override Bootstrap surface tokens */
  --bs-body-bg: var(--vm-bg);
  --bs-body-color: var(--vm-text);
  --bs-secondary-bg: var(--vm-bg-elev);
  --bs-tertiary-bg: var(--vm-bg-card);
  --bs-border-color: var(--vm-border);
  --bs-emphasis-color: var(--vm-text);
  --bs-secondary-color: var(--vm-text-muted);
  --bs-tertiary-color: var(--vm-text-dim);
  --bs-link-color: var(--vm-brand);
  --bs-link-hover-color: var(--vm-brand-dim);
}

[data-bs-theme="light"] {
  --vm-brand: #00a382;
  --vm-brand-dim: #008269;
  --vm-brand-strong: #00c99d;
  --vm-brand-glow: rgba(0,163,130,.08);
  --vm-brand-glow-lg: 0 0 28px rgba(0,163,130,.10);
  --vm-brand-border: rgba(0,163,130,.32);

  --vm-bg: #f5f6fa;
  --vm-bg-sidebar: #ffffff;
  --vm-bg-topbar: rgba(255,255,255,.72);
  --vm-bg-elev: #ffffff;
  --vm-bg-elev-1: #ffffff;
  --vm-bg-elev-2: #eef0f5;
  --vm-bg-inset: #eef0f5;
  --vm-bg-card: rgba(255,255,255,.85);
  --vm-border: rgba(15,23,42,.08);
  --vm-border-strong: rgba(15,23,42,.16);

  --vm-text: #0d1b2a;
  --vm-text-muted: #5a6478;
  --vm-text-dim: #94a0b8;

  --vm-warn: #c98a00;
  --vm-warn-glow: rgba(201,138,0,.10);
  --vm-danger: #dc2c4a;
  --vm-danger-glow: rgba(220,44,74,.10);
  --vm-info: #3667c8;
  --vm-info-glow: rgba(54,103,200,.10);

  --vm-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --vm-shadow-md: 0 8px 24px rgba(15,23,42,.10);
  --vm-shadow-glow: 0 0 0 1px rgba(0,163,130,.18), 0 8px 24px rgba(0,163,130,.08);

  --vm-nav-bg: #0a0a14;
  --vm-statusbar-bg: #0a0a14;

  --bs-body-bg: var(--vm-bg);
  --bs-body-color: var(--vm-text);
  --bs-secondary-bg: var(--vm-bg-elev);
  --bs-tertiary-bg: var(--vm-bg-card);
  --bs-border-color: var(--vm-border);
  --bs-emphasis-color: var(--vm-text);
  --bs-secondary-color: var(--vm-text-muted);
  --bs-tertiary-color: var(--vm-text-dim);
  --bs-link-color: var(--vm-brand);
  --bs-link-hover-color: var(--vm-brand-dim);
}

:root {
  --vm-radius-sm: 6px;
  --vm-radius-md: 10px;
  --vm-radius-lg: 14px;
  --vm-radius-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 64px;

  --vm-font-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --vm-font-body: "General Sans", "Inter", system-ui, -apple-system, sans-serif;
  --vm-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

/* smooth theme transitions when user toggles */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

body { background: var(--vm-bg); color: var(--vm-text); }

/* ============================================================
   Navbar — always dark with brand-teal accents (matches site)
   ============================================================ */
.navbar.navbar-dark.bg-dark,
.navbar.bg-dark {
  background: var(--vm-nav-bg) !important;
  border-bottom: 1px solid var(--vm-border-strong);
}
.navbar-brand i.bi-tags-fill { color: var(--vm-brand) !important; }
.navbar .btn-success { background: var(--vm-brand); border-color: var(--vm-brand); color: #05050a; font-weight: 600; }
.navbar .btn-success:hover { background: var(--vm-brand-dim); border-color: var(--vm-brand-dim); color: #05050a; }
.navbar .btn-outline-light { border-color: rgba(255,255,255,.18); color: #eeeef8; }
.navbar .btn-outline-light:hover { background: var(--vm-brand-glow); border-color: var(--vm-brand-border); color: var(--vm-brand); }

/* Theme toggle button in navbar */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #eeeef8;
  width: 34px; height: 34px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}
.theme-toggle:hover { background: var(--vm-brand-glow); border-color: var(--vm-brand-border); color: var(--vm-brand); }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: none; }

/* ============================================================
   Cards / surfaces (Bootstrap-themed but with extra polish)
   ============================================================ */
.card { background: var(--vm-bg-elev); border-color: var(--vm-border); }
[data-bs-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.4); }
[data-bs-theme="light"] .card { box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.card-header { background: transparent; border-bottom-color: var(--vm-border); }

/* Alerts adapt for dark mode (Bootstrap doesn't fully) */
[data-bs-theme="dark"] .alert-success { background: rgba(0,229,179,.08); border-color: rgba(0,229,179,.25); color: #6ff0ce; }
[data-bs-theme="dark"] .alert-warning { background: rgba(245,200,50,.08); border-color: rgba(245,200,50,.25); color: #f5c842; }
[data-bs-theme="dark"] .alert-danger  { background: rgba(255,80,80,.08); border-color: rgba(255,80,80,.25); color: #ff8a8a; }
[data-bs-theme="dark"] .alert-info    { background: rgba(80,160,255,.08); border-color: rgba(80,160,255,.25); color: #8db9ff; }
[data-bs-theme="dark"] .alert-secondary { background: var(--vm-bg-card); border-color: var(--vm-border); color: var(--vm-text-muted); }

/* Tables */
.table { color: var(--vm-text); --bs-table-bg: transparent; --bs-table-border-color: var(--vm-border); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background: rgba(255,255,255,.03); color: var(--vm-text); }

/* Forms */
.form-control, .form-select {
  background: var(--vm-bg-elev);
  border-color: var(--vm-border);
  color: var(--vm-text);
}
.form-control:focus, .form-select:focus {
  background: var(--vm-bg-elev);
  border-color: var(--vm-brand);
  color: var(--vm-text);
  box-shadow: 0 0 0 .2rem var(--vm-brand-glow);
}
.form-control::placeholder { color: var(--vm-text-dim); }

/* Modals */
.modal-content { background: var(--vm-bg-elev); border: 1px solid var(--vm-border-strong); }
.modal-header { border-bottom-color: var(--vm-border); }
.modal-footer { border-top-color: var(--vm-border); }

/* Badges */
.badge.bg-success { background-color: var(--vm-brand) !important; color: #05050a; }
.badge.bg-secondary { background-color: var(--vm-bg-card) !important; color: var(--vm-text-muted); border: 1px solid var(--vm-border); }

/* Bottom status bar — always dark like site footer */
#status-bar {
  background: var(--vm-statusbar-bg) !important;
  border-top: 1px solid var(--vm-border-strong) !important;
  color: #eeeef8;
}

/* Buttons brand recolor */
.btn-success { background: var(--vm-brand); border-color: var(--vm-brand); color: #05050a; font-weight: 600; }
.btn-success:hover { background: var(--vm-brand-dim); border-color: var(--vm-brand-dim); color: #05050a; }
.btn-primary { background: var(--vm-brand); border-color: var(--vm-brand); color: #05050a; font-weight: 600; }
.btn-primary:hover { background: var(--vm-brand-dim); border-color: var(--vm-brand-dim); color: #05050a; }
.btn-outline-primary { color: var(--vm-brand); border-color: var(--vm-brand); }
.btn-outline-primary:hover { background: var(--vm-brand); border-color: var(--vm-brand); color: #05050a; }
.btn-outline-success { color: var(--vm-brand); border-color: var(--vm-brand); }
.btn-outline-success:hover { background: var(--vm-brand); border-color: var(--vm-brand); color: #05050a; }

/* Listing cards (dashboard) */
.listing-card { transition: transform .15s, box-shadow .15s, border-color .15s; cursor: pointer; }
.listing-card:hover { transform: translateY(-2px); border-color: var(--vm-brand-border); }
[data-bs-theme="dark"] .listing-card:hover { box-shadow: 0 4px 16px rgba(0,229,179,.1) !important; }
[data-bs-theme="light"] .listing-card:hover { box-shadow: 0 4px 12px rgba(15,23,42,.12) !important; }

.listing-thumb { height: 180px; object-fit: cover; }
.listing-thumb-placeholder { height: 180px; background: var(--vm-bg-card); }
.listing-thumb-sm { width: 80px; height: 80px; object-fit: cover; }
.preview-thumb { width: 90px; height: 90px; object-fit: cover; }

/* Dropzone */
.dropzone-area {
  border-color: var(--vm-border-strong) !important;
  background: var(--vm-bg-card);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.dropzone-area:hover, .dropzone-area.drag-over {
  background: var(--vm-brand-glow);
  border-color: var(--vm-brand) !important;
}
.border-dashed { border-style: dashed !important; }

/* Photo grid items */
.photo-item img { border: 1px solid var(--vm-border); }

/* Code blocks (publish log) */
pre, code { color: var(--vm-text); }

/* Text helpers */
.text-muted { color: var(--vm-text-muted) !important; }
.text-dim { color: var(--vm-text-dim) !important; }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vm-bg); }
::-webkit-scrollbar-thumb { background: var(--vm-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vm-text-muted); }


/* ================================================================
   ────────────────────────────────────────────────────────────────
   NEW DESIGN SYSTEM (SaaS rebuild) — sidebar shell, KPI cards,
   data tables, panels, badges, charts, empty states.
   Everything below is additive; old styles above remain so
   not-yet-rewritten pages keep rendering.
   ────────────────────────────────────────────────────────────────
   ================================================================ */

body {
  font-family: var(--vm-font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6,.vm-display { font-family: var(--vm-font-display); letter-spacing: -.01em; }
.vm-num { font-family: var(--vm-font-mono); font-feature-settings: "tnum","ss01"; letter-spacing: -.01em; }
.vm-mono { font-family: var(--vm-font-mono); }

/* ----------------------------------------------------------------
   App shell: sidebar + topbar + main
   ---------------------------------------------------------------- */
body.vm-shell { background: var(--vm-bg); }
.vm-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
body.vm-sidebar-collapsed .vm-app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* Sidebar -------------------------------------------------------- */
.vm-sidebar {
  grid-area: sidebar;
  background: var(--vm-bg-sidebar);
  border-right: 1px solid var(--vm-border-strong);
  color: var(--vm-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1040;
}
.vm-sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 18px 18px;
  font-family: var(--vm-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--vm-text);
  text-decoration: none;
  border-bottom: 1px solid var(--vm-border);
}
.vm-sidebar__brand:hover { color: var(--vm-text); }
.vm-sidebar__brand .vm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vm-brand);
  box-shadow: 0 0 12px var(--vm-brand);
  animation: vm-pulse 2.4s infinite ease-in-out;
}
@keyframes vm-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}
.vm-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 10px;
}
.vm-sidebar__nav::-webkit-scrollbar { width: 4px; }
.vm-sidebar__group-label {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vm-text-dim);
  font-weight: 600;
  padding: 14px 12px 6px;
  font-family: var(--vm-font-display);
}
.vm-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--vm-radius-sm);
  font-size: 13.5px;
  color: var(--vm-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
  position: relative;
}
.vm-nav-item .bi { font-size: 16px; opacity: .85; width: 18px; text-align: center; }
[data-bs-theme="dark"] .vm-nav-item:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.95); }
[data-bs-theme="light"] .vm-nav-item:hover { background: rgba(0,0,0,.04); color: var(--vm-text); }
.vm-nav-item.is-active {
  background: linear-gradient(90deg, rgba(0,229,179,.12), rgba(0,229,179,.04) 60%, transparent);
  color: var(--vm-brand);
}
.vm-nav-item.is-active::before {
  content: "";
  position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px;
  background: var(--vm-brand);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--vm-brand);
}
.vm-nav-item.is-active .bi { opacity: 1; }
.vm-nav-item__badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--vm-font-mono);
}
.vm-nav-item__pill {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.48);
  padding: 2px 6px;
  border-radius: var(--vm-radius-pill);
  font-weight: 600;
}
.vm-sidebar__footer {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.vm-session-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--vm-radius-sm);
  background: rgba(255,255,255,.03);
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
}
.vm-session-chip .vm-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vm-brand);
  box-shadow: 0 0 6px var(--vm-brand);
}
.vm-session-chip.is-stale .vm-dot { background: var(--vm-warn); box-shadow: 0 0 6px var(--vm-warn); }
.vm-session-chip.is-dead .vm-dot { background: var(--vm-danger); box-shadow: 0 0 6px var(--vm-danger); animation: none; }
.vm-wallet-chip {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border-radius: var(--vm-radius-md);
  background: linear-gradient(135deg, rgba(0,229,179,.08), rgba(0,229,179,.02));
  border: 1px solid var(--vm-brand-border);
  text-decoration: none;
  color: var(--vm-text);
}
.vm-wallet-chip:hover { background: linear-gradient(135deg, rgba(0,229,179,.14), rgba(0,229,179,.04)); color: var(--vm-text); }
.vm-wallet-chip__label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--vm-text-muted); font-family: var(--vm-font-display); font-weight: 600; }
.vm-wallet-chip__amount { font-family: var(--vm-font-mono); font-size: 18px; font-weight: 600; color: var(--vm-brand); font-feature-settings: "tnum"; line-height: 1.1; }
.vm-wallet-chip__escrow { font-size: 11px; color: var(--vm-text-muted); font-family: var(--vm-font-mono); }

/* Topbar --------------------------------------------------------- */
.vm-topbar {
  grid-area: topbar;
  background: var(--vm-bg-topbar);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vm-border);
  padding: 0 28px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 1030;
}
.vm-topbar__title {
  font-family: var(--vm-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--vm-text);
  letter-spacing: -.01em;
}
.vm-topbar__subtitle {
  color: var(--vm-text-muted);
  font-size: 12px;
  margin-top: 1px;
}
.vm-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vm-listing-page .vm-main { min-width: 0; }
@media (max-width: 992px) {
  .vm-listing-page .vm-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .vm-listing-page .vm-topbar { flex-wrap: wrap; padding: 12px 18px; }
  .vm-listing-page .vm-topbar > div:not(.vm-topbar__actions) { flex: 1; min-width: 0; }
  .vm-listing-page .vm-topbar__title { overflow-wrap: anywhere; }
  .vm-listing-page .vm-topbar__actions { flex: 1 0 100%; flex-wrap: wrap; margin-left: 0; }
  .vm-listing-page #btn-publish-browser { flex: 1; min-width: 150px; }
  .vm-listing-page .vm-publish-fallbacks { max-width: 100%; }
}
.vm-topbar__toggle {
  background: transparent; border: 0; padding: 8px;
  color: var(--vm-text-muted);
  display: none;
  font-size: 18px;
}

/* Main ----------------------------------------------------------- */
.vm-main {
  grid-area: main;
  padding: 24px 28px 64px;
  max-width: 1500px;
  width: 100%;
}

/* ----------------------------------------------------------------
   KPI cards
   ---------------------------------------------------------------- */
.vm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1280px) { .vm-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .vm-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .vm-kpi-grid { grid-template-columns: 1fr; } }

.vm-kpi {
  position: relative;
  background: var(--vm-bg-elev-1);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  padding: 16px 16px 14px;
  box-shadow: var(--vm-shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vm-kpi::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, var(--vm-brand-glow), transparent 60%);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.vm-kpi:hover { border-color: var(--vm-brand-border); }
.vm-kpi:hover::after { opacity: 1; }
.vm-kpi.is-accent::after { opacity: .6; }
.vm-kpi__head { display: flex; align-items: center; justify-content: space-between; }
.vm-kpi__label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vm-text-muted);
  font-family: var(--vm-font-display);
  font-weight: 600;
}
.vm-kpi__icon {
  width: 28px; height: 28px;
  border-radius: var(--vm-radius-sm);
  background: rgba(0,229,179,.1);
  color: var(--vm-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.vm-kpi.is-warn .vm-kpi__icon { background: var(--vm-warn-glow); color: var(--vm-warn); }
.vm-kpi.is-info .vm-kpi__icon { background: var(--vm-info-glow); color: var(--vm-info); }
.vm-kpi.is-danger .vm-kpi__icon { background: var(--vm-danger-glow); color: var(--vm-danger); }
.vm-kpi__value {
  font-family: var(--vm-font-mono);
  font-feature-settings: "tnum";
  font-size: 26px;
  font-weight: 600;
  color: var(--vm-text);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.vm-kpi__value .vm-cur { color: var(--vm-text-muted); font-size: 14px; margin-right: 3px; }
.vm-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-family: var(--vm-font-mono);
  color: var(--vm-text-muted);
}
.vm-kpi__delta.is-up { color: var(--vm-brand); }
.vm-kpi__delta.is-down { color: var(--vm-danger); }
.vm-kpi__spark {
  height: 28px;
  margin: 6px -16px -14px;
  opacity: .55;
}

/* ----------------------------------------------------------------
   Cards / panels
   ---------------------------------------------------------------- */
.vm-card {
  background: var(--vm-bg-elev-1);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  box-shadow: var(--vm-shadow-sm);
}
.vm-card.is-glow { box-shadow: var(--vm-shadow-glow); }
.vm-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--vm-border);
}
.vm-card__title {
  font-family: var(--vm-font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--vm-text);
  margin: 0;
}
.vm-card__count {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-family: var(--vm-font-mono);
  color: var(--vm-text-muted);
  font-weight: 600;
}
.vm-card__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.vm-card__body { padding: 14px 18px; }
.vm-card__body.is-flush { padding: 0; }

.vm-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .vm-panel-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------
   Status badge
   ---------------------------------------------------------------- */
.vm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  letter-spacing: .04em;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--vm-radius-pill);
  border: 1px solid transparent;
  font-family: var(--vm-font-display);
  text-transform: uppercase;
  white-space: nowrap;
}
.vm-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .9;
}
.vm-badge.is-success { color: var(--vm-brand); background: var(--vm-brand-glow); border-color: var(--vm-brand-border); }
.vm-badge.is-warn    { color: var(--vm-warn); background: var(--vm-warn-glow); border-color: rgba(245,200,66,.28); }
.vm-badge.is-danger  { color: var(--vm-danger); background: var(--vm-danger-glow); border-color: rgba(255,107,138,.28); }
.vm-badge.is-info    { color: var(--vm-info); background: var(--vm-info-glow); border-color: rgba(122,167,255,.28); }
.vm-badge.is-muted   { color: var(--vm-text-muted); background: rgba(255,255,255,.04); border-color: var(--vm-border); }
[data-bs-theme="light"] .vm-badge.is-muted { background: rgba(15,23,42,.05); }

/* ----------------------------------------------------------------
   Data tables
   ---------------------------------------------------------------- */
.vm-table-wrap { overflow-x: auto; }
.vm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.vm-table thead th {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vm-text-muted);
  font-family: var(--vm-font-display);
  text-align: left;
  padding: 10px 14px;
  background: var(--vm-bg-elev-2);
  border-bottom: 1px solid var(--vm-border);
  position: sticky; top: 0; z-index: 1;
}
.vm-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--vm-border);
  color: var(--vm-text);
  vertical-align: middle;
}
.vm-table tbody tr:last-child td { border-bottom: 0; }
.vm-table tbody tr { transition: background .12s ease; }
.vm-table tbody tr:hover td { background: rgba(255,255,255,.025); }
[data-bs-theme="light"] .vm-table tbody tr:hover td { background: rgba(15,23,42,.025); }
.vm-table .vm-thumb {
  width: 44px; height: 44px;
  border-radius: var(--vm-radius-sm);
  object-fit: cover;
  background: var(--vm-bg-inset);
  border: 1px solid var(--vm-border);
}
.vm-table__title { font-weight: 600; color: var(--vm-text); text-decoration: none; }
.vm-table__title:hover { color: var(--vm-brand); }
.vm-table__meta { font-size: 11.5px; color: var(--vm-text-muted); margin-top: 2px; }
.vm-table .vm-num { color: var(--vm-text); }

/* ----------------------------------------------------------------
   Activity row (compact rows for offers, sales, notifications)
   ---------------------------------------------------------------- */
.vm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vm-border);
  transition: background .12s ease;
  text-decoration: none;
  color: var(--vm-text);
}
.vm-row:last-child { border-bottom: 0; }
.vm-row:hover { background: rgba(255,255,255,.02); color: var(--vm-text); }
[data-bs-theme="light"] .vm-row:hover { background: rgba(15,23,42,.025); }
.vm-row__thumb {
  width: 38px; height: 38px;
  border-radius: var(--vm-radius-sm);
  object-fit: cover;
  background: var(--vm-bg-inset);
  flex: 0 0 38px;
  border: 1px solid var(--vm-border);
}
.vm-row__icon-thumb {
  width: 38px; height: 38px;
  border-radius: var(--vm-radius-sm);
  background: var(--vm-bg-inset);
  border: 1px solid var(--vm-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--vm-text-muted);
  flex: 0 0 38px;
}
.vm-row__main { flex: 1 1 auto; min-width: 0; }
.vm-row__title { font-size: 13px; font-weight: 600; color: var(--vm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-row__meta { font-size: 11.5px; color: var(--vm-text-muted); margin-top: 2px; }
.vm-row__trailing { flex: 0 0 auto; text-align: right; font-size: 12px; }

/* ----------------------------------------------------------------
   Empty state
   ---------------------------------------------------------------- */
.vm-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--vm-text-muted);
}
.vm-empty__icon {
  font-size: 28px;
  color: var(--vm-text-dim);
  margin-bottom: 8px;
}
.vm-empty__title { font-family: var(--vm-font-display); font-weight: 600; color: var(--vm-text); margin-bottom: 4px; }
.vm-empty__body { font-size: 13px; margin-bottom: 14px; }

/* ----------------------------------------------------------------
   Page header / actions (inside topbar children)
   ---------------------------------------------------------------- */
.vm-page-actions .btn {
  font-weight: 600;
  border-radius: var(--vm-radius-sm);
}
.vm-btn-icon {
  background: transparent;
  color: var(--vm-text-muted);
  border: 1px solid var(--vm-border);
  width: 34px; height: 34px;
  border-radius: var(--vm-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.vm-btn-icon:hover { color: var(--vm-brand); border-color: var(--vm-brand-border); background: var(--vm-brand-glow); }

/* ----------------------------------------------------------------
   Chart card body
   ---------------------------------------------------------------- */
.vm-chart-wrap { position: relative; height: 280px; padding: 8px 4px 0; }
.vm-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.vm-chart-range {
  display: inline-flex;
  background: var(--vm-bg-inset);
  border-radius: var(--vm-radius-sm);
  padding: 2px;
  border: 1px solid var(--vm-border);
}
.vm-chart-range button {
  background: transparent; border: 0;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  color: var(--vm-text-muted);
  font-family: var(--vm-font-display);
}
.vm-chart-range button.is-active { background: var(--vm-bg-elev-1); color: var(--vm-text); box-shadow: var(--vm-shadow-sm); }

/* ----------------------------------------------------------------
   Live ticker (Overview only — sits above KPI grid)
   ---------------------------------------------------------------- */
.vm-ticker {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--vm-bg-elev-1);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  margin-bottom: 16px;
  overflow: hidden;
}
.vm-ticker__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vm-text-muted);
  font-family: var(--vm-font-display);
  font-weight: 600;
  flex: 0 0 auto;
}
.vm-ticker__label .vm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vm-brand); box-shadow: 0 0 8px var(--vm-brand); }
.vm-ticker__rail {
  flex: 1 1 auto;
  overflow-x: auto;
  white-space: nowrap;
  display: flex; gap: 18px;
  font-size: 12.5px;
  color: var(--vm-text-muted);
  scrollbar-width: none;
}
.vm-ticker__rail::-webkit-scrollbar { display: none; }
.vm-ticker__item {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  color: var(--vm-text);
}
.vm-ticker__item:hover { color: var(--vm-brand); }
.vm-ticker__item .vm-num { color: var(--vm-text); }

/* ----------------------------------------------------------------
   Offer card (Offers page + dashboard panel)
   ---------------------------------------------------------------- */
.vm-offer {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--vm-bg-elev-1);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-md);
  padding: 14px;
  transition: border-color .12s ease;
}
.vm-offer:hover { border-color: var(--vm-brand-border); }
.vm-offer__head { display: flex; align-items: center; gap: 10px; }
.vm-offer__buyer { font-weight: 600; font-size: 13px; }
.vm-offer__price-row { display: flex; align-items: baseline; gap: 8px; font-family: var(--vm-font-mono); }
.vm-offer__offer { font-size: 22px; font-weight: 600; color: var(--vm-brand); }
.vm-offer__list { font-size: 13px; color: var(--vm-text-muted); text-decoration: line-through; }
.vm-offer__delta { font-size: 11px; padding: 2px 6px; border-radius: var(--vm-radius-pill); background: var(--vm-danger-glow); color: var(--vm-danger); font-family: var(--vm-font-mono); }
.vm-offer__item { font-size: 12.5px; color: var(--vm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-offer__actions { display: flex; gap: 6px; }
.vm-offer__actions .btn { flex: 1; }

/* ----------------------------------------------------------------
   Forms (overrides for new system — inputs sit on inset)
   ---------------------------------------------------------------- */
.vm-input, .vm-select, .vm-textarea {
  width: 100%;
  background: var(--vm-bg-inset);
  border: 1px solid var(--vm-border);
  color: var(--vm-text);
  border-radius: var(--vm-radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vm-input:focus, .vm-select:focus, .vm-textarea:focus {
  outline: 0;
  border-color: var(--vm-brand);
  box-shadow: 0 0 0 3px var(--vm-brand-glow);
}

/* ----------------------------------------------------------------
   Filter pills (status filters above tables)
   ---------------------------------------------------------------- */
.vm-pills { display: flex; gap: 4px; padding: 2px; background: var(--vm-bg-inset); border: 1px solid var(--vm-border); border-radius: var(--vm-radius-sm); align-self: flex-start; }
.vm-pill {
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vm-text-muted);
  font-family: var(--vm-font-display);
  transition: all .12s ease;
  border: 0; background: transparent;
}
.vm-pill:hover { color: var(--vm-text); }
.vm-pill.is-active,
.btn-check:checked + .vm-pill { background: var(--vm-bg-elev-1); color: var(--vm-text); box-shadow: var(--vm-shadow-sm); }

/* ----------------------------------------------------------------
   Score badge (search-match AI score)
   ---------------------------------------------------------------- */
.vm-score {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--vm-font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--vm-radius-pill);
  background: var(--vm-bg-elev-2);
  border: 1px solid var(--vm-border);
  color: var(--vm-text-muted);
}
.vm-score.is-high { background: var(--vm-brand-glow); color: var(--vm-brand); border-color: var(--vm-brand-border); }
.vm-score.is-mid { background: var(--vm-warn-glow); color: var(--vm-warn); border-color: rgba(245,200,66,.24); }

/* ----------------------------------------------------------------
   Tabs (settings, notifications)
   ---------------------------------------------------------------- */
.vm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--vm-border); margin-bottom: 18px; }
.vm-tab {
  background: transparent; border: 0;
  padding: 10px 16px;
  font-family: var(--vm-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--vm-text-muted);
  cursor: pointer;
  position: relative;
  transition: color .12s ease;
}
.vm-tab:hover { color: var(--vm-text); }
.vm-tab.is-active { color: var(--vm-text); }
.vm-tab.is-active::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--vm-brand);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--vm-brand);
}
.vm-tab__count {
  margin-left: 6px;
  background: var(--vm-bg-inset);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius-pill);
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--vm-font-mono);
}

/* ----------------------------------------------------------------
   Buttons (modernized; existing Bootstrap btn-* still work)
   ---------------------------------------------------------------- */
.vm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--vm-radius-sm);
  font-family: var(--vm-font-display);
  font-weight: 600;
  font-size: 12.5px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s ease;
  background: var(--vm-bg-inset);
  color: var(--vm-text);
}
.vm-btn:hover { color: var(--vm-text); background: var(--vm-bg-elev-2); }
.vm-btn.is-primary { background: var(--vm-brand); color: #05060b; border-color: var(--vm-brand); }
.vm-btn.is-primary:hover { background: var(--vm-brand-strong); border-color: var(--vm-brand-strong); color: #05060b; }
.vm-btn.is-ghost { background: transparent; border-color: var(--vm-border); color: var(--vm-text-muted); }
.vm-btn.is-ghost:hover { color: var(--vm-text); border-color: var(--vm-border-strong); background: var(--vm-bg-inset); }
.vm-btn.is-danger { background: transparent; border-color: rgba(255,107,138,.3); color: var(--vm-danger); }
.vm-btn.is-danger:hover { background: var(--vm-danger-glow); }
.vm-btn.is-sm { padding: 4px 10px; font-size: 11.5px; }

/* ----------------------------------------------------------------
   Page header (inside main, below topbar — used when topbar
   blocks aren't enough)
   ---------------------------------------------------------------- */
.vm-page-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px; gap: 16px; flex-wrap: wrap;
}
.vm-page-heading h2 {
  font-family: var(--vm-font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.vm-page-heading p { color: var(--vm-text-muted); font-size: 13px; margin: 4px 0 0; }

/* ----------------------------------------------------------------
   Mobile responsive
   ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .vm-main { padding: 20px 18px 64px; }
  .vm-topbar { padding: 0 18px; }
}
@media (max-width: 992px) {
  .vm-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .vm-topbar__toggle { display: inline-flex; }
  .vm-sidebar {
    position: fixed;
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: var(--sidebar-w);
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0);
  }
  body.vm-sidebar-open .vm-sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.5); }
}
@media (max-width: 640px) {
  .vm-kpi__value { font-size: 22px; }
  .vm-page-heading h2 { font-size: 17px; }
}

/* ----------------------------------------------------------------
   Misc helpers
   ---------------------------------------------------------------- */
.vm-divider { height: 1px; background: var(--vm-border); margin: 24px 0; }
.vm-spacer-sm { height: 12px; }
.vm-spacer { height: 24px; }
.vm-tag-money { font-family: var(--vm-font-mono); color: var(--vm-brand); font-weight: 600; }
.vm-tag-money-strike { font-family: var(--vm-font-mono); color: var(--vm-text-muted); text-decoration: line-through; }
.vm-meta-row { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--vm-text-muted); }
.vm-meta-row .bi { margin-right: 3px; opacity: .8; }

/* ----------------------------------------------------------------
   Auth pages (login / register) — match landing-page hero (grid + orbs)
   ---------------------------------------------------------------- */
.vm-auth {
  position: relative;
  min-height: 100vh;
  background: var(--vm-bg);
  overflow: hidden;
}
/* Use position: fixed for the decorative layers so they're viewport-relative
   and never extend the document height (was causing a 3x-tall body before). */
.vm-auth__bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.vm-auth__bg--grid {
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at center, #000 10%, transparent 95%);
          mask-image: radial-gradient(ellipse 90% 80% at center, #000 10%, transparent 95%);
}
[data-bs-theme="light"] .vm-auth__bg--grid {
  background-image:
    linear-gradient(rgba(15,23,42,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.08) 1px, transparent 1px);
}
.vm-auth__orb {
  position: fixed; border-radius: 50%;
  filter: blur(100px); pointer-events: none; z-index: 0;
}
.vm-auth__wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  min-height: 100vh; padding: 24px;
}
.vm-auth__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--vm-text-muted); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid transparent;
  transition: all .15s ease;
}
.vm-auth__back:hover {
  color: var(--vm-brand);
  border-color: var(--vm-brand-border);
  background: var(--vm-brand-glow);
}
.vm-auth__back .bi { font-size: 14px; transition: transform .15s ease; }
.vm-auth__back:hover .bi { transform: translateX(-2px); }
.vm-auth__card {
  width: 100%; max-width: 400px;
  background: rgba(12, 12, 24, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--vm-border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,229,179,.05);
}
.vm-auth__card--wide { max-width: 480px; }   /* register form has 5 fields → roomier */
[data-bs-theme="light"] .vm-auth__card {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 60px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.04);
}
.vm-auth__brand { display: flex; align-items: center; gap: 8px; font-family: var(--vm-font-display); font-weight: 600; color: var(--vm-text-muted); margin-bottom: 24px; font-size: 13px; letter-spacing: .04em; text-decoration: none !important; }
.vm-auth__brand:hover, .vm-auth__brand:visited { color: var(--vm-text); text-decoration: none !important; }
.vm-auth__brand .vm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vm-brand); box-shadow: 0 0 8px var(--vm-brand); }
.vm-auth__title { font-family: var(--vm-font-display); font-size: 24px; font-weight: 600; color: var(--vm-text); margin: 0 0 6px; }
.vm-auth__subtitle { color: var(--vm-text-muted); font-size: 13px; margin-bottom: 22px; }
.vm-auth__form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.vm-auth__foot { font-size: 13px; color: var(--vm-text-muted); text-align: center; padding-top: 14px; border-top: 1px solid var(--vm-border); }
.vm-auth__foot a { color: var(--vm-brand); text-decoration: none; font-weight: 600; }
.vm-auth__foot a:hover { text-decoration: underline; }

/* Form primitives shared with other pages */
.vm-form { display: flex; flex-direction: column; gap: 14px; }
.vm-field { display: flex; flex-direction: column; gap: 6px; }
.vm-field__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--vm-text-muted); font-weight: 600;
}
.vm-field__req {
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vm-brand); font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
  background: var(--vm-brand-glow); border: 1px solid var(--vm-brand-border);
}
.vm-field__hint {
  font-size: 11.5px; line-height: 1.45; color: var(--vm-text-muted); font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
.vm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .vm-field-row { grid-template-columns: 1fr; } }
.vm-mt-1 { margin-top: 4px; }

.vm-pw-meter { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.vm-pw-meter__bar { flex: 1; height: 4px; background: var(--vm-bg-inset); border-radius: 999px; overflow: hidden; }
.vm-pw-meter__bar > span {
  display: block; height: 100%; width: 0%; background: var(--vm-text-muted);
  transition: width .2s ease, background .2s ease;
}
.vm-pw-meter__label { font-size: 11px; color: var(--vm-text-muted); white-space: nowrap; min-width: 90px; text-align: right; }
.vm-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; border: 1px solid transparent; }
.vm-alert.is-danger { background: var(--vm-danger-glow); border-color: rgba(255,107,138,.3); color: var(--vm-danger); }
.vm-alert.is-success { background: rgba(0,229,179,.12); border-color: rgba(0,229,179,.3); color: var(--vm-brand); }
.vm-alert.is-warn { background: var(--vm-warn-glow); border-color: rgba(245,200,66,.3); color: var(--vm-warn); }

/* ----------------------------------------------------------------
   Admin tables
   ---------------------------------------------------------------- */
.vm-admin-page .vm-card { padding: 0; }
.vm-admin-tablewrap { overflow-x: auto; }   /* responsive scroll, no clipping */

.vm-admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--vm-text);
  font-size: 13px;
  min-width: 940px;                          /* prevents super-cramped columns */
}
.vm-admin-table thead th {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--vm-text-muted); font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  background: var(--vm-bg-inset);
  border-bottom: 1px solid var(--vm-border);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.vm-admin-table tbody td {
  padding: 14px;                              /* breathing room */
  border-bottom: 1px solid var(--vm-border);
  vertical-align: middle;
}
.vm-admin-table tbody tr:last-child td { border-bottom: 0; }
.vm-admin-table tbody tr:hover td { background: var(--vm-bg-elev-2); }
.vm-admin-table .text-end { text-align: right; }

/* Column hints */
.vm-col-id      { width: 48px; }
.vm-col-num     { width: 96px; white-space: nowrap; }
.vm-col-actions { width: 1%; white-space: nowrap; }   /* shrink-wrap to icons */

/* Per-cell helpers */
.vm-user-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vm-user-cell__name { font-weight: 600; color: var(--vm-text); }
.vm-user-cell__email { font-size: 11.5px; color: var(--vm-text-muted); margin-top: 4px; }
.vm-meta { font-size: 11.5px; color: var(--vm-text-muted); margin-top: 3px; line-height: 1.35; }
.vm-meta--err { color: var(--vm-danger); }
.vm-num { font-family: var(--vm-font-mono); font-weight: 600; font-size: 13.5px; }
.vm-trunc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline icon-button row (replaces clipped dropdown) */
.vm-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.vm-inline-form { display: inline-block; margin: 0; }
.vm-row-actions .vm-btn-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--vm-text-muted);
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; transition: all .12s ease;
}
.vm-row-actions .vm-btn-icon:hover {
  color: var(--vm-text);
  background: var(--vm-bg-inset);
  border-color: var(--vm-border);
}
.vm-row-actions .vm-btn-icon.is-warn-active { color: var(--vm-warn); }
.vm-row-actions .vm-btn-icon.is-warn-active:hover { background: var(--vm-warn-glow); border-color: rgba(245,200,66,.3); }
.vm-row-actions .vm-btn-icon.is-danger-active { color: var(--vm-danger); }
.vm-row-actions .vm-btn-icon.is-danger-active:hover { background: var(--vm-danger-glow); border-color: rgba(255,107,138,.3); }

.vm-badge.is-muted { background: rgba(255,255,255,.05); color: var(--vm-text-muted); border: 1px solid var(--vm-border); }
[data-bs-theme="light"] .vm-badge.is-muted { background: rgba(15,23,42,.05); }

/* ----------------------------------------------------------------
   Admin: nav pills, contact list, select
   ---------------------------------------------------------------- */
.vm-admin-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.vm-admin-nav .vm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--vm-bg-elev); border: 1px solid var(--vm-border);
  color: var(--vm-text-muted); font-size: 12.5px; font-weight: 500;
  text-decoration: none; transition: all .12s ease;
}
.vm-admin-nav .vm-pill:hover { color: var(--vm-text); border-color: var(--vm-brand-border); }
.vm-admin-nav .vm-pill__count {
  background: var(--vm-bg-inset); padding: 1px 8px; border-radius: 999px;
  font-family: var(--vm-font-mono); font-size: 11px; color: var(--vm-text);
}

.vm-select {
  background: var(--vm-bg-inset); border: 1px solid var(--vm-border);
  color: var(--vm-text); border-radius: 6px;
  padding: 5px 28px 5px 10px;
  font-size: 12px; font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.vm-select-sm { font-size: 11.5px; padding: 4px 24px 4px 9px; }

.vm-contact-list { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.vm-contact-item {
  background: var(--vm-bg-elev); border: 1px solid var(--vm-border);
  border-radius: 8px; padding: 14px 16px;
}
.vm-contact-item.is-new { border-color: rgba(245,200,66,.35); background: var(--vm-warn-glow); }
.vm-contact-item__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vm-contact-item__actions { display: flex; align-items: center; gap: 10px; }
.vm-contact-item__body { color: var(--vm-text); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }

/* ----------------------------------------------------------------
   Admin: analytics card
   ---------------------------------------------------------------- */
.vm-ana-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) { .vm-ana-stats { grid-template-columns: repeat(2, 1fr); } }
.vm-ana-stat { background: var(--vm-bg-inset); border: 1px solid var(--vm-border); border-radius: 10px; padding: 14px; }
.vm-ana-stat__label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--vm-text-muted); font-weight: 600; margin-bottom: 6px; }
.vm-ana-stat__value { font-family: var(--vm-font-mono); font-size: 26px; font-weight: 600; color: var(--vm-text); line-height: 1.1; font-feature-settings: "tnum"; }

.vm-ana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .vm-ana-grid { grid-template-columns: 1fr; } }
.vm-ana-list-title { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--vm-text-muted); font-weight: 600; margin-bottom: 8px; }
.vm-ana-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.vm-ana-list td { padding: 7px 0; border-bottom: 1px solid var(--vm-border); }
.vm-ana-list tr:last-child td { border-bottom: 0; }
.vm-ana-list td:first-child { color: var(--vm-text); word-break: break-all; }

#ana-range button.is-active { color: var(--vm-brand); border-color: var(--vm-brand-border); background: var(--vm-brand-glow); }

/* Country flag pill (just the ISO code styled mono) */
.vm-flag {
  display: inline-block;
  font-family: var(--vm-font-mono);
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  background: var(--vm-bg-inset); color: var(--vm-text);
  border: 1px solid var(--vm-border);
  letter-spacing: .04em;
}

.vm-link { color: var(--vm-brand); text-decoration: none; font-weight: 600; }
.vm-link:hover { color: var(--vm-brand-strong); text-decoration: underline; }

/* ----------------------------------------------------------------
   Notification settings — toggle rows
   ---------------------------------------------------------------- */
.vm-toggle-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-bg-elev); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.vm-toggle-row:hover { border-color: var(--vm-brand-border); }
.vm-toggle-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--vm-brand); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.vm-toggle-row__title { font-weight: 600; font-size: 13.5px; color: var(--vm-text); }
.vm-toggle-row__hint  { font-size: 11.5px; color: var(--vm-text-muted); margin-top: 4px; line-height: 1.45; }
.vm-toggle-row--compact { padding: 8px 12px; }
.vm-toggle-row--compact .vm-toggle-row__title { font-size: 13px; }

/* Credit-consumed animation -------------------------------------- */
@keyframes vm-credit-burst-pop {
  0%   { transform: translate(-50%, 0)     scale(.6); opacity: 0; }
  20%  { transform: translate(-50%, -8px)  scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -42px) scale(1);   opacity: 0; }
}
@keyframes vm-credit-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,200,66,0); }
  35%      { box-shadow: 0 0 0 6px rgba(245,200,66,.18); }
}
@keyframes vm-credit-count-flash {
  0%, 100% { color: var(--vm-warn, #f5c842); }
  40%      { color: #fff; text-shadow: 0 0 8px rgba(245,200,66,.7); }
}
.vm-credit-burst {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 16px;
  font-weight: 800;
  color: var(--vm-warn, #f5c842);
  text-shadow: 0 0 12px rgba(245,200,66,.6);
  pointer-events: none;
  animation: vm-credit-burst-pop 1.1s cubic-bezier(.2,.7,.3,1) forwards;
  z-index: 50;
  font-variant-numeric: tabular-nums;
}
[data-vm-credit-pill].is-bursting {
  border-radius: 6px;
  animation: vm-credit-pill-pulse 1.1s ease-out;
}
[data-vm-credit-pill].is-bursting [data-vm-credit-count] {
  animation: vm-credit-count-flash .9s ease-out;
}

/* Notification settings keep grid items and controls inside narrow cards. */
.vm-notification-settings .vm-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-notification-settings .vm-field, .vm-notification-settings .vm-toggle-row > div { min-width: 0; }
.vm-notification-settings .vm-toggle-row__hint { overflow-wrap: anywhere; }
.vm-notification-settings .vm-input { min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
  .vm-notification-settings .vm-field-row { grid-template-columns: minmax(0, 1fr); }
  .vm-notification-settings .vm-form-actions { flex-wrap: wrap; }
}

.vm-revenue-page .vm-main { min-width: 0; }