body {
    margin: 0; display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; overflow: hidden;
    /* App-shell behaviour: no pull-to-refresh, no rubber-band, no blue tap flash. */
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
/* Chrome is not selectable the way app chrome isn't; content and inputs still are. */
#sidebar, .page-header, #mobile-tabs, .mtab, .chart-tab, .interval-btn, .bp-tab, .oe-kind, .oe-side-tab {
    -webkit-user-select: none; user-select: none;
}
input, textarea, select, .panel-body, .bp-body { -webkit-user-select: auto; user-select: auto; }
.page-header { height: 60px; flex-shrink: 0; display: flex; align-items: center; padding: 0 24px; background: rgb(var(--bg)); gap: 16px; position: relative; z-index: 50; }
/* After the base rule: its `padding` shorthand and `gap` are declared at the same
   specificity, so an earlier override would be replaced wholesale. */
@media (max-width: 640px) {
    .page-header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 10px; }
}
.page-header-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.page-title { margin: 0; font-size: 16px; font-weight: 500; color: rgb(var(--text)); }
.topbar-search { display: flex; align-items: center; gap: 10px; flex: 0 1 320px; min-width: 0; overflow: hidden; height: 34px; padding: 0 8px 0 12px; font-family: inherit; text-align: left; color: rgb(var(--text-muted)); background: rgb(var(--surface-2)); border: 1px solid transparent; border-radius: var(--control-radius); cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; }
.topbar-search:hover { color: rgb(var(--text-3)); border-color: rgb(var(--border)); }
.topbar-search-icon { width: 15px; height: 15px; flex-shrink: 0; }
.topbar-search-placeholder { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search-kbd { padding: 2px 6px; font-size: 11px; line-height: 1; display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); }
.page-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -6px; color: rgb(var(--text-muted)); transition: color 120ms; }
.page-back:hover { color: rgb(var(--text)); }
.page-back svg { width: 18px; height: 18px; }
.page-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-feedback { margin-right: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; color: rgb(var(--accent)); }
.topbar-feedback:hover { text-decoration: underline; text-underline-offset: 2px; }
.topbar-feedback-short { display: none; }
@media (max-width: 1024px) { .topbar-feedback-long { display: none; } .topbar-feedback-short { display: inline; } }
/* Chrome actions stay quieter than in-content CTAs: a soft filled pill instead of the
   accent outline, so the header does not compete with the page it frames. */
.page-header-right .topbar-action { gap: 7px; color: rgb(var(--text-2)); background: rgb(var(--surface-2)); border-color: transparent; }
.page-header-right .topbar-action:hover { color: rgb(var(--text)); background: rgb(var(--surface-elevated)); border-color: rgb(var(--border)); }
.page-header-right .topbar-action svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-auth { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; color: rgb(var(--text-2)); background: rgb(var(--surface-2)); border-radius: var(--control-radius); transition: background 120ms, color 120ms; }
.topbar-auth:hover { color: rgb(var(--text)); background: rgb(var(--surface-elevated)); }
.topbar-auth-primary { color: rgb(var(--bg)); background: rgb(var(--accent)); }
.topbar-auth-primary:hover { color: rgb(var(--bg)); background: rgb(var(--accent-hover)); }

body.kyc-locked .market-selector,
body.kyc-locked .market-stats,
body.kyc-locked .topbar-bal,
body.kyc-locked #topbar-deposit-btn,
body.kyc-locked #topbar-manage-btn { opacity: 0.3; pointer-events: none; }

#kyc-gated-content.kyc-dimmed { opacity: 0.3; pointer-events: none; user-select: none; }
.kyc-notice { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-left: 2px solid rgb(var(--warn)); }
.kyc-notice-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: rgb(var(--warn)); }
.kyc-notice-body { flex: 1; min-width: 0; }
.kyc-notice-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: rgb(var(--text)); }
.kyc-notice-desc { margin: 0; max-width: 76ch; font-size: 12.5px; line-height: 1.55; color: rgb(var(--text-3)); }
.kyc-notice-desc a { color: rgb(var(--text-2)); text-decoration: underline; }
.kyc-notice-desc a:hover { text-decoration: none; }
.kyc-notice-cta { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 8px 14px; background: rgb(var(--accent)); border: none; color: rgb(var(--bg)); font-family: inherit; font-size: 13px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background 120ms; }
.kyc-notice-cta:hover { background: rgb(var(--accent-hover)); }
.kyc-notice-cta svg { width: 14px; height: 14px; }
.kyc-notice[data-tone="danger"] { border-left-color: rgb(var(--danger)); }
.kyc-notice[data-tone="danger"] .kyc-notice-icon { color: rgb(var(--danger)); }
.kyc-notice[data-tone="danger"] .kyc-notice-title { color: rgb(var(--danger)); }
.kyc-notice[data-tone="neutral"] { border-left-color: rgb(var(--border-strong)); }
.kyc-notice[data-tone="neutral"] .kyc-notice-icon { color: rgb(var(--text-3)); }
@media (max-width: 640px) {
    .kyc-notice { flex-wrap: wrap; }
    .kyc-notice-cta { width: 100%; justify-content: center; }
}

.kyc-combo-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: rgb(var(--surface-elevated)); border: 1px solid rgb(var(--border)); font-family: inherit; font-size: 14px; line-height: 20px; color: rgb(var(--text)); text-align: left; cursor: pointer; transition: border-color 150ms; }
.kyc-combo-trigger[aria-expanded="true"] { border-color: rgb(var(--accent) / 0.5); }
.kyc-combo-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kyc-combo-label.is-placeholder, .kyc-combo-chevron { color: rgb(var(--text-muted)); }
.kyc-combo-chevron { width: 14px; height: 14px; flex-shrink: 0; }
.kyc-combo-menu { display: none; position: absolute; z-index: 10; left: 0; right: 0; margin-top: 4px; background: rgb(var(--surface-elevated)); border: 1px solid rgb(var(--border-strong)); box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow: hidden; }
.kyc-combo-search-wrap { padding: 8px; border-bottom: 1px solid rgb(var(--border)); }
.kyc-combo-search { width: 100%; padding: 8px 10px; background: rgb(var(--surface-sunken)); border: 1px solid rgb(var(--border)); font-family: inherit; font-size: 13px; color: rgb(var(--text)); outline: none; }
.kyc-combo-search:focus { border-color: rgb(var(--accent) / 0.5); }
.kyc-combo-list { max-height: 260px; overflow-y: auto; list-style: none; margin: 0; padding: 4px 0; }
.kyc-combo-option { padding: 8px 14px; font-size: 14px; line-height: 1.4; color: rgb(var(--text)); cursor: pointer; }
.kyc-combo-option.active, .kyc-combo-option:hover { background: rgb(var(--overlay) / 0.08); }
.kyc-combo-check { width: 12px; flex-shrink: 0; }
.kyc-combo-sep { height: 1px; margin: 4px 0; background: rgb(var(--border)); }
.kyc-combo-empty { padding: 10px 14px; font-size: 12px; color: rgb(var(--text-muted)); }

.kyc-steps-head { position: relative; display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.kyc-steps-trigger { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 2px 6px 2px 0; background: none; border: 0; font: inherit; color: rgb(var(--text-muted)); cursor: pointer; transition: color 120ms; }
.kyc-steps-trigger:hover { color: rgb(var(--text)); }
.kyc-steps-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kyc-steps-menu { display: none; position: absolute; z-index: 20; left: 0; top: 100%; margin: 4px 0 0; padding: 0; min-width: 240px; max-height: 280px; overflow-y: auto; list-style: none; background: rgb(var(--surface-elevated)); border: 1px solid rgb(var(--border-strong)); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.kyc-steps-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; white-space: nowrap; outline-offset: -2px; color: rgb(var(--text-muted)); cursor: pointer; }
.kyc-steps-item.done { color: rgb(var(--text-3)); }
.kyc-steps-item.current { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.06); }
.kyc-steps-item:hover, .kyc-steps-item:focus { background: rgb(var(--overlay) / 0.1); }
.kyc-steps-mark { width: 12px; flex-shrink: 0; }
.kyc-rail { display: flex; gap: 4px; }
.kyc-rail-step { flex: 1; height: 14px; display: flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.kyc-rail-bar { width: 100%; height: 3px; background: rgb(var(--border)); transition: background 150ms; }
.kyc-rail-step.current .kyc-rail-bar { height: 5px; }
.kyc-rail-step.done .kyc-rail-bar { background: rgb(var(--text-2)); }
.kyc-rail-step:hover .kyc-rail-bar { background: rgb(var(--border-strong)); }
.kyc-rail-step.done:hover .kyc-rail-bar { background: rgb(var(--text)); }

.sidebar-logo { display: flex; align-items: center; justify-content: flex-start; gap: 8px; height: 52px; padding: 0 20px; flex-shrink: 0; }
.sidebar-logo img { height: 16px; transition: opacity 120ms; }
:root[data-theme="light"] .sidebar-logo img { filter: brightness(0); }
.sidebar-alpha { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; color: rgb(var(--accent)); }
#sidebar.collapsed .sidebar-alpha { display: none; }
#sidebar.collapsed .sidebar-logo { justify-content: center; padding: 0; }
#sidebar.collapsed .sidebar-logo img { height: 14px; }
.sidebar-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 6px 0 10px; margin-bottom: 8px; background: transparent; border: 1px solid rgb(var(--border)); cursor: pointer; transition: border-color 120ms, color 120ms; font-family: inherit; text-align: left; color: rgb(var(--text-muted)); }
.sidebar-search:hover { border-color: rgb(var(--border-strong)); color: rgb(var(--text-3)); }
.sidebar-search-icon { width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-search-placeholder { flex: 1; font-size: 13px; }
.sidebar-search-kbd { padding: 2px 6px; border: 1px solid rgb(var(--border)); font-size: 11px; line-height: 1; display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; }
.sidebar-kbd-mod { font-size: 12px; }
#sidebar.collapsed .sidebar-search { justify-content: center; padding: 0; gap: 0; }
#sidebar.collapsed .sidebar-search-placeholder,
#sidebar.collapsed .sidebar-search-kbd { display: none; }

#command-palette { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; }
#command-palette.hidden { display: none; }
.command-palette-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.command-palette-modal { position: relative; width: 600px; max-width: 90vw; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); box-shadow: 0 24px 64px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.command-palette-input-wrap { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid rgb(var(--border)); }
.command-palette-icon { width: 16px; height: 16px; color: rgb(var(--text-muted)); flex-shrink: 0; }
#command-palette-input { flex: 1; padding: 14px 0; background: transparent; border: none; color: rgb(var(--text)); font-size: 14px; font-family: inherit; outline: none; }
#command-palette-input::placeholder { color: rgb(var(--text-muted)); }
.command-palette-esc { padding: 2px 6px; border: 1px solid rgb(var(--border)); background: transparent; font-size: 11px; color: rgb(var(--text-muted)); font-family: inherit; cursor: pointer; transition: color 120ms, border-color 120ms; }
.command-palette-esc:hover { color: rgb(var(--text)); border-color: rgb(var(--border-strong)); }
.command-palette-body { max-height: 50vh; overflow-y: auto; }
.command-palette-section-label { padding: 10px 16px 6px; font-size: 11px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.05em; }
.command-palette-sub { margin-left: auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgb(var(--text-muted)); }
.command-palette-method { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 2px 0; flex-shrink: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid; }
.command-palette-method[data-method="GET"] { color: #6171fe; background: rgba(97,113,254,0.1); border-color: #6171fe; }
.command-palette-method[data-method="POST"] { color: rgb(var(--accent)); background: rgb(var(--accent) / 0.1); border-color: rgb(var(--accent)); }
.command-palette-method[data-method="DELETE"] { color: rgb(var(--danger)); background: rgb(var(--danger) / 0.1); border-color: rgb(var(--danger)); }
.command-palette-method[data-method="PUT"], .command-palette-method[data-method="PATCH"] { color: rgb(var(--warn)); background: rgb(var(--warn) / 0.1); border-color: rgb(var(--warn)); }
.command-palette-list { padding-bottom: 6px; }
.command-palette-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13px; color: rgb(var(--text-2)); cursor: pointer; transition: background 80ms; background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; }
.command-palette-item.active { background: rgb(var(--border)); color: rgb(var(--text)); }
.command-palette-item svg { width: 16px; height: 16px; color: rgb(var(--text-muted)); flex-shrink: 0; }
.command-palette-item.active svg { color: rgb(var(--text)); }
.command-palette-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: rgb(var(--text-muted)); }
.command-palette-footer { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid rgb(var(--border)); font-size: 11px; color: rgb(var(--text-muted)); }
.command-palette-footer-item { display: inline-flex; align-items: center; gap: 6px; }
.command-palette-kbd { padding: 1px 5px; border: 1px solid rgb(var(--border)); font-size: 10px; color: rgb(var(--text-muted)); min-width: 18px; text-align: center; line-height: 1.3; }
.user-widget { position: relative; }
.user-bubble { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgb(var(--border)); border: 1px solid rgb(var(--border)); color: rgb(var(--text)); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms, border-color 120ms; padding: 0; }
.user-bubble:hover { background: rgb(var(--border-strong)); border-color: rgb(var(--border-strong)); }
.user-bubble-initial { line-height: 1; }
.user-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); box-shadow: 0 24px 64px rgba(0,0,0,0.6); z-index: 90; display: flex; flex-direction: column; }
.user-panel.hidden { display: none; }
.user-panel-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgb(var(--border)); }
.user-panel-avatar { width: 40px; height: 40px; border-radius: 999px; background: rgb(var(--border)); color: rgb(var(--text)); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; flex-shrink: 0; }
.user-panel-identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-panel-email { font-size: 13px; color: rgb(var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel-manage { font-size: 12px; color: rgb(var(--accent)); text-decoration: none; width: fit-content; }
.user-panel-manage:hover { text-decoration: underline; }
.user-panel-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; font-size: 13px; color: rgb(var(--text-2)); background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; text-decoration: none; transition: background 80ms, color 80ms; }
.user-panel-row:hover { background: rgb(var(--overlay) / 0.04); color: rgb(var(--text)); }
.user-panel-row svg { width: 16px; height: 16px; color: rgb(var(--text-muted)); flex-shrink: 0; }
.user-panel-row:hover svg { color: rgb(var(--text)); }
.user-panel-signout { border-top: 1px solid rgb(var(--border)); color: rgb(var(--neg)); }
.user-panel-signout svg { color: rgb(var(--neg)); }
.user-panel-signout:hover { color: rgb(var(--neg)); background: rgb(var(--neg) / 0.06); }
.user-panel-signout:hover svg { color: rgb(var(--neg)); }

/* One button system across the app: a neutral outline for ordinary actions and an
   accent outline for the primary action on a surface. Written in plain CSS rather than
   tailwind @apply so the buttons still look right wherever the generated sheet is absent. */
.topbar-action, .pax-cta-btn, .home-hero-btn, .cash-cta, .soon-docs {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 34px; padding: 0 16px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
    text-decoration: none; cursor: pointer; border-radius: var(--control-radius);
    border: 1px solid rgb(var(--border)); background: transparent; color: rgb(var(--text-2));
    transition: background 120ms, border-color 120ms, color 120ms;
}
.topbar-action:hover, .home-hero-btn:hover {
    background: rgb(var(--overlay) / 0.08); border-color: rgb(var(--border-strong)); color: rgb(var(--text));
}
.topbar-action-primary, .pax-cta-btn, .home-hero-btn-primary, .cash-cta, .soon-docs {
    color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.45); background: transparent;
}
.topbar-action-primary:hover, .pax-cta-btn:hover, .home-hero-btn-primary:hover, .cash-cta:hover, .soon-docs:hover {
    color: rgb(var(--accent)); background: rgb(var(--accent) / 0.1); border-color: rgb(var(--accent));
}
.topbar-action:disabled, .pax-cta-btn:disabled, .home-hero-btn:disabled, .cash-cta:disabled {
    opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

.pax-tz-toggle { margin-left: 4px; padding: 1px 4px; font: inherit; font-size: 10px; line-height: 1.2; letter-spacing: 0.02em; color: rgb(var(--text-muted)); background: transparent; border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); cursor: pointer; transition: color 120ms, border-color 120ms; }
.pax-tz-toggle:hover { color: rgb(var(--text)); border-color: rgb(var(--border-strong)); }

.balance-widget { position: relative; }
.topbar-balance { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 10px; background: rgb(var(--overlay) / 0.04); border: 1px solid rgb(var(--border)); color: rgb(var(--text)); font-family: inherit; font-size: 12px; cursor: pointer; transition: background 120ms, border-color 120ms; }
.topbar-balance:hover { background: rgb(var(--overlay) / 0.08); border-color: rgb(var(--border-strong)); }
.topbar-balance-amount { font-weight: 500; font-variant-numeric: tabular-nums; }
.topbar-balance-unit { color: rgb(var(--text-muted)); font-size: 11px; }
.balance-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); box-shadow: 0 24px 64px rgba(0,0,0,0.6); z-index: 90; }
.balance-panel.hidden { display: none; }
.balance-panel-header { padding: 16px 16px 14px; border-bottom: 1px solid rgb(var(--border)); }
.balance-panel-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--text-muted)); margin-bottom: 6px; }
.balance-panel-total { display: flex; align-items: baseline; gap: 6px; }
#balance-total-amount { font-size: 22px; color: rgb(var(--text)); font-weight: 500; font-variant-numeric: tabular-nums; }
.balance-panel-unit { font-size: 13px; color: rgb(var(--text-muted)); }
.balance-panel-actions { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgb(var(--border)); }
.balance-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; background: transparent; color: rgb(var(--text-2)); font-size: 12px; text-decoration: none; transition: color 120ms, background 120ms; }
.balance-action + .balance-action { border-left: 1px solid rgb(var(--border)); }
.balance-action:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.04); }
.balance-action svg { width: 16px; height: 16px; }
.balance-panel-list-label { padding: 10px 16px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--text-muted)); }
.balance-panel-list { max-height: 320px; overflow-y: auto; padding-bottom: 8px; }
.balance-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; transition: background 80ms; }
.balance-row:hover { background: rgb(var(--overlay) / 0.04); }
.balance-row-icon { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; }
.balance-row-icon svg { width: 24px; height: 24px; }
.balance-row-info { flex: 1; min-width: 0; }
.balance-row-symbol { font-size: 13px; color: rgb(var(--text-2)); }
.balance-row-name { font-size: 11px; color: rgb(var(--text-muted)); }
.balance-row-values { text-align: right; }
.balance-row-amount { font-size: 13px; color: rgb(var(--text)); font-variant-numeric: tabular-nums; }
.balance-row-usd { font-size: 11px; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; }
.balance-row.balance-row-clickable { cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; color: inherit; }

.balance-picker-header { display: flex; align-items: center; gap: 8px; padding: 14px 12px; border-bottom: 1px solid rgb(var(--border)); }
.balance-picker-back { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: rgb(var(--text-muted)); background: transparent; border: none; padding: 0; cursor: pointer; transition: color 120ms; }
.balance-picker-back:hover { color: rgb(var(--text)); }
.balance-picker-back svg { width: 16px; height: 16px; }
#balance-picker-title { font-size: 13px; font-weight: 500; color: rgb(var(--text)); }

.frozen-banner { padding: 7px 16px; text-align: center; font-size: 12px; color: rgb(var(--neg)); background: rgb(var(--neg) / 0.1); border-bottom: 1px solid rgb(var(--neg) / 0.25); }
.frozen-banner a { color: inherit; text-decoration: underline; }

#app-layout { display: flex; flex: 1; min-height: 0; }
#sidebar { width: 172px; background: rgb(var(--bg-chrome)); display: flex; flex-direction: column; flex-shrink: 0; transition: width 160ms ease; overflow: hidden; }
#sidebar.collapsed { width: 60px; }
.sidebar-top { padding: 0 9px; }
#sidebar.collapsed .sidebar-top { padding: 0; }
.sidebar-nav { flex: 1; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 13px; color: rgb(var(--text-muted)); transition: color 120ms, background 120ms; text-decoration: none; white-space: nowrap; }
.sidebar-link:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.03); }
.sidebar-link.active { color: rgb(var(--text)); background: rgb(var(--border)); }
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-label { transition: opacity 120ms; white-space: nowrap; }
.sidebar-link-disabled { color: rgb(var(--text-dim)); cursor: not-allowed; }
.sidebar-link-disabled:hover { color: rgb(var(--text-dim)); background: transparent; }
.sidebar-soon { margin-left: auto; padding: 1px 6px; font-size: 9px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--text-muted)); background: rgb(var(--overlay) / 0.04); border: 1px solid rgb(var(--border)); transition: opacity 120ms; }
#sidebar.collapsed .sidebar-nav { padding: 0; }
#sidebar.collapsed .sidebar-label { opacity: 0; pointer-events: none; width: 0; }
#sidebar.collapsed .sidebar-soon { opacity: 0; pointer-events: none; width: 0; padding: 0; border: 0; margin: 0; overflow: hidden; }
#sidebar.collapsed .sidebar-link { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar-bottom { padding: 10px 12px; }
.sidebar-collapse-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; font-size: 11px; color: rgb(var(--text-muted)); background: none; border: none; cursor: pointer; transition: color 120ms; }
.sidebar-collapse-btn:hover { color: rgb(var(--text)); }
.sidebar-collapse-btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 160ms; }
#sidebar.collapsed .sidebar-collapse-btn { justify-content: center; }
#sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-theme-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; margin-bottom: 4px; font-size: 11px; color: rgb(var(--text-muted)); background: none; border: none; cursor: pointer; font-family: inherit; transition: color 120ms; }
.sidebar-theme-btn:hover { color: rgb(var(--text)); }
.sidebar-theme-icon { width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-theme-label { flex: 1; text-align: left; }
#sidebar.collapsed .sidebar-theme-btn { justify-content: center; }
#sidebar.collapsed .sidebar-theme-label,
#sidebar.collapsed .sidebar-theme-btn .pax-switch-track { display: none; }
#sidebar.collapsed .sidebar-collapse-label { display: none; }

/* Phones have no room for a rail; primary navigation becomes a bottom tab bar and the
   pages that don't fit it move into the account menu. Both defaults have to precede the
   media query or they win on equal specificity and neither can ever show, leaving a
   phone with no navigation at all. */
.user-panel-mobile-nav { display: none; }
#mobile-nav { display: none; }
@media (max-width: 640px) {
    #sidebar { display: none; }
    .user-panel-mobile-nav { display: block; }
    #mobile-nav {
        display: flex; flex-shrink: 0; background: rgb(var(--bg-chrome));
        border-top: 1px solid rgb(var(--border));
        padding-bottom: env(safe-area-inset-bottom);
    }
}
.mnav-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 7px 2px; color: rgb(var(--text-muted)); text-decoration: none; font-size: 10.5px; letter-spacing: 0.02em; }
.mnav-link svg { width: 20px; height: 20px; }
/* Weight as well as colour: in the light theme --text-muted sits close enough to --text
   that colour alone barely reads as selected. */
.mnav-link.active { color: rgb(var(--text)); font-weight: 500; }
.mnav-link-disabled { opacity: 0.35; pointer-events: none; }

/* Force the sidebar into its icon rail on narrow viewports so it stops eating content width. */
@media (max-width: 1024px) {
    #sidebar { width: 60px; }
    #sidebar .sidebar-alpha,
    #sidebar .sidebar-label, #sidebar .sidebar-soon, #sidebar .sidebar-collapse-label,
    #sidebar .sidebar-theme-label, #sidebar .sidebar-search-placeholder, #sidebar .sidebar-search-kbd { display: none; }
    #sidebar .sidebar-link { justify-content: center; padding: 9px 0; gap: 0; }
    #sidebar .sidebar-logo { justify-content: center; padding: 0; }
    #sidebar .sidebar-logo img { height: 14px; }
    #sidebar .sidebar-search { justify-content: center; padding: 0; gap: 0; }
    #sidebar .sidebar-top { padding: 0; }
    #sidebar .sidebar-collapse-btn, #sidebar .sidebar-theme-btn { justify-content: center; }
    #sidebar .sidebar-theme-btn .pax-switch-track { display: none; }
}

#main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#page-content { flex: 1; overflow-y: auto; min-height: 0; }
#page-content > *:where(:not(.fixed):not([class*="lh-"]):not([id^="lh-"])) { max-width: var(--page-max); margin-left: auto; margin-right: auto; }

#deposit-modal, #withdraw-modal, #lh-experimental-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 5vh; }
#deposit-modal.hidden, #withdraw-modal.hidden, #lh-experimental-modal.hidden { display: none; }
.deposit-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(2px); }
.deposit-modal-card { position: relative; width: 480px; max-width: 100%; max-height: 90vh; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: var(--panel-radius); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.deposit-step { display: flex; flex-direction: column; min-height: 0; max-height: 90vh; }
.deposit-step.hidden { display: none; }
.deposit-modal-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgb(var(--border)); flex-shrink: 0; }
.deposit-modal-title { flex: 1; margin: 0; font-size: 16px; font-weight: 600; color: rgb(var(--text)); }
.deposit-modal-back, .deposit-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: rgb(var(--text-muted)); background: transparent; border: none; padding: 0; cursor: pointer; transition: color 120ms; flex-shrink: 0; }
.deposit-modal-back:hover, .deposit-modal-close:hover { color: rgb(var(--text)); }
.deposit-modal-back svg, .deposit-modal-close svg { width: 18px; height: 18px; }
.deposit-modal-warn { margin: 14px 18px; padding: 10px 12px; font-size: 12px; color: rgb(var(--text-3)); background: rgb(var(--overlay) / 0.03); border: 1px solid rgb(var(--border)); line-height: 1.5; }

.deposit-search-wrap { display: flex; align-items: center; gap: 10px; margin: 14px 18px 4px; padding: 9px 12px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); }
.deposit-search-wrap.hidden { display: none; }
.deposit-search-icon { width: 16px; height: 16px; color: rgb(var(--text-muted)); flex-shrink: 0; }
#deposit-search, #wd-wallet-search, #wd-asset-search { flex: 1; padding: 4px 0; background: transparent; border: none; color: rgb(var(--text)); font-size: 14px; font-family: inherit; outline: none; }
#deposit-search::placeholder, #wd-wallet-search::placeholder, #wd-asset-search::placeholder { color: rgb(var(--text-muted)); }

.deposit-cols { display: flex; justify-content: space-between; padding: 10px 18px 6px; font-size: 11px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.05em; }
.deposit-list { overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.deposit-search-wrap:not(.hidden) ~ .deposit-list, .deposit-search-wrap:not(.hidden) ~ .deposit-cols + .deposit-list { min-height: 296px; }

.deposit-asset-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 18px; background: transparent; border: none; cursor: pointer; transition: background 80ms; font-family: inherit; text-align: left; }
.deposit-asset-row:hover { background: rgb(var(--overlay) / 0.04); }
.deposit-asset-row .deposit-asset-icon { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; }
.deposit-asset-row .deposit-asset-icon svg { width: 28px; height: 28px; }
.deposit-asset-row .deposit-asset-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.deposit-asset-row .deposit-asset-name { font-size: 14px; color: rgb(var(--text)); font-weight: 500; }
.deposit-asset-row .deposit-asset-sub { font-size: 11px; color: rgb(var(--text-muted)); }
.deposit-asset-row .deposit-asset-balance { text-align: right; font-family: 'SF Mono', 'Fira Code', monospace; font-variant-numeric: tabular-nums; }
.deposit-asset-row .deposit-asset-bal-native { font-size: 13px; color: rgb(var(--text)); }
.deposit-asset-row .deposit-asset-bal-usd { font-size: 11px; color: rgb(var(--text-muted)); }

.deposit-network-row { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 14px 18px; background: transparent; border: none; border-bottom: 1px solid rgb(var(--border)); cursor: pointer; transition: background 80ms; font-family: inherit; text-align: left; }
.deposit-network-row:hover { background: rgb(var(--overlay) / 0.04); }
.deposit-network-row:last-child { border-bottom: none; }
.deposit-network-row .deposit-network-name { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgb(var(--text)); font-weight: 500; }
.deposit-network-row .deposit-network-icon { width: 24px; height: 24px; display: inline-flex; }
.deposit-network-row .deposit-network-icon svg { width: 24px; height: 24px; }
.deposit-network-row .deposit-network-meta { display: inline-flex; gap: 8px; padding-left: 34px; }
.deposit-network-row .deposit-network-tag { padding: 2px 8px; font-size: 11px; color: rgb(var(--text-3)); background: rgb(var(--overlay) / 0.04); border: 1px solid rgb(var(--border)); }

.deposit-address-body { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; border-bottom: 1px solid rgb(var(--border)); }
.deposit-address-qr { display: block; width: 180px; height: 180px; padding: 8px; background: rgb(var(--text)); }
.deposit-address-qr:not([src]) { display: none; }
.deposit-address-label { font-size: 11px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.05em; }
.deposit-address-value { width: 100%; padding: 12px 14px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: rgb(var(--text)); word-break: break-all; text-align: center; background: rgb(var(--overlay) / 0.03); border: 1px solid rgb(var(--border)); }
.deposit-copy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgb(var(--overlay) / 0.04); border: 1px solid rgb(var(--border)); color: rgb(var(--text-2)); font-family: inherit; font-size: 13px; cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms; }
.deposit-copy-btn:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.08); border-color: rgb(var(--border-strong)); }
.deposit-copy-btn.copied { color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.4); }
.deposit-copy-btn svg { width: 14px; height: 14px; }

.deposit-meta-table { padding: 4px 18px 12px; }
.deposit-meta-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13px; border-bottom: 1px solid rgb(var(--border)); }
.deposit-meta-row:last-child { border-bottom: none; }
.deposit-meta-key { color: rgb(var(--text-3)); }
.deposit-meta-val { color: rgb(var(--text)); font-family: 'SF Mono', 'Fira Code', monospace; font-variant-numeric: tabular-nums; }

.deposit-empty { padding: 36px 18px; text-align: center; font-size: 13px; color: rgb(var(--text-muted)); }

/* ---- Touch input ----
   Keyed on the pointer, not the width: a tablet runs the desktop layout but is still
   driven by a thumb. Kept at the end of the sheet so these win over the declarations
   they narrow. */
@media (pointer: coarse) {
    /* iOS zooms the whole page when a focused field is under 16px. Several fields set
       their size through an id selector, which no plain rule can out-rank. */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }

    .user-bubble { width: 36px; height: 36px; }
    .page-back { width: 36px; height: 36px; margin-left: -9px; }
    .user-panel-row { min-height: 44px; }
    .user-panel-manage { min-height: 32px; display: inline-flex; align-items: center; }
    .deposit-modal-back, .deposit-modal-close { width: 36px; height: 36px; margin: -4px 0; }
    .sidebar-theme-btn, .sidebar-collapse-btn, .sidebar-link, .sidebar-search { min-height: 40px; }
}

/* ---- Phone shell ----
   Rules that belong to the app chrome rather than to any one page. */
@media (max-width: 640px) {
    /* Header CTAs collide with the page title at this width; both live on Home, which is
       one tap away in the bottom bar. */
    .page-header-right .topbar-action { display: none; }

    /* Centred dialogs become bottom sheets: reachable thumb, no keyboard-shrunk card. */
    #deposit-modal, #withdraw-modal, #command-palette {
        align-items: flex-end; justify-content: stretch; padding: 0;
    }
    .deposit-modal-card, .command-palette-modal {
        width: 100%; max-width: none; max-height: 88dvh;
        padding-bottom: env(safe-area-inset-bottom);
    }
    #command-palette { padding-top: 0; }
    .command-palette-body { max-height: 60dvh; }
    .deposit-step { max-height: 88dvh; }

    /* A 280px menu anchored to the right edge leaves the rows cramped against the screen. */
    .user-panel { width: calc(100vw - 24px); max-width: 320px; }
}

/* ---- API key modal (home + settings) ---- */
#api-key-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px 4vh; }
#api-key-modal.hidden { display: none; }
.akm-card { width: 540px; }
.akm-body { display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow-y: auto; }
.akm-body.hidden { display: none; }
.akm-field { display: flex; flex-direction: column; gap: 6px; }
.akm-label { position: relative; display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.05em; }
.akm-helpwrap { position: relative; display: inline-flex; }
.akm-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; font-family: inherit; font-size: 10px; font-weight: 600; color: rgb(var(--text-muted)); background: transparent; border: 1px solid rgb(var(--border-strong)); border-radius: var(--control-radius); cursor: help; }
.akm-help-text { width: auto; height: auto; border: none; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: rgb(var(--text-dim)); text-decoration: underline dotted; text-underline-offset: 3px; }
.akm-help:hover, .akm-help:focus-visible { color: rgb(var(--text)); border-color: rgb(var(--text-3)); outline: none; }
.akm-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: 0; white-space: pre-line; color: rgb(var(--text-2)); background: rgb(var(--surface-elevated)); border: 1px solid rgb(var(--border)); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.akm-help:hover + .akm-tip, .akm-help:focus-visible + .akm-tip { width: 280px; height: auto; clip: auto; padding: 8px 10px; }
.pax-help-tip { position: fixed; z-index: 400; width: 280px; max-width: calc(100vw - 16px); height: auto; clip: auto; padding: 8px 10px; pointer-events: none; }
.akm-optional { text-transform: none; letter-spacing: 0; color: rgb(var(--text-dim)); }
.akm-field input[type="text"], .akm-field textarea { width: 100%; padding: 9px 12px; font-family: inherit; font-size: 13px; color: rgb(var(--text)); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); outline: none; }
.akm-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; resize: vertical; }
.akm-field input:focus, .akm-field textarea:focus { border-color: rgb(var(--border-strong)); }
.akm-perms, .akm-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.akm-check, .akm-tier { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; font-size: 13px; color: rgb(var(--text-2)); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); cursor: pointer; }
.akm-check:has(:checked), .akm-tier:has(:checked) { color: rgb(var(--text)); border-color: rgb(var(--border-strong)); }
.akm-check-fixed { opacity: 0.6; cursor: default; }
.akm-check input, .akm-tier input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex-shrink: 0; background: rgb(var(--surface-3)); border: 1px solid rgb(var(--text-dim)); border-radius: var(--control-radius); cursor: pointer; }
.akm-tier input { position: absolute; opacity: 0; pointer-events: none; }
.akm-tier:has(:checked) { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.08); }
.akm-tier:has(input:focus-visible) { outline: 1px solid rgb(var(--text-3)); outline-offset: 2px; }
.akm-check input:checked, .akm-tier input:checked { background-color: rgb(var(--accent)); border-color: rgb(var(--accent)); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 9 17 19 7'/></svg>"); background-size: 78% 78%; background-position: center; background-repeat: no-repeat; }
.akm-check input:disabled { cursor: default; }
.akm-tier { flex: 1; justify-content: space-between; }
.akm-tier small { font-size: 12px; color: rgb(var(--text-muted)); }
.akm-details summary { font-size: 12px; color: rgb(var(--text-muted)); cursor: pointer; }
.akm-details summary:hover { color: rgb(var(--text-2)); }
.akm-code { position: relative; margin-top: 10px; }
.akm-code pre { margin: 0; padding: 10px 44px 10px 10px; font-size: 11px; line-height: 1.6; color: rgb(var(--text-2)); background: rgb(var(--surface-sunken)); border: 1px solid rgb(var(--border)); overflow-x: auto; }
.akm-code .tok-c { color: rgb(var(--text-muted)); font-style: italic; }
.akm-code .tok-k { color: #ff7b72; }
.akm-code .tok-s { color: #a5d6ff; }
.akm-code .tok-f { color: #d2a8ff; }
.akm-code .tok-b { color: #79c0ff; }
.akm-copy { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 5px; font-family: inherit; font-size: 11px; color: rgb(var(--text-muted)); background: rgb(var(--surface-sunken)); border: 1px solid transparent; cursor: pointer; }
.akm-copy:hover { color: rgb(var(--text)); border-color: rgb(var(--border)); }
.akm-copy svg { width: 14px; height: 14px; }
.akm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.akm-sub { margin: 4px 0 0; font-size: 12px; color: rgb(var(--text-muted)); }
.akm-switch { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 0; font-family: inherit; font-size: 12px; color: rgb(var(--text-2)); background: none; border: none; cursor: pointer; }
.akm-switch:hover { color: rgb(var(--text)); }
.akm-ips { display: flex; flex-direction: column; gap: 8px; }
.akm-ips.hidden { display: none; }
.akm-ips-add { display: flex; gap: 8px; }
.akm-ips-add .akm-secondary { min-height: auto; padding: 0 14px; }
.akm-ips-list { display: flex; flex-wrap: wrap; gap: 6px; }
.akm-ips-list:empty { display: none; }
.akm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12px; color: rgb(var(--text)); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); }
.akm-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.akm-chip button { padding: 0; font-size: 15px; line-height: 1; color: rgb(var(--text-muted)); background: none; border: none; cursor: pointer; }
.akm-chip button:hover { color: rgb(var(--text)); }
.akm-error { padding: 8px 10px; font-size: 12px; color: rgb(var(--neg)); background: rgb(var(--neg) / 0.08); border-left: 2px solid rgb(var(--neg)); }
.akm-error.hidden { display: none; }
.akm-primary, .akm-secondary, .akm-danger { min-height: 40px; padding: 0 16px; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: var(--control-radius); border: 1px solid transparent; cursor: pointer; }
.akm-primary { background: rgb(var(--accent)); color: rgb(var(--bg)); }
.akm-primary:hover:not(:disabled) { background: rgb(var(--accent-hover)); }
.akm-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.akm-secondary { background: transparent; border-color: rgb(var(--border)); color: rgb(var(--text-2)); }
.akm-secondary:hover { color: rgb(var(--text)); border-color: rgb(var(--border-strong)); }
.akm-danger { background: rgb(var(--danger) / 0.12); border-color: rgb(var(--danger) / 0.4); color: rgb(var(--danger)); }
.akm-danger:hover:not(:disabled) { background: rgb(var(--danger) / 0.2); }
.akm-actions { display: flex; gap: 8px; }
.akm-actions button { flex: 1; }
.akm-done-title { margin: 0; font-size: 16px; font-weight: 600; color: rgb(var(--text)); }
.akm-done-sub { margin: 0; font-size: 13px; line-height: 1.5; color: rgb(var(--text-3)); }
.akm-keyid { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: rgb(var(--text-2)); background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); cursor: pointer; }
.akm-keyid:hover { color: rgb(var(--text)); }
.akm-keyid span { font-family: inherit; color: rgb(var(--accent)); }

@media (max-width: 640px) {
    #api-key-modal { align-items: flex-end; padding: 0; }
    .akm-card { width: 100%; max-width: none; padding-bottom: env(safe-area-inset-bottom); }
    .akm-body { max-height: 82dvh; }
}

/* ---- API key list (home card + settings section) ---- */
.apikey-head, .apikey-row { display: grid; grid-template-columns: 1.6fr 1.7fr 1.7fr 0.8fr 1.6fr 1.8fr 0.8fr; gap: 12px; align-items: center; padding: 0 20px; }
.apikey-head { padding-top: 9px; padding-bottom: 9px; font-size: 12px; color: rgb(var(--text-muted)); border-bottom: 1px solid rgb(var(--border)); }
.apikey-row { min-height: 48px; font-size: 13px; color: rgb(var(--text-2)); transition: background 120ms; }
.apikey-row:hover { background: rgb(var(--overlay) / 0.02); }
.apikey-row > div { min-width: 0; }
.apikey-name { color: rgb(var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apikey-dim { color: rgb(var(--text-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apikey-by { margin-top: 2px; font-size: 11px; color: rgb(var(--text-dim)); overflow: hidden; text-overflow: ellipsis; }
.apikey-tier-lambda { color: rgb(var(--alt)); }
.apikey-copy { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; font-family: inherit; font-size: 12px; color: rgb(var(--text-muted)); background: transparent; border: none; cursor: pointer; }
.apikey-copy:hover { color: rgb(var(--text-2)); }
.apikey-copy code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apikey-copy svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.5; }
.apikey-copy:hover svg { opacity: 1; }
.apikey-copied { color: rgb(var(--accent)); }
.apikey-actions { text-align: right; }
.apikey-revoke { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: rgb(var(--text-dim)); background: transparent; border: none; cursor: pointer; transition: color 120ms; }
.apikey-revoke:hover { color: rgb(var(--neg)); }
.apikey-revoke svg { width: 16px; height: 16px; }

@media (max-width: 1100px) {
    .apikey-head, .apikey-row { grid-template-columns: 1.6fr 1.6fr 1.6fr 1.6fr 0.8fr; }
    .apikey-head > div:nth-child(3), .apikey-row > div:nth-child(3),
    .apikey-head > div:nth-child(4), .apikey-row > div:nth-child(4) { display: none; }
}

@media (max-width: 640px) {
    .apikey-head, .apikey-row { grid-template-columns: 1.4fr 1.6fr 0.8fr; padding: 0 14px; }
    .apikey-head > div:nth-child(5), .apikey-row > div:nth-child(5),
    .apikey-head > div:nth-child(6), .apikey-row > div:nth-child(6) { display: none; }
}

.deposit-kinds { display: flex; gap: 6px; padding: 8px 18px 2px; }
.deposit-kind { padding: 4px 10px; font-family: inherit; font-size: 12px; color: rgb(var(--text-3)); background: transparent; border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms; }
.deposit-kind:hover, .deposit-kind.active { color: rgb(var(--text)); }
.deposit-kind.active { border-color: rgb(var(--border-strong)); background: rgb(var(--overlay) / 0.06); }
.cash-body { padding: 30px 24px 26px; text-align: center; }
.cash-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; color: rgb(var(--text-3)); border: 1px solid rgb(var(--border)); background: rgb(var(--overlay) / 0.03); }
.cash-icon svg { width: 24px; height: 24px; }
.cash-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: rgb(var(--text)); }
.cash-sub { margin: 0 0 22px; font-size: 13px; line-height: 1.6; color: rgb(var(--text-3)); }
.cash-cta { width: 100%; min-height: 40px; padding: 0; }
#cash-instructions { overflow-y: auto; min-height: 0; }
.cash-networks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 16px 18px 4px; padding: 2px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); }
.cash-network { min-height: 32px; font-family: inherit; font-size: 13px; font-weight: 500; color: rgb(var(--text-muted)); background: transparent; border: none; cursor: pointer; transition: color 120ms, background 120ms; }
.cash-network:hover, .cash-network.active { color: rgb(var(--text)); }
.cash-network.active { background: rgb(var(--overlay) / 0.06); }
.cash-copy { display: inline-flex; align-items: center; gap: 6px; max-width: 70%; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; color: rgb(var(--text)); background: none; border: none; padding: 0; cursor: pointer; text-align: right; word-break: break-all; }
.cash-copy:hover { color: rgb(var(--text-2)); }
.cash-copy span { font-size: 12px; }
.cash-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 18px 0; padding: 12px 14px; border: 1px solid rgb(var(--border)); background: rgb(var(--overlay) / 0.03); cursor: pointer; }
.cash-toggle.disabled { cursor: default; opacity: 0.5; }
.cash-toggle-title { font-size: 13px; font-weight: 500; color: rgb(var(--text)); }
.cash-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cash-switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: rgb(var(--border-strong)); transition: background 120ms; }
.cash-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--text)); transition: transform 120ms; }
.cash-toggle input:checked + .cash-switch { background: rgb(var(--accent) / 0.6); }
.cash-toggle input:checked + .cash-switch::after { transform: translateX(16px); }
.cash-copy-icon { width: 13px; height: 13px; flex: none; color: rgb(var(--text-muted)); }
.cash-copy:hover .cash-copy-icon { color: rgb(var(--text)); }
.cash-actions { display: flex; justify-content: flex-end; padding: 0 18px 18px; }
#cash-warn { margin-top: 0; }
.wd-methods { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.wd-method { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 14px 16px; text-align: left; font-family: inherit; color: rgb(var(--text)); background: rgb(var(--overlay) / 0.03); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); cursor: pointer; transition: border-color 120ms, background 120ms; }
.wd-method:hover { border-color: rgb(var(--border-strong)); background: rgb(var(--overlay) / 0.06); }
.wd-method-name { font-size: 15px; font-weight: 600; }
.wd-method-sub { font-size: 13px; color: rgb(var(--text-3)); }
.wd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wd-tag { padding: 3px 9px; font-size: 11px; color: rgb(var(--text-2)); background: rgb(var(--overlay) / 0.06); border-radius: 999px; }
.wd-bank-add { padding: 18px; border-top: 1px solid rgb(var(--border)); }
.wd-bank-add-only { border-top: none; }
.wd-bank-form-title { margin: 0 0 8px; font-size: 13px; color: rgb(var(--text-3)); }
#wd-bank-msg { margin-top: 8px; }