@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;

  /* ---------- Surfaces — 5 stops ---------- */
  --bg-0: #080c12;
  /* page background */
  --bg-1: #0d1925;
  /* drawer / inputs / panels */
  --bg-2: #171a26;
  /* surface */
  --bg-3: #1e2130;
  /* elevated surface */
  --bg-hover: #2a304a;
  /* row / item hover */

  /* ---------- Borders — 3 stops ---------- */
  --border: #1a2535;
  /* default chip / section / subtle divider */
  --border-strong: #2a2d3e;
  /* prominent border */
  --border-input: #1a3050;
  /* input frames */

  /* ---------- Text — 5 stops ---------- */
  --text: #eef2f7;
  /* primary; also stands in for "near-white surface" */
  --text-soft: #e2e4f0;
  /* secondary */
  --text-muted: #8a8fa8;
  --text-disabled: #3a3f55;
  --text-address: #c3cfdf;
  /* monospace addresses / percents */

  /* ---------- Brand & accent ---------- */
  --primary: #4285f4;
  --primary-soft: #7ab4e0;
  /* text on tinted-blue bg */
  --accent: #00d4ff;

  /* ---------- Status ---------- */
  --success: #4caf50;
  --success-soft: #6cd99a;
  --warning: #f0b43c;
  --danger: #dc5050;
  --danger-soft: #ff8585;

  /* ---------- Scrollbar — use filter:brightness(1.4) on :hover ---------- */
  --scrollbar-thumb: #1e2d40;

  /* ---------- Neutral overlays ---------- */
  --overlay-black: rgba(0, 0, 0, 0.50);
  --overlay-black-soft: rgba(0, 0, 0, 0.22);
  --overlay-white-soft: rgba(255, 255, 255, 0.06);
  --overlay-white-strong: rgba(255, 255, 255, 0.35);
  --text-overlay-soft: rgba(226, 230, 240, 0.40);
  --text-overlay-strong: rgba(226, 230, 240, 0.65);

  /* ---------- Status tints — soft + strong ---------- */
  --primary-tint-soft: rgba(66, 133, 244, 0.10);
  --primary-tint-strong: rgba(66, 133, 244, 0.40);
  --accent-tint-soft: rgba(0, 212, 255, 0.08);
  --accent-tint-strong: rgba(0, 212, 255, 0.30);
  --success-tint-soft: rgba(76, 175, 80, 0.10);
  --success-tint-strong: rgba(76, 175, 80, 0.30);
  --danger-tint-soft: rgba(220, 80, 80, 0.10);
  --danger-tint-strong: rgba(220, 80, 80, 0.30);
  --warning-tint: rgba(240, 180, 60, 0.15);

  /* ---------- Misc ---------- */
  --copy-toast-bg: rgba(12, 20, 32, 0.95);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.4);
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--bg-0);
  color: var(--text);
}

body {
  display: flex;
  align-items: stretch;
}

.login-screen {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px 0;
  box-sizing: border-box;
  background: var(--bg-0);
}

.login-card {
  width: min(420px, 90vw);
  background: var(--bg-1);
  border: 1px solid var(--border-input);
  border-radius: 16px;
  padding: 32px 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  box-shadow: 0 0 0 1px var(--accent-tint-soft), 0 40px 80px var(--overlay-black);
}

.login-brand .brand-logo {
  height: 48px;
  width: auto;
}

.login-card h2 {
  margin: 0;
  font-size: 20px;
}

.login-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

/* Inside the form the 10px flex gap already spaces children evenly, so the
   banner's own bottom margin would double the gap above the next element. */
.login-form .message-banner {
  margin-bottom: 0;
}

.login-submit {
  margin-top: 8px;
  width: 100%;
}

.auth-switch {
  margin-top: 4px;
  align-self: center;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}

.auth-switch:hover {
  text-decoration: underline;
}

/* ── Auth split layout (sign-in / sign-up entry screens) ──────────────────
   Marketing panel on the left, form on the right. Stacks on narrow viewports
   so the same card works on mobile. */
.auth-split {
  width: min(960px, 92vw);
  background: var(--bg-1);
  border: 1px solid var(--border-input);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--accent-tint-soft), 0 40px 80px var(--overlay-black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.auth-marketing {
  /* Less right padding so the headline/bullets can extend closer to the
     vertical divider — keeps the marketing block from looking shrunken
     against the white space on its right. */
  padding: 32px 16px 32px 36px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.auth-form-col {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  /* Center the form vertically inside the half-card so it sits aligned with
     the marketing headline rather than hugging the top edge. */
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.auth-form-col h2 {
  margin: 0;
  font-size: 18px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-brand .brand-logo {
  height: 56px;
  width: auto;
  /* The SVG ships with ~16 units of empty space inside its viewBox before the
     glyph starts (viewBox="0 0 173 52.5", circle begins at x≈16). That maps
     to ~17px of phantom left padding at this rendered height, which makes
     the icon look indented relative to the WAAS text below. Pull it back so
     the visible mark aligns with the marketing panel's left edge. */
  margin-left: -17px;
}

.auth-eyebrow {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.auth-headline {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
}

.auth-headline-accent {
  color: var(--primary);
  display: block;
}

.auth-features {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-soft);
  font-size: 13px;
}

.auth-features li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-features li i {
  color: var(--success);
  font-size: 18px;
  flex-shrink: 0;
}

.auth-tagline {
  margin-top: auto;
  color: var(--text-muted);
  font-size: 12px;
}

/* Two side-by-side fields on the signup form (Client name + Approver name). */
.form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Footer "No account? Create one" / "Already have an account? Sign in" line.
   Inline link styling — keeps the row compact under the primary CTA. */
.auth-switch-line {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.auth-switch-line .auth-switch {
  display: inline;
  margin: 0;
  padding: 0;
}

/* OAuth provider buttons rendered above the email/password form. The light
   variant matches the white-ish Google brand button from the design mockup;
   the disabled variant is used for the SSO placeholder. */
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Chained selectors (.pill-btn.oauth-btn) so these rules out-rank the generic
   .pill-btn rule defined later in the file. Equal-specificity rules let
   source order win — chaining bumps specificity to 0.2.0 and removes that
   ordering trap. */
.pill-btn.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  width: 100%;
  padding: 10px 14px;
  /* Match the primary "Sign in" button's corner radius (set on .pill-btn).
     Override the 999px pill so it reads as the same button family. */
  border-radius: 8px;
  font-size: 14px;
  transition: background 120ms, border-color 120ms;
}

.pill-btn.oauth-btn:hover {
  background: var(--bg-3);
  border-color: var(--accent-tint-strong);
}

.pill-btn.oauth-btn i {
  font-size: 18px;
  color: var(--text-soft);
}

/* Light "Continue with Google" pill — near-white background per Google's
   brand button guidance (the multi-color "G" logo needs a very light
   surface). Uses the existing `--text` near-white from the palette rather
   than pure #ffffff; the difference is imperceptible at button size and we
   avoid a one-off palette entry. The Google G itself renders in its own
   brand colors via inline SVG fills, so it doesn't pick up the button's
   text color. */
.pill-btn.oauth-btn-light {
  background: var(--text);
  color: var(--bg-0);
  border-color: var(--text);
  font-weight: 500;
}

.pill-btn.oauth-btn-light:hover {
  background: var(--text-soft);
  border-color: var(--text-soft);
}

.pill-btn.oauth-btn-light i {
  color: var(--bg-0);
}

.oauth-icon-img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Disabled SSO placeholder — half-opacity, no hover treatment, no pointer. */
.pill-btn.oauth-btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pill-btn.oauth-btn-disabled:hover {
  background: var(--bg-2);
  border-color: var(--border);
}

/* "OR WITH EMAIL" separator between OAuth/SSO buttons and the email form.
   Uses the soft border-color variable for the line and the muted text color
   for the label — no new colors introduced. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 1.4px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

@media (max-width: 720px) {
  .auth-split {
    grid-template-columns: 1fr;
  }

  .auth-marketing {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 60px 1fr;
  width: 100%;
  height: 100vh;
  background: var(--bg-0);
  border: 1px solid var(--bg-0);
  position: relative;
  overflow: hidden;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  padding: 0 28px 0 14px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border);
  position: relative;
  box-shadow: 0 1px 0 var(--accent-tint-soft);
}

.topbar .top-actions {
  margin-left: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  padding: 8px;
  margin-right: 8px;
  cursor: pointer;
  border-radius: 6px;
}

.nav-toggle:hover {
  background: var(--overlay-white-soft);
}

/* Desktop: hamburger toggles sidebar visibility */
@media (min-width: 961px) {
  .app.nav-collapsed {
    grid-template-columns: 1fr;
  }

  .app.nav-collapsed .sidebar {
    display: none;
  }
}

.nav-overlay {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  height: 44px;
  width: auto;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ============================================================
   BUTTON TIER SYSTEM (matches live-preview hierarchy)
   ------------------------------------------------------------
   .pill-btn.primary  →  Send / Receive only. Solid blue.
   .pill-btn.tonal    →  + Add Policy, + Add Window, Send Invite,
                          Create Wallet, Search, etc. Tinted blue.
   .pill-btn.secondary → neutral fill (legacy; kept for compat)
   .pill-btn.ghost    →  View / Cancel — outlined neutral.
   .pill-btn.danger   →  Yes, Replace API Key — solid red.
   ============================================================ */

.pill-btn {
  padding: 8px 24px;
  border-radius: 8px;
  background: var(--overlay-white-soft);
  border: 1px solid var(--border);
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.03em;
  font-size: 14px;
  color: var(--text);
  transition: background 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pill-btn:hover:not(:disabled) {
  border-color: var(--overlay-white-strong);
}

/* TIER 1 — Send / Receive only. Solid blue, no shadow. */
.pill-btn.primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--text);
}

.pill-btn.primary:hover:not(:disabled) {
  background: var(--primary);
  filter: brightness(1.08);
  border-color: transparent;
}

/* Composite primary — icon block + label block inside one pill. */
.pill-btn.primary.composite {
  padding: 0;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
}

.pill-btn.primary.composite .pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--overlay-black-soft);
  font-size: 16px;
  color: var(--text);
}

.pill-btn.primary.composite .pill-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
}

/* TIER 2 — Mid-tier primary actions. Tinted blue. */
.pill-btn.tonal {
  background: var(--primary-tint-soft);
  border: 1px solid var(--primary-tint-strong);
  color: var(--primary-soft);
}

.pill-btn.tonal:hover:not(:disabled) {
  background: var(--primary-tint-strong);
  border-color: var(--primary);
  color: var(--text);
}

.pill-btn.secondary {
  background: var(--overlay-white-soft);
  border: 1px solid var(--border);
}

.pill-btn.secondary:hover:not(:disabled) {
  border-color: var(--overlay-white-strong);
  color: var(--text);
}

.pill-btn.ghost {
  padding: 6px 18px;
  background: transparent;
  border: 1px solid var(--border);
}

.pill-btn.ghost:hover:not(:disabled) {
  border-color: var(--overlay-white-strong);
}

.pill-btn:disabled,
.pill-btn[disabled] {
  background: var(--bg-1);
  border-color: var(--border);
  color: var(--text-disabled);
  cursor: not-allowed;
  opacity: 0.45;
}

.receive-generate:disabled,
.receive-generate[disabled] {
  background: var(--bg-1);
  border-color: var(--border-input);
  color: var(--primary-soft);
  opacity: 1;
  cursor: default;
}

.sidebar {
  padding: 14px 0;
  border-right: 1px solid var(--border);
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.sidebar-bottom {
  padding: 12px 14px;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--overlay-white-soft);
  border: 1px solid var(--overlay-white-soft);
}

.sidebar-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email,
.sidebar-user-client {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-signout-icon {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}

.sidebar-signout-icon:hover {
  color: var(--text);
  background: var(--overlay-white-soft);
}

.nav-section-label {
  padding: 16px 22px 6px;
  list-style: none;
}

.nav-section-label span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-overlay-soft);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 0;
  width: 100%;
  color: var(--text-overlay-strong);
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
  border-left: 2px solid transparent;
}

.nav-item:hover:not(.disabled) {
  color: var(--text);
  background: var(--overlay-white-soft);
}

.nav-item .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--overlay-white-soft);
  color: var(--text-overlay-soft);
  flex-shrink: 0;
  font-size: 20px;
}

.nav-item .icon svg {
  display: block;
}

.nav-item.active {
  background: var(--primary-tint-soft);
  color: var(--text);
  border-left-color: var(--primary);
}

.nav-item.active .icon {
  border-color: var(--primary-tint-strong);
  color: var(--primary);
}

.nav-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

/* Panel deck: panels stay mounted across navigation. The deck and
   inactive slots are layout-transparent (`display: contents`) so the
   active panel's root participates directly in the `.content` flex
   column; inactive slots are hidden via `display: none`. */
.panel-deck {
  display: contents;
}

.panel-slot {
  display: none;
}

.panel-slot.active {
  display: contents;
}

.drawer-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  display: none;
}

.drawer-overlay.active {
  display: block;
  background: var(--overlay-black);
  backdrop-filter: blur(2px);
}

.drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(480px, 96vw);
  height: 100%;
  background: var(--bg-1);
  border-left: 1px solid var(--accent-tint-soft);
  transform: translateX(110%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  z-index: 5;
  box-shadow: -12px 0 40px var(--overlay-black);
}

.drawer.drawer-open {
  transform: translateX(0);
}

.drawer-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.drawer-header h2 {
  margin: 0;
  font-size: 20px;
}

.drawer-title {
  display: flex;
  align-items: center;
  gap: 0;
}

.back-btn {
  width: 0;
  height: 34px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  transition: width 0.2s ease, opacity 0.2s ease, margin-right 0.2s ease;
  margin-right: 0;
}

.back-btn.visible {
  opacity: 1;
  pointer-events: auto;
  width: 34px;
  margin-right: 10px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--bg-1);
  display: grid;
  place-items: center;
  border: 1px solid var(--border-input);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.icon-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-tint-strong);
}

.drawer-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.drawer-section {
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-input);
  background: var(--bg-1);
}

.send-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-row {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Push optional right-side content + chevron to the right edge. */
.select-row .tx-asset {
  margin-right: auto;
}

.send-amount {
  margin-left: auto;
  text-align: right;
  font-weight: 600;
}

.fee-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.fee-tier-selector {
  display: flex;
  gap: 8px;
}

.fee-tier-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  text-align: center;
}

.fee-tier-btn.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--primary-tint-soft);
}

.fee-tier-btn:hover:not(.active) {
  border-color: var(--border-input);
  color: var(--text);
}

.send-chevron {
  color: var(--text-muted);
  font-size: 18px;
}

.receive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 13px;
}

.receive-address {
  margin-top: 8px;
  color: var(--text);
  font-family: monospace;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-message {
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.inline-message.visible {
  opacity: 1;
  color: var(--accent);
}

.copy-btn {
  width: 32px;
  height: 32px;
  position: relative;
}

.copy-toast {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--copy-toast-bg);
  border: 1px solid var(--border-input);
  color: var(--accent);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.copy-toast.visible {
  opacity: 1;
}

.qr-box {
  width: min(260px, 80vw);
  aspect-ratio: 1 / 1;
  margin: 8px auto 0;
  background: var(--text);
  border-radius: 8px;
  border: 4px solid var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.qr-box.qr-empty {
  background: var(--bg-1);
  border-color: var(--border-input);
}

.qr-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.receive-generate {
  margin-top: 8px;
  width: 100%;
}

.asset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.asset-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--bg-1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.asset-option:hover {
  background: var(--bg-1);
  border-color: var(--accent-tint-strong);
}

.asset-option.active {
  background: var(--accent-tint-soft);
  border-color: var(--accent-tint-strong);
}

.amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amount-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
}

.amount-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

.amount-symbol {
  font-size: clamp(22px, 6.5vw, 28px);
  font-weight: 700;
  color: var(--text);
}

.amount-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: clamp(22px, 6.5vw, 28px);
  font-weight: 700;
  letter-spacing: 1px;
  outline: none;
  width: 100%;
  min-width: 0;
}

.amount-input::placeholder {
  color: var(--text-disabled);
}

.currency {
  font-size: clamp(22px, 6.5vw, 28px);
  letter-spacing: 1px;
}

.amount-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.text-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-input);
  background: var(--bg-1);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.text-input:focus {
  border-color: var(--accent-tint-strong);
  box-shadow: 0 0 0 3px var(--accent-tint-soft);
}

.send-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  width: 100%;
}

.send-submit .arrow {
  font-size: 20px;
}

.hidden {
  display: none;
}

.preview-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.preview-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.preview-arrow {
  font-size: 24px;
  color: var(--text);
}

.preview-address {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
}

.pill-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-tint-soft);
  border: 1px solid var(--accent-tint-strong);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

.preview-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.preview-actions .pill-btn {
  width: 100%;
  padding: 10px 20px;
}

.confirm-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.send-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0;
}

.send-progress-label {
  font-weight: 500;
}

.send-step-spinner {
  animation: spin 0.9s linear infinite;
  transform-origin: center center;
}

.send-approval-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--success-soft);
  line-height: 1.4;
  padding: 4px 0;
}

.confirm-done {
  width: 100%;
  padding: 10px 20px;
}

.confirm-done:disabled {
  background: var(--border-strong);
  border-color: var(--border-strong);
  color: var(--text-muted);
  cursor: not-allowed;
}

.balance-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  background: var(--bg-1);
  border: 1px solid var(--border-input);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--accent-tint-soft) inset, 0 12px 40px var(--overlay-black);
}

.balance-title {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--text-muted);
}

.balance-amount {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  margin-top: 6px;
  color: var(--text);
}

.balance-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.asset-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.coin-badge {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--bg-1);
  border: 1px solid var(--border-input);
  font-weight: 700;
  color: var(--accent);
  font-size: 16px;
}

.asset-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.amount-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.percentage {
  color: var(--text-address);
}

.price {
  font-weight: 600;
}

.tx-type {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.tx-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg-1);
  border: 1px solid var(--border-input);
  display: grid;
  place-items: center;
}

.tx-asset {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.tx-address {
  color: var(--text-address);
  font-size: 13px;
}

.tx-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  opacity: 0.85;
}

.tx-link:hover {
  text-decoration: underline;
}

.unused-auth-marker-deleted {
  background: var(--bg-1);
  border-color: var(--border-input);
  color: var(--primary-soft);
  opacity: 1;
  cursor: default;
  animation: auth-pulse 1.4s ease-in-out infinite;
}

@keyframes auth-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

.auth-hint {
  font-size: 13px;
  color: var(--primary-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: auth-pulse 1.4s ease-in-out infinite;
}


.refresh-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, color 0.2s;
}

.refresh-btn i {
  display: block;
  line-height: 1;
}

.refresh-btn.spinning {
  color: var(--accent);
  opacity: 0.7;
  cursor: default;
}

.refresh-btn.spinning i {
  animation: spin 0.7s linear infinite;
  transform-origin: center center;
}

.refresh-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--success);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.refresh-ok.visible {
  opacity: 1;
  transform: translateY(0);
}

.refresh-ok i {
  font-size: 15px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 960px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    min-height: unset;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 30;
    border-right: 1px solid var(--border);
    border-bottom: none;
    background: var(--bg-0);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .nav-overlay.active {
    display: block;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-black);
    z-index: 25;
  }

  .content {
    padding: 24px;
  }

  .drawer {
    width: 100%;
  }
}

@media (max-width: 640px) {

  /* ── Topbar: hamburger left, logo right on row 1; actions on row 2 ── */
  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 12px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .topbar .brand {
    margin-left: auto;
  }

  /* When the topbar wraps onto two rows it no longer fits in the 60px row;
     let the app grid use auto-height for the topbar row and the sidebar
     anchor itself below whatever the topbar measures. */
  .app {
    grid-template-rows: auto 1fr;
  }

  /* ── Sidebar: bottom-sheet, exactly like the drawer ────────── */
  .sidebar {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 40;
    border-right: none;
    border-top: 1px solid var(--accent-tint-soft);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px var(--overlay-black);
    background: var(--bg-1);
    padding-top: 22px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }

  .sidebar.open {
    transform: translateY(0);
  }

  /* Drawer-style grab handle at the top edge of the sheet. */
  .sidebar::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  /* Overlay: full-viewport blurry backdrop, matching .drawer-overlay. */
  .nav-overlay.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-black);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 35;
  }

  .top-actions {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-left: 0;
  }

  /* Wallet selector slides to the right edge; Send/Receive stay on the left. */
  .top-actions .wallet-selector {
    margin-left: auto;
  }

  .status-bar {
    width: 100%;
    justify-content: space-between;
  }

  /* Wallet selector toggle truncates more aggressively on phones. */
  .wallet-selector-current {
    max-width: 100px;
  }

  /* ── Touch-friendly hit targets ────────────────────────────── */
  .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .nav-item {
    padding: 14px 18px;
    min-height: 48px;
  }

  .sidebar-signout-icon {
    width: 36px;
    height: 36px;
  }

  /* Send/Receive composite buttons: hide the label on phones, keep the icon. */
  .top-actions .pill-btn.primary.composite .pill-label {
    display: none;
  }

  .top-actions .pill-btn.primary.composite .pill-icon {
    padding: 10px 14px;
    font-size: 18px;
  }

  /* ── Content / panel padding shrinks ───────────────────────── */
  .content {
    padding: 16px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    gap: 16px;
  }

  /* ── Drawer → bottom-sheet on phones ───────────────────────── */
  .drawer {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 90vh;
    transform: translateY(110%);
    border-left: none;
    border-top: 1px solid var(--accent-tint-soft);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px var(--overlay-black);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .drawer.drawer-open {
    transform: translateY(0);
  }

  /* Grab-handle visual on the drawer header. */
  .drawer-header {
    position: relative;
    padding-top: 22px;
  }

  .drawer-header::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .drawer-body {
    padding: 16px;
    gap: 12px;
  }

  /* ── Card-style tables (every .data-table on phones) ───────── */
  .data-table-wrap {
    border: none;
    background: transparent;
    overflow: visible;
    border-radius: 0;
  }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody tr {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 4px 0;
  }

  .data-table tbody tr:hover {
    background: var(--bg-0);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    min-height: 40px;
  }

  .data-table tbody tr td:last-child {
    border-bottom: none;
  }

  .data-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    flex: 0 0 auto;
    text-align: left;
  }

  /* Cells with no label or rich content take the full row width. */
  .data-table td:not([data-label])::before,
  .data-table td[data-label=""]::before,
  .data-table td[data-card-full]::before {
    content: none;
  }

  .data-table td[data-card-full],
  .data-table td.actions-cell {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: right;
  }

  .data-table td[data-card-full] {
    justify-content: flex-start;
    text-align: left;
  }

  .data-table td.data-table-empty {
    display: block;
    text-align: center !important;
    padding: 24px 16px !important;
  }

  .data-table td.data-table-empty::before {
    content: none;
  }

  /* Expand-row content takes full width and drops the label gutter. */
  .data-table tbody tr.expand-row {
    background: var(--bg-3);
    padding: 0;
  }

  .expand-row td {
    display: block;
    text-align: left !important;
    border-bottom: none !important;
  }

  .expand-row td::before {
    content: none;
  }

  .expand-row-body {
    padding: 14px 16px;
    gap: 12px;
  }

  /* ── Forms: fields stack vertically on phones ──────────────── */
  .add-form {
    padding: 16px;
  }

  .add-form-row>.add-form-field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .add-form-row {
    gap: 10px;
  }

  /* Tx-window/policy expand forms drop their fixed-width side panels. */
  .tx-window-expand-form .add-form-body,
  .policy-expand-form .add-form-body {
    flex-direction: column;
    align-items: stretch;
  }

  .tx-window-timezone-field,
  .tx-window-time-field,
  .tx-window-days-field {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Window day buttons may wrap onto two rows on very narrow phones. */
  .window-days-cell {
    flex-wrap: wrap;
  }

  /* Logs filter inputs stack one per row. */
  .logs-filter-row>.form-input,
  .logs-filter-row>.logs-filter-datetime,
  .logs-filter-row>.logs-filter-multiselect {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Client panel API key row wraps; the long monospace string isn't forced
     to overflow the viewport. */
  .client-panel-apikey {
    min-width: 0;
    width: 100%;
  }

  .client-panel-apikey-row {
    flex-wrap: wrap;
  }

  /* Panel-header actions wrap rather than overflow. */
  .panel-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .panel-header-actions {
    flex-wrap: wrap;
  }

  /* Login card padding tightens on small phones. */
  .login-card {
    padding: 24px 22px 28px;
  }
}

/* ── Phone-specific shrinks (≤520px) ───────────────────────────── */
@media (max-width: 520px) {
  .content {
    padding: 12px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    gap: 12px;
  }

  .topbar {
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .panel-title,
  .drawer-header h2 {
    font-size: 16px;
  }

  .add-form {
    padding: 14px;
  }

  /* Tighten table cell padding on the very narrowest screens. */
  .data-table td {
    padding: 8px 12px;
    gap: 8px;
  }

  /* Day buttons inside policy/tx-window forms get a bigger tap area. */
  .day-btn-sm {
    padding: 8px 4px;
    min-height: 32px;
  }

  /* Login card stays inside the viewport with comfortable gutters. */
  .login-card {
    padding: 22px 18px 24px;
  }

  /* Reduce wallet-selector toggle truncation further on tiny phones. */
  .wallet-selector-current {
    max-width: 80px;
  }
}

/* ── Approvers Panel ─────────────────────────────────────────────────────── */
.approvers-panel {
  width: 100%;
  box-sizing: border-box;
}

.logs-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.logs-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.logs-filter-row>.form-input,
.logs-filter-row>.logs-filter-datetime,
.logs-filter-row>.logs-filter-multiselect {
  flex: 1 1 200px;
  min-width: 160px;
}

.logs-filter-datetime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logs-filter-datetime-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.logs-filter-datetime .form-input {
  width: 100%;
  color-scheme: dark;
}

.logs-filter-multiselect {
  position: relative;
}

.logs-filter-multiselect-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.logs-filter-multiselect-caret {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.logs-filter-multiselect-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
}

.logs-filter-multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 31;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-3);
  border: 1px solid var(--text-disabled);
  border-radius: 8px;
  box-shadow: 0 10px 30px var(--overlay-black);
  padding: 6px 0;
}

.logs-filter-multiselect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 13px;
  user-select: none;
}

.logs-filter-multiselect-item:hover {
  background: var(--bg-hover);
}

.logs-filter-multiselect-item input[type="checkbox"] {
  accent-color: var(--accent);
}

.logs-load-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.panel-divider {
  border: none;
  border-top: 1px solid var(--text-disabled);
  margin: 24px 0;
}

.client-panel-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.client-panel-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-panel-input {
  width: 100%;
  font-family: monospace;
  font-size: 13px;
}

.client-panel-input:disabled {
  background: var(--bg-3);
  color: var(--text);
  opacity: 1;
  cursor: default;
}

.client-panel-apikey-input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

.client-panel-submit {
  align-self: flex-start;
  margin-top: 4px;
}

.client-panel-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.client-panel-readonly {
  font-family: monospace;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--text-disabled);
  color: var(--text);
  word-break: break-all;
}

.client-panel-apikey-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.client-panel-apikey {
  font-family: monospace;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--text-disabled);
  color: var(--text);
  flex: 1 1 auto;
  min-width: 220px;
  word-break: break-all;
}

.client-panel-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}


.window-days-cell {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.window-days-cell .day-btn-sm {
  flex: 1;
  text-align: center;
}

.day-btn-sm {
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.day-btn-sm:hover {
  border-color: var(--accent);
  color: var(--text);
}

.day-btn-sm.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text);
}

.tx-window-expand-row>td {
  padding: 0 !important;
  border-bottom: none;
}

.tx-window-expand-cell {
  padding: 0 !important;
}

.tx-window-expand-form,
.policy-expand-form {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
  padding: 16px 20px;
  text-align: left;
  margin-bottom: 0;
  border-radius: 0;
}

.tx-window-expand-form .approvers-invite-fields {
  align-items: flex-start;
}

.tx-window-expand-form .approvers-invite-field label {
  text-align: left;
}

.tx-window-expand-form .add-form-body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.tx-window-timezone-field {
  flex: 0 0 110px;
  min-width: 110px;
  max-width: 110px;
}

.tx-window-expand-form .day-btn-sm {
  padding-top: 8px;
  padding-bottom: 8px;
}

.tx-window-days-field {
  flex: 3;
  min-width: 240px;
}

.tx-window-time-field {
  flex: 0 0 110px;
  min-width: 110px;
}

.tx-window-remove-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tx-window-remove-confirm .approver-confirm-yes {
  margin-right: 0;
}

.section-gap {
  margin-top: 32px;
}

.policy-addresses-field {
  flex: 0 0 100%;
  min-width: 0;
}

.approver-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Status classes still used by request_detail.rs inline approver-status. */
.status-approving {
  background: var(--primary-tint-soft);
  color: var(--primary);
}

.status-approved {
  background: var(--success-tint-soft);
  color: var(--success);
}

.status-rejected {
  background: var(--danger-tint-soft);
  color: var(--danger);
}

/* ── Request detail expand row ──────────────────────────────────── */
.request-id-cell {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

.request-detail-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

.reject-reason-input {
  min-height: 80px;
  resize: vertical;
}

.reject-reason-input:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-tint-strong);
}

.reject-form-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Match the compact pill size used by row actions (Remove/Cancel in the
   Approvers panel) so the reject form's buttons aren't visually heavier than
   the Reject button that opened them. */
.reject-form-actions .pill-btn {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
}

.request-detail-body {
  width: 100%;
}

.request-detail-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.request-detail-approvals-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.approval-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.approval-progress-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.approval-progress-bar-fill {
  height: 100%;
  width: var(--progress-width, 0%);
  border-radius: 3px;
  background: var(--success);
  transition: width 0.3s ease;
}

.approval-progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.approval-approvers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}

.approval-approver-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
}

.approval-approver-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.approval-approver-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.approval-approver-email {
  font-size: 11px;
  color: var(--text-muted);
}

.approval-approver-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.approval-approver-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.error-banner {
  background: var(--danger-tint-soft);
  border: 1px solid var(--danger-tint-strong);
  color: var(--danger-soft);
  padding: 10px 14px;
  border-radius: 6px;
  margin: 8px 0;
  font-size: 13px;
  word-break: break-word;
}

.request-detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 32px;
}

.request-detail-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.request-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.request-detail-value {
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
}

.request-detail-mono {
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

.request-detail-link {
  color: var(--accent);
  text-decoration: underline;
}

.request-detail-approval {
  display: flex;
  align-items: center;
  gap: 10px;
}

.request-detail-rejection-reason {
  font-size: 13px;
  color: var(--text-muted);
}

.request-detail-fail-reason,
.request-detail-reject-reason {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--danger-tint-soft);
  border: 1px solid var(--danger-tint-strong);
}

.request-detail-fail-reason .request-detail-value,
.request-detail-reject-reason .request-detail-value {
  color: var(--danger-soft);
  word-break: break-word;
}

.request-detail-empty {
  font-size: 13px;
  color: var(--text-muted);
}

.request-detail-subvalue {
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}

.request-detail-wallet-update {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-detail-keys-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.request-detail-keys-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.request-detail-key {
  font-family: monospace;
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
  padding: 4px 8px;
  background: var(--bg-2);
  border-radius: 4px;
}

.request-detail-policy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans, sans-serif);
  gap: 12px;
}

.request-detail-policy-coin {
  font-weight: 600;
}

.request-detail-policy-max {
  color: var(--text-muted);
  font-size: 12px;
}

.request-detail-policy-addr-empty {
  margin-top: 6px;
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  color: var(--text-muted);
}

.request-detail-policy-addr-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.request-detail-policy-addr-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  background: var(--overlay-white-soft);
  border-radius: 3px;
}

.request-detail-policy-addr-label {
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.request-detail-policy-addr-value {
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

.data-table td.actions-cell {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.actions-cell .pill-btn {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  margin-left: 6px;
}

.actions-cell .pill-btn:first-of-type {
  margin-left: 0;
}

.actions-cell .pill-btn.secondary:hover:not(:disabled) {
  border-color: var(--overlay-white-strong);
  color: var(--text);
}

.tx-action-spaced {
  margin-right: 6px;
}

.pill-btn.danger {
  background: var(--danger);
  color: var(--text);
  border: none;
}

.pill-btn.danger:hover:not(:disabled) {
  background: var(--danger);
  filter: brightness(1.08);
}

.pill-btn.danger-outline {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.pill-btn.danger-outline:hover {
  background: var(--danger-tint-soft);
}

.pill-btn.success-outline {
  background: transparent;
  border: 1px solid var(--success);
  color: var(--success);
}

.pill-btn.success-outline:hover:not(:disabled) {
  background: var(--success-tint-soft);
}

.pill-btn.primary-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.pill-btn.primary-outline:hover:not(:disabled) {
  background: var(--primary-tint-soft);
}

/* ── First-time setup hint ───────────────────────────────────────────────── */
.setup-hint {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ── Wallets panel: type segmented control + approver picker ─────────────── */
.wallets-segmented {
  display: inline-flex;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  width: fit-content;
}

.wallets-segment {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.wallets-segment:hover:not(.active) {
  color: var(--text);
}

.wallets-segment.active {
  background: var(--primary);
  color: var(--text);
}

.wallets-approvers-picker {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallets-approvers-picker>label {
  font-size: 13px;
  color: var(--text-muted);
}

.wallets-approver-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-0);
}

.wallets-approver-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.wallets-approver-row:last-child {
  border-bottom: none;
}

.wallets-approver-row:hover {
  background: var(--overlay-white-soft);
}

.wallets-approver-name {
  flex: 1;
  font-weight: 500;
}

.wallets-approver-email {
  color: var(--text-muted);
  font-size: 12px;
}

.wallets-approver-key {
  color: var(--text-muted);
  font-size: 12px;
  font-family: monospace;
}

.wallets-approver-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.wallets-create-btn {
  margin-top: 20px;
}

.wallets-id {
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
}

/* ── Wallet selector dropdown (topbar) ───────────────────────────────────── */
.wallet-selector {
  position: relative;
}

.wallet-selector-toggle,
.wallet-selector-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Shrink inline StatusBadge so the toggle matches the Send/Receive pill height. */
.wallet-selector-toggle .status-badge {
  padding: 2px 8px;
  font-size: 11px;
}

.wallet-selector-current {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-selector-chevron {
  font-size: 11px;
  opacity: 0.7;
}

.wallet-selector-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: min(360px, 92vw);
  max-width: 92vw;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px var(--overlay-black);
  z-index: 50;
  overflow: hidden;
}

.wallet-selector-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  gap: 12px;
}

.wallet-selector-item:hover {
  background: var(--overlay-white-soft);
}

.wallet-selector-item.active {
  background: var(--accent-tint-strong);
}

.wallet-selector-label {
  font-size: 14px;
  font-weight: 500;
}

.wallet-selector-id {
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
}

.wallet-selector-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}

/* ============================================================
   Shared component styles (refactor: shared/* components)
   These are the canonical classes used by DataTable, AddForm,
   ConfirmRemove, StatusBadge, ErrorBanner, ExpandRow, and the
   unified .drawer rules.
   ============================================================ */

/* --- DataTable --------------------------------------------- */
.data-table-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-0);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table thead tr {
  background: var(--bg-0);
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--overlay-white-soft);
}

.data-table-empty {
  text-align: center !important;
  color: var(--text-muted);
  padding: 24px 16px !important;
}

/* --- AddForm header + body --------------------------------- */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* Groups multiple action buttons together on the right side of a panel header
   (e.g. Logs panel: Search + Clear). Single-action headers stay as-is. */
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.add-form {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.add-form-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.add-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.add-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.add-form-row>.add-form-field {
  flex: 1;
  min-width: 140px;
}

.add-form-field label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.add-form-submit {
  align-self: flex-start;
}

/* --- ConfirmRemove (inline 2-step) ------------------------- */
.confirm-prompt {
  color: var(--text-muted);
  font-size: 13px;
  margin-left: 12px;
  margin-right: 8px;
}

/* --- StatusBadge ------------------------------------------- */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.status-badge.ok {
  background: var(--success-tint-soft);
  color: var(--success);
}

.status-badge.warn {
  background: var(--warning-tint);
  color: var(--warning);
}

.status-badge.err {
  background: var(--danger-tint-soft);
  color: var(--danger);
}

.status-badge.info {
  background: var(--primary-tint-soft);
  color: var(--primary);
}

/* --- ErrorBanner / message banner -------------------------- */
.message-banner {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 16px;
  /* Wrap on word boundaries; only break long unbreakable tokens (hashes,
     addresses) when they can't fit — not normal words like "If". */
  word-break: normal;
  overflow-wrap: anywhere;
}

.message-banner.error {
  background: var(--danger-tint-soft);
  border: 1px solid var(--danger-tint-strong);
  color: var(--danger-soft);
}

.message-banner.success {
  background: var(--success-tint-soft);
  border: 1px solid var(--success-tint-strong);
  color: var(--success-soft);
}

.message-banner.warning {
  background: var(--warning-tint);
  border: 1px solid var(--warning);
  color: var(--warning);
}

/* --- Phone/QR passkey guidance (shown inside the passkey card on demand) --- */

/* Widen the card while the guide is showing so the steps fit side by side. */
.login-card:has(.phone-guidance) {
  width: min(760px, 92vw);
}

/* Guide box + Back button as one tight group (avoids the card's larger gap). */
.phone-guidance-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phone-guidance-back {
  width: 100%;
}

.phone-guidance {
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-0);
  text-align: left;
}

.phone-guidance-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}

.phone-guidance-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: phone-guidance-step;
  /* The two image steps sit side by side; the intro "Cancel" step spans the
     full width above them. Stacks vertically on narrow screens (below). */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

.phone-guidance-steps li {
  counter-increment: phone-guidance-step;
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  /* Column layout so the screenshot can be pinned to the bottom, keeping the
     two side-by-side images aligned even when the step text differs in length. */
  display: flex;
  flex-direction: column;
}

.phone-guidance-steps li:first-child {
  flex-basis: 100%;
}

@media (max-width: 600px) {
  .phone-guidance-steps {
    flex-direction: column;
  }
}

.phone-guidance-step-text {
  display: block;
  margin-bottom: 8px;
}

.phone-guidance-step-text::before {
  content: counter(phone-guidance-step) ". ";
  color: var(--text-soft);
  font-weight: 600;
}

.phone-guidance-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* --- ExpandRow (row-expanding tables) ---------------------- */
.expand-row td {
  background: var(--bg-3);
  padding: 0 !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left !important;
}

.expand-row-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

/* --- Unified text input ------------------------------------ */
.form-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-0);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.form-input:hover:not(:disabled):not(:focus) {
  border-color: var(--overlay-white-strong);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint-strong);
}