/* RIZEN Billing – lighter theme + interactive UI */

/* The client's own accent. applyBrandColor() in app.js overwrites these from the registered
   profile; everything below reads the variables instead of a hard-coded purple. */
:root {
  --brand: #036aee;
  --brand-dark: #0a4fae;
  --brand-soft: #ddeefe;
  --brand-ink: #ffffff;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* The vendor mark — a rising line, no letters, so it never reads as the client's name. */
.risen-mark { width: 40px; height: 40px; display: block; flex: 0 0 auto; }
.risen-mark rect { fill: var(--brand); }
.risen-mark path { fill: none; stroke: var(--brand-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.risen-mark-sm { width: 26px; height: 26px; }

/* The full RIZEN wordmark, where there is room for the letters. */
.rizen-wordmark { display: block; width: auto; height: 30px; }
body.dark .rizen-wordmark { filter: brightness(1.22) saturate(1.05); }

/* The left rail belongs to the product, not the tenant: the wordmark owns the brand block. */
.sidebar-brand { display: flex; flex-direction: column; align-items: center; }
.sidebar-wordmark { display: block; width: auto; height: 40px; max-width: 100%; }
body.dark .sidebar-wordmark { filter: brightness(1.22) saturate(1.05); }

/* On a phone the rail slides over the page instead of squeezing the only column that matters.
   The drawer owns the full screen: a close control sits in its head, rows are thumb-sized, and the
   nav column scrolls on its own so the browser's own chrome never clips the last group. */
.sidebar-backdrop { display: none; }
.sidebar-close { display: none; }
@media (max-width: 1023.98px) {
  #app-shell { height: 100vh; height: 100dvh; }
  body.nav-open { overflow: hidden; }
  #sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.22, .8, .25, 1);
    box-shadow: 30px 0 70px -36px rgba(2, 6, 23, .85);
  }
  #sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 20;
    background: rgba(2, 6, 23, .52); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .sidebar-backdrop.is-on { opacity: 1; pointer-events: auto; }
  .sidebar-brand {
    position: sticky; top: 0; z-index: 2;
    background: #0f172a;
    padding: 14px 56px 14px 20px;
  }
  .sidebar-brand .sidebar-wordmark { height: 34px; }
  .sidebar-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 11px;
    color: #e2e8f0; background: rgba(148, 163, 184, .16);
    border: 1px solid rgba(148, 163, 184, .22);
    font-size: 16px; cursor: pointer;
  }
  .sidebar-close:active { background: rgba(148, 163, 184, .28); }
  #sidebar nav {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #sidebar .nav-item {
    min-height: 46px;
    font-size: 15px;
    gap: 12px;
    padding-top: 10px; padding-bottom: 10px;
  }
  #sidebar .nav-item i:first-child { width: 22px; font-size: 15px; }
  #sidebar nav > div > .px-3 { margin-bottom: 4px; margin-top: 12px; }
  #sidebar nav > div + div { margin-top: 4px; }
  #sidebar-toggle {
    flex: 0 0 44px;
    width: 44px; height: 44px; margin-left: -10px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
  }
  #sidebar-toggle:active { background: #eef2f7; }
  body.dark #sidebar-toggle:active { background: #1e293b; }
  #sec-header-chip { flex-shrink: 0; }
  /* A toast under the open drawer reads as part of the menu; hold it until the drawer is away. */
  body.nav-open #toast-container { opacity: 0; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  #sidebar, .sidebar-backdrop { transition: none; }
}

/* Settings → Branding colour picker */
.brand-color-row { display: flex; align-items: center; gap: 12px; }
.brand-color-row input[type=color] {
  width: 44px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
}
.brand-color-chip {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid #e2e8f0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}
.brand-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.brand-swatch {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; transition: transform .12s, border-color .12s;
}
.brand-swatch:hover { transform: translateY(-2px) scale(1.06); }
.brand-swatch.active { border-color: #0f172a; }
body.dark .brand-swatch.active { border-color: #f1f5f9; }
body.dark .brand-color-chip { border-color: #334155; }
body.dark .brand-color-row input[type=color] { border-color: #334155; background: #0f172a; }

.nav-item { color: #94a3b8; }
.nav-item:hover { background-color: #334155; color: #f1f5f9; }
.nav-item.active {
  background-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--brand) 55%, transparent);
}

.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}
.stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.stat-card:hover {
  border-color: #8ec3ff;
  box-shadow: 0 4px 12px -2px rgba(3, 106, 238, 0.12);
}

.table-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
}
table { width: 100%; border-collapse: collapse; }
th {
  background: #f8fafc;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8fafc; }
tr.clickable { cursor: pointer; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-info    { background: #e0e7ff; color: #123c7d; }
.badge-purple  { background: #ddeefe; color: #0f479e; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--brand); box-shadow: none; }
.btn-primary {
  background: var(--brand);
  color: var(--brand-ink);
}
.btn-primary:hover {
  background: var(--brand-dark);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--brand) 45%, transparent);
}
.btn-outline {
  background: white;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.btn-outline:hover {
  border-color: #55a4ff;
  color: #036aee;
  background: #eff7ff;
}
.btn-danger {
  background: #fee2e2;
  color: #991b1b;
}
.btn-danger:hover { background: #fecaca; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
.modal-panel {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}
.modal-panel.wide { max-width: 820px; }
/* A form taller than the screen keeps its title and buttons in place; only the fields scroll. */
.modal-panel.scroll-body { display: flex; flex-direction: column; overflow: hidden; }
.scroll-body .modal-header, .scroll-body .modal-footer { flex-shrink: 0; }
.scroll-body .modal-body { flex: 1 1 auto; overflow-y: auto; }
.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-body { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: #f8fafc;
  border-radius: 0 0 1rem 1rem;
}

.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab-btn.active {
  color: #036aee;
  border-bottom-color: #036aee;
}
.tab-btn:hover { color: #0a55c4; }

.toast {
  pointer-events: auto;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 280px;
  animation: slideInRight 0.3s ease;
}
.toast-success { border-left: 4px solid #22c55e; }
.toast-error   { border-left: 4px solid #ef4444; }
.toast-info    { border-left: 4px solid #036aee; }

.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.3rem;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f8cf7;
  box-shadow: 0 0 0 3px rgba(47, 140, 247, 0.2);
}

.page-section { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.filter-chip {
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-chip.active, .filter-chip:hover {
  background: #ddeefe;
  border-color: #55a4ff;
  color: #0a55c4;
}

/* User menu theme buttons */
.theme-btn.active {
  background: #f59e0b;
  color: #0f172a !important;
  font-weight: 600;
}

/* Dark mode (body class) */
body.dark {
  background: #0f172a;
  color: #e2e8f0;
}
body.dark .bg-slate-50 { background-color: #0f172a !important; }
body.dark .bg-slate-100 { background-color: #1e293b !important; }
body.dark .bg-white,
body.dark .card,
body.dark .stat-card,
body.dark .table-container,
body.dark .modal-panel {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0;
}
body.dark header.bg-white {
  background-color: #0f172a !important;
  border-color: #1c2942 !important;
}
body.dark header .search-wrap input {
  background-color: #16233a !important;
  border-color: #27364d !important;
}
body.dark th {
  background: #0f172a !important;
  color: #94a3b8;
  border-color: #334155 !important;
}
body.dark td {
  border-color: #334155 !important;
  color: #cbd5e1;
}
body.dark tr:hover td { background: #0f172a !important; }
body.dark .text-slate-800 { color: #f1f5f9 !important; }
body.dark .text-slate-700 { color: #e2e8f0 !important; }
body.dark .text-slate-600 { color: #94a3b8 !important; }
body.dark .text-slate-500 { color: #64748b !important; }
body.dark .form-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark .btn-outline {
  background: #1e293b;
  border-color: #475569;
  color: #cbd5e1;
}
body.dark .btn-outline:hover {
  border-color: #2f8cf7;
  color: #55a4ff;
  background: #312e81;
}
body.dark .filter-chip {
  background: #1e293b;
  border-color: #475569;
  color: #94a3b8;
}
body.dark .filter-chip.active,
body.dark .filter-chip:hover {
  background: #0d3a78;
  border-color: #0a55c4;
  color: #bcdcff;
}
body.dark .bg-slate-50 { background-color: #0f172a !important; }
body.dark .modal-footer { background: #0f172a !important; border-color: #334155 !important; }
body.dark .modal-header { border-color: #334155 !important; }
body.dark .toast {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

/* Daisy-chain fiber map */
.router-node {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
  position: relative;
  z-index: 1;
}
.router-node.online { border-color: #86efac; }
.router-node.offline { border-color: #fca5a5; background: #fff1f2; }
.router-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.router-node.online .router-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.router-node.offline .router-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}
.router-label { line-height: 1.35; }
.chain-line {
  width: 2px;
  height: 28px;
  background: #cbd5e1;
  flex-shrink: 0;
}
.chain-line.short { height: 20px; }

body.dark .router-node {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark .router-node.offline {
  background: #450a0a;
  border-color: #7f1d1d;
}
body.dark .chain-line { background: #475569; }

/* ===== Dark mode completeness pass ===== */
body.dark { color-scheme: dark; }
body.dark .text-slate-400 { color: #94a3b8 !important; }
body.dark .text-slate-300 { color: #cbd5e1 !important; }
body.dark .text-emerald-600,
body.dark .text-emerald-500 { color: #34d399 !important; }
body.dark .text-emerald-700,
body.dark .text-emerald-800,
body.dark .text-emerald-900 { color: #6ee7b7 !important; }
body.dark .text-rose-600,
body.dark .text-rose-500 { color: #fb7185 !important; }
body.dark .text-amber-700,
body.dark .text-amber-800,
body.dark .text-amber-900 { color: #fbbf24 !important; }
body.dark .text-risen-600 { color: #55a4ff !important; }
body.dark .text-risen-800,
body.dark .text-risen-900 { color: #bcdcff !important; }
body.dark .text-orange-400 { color: #fb923c !important; }
body.dark .border-slate-100 { border-color: #334155 !important; }
body.dark .border-slate-200 { border-color: #334155 !important; }
body.dark .border-slate-300 { border-color: #475569 !important; }
body.dark .border-emerald-200 { border-color: #14532d !important; }
body.dark .border-rose-200 { border-color: #7f1d1d !important; }
body.dark .border-amber-200 { border-color: #78350f !important; }
body.dark .bg-amber-50,
body.dark .bg-amber-50\/70 { background-color: rgba(245, 158, 11, 0.10) !important; }
body.dark .bg-emerald-50,
body.dark .bg-emerald-50\/50,
body.dark .bg-emerald-50\/60 { background-color: rgba(16, 185, 129, 0.10) !important; }
body.dark .bg-rose-50,
body.dark .bg-rose-50\/50,
body.dark .bg-rose-50\/60 { background-color: rgba(244, 63, 94, 0.10) !important; }
body.dark .bg-risen-50 { background-color: rgba(3, 106, 238, 0.14) !important; }
body.dark .bg-slate-50\/50 { background-color: rgba(15, 23, 42, 0.55) !important; }
body.dark .badge-success { background: #052e16; color: #4ade80; }
body.dark .badge-warning { background: #451a03; color: #fbbf24; }
body.dark .badge-danger { background: #450a0a; color: #f87171; }
body.dark .badge-info { background: #0a2450; color: #a5b4fc; }
body.dark .badge-purple { background: #061a3a; color: #8ec3ff; }
body.dark .form-label { color: #cbd5e1; }
body.dark .form-input::placeholder { color: #64748b; }
body.dark .btn-danger { background: #4c0519; color: #fda4af; }
body.dark .btn-danger:hover { background: #7f1d1d; }
body.dark .tab-btn { color: #94a3b8; }
body.dark .tab-btn:hover { color: #8ec3ff; }
body.dark .modal-backdrop { background: rgba(2, 6, 23, 0.72); }
body.dark input[type="date"],
body.dark input[type="datetime-local"],
body.dark input[type="time"] { color-scheme: dark; }
body.dark .toast span { color: #e2e8f0 !important; }
body.dark tr.session-expiring td { background: rgba(245, 158, 11, 0.08) !important; }
body.dark tr.session-expiring:hover td { background: rgba(245, 158, 11, 0.14) !important; }

/* Live sessions */
tr.session-expiring td { background: #fffbeb; }
tr.session-expiring:hover td { background: #fef3c7 !important; }
.session-user { display: flex; align-items: center; gap: 0.6rem; }
.session-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ddeefe; color: #0a55c4; font-size: 11px; font-weight: 700;
}
body.dark .session-avatar { background: #061a3a; color: #bcdcff; }
.session-actions { display: flex; align-items: center; gap: 5px; }
.session-act {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  font-size: 11px; transition: all 0.15s; cursor: pointer;
}
.session-act:hover { border-color: #55a4ff; color: #036aee; background: #eff7ff; }
.session-act.danger:hover { border-color: #fecaca; color: #dc2626; background: #fef2f2; }
.session-act.warn:hover { border-color: #fde68a; color: #b45309; background: #fffbeb; }
body.dark .session-act { background: #0f172a; border-color: #475569; color: #94a3b8; }
body.dark .session-act:hover { border-color: #0a55c4; color: #55a4ff; background: #0a2450; }
body.dark .session-act.danger:hover { border-color: #7f1d1d; color: #f87171; background: #450a0a; }
body.dark .session-act.warn:hover { border-color: #78350f; color: #fbbf24; background: #451a03; }
.session-note { font-size: 10px; color: #b45309; margin-top: 2px; }
body.dark .session-note { color: #fbbf24; }

/* Per-MikroTik topology */
.topo-card {
  background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #2f8cf7;
  border-radius: 0.75rem; padding: 0.85rem 1rem; min-width: 210px; max-width: 260px;
  flex: 1 1 220px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}
.topo-card.ap { border-top-color: #0ea5e9; }
.topo-card.offline { border-color: #fecaca; border-top-color: #ef4444; background: #fff1f2; }
.topo-num {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ddeefe; color: #0a55c4; font-size: 10px; font-weight: 700;
}
.topo-card.ap .topo-num { background: #e0f2fe; color: #0369a1; }
.topo-arrow { display: flex; align-items: center; color: #cbd5e1; font-size: 12px; }
body.dark .topo-card { background: #1e293b; border-color: #334155; border-top-color: #2f8cf7; }
body.dark .topo-card.ap { border-top-color: #0ea5e9; }
body.dark .topo-card.offline { background: #450a0a; border-color: #7f1d1d; border-top-color: #ef4444; }
body.dark .topo-num { background: #061a3a; color: #bcdcff; }
body.dark .topo-card.ap .topo-num { background: #082f49; color: #7dd3fc; }
body.dark .topo-arrow { color: #475569; }

/* Voucher sales tabs + template */
.voucher-tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
}
.voucher-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: 9px; font-size: 13px; font-weight: 500; color: #64748b;
}
.voucher-tab .count {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: #e2e8f0; color: #475569;
}
.voucher-tab.active { background: #fff; color: #0a55c4; box-shadow: 0 1px 4px rgb(0 0 0 / .08); }
.voucher-tab.active .count { background: #ddeefe; color: #0a55c4; }
body.dark .voucher-tabs { background: #0f172a; border-color: #334155; }
body.dark .voucher-tab { color: #94a3b8; }
body.dark .voucher-tab .count { background: #334155; color: #cbd5e1; }
body.dark .voucher-tab.active { background: #1e293b; color: #8ec3ff; box-shadow: 0 1px 4px rgb(0 0 0 / .45); }
body.dark .voucher-tab.active .count { background: #061a3a; color: #bcdcff; }

/* Voucher plan cards — small gradient tiles with a white inner sheet */
.tone-reef   { --vc1: #12b3a8; --vc2: #0e8ec9; --vc3: #0f4c9c; }
.tone-ocean  { --vc1: #0284c7; --vc2: #2563eb; --vc3: #1e3a8a; }
.tone-indigo { --vc1: #4f46e5; --vc2: #0284c7; --vc3: #155e75; }
.tone-lagoon { --vc1: #0d9488; --vc2: #0891b2; --vc3: #155e75; }
.tone-berry  { --vc1: #7c3aed; --vc2: #a21caf; --vc3: #1d4ed8; }
.tone-sky    { --vc1: #38bdf8; --vc2: #036aee; --vc3: #0c4a6e; }
.tone-ice    { --vc1: #22d3ee; --vc2: #0891b2; --vc3: #164e63; }
.tone-royal  { --vc1: #036aee; --vc2: #123c7d; --vc3: #071a38; }
.tone-wine   { --vc1: #be123c; --vc2: #a21caf; --vc3: #6b21a8; }
.tone-sunset { --vc1: #f59e0b; --vc2: #ea580c; --vc3: #be123c; }

.voucher-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  width: 236px; max-width: 100%; padding: 12px 12px 10px;
  border-radius: 16px; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.34), transparent 58%),
    linear-gradient(150deg, var(--vc1, #0d9488), var(--vc2, #0891b2) 55%, var(--vc3, #155e75));
  box-shadow: 0 20px 38px -26px rgba(8, 47, 73, .85);
  transition: transform .22s ease, box-shadow .22s ease;
}
.voucher-card:hover { transform: translateY(-2px); box-shadow: 0 26px 46px -26px rgba(8, 47, 73, .75); }
.vc-plan {
  margin: 2px 2px 3px; font-size: 15px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; text-shadow: 0 1px 1px rgba(6, 32, 64, .2);
}
.vc-term { margin: 0 2px 10px; font-size: 9px; font-weight: 700; color: rgba(255,255,255,.8); }
.vc-sheet {
  display: flex; flex-direction: column; justify-content: center; flex: 1;
  padding: 10px; border-radius: 11px;
  background: #fff; color: #0b3b8c;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}
.vc-code {
  padding: 9px 6px; border-radius: 7px;
  border: 1px dashed #8ec3ff; background: #eff7ff; color: #123c7d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 800; letter-spacing: .07em; text-align: center;
  word-break: break-all;
}
.vc-code small {
  display: block; margin-bottom: 2px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 6.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #64748b;
}
.vc-foot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 10px; color: #fff; text-align: center; line-height: 1.25;
}
.vc-brandline { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.vc-logo {
  display: grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  font-size: 8px; font-weight: 800;
}
.vc-logo img { width: 100%; height: 100%; object-fit: cover; }
.vc-brandline b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; font-weight: 800; }
.vc-contact { font-size: 8.5px; color: rgba(255,255,255,.78); }
.voucher-preview { display: flex; justify-content: center; padding: 12px 0 4px; }
.voucher-preview .voucher-card { width: 252px; }
@media (prefers-reduced-motion: reduce) {
  .voucher-card:hover { transform: none; }
}

/* Voucher plan shelf — the shop window above the voucher table */
.voucher-shelf {
  position: relative; overflow: hidden;
  padding: 16px 18px 17px; border-radius: 16px;
  border: 1px solid #d5e6f4;
  background:
    radial-gradient(520px 220px at 102% -40%, #d3f2ee, transparent 62%),
    radial-gradient(460px 220px at -6% 130%, #dbeafe, transparent 64%),
    linear-gradient(135deg, #f8fbff, #eef7ff 62%, #eef9f7);
  box-shadow: 0 18px 34px -32px rgba(15, 60, 120, .45);
}
.voucher-shelf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.voucher-shelf-head h2 { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #123c7d; }
.voucher-shelf-head h2 i { color: #0d9488; }
.voucher-shelf-head p { margin: 3px 0 0; font-size: 11px; color: #5b7186; }
.voucher-shelf-note {
  flex: none; padding: 4px 9px; border-radius: 999px;
  background: rgba(13,148,136,.1); border: 1px solid rgba(13,148,136,.2);
  color: #0f766e; font-size: 10px; font-weight: 600;
}
.vplan-rail {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
  gap: 10px;
}
.vplan-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; min-width: 0; min-height: 148px;
  padding: 10px; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; text-align: left; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.34), transparent 58%),
    linear-gradient(150deg, var(--vc1, #0d9488), var(--vc2, #0891b2) 55%, var(--vc3, #155e75));
  box-shadow: 0 14px 26px -20px rgba(8, 47, 73, .85);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.vplan-card:hover, .vplan-card:focus-visible {
  transform: translateY(-3px); filter: saturate(1.08);
  box-shadow: 0 22px 34px -20px rgba(8, 47, 73, .7);
}
.vplan-card:focus-visible { outline: 2px solid #036aee; outline-offset: 3px; }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vp-kind {
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.26);
  font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.vp-plus {
  display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  font-size: 8px; transition: transform .22s ease, background .22s ease, color .22s ease;
}
.vplan-card:hover .vp-plus { transform: rotate(90deg); background: #fff; color: #0f766e; }
.vp-name {
  margin: 7px 1px 7px; font-size: 11.5px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; text-shadow: 0 1px 1px rgba(6, 32, 64, .2);
}
.vp-sheet {
  display: flex; flex-direction: column; flex: 1;
  padding: 8px 9px 7px; border-radius: 10px; background: #fff; color: #0b3b8c;
}
.vp-term { font-size: 9px; font-weight: 700; color: #475569; line-height: 1.4; }
.vp-price {
  margin-top: auto; padding-top: 5px; border-top: 1px solid #eef2f7;
  font-size: 10.5px; font-weight: 800; color: #0f172a;
}
.vp-price em { font-style: normal; font-size: 8px; font-weight: 600; color: #64748b; }
.vp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 7px; font-size: 7.5px; font-weight: 600; color: rgba(255,255,255,.82);
}
.vp-foot i { font-size: 7px; transition: transform .2s ease; }
.vplan-card:hover .vp-foot i { transform: translateX(2px); }
body.dark .voucher-shelf {
  border-color: #334155;
  background:
    radial-gradient(520px 220px at 102% -40%, rgba(13,148,136,.28), transparent 62%),
    radial-gradient(460px 220px at -6% 130%, rgba(37,99,235,.24), transparent 64%),
    linear-gradient(135deg, #0f172a, #111c33 62%, #0c1f2e);
  box-shadow: none;
}
body.dark .voucher-shelf-head h2 { color: #bcdcff; }
body.dark .voucher-shelf-head p { color: #94a3b8; }
body.dark .voucher-shelf-note { background: rgba(45,212,191,.1); border-color: rgba(45,212,191,.24); color: #5eead4; }
body.dark .vp-sheet { background: #f8fbff; }
@media (prefers-reduced-motion: reduce) {
  .vplan-card, .vplan-card:hover { transform: none; filter: none; }
  .vplan-card:hover .vp-plus, .vplan-card:hover .vp-foot i { transform: none; }
}

/* Payment channel choices */
.channel-option {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.channel-option:hover { border-color: #55a4ff; }
.channel-option:has(input:checked) { border-color: #2f8cf7; background: #eff7ff; }
.channel-option input { accent-color: #036aee; }
body.dark .channel-option { border-color: #334155; }
body.dark .channel-option:hover { border-color: #0a55c4; }
body.dark .channel-option:has(input:checked) { border-color: #2f8cf7; background: #0a2450; }
body.dark .channel-option .text-slate-500 { color: #94a3b8 !important; }

/* Gateway cards */
.gateway-tile {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem;
  padding: 1rem; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.gateway-tile:hover { border-color: #8ec3ff; box-shadow: 0 4px 12px -2px rgba(3, 106, 238,.12); }
body.dark .gateway-tile { background: #1e293b; border-color: #334155; }
body.dark .gateway-tile:hover { border-color: #0a55c4; }
.gw-adv summary { cursor: pointer; font-size: 12px; color: #64748b; }
body.dark .gw-adv summary { color: #94a3b8; }
.wallet-mini {
  width: 244px; max-width: 100%;
  background: linear-gradient(135deg, #0d3a78, #0a55c4 55%, #036aee);
  color: #fff; border-radius: 0.8rem; padding: 0.6rem 0.8rem 0.7rem;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 20px -12px rgba(18, 60, 125,.65);
  display: flex; flex-direction: column; gap: 2px;
}
.wallet-mini-top { display: flex; align-items: center; justify-content: space-between; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.72); }
.wallet-mini-top button { color: rgba(255,255,255,.7); font-size: 11px; line-height: 1; }
.wallet-mini-top button:hover { color: #fff; }
.wallet-mini-balance { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.wallet-mini-mail { font-size: 10px; color: rgba(255,255,255,.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-mini-btn {
  margin-top: 5px; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.24); color: #fff;
  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 6px; transition: background .15s;
}
.wallet-mini-btn:hover { background: rgba(255,255,255,.3); }
.wallet-mini-frozen {
  margin-top: 5px; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(15,23,42,.26); border: 1px dashed rgba(255,255,255,.42); color: #fff;
  font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-switch {
  flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(15,23,42,.34); transition: background .18s;
}
.dv-switch i {
  display: block; width: 14px; height: 14px; margin: 3px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.55);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), width .14s;
}
.dv-switch:active i { width: 17px; }
.dv-switch.is-on { background: #3ddc97; }
.dv-switch.is-on i { transform: translateX(16px); }
.dv-switch:disabled { cursor: not-allowed; opacity: .5; }
.wallet-frozen {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 13px;
  border: 1px solid #fcd34d; border-radius: 11px; background: #fffbeb;
}
.wallet-frozen i { color: #b45309; margin-top: 2px; }
.wallet-frozen b { display: block; font-size: 12.5px; color: #92400e; }
.wallet-frozen span { display: block; font-size: 11.5px; color: #a16207; line-height: 1.5; margin-top: 2px; }
body.dark .wallet-frozen { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); }
body.dark .wallet-frozen b { color: #fcd34d; }
body.dark .wallet-frozen span { color: #fbbf24cc; }

/* A running trial is a calendar, not a warning: the strip disappears the day the first invoice
   is raised, so nothing here is allowed to look like a billing hold. */
.trial-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px; color: #fff;
  background:
    radial-gradient(480px 190px at 92% -30%, rgba(125, 211, 252, .55), transparent 60%),
    linear-gradient(118deg, #0f766e 0%, #0e7490 46%, #0a55c4 100%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 20px 36px -30px rgba(8, 47, 73, .8);
}
.trial-banner-glow {
  position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .24), transparent 68%);
}
.trial-banner-icon {
  position: relative; flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24);
  font-size: 17px; color: #fff;
}
.trial-banner-copy { position: relative; flex: 1; min-width: 0; }
.trial-banner-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trial-banner-top b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.trial-days {
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.trial-banner-copy p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.trial-banner-copy p strong { color: #fff; font-weight: 700; }
.trial-track { height: 4px; margin-top: 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.trial-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #67e8f9, #fff); }
.trial-banner-copy small { display: block; margin-top: 5px; font-size: 9.5px; color: rgba(255, 255, 255, .6); }
.trial-banner-btn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 10px;
  background: #fff; color: #0a55c4; border: 1px solid rgba(255, 255, 255, .7);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.trial-banner-btn:hover { transform: translateY(-1px); background: #eff7ff; box-shadow: 0 10px 20px -14px rgba(2, 6, 23, .6); }
.trial-banner-btn i { font-size: 9px; }
body.dark .trial-banner { border-color: rgba(255, 255, 255, .14); }
@media (max-width: 767px) {
  .trial-banner { flex-wrap: wrap; align-items: flex-start; }
  .trial-banner-btn { margin-left: 56px; }
}
@media (max-width: 480px) {
  .trial-banner { padding: 14px; gap: 11px; }
  .trial-banner-btn { margin-left: 0; width: 100%; justify-content: center; }
}

.dash-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 34px;
  padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(120deg, #ffffff 0%, #eff7ff 58%, #ddeefe 100%);
  border: 1px solid #bcdcff;
  box-shadow: 0 18px 34px -30px rgba(18, 60, 125,.45);
}
.dash-brand { display: flex; align-items: center; gap: 14px; min-width: 0; margin-right: auto; }
/* The dashboard is the business's own screen: their logo and name lead, our wordmark stays in the
   kicker line. The RIZEN glyph only shows when no logo has been uploaded yet. */
.dash-brand .risen-mark { width: 48px; height: 48px; filter: drop-shadow(0 10px 18px rgba(10, 85, 196, .35)); }
.dash-brand-logo {
  width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain;
}
.dash-brand-kicker { margin-top: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: #64748b; }
.dash-brand-name {
  margin: 1px 0 0; font-size: clamp(26px, 4vw, 34px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em;
  color: #123c7d;
}
.dash-brand-sub { margin: 3px 0 0; font-size: 12px; color: #64748b; }
body.dark .dash-hero { background: linear-gradient(120deg, #1e1b2e 0%, #221a33 58%, #2a1b3d 100%); border-color: #3f2d5c; box-shadow: 0 18px 34px -30px rgba(47, 140, 247,.5); }
body.dark .dash-brand-kicker { color: #94a3b8; }
body.dark .dash-brand-name { color: #eef6ff; }
body.dark .dash-brand-sub { color: #94a3b8; }

/* ---------- live ranks ---------- */
.rank-band {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 12px 0 16px; padding: 11px 16px; max-width: 100%;
  border: 1px solid #bcdcff; border-radius: 16px;
  background:
    radial-gradient(520px 190px at 50% -30%, rgba(56, 189, 248, .4), transparent 70%),
    linear-gradient(150deg, #e8f2ff, #f5fbff 52%, #e2f7f4);
  box-shadow: 0 26px 54px -34px rgba(18, 60, 125, .55);
  cursor: pointer; width: 100%; font: inherit; color: inherit; text-align: center; display: block;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.rank-band:hover { transform: translateY(-2px); border-color: #7fc0ff; box-shadow: 0 34px 60px -34px rgba(18, 60, 125, .6); }
.rank-band:focus-visible { outline: 2px solid #036aee; outline-offset: 3px; }
.rank-halo {
  position: absolute; inset: -40% 22% auto -40%; height: 190%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(3, 106, 238, .16), rgba(94, 234, 212, .2), rgba(56, 189, 248, .16), rgba(3, 106, 238, .16));
  filter: blur(26px); animation: rankSpin 16s linear infinite;
}
.rank-core { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 14px; }
.rank-label {
  font-size: clamp(15px, 2.1vw, 19px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05;
  background: linear-gradient(100deg, #123c7d, #036aee 42%, #0d9488);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rank-stars { position: relative; display: flex; gap: 5px; }
.rank-star { font-size: 14px; color: #cbd5e1; }
.rank-star.on {
  color: #f6b422; text-shadow: 0 3px 12px rgba(246, 180, 34, .55);
  animation: rankPop .55s cubic-bezier(.2, 1.5, .4, 1) both;
}
.rank-star:nth-child(2) { animation-delay: .1s; }
.rank-star:nth-child(3) { animation-delay: .2s; }
.rank-star:nth-child(4) { animation-delay: .3s; }
.rank-star:nth-child(5) { animation-delay: .4s; }
.rank-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rank-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); border: 1px solid #cfe4fb;
  font-size: 10.5px; font-weight: 700; color: #334155;
}
.rank-chip b { color: #0a55c4; font-weight: 800; }
.rank-chip i { font-size: 9.5px; color: #0d9488; }
.rank-cheer { font-size: 11.5px; font-weight: 700; color: #0f766e; min-height: 14px; }
.rank-meter { width: min(200px, 46%); height: 5px; border-radius: 999px; background: rgba(18, 60, 125, .14); overflow: hidden; }
.rank-meter i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #036aee, #22d3ee, #5eead4);
  transition: width .8s cubic-bezier(.2, .8, .3, 1);
}
.rank-next { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: #5b6b86; }
body.dark .rank-band {
  border-color: #2c4a7d;
  background:
    radial-gradient(520px 190px at 50% -30%, rgba(56, 189, 248, .22), transparent 70%),
    linear-gradient(150deg, #101a33, #14213f 52%, #0f2a35);
}
body.dark .rank-label { background: linear-gradient(100deg, #bcdcff, #63b8ff 45%, #5eead4); -webkit-background-clip: text; background-clip: text; }
body.dark .rank-chip { background: rgba(12, 27, 52, .72); border-color: #29457a; color: #cbd5e1; }
body.dark .rank-chip b { color: #8ec3ff; }
body.dark .rank-cheer { color: #5eead4; }
body.dark .rank-meter { background: rgba(190, 225, 255, .16); }
body.dark .rank-star { color: #334155; }
body.dark .rank-star.on { color: #ffc94a; text-shadow: 0 3px 14px rgba(255, 201, 74, .6); }

@keyframes rankPop { 0% { transform: scale(.2) rotate(-24deg); opacity: 0; } 70% { transform: scale(1.22) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes rankSpin { to { transform: rotate(360deg); } }

/* ---------- the seller's desk ---------- */
.desk-band {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 16px 18px; margin-bottom: 18px; border-radius: 18px;
  border: 1px solid #bcdcff;
  background:
    radial-gradient(320px 150px at 96% -40%, rgba(94, 234, 212, .35), transparent 70%),
    linear-gradient(120deg, #eff7ff, #f7fbff 60%, #eafaf6);
}
.desk-stars { display: flex; align-items: center; gap: 14px; min-width: 0; }
.desk-rank { font-size: 17px; font-weight: 900; letter-spacing: -.03em; color: #123c7d; }
.desk-cheer { font-size: 12px; font-weight: 700; color: #0f766e; }
.desk-money { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.desk-figure { text-align: right; }
.desk-figure span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #64748b; }
.desk-figure b { display: block; font-size: 17px; font-weight: 800; color: #123c7d; }
.desk-figure.due b { color: #0a55c4; }
.desk-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
body.dark .desk-band { border-color: #2c4a7d; background: linear-gradient(120deg, #101a33, #14213f 60%, #0f2a35); }
body.dark .desk-rank, body.dark .desk-figure b { color: #eef6ff; }
body.dark .desk-figure.due b { color: #8ec3ff; }
body.dark .desk-figure span { color: #94a3b8; }
body.dark .desk-cheer { color: #5eead4; }

.verify-name {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px; margin-top: 12px;
  border-radius: 12px; border: 1px solid #a7e8d8; background: #eafaf6;
  font-size: 13px; font-weight: 700; color: #0f766e;
}
.verify-name.bad { border-color: #fbcfe8; background: #fdf2f8; color: #be185d; }
.verify-name b { font-weight: 900; }
.verify-name small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #64748b; }

/* ---------- live voucher status ---------- */
.live-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.live-strip b { font-size: 13px; font-weight: 800; color: #123c7d; }
body.dark .live-strip b { color: #bcdcff; }
/* Where the customers are: one line per unit, so a seller reads a dead site before a dead code. */
.live-routers { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.live-router {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #fff;
}
.live-router b { font-size: 12px; color: #123c7d; }
.live-router small { font-size: 10.5px; font-weight: 700; color: #64748b; }
body.dark .live-router { background: #16233c; border-color: #2a3c5c; }
body.dark .live-router b { color: #bcdcff; }
.state-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
.state-chip::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.state-chip.on { background: rgba(13, 148, 136, .12); color: #0f766e; }
.state-chip.off { background: #f1f5f9; color: #64748b; }
body.dark .state-chip.on { background: rgba(94, 234, 212, .14); color: #5eead4; }
body.dark .state-chip.off { background: #1e293b; color: #94a3b8; }

.rank-detail-row { padding: 10px 0; border-top: 1px solid #e8eef6; }
.rank-detail-row:first-child { border-top: 0; }
.rank-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 7px; }
.rank-detail-head b { color: #123c7d; font-weight: 800; }
.rank-detail-head span { color: #64748b; font-weight: 700; font-size: 11.5px; }
.rank-detail-row .rank-meter { width: 100%; margin: 0; }
.rank-detail-note { margin-top: 6px; font-size: 11px; color: #64748b; }
body.dark .rank-detail-row { border-top-color: #24344f; }
body.dark .rank-detail-head b { color: #bcdcff; }
body.dark .rank-detail-head span, body.dark .rank-detail-note { color: #94a3b8; }
.commission-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
.commission-row b { font-size: 14px; color: #123c7d; }
body.dark .commission-row { background: #16233c; border-color: #2a3c5c; }
body.dark .commission-row b { color: #bcdcff; }

@media (prefers-reduced-motion: reduce) {
  .rank-halo, .rank-stars::after, .rank-star.on, .state-chip.on::before { animation: none; }
  .rank-stars::after { display: none; }
  .rank-band:hover { transform: none; }
}

.voucher-sold-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; font-weight: 800; letter-spacing: .12em; color: #123c7d; background: #eff7ff; border: 1px dashed #8ec3ff; border-radius: 10px; padding: 10px; margin-top: 8px; }
body.dark .voucher-sold-code { background: #0a2450; border-color: #0d3a78; color: #bcdcff; }

/* Print-only helper used by the voucher template modal */
@media print {
  body * { visibility: hidden; }
  #voucher-print-area, #voucher-print-area * { visibility: visible; }
  #voucher-print-area { position: absolute; left: 0; top: 0; width: 100%; }
}

/* Captive portal phone previews */
.phone-frame {
  width: 168px;
  border-radius: 22px;
  border: 2.5px solid #475569;
  background: #0f172a;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.phone-notch {
  width: 36%;
  height: 5px;
  background: #334155;
  border-radius: 0 0 6px 6px;
  margin: 0 auto 4px;
}
.phone-screen {
  border-radius: 14px;
  overflow: hidden;
  min-height: 260px;
  font-family: system-ui, sans-serif;
}
.phone-header {
  padding: 10px 12px 8px;
}
.phone-body {
  padding: 8px 10px 12px;
}

/* ===== Interactive captive portal previews ===== */
.cp-phone { width: 176px; }
.cp-bezel {
  border-radius: 20px;
  border: 2.5px solid #475569;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.4);
  background: #0f172a;
}
.cp-screen {
  position: relative;
  min-height: 300px;
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
.cp-lower-third {
  height: 18px;
  overflow: hidden;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
}
.cp-lower-third-track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
  animation: cp-marquee 12s linear infinite;
}
.cp-lower-third-track span { flex-shrink: 0; }
@keyframes cp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
.cp-head {
  padding: 8px 10px 6px;
}
.cp-brand { font-size: 11px; font-weight: 700; }
.cp-support { font-size: 8px; margin-top: 2px; font-weight: 500; }
.cp-body { padding: 6px 8px 10px; }
.cp-section-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 4px;
}
.cp-pkg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 7px;
  border-radius: 7px;
  border: 1px solid transparent;
  margin-bottom: 4px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cp-pkg:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--hover) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--hover) 35%, transparent);
}
.cp-pkg-name { font-size: 9px; font-weight: 600; }
.cp-pkg-meta { font-size: 7px; opacity: 0.65; }
.cp-buy {
  font-size: 7px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  transition: transform 0.15s;
}
.cp-pkg:hover .cp-buy { transform: scale(1.08); }
.cp-voucher {
  display: flex;
  gap: 4px;
  border: 1px dashed;
  border-radius: 6px;
  padding: 4px;
}
.cp-voucher input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 8px;
  outline: none;
  min-width: 0;
}
.cp-voucher button {
  border: none;
  font-size: 7px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.cp-login {
  border: 1px solid;
  border-radius: 7px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cp-login input {
  background: transparent;
  border: 1px solid;
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 8px;
  outline: none;
  width: 100%;
}
.cp-login-btn {
  border: none;
  border-radius: 4px;
  padding: 4px;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 2px;
  transition: filter 0.15s, transform 0.15s;
}
.cp-login-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

.cp-pkg-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* Top session-expiry ticker (like captive lower-third) */
.expiry-top-banner {
  background: linear-gradient(90deg, #f59e0b, #f97316, #f59e0b);
  color: #1c1917;
  overflow: hidden;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}
.expiry-top-inner {
  display: flex;
  align-items: center;
  height: 36px;
  position: relative;
}
.expiry-top-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  animation: cp-marquee 18s linear infinite;
  padding-left: 8px;
}
.expiry-top-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.15);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #1c1917;
}

/* Analytics bars */
.chart-bar {
  min-height: 4px;
  transform-origin: bottom;
  animation: chartGrow 0.7s ease-out both;
}
@keyframes chartGrow {
  from { transform: scaleY(0); opacity: 0.4; }
  to { transform: scaleY(1); opacity: 1; }
}
.chart-fill {
  animation: chartFill 0.9s ease-out both;
}
@keyframes chartFill {
  from { width: 0 !important; }
}

/* Header encouragement pill */
.encouragement-pill {
  background: #eef6ff;
  border-color: #bcdcff;
  color: #0a4fae;
}
body.dark .encouragement-pill {
  background: #0a2450;
  border-color: #5b21b6;
  color: #bcdcff;
}

/* Voucher and payment filter chips */
.vx-filter {
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.vx-filter.active, .vx-filter:hover {
  background: #ddeefe;
  border-color: #55a4ff;
  color: #0a55c4;
}
body.dark .vx-filter {
  background: #1e293b;
  border-color: #475569;
  color: #94a3b8;
}
body.dark .vx-filter.active, body.dark .vx-filter:hover {
  background: #0d3a78;
  border-color: #0a55c4;
  color: #bcdcff;
}

/* Primary gateway routing */
.gateway-route-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #475569;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
}
.gateway-route-strip i { color: #036aee; }
.gateway-primary {
  border-color: #2f8cf7;
  box-shadow: 0 0 0 1px rgba(47, 140, 247, .22), 0 10px 22px -16px rgba(3, 106, 238, .55);
}
body.dark .gateway-route-strip {
  background: #0f172a;
  border-color: #475569;
  color: #94a3b8;
}
body.dark .gateway-primary { border-color: #0a55c4; }

.gateway-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 2px;
}
.gateway-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gateway-toggle-track {
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: background .18s ease;
}
.gateway-toggle-thumb {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .18s ease;
}
.gateway-toggle input:checked + .gateway-toggle-track { background: #036aee; }
.gateway-toggle input:checked + .gateway-toggle-track .gateway-toggle-thumb { transform: translateX(16px); }
.gateway-toggle input:disabled + .gateway-toggle-track { opacity: .4; cursor: not-allowed; }
body.dark .gateway-toggle-track { background: #475569; }
body.dark .gateway-toggle input:checked + .gateway-toggle-track { background: #2f8cf7; }

/* Client updates feed + animated lower-third */
.client-update-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  animation: clientUpdateFade .55s ease-out both;
}
.client-update-item.important {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
}
.client-update-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ddeefe;
  color: #0a55c4;
  flex-shrink: 0;
  font-size: 12px;
}
@keyframes clientUpdateFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
body.dark .client-update-item {
  background: #1e293b;
  border-color: #334155;
}
body.dark .client-update-item.important {
  background: #422006;
  border-color: #78350f;
  border-left-color: #f59e0b;
}
body.dark .client-update-icon {
  background: #0d3a78;
  color: #bcdcff;
}
.client-update-banner {
  background: linear-gradient(90deg, #0a4fae, #036aee, #2f8cf7);
  color: #fff;
  animation: tickerFadeIn .45s ease-out both;
}
@keyframes tickerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.client-update-banner .expiry-top-close {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* Client ticket threads */
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.ticket-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  animation: clientUpdateFade .3s ease-out both;
}
.ticket-msg.client { align-self: flex-start; align-items: flex-start; }
.ticket-msg.agent { align-self: flex-end; align-items: flex-end; }
.ticket-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ticket-msg.client .ticket-bubble {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
  color: #334155;
}
.ticket-msg.agent .ticket-bubble {
  background: #0a55c4;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ticket-msg-meta { font-size: 10px; color: #94a3b8; margin-top: 3px; }
.ticket-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .15);
  flex-shrink: 0;
}
.ticket-portal-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef6ff, #eff7ff);
  border: 1px solid #bcdcff;
  color: #0a55c4;
}
.ticket-portal-note > i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  flex-shrink: 0;
}
body.dark .ticket-thread { background: #0f172a; border-color: #334155; }
body.dark .ticket-msg.client .ticket-bubble { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark .ticket-msg.agent .ticket-bubble { background: #0a55c4; color: #fff; }
body.dark .ticket-portal-note { background: #0a2450; border-color: #0d3a78; color: #bcdcff; }
body.dark .ticket-portal-note > i { background: #0d3a78; }

/* Billing collection details */
.pay-detail-block {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
}
.pay-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #0a55c4;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
body.dark .pay-detail-block {
  background: #0f172a;
  border-color: #334155;
}
body.dark .pay-detail-title { color: #55a4ff; }

/* ============================================================
   Communications, referrals & client updates
   ============================================================ */
.comms-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  font-size: 13px; font-weight: 600; transition: transform .18s ease, border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.comms-tab i { font-size: 11px; opacity: .8; }
.comms-tab:hover { border-color: #55a4ff; color: #0a55c4; transform: translateY(-1px); }
.comms-tab.active {
  background: #0a55c4; border-color: #0a55c4; color: #fff;
  box-shadow: 0 10px 22px -12px rgba(10, 85, 196, .75);
}
.comms-tab-count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: #f1f5f9; color: #475569; font-size: 10px; font-weight: 700; text-align: center;
}
.comms-tab.active .comms-tab-count { background: rgba(255, 255, 255, .2); color: #fff; }
body.dark .comms-tab { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark .comms-tab:hover { border-color: #0a55c4; color: #8ec3ff; }
body.dark .comms-tab.active { background: #0a55c4; border-color: #0a55c4; color: #fff; }
body.dark .comms-tab-count { background: #334155; color: #cbd5e1; }

.announcement-card {
  display: flex; gap: 14px; padding: 16px;
  background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #8ec3ff;
  border-radius: 12px; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.announcement-card:hover {
  transform: translateY(-1px); border-color: #8ec3ff;
  box-shadow: 0 12px 26px -20px rgba(15, 23, 42, .45);
}
.announcement-card.is-important {
  border-left-color: #f59e0b;
  background: linear-gradient(180deg, #fffdf5, #fff 65%);
}
.announcement-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #ddeefe; color: #0a55c4; font-size: 14px;
}
.announcement-card.is-important .announcement-icon { background: #fef3c7; color: #b45309; }
.announcement-actions {
  display: grid; grid-template-columns: repeat(2, auto); gap: 6px;
  align-content: start; justify-items: stretch; flex-shrink: 0; max-width: 260px;
}
.announcement-actions .btn { justify-content: center; }
@media (max-width: 900px) {
  .announcement-card { flex-wrap: wrap; }
  .announcement-actions { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; max-width: none; justify-content: flex-end; }
}
body.dark .announcement-card { background: #1e293b; border-color: #334155; border-left-color: #0a55c4; }
body.dark .announcement-card.is-important { border-left-color: #f59e0b; background: linear-gradient(180deg, rgba(245, 158, 11, .06), #1e293b 65%); }
body.dark .announcement-icon { background: #061a3a; color: #8ec3ff; }
body.dark .announcement-card.is-important .announcement-icon { background: #451a03; color: #fbbf24; }

.ann-toggle-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px;
  border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s; background: #fff;
}
.ann-toggle-row:hover { border-color: #8ec3ff; background: #eff7ff; }
.ann-toggle-row input { margin-top: 2px; accent-color: #036aee; }
.ann-toggle-row > span { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #64748b; line-height: 1.45; }
.ann-toggle-row strong { font-size: 12px; }
.portal-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
@media (max-width: 560px) { .portal-toggle-grid { grid-template-columns: 1fr; } }
body.dark .ann-toggle-row { background: #0f172a; border-color: #334155; }
body.dark .ann-toggle-row:hover { background: #0a2450; border-color: #0a55c4; }
body.dark .ann-toggle-row > span { color: #94a3b8; }

/* Pressable switch cards. A checkbox on a settings page says nothing about what it opens, what it
   costs the business, or whether it is running right now — so the whole card is the control and carries
   all three lines. Used both as a <label> around a form checkbox and as a <button> that posts a change. */
.switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 640px) { .switch-grid { grid-template-columns: 1fr; } }
.switch-card {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 12px 13px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff;
  font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.switch-card:hover { border-color: #8ec3ff; }
.switch-card:focus-visible { outline: 2px solid #036aee; outline-offset: 2px; }
.switch-card input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.switch-name { font-size: 12.5px; font-weight: 700; color: #1e293b; }
.switch-does, .switch-costs { font-size: 11px; line-height: 1.45; color: #64748b; }
.switch-costs { color: #94a3b8; }
.switch-now { font-size: 11px; font-weight: 700; color: #036aee; margin-top: 2px; }
.switch-pill { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; }
.switch-pill::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .15s;
}
.switch-card.on { border-color: #036aee; background: #f3f8ff; }
.switch-card.on .switch-pill { background: #036aee; }
.switch-card.on .switch-pill::after { transform: translateX(16px); }
.switch-card:disabled { cursor: default; opacity: .6; }
.switch-card:disabled:hover { border-color: #e2e8f0; }
.switch-card.on:disabled:hover { border-color: #036aee; }
.switch-extra { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11px; color: #64748b; }
body.dark .switch-card { background: #0f172a; border-color: #334155; }
body.dark .switch-card:hover { border-color: #0a55c4; }
body.dark .switch-name { color: #e2e8f0; }
body.dark .switch-does { color: #94a3b8; }
body.dark .switch-costs { color: #64748b; }
body.dark .switch-now { color: #8ec3ff; }
body.dark .switch-card.on { background: #0a2450; border-color: #0a55c4; }
body.dark .switch-pill { background: #334155; }
body.dark .switch-card.on .switch-pill { background: #0a55c4; }

/* The policy dials, each in its own card: the number, the sentence it turns into on the customer's
   page, and the current reading — so a dial is never set without knowing what it is worth. */
.dial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 900px) { .dial-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dial-grid { grid-template-columns: 1fr; } }
.dial-card {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 11px;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
.dial-name { font-size: 11px; font-weight: 700; color: #334155; }
.dial-says { font-size: 10.5px; line-height: 1.4; color: #94a3b8; }
.dial-input {
  width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 9px;
  background: #fff; color: #0f172a; font-family: inherit; font-size: 13px; font-weight: 600;
}
.dial-input:focus { outline: none; border-color: #036aee; box-shadow: 0 0 0 3px rgba(3, 106, 238, .12); }
.dial-select { width: 100%; margin-top: 3px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #0f172a; font-family: inherit; font-size: 12px; font-weight: 600; }
body.dark .dial-card { background: #0f172a; border-color: #334155; }
body.dark .dial-name { color: #e2e8f0; }
body.dark .dial-says { color: #64748b; }
body.dark .dial-input, body.dark .dial-select { background: #0b1526; border-color: #334155; color: #e2e8f0; }

.portal-announcement-preview {
  border-radius: 14px; padding: 16px 14px 12px;
  background: linear-gradient(155deg, #0a2450, #123c7d 55%, #0a55c4);
  color: #eef6ff; border: 1px solid #0d3a78;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.pap-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #8ec3ff; margin-bottom: 10px; font-weight: 700;
}
.pap-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
}
.pap-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.pap-item i { margin-top: 2px; font-size: 11px; color: #bcdcff; }
.pap-empty { font-size: 11px; color: #8ec3ff; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.pap-foot {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .2);
  font-size: 10px; color: #8ec3ff; display: flex; gap: 6px; align-items: center;
}
.pap-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; }
.pap-row:last-child { border-bottom: none; }
.pap-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
body.dark .pap-row { border-color: #334155; }

.referral-hero {
  position: relative; overflow: hidden; border-radius: 16px; padding: 22px;
  background: linear-gradient(135deg, #0d3a78, #0a55c4 55%, #2f8cf7);
  color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 44px -32px rgba(13, 58, 120, .8);
}
.referral-hero::after {
  content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  right: -70px; bottom: -120px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
}
.referral-hero > * { position: relative; z-index: 1; }
.referral-code-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: #eff7ff; border: 1px dashed #55a4ff; color: #0f479e;
}
.referral-hero .referral-code-pill {
  display: inline-flex; justify-content: flex-start; gap: 9px;
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45);
  color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
}
.referral-code-box {
  text-align: center; padding: 18px; border-radius: 14px;
  background: linear-gradient(160deg, #eff7ff, #fff); border: 1px dashed #8ec3ff;
}
.btn-light { background: #fff; color: #0f479e; border: 1px solid #bcdcff; }
.btn-light:hover { background: #eff7ff; color: #123c7d; border-color: #55a4ff; }
body.dark .referral-code-pill { background: #0a2450; border-color: #0a55c4; color: #bcdcff; }
body.dark .referral-code-box { background: linear-gradient(160deg, #0a2450, #1e293b); border-color: #0a55c4; }

.switch {
  width: 44px; height: 24px; border-radius: 999px; background: #cbd5e1;
  position: relative; transition: background .2s; flex-shrink: 0; border: none; cursor: pointer;
}
.switch span {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s;
}
.switch.on { background: #036aee; }
.switch.on span { transform: translateX(20px); }
body.dark .switch { background: #475569; }
body.dark .switch.on { background: #2f8cf7; }

.client-update-item {
  display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid #f1f5f9; border-radius: 10px; background: #fff;
  opacity: 0; animation: clientUpdateIn .45s ease forwards;
}
.client-update-item.important { border-color: #fde68a; background: linear-gradient(90deg, #fffbeb, #fff); }
.client-update-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #ddeefe; color: #0a55c4; font-size: 11px;
}
.client-update-item.important .client-update-icon { background: #fef3c7; color: #b45309; }
.client-update-edit {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid #e2e8f0; background: #fff;
  color: #94a3b8; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; transition: all .15s;
}
.client-update-edit:hover { border-color: #55a4ff; color: #0a55c4; background: #eff7ff; }
.client-update-note { background: #f8fafc; }
body.dark .client-update-item { background: #0f172a; border-color: #334155; }
body.dark .client-update-item.important { background: linear-gradient(90deg, rgba(245, 158, 11, .07), #0f172a); border-color: #78350f; }
body.dark .client-update-icon { background: #061a3a; color: #8ec3ff; }
body.dark .client-update-item.important .client-update-icon { background: #451a03; color: #fbbf24; }
body.dark .client-update-edit { background: #1e293b; border-color: #475569; color: #94a3b8; }
body.dark .client-update-edit:hover { background: #0a2450; border-color: #0a55c4; color: #55a4ff; }
body.dark .client-update-note { background: #0f172a; }

.empty-state-sm {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  border: 1px dashed #e2e8f0; border-radius: 10px; background: #f8fafc;
}
.empty-state-sm > i {
  width: 32px; height: 32px; border-radius: 9px; background: #f1f5f9; color: #64748b;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.dark .empty-state-sm { background: #0f172a; border-color: #334155; }
body.dark .empty-state-sm > i { background: #1e293b; color: #94a3b8; }

@keyframes clientUpdateIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Dashboard income mini charts
   ============================================================ */
.income-charts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 16px; }
.mini-chart {
  border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.mini-bars { display: flex; align-items: flex-end; gap: 10px; }
.mini-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mini-bar-val { font-size: 9px; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.mini-bar-track { height: 74px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.mini-bar {
  width: 100%; max-width: 36px; border-radius: 7px 7px 4px 4px;
  background: linear-gradient(180deg, #55a4ff, #036aee);
  transform-origin: bottom; animation: barGrow .7s cubic-bezier(.2, .8, .2, 1) both;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); transition: filter .15s;
}
.mini-bar:hover { filter: brightness(1.1); }
.mini-bar.is-peak { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.mini-bar-label { font-size: 9px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mini-bar-label.today { color: #0a55c4; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.gateway-split-body { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.donut {
  --p: 0deg;
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(#f59e0b 0 var(--p), #f43f5e var(--p) 360deg);
  display: flex; align-items: center; justify-content: center;
  animation: donutIn .7s cubic-bezier(.2, .8, .2, 1) both;
  box-shadow: 0 10px 24px -14px rgba(244, 63, 94, .55);
}
.donut-hole {
  width: 74px; height: 74px; border-radius: 50%; background: #fff; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-value { font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.1; white-space: nowrap; }
.donut-label { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-top: 2px; }
@keyframes donutIn { from { opacity: 0; transform: rotate(-70deg) scale(.8); } to { opacity: 1; transform: none; } }
.split-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.split-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; font-size: 11px; color: #64748b; }
.split-row strong { font-size: 11px; color: #1e293b; font-weight: 600; white-space: nowrap; }
.split-dot { width: 8px; height: 8px; border-radius: 3px; }
.split-dot.mtn { background: #f59e0b; }
.split-dot.airtel { background: #f43f5e; }
.split-dot.other { background: #2f8cf7; }
@media (max-width: 1100px) { .income-charts { grid-template-columns: 1fr; } }
body.dark .mini-chart { background: linear-gradient(180deg, #1e293b, #172033); border-color: #334155; }
body.dark .donut-hole { background: #1e293b; }
body.dark .donut-value { color: #f1f5f9; }
body.dark .donut-label, body.dark .mini-bar-label, body.dark .mini-bar-val { color: #64748b; }
body.dark .mini-bar-label.today { color: #55a4ff; }
body.dark .split-row { color: #94a3b8; }
body.dark .split-row strong { color: #e2e8f0; }

/* ============================================================
   Payments: login delivery
   ============================================================ */
.payment-delivery-note {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-radius: 12px; background: linear-gradient(135deg, #eef6ff, #fff);
  border: 1px solid #bcdcff; color: #0a55c4;
}
.payment-delivery-note > i {
  width: 30px; height: 30px; border-radius: 9px; background: #dbeafe;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px;
}
.login-credential-card {
  padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0;
  background: linear-gradient(160deg, #eff7ff, #fff);
}
.delivery-sent, .delivery-not-sent {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px;
  border-radius: 9px; font-size: 11px; line-height: 1.5;
}
.delivery-sent { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.delivery-not-sent { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
body.dark .payment-delivery-note { background: #0a2450; border-color: #0d3a78; color: #bcdcff; }
body.dark .payment-delivery-note > i { background: #0d3a78; }
body.dark .login-credential-card { background: linear-gradient(160deg, #0a2450, #1e293b); border-color: #0d3a78; }
body.dark .delivery-sent { background: #052e16; border-color: #166534; color: #4ade80; }
body.dark .delivery-not-sent { background: #451a03; border-color: #78350f; color: #fbbf24; }

/* ============================================================
   Captive portal gallery, preview and palettes
   ============================================================ */
.portal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.portal-stat {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.portal-stat-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.portal-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; font-weight: 600; }
.portal-stat-value { font-size: 13px; font-weight: 600; color: #1e293b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cp-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.cp-card:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -32px rgba(15, 23, 42, .55); border-color: #8ec3ff; }
.cp-card-active { border-color: #55a4ff; box-shadow: 0 0 0 1px #55a4ff inset, 0 18px 36px -30px rgba(3, 106, 238, .6); }
.cp-live-stage {
  position: relative; height: 248px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: 16px 0; background: radial-gradient(circle at 50% 0%, #312e81, #0f172a 72%);
}
.cp-mini-phone {
  position: relative; z-index: 1; width: 212px; height: 216px; padding: 6px; border-radius: 26px;
  background: #0f172a; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 28px 46px -26px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.cp-mini-screen { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #0f172a; }
.cp-live-frame {
  position: absolute; top: 0; left: 0; width: 420px; height: 560px; border: 0;
  transform: scale(.476); transform-origin: top left; pointer-events: none; background: #0f172a;
}
.cp-live-hit {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  background: transparent; border: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cp-live-hit span {
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
  background: rgba(15, 23, 42, .72); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px); padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center;
}
.cp-live-hit:hover span, .cp-live-hit:focus-visible span { opacity: 1; transform: none; }
.cp-active-flag {
  position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px;
  background: rgba(15, 23, 42, .75); color: #8ec3ff; font-size: 10px; font-weight: 600;
  backdrop-filter: blur(6px); border: 1px solid rgba(142, 195, 255, .35);
}
.cp-active-flag i { font-size: 5px; color: #4ade80; }
.palette-dots {
  display: inline-flex; gap: 3px; flex-shrink: 0; padding: 3px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px;
}
.palette-dots span { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
body.dark .portal-stat { background: #1e293b; border-color: #334155; }
body.dark .portal-stat-value { color: #f1f5f9; }
body.dark .cp-card-active { border-color: #2f8cf7 !important; box-shadow: 0 0 0 1px #2f8cf7 inset, 0 18px 36px -30px rgba(47, 140, 247, .7); }
body.dark .palette-dots { background: #0f172a; border-color: #334155; }

.modal-panel.captive-preview-modal { max-width: 980px; }
.captive-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.preview-phone-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px;
  border-radius: 16px; border: 1px solid #dbeafe;
  background: radial-gradient(circle at 50% 0%, #dbeafe, #f8fafc 70%);
}
.preview-phone {
  width: 300px; max-width: 100%; background: #0f172a; border-radius: 34px; padding: 10px 9px 12px;
  position: relative; box-shadow: 0 34px 64px -34px rgba(15, 23, 42, .65), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.preview-notch { width: 76px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .18); margin: 0 auto 7px; }
.preview-frame { width: 100%; height: 560px; border: 0; border-radius: 24px; background: #fff; display: block; }
.preview-caption { font-size: 10px; color: #94a3b8; text-align: center; }
/* The same page drawn as the set it will be read on: a 16:9 panel on a stand, no phone shell. */
.preview-tv { width: 100%; max-width: 640px; background: #0f172a; border-radius: 14px; padding: 9px; }
.preview-tv-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #0b1220; display: block; }
.preview-tv-stand { width: 120px; height: 7px; border-radius: 999px; background: #cbd5e1; margin: 8px auto 0; }
body.dark .preview-tv-stand { background: #334155; }
.preview-side { display: flex; flex-direction: column; gap: 14px; }
.preview-side-block { padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.preview-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 11px; color: #475569; }
.preview-feature-list li { display: flex; gap: 7px; align-items: flex-start; }
.preview-feature-list i { color: #16a34a; font-size: 9px; margin-top: 3px; }
.preview-side-actions { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) {
  .captive-preview-body { grid-template-columns: 1fr; }
  .preview-phone { width: 280px; }
  .preview-frame { height: 480px; }
}
body.dark .preview-phone-wrap { background: radial-gradient(circle at 50% 0%, #0a2450, #0f172a 70%); border-color: #0d3a78; }
body.dark .preview-side-block { background: #1e293b; border-color: #334155; }
body.dark .preview-feature-list { color: #cbd5e1; }

.palette-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.palette-preset {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.palette-preset > span:first-child { height: 18px; border-radius: 6px; }
.palette-preset > span:nth-child(2), .palette-preset > span:nth-child(3) {
  height: 8px; border-radius: 3px; border: 1px solid #e2e8f0;
}
.palette-preset small { font-size: 9px; color: #64748b; text-align: center; font-weight: 600; }
.palette-preset:hover { border-color: #55a4ff; transform: translateY(-1px); }
.palette-preset.selected { border-color: #036aee; box-shadow: 0 0 0 2px rgba(3, 106, 238, .18); }
.palette-color {
  width: 100%; height: 40px; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 3px; background: #fff; cursor: pointer;
}
.palette-color::-webkit-color-swatch-wrapper { padding: 0; }
.palette-color::-webkit-color-swatch { border: none; border-radius: 5px; }
@media (max-width: 560px) { .palette-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.dark .palette-preset { background: #0f172a; border-color: #334155; }
body.dark .palette-preset small { color: #94a3b8; }
body.dark .palette-color { background: #0f172a; border-color: #334155; }

/* ============================================================
   Wallet withdrawal flow
   ============================================================ */
.withdraw-steps { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 18px; }
.ws-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 10px; color: #94a3b8; font-weight: 600; text-align: center;
}
.ws-item span {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff;
  color: #94a3b8; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; transition: all .2s;
}
.ws-item.active span { background: #036aee; border-color: #036aee; color: #fff; box-shadow: 0 0 0 4px rgba(3, 106, 238, .14); }
.ws-item.active b { color: #0a55c4; }
.ws-item.done span { background: #dcfce7; border-color: #86efac; color: #15803d; font-size: 0; }
.ws-item.done span::before { content: "\f00c"; font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro"; font-weight: 900; font-size: 10px; }
.ws-item.done b { color: #15803d; }
.withdraw-balance {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px;
  border-radius: 12px; background: linear-gradient(135deg, #eff7ff, #eef6ff); border: 1px solid #bcdcff;
}
.amount-field {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.amount-field:focus-within { border-color: #2f8cf7; box-shadow: 0 0 0 4px rgba(47, 140, 247, .12); }
.amount-field > span { font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: .06em; }
.amount-field input {
  flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
  font-size: 22px; font-weight: 700; color: #1e293b; font-family: inherit;
  appearance: textfield; -moz-appearance: textfield;
}
.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-field input::placeholder { color: #cbd5e1; font-weight: 600; }
/* A payout number carries its country outside the box — today that is +256 — so the operator types the
   subscriber digits and reads back the whole international number. A number written with its own +code
   is sent as written, which is how a country RIZEN has not opened yet still gets paid. */
.wd-number {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.wd-number:focus-within { border-color: #2f8cf7; box-shadow: 0 0 0 4px rgba(47, 140, 247, .12); }
.wd-cc {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--brand-dark);
  padding: 4px 9px; border-radius: 8px; background: var(--brand-soft);
}
.wd-number-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: #1e293b; }
.wd-number-input::placeholder { color: #cbd5e1; }
.wd-number-read { margin: 6px 0 0; font-size: 11px; color: #64748b; }
body.dark .wd-number { background: #1e293b; border-color: #334155; }
body.dark .wd-cc { background: #0a2450; color: var(--brand); }
body.dark .wd-number-input { color: #e2e8f0; }
body.dark .wd-number-read { color: #94a3b8; }
/* Cover the digits on the screen. Nothing about the transaction changes with it. */
.amount-eye {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: #94a3b8; cursor: pointer;
  display: grid; place-items: center; font-size: 13px;
  transition: background .15s, color .15s;
}
.amount-eye:hover { background: var(--brand-soft); color: var(--brand-dark); }
.amount-eye.inline { display: inline-grid; width: 26px; height: 26px; margin-left: 6px; vertical-align: -4px; font-size: 12px; }
body.dark .amount-eye:hover { background: #0a2450; color: var(--brand); }
.wd-quote {
  margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 12px;
  overflow: hidden; background: #fff;
}
.wd-quote-line {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px;
  font-size: 11.5px; border-bottom: 1px dashed #f1f5f9;
}
.wd-quote-line:last-child { border-bottom: none; }
.wd-quote-line span { color: #94a3b8; }
.wd-quote-line b { color: #1e293b; font-weight: 600; }
.wd-quote-line.total { background: #f0fdf4; }
.wd-quote-line.total b { color: #047857; }
.wd-fee-head {
  display: flex; justify-content: space-between; padding: 7px 12px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #94a3b8; background: #f8fafc; border-bottom: 1px solid #f1f5f9;
}
.wd-fee-scroll { max-height: 150px; overflow-y: auto; overscroll-behavior: contain; }
.wd-fee-band {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px;
  font-size: 11.5px; border-bottom: 1px dashed #f1f5f9;
}
.wd-fee-band:last-child { border-bottom: none; }
.wd-fee-band span { color: #64748b; }
.wd-fee-band b { color: #1e293b; font-weight: 600; }
body.dark .wd-quote { background: #0f172a; border-color: #334155; }
body.dark .wd-quote-line, body.dark .wd-fee-band { border-color: #334155; }
body.dark .wd-quote-line b, body.dark .wd-fee-band b { color: #e2e8f0; }
body.dark .wd-quote-line.total { background: #052e16; }
body.dark .wd-quote-line.total b { color: #4ade80; }
body.dark .wd-fee-head { background: #0a2450; border-color: #334155; color: #7fa7d8; }
body.dark .wd-fee-band span { color: #94a3b8; }
.quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.quick-amounts button {
  font-size: 10.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; transition: all .15s;
}
.quick-amounts button:hover { border-color: #55a4ff; color: #0a55c4; background: #eff7ff; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dest-chips button {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px;
  padding: 5px 10px; border-radius: 999px; border: 1px solid #e2e8f0;
  background: #fff; color: #64748b; transition: all .15s;
}
.dest-chips button:hover { border-color: #55a4ff; color: #0a55c4; }
.dest-chips button.selected { border-color: #036aee; background: #eff7ff; color: #0f479e; }
.otp-explain {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px;
  border-radius: 10px; background: #eef2ff; border: 1px solid #e0e7ff; color: #123c7d; font-size: 11px;
}
.otp-explain > i {
  width: 26px; height: 26px; border-radius: 8px; background: #e0e7ff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.otp-explain > div { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.otp-explain b { font-size: 11.5px; }
.otp-explain span { color: #036aee; opacity: .85; }
.otp-demo {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 11px; line-height: 1.5;
}
.otp-demo.compact { align-items: center; justify-content: space-between; }
.otp-demo-icon {
  width: 34px; height: 34px; border-radius: 10px; background: #fef3c7; color: #b45309;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.otp-demo-code { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .08em; color: #78350f; }
.otp-demo-code b { font-size: 16px; letter-spacing: .2em; }
.otp-hero {
  width: 58px; height: 58px; border-radius: 50%; margin: 4px auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(140deg, #ddeefe, #dbeafe); color: #0a55c4;
  box-shadow: 0 0 0 8px rgba(221, 238, 254, .6);
}
.otp-input {
  text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: .45em; padding-left: .45em;
}
.withdraw-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.receipt-success { text-align: center; padding: 6px 0 14px; }
.receipt-check {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: #dcfce7; color: #15803d; font-size: 24px;
  box-shadow: 0 0 0 8px rgba(220, 252, 231, .6);
  animation: receiptPop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.receipt-success h3 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; }
.receipt-success p { margin: 4px 0 0; font-size: 12px; color: #64748b; }
.receipt-card { margin-top: 6px; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.receipt-card > div {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 13px;
  font-size: 11.5px; border-bottom: 1px dashed #f1f5f9;
}
.receipt-card > div:last-child { border-bottom: none; background: #f8fafc; }
.receipt-card span { color: #94a3b8; }
.receipt-card b { color: #1e293b; font-weight: 600; text-align: right; word-break: break-word; }
@keyframes receiptPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
body.dark .ws-item span { background: #0f172a; border-color: #475569; color: #94a3b8; }
body.dark .ws-item.active span { background: #036aee; border-color: #036aee; color: #fff; }
body.dark .ws-item.done span { background: #052e16; border-color: #166534; color: #4ade80; }
body.dark .withdraw-balance { background: linear-gradient(135deg, #0a2450, #1e293b); border-color: #0d3a78; }
body.dark .amount-field { background: #0f172a; border-color: #334155; }
body.dark .amount-field input { color: #f1f5f9; }
body.dark .quick-amounts button { background: #0f172a; border-color: #475569; color: #cbd5e1; }
body.dark .quick-amounts button:hover { background: #0a2450; border-color: #0a55c4; color: #8ec3ff; }
body.dark .dest-chips button { background: #0f172a; border-color: #475569; color: #94a3b8; }
body.dark .dest-chips button.selected { background: #0a2450; border-color: #2f8cf7; color: #bcdcff; }
body.dark .otp-explain { background: #0a2450; border-color: #123c7d; color: #c7d2fe; }
body.dark .otp-explain > i { background: #312e81; }
body.dark .otp-explain span { color: #a5b4fc; }
body.dark .otp-demo { background: #451a03; border-color: #78350f; color: #fbbf24; }
body.dark .otp-demo-icon { background: #78350f; color: #fbbf24; }
body.dark .otp-demo-code { color: #fde68a; }
body.dark .otp-hero { background: linear-gradient(140deg, #061a3a, #0a2450); color: #bcdcff; box-shadow: 0 0 0 8px rgba(6, 26, 58, .5); }
body.dark .receipt-check { background: #052e16; color: #4ade80; box-shadow: 0 0 0 8px rgba(5, 46, 22, .6); }
body.dark .receipt-success h3 { color: #f1f5f9; }
body.dark .receipt-card { border-color: #334155; }
body.dark .receipt-card > div { border-color: #334155; }
body.dark .receipt-card > div:last-child { background: #0f172a; }
body.dark .receipt-card b { color: #e2e8f0; }

/* ============================================================
   Portal deploy card + install modal
   ============================================================ */
.deploy-card {
  margin-top: 24px; padding: 20px; border-radius: 16px; position: relative; overflow: hidden;
  border: 1px solid #bcdcff;
  background: linear-gradient(165deg, #eff7ff, #fff 42%, #fff);
}
.deploy-card::before {
  content: ""; position: absolute; top: -80px; right: -60px; width: 220px; height: 220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 140, 247, .16), transparent 70%);
}
.deploy-head { display: flex; gap: 13px; align-items: center; position: relative; }
.deploy-icon {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: linear-gradient(140deg, #036aee, #55a4ff); color: #fff;
  box-shadow: 0 12px 24px -14px rgba(3, 106, 238, .8);
}
.deploy-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; }
.deploy-head p { margin: 2px 0 0; font-size: 12px; color: #64748b; }
.deploy-flow { display: flex; align-items: center; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.deploy-flow-step {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 11px;
  background: #fff; border: 1px solid #bcdcff; flex: 1; min-width: 170px;
}
.deploy-flow-step > span {
  width: 24px; height: 24px; border-radius: 50%; background: #ddeefe; color: #0a55c4;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.deploy-flow-step div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.deploy-flow-step b { font-size: 12px; color: #1e293b; }
.deploy-flow-step small { font-size: 10px; color: #94a3b8; }
.deploy-flow > i { color: #8ec3ff; font-size: 10px; }
.deploy-cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 15px; border-radius: 12px;
  background: linear-gradient(120deg, #123c7d, #0a55c4); color: #fff;
}
.deploy-cta-copy { display: flex; flex-direction: column; gap: 2px; }
.deploy-cta-copy b { font-size: 13.5px; }
.deploy-cta-copy span { font-size: 11px; color: #bcdcff; }
.deploy-cta-row .btn-primary { background: #fff; color: #0f479e; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .4); }
.deploy-cta-row .btn-primary:hover { background: #eff7ff; color: #123c7d; }
.deploy-saved { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.deploy-saved-title {
  display: flex; gap: 7px; align-items: center; padding: 9px 13px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: #94a3b8;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.deployment-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #f1f5f9; }
.deployment-row:last-child { border-bottom: none; }
.deployment-icon {
  width: 30px; height: 30px; border-radius: 8px; background: #ddeefe; color: #0a55c4;
  display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.deploy-explainer { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; padding: 0 13px; }
.deploy-explainer summary {
  display: flex; gap: 7px; align-items: center; cursor: pointer; padding: 11px 0;
  font-size: 12px; font-weight: 600; color: #475569; list-style: none;
}
.deploy-explainer summary::-webkit-details-marker { display: none; }
.deploy-explainer summary i { color: #2f8cf7; }
.deploy-explainer-body { padding: 0 0 13px; font-size: 11.5px; color: #64748b; line-height: 1.6; }
.deploy-explainer-body p { margin: 0 0 8px; }
.deploy-explainer-body b { color: #334155; }
.deploy-summary { border: 1px solid #bcdcff; border-radius: 12px; padding: 12px; background: linear-gradient(160deg, #eff7ff, #fff); }
.deploy-summary-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.deploy-summary-icon {
  width: 34px; height: 34px; border-radius: 10px; background: #dbeafe; color: #0a55c4;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px;
}
.deploy-includes { display: flex; flex-wrap: wrap; gap: 6px; }
.deploy-includes span {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #0f479e;
  background: #ddeefe; border: 1px solid #bcdcff; padding: 3px 8px; border-radius: 999px;
}
.deploy-includes i { font-size: 8px; color: #16a34a; }
.deploy-includes .fa-xmark { color: #dc2626; }
.deploy-reassure {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border-radius: 11px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.deploy-reassure > i {
  width: 28px; height: 28px; border-radius: 8px; background: #dcfce7;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px;
}
.deploy-reassure div { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.5; }
.deploy-reassure b { font-size: 11.5px; }
.install-status {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px; border-radius: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.install-status.is-done { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.install-status-icon {
  width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .7);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px;
}
.install-status div { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.5; }
.install-status b { font-size: 12.5px; }
.deploy-howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.deploy-howto li {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
}
.deploy-howto li > span {
  width: 22px; height: 22px; border-radius: 50%; background: #ddeefe; color: #0a55c4;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.deploy-howto li div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.45; color: #334155; }
.deploy-howto small { font-size: 10.5px; color: #94a3b8; }
.cmd-box { display: flex; align-items: stretch; border: 1px solid #334155; border-radius: 11px; overflow: hidden; background: #0f172a; }
.cmd-box code {
  flex: 1; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.6; color: #8ec3ff; word-break: break-all; background: #0f172a;
}
.cmd-box button {
  flex-shrink: 0; border: 0; border-left: 1px solid #334155; background: #1e293b; color: #bcdcff;
  font-size: 10.5px; font-weight: 600; padding: 0 13px; display: flex; align-items: center; gap: 5px;
  cursor: pointer; transition: background .15s;
}
.cmd-box button:hover { background: #0d3a78; }
.cmd-explain { display: flex; gap: 7px; align-items: flex-start; font-size: 10.5px; color: #94a3b8; line-height: 1.5; margin: 0; }
.cmd-explain i { color: #2f8cf7; margin-top: 2px; }
.manual-download { border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 12px; background: #f8fafc; }
.manual-download summary { cursor: pointer; font-size: 11px; font-weight: 600; color: #64748b; padding: 10px 0; list-style: none; }
.manual-download summary::-webkit-details-marker { display: none; }
.manual-download p { font-size: 11px; color: #64748b; line-height: 1.55; margin: 0 0 9px; }
.manual-download button { margin-bottom: 11px; }
body.dark .deploy-card { background: linear-gradient(165deg, #0a2450, #1e293b 60%); border-color: #0d3a78; }
body.dark .deploy-head h2 { color: #f1f5f9; }
body.dark .deploy-head p { color: #94a3b8; }
body.dark .deploy-flow-step { background: #0f172a; border-color: #0d3a78; }
body.dark .deploy-flow-step b { color: #e2e8f0; }
body.dark .deploy-saved { background: #0f172a; border-color: #334155; }
body.dark .deploy-saved-title { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark .deployment-row { border-color: #334155; }
body.dark .deployment-icon { background: #061a3a; color: #8ec3ff; }
body.dark .deploy-explainer { background: #0f172a; border-color: #334155; }
body.dark .deploy-explainer summary { color: #cbd5e1; }
body.dark .deploy-explainer-body { color: #94a3b8; }
body.dark .deploy-explainer-body b { color: #e2e8f0; }
body.dark .deploy-summary { background: linear-gradient(160deg, #0a2450, #1e293b); border-color: #0d3a78; }
body.dark .deploy-summary-icon { background: #0d3a78; color: #bcdcff; }
body.dark .deploy-includes span { background: #061a3a; border-color: #0d3a78; color: #bcdcff; }
body.dark .deploy-reassure { background: #052e16; border-color: #166534; color: #4ade80; }
body.dark .deploy-reassure > i { background: #14532d; }
body.dark .install-status { background: #451a03; border-color: #78350f; color: #fbbf24; }
body.dark .install-status.is-done { background: #052e16; border-color: #166534; color: #4ade80; }
body.dark .install-status-icon { background: rgba(0, 0, 0, .25); }
body.dark .deploy-howto li { background: #0f172a; border-color: #334155; }
body.dark .deploy-howto li div { color: #cbd5e1; }
body.dark .manual-download { background: #0f172a; border-color: #334155; }
body.dark .manual-download summary { color: #94a3b8; }

/* Global search results */
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; width: 420px; max-width: calc(100vw - 32px);
  max-height: min(70vh, 460px); overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 22px 45px -20px rgba(15,23,42,.4); z-index: 80;
  scrollbar-width: thin;
}
.search-results.hidden { display: none; }
.sr-group + .sr-group { border-top: 1px solid #f1f5f9; margin-top: 4px; padding-top: 4px; }
.sr-label {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8;
}
.sr-label i { font-size: 9px; color: #2f8cf7; }
.sr-label span { margin-left: auto; background: #f1f5f9; color: #94a3b8; border-radius: 99px; font-size: 9px; padding: 1px 6px; }
.sr-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.sr-item:hover, .sr-item.is-active { background: #eff7ff; }
.sr-icon {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: #ddeefe; color: #0a55c4;
}
.sr-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sr-body b { font-size: 12px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-body small { font-size: 10.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meta {
  flex-shrink: 0; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; font-weight: 500; color: #0a4fae; background: #eef6ff; border-radius: 99px; padding: 2px 7px;
}
.sr-empty { text-align: center; padding: 22px 12px; }
.sr-empty i { font-size: 18px; color: #cbd5e1; margin-bottom: 6px; }
.sr-empty div { font-size: 12px; font-weight: 500; color: #475569; }
.sr-empty small { display: block; font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
body.dark .search-results { background: #1e293b; border-color: #334155; box-shadow: 0 22px 45px -20px rgba(0,0,0,.65); }
body.dark .sr-group + .sr-group { border-color: #334155; }
body.dark .sr-item:hover, body.dark .sr-item.is-active { background: #0a2450; }
body.dark .sr-icon { background: #061a3a; color: #bcdcff; }
body.dark .sr-body b { color: #f1f5f9; }
body.dark .sr-body small { color: #94a3b8; }
body.dark .sr-meta { background: #0a2450; color: #bcdcff; }
body.dark .sr-label span { background: #0f172a; color: #94a3b8; }
body.dark .sr-empty div { color: #cbd5e1; }
@media (max-width: 640px) {
  .search-results { width: min(92vw, 380px); }
}

/* Plan renewal checkout */
.modal-panel.billing-panel { display: flex; flex-direction: column; overflow: hidden; }
.billing-panel .modal-header, .billing-panel .modal-footer { flex-shrink: 0; }
.billing-panel .modal-body { flex: 1 1 auto; overflow-y: auto; }

/* One to three months, each priced and paid with the channel that covers it. */
.sub-term-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sub-term {
  display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0;
  padding: 10px 12px; border: 1px solid #dbe3ee; border-radius: 11px; background: #fff;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.sub-term:hover:not([disabled]) { border-color: #8ec3ff; box-shadow: 0 8px 16px -14px rgba(3,106,238,.6); }
.sub-term.is-active { border-color: #036aee; background: #eff7ff; box-shadow: 0 0 0 2px rgba(3,106,238,.14); }
.sub-term[disabled] { opacity: .55; cursor: not-allowed; background: #f8fafc; }
.sub-term-months { font-size: 12px; font-weight: 700; color: #123c7d; }
.sub-term strong { font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.sub-term-sub { font-size: 10.5px; color: #64748b; }
.sub-term-note { font-size: 10px; color: #b45309; line-height: 1.35; }
body.dark .sub-term { background: #0f172a; border-color: #334155; }
body.dark .sub-term.is-active { background: #0a2450; border-color: #2f8cf7; }
body.dark .sub-term strong { color: #e2e8f0; }
body.dark .sub-term-months { color: #93c5fd; }
body.dark .sub-term[disabled] { background: #111c31; }
@media (max-width: 560px) { .sub-term-grid { grid-template-columns: 1fr; } }

/* Says plainly that a business's notices belong to its customers, not its dashboard. */
.announcement-scope-note {
  display: flex; gap: 11px; padding: 11px 14px;
  border: 1px solid #bcdcff; border-radius: 12px; background: #eff7ff;
  font-size: 12px; color: #3b5b86;
}
.announcement-scope-note i { color: #036aee; margin-top: 2px; }
.announcement-scope-note strong { display: block; color: #123c7d; font-weight: 700; }
.announcement-scope-note span { display: block; line-height: 1.5; }
body.dark .announcement-scope-note { background: #0a1f3d; border-color: #1e3a5f; color: #93c5fd; }
body.dark .announcement-scope-note strong { color: #dbeafe; }
.checkout-amount {
  display: flex; flex-direction: column; gap: 1px; padding: 13px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #eff7ff, #eef6ff); border: 1px solid #bcdcff;
}
.checkout-amount span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #0a55c4; }
.checkout-amount b { font-size: 23px; font-weight: 700; color: #0d3a78; letter-spacing: -.01em; }
.checkout-amount small { font-size: 10.5px; color: #0a4fae; opacity: .85; }
.initiation-box {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #f8fafc;
  display: flex; flex-direction: column; gap: 4px;
}
.initiation-label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.initiation-label i { color: #036aee; }
.initiation-box code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 600; color: #1e293b; letter-spacing: .02em; }
.initiation-box small { font-size: 10.5px; line-height: 1.5; color: #94a3b8; }
.checkout-pending { text-align: center; padding: 4px 0; }
.checkout-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: linear-gradient(140deg, #ddeefe, #dbeafe); color: #0a55c4;
  box-shadow: 0 0 0 8px rgba(221, 238, 254, .6);
}
.checkout-pending h3 { margin: 0; font-size: 14px; font-weight: 600; color: #1e293b; }
.checkout-pending p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: #64748b; }
.checkout-pending code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: #f1f5f9; border-radius: 4px; padding: 1px 4px; color: #0d3a78; }
body.dark .checkout-amount { background: linear-gradient(135deg, #0a2450, #1e293b); border-color: #0d3a78; }
body.dark .checkout-amount b { color: #bcdcff; }
body.dark .checkout-amount small { color: #8ec3ff; }
body.dark .initiation-box { background: #0f172a; border-color: #334155; }
body.dark .initiation-box code { color: #bcdcff; }
body.dark .checkout-icon { background: linear-gradient(140deg, #061a3a, #0a2450); color: #bcdcff; box-shadow: 0 0 0 8px rgba(6, 26, 58, .5); }
body.dark .checkout-pending h3 { color: #f1f5f9; }
body.dark .checkout-pending p { color: #94a3b8; }
body.dark .checkout-pending code { background: #1e293b; color: #8ec3ff; }

/* Profile carousel */
.profile-carousel { overflow: hidden; }
.pc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; margin-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.pc-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #0a55c4, #1a8ef5); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700;
}
.pc-id { min-width: 0; flex: 1; }
.pc-name { font-size: 15px; font-weight: 600; color: #1e293b; line-height: 1.3; }
.pc-username { font-size: 11px; font-weight: 600; color: #036aee; line-height: 1.35; }
.pc-email { font-size: 11.5px; color: #64748b; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pc-tabs { display: flex; gap: 3px; background: #f1f5f9; padding: 3px; border-radius: 9px; margin-bottom: 13px; }
.pc-step {
  flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 6px 4px;
  font-size: 11.5px; font-weight: 500; color: #64748b; cursor: pointer; transition: background .15s, color .15s;
}
.pc-step.active { background: #fff; color: #0a55c4; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.pc-viewport { overflow: hidden; }
.pc-track { display: flex; width: calc(var(--pc-count, 3) * 100%); align-items: flex-start; transition: transform .32s cubic-bezier(.22,.61,.36,1); }
.pc-slide { width: calc(100% / var(--pc-count, 3)); flex: 0 0 calc(100% / var(--pc-count, 3)); padding: 2px 2px 4px; }
.pc-slide-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 10px; }
.pc-slide-title i { color: #036aee; font-size: 12px; }
.profile-carousel .form-label { margin-bottom: 4px; }
.profile-carousel .form-input { font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
.profile-hint {
  display: flex; gap: 7px; align-items: flex-start; font-size: 11px; line-height: 1.5;
  color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; margin-top: 10px;
}
.profile-hint i { color: #0a55c4; margin-top: 2px; }
.pc-facts { display: grid; gap: 6px; }
.pc-facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; background: #fff;
  transition: border-color .18s;
}
.pc-facts span { color: #64748b; }
.pc-facts b { color: #334155; font-weight: 600; text-align: right; }
.pc-facts > div:hover { border-color: #8ec3ff; }
.pc-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #e2e8f0; }
.pc-dots { display: flex; align-items: center; gap: 5px; }
.pc-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; transition: width .2s, background .2s; }
.pc-dot.active { width: 16px; border-radius: 3px; background: #036aee; }
body.dark .pc-head { border-color: #334155; }
body.dark .pc-name { color: #f1f5f9; }
body.dark .pc-username { color: #8ec3ff; }
body.dark .pc-email { color: #94a3b8; }
body.dark .pc-tabs { background: #0f172a; }
body.dark .pc-step { color: #94a3b8; }
body.dark .pc-step.active { background: #1e293b; color: #8ec3ff; box-shadow: none; }
body.dark .pc-slide-title { color: #e2e8f0; }
body.dark .profile-hint { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark .pc-facts > div { background: #0f172a; border-color: #334155; }
body.dark .pc-facts b { color: #e2e8f0; }
body.dark .pc-nav { border-color: #334155; }
body.dark .pc-dot { background: #475569; }
body.dark .pc-dot.active { background: #2f8cf7; }

/* ===== Header profile chip + dropdown ===== */
.profile-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 5px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.profile-chip:hover { border-color: #8ec3ff; box-shadow: 0 6px 16px -10px rgba(3, 106, 238,.45); transform: translateY(-1px); }
.profile-chip-avatar {
  position: relative; width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #4fb0ff, #036aee 58%, #0d3a78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 12px -8px rgba(79, 176, 255,.7);
}
.profile-chip-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 999px; background: #22c55e; border: 2px solid #fff;
}
.profile-chip-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.profile-chip-line1 { display: flex; align-items: center; gap: 7px; }
.profile-chip-name { font-size: 12.5px; font-weight: 700; color: #1e293b; white-space: nowrap; }
.profile-chip-email { font-size: 10.5px; color: #94a3b8; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip-caret { font-size: 10px; color: #64748b; transition: transform .22s ease; }
.profile-chip-caret.open { transform: rotate(180deg); }
body.dark .profile-chip { background: #1e293b; border-color: #334155; }
body.dark .profile-chip:hover { border-color: #0a55c4; }
body.dark .profile-chip-name { color: #f1f5f9; }
body.dark .profile-chip-email { color: #64748b; }
body.dark .profile-chip-caret { color: #94a3b8; }
body.dark .profile-chip-dot { border-color: #1e293b; }
/* On a phone the header has one row to work with: the search takes what is left and the profile
   shrinks to its avatar, so nothing hangs off the right edge. */
@media (max-width: 700px) {
  header.bg-white { padding-left: 14px; padding-right: 14px; gap: 10px; }
  header > div:first-child { flex: 1 1 auto; min-width: 0; }
  .search-wrap { flex: 1 1 auto; min-width: 0; }
  .search-wrap input#global-search { width: 100%; min-width: 0; }
  .profile-chip { padding: 4px; gap: 0; }
  .profile-chip-meta { display: none; }
}

.profile-dropdown {
  position: fixed; top: 62px; right: 18px; z-index: 60; width: 272px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 24px 48px -18px rgba(15,23,42,.28), 0 4px 12px -6px rgba(15,23,42,.12);
  padding: 8px; transform-origin: top right;
  animation: pdIn .2s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pdIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
.pd-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid #f1f5f9; margin-bottom: 6px; }
.pd-avatar {
  position: relative; width: 40px; height: 40px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #4fb0ff, #036aee 58%, #0d3a78);
}
.pd-name { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-email { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 10px; border: 0; background: transparent; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: #1e293b; text-align: left; cursor: pointer;
  transition: background .14s, transform .14s;
}
.pd-item i { width: 20px; text-align: center; font-size: 15px; color: #475569; transition: transform .18s; }
.pd-item:hover { background: #eef6ff; transform: translateX(2px); }
.pd-item:hover i { transform: scale(1.12); color: #0a55c4; }
.pd-item-hint { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.pd-dark {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px; padding: 10px 10px 8px; border-top: 1px solid #f1f5f9;
}
.pd-dark-label { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 500; color: #1e293b; }
.pd-dark-label i { width: 20px; text-align: center; font-size: 15px; color: #475569; }
.pd-switch {
  position: relative; width: 40px; height: 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: #cbd5e1; transition: background .2s; flex: 0 0 auto;
}
.pd-switch .pd-knob {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 5px rgba(15,23,42,.3); transition: transform .2s cubic-bezier(.3,1.4,.5,1);
}
.pd-switch.on { background: #0a55c4; }
.pd-switch.on .pd-knob { transform: translateX(18px); }
body.dark .profile-dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 24px 48px -18px rgba(0,0,0,.6); }
body.dark .pd-head { border-color: #334155; }
body.dark .pd-name { color: #f1f5f9; }
body.dark .pd-email { color: #64748b; }
body.dark .pd-item { color: #e2e8f0; }
body.dark .pd-item i { color: #94a3b8; }
body.dark .pd-item:hover { background: rgba(10, 85, 196,.16); }
body.dark .pd-dark { border-color: #334155; }
body.dark .pd-dark-label { color: #e2e8f0; }
body.dark .pd-dark-label i { color: #94a3b8; }
body.dark .pd-switch { background: #475569; }
body.dark .pd-switch.on { background: #0a55c4; }

/* ===== Help center ===== */
.help-item { display: flex; gap: 12px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fbfaff; transition: border-color .15s, box-shadow .15s; }
.help-item:hover { border-color: #8ec3ff; box-shadow: 0 6px 14px -12px rgba(3, 106, 238,.5); }
.help-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: #0a55c4; background: #ddeefe; font-size: 14px; }
.help-q { font-size: 13px; font-weight: 700; color: #0f172a; }
.help-a { font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.5; }
body.dark .help-item { background: #0f172a; border-color: #334155; }
body.dark .help-item:hover { border-color: #0a55c4; }
body.dark .help-icon { background: rgba(10, 85, 196,.18); color: #8ec3ff; }
body.dark .help-q { color: #f1f5f9; }
body.dark .help-a { color: #94a3b8; }

.help-support {
  padding: 14px; border: 1px solid #bcdcff; border-radius: 14px;
  background: linear-gradient(135deg, #f4f9ff, #ffffff);
}
.help-support-head { display: flex; align-items: center; gap: 11px; }
.help-support-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: #ddeefe; color: #0a55c4; font-size: 16px;
}
.help-support-head strong { display: block; font-size: 14px; color: #123c7d; }
.help-support-head span { display: block; font-size: 11.5px; color: #64748b; margin-top: 1px; }
.help-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin-top: 12px; }
.help-link {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 9px 11px; border: 1px solid #dbeafe; border-radius: 10px;
  background: #fff; color: #123c7d; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.help-link:hover { border-color: #8ec3ff; box-shadow: 0 8px 16px -14px rgba(3,106,238,.8); transform: translateY(-1px); }
.help-link i { font-size: 17px; width: 20px; text-align: center; color: #0a55c4; flex: none; }
.help-link-wa i { color: #25d366; }
.help-link span { min-width: 0; }
.help-link strong { display: block; font-size: 12.5px; font-weight: 700; }
.help-link small { display: block; font-size: 10.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-support-hours { margin-top: 10px; font-size: 11.5px; color: #64748b; }
.help-support-hours i { margin-right: 5px; color: #0a55c4; }
.help-support-loading { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 12px; }
.help-support-off { background: #f8fafc; border-style: dashed; }
body.dark .help-support { background: #0f172a; border-color: #334155; }
body.dark .help-support-head strong { color: #e2e8f0; }
body.dark .help-support-head span, body.dark .help-support-hours { color: #94a3b8; }
body.dark .help-support-ic { background: rgba(10,85,196,.2); color: #8ec3ff; }
body.dark .help-link { background: #111c31; border-color: #334155; color: #e2e8f0; }
body.dark .help-link:hover { border-color: #0a55c4; }
body.dark .help-link small { color: #94a3b8; }
.help-contact-sheet {
  margin-top: 10px; padding: 11px 12px; border: 1px solid #bcdcff; border-radius: 11px;
  background: #f8fbff;
}
.help-contact-sheet[hidden] { display: none; }
.help-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #64748b;
}
.help-sheet-close { border: 0; background: none; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.help-sheet-close:hover { color: #123c7d; }
.help-sheet-value { margin-top: 2px; font-size: 14px; font-weight: 600; color: #123c7d; overflow-wrap: anywhere; }
.help-sheet-value input {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; color: inherit;
}
.help-sheet-value input:focus { outline: none; }
.help-sheet-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.help-sheet-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid #dbeafe; background: #fff; color: #123c7d;
  font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.help-sheet-btn:hover { border-color: #8ec3ff; }
.help-sheet-main { background: #0a55c4; border-color: #0a55c4; color: #fff; }
.help-sheet-main:hover { background: #0847a6; border-color: #0847a6; }
body.dark .help-contact-sheet { background: #111c31; border-color: #334155; }
body.dark .help-sheet-value { color: #e2e8f0; }
body.dark .help-sheet-value input { color: #e2e8f0; }
body.dark .help-sheet-btn { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark .help-sheet-main { background: #0a55c4; border-color: #0a55c4; color: #fff; }
body.dark .help-sheet-close { color: #94a3b8; }
body.dark .help-sheet-close:hover { color: #e2e8f0; }

/* ===== Motion layer ===== */
@keyframes motionIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.motion-in { animation: motionIn .42s cubic-bezier(.2,.8,.3,1) both; }

/* A screen redrawn while the operator already stands on it draws in place: nothing on it slides,
   grows or fades, so a background read that lands every few seconds cannot throb the page. */
.page-section[data-still], .page-section[data-still] * { animation: none !important; }

.card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(15,23,42,.22); border-color: #8ec3ff; }
body.dark .card:hover { border-color: #0a55c4; box-shadow: 0 10px 22px -14px rgba(0,0,0,.6); }

.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(15,23,42,.35); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn i { transition: transform .18s ease; }
.btn:hover i { transform: scale(1.08); }

tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: #eef6ff; }
body.dark tbody tr:hover { background: rgba(10, 85, 196,.09); }

.nav-item { position: relative; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.nav-item:hover { transform: translateX(3px); }
.nav-item.active { background: linear-gradient(90deg, rgba(10, 85, 196,.22), rgba(10, 85, 196,.08)); color: #fff; }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 20%; bottom: 20%; width: 3px;
  border-radius: 3px; background: #2f8cf7; box-shadow: 0 0 10px rgba(47, 140, 247,.9);
}

/* Traffic pulse widget */
.traffic-pulse {
  flex: 1 1 300px; max-width: 430px; min-width: 270px;
  background: rgba(255,255,255,.75); border: 1px solid #bcdcff; border-radius: 14px;
  padding: 10px 14px 8px; backdrop-filter: blur(4px);
  box-shadow: 0 12px 24px -20px rgba(18, 60, 125,.55);
}
.tp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tp-live {
  display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800;
  letter-spacing: .12em; color: #059669; text-transform: uppercase;
}
.tp-live-dot { width: 7px; height: 7px; border-radius: 999px; background: #10b981; }
.tp-title { font-size: 11px; font-weight: 600; color: #64748b; }
.tp-body { display: flex; align-items: center; gap: 12px; }
.tp-ecg { flex: 1; height: 46px; min-width: 0; }
.tp-ecg path { stroke: #036aee; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(3, 106, 238,.55)); }
.tp-ecg circle { fill: #4fb0ff; filter: drop-shadow(0 0 4px rgba(79, 176, 255,.9)); }
/* Nothing measured yet: the trace goes flat-grey instead of sweeping a live-looking heartbeat. */
.traffic-pulse.idle .tp-ecg path { opacity: .3; filter: none; }
.traffic-pulse.idle .tp-ecg circle { display: none; }
.traffic-pulse.idle .tp-live-dot { background: #cbd5e1; }
.tp-nums { display: flex; gap: 12px; flex: 0 0 auto; }
.tp-num { display: flex; align-items: baseline; gap: 4px; font-size: 15px; font-weight: 700; color: #0f172a; }
.tp-num i { font-size: 9px; color: #3b82f6; transform: translateY(-1px); }
.tp-num.up i { color: #f59e0b; }
.tp-num small { font-size: 8.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.tp-nodes { display: flex; gap: 5px; margin-top: 6px; }
.tp-node { width: 8px; height: 8px; border-radius: 999px; background: #a7f3d0; }
.tp-node.off { background: #fecaca; }
body.dark .traffic-pulse { background: rgba(30,27,46,.75); border-color: #3f2d5c; }
body.dark .tp-title { color: #94a3b8; }
body.dark .tp-num { color: #f1f5f9; }
body.dark .tp-ecg path { stroke: #55a4ff; }
body.dark .tp-node { background: #065f46; }
body.dark .tp-node.off { background: #7f1d1d; }

/* MikroTik live stat bars */
.livebar { position: relative; transition: width .6s ease; overflow: hidden; }
.live-stat { transition: color .25s ease; }
.live-stat.tick { color: #036aee !important; }
body.dark .live-stat.tick { color: #55a4ff !important; }

/* Remote shell */
.shell {
  background: #0b1020; border: 1px solid #1e293b; border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.55; color: #a5f3fc;
  padding: 12px; height: 220px; overflow-y: auto; white-space: pre-wrap;
}
.shell-line { margin-bottom: 4px; word-break: break-word; }
.shell-line.muted { color: #64748b; }
.shell-line.blocked { color: #fda4af; }
.shell-prompt { color: #55a4ff; font-family: ui-monospace, Menlo, monospace; font-size: 11px; white-space: nowrap; }

/* VPN copy */
.vpn-copy {
  border: 0; background: transparent; color: #036aee; cursor: pointer; font-size: 10px;
  padding: 1px 4px; border-radius: 5px; transition: background .14s, transform .14s;
}
.vpn-copy:hover { background: #ddeefe; transform: scale(1.1); }
body.dark .vpn-copy { color: #55a4ff; }
body.dark .vpn-copy:hover { background: rgba(10, 85, 196,.18); }

/* ===== Live topology ===== */
.badge-slate { background: #f1f5f9; color: #475569; }
body.dark .badge-slate { background: #1e293b; color: #94a3b8; }

.topo-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.topo-chip {
  border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .18s ease;
}
.topo-chip:hover { border-color: #55a4ff; color: #0f479e; transform: translateY(-1px); box-shadow: 0 4px 12px rgb(124 58 237 / .14); }
.topo-chip.on { background: #036aee; border-color: #036aee; color: #fff; }
.topo-chip span { background: rgb(0 0 0 / .08); border-radius: 999px; padding: 0 6px; font-size: 10px; }
.topo-chip.on span { background: rgb(255 255 255 / .24); }
.topo-chip.tiny { padding: 2px 8px; font-size: 10px; cursor: default; }
.topo-chip.tiny:hover { transform: none; box-shadow: none; }
.topo-risk-critical { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.topo-risk-high { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.topo-risk-medium { background: #fefce8; border-color: #fde68a; color: #a16207; }
.topo-risk-low { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
body.dark .topo-risk-critical { background: rgba(127,29,29,.24); border-color: #7f1d1d; color: #fca5a5; }
body.dark .topo-risk-high { background: rgba(124,45,18,.24); border-color: #9a3412; color: #fdba74; }
body.dark .topo-risk-medium { background: rgba(113,63,18,.24); border-color: #854d0e; color: #fde68a; }
body.dark .topo-risk-low { background: rgba(20,83,45,.24); border-color: #166534; color: #86efac; }
.topo-sep { width: 1px; height: 20px; background: #e2e8f0; margin: 0 4px; }
.topo-search { margin-left: auto; min-width: 220px; }
body.dark .topo-chip { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark .topo-chip.on { background: #0a55c4; border-color: #2f8cf7; color: #fff; }
body.dark .topo-sep { background: #334155; }

.topo-traffic { margin-top: 8px; display: grid; gap: 3px; }
.tt-row, .tt-mini { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #0f766e; }
.tt-row i, .tt-mini i { width: 10px; text-align: center; }
.tt-row.up, .tt-mini.up { color: #0a55c4; }
.tt-val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.tt-unit { color: #94a3b8; }
.tt-bar { flex: 1; height: 4px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.tt-bar b {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6, #0ea5e9);
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.tt-row.up .tt-bar b, .tt-mini.up .tt-bar b { background: linear-gradient(90deg, #2f8cf7, #1a8ef5); }
.tt-cell { min-width: 150px; }
.tt-mini .tt-bar { height: 3px; }
.tt-mini span { font-weight: 700; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
body.dark .tt-bar { background: #334155; }

.topo-card { position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.topo-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 26px rgb(15 23 42 / .14); }
.topo-actions {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 4px;
  opacity: 0; transform: translateY(-4px); transition: opacity .18s, transform .18s;
}
.topo-card:hover .topo-actions { opacity: 1; transform: none; }
.topo-actions button {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: #fff; color: #64748b; font-size: 10px; cursor: pointer; transition: all .16s;
}
.topo-actions button:hover { color: #036aee; border-color: #55a4ff; transform: scale(1.08); }
.topo-actions button.ok { color: #16a34a; }
body.dark .topo-actions button { background: #0f172a; border-color: #334155; color: #94a3b8; }
.topo-label {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700;
  color: #0f479e; background: #ddeefe; border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
body.dark .topo-label { background: #061a3a; color: #bcdcff; }

/* The MikroTik's own name in each router header: the slot discovery gave it, plus the pen that
   lets you call it something else. */
.topo-slot {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .02em; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; vertical-align: 2px;
}
.topo-slot.auto { color: #92400e; background: #fef3c7; border-color: #fde68a; }
body.dark .topo-slot { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark .topo-slot.auto { background: #451a03; border-color: #78350f; color: #fcd34d; }
.topo-name-edit {
  border: 1px solid #e2e8f0; background: #fff; color: #94a3b8; border-radius: 8px;
  font-size: 10.5px; padding: 2px 8px; cursor: pointer; margin-left: 4px; vertical-align: 2px;
  transition: color .15s, border-color .15s, background .15s;
}
.topo-name-edit:hover { color: #0a55c4; border-color: #55a4ff; background: #eef6ff; }
body.dark .topo-name-edit { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark .topo-name-edit:hover { color: #55a4ff; border-color: #0a4fae; background: #0a2450; }

.topo-arrow.v { width: 100%; justify-content: center; margin: 2px 0; }
.topo-hub { display: flex; flex-wrap: wrap; gap: 8px; }
.topo-spokes { display: flex; align-items: center; gap: 6px; color: #94a3b8; font-size: 11px; margin: 8px 0; }
.topo-spokes.v { justify-content: center; margin: 4px 0; }
.topo-level { display: flex; gap: 10px; align-items: flex-start; }
.topo-level-tag {
  writing-mode: vertical-rl; text-orientation: mixed; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: #94a3b8; border-left: 2px solid #bcdcff; padding: 2px 0 2px 6px;
}
.topo-pon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.topo-pair { border: 1px dashed #e2e8f0; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; }
.topo-site + .topo-site { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f5f9; }
body.dark .topo-pair { border-color: #334155; }
body.dark .topo-site + .topo-site { border-color: #1e293b; }
body.dark .topo-level-tag { border-left-color: #0d3a78; }

.topo-alerts { margin-bottom: 14px; }
.topo-alert-row {
  display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 14px;
  font-size: 12px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534;
}
.topo-alert-row .btn { margin-left: auto; }
.topo-alerts.danger .topo-alert-row {
  border-color: #fecaca; background: #fff1f2; color: #991b1b;
}
.topo-alert-line { display: flex; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; }
.topo-alert-line.bad { border-color: #fecaca; background: #fff5f5; }
.topo-alert-line.good { border-color: #bbf7d0; background: #f0fdf4; }

.topo-empty { border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; padding: 14px; }
.topo-empty-head { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #334155; }
.topo-empty-head > i { color: #94a3b8; font-size: 16px; margin-top: 2px; }
.topo-empty-head p { font-size: 12px; color: #64748b; margin-top: 2px; }
.topo-empty-head .btn { margin-left: auto; flex-shrink: 0; }
.topo-empty-row {
  display: flex; align-items: center; gap: 10px; border-top: 1px solid #e2e8f0; padding: 9px 2px 0;
  margin-top: 10px; font-size: 12px;
}
.topo-empty-row > i { color: #94a3b8; }
.topo-empty-row b { display: block; color: #334155; font-weight: 600; }
.topo-empty-row small { color: #64748b; }
.topo-empty-seen { margin-left: auto; color: #64748b; }

.traffic-strip { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }

.live-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #22c55e; display: inline-block; flex-shrink: 0;
}
.live-dot.big { width: 11px; height: 11px; }

.nav-badge {
  margin-left: auto; background: #ef4444; color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; padding: 1px 7px;
}

.topo-table tbody tr:hover { background: #eff7ff; }
body.dark .topo-table tbody tr:hover { background: #1e293b; }

.topo-kpi { padding: 12px 14px; }
.topo-kpi .text-2xl { font-variant-numeric: tabular-nums; }

.topo-row-actions { white-space: nowrap; text-align: right; }
.topo-row-actions button {
  border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 6px;
  width: 26px; height: 24px; font-size: 11px; cursor: pointer; transition: all .18s; margin-left: 3px;
}
.topo-row-actions button:hover { color: #0a55c4; border-color: #8ec3ff; transform: translateY(-1px); }
body.dark .topo-row-actions button { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark .topo-row-actions button:hover { color: #bcdcff; border-color: #0a55c4; }

/* discovery summary — what the walk decided per site */
.topo-detect-row {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(140px, 1fr) minmax(0, 1.5fr);
  gap: 12px; align-items: start; padding: 10px 0; border-top: 1px dashed #f1f5f9;
}
.topo-detect-site b { display: block; font-size: 13px; color: #1e293b; }
.topo-detect-root { font-size: 12px; color: #0f479e; }
.topo-detect-root i { margin-right: 4px; }
.topo-detect-root em {
  display: block; font-style: normal; font-size: 10px; color: #94a3b8; margin-top: 2px; line-height: 1.4;
}
.topo-detect-why { margin: 0; padding-left: 16px; font-size: 11px; color: #64748b; line-height: 1.55; }
.topo-detect-why li::marker { color: #55a4ff; }
body.dark .topo-detect-row { border-top-color: #1e293b; }
body.dark .topo-detect-site b { color: #e2e8f0; }
body.dark .topo-detect-root { color: #8ec3ff; }
body.dark .topo-detect-why { color: #94a3b8; }
@media (max-width: 700px) {
  .topo-detect-row { grid-template-columns: 1fr; gap: 4px; }
}

.topo-info-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid #f1f5f9; padding: 7px 0; font-size: 12px;
}
.topo-info-row span { color: #64748b; }
.topo-info-row b { color: #1e293b; text-align: right; font-weight: 600; }
body.dark .topo-info-row { border-bottom-color: #1e293b; }
body.dark .topo-info-row b { color: #e2e8f0; }

/* Simple unit list: one row per device, grouped by site. */
.topo-site-block + .topo-site-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f5f9; }
.topo-site-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.topo-site-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; color: #1e293b; }
.topo-site-title b { font-weight: 700; }
.topo-site-head small { display: block; margin-top: 3px; font-size: 11px; color: #94a3b8; }
.topo-site-live { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.topo-site-live b { color: #0f172a; font-weight: 700; }
.topo-simple th { font-size: 10px; }
.topo-simple tbody tr.topo-row { cursor: pointer; }
.topo-simple tbody tr.topo-row.offline { background: #fff5f5; }
.topo-simple tbody tr.topo-row.offline:hover { background: #ffecec; }
.topo-row-unit { display: flex; align-items: center; gap: 9px; min-width: 210px; }
.topo-row-icon { width: 28px; height: 28px; border-radius: 8px; background: #eff6ff; color: #036aee; display: grid; place-items: center; font-size: 12px; flex: 0 0 auto; }
.topo-row-unit b { font-weight: 600; color: #1e293b; }
.topo-row-unit small { display: block; font-size: 10px; color: #94a3b8; margin-top: 1px; }
.topo-row-alias { font-size: 10px; color: #94a3b8; font-weight: 500; }
.topo-dhcp {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px;
  padding: 1px 7px; vertical-align: 1px;
}
.topo-ip { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: #475569; }
.topo-seen { font-size: 11.5px; color: #64748b; }
.topo-row-caret { color: #cbd5e1; text-align: right; width: 24px; }
.topo-row:hover .topo-row-caret { color: #036aee; }
body.dark .topo-site-block + .topo-site-block { border-color: #1e293b; }
body.dark .topo-site-title, body.dark .topo-row-unit b { color: #e2e8f0; }
body.dark .topo-site-live b { color: #f1f5f9; }
body.dark .topo-row-icon { background: #082f49; color: #7dd3fc; }
body.dark .topo-dhcp { background: #451a03; border-color: #78350f; color: #fcd34d; }
body.dark .topo-simple tbody tr.topo-row.offline { background: #450a0a; }
body.dark .topo-simple tbody tr.topo-row.offline:hover { background: #5a0f0f; }
@media (max-width: 700px) {
  .topo-site-live { align-items: flex-start; }
  .topo-simple { min-width: 620px; }
}

/* ===== Load balance ===== */
.switch.sm { width: 34px; height: 18px; }
.switch.sm span { width: 12px; height: 12px; top: 3px; left: 3px; }
.switch.sm.on span { transform: translateX(16px); }
.switch.xs { width: 26px; height: 14px; }
.switch.xs span { width: 10px; height: 10px; top: 2px; left: 2px; }
.switch.xs.on span { transform: translateX(12px); }

.lb-table { min-width: 780px; }
.lb-table td { vertical-align: middle; }
.lb-table tbody tr:hover { background: #eff7ff; }
body.dark .lb-table tbody tr:hover { background: #1e293b; }
.lb-traffic-cell { min-width: 150px; }
.lb-track {
  height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-bottom: 4px;
}
.lb-bar {
  display: block; height: 100%; border-radius: 999px; background: #22c55e;
  transition: width .9s cubic-bezier(.22, 1, .36, 1), background-color .4s;
}
.lb-bar.warm { background: #f59e0b; }
.lb-bar.hot { background: #ef4444; }
body.dark .lb-track { background: #334155; }

.lb-load-track { height: 8px; border-radius: 999px; background: #dbeafe; overflow: hidden; }
.lb-load-fill {
  display: block; height: 100%; border-radius: 999px; background: #0a55c4;
  transition: width .9s cubic-bezier(.22, 1, .36, 1), background-color .4s;
}
.lb-load-fill.warm { background: #2f8cf7; }
.lb-load-fill.hot { background: #ef4444; }
body.dark .lb-load-track { background: #0a2450; }

.lb-weight { width: 58px; padding: 3px 6px; font-size: 12px; text-align: center; }
.lb-weight-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px;
  border-radius: 6px; background: #ddeefe; color: #0a55c4; font-weight: 700; font-size: 12px;
}
body.dark .lb-weight-chip { background: #061a3a; color: #bcdcff; }

.lb-row-actions { white-space: nowrap; }
.lb-row-actions > * { vertical-align: middle; }
.lb-row-actions .switch { margin-right: 8px; }
.lb-icon-btn {
  border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 6px;
  width: 26px; height: 24px; font-size: 11px; cursor: pointer; transition: all .18s;
}
.lb-icon-btn:hover { color: #0a55c4; border-color: #8ec3ff; transform: translateY(-1px); }
body.dark .lb-icon-btn { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark .lb-icon-btn:hover { color: #bcdcff; border-color: #0a55c4; }

.lb-mode {
  border: 1px solid #8ec3ff; background: #eff7ff; color: #0a55c4; border-radius: 999px;
  font-size: 11px; font-weight: 600; padding: 2px 10px; cursor: pointer; transition: all .18s;
}
.lb-mode:hover { background: #ddeefe; }
.lb-mode.manual { border-color: #fdba74; background: #fff7ed; color: #c2410c; }
body.dark .lb-mode { background: #0a2450; border-color: #0a55c4; color: #bcdcff; }
body.dark .lb-mode.manual { background: #431407; border-color: #9a3412; color: #fdba74; }

.lb-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 8px; }
.lb-rule {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  border: 1px solid #e2e8f0; border-radius: 0.6rem; background: #fff; padding: 8px 10px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.lb-rule:hover { border-color: #55a4ff; box-shadow: 0 2px 8px rgb(124 58 237 / .12); transform: translateY(-1px); }
.lb-rule.on { border-color: #8ec3ff; background: #eff7ff; }
.lb-rule-text { display: flex; flex-direction: column; min-width: 0; }
.lb-rule-text b { font-size: 12px; color: #334155; font-weight: 600; }
.lb-rule-text em { font-size: 10px; color: #94a3b8; font-style: normal; line-height: 1.35; }
.lb-rule-src {
  margin-left: auto; flex-shrink: 0; font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  color: #2f8cf7; font-weight: 700;
}
.lb-rule.on .lb-rule-src { color: #0a55c4; }
body.dark .lb-rule { background: #0f172a; border-color: #334155; }
body.dark .lb-rule.on { background: #071a35; border-color: #0a55c4; }
body.dark .lb-rule-text b { color: #e2e8f0; }

.lb-strategies { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-strategy {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 600;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #64748b; padding: 5px 12px 5px 8px;
  transition: all .18s;
}
.lb-strategy:hover { border-color: #55a4ff; color: #0a55c4; }
.lb-strategy.on { border-color: #036aee; background: #eff7ff; color: #0a55c4; }
body.dark .lb-strategy { background: #0f172a; border-color: #334155; color: #94a3b8; }
body.dark .lb-strategy.on { background: #0a2450; border-color: #0a55c4; color: #bcdcff; }

.lb-scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lb-scope {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 0;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: 12px 13px;
  transition: border-color .18s, background .18s, transform .18s;
}
.lb-scope:hover { border-color: #55a4ff; transform: translateY(-1px); }
.lb-scope.on { border-color: #8ec3ff; background: #eff7ff; }
.lb-scope-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.lb-scope-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-scope-name b { font-size: 13px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-scope-name em { font-size: 10.5px; color: #94a3b8; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-scope-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.lb-scope-links {
  font-size: 10.5px; font-weight: 600; color: #0f479e; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.lb-scope-state {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: 2px 8px;
}
.lb-scope-reason { font-size: 11px; line-height: 1.45; color: #64748b; }
.lb-scope.off .lb-scope-links { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.lb-scope.off .lb-scope-state { color: #64748b; background: #f8fafc; border-color: #e2e8f0; }
body.dark .lb-scope { background: #0f172a; border-color: #334155; }
body.dark .lb-scope.on { background: #071a35; border-color: #0a4fae; }
body.dark .lb-scope-name b { color: #e2e8f0; }
body.dark .lb-scope-name em { color: #7b8aa3; }
body.dark .lb-scope-links { color: #bcdcff; background: rgba(10, 79, 174, .18); border-color: rgba(96, 165, 250, .35); }
body.dark .lb-scope-state { color: #86efac; background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .3); }
body.dark .lb-scope-reason { color: #94a3b8; }
body.dark .lb-scope.off .lb-scope-links { color: #94a3b8; background: rgba(148, 163, 184, .1); border-color: #334155; }
body.dark .lb-scope.off .lb-scope-state { color: #94a3b8; background: rgba(148, 163, 184, .1); border-color: #334155; }

/* The per-MikroTik balancing switch: a paused box keeps its config, so it reads as resting, not broken. */
.lb-scope.paused { border-color: #e2e8f0; background: #f8fafc; }
.lb-scope.paused .lb-scope-links { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.lb-scope.paused .lb-scope-state { color: #92400e; border-color: #fde68a; background: #fef3c7; }
body.dark .lb-scope.paused { background: #131f33; border-color: #334155; }
body.dark .lb-scope.paused .lb-scope-links { color: #94a3b8; background: rgba(148, 163, 184, .1); border-color: #334155; }
body.dark .lb-scope.paused .lb-scope-state { color: #fcd34d; border-color: #7c5411; background: #26200f; }
.lb-group-off { border-left: 3px solid #f59e0b; }
.lb-off-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; padding: 8px 11px;
}
body.dark .lb-off-note { color: #fcd34d; background: #26200f; border-color: #7c5411; }
.lb-link-btn {
  background: none; border: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600;
  color: #036aee; text-decoration: underline;
}
.lb-link-btn:hover { color: #0a55c4; }
body.dark .lb-link-btn { color: #55a4ff; }

.lb-assess {
  margin-top: 16px; border: 1px dashed #8ec3ff; border-radius: 0.65rem; background: #eff7ff;
  padding: 12px 14px;
}
.lb-assess-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lb-assess-head i { color: #2f8cf7; }
.lb-assess-head b { font-size: 13px; color: #0f479e; }
.lb-assess-head .btn { margin-left: auto; }
.lb-assess ul { list-style: none; margin: 0; padding: 0; }
.lb-assess li {
  position: relative; padding-left: 16px; font-size: 12px; color: #475569; line-height: 1.5; margin-top: 3px;
}
.lb-assess li::before { content: '·'; position: absolute; left: 4px; color: #2f8cf7; font-weight: 700; }
body.dark .lb-assess { background: #071a35; border-color: #0a4fae; }
body.dark .lb-assess-head b { color: #bcdcff; }
body.dark .lb-assess li { color: #cbd5e1; }

.lb-member-row + .lb-member-row { border-top: 1px solid #f1f5f9; padding-top: 8px; }
body.dark .lb-member-row + .lb-member-row { border-top-color: #1e293b; }

@media (prefers-reduced-motion: reduce) {
  .lb-bar, .lb-load-fill, .lb-rule, .lb-icon-btn, .lb-mode { transition: none !important; }
  .lb-rule:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-bar, .donut, .client-update-item, .otp-hero, .receipt-check, .pap-dot, .cp-active-flag i, .checkout-icon,
  .pulse-bars b, .live-dot, .topo-alerts.danger .topo-alert-row, .nav-badge {
    animation: none !important;
  }
  .client-update-item { opacity: 1; }
  .motion-in, .livebar::after, .tp-node, .tp-live-dot, .profile-chip-dot { animation: none !important; }
  .pulse-bars b { height: 55%; }
}

/* ===== Security: lock screen, value shield, watermark, panel ===== */
#sec-lock {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1000px 520px at 18% 8%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 62%),
    radial-gradient(900px 520px at 82% 92%, rgba(30, 64, 175, .24), transparent 60%),
    #0b1020;
}
.sec-lock-card {
  width: 100%; max-width: 412px;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 32px 70px -26px rgba(2, 6, 23, .75);
  animation: secCardIn .42s cubic-bezier(.22, .8, .3, 1) both;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
@keyframes secCardIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.sec-lock-word { display: flex; justify-content: center; margin-bottom: 14px; }
.sec-lock-word .rizen-wordmark { height: 26px; }
.sec-lock-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; text-align: center; line-height: 1.2; }
.sec-lock-sub { font-size: 13px; color: #64748b; text-align: center; margin: 5px 0 20px; line-height: 1.45; }
.sec-req { color: #e11d48; }
.sec-pass-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px; }
.sec-pass-head .form-label { margin: 0; }
.sec-forgot {
  border: none; background: transparent; padding: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--brand);
}
.sec-forgot:hover { text-decoration: underline; }
.sec-keep {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 12.5px; font-weight: 500; color: #334155; cursor: pointer;
}
.sec-keep input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.sec-submit-row { position: relative; margin-top: 14px; }
.sec-last-used {
  position: absolute; right: 8px; top: -11px; z-index: 1;
  font-size: 10px; font-weight: 700; letter-spacing: .01em; color: #e2e8f0;
  background: #1e293b; border: 1px solid #334155; border-radius: 999px; padding: 2px 8px;
}
.sec-pass-row { position: relative; }
.sec-pass-row .form-input { padding-right: 44px; }
.sec-peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
  color: #94a3b8; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s;
}
.sec-peek:hover { background: var(--brand-soft); color: var(--brand); }
.sec-error { min-height: 18px; margin: 8px 0 0; font-size: 12px; color: #e11d48; font-weight: 500; }
/* The same line carries a success note once a link or reset email is sent. */
.sec-error.sec-ok { color: #047857; }
.sec-lock-foot { margin-top: 18px; padding-top: 15px; border-top: 1px solid #f1f5f9; text-align: center; font-size: 11.5px; letter-spacing: .04em; color: #64748b; }
.sec-lock-foot b { font-weight: 800; color: var(--brand); letter-spacing: .1em; }

/* Links under the sign-in button and the panels they open (forgot, reset). */
.sec-lock-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.sec-lock-links button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--brand);
}
.sec-lock-links button:hover { color: var(--brand-dark); text-decoration: underline; }
.sec-alt { margin-top: 16px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.sec-alt h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #1e293b; margin: 0 0 3px; }
.sec-alt p { font-size: 12.5px; color: #64748b; margin: 0 0 12px; line-height: 1.5; }
.sec-alt .form-input { background: #ffffff; }
.sec-alt-note { margin-top: 10px; font-size: 11px; color: #64748b; line-height: 1.55; }
.sec-alt-note code { background: #eef2f7; padding: 1px 5px; border-radius: 5px; font-family: ui-monospace, monospace; }
.sec-alt-ok { color: #047857; font-weight: 600; }
.sec-create-link { justify-content: center; align-items: center; color: #64748b; font-size: 12px; }
.sec-create-link button { display: inline-flex; align-items: center; gap: 5px; }
.sec-signup { border-top: 3px solid var(--brand); }
.sec-signup .form-label:first-of-type { margin-top: 0; }

/* Country + dial code, signup only. The menu exists because a native select cannot paint a flag
   inside the chosen option; the number itself stays an ordinary tel input. */
.sec-phone {
  position: relative; display: flex; align-items: center; gap: 2px; min-height: 38px;
  background: #eef4fd; border: 1px solid #dfeafa; border-radius: 0.5rem;
  transition: border-color .15s, box-shadow .15s;
}
.sec-phone:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.sec-phone-cc {
  display: inline-flex; align-items: center; gap: 7px; align-self: stretch;
  padding: 0 8px 0 11px; border: 0; background: transparent; cursor: pointer;
  color: #0f172a; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sec-phone-flag { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, .1); }
.sec-phone-caret { font-size: 9px; color: #94a3b8; transition: color .15s; }
.sec-phone-cc:hover .sec-phone-caret, .sec-phone-cc[aria-expanded="true"] .sec-phone-caret { color: var(--brand); }
.sec-phone-input {
  flex: 1; min-width: 0; align-self: stretch; border: 0; outline: none; background: transparent;
  padding: 0 12px 0 4px; font-size: 14px; color: #0f172a;
}
.sec-phone-input::placeholder { color: #94a3b8; }
.sec-cc-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(2, 6, 23, .45);
}
.sec-cc-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
.sec-cc-search i { font-size: 11px; color: #94a3b8; }
.sec-cc-search input { width: 100%; border: 0; outline: none; background: transparent; font-size: 12.5px; color: #0f172a; }
.sec-cc-list { max-height: 190px; overflow-y: auto; padding: 4px; }
.sec-cc-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left;
  font-size: 12.5px; color: #334155;
}
.sec-cc-item[hidden] { display: none; }
.sec-cc-item:hover, .sec-cc-item.on { background: var(--brand-soft); color: var(--brand-dark); }
.sec-cc-item img { flex: none; width: 20px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, .1); }
.sec-cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-cc-dial { color: #94a3b8; font-variant-numeric: tabular-nums; }
.sec-cc-item:hover .sec-cc-dial, .sec-cc-item.on .sec-cc-dial { color: var(--brand); }
.sec-cc-empty { margin: 8px; font-size: 11.5px; color: #94a3b8; text-align: center; }
body.dark .sec-phone { background: #0f1c33; border-color: #24344a; }
body.dark .sec-phone-cc, body.dark .sec-phone-input { color: #e2e8f0; }
body.dark .sec-cc-menu { background: #111c31; border-color: #243b5e; }
body.dark .sec-cc-search { border-bottom-color: #1e293b; }
body.dark .sec-cc-search input { color: #e2e8f0; }
body.dark .sec-cc-item { color: #cbd5e1; }
body.dark .sec-cc-item:hover, body.dark .sec-cc-item.on { background: rgba(10, 85, 196, .22); color: #bcdcff; }
body.dark .sec-cc-item:hover .sec-cc-dial, body.dark .sec-cc-item.on .sec-cc-dial { color: #8ec3ff; }
.sec-code-tabs { display: flex; gap: 6px; margin: 12px 0 4px; padding: 3px; background: #eef2f7; border-radius: 9px; }
.sec-code-tabs button {
  flex: 1; border: none; background: transparent; border-radius: 7px; padding: 7px 8px;
  font-size: 11.5px; font-weight: 700; color: #64748b; cursor: pointer;
}
.sec-code-tabs button.on { background: #ffffff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.sec-code-input { font-family: ui-monospace, monospace; letter-spacing: .18em; font-size: 17px; }
.sec-code-note { margin-top: 12px; font-size: 11px; color: #64748b; text-align: center; }
.sec-code-note button { font-size: 11px; }

/* Everything behind the lock is unreadable and untouchable */
body.sec-locked > *:not(#sec-lock) {
  filter: blur(14px); pointer-events: none; user-select: none;
  transition: filter .18s;
}
/* The console itself is not rendered for a signed-out visitor — no blurred glimpse of a client's
   name, balances or rail. The gate owns the screen until the session opens. */
body.sec-locked #app-shell { visibility: hidden; }

/* Header chip + profile dropdown row */
.sec-header-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .45); background: rgba(148, 163, 184, .12);
  color: #475569; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.sec-header-chip:hover { background: #eef6ff; border-color: #8ec3ff; color: #0a55c4; transform: translateY(-1px); }
.sec-header-chip i { font-size: 13px; }
body.dark .sec-header-chip { background: rgba(148, 163, 184, .12); border-color: #334155; color: #cbd5e1; }
body.dark .sec-header-chip:hover { background: rgba(10, 85, 196, .2); color: #bcdcff; }

#sec-dropdown-row { margin-top: 4px; }
.sec-dropdown-clock {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 12px; color: #475569;
  background: #f8fafc; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sec-dropdown-clock small { margin-left: auto; font-size: 10.5px; color: #94a3b8; }
body.dark .sec-dropdown-clock { background: #172033; color: #cbd5e1; border-color: #1e293b; }

/* Panel */
.sec-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sec-stat {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 11px; padding: 12px 13px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sec-stat:hover { border-color: #8ec3ff; transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(10, 85, 196, .35); }
.sec-stat span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; font-weight: 600; }
.sec-stat b { display: block; font-size: 17px; color: #0f172a; margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sec-stat small { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.sec-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: 4px 0 8px; }
.sec-flash { font-size: 12.5px; color: #475569; background: #f1f5f9; border-radius: 9px; padding: 9px 12px; }
.sec-flash.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.sec-flash.warn { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.sec-score { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sec-score-ring {
  --pct: 0; width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-content: center; text-align: center;
  background: conic-gradient(#0a55c4 calc(var(--pct) * 1%), #e2e8f0 0);
  position: relative;
}
.sec-score-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.sec-score-ring b { position: relative; font-size: 24px; font-weight: 800; color: #0f172a; }
.sec-score-ring small { position: relative; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.sec-score-list { flex: 1 1 260px; display: flex; flex-direction: column; gap: 7px; }
.sec-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; padding: 8px 10px; border-radius: 9px; background: #f8fafc; }
.sec-check i { margin-top: 2px; }
.sec-check b { display: block; color: #0f172a; font-size: 12.5px; }
.sec-check small { display: block; color: #64748b; font-size: 11px; margin-top: 1px; }
.sec-check.ok i { color: #10b981; }
.sec-check.warn { background: #fff1f2; }
.sec-check.warn i { color: #e11d48; }
.sec-slider-row { margin-top: 10px; }
.sec-slider-row input[type=range] { accent-color: #0a55c4; }

body.dark .sec-lock-card { background: #0f172a; border-color: #1e293b; }
body.dark .sec-lock-card h2 { color: #e2e8f0; }
body.dark .sec-lock-sub { color: #94a3b8; }
body.dark .sec-keep { color: #cbd5e1; }
body.dark .sec-forgot { color: color-mix(in srgb, var(--brand) 55%, white); }
body.dark .sec-last-used { background: #1f2c44; border-color: #3b4c68; }
body.dark .sec-error.sec-ok { color: #6ee7b7; }
body.dark .sec-lock-foot { border-color: #1e293b; color: #94a3b8; }
body.dark .sec-lock-foot b { color: color-mix(in srgb, var(--brand) 55%, white); }
body.dark .sec-alt { background: #0b1220; border-color: #1e293b; }
body.dark .sec-alt h3 { color: #e2e8f0; }
body.dark .sec-alt p, body.dark .sec-alt-note { color: #94a3b8; }
body.dark .sec-alt .form-input { background: #0f172a; border-color: #24344a; color: #e2e8f0; }
body.dark .sec-alt-note code { background: #1e293b; color: #cbd5e1; }
/* On the navy card the plain brand can sit too dark, so the links get a lightened version of
   whichever colour the company chose rather than a fixed blue. */
body.dark .sec-lock-links button { color: color-mix(in srgb, var(--brand) 55%, white); }
body.dark .sec-lock-links button:hover { color: color-mix(in srgb, var(--brand) 30%, white); }
body.dark .sec-peek:hover { background: rgba(10, 85, 196, .18); color: #8ec3ff; }
body.dark .sec-stat { background: #131e33; border-color: #24344f; }
body.dark .sec-stat b { color: #f1f5f9; }
body.dark .sec-stat small, body.dark .sec-check small { color: #94a3b8; }
body.dark .sec-flash { background: #131e33; color: #cbd5e1; }
body.dark .sec-flash.ok { background: rgba(16, 185, 129, .12); color: #6ee7b7; border-color: rgba(16, 185, 129, .3); }
body.dark .sec-flash.warn { background: rgba(225, 29, 72, .14); color: #fda4af; border-color: rgba(225, 29, 72, .32); }
body.dark .sec-score-ring { background: conic-gradient(#2f8cf7 calc(var(--pct) * 1%), #1e293b 0); }
body.dark .sec-score-ring::before { background: #0f172a; }
body.dark .sec-score-ring b { color: #f1f5f9; }
body.dark .sec-check { background: #131e33; }
body.dark .sec-check b { color: #e2e8f0; }
body.dark .sec-check.warn { background: rgba(225, 29, 72, .12); }

@media (prefers-reduced-motion: reduce) {
  .sec-lock-card { animation: none; }
  .sec-header-chip, .sec-stat, .sec-peek { transition: none !important; }
  .sec-stat:hover, .sec-header-chip:hover { transform: none; }
}

/* ============================================================
   Dashboard — mauve glass, gradient hero, thick ring
   The screen the admin lands on. Ink figures, one violet-blue
   gradient for the money, and soft slabs with a dark arc button.
   RIZEN blue stays the action colour in the rest of the console;
   here the violet is depth, never a second accent.
   ============================================================ */
.page-section[data-page="dashboard"] {
  --dv-ink: #161a2e;
  --dv-muted: #8b90a6;
  --dv-line: #edebf5;
  --dv-card: #ffffff;
  --dv-soft: #f4f2fa;
  --dv-violet: #7c6ef6;
  --dv-grad: linear-gradient(118deg, #8d7df7 0%, #6459ee 46%, color-mix(in srgb, var(--brand) 74%, #4f6ff2) 100%);
  --dv-shadow: 0 24px 44px -34px rgba(38, 32, 88, .55);
}
body.dark .page-section[data-page="dashboard"] {
  --dv-ink: #eef1ff;
  --dv-muted: #93a0bd;
  --dv-line: #262b45;
  --dv-card: #171b2e;
  --dv-soft: #1d2138;
  --dv-shadow: 0 24px 44px -34px rgba(0, 0, 0, .8);
}

.dashv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 16px; }
.dashv-head-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dashv-head-title .risen-mark, .dashv-head-title .dash-brand-logo { width: 34px; height: 34px; flex: none; }
.dashv-head h1 {
  margin: 0; font-size: clamp(24px, 3vw, 30px); font-weight: 700;
  letter-spacing: -.035em; color: var(--dv-ink);
}
.dashv-head-actions { display: flex; align-items: center; gap: 10px; }
.dashv-icon {
  position: relative; width: 42px; height: 42px; border-radius: 999px; border: 0;
  display: grid; place-items: center; cursor: pointer; font-size: 14px;
  color: var(--dv-ink); background: var(--dv-card);
  box-shadow: 0 12px 24px -18px rgba(30, 26, 66, .6), 0 0 0 1px var(--dv-line);
  transition: transform .16s ease, box-shadow .16s ease;
}
.dashv-icon:hover { transform: translateY(-2px); box-shadow: 0 18px 28px -18px rgba(30, 26, 66, .55), 0 0 0 1px var(--dv-line); }
.dashv-icon-dot {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #e8506b; color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--dv-card);
}
.dashv-install {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px;
  border: 0; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--dv-ink); background: var(--dv-card);
  box-shadow: 0 12px 24px -18px rgba(30, 26, 66, .6), 0 0 0 1px var(--dv-line);
  transition: transform .16s ease, box-shadow .16s ease;
}
.dashv-install[hidden] { display: none; }
.dashv-install i { color: var(--dv-violet); font-size: 12px; }
.dashv-install:hover { transform: translateY(-2px); box-shadow: 0 18px 28px -18px rgba(30, 26, 66, .55), 0 0 0 1px var(--dv-line); }

.dashv-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap;
  padding: 16px 18px; min-height: 118px; border-radius: 22px; color: #fff;
  background: var(--dv-grad);
  box-shadow: 0 34px 60px -40px rgba(70, 56, 200, .8);
}
.dashv-hero::before {
  content: ''; position: absolute; z-index: -1; right: -12%; top: -90%;
  width: 62%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.32), transparent 66%);
}
.dashv-hero::after {
  content: ''; position: absolute; z-index: -1; left: -8%; bottom: -120%;
  width: 46%; aspect-ratio: 1; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
}
.dashv-hero-copy { position: relative; min-width: 0; }
.dashv-hero-label { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.78); letter-spacing: .01em; }
.dashv-hero-figure {
  margin-top: 5px; font-size: clamp(26px, 3.6vw, 38px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.dashv-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.82); }
.dashv-hero-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.22); font-weight: 600;
  font-size: 11px; color: #fff;
}
/* The seven days of collections beside the revenue figure: a faint track per day with the takings
   filled from the bottom, so the shape of the week reads at a glance and today stands out. */
.dashv-bars { display: flex; align-items: stretch; gap: 6px; flex: 1 1 200px; max-width: 340px; height: 70px; margin-left: auto; }
.dashv-track {
  flex: 1 1 0; min-width: 10px; display: flex; align-items: flex-end; overflow: hidden;
  border-radius: 11px; background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.dashv-bar {
  display: block; width: 100%; border-radius: 11px; transform-origin: bottom;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .42));
  animation: dashvBarIn .55s cubic-bezier(.22, .8, .28, 1) both;
}
.dashv-track.is-today .dashv-bar {
  background: linear-gradient(180deg, #fff, #d9e6ff);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 -6px 22px -6px rgba(255, 255, 255, .7);
}
@keyframes dashvBarIn { from { transform: scaleY(.04); opacity: .25 } to { transform: scaleY(1); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .dashv-bar { animation: none } }

/* The wallet and the heartbeat keep the top row they had before the restyle: the pulse reads the
   live traffic and the compact card is where a payout is asked for. */
.dashv-top { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.dashv-top .traffic-pulse { flex: 1 1 300px; max-width: none; margin: 0; }

.dashv-alert {
  position: relative; display: flex; align-items: center; gap: 11px; overflow: hidden;
  margin: 0 2px 12px; padding: 11px 14px; border-radius: 18px; color: #fff;
  background: linear-gradient(112deg, #f2a33c 0%, #e2554f 100%);
  box-shadow: 0 20px 36px -32px rgba(120, 40, 20, .9);
  animation: dvAlertIn .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes dvAlertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.dashv-alert-ico {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: rgba(255,255,255,.22);
}
.dashv-alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dashv-alert-body b { font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; }
.dashv-alert-body span { font-size: 11.5px; opacity: .93; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashv-alert-by {
  margin-left: auto; flex: none; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.2); font-size: 10px; font-weight: 650; letter-spacing: .07em;
}

.dashv-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 2px 8px; }
.dashv-section h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.025em; color: var(--dv-ink); }
.dashv-tools { display: flex; align-items: center; gap: 10px; }
.dashv-tools .dashv-icon { width: 38px; height: 38px; font-size: 12.5px; }

.dv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dashv-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dashv-ring-col {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px 15px 15px; border-radius: 20px; background: var(--dv-card);
  box-shadow: var(--dv-shadow), 0 0 0 1px var(--dv-line);
}
.dashv-ring-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dashv-ring-col-head b { font-size: 13.5px; font-weight: 650; letter-spacing: -.02em; color: var(--dv-ink); }
.dashv-ring-col-head span { font-size: 10.5px; color: var(--dv-muted); }

.dashv-ring-wrap { position: relative; display: grid; place-items: center; }
.dashv-ring { width: 100%; max-width: 156px; height: auto; }
.dashv-ring .dv-track { fill: none; stroke: var(--dv-soft); stroke-width: 20; }
.dashv-ring .dv-arc { fill: none; stroke-width: 20; stroke-linecap: round; animation: dvArc .8s cubic-bezier(.2, .8, .2, 1) both; }
.dashv-ring-center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 20%;
}
.dashv-ring-center b {
  font-size: clamp(17px, 2.1vw, 22px); font-weight: 600; letter-spacing: -.035em;
  color: var(--dv-ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.dashv-ring-center b small {
  font-size: .4em; font-weight: 650; letter-spacing: .02em; color: var(--dv-muted);
  margin-right: .42em; vertical-align: .18em;
}
@keyframes dvArc { from { opacity: 0; transform: rotate(-28deg); transform-origin: 50% 50%; } to { opacity: 1; transform: none; } }
.dashv-legend { display: flex; flex-direction: column; min-width: 0; }
.dashv-legend-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px dashed var(--dv-line); font-size: 11px;
}
.dashv-legend-row:last-child { border-bottom: 0; }
.dashv-legend-dot { width: 9px; height: 9px; border-radius: 4px; }
.dashv-legend-name { color: var(--dv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashv-legend-share { font-size: 10.5px; color: var(--dv-muted); font-variant-numeric: tabular-nums; }
.dashv-legend-amt { font-weight: 650; color: var(--dv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashv-legend-empty { padding: 14px 0; font-size: 11.5px; color: var(--dv-muted); }

.dashv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
/* The wallet sits in the stat row with the tiles, not beside the traffic pulse: it is one of the
   business's own figures, and it keeps the blue card it always had. */
.dashv-tiles .wallet-mini { width: 100%; min-height: 96px; border-radius: 18px; justify-content: space-between; }
.dashv-tiles .wallet-mini-balance { margin-top: 2px; }
.dashv-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px 13px; min-height: 96px; border-radius: 18px;
  background: var(--dv-card); box-shadow: var(--dv-shadow), 0 0 0 1px var(--dv-line);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dashv-tile:hover { transform: translateY(-2px); }
.dashv-tile-ico {
  width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  font-size: 12.5px; background: var(--dv-soft); color: var(--dv-violet); flex: none;
}
.dashv-tile-ico.amber { background: #fdf3e5; color: #b9770e; }
.dashv-tile-ico.emerald { background: #e9f8f1; color: #0f9d70; }
.dashv-tile-ico.blue { background: #eaf1fe; color: #2f62d8; }
.dashv-tile-label { font-size: 11px; color: var(--dv-muted); line-height: 1.35; }
.dashv-tile-value {
  margin-top: 1px; font-size: 17px; font-weight: 650; letter-spacing: -.03em;
  color: var(--dv-ink); font-variant-numeric: tabular-nums;
}
.dashv-tile-note { font-size: 10px; color: var(--dv-muted); }
.dashv-arrow {
  position: absolute; top: 11px; right: 11px; width: 28px; height: 28px; border: 0; cursor: pointer;
  border-radius: 999px; background: #171a2e; color: #fff; display: grid; place-items: center;
  font-size: 9.5px; transition: transform .18s ease, background .18s ease;
}
.dashv-arrow i { transform: rotate(-45deg); }
.dashv-arrow:hover { transform: scale(1.08); background: #2b2f4d; }
.dashv-tile.is-brand {
  background: var(--dv-grad); box-shadow: 0 28px 46px -34px rgba(70, 56, 200, .75);
}
.dashv-tile.is-brand .dashv-tile-ico { background: rgba(255,255,255,.2); color: #fff; }
.dashv-tile.is-brand .dashv-tile-label { color: rgba(255,255,255,.8); }
.dashv-tile.is-brand .dashv-tile-value, .dashv-tile.is-brand .dashv-tile-note { color: #fff; }
.dashv-tile.is-brand .dashv-arrow { background: rgba(255,255,255,.24); color: #fff; }
.dashv-tile.is-brand .dashv-arrow:hover { background: rgba(255,255,255,.36); }

.dashv-inbox { margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: var(--dv-card); box-shadow: var(--dv-shadow), 0 0 0 1px var(--dv-line); }
.dashv-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dashv-inbox-head h2 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; letter-spacing: -.02em; color: var(--dv-ink); }
.dashv-inbox-head h2 i { color: var(--dv-violet); font-size: 13px; }
.dashv-inbox-clear { border: 0; background: transparent; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--dv-muted); }
.dashv-inbox-clear:hover { color: var(--dv-ink); }
.dashv-inbox-item {
  display: flex; gap: 12px; padding: 11px 10px; border-radius: 14px; align-items: flex-start;
  border-bottom: 1px dashed var(--dv-line);
}
.dashv-inbox-item:last-child { border-bottom: 0; }
.dashv-inbox-item.unread { background: color-mix(in srgb, var(--dv-violet) 7%, transparent); }
.dashv-inbox-ico {
  width: 32px; height: 32px; border-radius: 999px; flex: none; display: grid; place-items: center;
  font-size: 12px; background: var(--dv-soft); color: var(--dv-violet);
}
.dashv-inbox-body { min-width: 0; flex: 1; }
.dashv-inbox-subject { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--dv-ink); }
.dashv-inbox-subject .dot { width: 6px; height: 6px; border-radius: 999px; background: #e8506b; flex: none; }
.dashv-inbox-text { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--dv-muted); }
.dashv-inbox-at { font-size: 10.5px; color: var(--dv-muted); white-space: nowrap; flex: none; }

@media (max-width: 1100px) {
  .dashv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dashv-hero { padding: 14px; border-radius: 20px; }
  .dashv-bars { flex-basis: 100%; max-width: none; height: 56px; margin-left: 0; }
  .dashv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dashv-tile { padding: 12px; border-radius: 16px; min-height: 90px; }
  .dashv-tile-value { font-size: 15px; }
  .dashv-arrow { width: 26px; height: 26px; top: 10px; right: 10px; }
  .dashv-install { width: 42px; padding: 0; justify-content: center; }
  .dashv-install span { display: none; }
}
body.dark .dashv-tile-ico.amber { background: rgba(217,119,6,.16); color: #fbbf24; }
body.dark .dashv-tile-ico.emerald { background: rgba(16,185,129,.14); color: #6ee7b7; }
body.dark .dashv-tile-ico.blue { background: rgba(47,140,247,.14); color: #8ec3ff; }
body.dark .dashv-arrow { background: #eef1ff; color: #161a2e; }
@media (prefers-reduced-motion: reduce) {
  .dashv-ring .dv-arc { animation: none; }
  .dashv-alert, .dashv-alert::after, .dashv-alert-ico { animation: none; }
  .dashv-alert::after { display: none; }
  .dashv-tile:hover, .dashv-icon:hover, .dashv-arrow:hover, .dashv-install:hover { transform: none; }
}

/* Refer and earn facts + seller reward totals */
.ref-fact { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #f8fafc; }
.ref-fact span { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.ref-fact b { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; color: #1e293b; }
.reward-total { border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 11px; background: #f8fafc; }
.reward-total span { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.reward-total b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; }
body.dark .ref-fact, body.dark .reward-total { background: #0b1a33; border-color: #1e3a5f; }
body.dark .ref-fact b, body.dark .reward-total b { color: #e2e8f0; }

.ref-list { max-height: 176px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.ref-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
.ref-row:last-child { border-bottom: 0; }
body.dark .ref-list { background: #0b1a33; border-color: #1e3a5f; }
body.dark .ref-row { border-color: #16325c; }

/* The seller's own dashboard */
.ad-hero {
  position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px; margin-bottom: 16px;
  background: linear-gradient(135deg, #08284f, #0d3a78 42%, #0a55c4 78%, #2f8cf7);
  color: #fff; box-shadow: 0 26px 48px -30px rgba(8, 40, 79, .85);
}
.ad-hero::after {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 62%);
}
.ad-hero > * { position: relative; z-index: 1; }
.ad-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.ad-hi { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; opacity: .82; }
.ad-name { font-size: 22px; font-weight: 700; margin-top: 2px; }
.ad-stars { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 12px; opacity: .9; }
.ad-total-box { text-align: right; }
.ad-total-box span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ad-total-box b { display: block; font-size: 30px; font-weight: 700; line-height: 1.2; }
.ad-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; }
.ad-tile { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 10px 12px; }
.ad-tile span { display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; opacity: .82; }
.ad-tile b { display: block; font-size: 17px; font-weight: 700; margin-top: 2px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ad-note { font-size: 11px; opacity: .78; margin-top: 12px; }
body.dark .ad-hero { background: linear-gradient(135deg, #051329, #0a2450 45%, #0d47a8); }

/* Help centre assistant */
.hc-wrap { display: flex; flex-direction: column; gap: 9px; }
.hc-thread {
  display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto;
  padding: 12px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc;
}
.hc-row { display: flex; }
.hc-row.me { justify-content: flex-end; }
.hc-bubble {
  max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  background: #fff; border: 1px solid #e2e8f0; color: #334155; white-space: pre-line;
}
.hc-typing { display: inline-flex; gap: 4px; align-items: center; min-width: 34px; }
.hc-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: #94a3b8;
}
.hc-row.me .hc-bubble { background: #0a55c4; border-color: #0a55c4; color: #fff; border-bottom-right-radius: 4px; }
.hc-row.bot .hc-bubble { border-bottom-left-radius: 4px; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 86%; }
.hc-stack .hc-bubble { max-width: 100%; }
.hc-rate { display: flex; align-items: center; gap: 4px; }
.hc-rate-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; border-radius: 9px; cursor: pointer;
  background: #fff; border: 1px solid #e2e8f0; color: #64748b; font-size: 12px;
}
.hc-rate-btn:hover { background: #eff7ff; border-color: #bcdcff; color: #0f479e; }
.hc-rate-btn.is-on { background: #dbeafe; border-color: #0a55c4; color: #0a55c4; }
.hc-rate-noted { font-size: 11px; color: #64748b; padding: 2px 4px; }
body.dark .hc-rate-btn { background: #12263f; border-color: #1e3a5f; color: #94a3b8; }
body.dark .hc-rate-btn:hover { background: #0a2450; border-color: #0a55c4; color: #bcdcff; }
body.dark .hc-rate-btn.is-on { background: #0a2450; border-color: #2f8cf7; color: #bcdcff; }
body.dark .hc-rate-noted { color: #94a3b8; }
.hc-chip {
  font-size: 11px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: #eff7ff; border: 1px solid #bcdcff; color: #0f479e;
}
.hc-chip:hover { background: #dbeafe; }
.hc-input-row { display: flex; gap: 8px; }
.hc-input-row .form-input { flex: 1; }
body.dark .hc-thread { background: #0b1a33; border-color: #1e3a5f; }
body.dark .hc-bubble { background: #12263f; border-color: #1e3a5f; color: #cbd5e1; }
body.dark .hc-row.me .hc-bubble { background: #0a55c4; border-color: #2f8cf7; color: #fff; }
body.dark .hc-chip { background: #0a2450; border-color: #0a55c4; color: #bcdcff; }

/* ---------- RIZEN Shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.shop-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(15,23,42,.28); border-color: #8ec3ff; }
.shop-art-wrap { position: relative; background: #f4f8ff; }
.shop-art { display: block; width: 100%; height: 148px; object-fit: cover; }
.shop-photo-count {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  background: rgba(15,23,42,.78); color: #fff; font-size: 10.5px; font-weight: 600;
}
.shop-tag {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(15,23,42,.86); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
}
.shop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-chip {
  font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
}
.shop-chip:hover { background: #e2e8f0; }
.shop-chip.active { background: #0a55c4; border-color: #0a55c4; color: #fff; }

.shop-show-stage { display: grid; touch-action: pan-y; }
.shop-show-stage.is-dragging { cursor: grabbing; user-select: none; }
/* Every slide sits in the same cell, so the band reserves the tallest one's height and a fade
   between groups never makes the dashboard jump. */
.shop-show-slide {
  grid-area: 1 / 1; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch;
  opacity: 0; visibility: hidden; transform: scale(.985); pointer-events: none;
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.shop-show-slide.active {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .55s ease, transform .55s ease, visibility 0s;
}
.shop-show-item {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
}
.shop-show-pic { position: relative; background: #f4f8ff; overflow: hidden; }
.shop-show-pic .shop-art { height: 128px; }
.shop-show-copy { padding: 9px 12px 12px; }
.shop-show-name { font-size: 14px; font-weight: 600; color: #1e293b; margin-top: 2px; }
.shop-show-price { font-size: 13.5px; font-weight: 600; color: #0a55c4; margin-top: 2px; }
.shop-show-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
/* The band reels on its own, but the operator may want to walk it by hand: two still arrows in the
   heading, no bigger than the words beside them and never over a price. */
.shop-show-nav { display: flex; align-items: center; gap: 5px; }
.shop-show-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 7px; border: 1px solid #e2e8f0; background: #f8fafc;
  color: #475569; font-size: 10.5px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.shop-show-arrow:hover { background: #eff7ff; border-color: #bcdcff; color: #0a55c4; }
.shop-show-arrow:focus-visible { outline: 2px solid #2f8cf7; outline-offset: 2px; }
.shop-show-arrow:active { background: #dbeafe; }
.shop-show-dot {
  width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #cbd5e1; transition: background .2s ease, width .2s ease;
}
.shop-show-dot.active { background: #0a55c4; width: 18px; border-radius: 999px; }
@media (max-width: 1024px) {
  .shop-show-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .shop-show-slide { grid-template-columns: 1fr; gap: 10px; }
  .shop-show-pic .shop-art { height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-show-slide, .shop-show-slide.active { transition: none; transform: none; }
}
body.dark .shop-card { background: #0f2440; border-color: #1e3a5f; }
body.dark .shop-card:hover { border-color: #2f8cf7; }
body.dark .shop-art-wrap, body.dark .shop-show-pic { background: #0b1a33; }
body.dark .shop-show-item { background: #0f2440; border-color: #1e3a5f; }
body.dark .shop-chip { background: #0a2450; border-color: #1e3a5f; color: #bcdcff; }
body.dark .shop-chip.active { background: #0a55c4; border-color: #2f8cf7; color: #fff; }
body.dark .shop-show-name { color: #e2e8f0; }
body.dark .shop-show-price { color: #7cc0ff; }
body.dark .shop-show-dot { background: #1e3a5f; }
body.dark .shop-show-dot.active { background: #2f8cf7; }
body.dark .shop-show-arrow { background: #0a2450; border-color: #1e3a5f; color: #bcdcff; }
body.dark .shop-show-arrow:hover { background: #0f2440; border-color: #2f8cf7; color: #7cc0ff; }

/* ---------- showroom and the ask buttons ---------- */
.shop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shop-act {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid #dbeafe; background: #f8fbff; color: #0a55c4; font-size: 11.5px; font-weight: 500;
}
.shop-act:hover { background: #eff7ff; border-color: #bcdcff; }
.shop-act-wa { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }
.shop-act-wa:hover { background: #d1fae5; }
.shop-act-call { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.shop-show-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.shop-show-act { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #0a55c4; }
.shop-show-act:hover { text-decoration: underline; }

/* ---------- the item sheet: who to reach about it ---------- */
.shop-open { cursor: pointer; }
.shop-open:focus-visible { outline: 2px solid #2f8cf7; outline-offset: 2px; }
.shop-sheet { max-width: 560px; }
.shop-sheet-pic { background: #f4f8ff; border-radius: 12px; overflow: hidden; }
.shop-sheet-pic .shop-art { height: 190px; }
.shop-sheet-gallery { border-radius: 12px; overflow: hidden; background: #f4f8ff; }
.shop-sheet-shot { display: block; width: 100%; height: 230px; object-fit: cover; }
.shop-sheet-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.shop-sheet-thumb {
  width: 64px; height: 46px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #f4f8ff;
}
.shop-sheet-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-sheet-thumb.active { border-color: #0a55c4; }
.shop-sheet-support { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.shop-sheet-title {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 6px;
}
.shop-support-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.shop-support-row + .shop-support-row { border-top: 1px solid #f1f5f9; }
.shop-support-copy { min-width: 0; flex: 1; }
.shop-support-name { font-size: 13.5px; font-weight: 600; color: #1e293b; }
.shop-support-role { font-size: 11px; color: #64748b; }
.shop-support-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.shop-support-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #1e293b; letter-spacing: .2px;
}
.shop-support-line:hover { color: #0a55c4; }
.shop-support-line .fa-whatsapp { color: #16a34a; }
.shop-support-line .fa-phone { color: #0a55c4; }

.showroom-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 16px; align-items: start; }
.showroom-people { display: flex; flex-direction: column; gap: 10px; }
.showroom-person {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fbfdff;
}
.showroom-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: #eff7ff; border: 1px solid #dbeafe;
}
.showroom-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showroom-initials { font-size: 13px; font-weight: 700; color: #0a55c4; }
.showroom-person-copy { min-width: 0; flex: 1; }
.showroom-person-name { font-size: 13.5px; font-weight: 600; color: #1e293b; }
.showroom-person-role { font-size: 11px; color: #64748b; }
.showroom-person-note { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.showroom-person-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.showroom-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 11.5px; font-weight: 500;
}
.showroom-btn:hover { border-color: #cbd5e1; }
.showroom-btn-wa { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }
.showroom-place { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fbfdff; }
.showroom-map { height: 170px; background: #eff6ff; }
.showroom-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.showroom-place-copy { padding: 10px 12px; }
.showroom-place-name { font-size: 13.5px; font-weight: 600; color: #1e293b; }
.showroom-place-line { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.showroom-place-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 500; color: #0a55c4; }
.showroom-place-photo { display: block; height: 96px; overflow: hidden; background: #eff6ff; }
.showroom-place-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .showroom-wrap { grid-template-columns: 1fr; }
  .showroom-person { align-items: flex-start; }
}
body.dark .shop-act { background: #0b1a33; border-color: #1e3a5f; color: #7cc0ff; }
body.dark .shop-act-wa { background: #052e22; border-color: #065f46; color: #6ee7b7; }
body.dark .shop-act-call { background: #101f36; border-color: #1e3a5f; color: #cbd5e1; }
body.dark .shop-show-act { color: #7cc0ff; }
body.dark .shop-sheet-pic { background: #0b1a33; }
body.dark .shop-sheet-gallery { background: #0b1a33; }
body.dark .shop-sheet-thumb { background: #0b1a33; border-color: transparent; }
body.dark .shop-sheet-thumb.active { border-color: #2f8cf7; }
body.dark .shop-sheet-support { border-color: #1e3a5f; }
body.dark .shop-support-row + .shop-support-row { border-color: #16304f; }
body.dark .shop-support-name, body.dark .shop-support-line { color: #e2e8f0; }
body.dark .shop-support-role { color: #94a3b8; }
body.dark .shop-support-line:hover { color: #7cc0ff; }
body.dark .showroom-person, body.dark .showroom-place { background: #0f2440; border-color: #1e3a5f; }
body.dark .showroom-avatar { background: #0b1a33; border-color: #1e3a5f; }
body.dark .showroom-initials, body.dark .showroom-place-link, body.dark .showroom-btn-wa { color: #7cc0ff; }
body.dark .showroom-person-name, body.dark .showroom-place-name { color: #e2e8f0; }
body.dark .showroom-person-role, body.dark .showroom-place-line { color: #94a3b8; }
body.dark .showroom-btn { background: #101f36; border-color: #1e3a5f; color: #cbd5e1; }
body.dark .showroom-btn-wa { background: #052e22; border-color: #065f46; color: #6ee7b7; }
body.dark .showroom-map, body.dark .showroom-place-photo { background: #0b1a33; }