/* ==========================================================================
   MagnusEngitech UI — Magnus brand theme on top of Bootstrap 5.3 (light theme)
   Brand: navy #3F5FAB / #23366D / #1a2854, accent orange #F26724, paper #fbfaf6.
   Inter for UI, Playfair Display italic for accent words.
   ========================================================================== */
:root {
  --vh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --vh-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vh-bg: #f5f7fb;
  --vh-surface: #ffffff;
  --vh-surface-2: #f8f9fc;
  --vh-surface-3: #eef1f8;
  --vh-border: #e0e6f0;
  --vh-border-strong: #c7d4e3;
  --vh-text: #23366D;
  --vh-text-2: #4a5b80;
  --vh-muted: #6b7c93;
  --vh-primary: #3F5FAB;
  --vh-primary-2: #2d4a8f;
  --vh-primary-rgb: 63, 95, 171;
  --vh-primary-soft: #E8ECF7;
  --vh-accent: #F26724;
  --vh-accent-2: #d8551a;
  --vh-accent-rgb: 242, 103, 36;
  --vh-accent-soft: #FFE4D6;
  --vh-navy-dark: #1a2854;
  --vh-paper: #fbfaf6;
  --vh-grad: linear-gradient(135deg, #3F5FAB 0%, #2d4a8f 100%);
  --vh-grad-soft: linear-gradient(135deg, rgba(63,95,171,.09), rgba(112,133,191,.08));
  --vh-success: #10a36e; --vh-success-soft: #e3f7ee;
  --vh-warning: #c27a06; --vh-warning-soft: #fff4dc;
  --vh-danger: #dc3b4b;  --vh-danger-soft: #fde8ea;
  --vh-info: #0b85c9;    --vh-info-soft: #e1f2fc;
  --vh-neutral-soft: #eef0f6;
  --vh-shadow-sm: 0 1px 2px rgba(20,24,56,.05), 0 1px 3px rgba(20,24,56,.04);
  --vh-shadow: 0 1px 2px rgba(20,24,56,.04), 0 8px 24px -6px rgba(20,24,56,.08);
  --vh-shadow-lg: 0 24px 60px -12px rgba(20,24,56,.22);
  --vh-radius: 16px;
  --vh-radius-sm: 10px;
  --vh-sidebar-w: 264px;
  --vh-side-bg: #1a2854;
  --vh-side-bg-2: #23366D;
  --vh-side-text: rgba(232,236,247,.72);
  --vh-side-hover: rgba(255,255,255,.07);
  --vh-chart-bar: #3F5FAB;
  --vh-chart-grid: #e8ecf4;

  --bs-body-font-family: var(--vh-font);
  --bs-body-bg: var(--vh-bg);
  --bs-body-color: var(--vh-text);
  --bs-secondary-color: var(--vh-text-2);
  --bs-tertiary-color: var(--vh-muted);
  --bs-border-color: var(--vh-border);
  --bs-primary: var(--vh-primary);
  --bs-primary-rgb: var(--vh-primary-rgb);
  --bs-link-color: #3F5FAB;
  --bs-link-color-rgb: 63, 95, 171;
  --bs-link-hover-color: #F26724;
  --bs-link-hover-color-rgb: 242, 103, 36;
  --bs-emphasis-color: var(--vh-text);
  --bs-tertiary-bg: var(--vh-surface-2);
  --bs-secondary-bg: var(--vh-surface-3);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 14px;
  --bs-focus-ring-color: rgba(var(--vh-primary-rgb), .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) { color-scheme: dark; }
}
[data-bs-theme="dark"] {
  --vh-bg: #0a0c18;
  --vh-surface: #121528;
  --vh-surface-2: #171a31;
  --vh-surface-3: #1e2240;
  --vh-border: #242846;
  --vh-border-strong: #30355a;
  --vh-text: #e8eaf8;
  --vh-text-2: #b3b8d6;
  --vh-muted: #8288ab;
  --vh-primary: #7c7cff;
  --vh-primary-rgb: 124, 124, 255;
  --vh-primary-soft: rgba(124,124,255,.14);
  --vh-grad-soft: linear-gradient(135deg, rgba(124,124,255,.16), rgba(167,139,250,.12));
  --vh-success: #3ccf95; --vh-success-soft: rgba(60,207,149,.13);
  --vh-warning: #f4b544; --vh-warning-soft: rgba(244,181,68,.13);
  --vh-danger: #ff6b7a;  --vh-danger-soft: rgba(255,107,122,.13);
  --vh-info: #4cb8f2;    --vh-info-soft: rgba(76,184,242,.13);
  --vh-neutral-soft: rgba(255,255,255,.07);
  --vh-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --vh-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.55);
  --vh-side-bg: #080a15;
  --vh-side-bg-2: #0f1226;
  --vh-chart-bar: #8a88ff;
  --vh-chart-grid: #232746;

  --bs-body-bg: var(--vh-bg);
  --bs-body-color: var(--vh-text);
  --bs-secondary-color: var(--vh-text-2);
  --bs-tertiary-color: var(--vh-muted);
  --bs-border-color: var(--vh-border);
  --bs-emphasis-color: var(--vh-text);
  --bs-tertiary-bg: var(--vh-surface-2);
  --bs-secondary-bg: var(--vh-surface-3);
  --bs-link-color: #a3a3ff;
  --bs-link-color-rgb: 163, 163, 255;
  --bs-link-hover-color: #c4c4ff;
  --bs-link-hover-color-rgb: 196, 196, 255;
}

html, body { background: var(--vh-bg); }
body { font-family: var(--vh-font); color: var(--vh-text); font-size: .925rem; -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.02em; color: var(--vh-text); }
a { text-decoration: none; }
a:hover { text-decoration: none; }
::selection { background: rgba(var(--vh-primary-rgb), .22); }
.text-muted, .text-body-secondary { color: var(--vh-text-2) !important; }
.text-body-tertiary { color: var(--vh-muted) !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.small, small { font-size: .82rem; }
.tiny { font-size: .72rem; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.text-gradient { background: var(--vh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.min-w-0 { min-width: 0; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: var(--vh-sidebar-w); flex-shrink: 0; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 0% 0%, rgba(99,102,241,.22) 0%, transparent 60%), linear-gradient(180deg, var(--vh-side-bg-2), var(--vh-side-bg));
  color: #fff; border-right: 1px solid rgba(255,255,255,.04);
}
@media (min-width: 992px) { .app-sidebar { position: sticky; top: 0; height: 100vh; } }
@media (max-width: 991.98px) { .app-sidebar.offcanvas-lg { --bs-offcanvas-width: 280px; background-color: var(--vh-side-bg); } }
.sb-brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; color: #fff; }
.sb-brand:hover { color: #fff; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--vh-grad); color: #fff; font-size: 1.15rem; box-shadow: 0 6px 18px -4px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.logo-mark.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 1.45rem; }
.sb-brand .name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.1; }
.sb-brand .org { font-size: .74rem; color: var(--vh-side-text); max-width: 170px; }
.sb-scroll { flex: 1; overflow-y: auto; padding: .25rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
.sb-section { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(222,226,255,.38); font-weight: 600; padding: 1.1rem .75rem .45rem; }
.sb-link {
  display: flex; align-items: center; gap: .7rem; padding: .56rem .75rem; margin: 1px 0; border-radius: 10px;
  color: var(--vh-side-text); font-weight: 500; font-size: .88rem; transition: background .15s, color .15s; position: relative;
}
.sb-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .9; }
.sb-link:hover { color: #fff; background: var(--vh-side-hover); }
.sb-link.active { color: #fff; background: linear-gradient(90deg, rgba(99,102,241,.32), rgba(139,92,246,.14)); box-shadow: inset 0 0 0 1px rgba(139,140,255,.18); }
.sb-link.active::before { content: ''; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #a5a6ff; }
.sb-link .count { margin-left: auto; font-size: .7rem; font-weight: 600; background: rgba(255,255,255,.1); color: #fff; padding: .1rem .45rem; border-radius: 99px; }
.sb-link .count.hot { background: #f97316; }
.sb-cta { background: var(--vh-grad); color: #fff !important; box-shadow: 0 8px 20px -8px rgba(99,102,241,.8); margin: .35rem 0 .2rem; }
.sb-cta:hover { filter: brightness(1.08); background: var(--vh-grad); }
.sb-foot { padding: .9rem; border-top: 1px solid rgba(255,255,255,.06); }
.credit-card {
  border-radius: 14px; padding: .9rem 1rem; background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(139,92,246,.18));
  border: 1px solid rgba(165,166,255,.2); color: #fff; display: block;
}
.credit-card:hover { color: #fff; border-color: rgba(165,166,255,.4); }
.credit-card .lbl { font-size: .72rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .08em; }
.credit-card .amt { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.credit-card .bar { height: 5px; background: rgba(255,255,255,.15); border-radius: 9px; overflow: hidden; margin-top: .5rem; }
.credit-card .bar span { display: block; height: 100%; background: linear-gradient(90deg, #a5b4fc, #f0abfc); border-radius: 9px; }
.credit-card.low { background: linear-gradient(135deg, rgba(249,115,22,.35), rgba(220,38,38,.2)); border-color: rgba(251,146,60,.35); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.75rem; background: color-mix(in srgb, var(--vh-bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--vh-border);
}
.topbar-search { position: relative; flex: 1; max-width: 420px; }
.topbar-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--vh-muted); }
.topbar-search input { padding-left: 2.3rem; background: var(--vh-surface); border-radius: 11px; height: 40px; }
.topbar-search kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: var(--vh-surface-3); color: var(--vh-muted); border: 1px solid var(--vh-border); font-size: .68rem; padding: .1rem .35rem; border-radius: 6px; box-shadow: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 11px; display: inline-grid; place-items: center; border: 1px solid var(--vh-border);
  background: var(--vh-surface); color: var(--vh-text-2); transition: all .15s; font-size: 1.05rem; flex-shrink: 0;
}
.icon-btn:hover { color: var(--vh-primary); border-color: rgba(var(--vh-primary-rgb), .35); }
.credit-pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: 0 .9rem; height: 40px; border-radius: 11px; font-weight: 600; font-size: .85rem;
  background: var(--vh-grad-soft); color: var(--vh-primary); border: 1px solid rgba(var(--vh-primary-rgb), .18);
}
.credit-pill:hover { color: var(--vh-primary); border-color: rgba(var(--vh-primary-rgb), .4); }
.credit-pill.low { background: var(--vh-warning-soft); color: var(--vh-warning); border-color: transparent; }
.user-chip { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem .25rem .25rem; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--vh-text); }
.user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--vh-surface); border-color: var(--vh-border); }
.user-chip .meta { text-align: left; line-height: 1.15; }
.user-chip .meta .n { font-weight: 600; font-size: .85rem; }
.user-chip .meta .r { font-size: .72rem; color: var(--vh-muted); }
.app-content { padding: 1.75rem; flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; }
.app-footer { padding: 1rem 1.75rem 1.5rem; color: var(--vh-muted); font-size: .78rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 575.98px) { .app-content { padding: 1rem; } .app-topbar { padding: .65rem 1rem; } }

.impersonate-bar {
  background: repeating-linear-gradient(135deg, #f59e0b, #f59e0b 14px, #f7a928 14px, #f7a928 28px); color: #3b2300;
  padding: .5rem 1.75rem; font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.impersonate-bar .btn { --bs-btn-padding-y: .2rem; --bs-btn-font-size: .78rem; }

/* ---------- Page header ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.6rem; margin: 0; }
.page-head .sub { color: var(--vh-text-2); margin-top: .3rem; font-size: .92rem; }
.crumb { font-size: .8rem; color: var(--vh-muted); display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .4rem; font-weight: 500; }
.crumb:hover { color: var(--vh-primary); }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--vh-primary); }

/* ---------- Cards ---------- */
.card, .panel {
  --bs-card-bg: var(--vh-surface); --bs-card-border-color: var(--vh-border); --bs-card-border-radius: var(--vh-radius);
  background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: var(--vh-radius); box-shadow: var(--vh-shadow-sm);
}
.panel { padding: 1.35rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.panel-title { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .55rem; letter-spacing: -.01em; }
.panel-title .ic { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--vh-primary-soft); color: var(--vh-primary); font-size: .95rem; }
.panel-sub { font-size: .8rem; color: var(--vh-muted); }
.card-link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; color: inherit; display: block; }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--vh-shadow); border-color: rgba(var(--vh-primary-rgb), .28); color: inherit; }
.divider { height: 1px; background: var(--vh-border); margin: 1rem 0; }

/* ---------- Stat cards ---------- */
.stat-card { padding: 1.2rem 1.25rem; position: relative; overflow: hidden; height: 100%; }
.stat-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.stat-card .label { font-size: .8rem; color: var(--vh-text-2); font-weight: 500; }
.stat-card .value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin-top: .5rem; color: var(--vh-text); }
.stat-card .foot { font-size: .76rem; color: var(--vh-muted); margin-top: .45rem; }
.stat-card .foot .up { color: var(--vh-success); font-weight: 600; }
.chip-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; }
.chip-ic.indigo { background: var(--vh-primary-soft); color: var(--vh-primary); }
.chip-ic.green { background: var(--vh-success-soft); color: var(--vh-success); }
.chip-ic.amber { background: var(--vh-warning-soft); color: var(--vh-warning); }
.chip-ic.rose { background: var(--vh-danger-soft); color: var(--vh-danger); }
.chip-ic.sky { background: var(--vh-info-soft); color: var(--vh-info); }
.chip-ic.grad { background: var(--vh-grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(99,102,241,.8); }

.hero-card {
  position: relative; overflow: hidden; border-radius: var(--vh-radius); padding: 1.6rem 1.75rem; color: #fff; border: 0;
  background: radial-gradient(90% 140% at 100% 0%, rgba(236,72,153,.35) 0%, transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(14,165,233,.28) 0%, transparent 60%), linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 20px 40px -18px rgba(79,70,229,.7);
}
.hero-card::after {
  content: ''; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  border: 40px solid rgba(255,255,255,.07);
}
.hero-card h2 { color: #fff; font-size: 1.45rem; margin-bottom: .35rem; }
.hero-card p { color: rgba(255,255,255,.8); margin: 0; max-width: 560px; }
.hero-card .btn-light { --bs-btn-bg: #fff; --bs-btn-color: #4338ca; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #eef0ff; --bs-btn-hover-color: #3730a3; --bs-btn-hover-border-color: #eef0ff; --bs-btn-active-bg: #e0e3ff; --bs-btn-active-color: #3730a3; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
.hero-card .btn-ghost-light { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.hero-card .btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 10px; --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .52rem; --bs-btn-font-size: .875rem; letter-spacing: -.005em; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: all .15s ease; }
.btn-sm { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .32rem; --bs-btn-font-size: .8rem; border-radius: 8px; gap: .35rem; }
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-font-size: 1rem; border-radius: 12px; }
.btn-primary {
  --bs-btn-bg: var(--vh-primary); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--vh-primary); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--vh-primary); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--vh-primary); --bs-btn-disabled-border-color: transparent;
  background-image: var(--vh-grad); box-shadow: 0 6px 16px -6px rgba(91,91,240,.65), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(91,91,240,.75); }
.btn-primary:active { transform: none; }
.btn-soft { background: var(--vh-primary-soft); color: var(--vh-primary); border: 1px solid transparent; }
.btn-soft:hover { background: rgba(var(--vh-primary-rgb), .18); color: var(--vh-primary); }
.btn-outline-secondary, .btn-light, .btn-white {
  --bs-btn-color: var(--vh-text); --bs-btn-bg: var(--vh-surface); --bs-btn-border-color: var(--vh-border-strong);
  --bs-btn-hover-color: var(--vh-text); --bs-btn-hover-bg: var(--vh-surface-2); --bs-btn-hover-border-color: var(--vh-border-strong);
  --bs-btn-active-color: var(--vh-text); --bs-btn-active-bg: var(--vh-surface-3); --bs-btn-active-border-color: var(--vh-border-strong);
  box-shadow: var(--vh-shadow-sm);
}
.btn-outline-primary { --bs-btn-color: var(--vh-primary); --bs-btn-border-color: rgba(var(--vh-primary-rgb), .4); --bs-btn-hover-bg: var(--vh-primary); --bs-btn-hover-border-color: var(--vh-primary); --bs-btn-active-bg: var(--vh-primary); }
.btn-outline-danger { --bs-btn-color: var(--vh-danger); --bs-btn-border-color: rgba(220,59,75,.35); --bs-btn-hover-bg: var(--vh-danger); --bs-btn-hover-border-color: var(--vh-danger); }
.btn-danger { --bs-btn-bg: var(--vh-danger); --bs-btn-border-color: var(--vh-danger); }
.btn-success { --bs-btn-bg: var(--vh-success); --bs-btn-border-color: var(--vh-success); --bs-btn-hover-bg: #0d8f60; }
.btn-warning { --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-color: #2b1a00; --bs-btn-hover-bg: #f7ad2c; --bs-btn-hover-border-color: #f7ad2c; }
.btn-icon { width: 34px; height: 34px; padding: 0 !important; border-radius: 9px; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-ghost { background: transparent; border: 0; color: var(--vh-text-2); }
.btn-ghost:hover { background: var(--vh-surface-3); color: var(--vh-text); }
.btn-ghost.danger:hover { background: var(--vh-danger-soft); color: var(--vh-danger); }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: .8rem; color: var(--vh-text-2); margin-bottom: .35rem; }
.form-control, .form-select {
  border-radius: 10px; border-color: var(--vh-border-strong); background-color: var(--vh-surface); color: var(--vh-text);
  padding: .55rem .8rem; font-size: .9rem; transition: border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm { border-radius: 8px; padding: .34rem .6rem; font-size: .82rem; }
.form-control-lg { border-radius: 12px; padding: .75rem 1rem; font-size: 1rem; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--vh-primary-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--vh-primary-rgb), .14); background-color: var(--vh-surface); color: var(--vh-text); }
.form-control::placeholder { color: var(--vh-muted); opacity: .8; }
.form-control:disabled, .form-select:disabled { background-color: var(--vh-surface-2); opacity: .7; }
.form-text { color: var(--vh-muted); font-size: .76rem; }
.form-check-input { border-color: var(--vh-border-strong); background-color: var(--vh-surface); }
.form-check-input:checked { background-color: var(--vh-primary); border-color: var(--vh-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(var(--vh-primary-rgb), .15); border-color: var(--vh-primary); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.input-group-text { background: var(--vh-surface-2); border-color: var(--vh-border-strong); color: var(--vh-muted); border-radius: 10px; font-size: .85rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--vh-muted); pointer-events: none; z-index: 4; }
.input-icon > .form-control, .input-icon > .form-select { padding-left: 2.5rem; }
.input-icon .toggle-pass { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); z-index: 4; }
.form-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--vh-muted); font-weight: 700; margin: 1.25rem 0 .75rem; display: flex; align-items: center; gap: .6rem; }
.form-section::after { content: ''; flex: 1; height: 1px; background: var(--vh-border); }
.form-section:first-child { margin-top: 0; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--vh-text); --bs-table-border-color: var(--vh-border); --bs-table-hover-bg: var(--vh-surface-2); --bs-table-hover-color: var(--vh-text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table-sm > :not(caption) > * > * { padding: .55rem .75rem; }
.table td, .table th { vertical-align: middle; }
.table thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vh-muted); font-weight: 600;
  background: var(--vh-surface-2); border-bottom: 1px solid var(--vh-border); white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: 0; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-modern { border-radius: var(--vh-radius); overflow: hidden; }
.table-click tbody tr { cursor: pointer; }
.table .row-warn td { background: color-mix(in srgb, var(--vh-warning-soft) 70%, transparent); }
.table .row-muted td { color: var(--vh-muted); }
.table .row-excluded td { opacity: .55; }
.table .row-excluded td strong { text-decoration: line-through; }
.table-responsive { border-radius: inherit; }
.cell-title { font-weight: 600; color: var(--vh-text); }
.cell-sub { font-size: .76rem; color: var(--vh-muted); }
.thumb-sm { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--vh-surface-3); display: grid; place-items: center; color: var(--vh-muted); font-size: 1.15rem; flex-shrink: 0; }

/* ---------- Badges ---------- */
.badge-soft {
  display: inline-flex; align-items: center; gap: .2rem; padding: .22rem .6rem; border-radius: 99px; font-size: .72rem; font-weight: 600;
  background: var(--vh-neutral-soft); color: var(--vh-text-2); white-space: nowrap; line-height: 1.3;
}
.badge-soft i { font-size: .9em; }
.badge-soft .bi-dot { font-size: 1.4em; margin: -.3em -.15em -.3em -.35em; }
.badge-soft.success { background: var(--vh-success-soft); color: var(--vh-success); }
.badge-soft.warning { background: var(--vh-warning-soft); color: var(--vh-warning); }
.badge-soft.danger { background: var(--vh-danger-soft); color: var(--vh-danger); }
.badge-soft.info { background: var(--vh-info-soft); color: var(--vh-info); }
.badge-soft.primary { background: var(--vh-primary-soft); color: var(--vh-primary); }
.badge-soft.outline { background: transparent; border: 1px solid var(--vh-border-strong); }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border-radius: 8px; font-size: .76rem; font-weight: 500; background: var(--vh-surface-2); border: 1px solid var(--vh-border); color: var(--vh-text-2); margin: 0 .3rem .35rem 0; }

/* ---------- Avatars ---------- */
.avatar { width: 36px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; flex-shrink: 0; letter-spacing: 0; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: .68rem; }
.avatar.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.15rem; }
.avatar.xl { width: 72px; height: 72px; border-radius: 20px; font-size: 1.5rem; }
.tone-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.tone-1 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.tone-2 { background: linear-gradient(135deg, #10b981, #059669); }
.tone-3 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.tone-4 { background: linear-gradient(135deg, #ec4899, #db2777); }
.tone-5 { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.tone-6 { background: linear-gradient(135deg, #8b5cf6, #c026d3); }
.tone-7 { background: linear-gradient(135deg, #64748b, #334155); }

/* ---------- Tabs / segmented ---------- */
.seg { display: inline-flex; padding: 4px; background: var(--vh-surface-3); border-radius: 12px; gap: 2px; flex-wrap: wrap; }
.seg a, .seg button { border: 0; background: none; padding: .42rem .9rem; border-radius: 9px; font-size: .84rem; font-weight: 600; color: var(--vh-text-2); display: inline-flex; align-items: center; gap: .4rem; }
.seg a:hover, .seg button:hover { color: var(--vh-text); }
.seg .active { background: var(--vh-surface); color: var(--vh-text); box-shadow: var(--vh-shadow-sm); }
.seg label { color: var(--vh-text-2); transition: all .15s; }
.seg .btn-check:checked + label { background: var(--vh-surface); color: var(--vh-text); box-shadow: var(--vh-shadow-sm); }
.btn-check:checked + .provider-card { border-color: var(--vh-primary); box-shadow: 0 0 0 4px rgba(var(--vh-primary-rgb), .14); background: var(--vh-grad-soft), var(--vh-surface); }
.provider-card { transition: all .15s; }
.provider-card:hover { border-color: rgba(var(--vh-primary-rgb), .35); }
.seg .n { font-size: .7rem; background: var(--vh-neutral-soft); padding: 0 .4rem; border-radius: 6px; color: var(--vh-muted); }
.tabs-line { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--vh-border); margin-bottom: 1.25rem; overflow-x: auto; }
.tabs-line button, .tabs-line a { background: none; border: 0; padding: .75rem 0; font-weight: 600; color: var(--vh-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .88rem; white-space: nowrap; display: inline-flex; gap: .45rem; align-items: center; }
.tabs-line .active { color: var(--vh-primary); border-bottom-color: var(--vh-primary); }
.tabs-line .n { font-size: .7rem; background: var(--vh-neutral-soft); padding: .05rem .45rem; border-radius: 6px; }

/* ---------- Dropdown / modal / toast ---------- */
.dropdown-menu { --bs-dropdown-bg: var(--vh-surface); --bs-dropdown-border-color: var(--vh-border); --bs-dropdown-link-color: var(--vh-text); --bs-dropdown-link-hover-bg: var(--vh-surface-2); --bs-dropdown-link-active-bg: var(--vh-primary); border-radius: 14px; box-shadow: var(--vh-shadow-lg); padding: .4rem; font-size: .87rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-item i { color: var(--vh-muted); }
.dropdown-header { font-size: .72rem; }
.modal-content { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 18px; box-shadow: var(--vh-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--vh-border); }
.modal-header { padding: 1.1rem 1.35rem; }
.modal-body { padding: 1.35rem; }
.modal-backdrop.show { opacity: .45; backdrop-filter: blur(3px); }
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .6rem; max-width: min(420px, calc(100vw - 2rem)); }
.vh-toast {
  display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 14px; background: var(--vh-surface); border: 1px solid var(--vh-border);
  box-shadow: var(--vh-shadow-lg); animation: toastIn .35s cubic-bezier(.2,.9,.3,1.2); font-size: .87rem;
}
.vh-toast .ti { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.vh-toast.success .ti { background: var(--vh-success-soft); color: var(--vh-success); }
.vh-toast.danger .ti { background: var(--vh-danger-soft); color: var(--vh-danger); }
.vh-toast.warning .ti { background: var(--vh-warning-soft); color: var(--vh-warning); }
.vh-toast.info .ti { background: var(--vh-info-soft); color: var(--vh-info); }
.vh-toast .x { margin-left: auto; background: none; border: 0; color: var(--vh-muted); padding: 0 .2rem; }
.vh-toast.hide { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- Alerts / callouts ---------- */
.callout { display: flex; gap: .85rem; align-items: flex-start; padding: .95rem 1.1rem; border-radius: 14px; border: 1px solid transparent; font-size: .88rem; margin-bottom: 1.25rem; }
.callout > i { font-size: 1.15rem; line-height: 1.3; }
.callout.warning { background: var(--vh-warning-soft); color: color-mix(in srgb, var(--vh-warning) 70%, var(--vh-text)); border-color: color-mix(in srgb, var(--vh-warning) 25%, transparent); }
.callout.warning > i { color: var(--vh-warning); }
.callout.danger { background: var(--vh-danger-soft); color: color-mix(in srgb, var(--vh-danger) 70%, var(--vh-text)); border-color: color-mix(in srgb, var(--vh-danger) 25%, transparent); }
.callout.danger > i { color: var(--vh-danger); }
.callout.info { background: var(--vh-info-soft); color: color-mix(in srgb, var(--vh-info) 60%, var(--vh-text)); border-color: color-mix(in srgb, var(--vh-info) 22%, transparent); }
.callout.info > i { color: var(--vh-info); }
.callout.primary { background: var(--vh-grad-soft); border-color: rgba(var(--vh-primary-rgb), .18); }
.callout.primary > i { color: var(--vh-primary); }
.callout.success { background: var(--vh-success-soft); border-color: color-mix(in srgb, var(--vh-success) 25%, transparent); }
.callout.success > i { color: var(--vh-success); }
.callout a { font-weight: 600; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 2.75rem 1rem; color: var(--vh-muted); }
.empty .ei { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; background: var(--vh-grad-soft); color: var(--vh-primary); }
.empty h6 { color: var(--vh-text); font-weight: 700; margin-bottom: .3rem; }
.empty p { max-width: 380px; margin: 0 auto 1rem; font-size: .86rem; }

/* ---------- Lists ---------- */
.list-row { display: flex; align-items: center; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--vh-border); color: inherit; }
.list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-row:first-child { padding-top: 0; }
a.list-row:hover .cell-title { color: var(--vh-primary); }
.kv { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.kv-item { display: flex; gap: .75rem; align-items: flex-start; font-size: .87rem; }
.kv-item > i { width: 32px; height: 32px; border-radius: 9px; background: var(--vh-surface-2); border: 1px solid var(--vh-border); display: grid; place-items: center; color: var(--vh-muted); flex-shrink: 0; }
.kv-item .k { font-size: .72rem; color: var(--vh-muted); font-weight: 500; }
.kv-item .v { font-weight: 500; word-break: break-word; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.metric { padding: .85rem 1rem; border-radius: 12px; background: var(--vh-surface-2); border: 1px solid var(--vh-border); }
.metric .k { font-size: .72rem; color: var(--vh-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.metric .v { font-size: 1.05rem; font-weight: 700; margin-top: .15rem; }

.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--vh-border); border-radius: 2px; }
.tl-item { position: relative; padding-bottom: 1rem; font-size: .85rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: -1.4rem; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--vh-surface); border: 3px solid var(--vh-primary); }
.tl-item.g::before { border-color: var(--vh-success); }
.tl-item.r::before { border-color: var(--vh-danger); }
.tl-item.a::before { border-color: var(--vh-warning); }
.tl-item .when { font-size: .74rem; color: var(--vh-muted); }

/* ---------- Progress / meters ---------- */
.meter { height: 8px; background: var(--vh-surface-3); border-radius: 99px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 99px; background: var(--vh-grad); }
.meter.success > span { background: var(--vh-success); }
.meter.warning > span { background: #f59e0b; }
.meter.thin { height: 5px; }

/* ---------- Stars / rating ---------- */
.stars { color: #f5a524; letter-spacing: 1px; font-size: .8rem; white-space: nowrap; }
.stars .off { color: var(--vh-border-strong); }
.rate-pick { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.rate-pick input { display: none; }
.rate-pick label { font-size: 1.4rem; color: var(--vh-border-strong); cursor: pointer; transition: transform .1s, color .1s; line-height: 1; }
.rate-pick label:hover, .rate-pick label:hover ~ label, .rate-pick input:checked ~ label { color: #f5a524; }
.rate-pick label:hover { transform: scale(1.15); }

/* ---------- Media ---------- */
.thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: var(--vh-surface-3); display: block; }
.file-tile { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--vh-surface-2); border: 1px dashed var(--vh-border-strong); border-radius: 12px; font-size: 2rem; color: var(--vh-muted); }
.media-card { position: relative; border-radius: 14px; overflow: hidden; }
.media-card .del { position: absolute; top: .5rem; right: .5rem; opacity: 0; transition: opacity .15s; }
.media-card:hover .del { opacity: 1; }

.vendor-cover { height: 96px; border-radius: var(--vh-radius) var(--vh-radius) 0 0; background: var(--vh-grad-soft); position: relative; overflow: hidden; }
.vendor-cover img { width: 100%; height: 100%; object-fit: cover; }
.vendor-cover .pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--vh-primary-rgb), .18) 1px, transparent 1px); background-size: 14px 14px; }
.vendor-card { overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.vendor-card .body { padding: 0 1.15rem 1.15rem; margin-top: -26px; position: relative; flex: 1; display: flex; flex-direction: column; }
.vendor-card .avatar { border: 3px solid var(--vh-surface); box-sizing: content-box; }
.vendor-card .status { position: absolute; top: .75rem; right: .75rem; }

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed var(--vh-border-strong); border-radius: 18px; padding: 2.75rem 1.5rem; text-align: center; cursor: pointer; display: block;
  background: radial-gradient(60% 80% at 50% 0%, rgba(var(--vh-primary-rgb), .07), transparent 70%), var(--vh-surface); transition: all .2s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--vh-primary); background-color: var(--vh-primary-soft); }
.dropzone.drag { transform: scale(1.01); }
.dropzone .dz-ic { width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 1.8rem; background: var(--vh-grad); color: #fff; box-shadow: 0 14px 30px -10px rgba(91,91,240,.7); }
.file-chip { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: 12px; background: var(--vh-surface); border: 1px solid var(--vh-border); margin-top: .5rem; font-size: .85rem; animation: toastIn .25s ease; }
.file-chip .fi { width: 36px; height: 36px; border-radius: 9px; background: var(--vh-primary-soft); color: var(--vh-primary); display: grid; place-items: center; }
.formats { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 1rem; }
.formats span { font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .18rem .5rem; border-radius: 6px; background: var(--vh-surface-3); color: var(--vh-text-2); }

/* ---------- Busy overlay ---------- */
.busy { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--vh-bg) 80%, transparent); backdrop-filter: blur(8px); }
.busy.show { display: flex; }
.busy .box { text-align: center; max-width: 360px; padding: 2rem; }
.orb { width: 84px; height: 84px; margin: 0 auto 1.25rem; border-radius: 50%; background: conic-gradient(from 0deg, #6366f1, #a855f7, #ec4899, #6366f1); animation: spin 1.4s linear infinite; position: relative; filter: drop-shadow(0 10px 30px rgba(99,102,241,.5)); }
.orb::after { content: '\F5A0'; font-family: bootstrap-icons; position: absolute; inset: 7px; border-radius: 50%; background: var(--vh-surface); display: grid; place-items: center; font-size: 1.7rem; color: var(--vh-primary); animation: spin 1.4s linear infinite reverse; }
.busy .steps { text-align: left; margin-top: 1.25rem; font-size: .85rem; }
.busy .steps div { padding: .3rem 0; color: var(--vh-muted); display: flex; gap: .5rem; align-items: center; transition: color .3s; }
.busy .steps div.on { color: var(--vh-text); font-weight: 600; }
.busy .steps div.ok { color: var(--vh-success); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Charts (inline SVG / CSS) ---------- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 8px; position: relative; }
.bars .grid { position: absolute; inset: 8px 0 22px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.bars .grid span { border-top: 1px dashed var(--vh-chart-grid); }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; z-index: 1; }
.bars .bar { width: 100%; max-width: 26px; background: var(--vh-chart-bar); border-radius: 4px 4px 0 0; min-height: 2px; transition: filter .15s, opacity .15s; }
.bars .bar.zero { background: var(--vh-chart-grid); }
.bars .col:hover .bar { filter: brightness(1.12); }
.bars .col .lbl { font-size: .62rem; color: var(--vh-muted); margin-top: 6px; height: 16px; white-space: nowrap; }
.bars .col .tip {
  position: absolute; bottom: calc(100% - 4px); left: 50%; transform: translate(-50%, 4px); background: var(--vh-text); color: var(--vh-surface);
  font-size: .72rem; padding: .3rem .55rem; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all .15s; font-weight: 600; z-index: 3;
}
.bars .col:hover .tip { opacity: 1; transform: translate(-50%, 0); }
.bars .col .hit { position: absolute; inset: 0; }
.chart-total { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }

.donut { width: 132px; height: 132px; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut::after { content: ''; position: absolute; inset: 18px; background: var(--vh-surface); border-radius: 50%; }
.donut .c { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.donut .c small { display: block; font-size: .68rem; color: var(--vh-muted); font-weight: 500; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* ---------- Cost summary ---------- */
.price-hero { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.price-hero small { font-size: .9rem; font-weight: 500; color: var(--vh-muted); letter-spacing: 0; }
.cost-row { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .87rem; border-bottom: 1px dashed var(--vh-border); }
.cost-row:last-child { border-bottom: 0; }
.cost-row .k { color: var(--vh-text-2); }
.cost-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.cost-stack { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--vh-surface-3); margin: 1rem 0 .6rem; }
.cost-stack span { display: block; height: 100%; }
.num { font-variant-numeric: tabular-nums; }

pre.raw { max-height: 420px; overflow: auto; background: #0d1020; color: #d7dbf5; padding: 1rem 1.1rem; border-radius: 12px; font-size: .78rem; border: 1px solid #1e2340; }
details > summary { cursor: pointer; font-weight: 600; color: var(--vh-text-2); list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '\F285'; font-family: bootstrap-icons; font-size: .75em; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--vh-surface); }
@media (max-width: 991.98px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none !important; } }
.auth-art {
  position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(70% 60% at 100% 0%, rgba(236,72,153,.45), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(14,165,233,.35), transparent 60%), linear-gradient(145deg, #1e1b4b 0%, #3730a3 45%, #6d28d9 100%);
}
.auth-art .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: float 14s ease-in-out infinite; }
.auth-art .b1 { width: 320px; height: 320px; background: #818cf8; top: -80px; right: -60px; }
.auth-art .b2 { width: 260px; height: 260px; background: #f472b6; bottom: 10%; left: -80px; animation-delay: -5s; }
.auth-art .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.auth-art > * { position: relative; z-index: 1; }
.auth-art h1 { color: #fff; font-size: 2.5rem; line-height: 1.12; letter-spacing: -.035em; font-weight: 800; max-width: 520px; }
.auth-art .lead { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 480px; }
.auth-feat { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; max-width: 460px; }
.auth-feat .fi { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; backdrop-filter: blur(6px); }
.auth-feat b { display: block; font-weight: 600; }
.auth-feat span { color: rgba(255,255,255,.7); font-size: .86rem; }
.glass-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 1.1rem 1.25rem; backdrop-filter: blur(12px); max-width: 420px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--vh-surface); }
.auth-form .inner { width: 100%; max-width: 420px; }
.auth-form h2 { font-size: 1.75rem; letter-spacing: -.03em; font-weight: 800; }
.auth-form .form-control { height: 46px; }
.auth-form .btn-lg { height: 48px; }
.auth-sep { display: flex; align-items: center; gap: .75rem; color: var(--vh-muted); font-size: .78rem; margin: 1.25rem 0; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--vh-border); }
.steps-dots { display: flex; gap: .4rem; margin-bottom: 1.5rem; }
.steps-dots span { height: 4px; flex: 1; border-radius: 4px; background: var(--vh-surface-3); }
.steps-dots span.on { background: var(--vh-grad); }
.pw-meter { display: flex; gap: 4px; margin-top: .45rem; }
.pw-meter span { flex: 1; height: 4px; border-radius: 4px; background: var(--vh-surface-3); transition: background .2s; }
.otp { display: flex; gap: .55rem; justify-content: space-between; }
.otp input {
  width: 100%; max-width: 58px; height: 62px; text-align: center; font-size: 1.6rem; font-weight: 700; border-radius: 14px;
  border: 1.5px solid var(--vh-border-strong); background: var(--vh-surface-2); color: var(--vh-text); transition: all .15s; caret-color: var(--vh-primary);
}
.otp input:focus { outline: 0; border-color: var(--vh-primary); background: var(--vh-surface); box-shadow: 0 0 0 4px rgba(var(--vh-primary-rgb), .15); }
.otp input.filled { border-color: rgba(var(--vh-primary-rgb), .5); background: var(--vh-primary-soft); }
.otp.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.mail-ic { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 2rem; background: var(--vh-grad-soft); color: var(--vh-primary); margin-bottom: 1.25rem; position: relative; }
.mail-ic::after { content: ''; position: absolute; inset: -6px; border-radius: 26px; border: 2px solid rgba(var(--vh-primary-rgb), .15); animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { transform: scale(.95); opacity: 1; } to { transform: scale(1.18); opacity: 0; } }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 40px); } }
.demo-box { border: 1px dashed var(--vh-border-strong); border-radius: 14px; padding: .8rem 1rem; font-size: .8rem; background: var(--vh-surface-2); }
.demo-box button { font-size: .76rem; }

/* ---------- Landing ---------- */
.land-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
.land-hero { position: relative; overflow: hidden; padding: 5rem 0 4rem; text-align: center; }
.land-hero::before { content: ''; position: absolute; inset: -30% -10% auto; height: 700px; background: radial-gradient(40% 50% at 30% 30%, rgba(99,102,241,.25), transparent 70%), radial-gradient(35% 45% at 70% 25%, rgba(236,72,153,.18), transparent 70%); z-index: -1; }
.land-hero h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; max-width: 900px; margin: 0 auto 1.25rem; }
.land-hero .lead { font-size: 1.15rem; color: var(--vh-text-2); max-width: 640px; margin: 0 auto 2rem; }
.pill-note { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .4rem; border-radius: 99px; background: var(--vh-surface); border: 1px solid var(--vh-border); font-size: .8rem; font-weight: 500; box-shadow: var(--vh-shadow-sm); margin-bottom: 1.5rem; }
.pill-note b { background: var(--vh-grad); color: #fff; padding: .12rem .55rem; border-radius: 99px; font-size: .7rem; }
.feature { padding: 1.5rem; height: 100%; }
.feature .chip-ic { margin-bottom: 1rem; }
.feature h5 { font-size: 1.02rem; }
.feature p { color: var(--vh-text-2); font-size: .88rem; margin: 0; }
.mock { border-radius: 20px; border: 1px solid var(--vh-border); background: var(--vh-surface); box-shadow: var(--vh-shadow-lg); padding: 1rem; text-align: left; max-width: 980px; margin: 3.5rem auto 0; }
.mock .dots { display: flex; gap: 6px; margin-bottom: .9rem; }
.mock .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--vh-surface-3); }
.step-num { width: 34px; height: 34px; border-radius: 10px; background: var(--vh-grad); color: #fff; font-weight: 700; display: grid; place-items: center; }

/* ---------- Print ---------- */
@media print {
  .app-sidebar, .app-topbar, .app-footer, .d-print-none, .impersonate-bar, .toast-stack { display: none !important; }
  .app-content { padding: 0; max-width: none; }
  .card, .panel { box-shadow: none; border-color: #ddd; }
  body, html { background: #fff; }
}

/* ---------- Utilities ---------- */
.hover-lift { transition: transform .15s; } .hover-lift:hover { transform: translateY(-2px); }
.sticky-side { position: sticky; top: 88px; }
.gap-row { row-gap: 1.25rem !important; }
.fade-up { animation: fadeUp .45s ease both; }
.fade-up.d1 { animation-delay: .05s; } .fade-up.d2 { animation-delay: .1s; } .fade-up.d3 { animation-delay: .15s; } .fade-up.d4 { animation-delay: .2s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.scroll-y { max-height: 460px; overflow-y: auto; }
.bg-surface-2 { background: var(--vh-surface-2) !important; }
.border-dashed { border-style: dashed !important; }
.rounded-4 { border-radius: var(--vh-radius) !important; }
.op-check { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--vh-border); margin-bottom: .4rem; cursor: pointer; transition: all .12s; font-size: .85rem; }
.op-check:hover { border-color: rgba(var(--vh-primary-rgb), .35); }
.op-check:has(input:checked) { background: var(--vh-primary-soft); border-color: rgba(var(--vh-primary-rgb), .45); }
.op-check input { margin: 0; }

/* ---------- Notifications bell ---------- */
.bell-dot { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #f43f5e; color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--vh-bg); }
.notif-menu { width: min(370px, calc(100vw - 2rem)); overflow: hidden; }
.notif-scroll { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; gap: .75rem; padding: .7rem 1rem; color: var(--vh-text); border-bottom: 1px solid var(--vh-border); position: relative; }
.notif-item:hover { background: var(--vh-surface-2); color: var(--vh-text); }
.notif-item.unread { background: color-mix(in srgb, var(--vh-primary-soft) 60%, transparent); }
.notif-item.unread::after { content: ''; position: absolute; right: 1rem; top: 1.1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--vh-primary); }

/* ---------- Vendor portal accent (teal) ---------- */
.is-portal .app-sidebar { background: radial-gradient(120% 60% at 0% 0%, rgba(20,184,166,.24) 0%, transparent 60%), linear-gradient(180deg, #0b1d24, #07121a); }
.is-portal .logo-mark, .is-portal .sb-cta { background: linear-gradient(135deg, #0d9488, #0ea5e9); }
.is-portal .sb-link.active { background: linear-gradient(90deg, rgba(20,184,166,.3), rgba(14,165,233,.12)); box-shadow: inset 0 0 0 1px rgba(94,234,212,.18); }
.is-portal .sb-link.active::before { background: #5eead4; }
.is-portal .credit-card { background: linear-gradient(135deg, rgba(20,184,166,.28), rgba(14,165,233,.16)); border-color: rgba(94,234,212,.22); }
.hero-card.teal { background: radial-gradient(90% 140% at 100% 0%, rgba(56,189,248,.35) 0%, transparent 55%), linear-gradient(135deg, #0f766e, #0369a1); box-shadow: 0 20px 40px -18px rgba(13,148,136,.7); }
.hero-card.teal .btn-light { --bs-btn-color: #0f766e; }

/* ---------- RFQ thread & comparison ---------- */
.thread { display: flex; flex-direction: column; gap: .75rem; max-height: 440px; overflow-y: auto; padding: .25rem; }
.msg { max-width: 82%; padding: .65rem .9rem; border-radius: 14px 14px 14px 4px; background: var(--vh-surface-2); border: 1px solid var(--vh-border); font-size: .87rem; }
.msg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--vh-primary-soft); border-color: rgba(var(--vh-primary-rgb), .2); }
.msg.sys { align-self: center; background: transparent; border: 1px dashed var(--vh-border-strong); font-size: .78rem; color: var(--vh-muted); border-radius: 99px; padding: .3rem .9rem; }
.msg .who { font-size: .72rem; color: var(--vh-muted); margin-bottom: .2rem; font-weight: 600; }
.quote-best { position: relative; }
.quote-best::before { content: 'Lowest'; position: absolute; top: -9px; left: 12px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--vh-success); color: #fff; padding: .05rem .45rem; border-radius: 6px; }
.deadline { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 8px; background: var(--vh-info-soft); color: var(--vh-info); }
.deadline.soon { background: var(--vh-warning-soft); color: var(--vh-warning); }
.deadline.over { background: var(--vh-danger-soft); color: var(--vh-danger); }
.file-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--vh-border); border-radius: 12px; margin-bottom: .5rem; color: var(--vh-text); background: var(--vh-surface); }
.file-row:hover { border-color: rgba(var(--vh-primary-rgb), .35); color: var(--vh-text); }
.link-box { display: flex; gap: .5rem; align-items: center; padding: .5rem .5rem .5rem .9rem; border-radius: 12px; background: var(--vh-surface-2); border: 1px dashed var(--vh-border-strong); }
.link-box code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vh-text-2); font-size: .8rem; }
.vendor-pick { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: 12px; border: 1px solid var(--vh-border); margin-bottom: .5rem; cursor: pointer; transition: all .12s; }
.vendor-pick:hover { border-color: rgba(var(--vh-primary-rgb), .35); }
.vendor-pick:has(input:checked) { background: var(--vh-primary-soft); border-color: rgba(var(--vh-primary-rgb), .45); }

/* ==========================================================================
   Marketing site
   ========================================================================== */
.site { background: var(--vh-bg); }
.site-nav { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--vh-bg) 78%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--vh-border); }
.site-nav .navbar { min-height: 68px; }
.site-link { font-weight: 600; font-size: .9rem; color: var(--vh-text-2) !important; border-radius: 9px; padding: .45rem .8rem !important; }
.site-link:hover { color: var(--vh-text) !important; background: var(--vh-surface-3); }
.site-link.active { color: var(--vh-primary) !important; background: var(--vh-primary-soft); }
.site-nav .navbar-toggler:focus { box-shadow: none; }
.site-hero { position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem; text-align: center; isolation: isolate; }
.site-hero.sm { padding: 4.5rem 0 3rem; }
.site-hero::before { content: ''; position: absolute; inset: -40% -10% auto; height: 760px; z-index: -1;
  background: radial-gradient(38% 48% at 28% 32%, rgba(99,102,241,.26), transparent 70%), radial-gradient(34% 44% at 72% 26%, rgba(236,72,153,.18), transparent 70%), radial-gradient(30% 40% at 50% 70%, rgba(20,184,166,.14), transparent 70%); }
.site-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--vh-border) 1px, transparent 1px), linear-gradient(90deg, var(--vh-border) 1px, transparent 1px); background-size: 56px 56px; opacity: .35; mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); }
.site-hero h1 { font-size: clamp(2.2rem, 5.2vw, 4.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; max-width: 950px; margin: 0 auto 1.25rem; }
.site-hero.sm h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.site-hero .lead { font-size: 1.15rem; color: var(--vh-text-2); max-width: 680px; margin: 0 auto 2rem; }
.section { padding: 4.5rem 0; }
.section.tint { background: linear-gradient(180deg, transparent, var(--vh-surface-2) 12%, var(--vh-surface-2) 88%, transparent); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; }
.section-head p { color: var(--vh-text-2); font-size: 1.05rem; }
.logo-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; opacity: .7; font-weight: 700; color: var(--vh-muted); letter-spacing: -.01em; }
.logo-strip span { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.05rem; }
.big-stat { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .75rem; color: var(--vh-text-2); font-size: .93rem; }
.check-list li::before { content: '\F26E'; font-family: bootstrap-icons; color: var(--vh-success); font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.split-visual { border-radius: 22px; border: 1px solid var(--vh-border); background: var(--vh-surface); box-shadow: var(--vh-shadow-lg); padding: 1.25rem; position: relative; }
.split-visual .float-chip { position: absolute; background: var(--vh-surface); border: 1px solid var(--vh-border); box-shadow: var(--vh-shadow); border-radius: 14px; padding: .6rem .85rem; font-size: .8rem; display: flex; gap: .55rem; align-items: center; animation: float 9s ease-in-out infinite; }
.flow { position: relative; }
.flow-step { display: grid; grid-template-columns: 64px 1fr; gap: 1.25rem; position: relative; padding-bottom: 2.25rem; }
.flow-step:not(:last-child)::before { content: ''; position: absolute; left: 31px; top: 64px; bottom: 0; width: 2px; background: linear-gradient(var(--vh-primary), transparent); opacity: .35; }
.flow-num { width: 64px; height: 64px; border-radius: 20px; background: var(--vh-grad); color: #fff; display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 14px 30px -12px rgba(91,91,240,.7); }
.flow-num.teal { background: linear-gradient(135deg, #0d9488, #0ea5e9); box-shadow: 0 14px 30px -12px rgba(13,148,136,.7); }
.price-card { padding: 2rem; height: 100%; display: flex; flex-direction: column; position: relative; }
.price-card.featured { border: 2px solid var(--vh-primary); box-shadow: 0 30px 60px -30px rgba(91,91,240,.55); }
.price-card .ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--vh-grad); color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .8rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.price-card .amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.faq .accordion-item { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 14px !important; margin-bottom: .75rem; overflow: hidden; }
.faq .accordion-button { background: var(--vh-surface); color: var(--vh-text); font-weight: 600; padding: 1.1rem 1.25rem; box-shadow: none; }
.faq .accordion-button:not(.collapsed) { color: var(--vh-primary); background: var(--vh-primary-soft); }
.faq .accordion-button::after { filter: var(--faq-icon-filter, none); }
[data-bs-theme="dark"] .faq { --faq-icon-filter: invert(1); }
.faq .accordion-body { color: var(--vh-text-2); font-size: .93rem; }
.prose { max-width: 780px; margin: 0 auto; color: var(--vh-text-2); line-height: 1.75; }
.prose h2 { font-size: 1.25rem; margin: 2.25rem 0 .75rem; color: var(--vh-text); }
.prose ul { padding-left: 1.2rem; }
.site-footer { padding: 4rem 0 2rem; border-top: 1px solid var(--vh-border); background: var(--vh-surface); margin-top: 2rem; }
.footer-link:hover { color: var(--vh-primary) !important; }
.compare-table td, .compare-table th { padding: .9rem 1rem !important; }
.compare-table .bi-check-circle-fill { color: var(--vh-success); }
.compare-table .bi-dash-circle { color: var(--vh-border-strong); }
.role-card { padding: 1.75rem; height: 100%; }
.role-card .chip-ic { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 16px; margin-bottom: 1.1rem; }

/* ==========================================================================
   Magnus brand layer (light theme only)
   ========================================================================== */
[data-toggle-theme] { display: none !important; }
::selection { background: rgba(242,103,36,.22); }
body.site, .site .site-footer { background-color: var(--vh-paper); }
.site .site-nav { background: rgba(255,255,255,.86); }
.brand-logo { height: 30px; width: auto; display: block; }
.sb-brand .brand-logo { height: 24px; }
.site-nav .brand-logo { height: 30px; }
.site-footer .brand-logo { height: 34px; }
.auth-art .brand-logo { height: 40px; }
.brand-sub { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--vh-accent); }
.sb-brand { flex-direction: column; align-items: flex-start; gap: .45rem; }
.sb-brand .brand-sub { color: #ffb48f; }

/* accent words: Playfair italic orange, as on magnussourcing.com */
.text-gradient { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--vh-accent); font-family: var(--vh-serif); font-style: italic; font-weight: 700; letter-spacing: -.01em; }
.price-hero.text-gradient, .big-stat.text-gradient { font-family: var(--vh-font); font-style: normal; font-weight: 800; color: var(--vh-primary); letter-spacing: -.04em; }
.big-stat.text-gradient { color: var(--vh-accent); }
.eyebrow { color: var(--vh-accent); }
.pill-note b { background: var(--vh-accent); }
.pill-note { border-color: var(--vh-border-strong); }

/* buttons */
.btn-primary { box-shadow: 0 6px 16px -6px rgba(63,95,171,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { box-shadow: 0 10px 22px -8px rgba(63,95,171,.6); }
.btn-accent, .site .btn-primary, .auth-form .btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--vh-accent); --bs-btn-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--vh-accent-2); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--vh-accent-2); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--vh-accent); --bs-btn-disabled-color: #fff;
  background-image: linear-gradient(135deg, #F26724 0%, #e0561b 100%); color: #fff; border: 0; box-shadow: 0 8px 20px -8px rgba(242,103,36,.65);
}
.btn-accent:hover, .site .btn-primary:hover, .auth-form .btn-primary:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 12px 24px -8px rgba(242,103,36,.7); }
.btn-soft { background: var(--vh-primary-soft); color: var(--vh-primary); }
.site .btn-light, .auth-form .btn-light { --bs-btn-border-color: var(--vh-border-strong); }

/* sidebar: Magnus navy */
.app-sidebar, .is-portal .app-sidebar { background: radial-gradient(120% 55% at 0% 0%, rgba(112,133,191,.28) 0%, transparent 60%), linear-gradient(180deg, #23366D 0%, #1a2854 100%); border-right: 0; }
.sb-link.active, .is-portal .sb-link.active { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sb-link.active::before, .is-portal .sb-link.active::before { background: var(--vh-accent); }
.sb-cta, .is-portal .sb-cta { background: linear-gradient(135deg, #F26724, #e0561b); box-shadow: 0 8px 20px -8px rgba(242,103,36,.8); }
.sb-cta:hover { background: linear-gradient(135deg, #F26724, #e0561b); }
.sb-link .count.hot { background: var(--vh-accent); }
.credit-card, .is-portal .credit-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.credit-card .bar span { background: linear-gradient(90deg, #7085BF, #F26724); }
.credit-card.low { background: rgba(242,103,36,.22); border-color: rgba(242,103,36,.45); }
.logo-mark, .is-portal .logo-mark { background: var(--vh-grad); box-shadow: 0 6px 18px -4px rgba(63,95,171,.55); }
.credit-pill { background: var(--vh-primary-soft); border-color: rgba(63,95,171,.18); }
.bell-dot { background: var(--vh-accent); }

/* hero / feature cards */
.hero-card, .hero-card.teal {
  background: radial-gradient(70% 120% at 100% 0%, rgba(242,103,36,.38) 0%, transparent 55%), radial-gradient(70% 110% at 0% 100%, rgba(112,133,191,.35) 0%, transparent 60%), linear-gradient(135deg, #1a2854 0%, #23366D 45%, #3F5FAB 100%);
  box-shadow: 0 22px 44px -20px rgba(26,40,84,.65);
}
.hero-card .btn-light, .hero-card.teal .btn-light { --bs-btn-color: #23366D; --bs-btn-hover-color: #1a2854; }
.hero-card .text-gradient { color: #ffb48f; }
.chip-ic.grad, .dropzone .dz-ic, .step-num, .flow-num { background: var(--vh-grad); box-shadow: 0 12px 26px -12px rgba(63,95,171,.7); }
.flow-num.teal { background: linear-gradient(135deg, #F26724, #e0561b); box-shadow: 0 12px 26px -12px rgba(242,103,36,.7); }
.flow-step:not(:last-child)::before { background: linear-gradient(var(--vh-primary), transparent); }
.tone-0 { background: linear-gradient(135deg, #3F5FAB, #23366D); }
.tone-3 { background: linear-gradient(135deg, #F26724, #d8551a); }
.orb { background: conic-gradient(from 0deg, #3F5FAB, #7085BF, #F26724, #3F5FAB); filter: drop-shadow(0 10px 30px rgba(63,95,171,.45)); }
.dropzone { background: radial-gradient(60% 80% at 50% 0%, rgba(63,95,171,.06), transparent 70%), var(--vh-surface); }
.price-card.featured { border-color: var(--vh-accent); box-shadow: 0 30px 60px -30px rgba(242,103,36,.45); }
.price-card .ribbon { background: var(--vh-accent); }
.quote-best::before { background: var(--vh-success); }
.split-visual .float-chip { border-color: var(--vh-border-strong); }

/* marketing hero glow + section tint */
.site-hero::before { background: radial-gradient(36% 46% at 26% 30%, rgba(63,95,171,.20), transparent 70%), radial-gradient(30% 40% at 74% 24%, rgba(242,103,36,.16), transparent 70%); }
.section.tint { background: linear-gradient(180deg, transparent, #eef1f8 12%, #eef1f8 88%, transparent); }
.site-link.active { color: var(--vh-accent) !important; background: var(--vh-accent-soft); }
.site-link:hover { background: var(--vh-primary-soft); }
.logo-strip { color: var(--vh-text-2); }
.faq .accordion-button:not(.collapsed) { color: var(--vh-primary); }

/* auth screens: navy art panel with orange glow */
.auth-art { background: radial-gradient(65% 55% at 100% 0%, rgba(242,103,36,.42), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgba(112,133,191,.45), transparent 60%), linear-gradient(145deg, #1a2854 0%, #23366D 50%, #3F5FAB 100%); }
.auth-art .b1 { background: #7085BF; }
.auth-art .b2 { background: #F26724; opacity: .35; }
.auth-art h1 .accent { color: #ffb48f; font-family: var(--vh-serif); font-style: italic; }
.steps-dots span.on { background: var(--vh-accent); }
.mail-ic { background: var(--vh-primary-soft); }
.otp input.filled { background: var(--vh-primary-soft); }
.impersonate-bar { background: repeating-linear-gradient(135deg, #F26724, #F26724 14px, #f47b40 14px, #f47b40 28px); color: #2b1203; }
.brand-logo { align-self: flex-start; max-width: 100%; object-fit: contain; object-position: left center; }