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)); }
@media (min-width: 641px) and (max-width: 780px) {
.page-header .page-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.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 { container-type: inline-size; }
@container (max-width: 76px) { .topbar-search-placeholder { display: none; } }
.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); }
@media (max-width: 900px) { .topbar-search-kbd { display: none; } }
.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; } #topbar-convert-btn { display: none; } }
/* 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, .page-header-right .topbar-action[aria-expanded="true"] { 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(--on-accent)); background: rgb(var(--accent-fill)); }
.topbar-auth-primary:hover { color: rgb(var(--on-accent)); background: rgb(var(--accent-fill-hover)); }
.topbar-mode { display: inline-flex; align-items: stretch; flex-shrink: 0; height: 28px; padding: 2px; gap: 2px; background: rgb(var(--surface-2)); border-radius: var(--control-radius); }
.topbar-mode-opt { display: inline-flex; align-items: center; padding: 0 9px; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; color: rgb(var(--text-3)); background: transparent; border: 0; border-radius: var(--control-radius); cursor: pointer; transition: background 120ms, color 120ms; }
.topbar-mode-opt:hover { color: rgb(var(--text)); }
.topbar-mode-opt.is-active { color: rgb(var(--bg)); background: rgb(var(--text)); cursor: default; }
.topbar-mode-opt.is-active.is-paper { color: #000; background: #f59e0b; }
.topbar-mode-opt:disabled { cursor: progress; }
@media (max-width: 640px) { .topbar-mode { display: none; } }
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-convert-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 { gap: 7px; flex-shrink: 0; }
.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%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 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 120ms; }
.kyc-combo-trigger[aria-expanded="true"] { border-color: rgb(var(--border-strong)); }
.kyc-combo-trigger:focus-visible { outline: none; border-color: rgb(var(--accent)); }
.kyc-combo-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kyc-combo-label.is-placeholder { color: rgb(var(--placeholder)); }
.kyc-combo-chevron { width: 14px; height: 14px; flex-shrink: 0; color: rgb(var(--text-muted)); }
.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)); }
.kyc-combo-list { max-height: 260px; overflow-y: auto; list-style: none; margin: 0; padding: 4px 0; }
.kyc-combo-option { position: relative; padding: 8px 36px 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-option.is-unavailable { color: rgb(var(--text-muted)); cursor: default; }
.kyc-combo-option[aria-selected="true"]::after { content: ""; position: absolute; top: 50%; right: 14px; width: 14px; height: 14px; margin-top: -7px; background: rgb(var(--text)); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.kyc-combo-note { float: right; margin-left: 12px; font-size: 12px; }
.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-addr-option { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding-right: 14px; }
.kyc-addr-option + .kyc-addr-option { margin-top: 2px; }
.kyc-addr-main { display: block; font-size: 15px; line-height: 1.35; color: rgb(var(--text)); overflow-wrap: anywhere; }
.kyc-addr-sub { display: block; font-size: 13px; line-height: 1.35; color: rgb(var(--text-muted)); overflow-wrap: anywhere; }
.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-fill)); }
:root[data-theme="light"] .sidebar-alpha { padding: 3px 4px 3px 5px; color: rgb(var(--on-accent)); background: rgb(var(--accent-fill)); }
#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); }
:root[data-theme="light"] .command-palette-backdrop { background: rgba(18,18,18,0.35); }
.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: var(--font-mono); 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)); }
:root[data-theme="light"] .command-palette-method[data-method="GET"] { color: #4338ca; background: rgba(67,56,202,0.08); border-color: #4338ca; }
:root[data-theme="light"] .command-palette-method[data-method="DELETE"] { color: #b91c1c; background: rgba(185,28,28,0.08); border-color: #b91c1c; }
:root[data-theme="light"] .command-palette-method:is([data-method="PUT"], [data-method="PATCH"]) { color: #854d0e; background: rgba(133,77,14,0.08); border-color: #854d0e; }
.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: var(--control-radius); 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; padding: 6px 0; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); box-shadow: 0 16px 40px rgb(0 0 0 / 0.5); z-index: 90; display: flex; flex-direction: column; }
.user-panel.hidden { display: none; }
.user-panel-header { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.user-panel-avatar { width: 40px; height: 40px; border-radius: var(--control-radius); 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 .user-panel-signout, .user-panel .user-panel-signout > svg { color: rgb(var(--neg)); }
.topbar-deposit { position: relative; }
.topbar-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; min-width: 304px; padding: 6px 0; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); box-shadow: 0 16px 40px rgb(0 0 0 / 0.5); }
:root[data-theme="light"] :is(.topbar-menu, .user-panel) { box-shadow: 0 12px 32px rgb(0 0 0 / 0.1); }
.topbar-menu.hidden { display: none; }
.topbar-menu-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; font-family: inherit; text-align: left; text-decoration: none; color: rgb(var(--text)); background: transparent; border: 0; cursor: pointer; transition: background 80ms; }
.topbar-menu-row:hover:not(:disabled) { background: rgb(var(--overlay) / 0.08); }
.topbar-menu-row:disabled { opacity: 0.45; cursor: not-allowed; }
.topbar-menu-row > svg { width: 20px; height: 20px; flex-shrink: 0; color: rgb(var(--text-2)); }
.topbar-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar-menu-title { font-size: 14px; font-weight: 500; line-height: 1.3; }
.topbar-menu-desc { font-size: 12px; line-height: 1.35; color: rgb(var(--text-muted)); }
.topbar-menu-sep { height: 1px; margin: 6px 0; background: rgb(var(--border)); }
.topbar-scrim { position: absolute; inset: 0; z-index: 89; background: rgb(0 0 0 / 0.5); opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.topbar-scrim-page { position: fixed; z-index: 49; }
:root[data-theme="light"] .topbar-scrim { background: rgb(0 0 0 / 0.25); }
body.topbar-menu-open .topbar-scrim { opacity: 1; pointer-events: auto; }
.page-header .pax-menu { animation: pax-dialog-fade 120ms ease-out; }
@media (prefers-reduced-motion: reduce) {
.topbar-scrim { transition: none; }
.page-header .pax-menu { animation: none; }
}
/* 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 {
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));
}
.pax-cta-btn, .cash-cta {
color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.45); background: transparent;
}
.pax-cta-btn:hover, .cash-cta: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;
}
.topbar-action.hidden { display: 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; }
:root[data-theme="light"] #sidebar { background: rgb(var(--bg)); border-right: 1px solid rgb(var(--border)); }
.sidebar-top { padding: 0 9px; }
#sidebar.collapsed .sidebar-top { padding: 0; }
.sidebar-nav { flex: 1; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; 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.04); }
.sidebar-link.active { color: rgb(var(--text)); background: rgb(var(--border)); font-weight: 500; }
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-label { transition: opacity 120ms; white-space: nowrap; }
#sidebar.collapsed .sidebar-label { opacity: 0; pointer-events: none; width: 0; }
#sidebar.collapsed .sidebar-link { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar-bottom { padding: 8px 8px 12px; }
.sidebar-collapse-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; font-size: 13px; color: rgb(var(--text-muted)); background: none; border: none; cursor: pointer; transition: color 120ms, background 120ms; }
.sidebar-collapse-btn:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.04); }
.sidebar-collapse-btn svg { width: 16px; height: 16px; 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: 10px; width: 100%; padding: 9px 12px; margin-bottom: 2px; font-size: 13px; color: rgb(var(--text-muted)); background: none; border: none; cursor: pointer; font-family: inherit; transition: color 120ms, background 120ms; }
.sidebar-theme-btn:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.04); }
.sidebar-theme-icon { width: 16px; height: 16px; 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);
}
body:has(#kyc-form, #kyb-form) #mobile-nav { display: none; }
body:has(#kyc-form, #kyb-form) #main-content { 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; }
/* Force the sidebar into its icon rail on narrow viewports so it stops eating content width. */
@media (max-width: 860px) {
#sidebar { width: 60px; }
#sidebar .sidebar-alpha,
#sidebar .sidebar-label, #sidebar .sidebar-collapse-btn,
#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-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, #quick-trade-modal, #convert-modal, #pax-confirm, #pep-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, #quick-trade-modal.hidden, #convert-modal.hidden, #pax-confirm.hidden, #pep-modal.hidden { display: none; }
#pax-confirm .deposit-modal-card { width: 400px; }
.pax-confirm-body { margin: 0; padding: 16px 18px 0; font-size: 13px; line-height: 1.55; color: rgb(var(--text-3)); }
.pax-confirm-actions { padding: 18px; }
.deposit-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(2px); }
:root[data-theme="light"] .deposit-modal-backdrop { background: rgba(18,18,18,0.35); }
.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; }
.pax-dialog:focus { outline: none; }
.pax-dialog > * { animation: pax-dialog-fade 150ms ease-out; }
.pax-dialog > :last-child { animation-name: pax-dialog-rise; }
@keyframes pax-dialog-fade { from { opacity: 0; } }
@keyframes pax-dialog-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pax-dialog > *, .pax-dialog > :last-child { animation: none; } }
.pax-dropdown-btn { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 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 0.15s, border-color 0.15s; }
.pax-dropdown-btn:hover { color: rgb(var(--text)); border-color: rgb(var(--border-strong)); }
.pax-dropdown-menu { position: fixed; z-index: 50; min-width: 120px; background: rgb(var(--surface-4)); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); overflow: hidden; }
.pax-dropdown-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 12px; font-family: inherit; font-size: 12px; text-align: left; color: rgb(var(--text-3)); background: transparent; border: none; cursor: pointer; transition: color 0.1s, background 0.1s; }
.pax-dropdown-item:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.05); }
[role="menuitemradio"] > :first-child { flex: 1; min-width: 0; }
[role="menuitemradio"]::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-left: auto; background: rgb(var(--text)); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; visibility: hidden; }
[role="menuitemradio"][aria-checked="true"]::after { visibility: visible; }
[role="menuitemradio"]:disabled::after { display: none; }
.pax-menu :is(button, a[href]):focus-visible { outline-offset: -2px; background: rgb(var(--overlay) / 0.08); }
.cv-asset { display: flex; align-items: center; gap: 8px; }
.cv-asset .pax-dropdown-btn { min-height: 28px; }
.qt-head { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.qt-head-name { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.qt-head-sym { font-size: 15px; font-weight: 600; color: rgb(var(--text)); }
.qt-head-sub { font-size: 11px; color: rgb(var(--text-muted)); }
.qt-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 16px 18px 0; padding: 2px; background: rgb(var(--surface-2)); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); }
.qt-side { 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; }
.qt-side:hover { color: rgb(var(--text)); }
.qt-side.qt-side-active[data-qt-side="buy"] { color: rgb(var(--pos)); background: rgb(var(--pos) / 0.12); }
.qt-side.qt-side-active[data-qt-side="sell"] { color: rgb(var(--neg)); background: rgb(var(--neg) / 0.12); }
:root[data-theme="light"] .qt-side.qt-side-active[data-qt-side="buy"] { color: rgb(22 101 52); }
.qt-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.qt-foot { display: flex; flex-direction: column; gap: 8px; }
.qt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qt-result { padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.qt-body.hidden, .qt-result.hidden { display: none; }
.qt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qt-avail-line { font-size: 11px; color: rgb(var(--text-muted)); }
.qt-label { font-size: 11px; color: rgb(var(--text-muted)); text-transform: uppercase; letter-spacing: 0.05em; }
.qt-pills { display: flex; gap: 2px; }
.qt-input-wrap { display: flex; align-items: center; min-height: 48px; padding: 0; }
.qt-input-wrap input { flex: 1; min-width: 0; align-self: stretch; padding: 0 12px; background: transparent; border: none; outline: none; color: rgb(var(--text)); font-size: 18px; font-family: inherit; font-variant-numeric: tabular-nums; }
.qt-max { padding: 0 12px; font-size: 11px; font-family: inherit; color: rgb(var(--text-muted)); background: transparent; border: none; cursor: pointer; }
.qt-max:hover { color: rgb(var(--text)); }
.qt-input-unit { padding: 0 12px; font-size: 12px; color: rgb(var(--text-muted)); }
.qt-line { font-size: 12px; color: rgb(var(--text-3)); font-variant-numeric: tabular-nums; }
.qt-msg { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 12px; color: rgb(var(--neg)); background: rgb(var(--neg) / 0.08); border-left: 2px solid rgb(var(--neg)); }
.qt-msg.hidden { display: none; }
.qt-msg-action { padding: 2px 8px; font-size: 11px; font-family: inherit; color: rgb(var(--neg)); background: transparent; border: 1px solid rgb(var(--neg)); cursor: pointer; white-space: nowrap; }
.qt-msg-action:hover { background: rgb(var(--neg) / 0.12); }
.qt-confirm { width: 100%; }
.qt-result-title { margin: 0; font-size: 18px; font-weight: 600; color: rgb(var(--text)); }
.qt-result-sub { margin: 0; font-size: 13px; color: rgb(var(--text-3)); }
.qt-result-rebate { color: rgb(var(--pos)); }
.qt-actions { display: flex; gap: 8px; }
.qt-btn { flex: 1; min-height: 38px; padding: 0; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; background: rgb(var(--overlay) / 0.04); border: 1px solid rgb(var(--border)); border-radius: var(--control-radius); color: rgb(var(--text-2)); transition: background 120ms, color 120ms, border-color 120ms; }
.qt-btn:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.08); border-color: rgb(var(--border-strong)); }
.deposit-search-wrap { display: flex; align-items: center; gap: 10px; margin: 14px 18px 4px; }
.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; align-self: stretch; padding: 0; background: transparent; border: none; color: rgb(var(--text)); font-size: 14px; font-family: inherit; outline: none; }
.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-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: var(--font-mono); 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-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) {
.pax-dropdown-btn { min-height: 36px; }
.kyc-combo-trigger { font-size: 16px; }
/* 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; }
.topbar-menu-row { min-height: 44px; }
.topbar-search-kbd { display: none; }
.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; }
.kyc-combo-list { max-height: 280px; }
.kyc-combo-option { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
}
/* ---- 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, .topbar-deposit { display: none; }
.page-header-right { position: relative; }
.page-header-right > .topbar-bal, .topbar-deposit { position: static; }
.page-header .topbar-menu { width: calc(100vw - 24px); min-width: 0; max-width: 320px; }
/* Centred dialogs become bottom sheets: reachable thumb, no keyboard-shrunk card. */
#deposit-modal, #withdraw-modal, #quick-trade-modal, #convert-modal, #command-palette, #pax-confirm, #pep-modal {
align-items: flex-end; justify-content: stretch; padding: 0;
}
.qt-max { min-height: 36px; }
.deposit-modal-card, .command-palette-modal, #pax-confirm .deposit-modal-card {
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; }
}
@media (min-width: 375px) and (max-width: 640px) {
.topbar-deposit:has(#topbar-deposit-btn:enabled) { display: block; }
.page-header-right #topbar-deposit-btn { display: inline-flex; padding: 0 8px; font-size: 12px; }
#topbar-deposit-btn svg { display: none; }
}
/* ---- 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: 9vh 16px 5vh; }
#api-key-modal.hidden { display: none; }
.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%; }
.akm-field textarea { padding: 9px 12px; font-family: var(--font-mono); font-size: 12px; resize: vertical; }
.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,"); 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; }
:root[data-theme="light"] .akm-code .tok-k { color: #cf222e; }
:root[data-theme="light"] .akm-code .tok-s { color: #0a3069; }
:root[data-theme="light"] .akm-code .tok-f { color: #8250df; }
:root[data-theme="light"] .akm-code .tok-b { color: #0550ae; }
.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: var(--font-mono); 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-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-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: var(--font-mono); 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: var(--font-mono); 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.hidden { display: none; }
.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); }
:root[data-theme="light"] .cash-toggle input:checked + .cash-switch { background: rgb(var(--accent-fill)); }
.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; }
.sx-launcher { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 24px; margin: -4px 0 -4px auto; padding: 0 8px; font: inherit; font-size: 12px; font-weight: 500; color: rgb(var(--text-2)); background: transparent; border: 1px solid rgb(var(--border)); cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; }
.sx-launcher:hover, .sx-launcher.open { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.06); border-color: rgb(var(--border-strong)); }
.sx-launcher.hidden { display: none; }
.sx-launcher svg { width: 14px; height: 14px; }
.sx-badge { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; color: rgb(var(--on-accent)); background: rgb(var(--accent-fill)); }
.sx-badge.hidden, .sx-nav-badge.hidden { display: none; }
.sx-nav-badge { margin-left: auto; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 18px; color: rgb(var(--on-accent)); background: rgb(var(--accent-fill)); }
.sidebar-link:has(.sx-nav-badge) { position: relative; }
#sidebar.collapsed .sx-nav-badge { position: absolute; top: calc(50% - 16px); left: calc(50% + 3px); min-width: 16px; margin: 0; padding: 0 4px; font-size: 10px; line-height: 16px; text-align: center; }
@media (max-width: 860px) {
#sidebar .sx-nav-badge { position: absolute; top: calc(50% - 16px); left: calc(50% + 3px); min-width: 16px; margin: 0; padding: 0 4px; font-size: 10px; line-height: 16px; text-align: center; }
}
#user-trigger .sx-nav-badge { display: none; }
@media (max-width: 640px) {
#user-trigger { position: relative; }
#user-trigger .sx-nav-badge:not(.hidden) { display: block; position: absolute; top: -6px; right: -6px; min-width: 16px; margin: 0; padding: 0 4px; font-size: 10px; line-height: 16px; text-align: center; }
}
.sx-widget { --sx-pane: var(--surface-elevated); --sx-gutter: 16px; position: absolute; right: 24px; bottom: calc(100% + 8px); z-index: 96; display: flex; flex-direction: column; width: 380px; height: min(600px, calc(100vh - 112px)); font-size: 1rem; line-height: 1.5; color: rgb(var(--text)); background: rgb(var(--sx-pane)); border: 1px solid rgb(var(--border-strong)); box-shadow: 0 24px 64px rgb(0 0 0 / 0.6); overflow: hidden; animation: sx-in 140ms ease-out; }
.sx-widget.hidden { display: none; }
:root[data-theme="light"] .sx-widget { box-shadow: 0 16px 48px rgb(0 0 0 / 0.14); }
@keyframes sx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#page-content > .sx-page { --sx-pane: var(--bg); --sx-gutter: max(24px, calc((100% - 760px) / 2)); display: grid; grid-template-columns: 360px minmax(0, 1fr); box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; }
.sx-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid rgb(var(--border)); }
.sx-side-head { display: flex; gap: 8px; flex-shrink: 0; padding: 16px 16px 0; }
.sx-find { position: relative; display: flex; flex: 1; min-width: 0; }
.sx-find svg { position: absolute; top: 50%; left: 9px; width: 14px; height: 14px; color: rgb(var(--text-muted)); transform: translateY(-50%); pointer-events: none; }
.sx-search { flex: 1; min-width: 0; height: 32px; min-height: 32px; padding: 0 8px 0 29px; font-size: 13px; }
.sx-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-right: -6px; background: rgb(var(--text-muted)); cursor: pointer; -webkit-mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat; }
.sx-search::-webkit-search-cancel-button:hover { background: rgb(var(--text)); }
.sx-new-btn { flex-shrink: 0; height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.sx-list { flex: 1; min-height: 0; padding-bottom: 16px; overflow-y: auto; overscroll-behavior: contain; }
.sx-group { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 16px 16px 8px; font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--text-muted)); }
.sx-group span { font-variant-numeric: tabular-nums; }
.sx-row { position: relative; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; width: 100%; padding: 10px 16px; font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; transition: background 120ms; }
.sx-row + .sx-row { margin-top: 2px; }
.sx-row:hover { background: rgb(var(--overlay) / 0.04); }
.sx-row[aria-current="true"] { background: rgb(var(--border)); }
.sx-row[aria-current="true"]::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgb(var(--text)); }
.sx-row:focus-visible { outline-offset: -2px; }
.sx-row-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.sx-row-title { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; color: rgb(var(--text)); text-overflow: ellipsis; white-space: nowrap; }
.sx-row-time { flex-shrink: 0; font-size: 12px; line-height: 20px; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-row-preview { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; line-height: 18px; color: rgb(var(--text-muted)); text-overflow: ellipsis; white-space: nowrap; }
.sx-row-topic { margin-top: 2px; overflow: hidden; font-size: 12px; line-height: 18px; color: rgb(var(--text-muted)); text-overflow: ellipsis; white-space: nowrap; }
.sx-unread .sx-row-title { font-weight: 600; }
.sx-pill-new .status-pill { color: rgb(var(--accent)); background: rgb(var(--accent) / 0.12); }
.sx-row .sx-pill { flex-shrink: 0; }
.sx-row .status-pill { height: 18px; padding: 0 6px; font-size: 11px; }
.sx-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: rgb(var(--sx-pane)); }
.sx-head { display: flex; align-items: flex-start; gap: 4px; flex-shrink: 0; padding: 20px var(--sx-gutter) 16px; border-bottom: 1px solid rgb(var(--border)); }
.sx-head-text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sx-title { display: -webkit-box; margin: 0; overflow: hidden; font-size: 18px; font-weight: 600; line-height: 1.35; color: rgb(var(--text)); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sx-sub { margin: 0; font-size: 13px; color: rgb(var(--text-muted)); }
.sx-meta { overflow: clip visible; }
.sx-meta-in { display: flex; flex-wrap: wrap; align-items: center; margin-left: -17px; font-size: 12.5px; line-height: 22px; color: rgb(var(--text-muted)); }
.sx-meta-in > * { display: inline-flex; align-items: center; white-space: nowrap; }
.sx-meta-in > *::before { content: '·'; content: '·' / ''; width: 17px; text-align: center; color: rgb(var(--text-dim)); }
.sx-ref { gap: 2px; font-variant-numeric: tabular-nums; }
.sx-ref::before { margin-right: -2px; }
.sx-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; padding: 0; color: rgb(var(--text-muted)); background: none; border: 0; cursor: pointer; transition: color 120ms, background 120ms; }
.sx-icon-btn:hover { color: rgb(var(--text)); background: rgb(var(--overlay) / 0.06); }
.sx-icon-btn svg { width: 16px; height: 16px; }
.sx-copy { width: 22px; height: 22px; }
.sx-copy svg { width: 13px; height: 13px; }
.sx-back { display: none; }
.sx-thread { flex: 1; min-height: 0; padding: 0 var(--sx-gutter) 32px; overflow-y: auto; overscroll-behavior: contain; }
.sx-thread:focus-visible { outline-offset: -2px; }
.sx-day { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12px; line-height: 16px; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; }
.sx-day::before, .sx-day::after { content: ''; flex: 1; height: 1px; background: rgb(var(--border-strong) / 0.5); }
.sx-msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; margin-top: 6px; }
.sx-msg.sx-first { margin-top: 20px; }
.sx-day + .sx-msg { margin-top: 0; }
.sx-msg > * { grid-column: 2; }
.sx-msg > .sx-tile { grid-column: 1; grid-row: 1 / 5; }
.sx-msg-head { display: flex; align-items: baseline; gap: 8px; min-height: 20px; margin-bottom: 2px; }
.sx-from { font-size: 13px; font-weight: 600; line-height: 20px; color: rgb(var(--text)); }
.sx-time { font-size: 12px; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; }
.sx-text { max-width: 72ch; font-size: 14px; line-height: 1.6; color: rgb(var(--text-2)); white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-text a, .sx-fine a, .sx-help a, .sx-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sx-status { margin-top: 4px; font-size: 12px; color: rgb(var(--text-muted)); }
.sx-status.sx-failed { color: rgb(var(--danger)); }
.sx-retry { padding: 0; font: inherit; color: inherit; background: none; border: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sx-system { margin: 20px 0 0 40px; font-size: 13px; color: rgb(var(--text-muted)); }
.sx-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: 28px; height: 28px; font-size: 12px; font-weight: 600; line-height: 1; color: rgb(var(--text-2)); background: rgb(var(--overlay) / 0.08); border: 1px solid rgb(var(--border)); }
.sx-tile-pax { color: rgb(var(--text)); background: rgb(var(--surface-elevated)); }
.sx-tile svg { width: 16px; height: auto; }
.sx-composer { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; padding: 12px var(--sx-gutter) 16px; border-top: 1px solid rgb(var(--border)); }
.sx-composer:not(.sx-composer-new) { container: sx-reply / inline-size; }
.sx-composer-msgs { display: flex; flex-direction: column; gap: 6px; }
.sx-composer-msgs:empty { display: none; }
.sx-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 8px 12px; cursor: text; }
.sx-input { display: block; box-sizing: border-box; width: 100%; min-height: 44px; max-height: 176px; padding: 0 4px 0 0; font: inherit; font-size: 14px; line-height: 22px; color: rgb(var(--text)); background: transparent; border: 0; resize: none; overflow-y: auto; }
.sx-input:focus { outline: none; }
.sx-composer-new .sx-input { min-height: 110px; }
.sx-box-bar { display: flex; align-items: center; gap: 12px; cursor: default; }
.sx-count-slot { flex: 1; min-width: 0; }
.sx-count { font-size: 11.5px; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; }
.sx-count.sx-max { color: rgb(var(--danger)); }
.sx-kbd { display: none; font-size: 12px; color: rgb(var(--text-muted)); white-space: nowrap; }
.sx-send { min-height: 32px; padding: 0 14px; font-size: 13px; }
.sx-note { margin: 0; font-size: 12.5px; color: rgb(var(--text-3)); }
.sx-error { margin: 0; font-size: 12.5px; color: rgb(var(--danger)); }
.sx-fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgb(var(--text-muted)); }
.sx-new { container: sx-new / inline-size; flex: 1; min-height: 0; padding: 20px var(--sx-gutter) 24px; overflow-y: auto; overscroll-behavior: contain; }
.sx-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 500; color: rgb(var(--text-2)); }
.sx-topic { margin-bottom: 20px; }
.sx-new .sx-composer.sx-composer-new { padding: 0; border-top: 0; }
.sx-chips { display: flex; gap: 6px; }
.sx-chip { flex-shrink: 0; height: 32px; padding: 0 10px; font: inherit; font-size: 13px; line-height: 1; white-space: nowrap; color: rgb(var(--text-2)); background: transparent; border: 1px solid rgb(var(--border)); cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms; }
.sx-chip:hover { color: rgb(var(--text)); border-color: rgb(var(--border-strong)); background: rgb(var(--overlay) / 0.04); }
.sx-chip[aria-pressed="true"] { color: rgb(var(--text)); background: rgb(var(--border)); border-color: rgb(var(--border-strong)); }
.sx-pick { display: none; }
.sx-pick .pax-dropdown-btn { justify-content: space-between; width: 100%; min-height: 40px; padding: 0 12px; font-size: 14px; color: rgb(var(--text)); background: rgb(var(--surface-elevated)); }
.sx-pick .pax-dropdown-btn svg { width: 12px; height: 12px; color: rgb(var(--text-muted)); }
.sx-pick .pax-dropdown-item { min-height: 32px; font-size: 13px; }
.sx-pick .pax-dropdown-item[aria-checked="true"] { color: rgb(var(--text)); background: rgb(var(--border)); }
.sx-help { margin: 10px 0 0; font-size: 12.5px; color: rgb(var(--text-3)); }
.sx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 12px; color: rgb(var(--text-muted)); }
.sx-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; padding: 24px; text-align: center; }
.sx-blank-title { margin: 0; font-size: 15px; font-weight: 600; color: rgb(var(--text)); }
.sx-blank-sub { max-width: 340px; margin: 6px 0 18px; font-size: 13px; color: rgb(var(--text-muted)); }
.sx-bar { display: flex; align-items: center; gap: 2px; flex-shrink: 0; min-height: 52px; padding: 0 8px 0 16px; border-bottom: 1px solid rgb(var(--border)); }
.sx-bar-name { flex: 1; margin: 0; font-size: 15px; font-weight: 600; color: rgb(var(--text)); }
.sx-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 8px; overflow-y: auto; overscroll-behavior: contain; }
.sx-dock { flex-shrink: 0; padding: 12px 16px; border-top: 1px solid rgb(var(--border)); }
.sx-cta { width: 100%; }
.sx-widget .sx-row-topic, .sx-widget .sx-opened { display: none; }
.sx-widget .pax-input, .sx-widget .sx-pick .pax-dropdown-btn { background: rgb(var(--surface)); }
.sx-widget .sx-head { padding: 10px 8px 12px; }
.sx-widget .sx-head-text { gap: 4px; padding-top: 5px; }
.sx-widget .sx-title { display: block; font-size: 15px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.sx-widget .sx-text { font-size: 13px; }
.sx-widget .sx-composer { padding: 10px 16px 12px; }
.sx-widget .sx-new { padding-top: 16px; }
@container sx-new (max-width: 640px) {
.sx-chips { display: none; }
.sx-pick { display: block; }
}
@media (pointer: fine) {
.sx-kbd { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
.sx-widget { animation: none; }
}
@container sx-reply (max-width: 480px) {
.sx-box { flex-direction: row; align-items: flex-end; gap: 8px; padding: 4px 4px 4px 12px; }
.sx-input { flex: 1; min-width: 0; min-height: 0; padding: 5px 0; }
.sx-box-bar { flex: none; }
.sx-count-slot:empty, .sx-kbd { display: none; }
}
@media (max-width: 1099px) {
#page-content > .sx-page { grid-template-columns: minmax(0, 1fr); }
.sx-page[data-view="list"] .sx-main, .sx-page:not([data-view="list"]) .sx-side { display: none; }
.sx-side { border-right: 0; }
.sx-back { display: inline-flex; margin: -4px 4px -4px -8px; }
}
@media (max-width: 640px) {
.sx-widget { position: fixed; top: var(--sx-vt, 0px); right: 0; bottom: auto; z-index: 94; box-sizing: border-box; width: 100vw; height: var(--sx-vh, 100dvh); padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); border: 0; animation: none; }
.sx-dock { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.sx-launcher { justify-content: center; width: 36px; height: 36px; margin: -10px -9px -10px auto; padding: 0; border: 0; }
.sx-launcher-label { display: none; }
.sx-launcher svg { width: 18px; height: 18px; }
.sx-badge { position: absolute; top: 2px; right: 2px; }
#page-content > .sx-page { --sx-gutter: 16px; }
.sx-page:not([data-view="list"]) .sx-main { position: fixed; top: var(--sx-vt, 0px); left: 0; z-index: 90; box-sizing: border-box; width: 100vw; height: var(--sx-vh, 100dvh); padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.sx-page .sx-head { padding: 8px 16px 12px 4px; }
.sx-page .sx-head-text { padding-top: 10px; }
.sx-back { margin: 0; }
.sx-side-head { padding: 12px 16px 0; }
.sx-search, .sx-new-btn { height: 44px; min-height: 44px; }
.sx-search { padding-left: 38px; font-size: 16px; }
.sx-find svg { left: 13px; width: 16px; height: 16px; }
.sx-new-btn { padding: 0 16px; font-size: 15px; }
.sx-row { padding: 12px 16px; }
.sx-row-topic, .sx-opened { display: none; }
.sx-icon-btn { width: 44px; height: 44px; }
.sx-copy { width: 44px; height: 44px; margin: -11px; }
.sx-widget .sx-head { padding: 6px 4px 12px; }
.sx-widget .sx-head-text { padding-top: 11px; }
.sx-input { font-size: 16px; line-height: 24px; min-height: 48px; max-height: 120px; }
.sx-composer-new .sx-input { min-height: 120px; }
.sx-send { min-height: 44px; padding: 0 18px; }
.sx-composer, .sx-widget .sx-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.sx-retry { display: inline-flex; align-items: center; min-height: 44px; margin: -13px -8px; padding: 0 8px; }
.sx-new { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.sx-chip, .sx-pick .pax-dropdown-btn, .sx-pick .pax-dropdown-item { min-height: 44px; }
.sx-pick .pax-dropdown-btn { font-size: 16px; }
.sx-foot a { display: inline-flex; align-items: center; min-height: 44px; margin: 0 -8px; padding: 0 8px; }
.sx-cta, .sx-page .pax-cta-btn, .sx-widget .pax-cta-btn { min-height: 44px; }
@container sx-reply (max-width: 480px) {
.sx-input { min-height: 0; padding: 10px 0; }
}
}
@media (max-width: 640px) {
.topbar-search { flex: none; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; }
.topbar-search-placeholder, .topbar-search-kbd { display: none; }
.topbar-search-icon { width: 18px; height: 18px; }
#page-content { display: flex; flex-direction: column; }
#page-content > * { flex-shrink: 0; width: 100%; }
#page-content > .sx-page { flex-shrink: 1; }
#page-content > .provider-footer { margin-top: auto; border-top: 1px solid rgb(var(--border)); }
}