/* ================================================================
 * Direction C — "Editorial / Private Banking" token overrides
 * Loaded after eyeiq.css and style.css; overrides anything below.
 * ================================================================ */

/* Fraunces is loaded in base.html via <link> with display=swap — no blocking @import needed here. */

/* ---- 1. Root token overrides ----------------------------------- */
:root {
  /* Canvas — warm off-white, not pure white */
  --color-bg:           #FBFAF7;
  --bg-canvas:          #FBFAF7;
  --paper-100:          #FBFAF7;
  --paper-50:           #FBFAF7;
  --bg:                 #FBFAF7;

  /* Surface — only deposit-address card */
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #FFFFFF;
  --paper-0:            #FFFFFF;

  /* Ink scale */
  --color-text:         #0A0E15;
  --color-text-muted:   #4A5362;
  --color-text-subtle:  #6B7788;
  --color-text-disabled:#94A0B1;
  --ink-900:            #0A0E15;
  --ink-500:            #4A5362;
  --ink-400:            #6B7788;
  --ink-300:            #94A0B1;
  --fg-0:               #0A0E15;
  --fg-1:               #1B222D;
  --fg-2:               #4A5362;
  --fg-3:               #6B7788;
  --fg-4:               #94A0B1;

  /* Dividers */
  --color-divider:        rgba(10,14,21,.08);
  --color-divider-strong: rgba(10,14,21,.16);
  --border-0:             rgba(10,14,21,.08);
  --border-1:             rgba(10,14,21,.16);

  /* Brand — CTA red only */
  --color-brand:         #E30613;
  --color-brand-hover:   #C10510;
  --accent-bg:           #E30613;
  --accent-fg:           #E30613;

  /* Typography */
  --font-sans:   'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:   ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Radii — SHARP; only pills, OTP, deposit card get curves */
  --radius-xs:    0px;
  --radius-sm:    0px;
  --radius-md:    0px;
  --radius-lg:    0px;
  --radius-xl:    0px;
  --radius-pill:  999px;
  --radius-otp:   12px;
  --radius-deposit: 4px;

  /* Shadows — none inside screens */
  --shadow-card:  none;
  --shadow-pop:   none;
  --shadow-focus: 0 0 0 2px rgba(227,6,19,.20);

  /* Spacing */
  --page-px:    28px;
  --space-page: 28px;
}

/* ---- 2. Base reset for Direction C ----------------------------- */
html, body {
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01' 1;
}

/* ---- 3. Mobile-first app shell --------------------------------- */
.dc-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--color-bg);
}

.dc-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-px);
  height: 56px;
}

.dc-topbar__title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.dc-topbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dc-main {
  flex: 1;
  padding: 0 var(--page-px) calc(88px + env(safe-area-inset-bottom));
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Bottom tab bar */
.dc-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-bg);
  border-top: 1px solid var(--color-divider);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.dc-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  text-decoration: none;
  color: var(--color-text-subtle);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color 120ms;
  position: relative;
}

.dc-tab svg {
  stroke: currentColor;
}

.dc-tab--active {
  color: var(--color-brand);
}

.dc-tab--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--color-brand);
  border-radius: 0 0 2px 2px;
}

/* 2FA banner (simplified for mobile) */
.dc-mfa-banner {
  background: #FFF3E0;
  border-bottom: 1px solid rgba(240,198,116,.5);
  padding: 10px var(--page-px);
  font-size: 13px;
  color: #7A4A00;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dc-mfa-banner a {
  background: #7A4A00;
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

/* ---- 4. Section / list pattern (hairline, not boxed cards) ----- */

/* Override card — flat hairline sections instead of elevated boxes */
.card {
  background: transparent;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--color-divider);
  box-shadow: none;
  padding: 22px 0;
}
.card + .card {
  border-top: 1px solid var(--color-divider);
}
.card--flush   { padding: 0; }
.card--compact { padding: 12px 0; }

.card__header {
  padding: 0 0 12px;
}

.panel-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 20px;
  letter-spacing: -.02em;
}

.page-title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -.02em;
  margin: 4px 0 18px;
}

/* Section eyebrow labels — Fraunces 11px / 0.18em per spec */
.dc-eyebrow {
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--color-text-subtle);
  margin: 0 0 8px;
}

/* ---- 5. Buttons — keep pills ----------------------------------- */
.btn, .btn-primary, .btn-sfc, .btn-outline, .btn-sfc-secondary, .btn-secondary {
  border-radius: var(--radius-pill) !important;
}

/* Primary pill */
.btn--primary, .btn-primary, .btn-sfc {
  background: var(--color-brand);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 14px 28px;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
}
.btn--primary:hover, .btn-primary:hover, .btn-sfc:hover {
  background: var(--color-brand-hover);
}

/* Outline / secondary */
.btn--outline, .btn-outline, .btn-sfc-secondary, .btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--outline:hover, .btn-outline:hover, .btn-sfc-secondary:hover, .btn-secondary:hover {
  border-color: var(--color-text);
}

/* Block button */
.btn--block { width: 100%; }

/* Danger */
.btn-danger {
  background: transparent;
  color: var(--color-danger, #E30613);
  border: 1px solid var(--color-danger, #E30613);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-weight: 500;
  cursor: pointer;
}

/* ---- 6. Form fields — underline style -------------------------- */
.field-group {
  position: relative;
  margin-bottom: 22px;
}

.field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-brand);
  margin-bottom: 6px;
  display: block;
}

.field-input, select.field-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-divider-strong);
  border-radius: 0;
  background: transparent;
  padding: 8px 0 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.field-input:focus, select.field-input:focus {
  border-bottom-color: var(--color-brand);
  border-bottom-width: 1.5px;
}

/* ---- 7. OTP boxes — 12px radius -------------------------------- */
.otp-row   { display: flex; gap: 8px; justify-content: center; margin: 28px 0; }
.otp-box {
  width: 48px;
  height: 56px;
  border: 1.5px solid var(--color-divider-strong);
  border-radius: var(--radius-otp);
  background: var(--color-surface);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  font-feature-settings: 'tnum' 1;
  text-align: center;
  color: var(--color-text);
  outline: none;
  transition: border 120ms;
}
.otp-box:focus { border-color: var(--color-brand); }

/* ---- 8. Numeric / amount typography — Fraunces serif ----------- */
.wc-big, .wc-amount .wc-big,
.stat__value,
.exchange__amount,
.xc-amount,
.dc-amount,
.amount-serif,
.tnum.serif {
  font-family: var(--font-serif);
  font-feature-settings: 'tnum' 1;
  font-weight: 500;
}

/* ---- 9. Wallet cards — flat list rows -------------------------- */
.wallets-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wallet-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
}
.wallet-card:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.wc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.wc-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.wc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.wc-ccy {
  font-size: 12px;
  color: var(--color-text-subtle);
  font-weight: 400;
}

.wc-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 10px 48px;
}

.wc-big {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1;
  color: var(--color-text);
}

.wc-ccy-sub {
  font-size: 13px;
  color: var(--color-text-subtle);
  font-family: var(--font-sans);
}

.wc-actions {
  display: flex;
  gap: 8px;
  margin-left: 48px;
  flex-wrap: wrap;
}

.wc-gas-foot {
  margin-left: 48px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.wc-gas-foot-low { color: #D98F1A; }

.wc-gas-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.wc-gas-help {
  margin-top: 4px;
  line-height: 1.4;
}

/* Toolbar filter pills */
.wallets-toolbar .btn-sfc,
.wallets-toolbar .btn-sfc-secondary {
  padding: 6px 14px;
  font-size: 13px;
}

/* ---- 10. Wallets table ---------------------------------------- */
.wallets-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--color-divider);
}

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

.wallets-table th, .wallets-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}

.wallets-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.wt-icon { width: 28px; height: 28px; border-radius: 50%; }
.wt-asset { font-weight: 600; font-size: 14px; }
.wt-asset-sub { font-size: 11px; color: var(--color-text-subtle); }
.wt-net { font-size: 12px; color: var(--color-text-subtle); }
.wt-gas-low { color: #D98F1A; }
.wt-gas-need { color: #D98F1A; font-size: 11px; }

/* ---- 11. Deposit modal — 4px radius card ----------------------- */
.wallet-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10,14,21,.40);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.wallet-modal {
  background: var(--color-surface);
  border-radius: var(--radius-deposit) var(--radius-deposit) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
}

.wallet-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px var(--page-px) 16px;
  border-bottom: 1px solid var(--color-divider);
}

.wm-icon { width: 36px; height: 36px; border-radius: 50%; }

.wm-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
}

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

.wm-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-subtle);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet-modal-body {
  padding: 16px var(--page-px) 32px;
}

.wm-field {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'k b' 'v b';
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}

.wm-field-k {
  grid-area: k;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-subtle);
}

.wm-field-v {
  grid-area: v;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
  color: var(--color-text);
}

.wm-field > button {
  grid-area: b;
  grid-row: 1 / 3;
}

.wm-field-ref .wm-field-v {
  font-weight: 700;
  color: var(--color-text);
}

.wm-hint {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

/* Pay tabs */
.pay-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 16px;
}

.pay-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-subtle);
  cursor: pointer;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pay-tab.active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.pay-tab-info {
  color: var(--color-text-subtle);
  font-size: 14px;
}

/* ---- 12. Exchange widget -------------------------------------- */
.xc-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid var(--color-divider) !important;
  background: transparent !important;
}

.xc-amount {
  font-family: var(--font-serif) !important;
  font-feature-settings: 'tnum' 1 !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  background: transparent !important;
}

.xc-modal {
  border-radius: var(--radius-deposit) !important;
}

/* ---- 13. Orders list ------------------------------------------ */
.orders-list, .order-rows {
  border-top: 1px solid var(--color-divider);
}

.order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
}

/* Status pills keep 999px radius */
.b, .badge {
  border-radius: var(--radius-pill) !important;
}

/* ---- 14. Profile layout -------------------------------------- */
.profile-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile-side {
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 0;
}

.profile-side-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
}

.profile-tabs {
  display: flex;
  overflow-x: auto;
  gap: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.profile-tabs button {
  flex-shrink: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  white-space: nowrap;
}

.profile-tabs button.active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.profile-tabs .pt-ico { display: none; }

.profile-panel {
  padding-top: 0;
}

.profile-panel .card {
  border-top: 1px solid var(--color-divider);
  padding: 22px 0;
}

/* ---- 15. Auth screens — full-screen mobile -------------------- */
.dc-auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  padding: 0;
}

.dc-auth__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px var(--page-px) 40px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.dc-auth__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-brand);
  margin: 0 0 12px;
}

.dc-auth__heading {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 32px;
}

.dc-auth__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--color-text-subtle);
  margin: 0 0 32px;
  line-height: 1.5;
}

.dc-auth__action {
  width: 100%;
  background: var(--color-brand);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 28px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 120ms;
}

.dc-auth__action:hover { background: var(--color-brand-hover); }
.dc-auth__action:disabled { opacity: .5; cursor: not-allowed; }

.dc-auth__links {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  font-size: 14px;
}

.dc-auth__links a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.dc-auth__links a:hover { color: var(--color-text); }

.dc-auth__error {
  background: var(--color-danger-bg, #FFEAEB);
  color: var(--color-danger, #E30613);
  padding: 12px var(--page-px);
  margin: 0 0 16px;
  font-size: 13px;
  border-left: 3px solid var(--color-danger, #E30613);
}

.dc-auth__info {
  background: var(--color-success-bg, #E3F4EC);
  color: var(--color-success, #128C5A);
  padding: 12px var(--page-px);
  margin: 0 0 16px;
  font-size: 13px;
  border-left: 3px solid var(--color-success, #128C5A);
}

/* OTP screen */
.dc-otp-hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--color-text-subtle);
  text-align: center;
  margin: 0 0 24px;
}

/* ---- 16. Lang switcher --------------------------------------- */
.lang-btn {
  background: none;
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  cursor: pointer;
}

.lang-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-deposit);
  box-shadow: 0 4px 16px rgba(10,14,21,.12);
  min-width: 100px;
  overflow: hidden;
  z-index: 300;
}

.lang-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--color-text);
}

.lang-dropdown button:hover { background: var(--color-bg); }
.lang-dropdown button.active { color: var(--color-brand); font-weight: 600; }

/* ---- 17. Misc fixes ------------------------------------------ */
.form-error {
  border-radius: 0;
  border-left: 3px solid currentColor;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}

.empty-state {
  color: var(--color-text-subtle);
  font-size: 14px;
  padding: 32px 0;
  text-align: center;
}

/* Tabs (exchange tabs) */
.tabs {
  border-bottom: 1px solid var(--color-divider);
}
.tabs__item {
  border-radius: 0;
}
.tabs__item--active {
  border-bottom-color: var(--color-brand);
  color: var(--color-brand);
}

/* Stat grid — flat */
.stat {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
}

.stat__value {
  font-family: var(--font-serif);
  font-feature-settings: 'tnum' 1;
}

/* All numeric outputs */
[class*="amount"], [class*="balance"], [class*="price"] {
  font-feature-settings: 'tnum' 1;
}

/* Transfer form */
.xfer-compact .card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove old modal styling */
.modal-overlay {
  background: rgba(10,14,21,.40);
}

.modal-sheet {
  border-radius: var(--radius-deposit) var(--radius-deposit) 0 0 !important;
  max-height: 90vh;
}

/* Screen section rhythm */
.dc-section {
  padding: 22px 0;
  border-top: 1px solid var(--color-divider);
}

.dc-section + .dc-section {
  border-top: 1px solid var(--color-divider);
}

.dc-section:first-child {
  border-top: none;
  padding-top: 0;
}

/* ---- 18. Orders screen --------------------------------------- */
.filter-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 20px;
}

.filter-tabs a {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-subtle);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.filter-tabs a.active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
  font-weight: 600;
}

/* Orders data table — mobile friendly */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-subtle);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider-strong);
  text-align: left;
}

.data-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: 1px solid var(--color-divider);
}

/* Date filter row */
input[type="date"] {
  border: none;
  border-bottom: 1px solid var(--color-divider-strong);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text);
  padding: 4px 0;
  outline: none;
}

/* Quick-range buttons */
.btn.btn-sm, .btn--sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--color-divider-strong);
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
}

/* ---- 19. Order detail screen --------------------------------- */
.od-leg {
  padding: 16px 0;
  border-top: 1px solid var(--color-divider);
}

.od-leg:first-child { border-top: none; }

.od-leg .lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
}

.od-leg .big {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.order-detail {
  padding-top: 16px;
}

/* ---- 20. Transfer / withdraw form ---------------------------- */
.xfer-compact .card,
.xfer-two-col .card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
  padding: 20px 0 !important;
  margin-bottom: 0 !important;
}

.caps {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--color-text-subtle) !important;
  font-weight: 700 !important;
}

/* Quote details box */
.xc-quote-details {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
}

/* ---- 21. Exchange compose ------------------------------------ */
.xc-compact .xc-card {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--color-divider) !important;
  padding: 16px 0 !important;
  margin-bottom: 0 !important;
}

.xc-compact .xc-amount,
.xc-amount {
  font-family: var(--font-serif) !important;
  font-feature-settings: 'tnum' 1 !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
}

.xc-modal-backdrop {
  align-items: flex-end;
}

.xc-modal {
  border-radius: var(--radius-deposit) var(--radius-deposit) 0 0 !important;
  width: 100%;
  max-width: 480px;
}

/* Exchange asset pill */
.xc-select, .xc-asset {
  border-radius: var(--radius-pill) !important;
  background: var(--color-bg) !important;
}

/* Swap button */
.xc-swap-btn, .exchange__swap-btn {
  border-radius: var(--radius-pill) !important;
}

/* ---- 22. Transfers history ----------------------------------- */
.transfers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.transfers-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-subtle);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider-strong);
  text-align: left;
}

.transfers-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}

/* ---- 23. MFA setup screen ------------------------------------ */
.mfa-setup-page .card {
  border-top: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: none;
}

/* ---- 24. Responsive: hide grid view on very small screens ---- */
@media (max-width: 360px) {
  .dc-tab span { display: none; }
  .dc-tab { font-size: 0; }
}

/* ---- 25. Global: tabular numerals on all numeric content ----- */
td, .mono, code, .tnum, [class*="amount"],
[class*="balance"], [class*="price"], [class*="rate"] {
  font-feature-settings: 'tnum' 1;
}

/* ---- 26. ≥481px — center 480px column on bg-canvas background - */
@media (min-width: 481px) {
  html, body {
    background: var(--color-bg);
  }

  .dc-app {
    max-width: 480px;
    margin: 0 auto;
  }

  /* Fixed bottom tabs must be manually centered (position:fixed bypasses parent layout) */
  .dc-tabs {
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    right: auto;
  }
}