/* ============================================================================
   Aurbit Reserve — Investor/Admin Dashboard template
   Shared shell stylesheet: design tokens (copied verbatim from the marketing
   site's index.html :root so every color/font matches exactly), reset, and
   every reusable dashboard component (sidebar, topbar, cards, tables, forms,
   status pills, buttons). Page-specific layout (e.g. the exact grid on the
   client overview vs. the admin client-list page) stays in each page's own
   <style> block, same as the marketing site's convention -- only the truly
   shared chrome lives here.

   Deliberate departure from the marketing site's "fully self-contained page,
   no shared includes" convention: that site is ~7 pages with little repeated
   structure; this is a 12-page dashboard where every single page shares the
   same sidebar/topbar/card system, so a shared file avoids 12x duplication
   of the same ~300 lines and the drift-risk that comes with it (see the
   marketing site's own memory notes on the raisedUsd-duplicated-per-page
   fragility -- same category of problem, avoided here on purpose). Anything
   that IS page-specific (the buy calculator, the KYC upload flow, the admin
   tables) still lives inline in that page's own <script>/<style>, matching
   the sibling site's spirit as closely as the larger scope here allows. ============================================================================ */

:root {
  --background-primary: #050A0E;
  --background-secondary: #081017;
  --background-elevated: #0C141B;
  --background-card: #101820;

  --text-primary: #F1EEE8;
  --text-secondary: #B8B5AE;
  --text-muted: #7E8386;

  --gold-primary: #C89A45;
  --gold-light: #E1BA6A;
  --gold-muted: #987137;
  --gold-dark: #61471F;
  --gold-metal: linear-gradient(110deg, #9B702E 0%, #C89743 30%, #E0B866 50%, #B88636 72%, #8B6328 100%);

  --border-subtle: rgba(255,255,255,0.08);
  --border-gold: rgba(200,154,69,0.35);

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', 'Segoe UI', -apple-system, Roboto, sans-serif;

  --sidebar-w: 264px;
  --topbar-h: 72px;

  --good: #7FCB93;
  --good-bg: rgba(127,203,147,0.12);
  --warn: var(--gold-light);
  --warn-bg: rgba(200,154,69,0.14);
  --bad: #E58080;
  --bad-bg: rgba(229,128,128,0.12);
  --info: #7FB3E5;
  --info-bg: rgba(127,179,229,0.14);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--background-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; color: var(--text-primary); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* --- buttons (same visual system as the marketing site's .btn/.btn-primary) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 26px; border-radius: 6px; border: none;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold-metal); color: #1A1103; position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: 0; width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75), transparent);
  transform: translateX(-300%) skewX(-20deg);
  animation: goldGlintSweep 12s ease-in-out infinite;
}
@keyframes goldGlintSweep {
  0% { transform: translateX(-300%) skewX(-20deg); }
  12% { transform: translateX(500%) skewX(-20deg); }
  100% { transform: translateX(500%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) { .btn-primary::after { animation: none; opacity: 0; } }
.btn-secondary { background: transparent; border: 1px solid var(--border-gold); color: var(--text-primary); }
.btn-ghost { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.btn-danger { background: rgba(229,128,128,0.12); border: 1px solid rgba(229,128,128,0.4); color: var(--bad); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 11px; border-radius: 5px; }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn-block { width: 100%; }

/* --- form fields --- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 12px; color: var(--text-secondary); letter-spacing: 0.02em; }
.field .hint { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="date"], .field input[type="tel"],
.field select, .field textarea {
  background: var(--background-elevated); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 12px 14px; color: var(--text-primary); font-size: 14.5px;
  width: 100%; transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--border-gold);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.field-error { border-color: var(--bad) !important; }
.field-error-msg { font-size: 11.5px; color: var(--bad); margin-top: 2px; display: none; }
.field-error-msg.show { display: block; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.checkbox-row input { margin-top: 3px; accent-color: var(--gold-primary); }

/* --- cards / tables / pills, reused across every dashboard page --- */
.dash-card { background: var(--background-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 26px; }
.dash-card + .dash-card { margin-top: 24px; }
.dash-card-title {
  font-family: var(--font-serif); font-size: 17px; font-weight: 500;
  margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.dash-card-title .view-all {
  font-size: 11.5px; color: var(--gold-primary); text-decoration: none; font-family: var(--font-sans);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.dash-card-title .view-all:hover { color: var(--gold-light); }

table.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash-table th {
  text-align: left; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-weight: 600;
}
.dash-table td { padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-secondary); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table td:first-child, .dash-table th:first-child { color: var(--text-primary); }
.dash-table-scroll { overflow-x: auto; }
.dash-table .num { font-variant-numeric: tabular-nums; }
.dash-table .actions { display: flex; gap: 8px; justify-content: flex-end; }
.dash-table .icon-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center;
}
.dash-table .icon-btn:hover { border-color: var(--border-gold); color: var(--gold-light); }
.dash-table .icon-btn svg { width: 15px; height: 15px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.complete, .status-pill.active, .status-pill.verified, .status-pill.approved { background: var(--good-bg); color: var(--good); }
.status-pill.pending, .status-pill.current, .status-pill.review { background: var(--warn-bg); color: var(--warn); }
.status-pill.failed, .status-pill.rejected, .status-pill.suspended { background: var(--bad-bg); color: var(--bad); }
.status-pill.in-progress { background: var(--info-bg); color: var(--info); }
.status-pill.neutral { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

.empty-row { text-align: center; padding: 34px 12px; color: var(--text-muted); font-size: 13.5px; }

/* --- shell layout --- */
.dash-shell { display: flex; min-height: 100vh; }

.dash-sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--background-secondary);
  border-right: 1px solid var(--border-subtle); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 26px 18px; z-index: 40;
}
.dash-sidebar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 0 8px; margin-bottom: 30px; }
.dash-sidebar-logo img { height: 32px; width: auto; }
.dash-sidebar-logo-word { display: flex; flex-direction: column; line-height: 1.05; }
.dash-sidebar-logo-word .l1 { font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--text-primary); }
.dash-sidebar-logo-word .l2 { font-weight: 400; font-size: 9px; letter-spacing: 0.24em; color: var(--gold-primary); }

.dash-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.dash-nav-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 16px 12px 8px; }
.dash-nav-label:first-child { padding-top: 4px; }
.dash-nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px;
  font-size: 13.5px; color: var(--text-secondary); text-decoration: none; border: 1px solid transparent;
}
.dash-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }
.dash-nav a:hover { background: rgba(255,255,255,0.03); color: var(--text-primary); }
.dash-nav a.active { background: rgba(200,154,69,0.08); color: var(--gold-light); border-color: var(--border-gold); }
.dash-nav-divider { height: 1px; background: var(--border-subtle); margin: 14px 6px; }
.dash-role-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px; margin-left: auto;
}
.dash-role-tag.admin { background: rgba(200,154,69,0.16); color: var(--gold-light); }

.dash-sidebar-footer { border-top: 1px solid var(--border-subtle); padding-top: 14px; margin-top: 10px; }
.dash-sidebar-footer a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px;
  font-size: 13.5px; color: var(--text-muted); text-decoration: none;
}
.dash-sidebar-footer a:hover { color: var(--bad); background: rgba(229,128,128,0.06); }
.dash-sidebar-footer a svg { width: 17px; height: 17px; }

.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-topbar {
  height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0;
  background: rgba(5,10,14,0.88); backdrop-filter: blur(8px); z-index: 30; gap: 16px;
}
.dash-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dash-topbar-title { font-family: var(--font-serif); font-size: 19px; font-weight: 500; white-space: nowrap; }
.dash-menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 6px; flex-shrink: 0; }
.dash-menu-toggle span { width: 20px; height: 1px; background: var(--text-primary); }
.dash-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* account status banner: admin-set, short, colored -- explicit ask that it "should not show
   anything if not active" (empty message = the element isn't rendered at all, not just hidden)
   and that admin picks a color per message, from the fixed swatch palette below rather than an
   arbitrary hex, so it always reads as an intentional part of this design system. Sits in the
   topbar, left of the notification bell, visible on every client-facing page. */
.dash-status-banner {
  display: flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.dash-status-banner::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dash-status-banner.tone-gold { background: var(--warn-bg); color: var(--warn); border-color: var(--border-gold); }
.dash-status-banner.tone-green { background: var(--good-bg); color: var(--good); border-color: rgba(127,203,147,0.35); }
.dash-status-banner.tone-red { background: var(--bad-bg); color: var(--bad); border-color: rgba(229,128,128,0.35); }
.dash-status-banner.tone-blue { background: var(--info-bg); color: var(--info); border-color: rgba(127,179,229,0.35); }
.dash-status-banner.tone-gray { background: rgba(255,255,255,0.06); color: var(--text-secondary); border-color: var(--border-subtle); }
@media (max-width: 640px) { .dash-status-banner span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } }

/* color-swatch picker for the account status editor (admin-clients.html) -- a fixed palette,
   not a raw <input type=color>, so a client's status pill always matches one of the tones
   above rather than an arbitrary hex nobody else's UI recognizes. */
.swatch-row { display: flex; gap: 10px; }
.swatch-option {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; padding: 3px; cursor: pointer;
}
.swatch-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.swatch-option.tone-gold { background: var(--warn); }
.swatch-option.tone-green { background: var(--good); }
.swatch-option.tone-red { background: var(--bad); }
.swatch-option.tone-blue { background: var(--info); }
.swatch-option.tone-gray { background: var(--text-secondary); }
.swatch-option:has(input:checked) { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--background-elevated); }

/* the account pill: always-visible email/username, so the client can see at a glance which
   account they're in -- explicit ask ("place where they show the current email/username, so
   the client knows that they're exactly in their account"). */
.dash-account-pill {
  display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px;
  border: 1px solid var(--border-subtle); border-radius: 22px; font-size: 13px; color: var(--text-secondary);
  white-space: nowrap;
}
.dash-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--gold-metal);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #1A1103; flex-shrink: 0;
}

/* notification bell: deliberately understated (a plain outline bell, no bright color) until
   there's something unread (a small gold dot appears) -- "should not be obvious, but ... they
   should know that the client has seen it" once opened, the dot clears (see dashboard.js
   markNotificationsSeen -- the real "admin can see it was seen" read-receipt is a backend
   concern; this only handles the client-side visible state). */
.dash-notif-wrap { position: relative; }
.dash-notif-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-subtle);
  background: none; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
}
.dash-notif-btn svg { width: 17px; height: 17px; }
.dash-notif-btn:hover { border-color: var(--border-gold); color: var(--gold-light); }
.dash-notif-dot {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 6px rgba(225,186,106,0.7); border: 2px solid var(--background-primary);
}
.dash-notif-dot[hidden] { display: none; }
.dash-notif-panel {
  position: absolute; top: 50px; right: 0; width: 340px; max-width: calc(100vw - 32px);
  background: var(--background-elevated); border: 1px solid var(--border-subtle); border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5); z-index: 60; opacity: 0; pointer-events: none;
  transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease;
}
.dash-notif-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dash-notif-panel-head { padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.dash-notif-list { max-height: 320px; overflow-y: auto; }
.dash-notif-item { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.dash-notif-item:last-child { border-bottom: none; }
.dash-notif-item-title { font-size: 13px; color: var(--text-primary); margin-bottom: 4px; font-weight: 600; }
.dash-notif-item-body { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.dash-notif-item-time { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.dash-notif-empty { padding: 28px 18px; text-align: center; color: var(--text-muted); font-size: 13px; }

.dash-body { padding: 32px; flex: 1; max-width: 1400px; }
.dash-body-narrow { max-width: 760px; }
.dash-page-lead { color: var(--text-secondary); font-size: 14.5px; margin: -8px 0 26px; max-width: 640px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.stat-card { background: var(--background-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 20px 22px; }
.stat-card-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.stat-card-value { font-family: var(--font-serif); font-size: 25px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-card-value.gold { color: var(--gold-light); }
.stat-card-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.stat-card-sub.up { color: var(--good); }

.grid-2fr-1fr { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.grid-1fr-1fr { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .grid-1fr-1fr { grid-template-columns: 1fr; } }

/* the STO progress widget: same underlying data as the marketing hero's tracker, deliberately
   restyled (compact, vertical card, no particle background) per the explicit ask for "a
   differently styled one from index". */
.sto-widget-stat { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sto-widget-stat .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sto-widget-stat .value { font-family: var(--font-serif); font-size: 18px; color: var(--gold-light); }
.sto-widget-track { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); margin: 14px 0 10px; overflow: visible; }
.sto-widget-fill { height: 100%; border-radius: 4px; background: var(--gold-metal); position: relative; }
.sto-widget-head { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 10px rgba(225,186,106,0.8); transform: translate(-50%, -50%); }
.sto-widget-pct { font-size: 11.5px; color: var(--text-muted); text-align: right; margin-bottom: 4px; }
.sto-widget-countdown { text-align: center; font-size: 12.5px; color: var(--text-secondary); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.sto-widget-countdown strong { color: var(--gold-light); font-family: var(--font-serif); font-weight: 500; }

/* buy widget: USD input on the left driving a computed token output on the right */
.buy-calc-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-bottom: 16px; }
.buy-calc-arrow { color: var(--text-muted); padding-bottom: 12px; }
.buy-calc-output { background: var(--background-elevated); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px 14px; }
.buy-calc-output .amount { font-family: var(--font-serif); font-size: 17px; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.buy-calc-rate { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }

@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2fr-1fr { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .dash-sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: 24px 0 60px rgba(0,0,0,0.5);
  }
  .dash-sidebar.open { transform: translateX(0); }
  .dash-sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 39; }
  .dash-sidebar-scrim.open { display: block; }
  .dash-menu-toggle { display: flex; }
  .dash-topbar-title { font-size: 16px; }
  .dash-account-pill span { display: none; }
  .dash-account-pill { padding: 6px; }
  .dash-body { padding: 20px; }
}
/* --- modal, shared by the admin pages (create/edit transaction, client detail, etc.) --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100;
  display: none; align-items: flex-start; justify-content: center; padding: 60px 20px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--background-elevated); border: 1px solid var(--border-subtle); border-radius: 10px;
  width: 100%; max-width: 560px; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); }
.modal-head h2 { font-size: 17px; }
.modal-close { background: none; border: none; color: var(--text-muted); width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: 22px 24px; max-height: 66vh; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--border-subtle); }
.modal-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-primary); margin: 20px 0 12px; font-weight: 700; }
.modal-section-title:first-child { margin-top: 0; }
.doc-thumb-row { display: flex; gap: 12px; flex-wrap: wrap; }
.doc-thumb {
  width: 120px; height: 80px; border-radius: 6px; border: 1px solid var(--border-subtle);
  background: var(--background-card); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-size: 11px; color: var(--text-muted); text-decoration: none;
}
.doc-thumb svg { width: 20px; height: 20px; }
.doc-thumb:hover { border-color: var(--border-gold); color: var(--gold-light); }

/* compact variant of .modal, used for the client-facing transaction-detail popup (overview.html)
   -- a lighter, single-purpose viewer, not a full edit form like the admin modals. */
.modal-sm { max-width: 400px; }
.detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13.5px; }
.detail-row:last-child { border-bottom: none; }
.detail-row .k { color: var(--text-muted); }
.detail-row .v { color: var(--text-primary); font-weight: 600; text-align: right; }
.detail-row .v.mono { font-family: monospace; font-weight: 400; font-size: 12.5px; }
.detail-message-box {
  margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: var(--background-card);
  border: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}
.detail-message-box.empty { color: var(--text-muted); font-style: italic; }

/* questionnaire (kyc.html) -- one question shown at a time, answering one auto-advances to the
   next (explicit ask), with a progress bar tracking how far through the set the client is. */
.qn-progress { margin-bottom: 20px; }
.qn-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.qn-progress-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; }
.qn-progress-fill { height: 100%; border-radius: 3px; background: var(--gold-metal); transition: width 0.25s ease; }
.qn-item { padding: 0; }
.qn-item[hidden] { display: none; }
.qn-question { font-size: 14.5px; color: var(--text-primary); font-weight: 600; margin-bottom: 12px; line-height: 1.5; }
.qn-options { display: flex; flex-direction: column; gap: 9px; }
.qn-option { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 5px; }
.qn-option input { margin-top: 3px; accent-color: var(--gold-primary); flex-shrink: 0; }
.qn-option:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.qn-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.qn-complete { display: flex; align-items: center; gap: 8px; color: var(--good); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.qn-complete svg { width: 18px; height: 18px; }

/* "Get Address for Payment" reveal (buy-tokens.html) */
.payment-address-box {
  margin-top: 16px; padding: 16px 18px; border-radius: 8px; background: var(--background-card);
  border: 1px solid var(--border-gold); display: none;
}
.payment-address-box.show { display: block; }
.payment-address-box .label { font-size: 11px; color: var(--gold-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 700; }
.payment-address-row { display: flex; align-items: center; gap: 10px; }
.payment-address-value { font-family: monospace; font-size: 13.5px; color: var(--text-primary); word-break: break-all; flex: 1; }
.payment-address-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .dash-notif-panel { position: fixed; top: var(--topbar-h); right: 8px; left: 8px; width: auto; }
}