/* ============================================================
   SIMARA Capital — Design System v5.0
   Brand: Cormorant Garamond (hero display) + Open Sans (UI) + JetBrains Mono (onchain)
   Theme: Light canvas · Indigo primary · Lime reserved
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand ──────────────────────────────────────────────── */
  --brand:               #2C2EBC;
  --brand-hover:         #2224A0;
  --brand-active:        #1A1C7E;
  --brand-light:         #EEEEF9;
  --brand-border:        #C5C6EE;
  --lime:                #A2F55C;
  --lime-bg:             rgba(162,245,92,0.10);

  /* ── Neutral palette ────────────────────────────────────── */
  --n950:  #0D0E1A;
  --n900:  #1A1B2E;
  --n800:  #2D2F45;
  --n700:  #4A4C6A;
  --n500:  #6B6D8A;
  --n400:  #9B9DB8;
  --n200:  #E2E3EE;
  --n100:  #F1F2F9;
  --n050:  #F8F9FF;
  --n000:  #FFFFFF;

  /* ── Semantic shortcuts ─────────────────────────────────── */
  --border:      var(--n200);
  --surface:     var(--n000);
  --surface-alt: var(--n050);
  --text:        var(--n950);
  --text-2:      var(--n500);
  --text-3:      var(--n400);

  /* ── Performance signals ────────────────────────────────── */
  --signal-strong:   #16A34A;
  --signal-moderate: #D97706;
  --signal-weak:     #DC2626;
  --signal-neutral:  #6B6D8A;

  /* ── Typography ─────────────────────────────────────────── */
  --font-hero:    'Cormorant Garamond', Georgia, serif;
  --font-display: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:      'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Spacing (4px rhythm) ────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:      4px;
  --radius-control: 6px;
  --radius-card:    10px;
  --radius-panel:   12px;
  --radius-pill:    999px;

  /* ── Shadows (indigo-tinted) ──────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(44,46,188,0.04);
  --shadow-sm: 0 2px 6px rgba(44,46,188,0.06);
  --shadow-md: 0 4px 12px rgba(44,46,188,0.08);
  --shadow-lg: 0 8px 24px rgba(44,46,188,0.12);
  --shadow-xl: 0 16px 40px rgba(44,46,188,0.16);

  /* ── Shell dimensions ────────────────────────────────────── */
  --shell-width:   220px;
  --topbar-height: 56px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--n950);
  background: var(--n050);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Typography scale ──────────────────────────────────────── */
.text-display    { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.text-section    { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; }
.text-card-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.35; }
.text-hero       { font-family: var(--font-hero); }
.text-body       { font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--n500); }
.text-dense      { font-size: 12.5px; font-weight: 400; line-height: 1.4; }
.text-meta       { font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--n500); letter-spacing: 0.01em; }
.text-kpi-value  { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.text-kpi-label  { font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; color: var(--n500); }
.mono            { font-family: var(--font-mono); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--n050);
}

/* ── LEFT NAV ──────────────────────────────────────────────── */
.left-nav {
  width: var(--shell-width);
  flex-shrink: 0;
  background: var(--n900);
  color: var(--n200);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  overflow: hidden;
}

.sidebar-logo {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--n800);
  flex-shrink: 0;
}
.logo-wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--n000);
  line-height: 1;
}
.logo-wordmark .i { color: var(--brand-border); }
.logo-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--n400);
  margin-top: 4px;
  text-transform: lowercase;
}

.nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
  scrollbar-width: none;
}
.nav-scroll::-webkit-scrollbar { display: none; }

.nav-section { margin-bottom: var(--space-2); }
.nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n700);
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  border-radius: var(--radius-control);
  color: var(--n400);
  margin-bottom: 1px;
  position: relative;
  transition: background 120ms, color 120ms;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.nav-item:hover {
  background: var(--n800);
  color: var(--n200);
}
.nav-item.active {
  background: var(--brand);
  color: var(--n000);
  border-left-color: rgba(255,255,255,0.4);
}
.nav-item.active .nav-desc { color: rgba(255,255,255,0.65); }

.nav-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 13px;
}
.nav-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.nav-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
}
.nav-desc {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--n700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.nav-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  color: var(--n400);
  border: 1px solid var(--n800);
}
.nav-badge.count {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}

.sidebar-bottom {
  padding: var(--space-2);
  border-top: 1px solid var(--n800);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  margin-bottom: 4px;
}
.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #4547d4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--font-display);
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--n200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 10.5px;
  color: var(--n500);
}

.sidebar-vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 4px 0 4px 8px;
}
.vc-chip-tenant {
  background: var(--brand-light);
  color: var(--brand);
  border: 1px solid var(--brand-border);
}
.vc-chip-login {
  background: rgba(44,46,188,0.15);
  color: rgba(162,171,255,0.9);
  border: 1px solid rgba(44,46,188,0.3);
}

/* ── MAIN COLUMN ───────────────────────────────────────────── */
.main-column {
  margin-left: var(--shell-width);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── TOP CONTEXT BAR ───────────────────────────────────────── */
.top-context-bar {
  height: var(--topbar-height);
  background: var(--n000);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
}

.topbar-context {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.topbar-context-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-control);
  background: var(--n100);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--brand);
}
.topbar-context-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--n950);
  text-transform: uppercase;
}

.topbar-spacer { flex: 1; }

.topbar-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--n100);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  color: var(--n500);
  font-weight: 500;
  flex-shrink: 0;
}

.topbar-icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-control);
  background: var(--n100);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--n500);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  position: relative;
}
.topbar-icon-btn:hover {
  background: var(--n200);
  color: var(--n950);
}

.topbar-sera-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background 120ms;
  flex-shrink: 0;
}
.topbar-sera-btn:hover { background: var(--brand-hover); }

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(162,245,92,0.2);
  animation: pulseDot 2.4s ease-in-out infinite;
}

.notif-badge-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  background: var(--brand);
  border: 2px solid var(--n000);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── CONTENT CANVAS ────────────────────────────────────────── */
.content-canvas {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
  background: var(--n050);
}

/* ── PAGE HEADER ───────────────────────────────────────────── */
.page-header {
  margin-bottom: var(--space-6);
}
.page-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--n950);
  margin: 0 0 4px;
}
.page-subtitle {
  font-size: 13.5px;
  color: var(--n500);
  line-height: 1.5;
}

/* ── KPI GROUP ─────────────────────────────────────────────── */
.kpi-group {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-group-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-group-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-group-2 { grid-template-columns: repeat(2, 1fr); }

.kpi-card {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 150ms;
}
.kpi-card:hover { box-shadow: var(--shadow-sm); }

.kpi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.kpi-card-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-control);
  background: var(--n100);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--brand);
}
.kpi-delta {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.kpi-delta.up   { background: #D1FAE5; color: var(--signal-strong); }
.kpi-delta.down { background: #FEE2E2; color: var(--signal-weak); }
.kpi-delta.flat { background: var(--n100); color: var(--n500); }

.kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--n950);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--n500);
}

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--n950);
}
.card-body { padding: var(--space-5); }

/* ── DATA TABLE ────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n500);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--n050);
  white-space: nowrap;
}
.data-table td {
  font-size: 13.5px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--n100);
  color: var(--n950);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--n050); }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-control);
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 120ms, box-shadow 120ms, color 120ms;
  white-space: nowrap;
}
.btn-sm  { font-size: 12px; padding: 6px 12px; }
.btn-md  { font-size: 13px; padding: 8px 16px; }
.btn-lg  { font-size: 14px; padding: 11px 22px; }

.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-sm); }

.btn-secondary {
  background: var(--n100);
  color: var(--n950);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--n200); }

.btn-ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand-border);
}
.btn-ghost:hover { background: var(--brand-light); }

.btn-danger {
  background: #FEE2E2;
  color: var(--signal-weak);
  border: 1px solid #FECACA;
}
.btn-danger:hover { background: #FECACA; }

.btn-lime {
  background: var(--brand);
  color: #fff;
}
.btn-lime:hover { background: var(--brand-hover); }

/* ── BADGES / CHIPS ─────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chip-brand   { background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-border); }
.chip-success { background: #D1FAE5; color: var(--signal-strong); border: 1px solid #A7F3D0; }
.chip-warn    { background: #FEF3C7; color: var(--signal-moderate); border: 1px solid #FDE68A; }
.chip-danger  { background: #FEE2E2; color: var(--signal-weak); border: 1px solid #FECACA; }
.chip-neutral { background: var(--n100); color: var(--n500); border: 1px solid var(--border); }
.chip-lime    { background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-border); }

/* ── FORM CONTROLS ──────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--n500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-input {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--n950);
  width: 100%;
  transition: border-color 150ms, box-shadow 150ms;
  outline: none;
  font-family: var(--font-ui);
}
.form-input:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(44,46,188,0.08);
}
.form-input::placeholder { color: var(--n400); }

.form-select {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 9px 32px 9px 12px;
  font-size: 13.5px;
  color: var(--n950);
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6D8A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  outline: none;
  font-family: var(--font-ui);
  transition: border-color 150ms;
}
.form-select:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(44,46,188,0.08);
}

.form-textarea {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--n950);
  width: 100%;
  resize: vertical;
  min-height: 100px;
  outline: none;
  font-family: var(--font-ui);
  transition: border-color 150ms;
  line-height: 1.5;
}
.form-textarea:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(44,46,188,0.08);
}

/* ── STEP WIZARD ─────────────────────────────────────────────── */
.step-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-8);
}
.step-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.step-item:last-child { flex: none; }
.step-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  transition: background 200ms, color 200ms;
}
.step-circle.done { background: var(--signal-strong); color: #fff; }
.step-circle.active { background: var(--brand); color: #fff; }
.step-circle.pending { background: var(--n100); color: var(--n500); border: 1px solid var(--border); }
.step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--n500);
}
.step-label.active { color: var(--n950); }
.step-connector {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 var(--space-3);
}
.step-connector.done { background: var(--signal-strong); }

/* ── ONBOARDING WIZARD CARD ──────────────────────────────────── */
.wizard-card {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  max-width: 680px;
  margin: var(--space-8) auto;
  overflow: hidden;
}
.wizard-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--n050), var(--brand-light));
}
.wizard-body { padding: var(--space-6); }

/* ── DOCUMENT VAULT ──────────────────────────────────────────── */
.doc-vault-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.doc-filter-panel {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
}
.doc-filter-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n500);
  margin-bottom: var(--space-3);
}
.doc-filter-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-control);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--n500);
  cursor: pointer;
  transition: background 100ms, color 100ms;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.doc-filter-chip:hover { background: var(--n050); color: var(--n950); }
.doc-filter-chip.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }

.doc-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-panel);
  padding: var(--space-10);
  text-align: center;
  background: var(--n050);
  transition: border-color 150ms, background 150ms;
  cursor: pointer;
  margin-bottom: var(--space-5);
}
.doc-upload-zone:hover, .doc-upload-zone.drag-over {
  border-color: var(--brand);
  background: var(--brand-light);
}
.doc-upload-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--n100);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin: 0 auto var(--space-3);
  color: var(--brand);
}

.doc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.doc-row {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: box-shadow 120ms, border-color 120ms;
}
.doc-row:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-border); }
.doc-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-control);
  background: var(--n050);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.doc-info { flex: 1; min-width: 0; }
.doc-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--n950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.doc-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.doc-meta-item {
  font-size: 11.5px;
  color: var(--n500);
  display: flex;
  align-items: center;
  gap: 4px;
}
.doc-vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  background: var(--lime-bg);
  color: #3D6B12;
  border: 1px solid rgba(162,245,92,0.3);
  /* lime reserved here — credential issuance is the one signal worth it */
}
.doc-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ── REV GATE ────────────────────────────────────────────────── */
.rev-gate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.rev-layer {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.rev-layer::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.rev-layer.strong::before  { background: var(--signal-strong); }
.rev-layer.moderate::before { background: var(--signal-moderate); }
.rev-layer.pending::before  { background: var(--n400); }
.rev-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.rev-layer-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--n950);
  font-family: var(--font-display);
}
.rev-score-bar {
  height: 6px;
  background: var(--n100);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-2);
}
.rev-score-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 600ms cubic-bezier(0.4,0,0.2,1);
}

/* ── MANDATE BOARD ───────────────────────────────────────────── */
.mandate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.mandate-card {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 150ms, border-color 150ms;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mandate-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-border);
}
.mandate-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.mandate-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--n950);
  line-height: 1.3;
}
.mandate-amount {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
}
.mandate-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── DEAL ROOM v2 ────────────────────────────────────────────── */
.deal-room-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-5);
  align-items: start;
}

/* Sidebar deal list */
.deal-room-sidebar-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 100ms;
  margin-bottom: 2px;
}
.deal-room-sidebar-item:hover { background: var(--n050); border-color: var(--n100); }
.deal-room-sidebar-item.active { background: var(--brand-light); border-color: var(--brand-border); }
.deal-room-sidebar-title { font-size: 12.5px; font-weight: 700; color: var(--n950); }
.deal-room-sidebar-meta  { font-size: 11px; color: var(--n500); margin-top: 2px; }

/* Deal room header */
.deal-room-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--n100);
  flex-wrap: wrap;
}
.deal-room-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-light);
  border: 1.5px solid var(--brand-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--brand);
  flex-shrink: 0;
}
.deal-room-avatar-lg {
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 18px;
}

/* Principals row */
.deal-room-principals { display: flex; align-items: center; gap: 4px; }
.dr-principal-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  border: 1.5px solid transparent;
}
.dr-badge-seeker  { background: #EEF2FF; color: #3730A3; border-color: #C7D2FE; }
.dr-badge-funder  { background: #F0FFF4; color: #166534; border-color: #BBF7D0; }
.dr-badge-advisor { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }

/* Tab bar */
.deal-room-tabs {
  display: flex;
  gap: 2px;
  padding: var(--space-3) var(--space-5) 0;
  border-bottom: 1px solid var(--n100);
  overflow-x: auto;
}
.deal-room-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--n400);
  white-space: nowrap;
  transition: color 100ms, border-color 100ms;
  display: flex; align-items: center; gap: 6px;
}
.deal-room-tab:hover { color: var(--n700); }
.deal-room-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Tab panes */
.deal-room-pane { /* display toggled by JS */ }

/* Chat panel inside pane (no card border — already inside .card) */
.deal-chat-panel {
  display: flex;
  flex-direction: column;
  height: 500px;
}
.deal-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.deal-chat-input-row {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-2);
}
.chat-msg { display: flex; flex-direction: column; gap: 2px; }
.chat-msg.mine { align-items: flex-end; }
.chat-sender { font-size: 11px; font-weight: 600; color: var(--n500); padding: 0 4px; }
.chat-time   { font-size: 10.5px; color: var(--n400); padding: 0 4px; }
.chat-bubble {
  max-width: 72%;
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.chat-bubble.other { background: var(--n050); border: 1px solid var(--border); color: var(--n950); }
.chat-bubble.mine  { background: var(--brand); color: #fff; }
.chat-system-msg {
  font-size: 12px;
  color: var(--n400);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  background: var(--n050);
  border-radius: 8px;
  border: 1px solid var(--n100);
  margin-bottom: var(--space-1);
}

/* ── DEAL ACTIVITY FEED ─────────────────────────────────────── */
.activity-feed { display: flex; flex-direction: column; gap: var(--space-1); }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  transition: background 100ms;
}
.activity-item:hover { background: var(--n050); }
.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.activity-text {
  flex: 1;
  font-size: 13px;
  color: var(--n950);
  line-height: 1.4;
}
.activity-time {
  font-size: 11.5px;
  color: var(--n400);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── DASHBOARD ROLE PANELS ───────────────────────────────────── */
.dash-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-5);
  font-size: 13px;
  color: var(--n400);
}
.dash-gate-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-5) var(--space-4);
  font-size: 13px;
  color: var(--n500);
  background: var(--n050);
  border-radius: var(--radius-control);
}
.dash-gate-msg i { color: var(--n400); }

/* Dashboard data table */
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dash-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--n400);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--n100);
}
.dash-table tbody tr {
  border-bottom: 1px solid var(--n100);
  transition: background 100ms;
}
.dash-table tbody tr:last-child { border-bottom: none; }
.dash-table tbody tr:hover { background: var(--n050); }
.dash-table tbody td {
  padding: 10px 12px;
  color: var(--n700);
  vertical-align: middle;
}
.dash-table-title {
  font-weight: 600;
  color: var(--n950);
  font-size: 13px;
}

/* Mandate card body + footer (for screening queue cards) */
.mandate-card-body {
  flex: 1;
}
.mandate-card-footer {
  display: flex;
  gap: 8px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--n100);
  margin-top: auto;
}

/* ── NOTIFICATION ITEMS ──────────────────────────────────────── */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--n100);
  transition: background 100ms;
  cursor: pointer;
}
.notif-item:hover { background: var(--n050); }
.notif-item.unread { background: #F0F0FF; }
.notif-item.unread:hover { background: #E8E8FF; }
.notif-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--n100);
}

/* ── SERA WIDGET ─────────────────────────────────────────────── */
.sera-widget {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 380px;
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-xl);
  z-index: 500;
  display: none;
  flex-direction: column;
  max-height: 520px;
  overflow: hidden;
}
.sera-widget.open { display: flex; }
.sera-header {
  padding: 14px 16px;
  background: var(--n900);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.sera-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.sera-title { font-size: 13px; font-weight: 700; color: var(--n000); }
.sera-subtitle { font-size: 10.5px; color: var(--n400); }
.sera-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--n400);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.sera-close-btn:hover { color: var(--n200); }
.sera-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--n050);
}
.sera-msg { display: flex; flex-direction: column; gap: 4px; }
.sera-msg-user { align-items: flex-end; }
.sera-bubble {
  max-width: 82%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-panel);
  font-size: 13px;
  line-height: 1.5;
}
.sera-bubble.ai {
  background: var(--n000);
  border: 1px solid var(--border);
  color: var(--n950);
  border-radius: 4px var(--radius-panel) var(--radius-panel) var(--radius-panel);
}
.sera-bubble.user {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-panel) 4px var(--radius-panel) var(--radius-panel);
}
.sera-input-area {
  padding: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-2);
  background: var(--n000);
  flex-shrink: 0;
}
.sera-input {
  flex: 1;
  background: var(--n050);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--n950);
  outline: none;
  font-family: var(--font-ui);
  transition: border-color 150ms;
}
.sera-input:focus { border-color: var(--brand-border); }
.sera-send-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: background 120ms;
}
.sera-send-btn:hover { background: var(--brand-hover); }

/* ── VC CREDENTIAL CARD ──────────────────────────────────────── */
.vc-credential-card {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.vc-credential-header {
  padding: var(--space-3) var(--space-4);
  background: var(--n950);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vc-credential-body {
  padding: var(--space-4);
}
.vc-field {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 12.5px;
}
.vc-field-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime);
  flex-shrink: 0;
  width: 80px;
  /* lime kept here — on-chain data against dark background, one exception */
}
.vc-field-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--n200);
  word-break: break-all;
}

/* ── EMPTY STATES ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
}
.empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--n100);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin: 0 auto var(--space-4);
  color: var(--brand);
}
.empty-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--n950);
  margin-bottom: var(--space-2);
}
.empty-desc {
  font-size: 13.5px;
  color: var(--n500);
  max-width: 400px;
  margin: 0 auto var(--space-5);
  line-height: 1.6;
}

/* ── ALERT BANNERS ───────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-control);
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
.alert-brand   { background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand-border); }
.alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-warn    { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.alert-danger  { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

/* ── MODAL SYSTEM ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(13,14,26,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  animation: fadeIn 0.2s ease;
}
.modal-box {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.2s cubic-bezier(0.4,0,0.2,1);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--n950);
}
.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--n400);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.modal-close:hover { color: var(--n950); }
.modal-body { padding: var(--space-6); }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--n050);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

/* ── CONNECT WALLET MODAL (dark themed) ──────────────────────── */
.connect-modal-box {
  background: var(--n900);
  border: 1px solid var(--n800);
  border-radius: var(--radius-panel);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.2s cubic-bezier(0.4,0,0.2,1);
}
.connect-modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--n800);
  text-align: center;
}
.connect-modal-icon {
  width: 52px; height: 52px;
  background: rgba(44,46,188,0.15);
  border: 1px solid rgba(44,46,188,0.3);
  border-radius: var(--radius-panel);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin: 0 auto var(--space-4);
}
.connect-modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--n000);
  margin-bottom: var(--space-2);
}
.connect-modal-desc {
  font-size: 13.5px;
  color: var(--n500);
  line-height: 1.55;
}
.connect-modal-body { padding: var(--space-5) var(--space-6) var(--space-6); }

/* Wide variant for role-picker step */
.connect-modal-box--wide {
  max-width: 680px;
}

/* ── 2-step progress bar inside connect modal ─────────────── */
.connect-step-bar {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--n800);
  gap: 0;
}
.connect-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--n600);
  white-space: nowrap;
}
.connect-step span {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--n800);
  border: 1.5px solid var(--n700);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.connect-step.active { color: #A2F55C; }
.connect-step.active span { background: rgba(162,245,92,0.15); border-color: #A2F55C; color: #A2F55C; }
.connect-step.done { color: var(--n500); }
.connect-step.done span { background: rgba(44,46,188,0.2); border-color: rgba(44,46,188,0.4); color: #8B8EF0; }
.connect-step-line {
  flex: 1;
  height: 1px;
  background: var(--n700);
  margin: 0 10px;
}
.connect-step-line.done { background: rgba(44,46,188,0.35); }

/* ── Role picker grid (step 2) ────────────────────────────── */
.role-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .role-picker-grid { grid-template-columns: 1fr; }
  .connect-modal-box--wide { max-width: 100%; }
}
.role-picker-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px 16px;
  background: var(--rpc-bg, rgba(44,46,188,0.06));
  border: 2px solid var(--rpc-border, rgba(44,46,188,0.15));
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 150ms;
  outline: none;
}
.role-picker-card:hover {
  border-color: var(--rpc-color, #2C2EBC);
  box-shadow: 0 0 0 4px rgba(44,46,188,0.08);
}
.role-picker-card.selected {
  border-color: var(--rpc-color, #2C2EBC);
  background: var(--rpc-bg, rgba(44,46,188,0.10));
  box-shadow: 0 0 0 4px rgba(44,46,188,0.12);
}
.rpc-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--rpc-color, #2C2EBC);
  margin-bottom: 2px;
}
.rpc-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--n000);
  line-height: 1.2;
}
.rpc-tagline {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rpc-color, #2C2EBC);
  letter-spacing: .01em;
}
.rpc-desc {
  font-size: 12px;
  color: var(--n500);
  line-height: 1.5;
  flex: 1;
}
.rpc-select-indicator {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rpc-color, #2C2EBC);
  display: none;
}
.role-picker-card.selected .rpc-select-indicator { display: block; }

.ssw-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-control);
  padding: 11px 13px;
  color: var(--n000);
  font-size: 13.5px;
  outline: none;
  transition: border-color 150ms;
  font-family: var(--font-ui);
}
.ssw-input:focus { border-color: rgba(44,46,188,0.6); }
.ssw-input::placeholder { color: var(--n700); }
.ssw-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--n500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-2);
}

/* ── PUBLIC NAV ──────────────────────────────────────────────── */
.pub-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 200ms;
}
.pub-nav.scrolled { box-shadow: var(--shadow-sm); }
.pub-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.pub-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.pub-nav-logo-mark {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--n950);
}
.pub-nav-logo-mark span { color: var(--brand); }
.pub-nav-sub {
  font-size: 11px;
  color: var(--n500);
  letter-spacing: 0.08em;
  border-left: 1px solid var(--border);
  padding-left: 10px;
  margin-left: 2px;
}
.pub-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
}
.pub-nav-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--n500);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-ui);
  transition: color 120ms;
  padding: 0;
}
.pub-nav-link:hover { color: var(--n950); }
.pub-nav-actions { display: flex; align-items: center; gap: var(--space-3); }

/* ── HERO ────────────────────────────────────────────────────── */
/* ============================================================
   HERO — two-column: copy left, artifact cards right
   No background image. Pure CSS/HTML illustration.
   ============================================================ */
.hero {
  min-height: 100vh;
  background: var(--n000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px var(--space-8) 80px;
  position: relative;
  overflow: hidden;
}
/* Clean white canvas — no texture */
/* Left edge brand accent */
.hero::after {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--brand) 40%, var(--brand) 60%, transparent);
  border-radius: 0 2px 2px 0;
  opacity: 0.30;
  z-index: 1;
}
/* Two-column wrapper */
.hero-inner {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 2;
}
/* LEFT column */
.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
/* RIGHT column — card stage: centred within the right grid column */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ── Hero copy ─────────────────────────────────────────────── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
  padding: 5px 12px;
  background: var(--brand-light);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
}
.hero-title {
  font-family: var(--font-hero);
  font-size: clamp(52px, 5.5vw, 88px);
  font-weight: 700;
  color: var(--n950);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-10);
  text-align: left;
}
.hero-title em {
  font-style: italic;
  color: var(--brand);
}
.hero-desc {
  font-size: 17px;
  color: var(--n500);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 0 var(--space-8) 0;
  text-align: left;
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}
.hero-principals {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  overflow: hidden;
  width: 100%;
  max-width: 560px;
}
.hero-principal {
  flex: 1;
  background: var(--n000);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background 150ms;
}
.hero-principal:hover { background: var(--n050); }
.hero-principal-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n400);
}
.hero-principal-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--n950);
}
.hero-principal-line {
  font-size: 11.5px;
  color: var(--n500);
  line-height: 1.5;
}

/* ============================================================
   HERO ILLUSTRATION — unified Y-axis tilt, pure CSS/SVG
   ============================================================ */

/* Stage: the bounding box for the whole illustration */
.hcard-stage {
  position: relative;
  width: 100%;
  max-width: 420px;        /* reduced from 520px — less overpowering */
  overflow: visible;
  /* left-edge fade: illustration melts into white page */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%);
  mask-image: linear-gradient(to right, transparent 0%, black 14%);
}

/* Indigo background wash — radiates from right, fades to pure white on the left */
.hero-bg-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 85% 50%,
      rgba(44, 46, 188, 0.13) 0%,
      rgba(44, 46, 188, 0.07) 40%,
      rgba(255, 255, 255, 0)  75%
    );
  z-index: 1;
  pointer-events: none;
}

/* Green line — direct child of .hero (position:relative; overflow:hidden).
   top:0; bottom:0 = full section height, hard-clipped by overflow:hidden — no taper.
   z-index:2 = above hero-bg-wash (z:1) so the radial gradient never overlaps it.
   left: calc(50% + 310px) anchors to the SVG gap centre:
     hero-inner is max 1160px centred → its centre = 50% of .hero.
     Card centre is 890px from inner-left = 310px right of inner centre.
   Below hero-inner cards: hero-inner is z-index:2 and the cards within it
   are rendered above this absolutely-positioned sibling. */
.hi-vline {
  position: absolute;
  left: calc(50% + 310px);
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent       0%,
    #A2F55C          20%,
    #A2F55C          80%,
    transparent     100%
  );
  z-index: 1;
  pointer-events: none;
}

/* The single unified rotated group — ALL cards tilt together as one flat surface */
.hi-rotated-group {
  position: relative;
  transform: perspective(1000px) rotateY(-14deg);
  transform-origin: center center;
  transform-style: flat;
  z-index: 1;               /* cards sit ABOVE the vline */
}

/* The SVG containing all 6 document cards */
.hi-doc-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Glassmorphic role cards — deep frosted glass over the indigo wash.
   backdrop-filter blurs whatever is behind (the indigo bg + doc cards).
   Tinted white + indigo border gives the reference's frosted-panel look. */
.hi-role-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(2.2) brightness(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(2.2) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(44, 46, 188, 0.10);
  border-radius: 10px;
  box-shadow:
    0 4px 24px rgba(44, 46, 188, 0.14),
    0 1px 3px  rgba(44, 46, 188, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
  padding: 10px 14px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 3;
  height: 19%;
  min-height: 72px;
}

.hi-rc-title {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(12px, 2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0D0E1A;
  line-height: 1.2;
}

.hi-rc-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 9px;
  color: #6B6D8A;
  letter-spacing: 0.02em;
}

.hi-rc-lime {
  width: 32px;
  height: 2px;
  background: #2C2EBC;
  border-radius: 1px;
  margin: 2px 0 4px;
  opacity: 0.35;
}

.hi-rc-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.hi-pill {
  font-family: 'Open Sans', sans-serif;
  font-size: 8px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.hi-pill-indigo {
  background: rgba(44, 46, 188, 0.07);
  color: #2C2EBC;
}

.hi-pill-green {
  background: rgba(44, 46, 188, 0.07);
  color: #2C2EBC;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-right {
    justify-content: center;
    order: -1;
  }
  .hcard-stage { max-width: 360px; }
  .hero-title { font-size: clamp(40px, 10vw, 68px); }
  .hero-principals { flex-direction: column; gap: 1px; max-width: 100%; }
}
.stat-item { text-align: center; }
.stat-val {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--n000);
  letter-spacing: -0.01em;
}
.stat-lbl {
  display: block;
  font-size: 11.5px;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.stat-div {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.1);
}

/* ── PLATFORM PILLAR GRID ────────────────────────────────────── */
.platform-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.platform-pillar {
  background: var(--n050);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.platform-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--brand);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.platform-pillar-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.platform-pillar-headline {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--n950);
  line-height: 1.3;
  margin-bottom: 14px;
}
.platform-pillar-body {
  font-size: 13.5px;
  color: var(--n500);
  line-height: 1.7;
  flex: 1;
  margin: 0 0 24px 0;
}
.platform-pillar-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--n400);
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: auto;
}
.platform-pillar-proof-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.4;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .platform-pillar-grid { grid-template-columns: 1fr; }
}

/* ── MARKETING SECTIONS ──────────────────────────────────────── */
.marketing-section {
  padding: var(--space-16) var(--space-6);
}
.marketing-section.light { background: var(--n000); }
.marketing-section.alt   { background: var(--n050); }
.marketing-section.dark  { background: var(--n950); }
.container { max-width: 1200px; margin: 0 auto; }
.eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: var(--space-3);
}
.eyebrow.light { color: rgba(255,255,255,0.6); }
.headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--n950);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.headline.light { color: var(--n000); }
.headline em { font-style: italic; color: var(--brand); }
.headline.light em { color: rgba(255,255,255,0.85); }

/* Role cards */
.role-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.role-card {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
  transition: box-shadow 150ms, border-color 150ms;
}
.role-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-border); }
.role-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-card);
  background: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: var(--space-4);
}
.role-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--n950);
  margin-bottom: var(--space-2);
}
.role-desc {
  font-size: 13.5px;
  color: var(--n500);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.role-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.role-features li {
  font-size: 12.5px;
  color: var(--n500);
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-features li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

/* Jurisdiction grid */
.jcard-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.jcard {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  text-align: center;
  transition: box-shadow 150ms;
}
.jcard:hover { box-shadow: var(--shadow-sm); }
.jcard.soon { opacity: 0.6; }
.jcard-flag { font-size: 32px; margin-bottom: var(--space-3); }
.jcard-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--n950);
  margin-bottom: var(--space-2);
}
.jcard-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.jcard-status.live { color: var(--signal-strong); }
.jcard-status.soon { color: var(--n400); }

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}
.price-card {
  background: var(--n000);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  overflow: hidden;
  transition: box-shadow 150ms;
}
.price-card:hover { box-shadow: var(--shadow-md); }
.price-card.featured { border-color: var(--brand); box-shadow: var(--shadow-lg); }
.price-card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.price-card.featured .price-card-header { background: var(--brand); }
.price-role { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--n500); margin-bottom: 4px; }
.price-card.featured .price-role { color: rgba(255,255,255,0.65); }
.price-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--n950); margin-bottom: var(--space-4); }
.price-card.featured .price-name { color: #fff; }
.price-amount { font-family: var(--font-display); font-size: 36px; font-weight: 800; color: var(--n950); letter-spacing: -0.02em; line-height: 1; }
.price-card.featured .price-amount { color: #fff; }
.price-period { font-size: 13px; color: var(--n500); }
.price-card.featured .price-period { color: rgba(255,255,255,0.5); }
.price-card-body { padding: var(--space-5) var(--space-6); }
.price-features { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.price-features li { font-size: 13px; color: var(--n500); display: flex; align-items: center; gap: 8px; }
.price-features li::before { content: '✓'; color: var(--signal-strong); font-weight: 700; }
.price-card.featured .price-features li { color: rgba(255,255,255,0.7); }
.price-card.featured .price-features li::before { color: rgba(255,255,255,0.7); }

/* Pricing tab toggle */
#price-toggle button:focus { outline: none; }
#price-toggle button:hover:not([style*="background:var(--brand)"]) {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.75) !important;
}

/* Pricing footer grid responsive */
@media (max-width: 600px) {
  #pricing-section .pricing-footer-grid { grid-template-columns: 1fr !important; }
}

/* ── ADMIN SECTION ───────────────────────────────────────────── */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes floatOrb {
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(30px,-20px)}
}
@keyframes seraBounce {
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-8px)}
}
@keyframes slideInToast {
  from{transform:translateX(40px);opacity:0}
  to{transform:translateX(0);opacity:1}
}
@keyframes fadeOutToast {
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(20px)}
}
@keyframes pulseDot {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(1.5)}
}
@keyframes marqueeAnim {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.spin { animation: spin 0.8s linear infinite; }
.fade-in { animation: fadeIn 0.25s ease both; }

/* ── MISC HELPERS ────────────────────────────────────────────── */
.text-brand   { color: var(--brand); }
.text-muted   { color: var(--n500); }
.text-strong  { color: var(--signal-strong); }
.text-warn    { color: var(--signal-moderate); }
.text-danger  { color: var(--signal-weak); }
.fw-700       { font-weight: 700; }
.fw-600       { font-weight: 600; }
.font-mono    { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.text-center  { text-align: center; }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.flex  { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
.w-full { width: 100%; }
.overflow-hidden { overflow: hidden; }
.rounded { border-radius: var(--radius-card); }
.border { border: 1px solid var(--border); }

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-5) 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--n400); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .left-nav { transform: translateX(-100%); transition: transform 200ms ease; }
  .left-nav.mobile-open { transform: translateX(0); }
  .main-column { margin-left: 0; }
  .kpi-group-4, .kpi-group-3 { grid-template-columns: repeat(2,1fr); }
  .role-grid, .jcard-grid, .pricing-grid { grid-template-columns: 1fr; }
  .deal-room-layout { grid-template-columns: 1fr; }
  .doc-vault-grid { grid-template-columns: 1fr; }
  .rev-gate-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   WALLETCONNECT MODAL  (returning user — QR + extension flow)
   ═══════════════════════════════════════════════════════════════ */

/* Outer box */
.wc-modal-box {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
  position: relative;
  font-family: var(--font-body);
}

/* Header */
.wc-modal-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid #F1F5F9;
  position: relative;
}
.wc-modal-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #EFF6FF;
  margin-bottom: 14px;
}
.wc-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
}
.wc-modal-subtitle {
  font-size: 13px;
  color: #64748B;
  line-height: 1.5;
}
.wc-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: #F1F5F9;
  color: #64748B;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.wc-modal-close:hover { background: #E2E8F0; color: #0F172A; }

/* Body */
.wc-modal-body {
  padding: 24px 28px;
}

/* QR Panel */
.wc-qr-panel,
#wc-qr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.wc-qr-wrap {
  width: 200px; height: 200px;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #FAFAFA;
  overflow: hidden;
}
.wc-qr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #94A3B8;
  font-size: 12px;
}
.wc-qr-hint {
  font-size: 12.5px;
  color: #64748B;
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.wc-qr-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94A3B8;
}
.wc-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94A3B8;
  animation: wcPulse 2s ease-in-out infinite;
}
.wc-status-dot--active { background: #22C55E; }
@keyframes wcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Divider */
.wc-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: #CBD5E1;
  font-size: 12px;
}
.wc-divider::before,
.wc-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E2E8F0;
}
.wc-divider span { color: #94A3B8; font-weight: 500; }

/* Option buttons */
.wc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  width: 100%;
  text-align: left;
}
.wc-option-btn:hover {
  border-color: #3B99FC;
  background: #EFF6FF;
}
/* Primary / recommended option — slightly elevated */
.wc-option-btn--primary {
  border-color: rgba(249,115,22,.35);
  background: rgba(249,115,22,.04);
}
.wc-option-btn--primary:hover {
  border-color: #F97316;
  background: rgba(249,115,22,.09);
}
.wc-option-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wc-option-text { flex: 1; }
.wc-option-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
  margin-bottom: 2px;
}
.wc-option-desc {
  font-size: 11.5px;
  color: #64748B;
}

/* VC note */
.wc-vc-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 14px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  font-size: 12px;
  color: #166534;
  line-height: 1.5;
}

/* Manual panel */
.wc-manual-panel { padding-top: 4px; }
.wc-back-btn {
  background: none;
  border: none;
  color: #64748B;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: color .15s;
}
.wc-back-btn:hover { color: #0F172A; }

/* Hero Connect Wallet secondary button */
.hero-wc-btn {
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.85) !important;
}
.hero-wc-btn:hover {
  border-color: rgba(255,255,255,0.5) !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ── WalletConnect Phase Bar ─────────────────────────────────── */
.wc-phase-bar {
  display: flex;
  align-items: center;
  padding: 16px 24px 0;
  gap: 0;
}
.wc-phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.wc-phase-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #E2E8F0;
  background: #F8FAFC;
  color: #94A3B8;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.wc-phase-label {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 500;
  white-space: nowrap;
  transition: color .25s;
}
.wc-phase-step.active .wc-phase-num {
  border-color: #3B99FC;
  background: #EFF6FF;
  color: #3B99FC;
}
.wc-phase-step.active .wc-phase-label { color: #3B99FC; font-weight: 600; }
.wc-phase-step.done .wc-phase-num {
  border-color: #22C55E;
  background: #F0FDF4;
  color: #22C55E;
}
.wc-phase-step.done .wc-phase-label { color: #22C55E; }
.wc-phase-line {
  flex: 1;
  height: 2px;
  background: #E2E8F0;
  margin: 0 6px;
  margin-bottom: 16px;
  transition: background .25s;
}
.wc-phase-line.done { background: #22C55E; }

/* ── Phase 2: VC Presentation Request Card ───────────────────── */
.wc-vc-request-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.wc-vc-request-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
  color: #3B99FC;
}
.wc-vc-request-title {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}
.wc-vc-request-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 16px;
}
.wc-vc-request-detail {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.wc-vc-req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #334155;
}
.wc-vc-awaiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: #64748B;
}
.wc-status-dot--pulse {
  background: #3B99FC;
  animation: wcPulse 1.4s ease-in-out infinite;
}

/* Sandbox simulation panel */
.wc-sandbox-sim {
  background: rgba(162,245,92,.06);
  border: 1px solid rgba(162,245,92,.2);
  border-radius: 8px;
  padding: 12px 14px;
}
.wc-sandbox-label {
  font-size: 10.5px;
  color: #6B6D8A;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wc-sim-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 7px;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .15s;
}
.wc-sim-btn:hover { opacity: .85; }
.wc-sim-approve { background: #22C55E; color: #fff; }
.wc-sim-deny    { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }

/* ── Phase 3: Verification steps ────────────────────────────── */
.wc-verifying-panel {
  padding: 8px 0;
}
.wc-verifying-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wc-vstep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #334155;
  font-weight: 500;
}
.wc-vstep--pending { color: #94A3B8; }
.wc-vstep--done    { color: #22C55E; }
.wc-vs-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.wc-vs-icon--done { color: #22C55E; }