:root {
  --body-font: 'Plus Jakarta Sans', sans-serif;
  --display-font: 'Sora', sans-serif;
  --bg: #0f1722;
  --panel: #101a27;
  --panel-deep: #0a0d11;
  --line: rgba(255, 255, 255, 0.06);
  --muted: #8b96a8;
  --white: #ffffff;
  --gold: #f1c45e;
  --green: #18c99c;
  --red: #f46368;
  --home-market-text: rgba(255, 255, 255, 0.94);
  --home-market-muted: #8f9aad;
  --home-market-divider: rgba(255, 255, 255, 0.08);
  --home-market-chip-positive: #39b96b;
  --home-market-chip-negative: #ea425f;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: linear-gradient(180deg, #0a111b, #08111b);
  color: var(--white);
  font-family: var(--body-font);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app-shell {
  width: min(100vw, 500px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  color: var(--white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
  position: relative;
}

.screen { min-height: 100vh; padding: 16px 18px 108px; }
.screen.no-bottom-nav { padding-bottom: 28px; }

.home-topbar,
.brand-lockup,
.brand-copy,
.profile-menu-head,
.profile-identity,
.profile-id-block,
.profile-id-row,
.vip-chip,
.verification-card,
.profile-link-row {
  display: flex;
}

.page-title-row,
.trade-header,
.top-segment,
.announcement-row,
.account-toggle-row,
.label-row,
.convert-header-row,
.convert-body-row,
.depth-head,
.chart-summary-row,
.table-head,
.market-board-row,
.price-row,
.coin-heading,
.coin-metrics,
.currency-head,
.label-line-between,
.trade-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-topbar,
.profile-menu-head,
.profile-id-row,
.verification-card,
.profile-link-row {
  justify-content: space-between;
  align-items: center;
}

.quick-actions-grid,
.board-tabs,
.interval-tabs,
.lower-tabs,
.chain-tabs,
.market-switcher,
.segmented-control,
.binary-actions,
.chart-label-row {
  display: flex;
  gap: 6px;
}

.page-title-row { margin-bottom: 18px; }
.page-title-side { width: 32px; }
.page-title-side.right { display: flex; justify-content: flex-end; }

.page-title-row h1,
.account-section h2,
.field-label,
.form-section-title,
.section-title-sm,
.detail-group h3,
.notice-card h3,
.banner-copy h1,
.drawer-panel h2 {
  font-family: var(--display-font);
}

.page-title-row h1 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 2rem;
}

.icon-button,
.round-cta,
.swap-button,
.primary-action,
.outline-action,
.toggle-chip,
.dropdown-chip,
.help-link,
.binary-button,
.segmented-control button,
.market-switcher button,
.board-tabs button,
.interval-tabs button,
.lower-tabs button,
.chain-tabs button,
.quick-percent-grid button,
.quantity-row button,
.with-action button,
.inline-icon,
.ghost-button,
.ghost-text,
.profile-trigger,
.profile-avatar-button,
.theme-toggle,
.profile-link-row {
  border: 0;
  background: transparent;
  color: inherit;
}

.home-topbar {
  margin-bottom: 14px;
}

.brand-lockup {
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(241, 196, 94, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand-copy {
  flex-direction: column;
  gap: 2px;
}

.brand-copy strong {
  font-family: var(--display-font);
  font-size: 1.05rem;
}

.brand-copy span {
  color: var(--muted);
  font-size: 0.76rem;
}

.profile-trigger,
.profile-avatar-button {
  display: grid;
  place-items: center;
  padding: 0;
}

.home-banner {
  position: relative;
  min-height: 168px;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(6, 43, 102, 0.88), rgba(17, 34, 66, 0.66)),
    radial-gradient(circle at 80% 28%, rgba(255, 255, 255, 0.16), transparent 18%),
    linear-gradient(135deg, #0f2f86, #1e80cf 48%, #112543 100%);
}

.banner-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

.banner-profile {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe2bf, #c3b6ae);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.15);
}

.banner-profile::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e8d2ad;
}

.banner-profile::after {
  content: '';
  position: absolute;
  left: 7px;
  bottom: 4px;
  width: 20px;
  height: 11px;
  border-radius: 50% 50% 6px 6px;
  background: #526783;
}

.banner-copy {
  position: relative;
  z-index: 1;
  padding: 30px 140px 24px 22px;
}

.banner-kicker {
  margin: 0 0 2px;
  color: #20d5f5;
  font-size: 1.65rem;
  font-weight: 800;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}

.banner-copy h1 {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.02;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.35);
}

.banner-copy strong {
  display: block;
  font-size: 1.1rem;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

.banner-strip {
  display: inline-block;
  margin-top: 14px;
  max-width: 245px;
  padding: 8px 12px;
  background: linear-gradient(90deg, #19e3f6, rgba(255,255,255,0.42));
  color: #081320;
  font-weight: 700;
}

.robot-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 1;
  text-align: center;
}

.robot-face {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 4px;
  border-radius: 32px;
  background: radial-gradient(circle at 50% 40%, #ffffff, #cddff5 72%, #9aaec7 100%);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.18), 0 14px 25px rgba(0,0,0,0.28);
}

.robot-face span {
  position: absolute;
  top: 32px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #dffcff, #2b93ff 60%, #15325f 100%);
}

.robot-face span:first-child { left: 20px; }
.robot-face span:last-child { right: 20px; }

.robot-badge p {
  margin: 0;
  font-family: var(--display-font);
  font-size: 1.35rem;
}

.banner-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.banner-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

.banner-dots span.active { background: var(--white); }

body[data-page="home"] .compact-head {
  padding: 0 4px;
}

body[data-page="home"] .home-market-head {
  margin-bottom: 0;
  padding: 0;
  color: var(--home-market-muted);
}

body[data-page="home"] .home-market-head .table-head-status {
  display: flex;
  justify-content: flex-end;
}

body[data-page="home"] .home-market-head .table-head-label {
  color: var(--home-market-muted);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="home"] .home-list {
  gap: 0;
}

body[data-page="home"] .home-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(84px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--home-market-divider);
}

body[data-page="home"] .home-list .price-row:last-child {
  border-bottom: none;
}

body[data-page="home"] .home-list .positive-row,
body[data-page="home"] .home-list .negative-row {
  background: transparent;
}

body[data-page="home"] .home-price-row-left {
  gap: 0;
}

body[data-page="home"] .home-price-row-left strong {
  color: var(--home-market-text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body[data-page="home"] .home-price-row-price {
  margin-left: 0;
  justify-self: center;
  color: var(--home-market-text);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

body[data-page="home"] .home-change-chip {
  min-width: 84px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

body[data-page="home"] .home-change-chip.positive {
  color: #ffffff;
  background: var(--home-market-chip-positive);
}

body[data-page="home"] .home-change-chip.negative {
  color: #ffffff;
  background: var(--home-market-chip-negative);
}

body[data-page="support"] .screen {
  min-height: 100vh;
  padding: 0 0 18px;
  background: #030809;
}

body[data-page="support"] .page-title-row {
  margin: 0;
  padding: 10px 16px 14px;
  background: #111925;
}

body[data-page="support"] .page-title-row h1 {
  font-size: 1.15rem;
}

body[data-page="support"] .contact-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 170px);
  padding: 102px 14px 22px;
}

body[data-page="support"] .contact-chat-bubble {
  max-width: 71%;
  padding: 18px 20px;
  border-radius: 22px;
  line-height: 1.3;
  font-size: 1rem;
}

body[data-page="support"] .contact-chat-bubble p {
  margin: 0;
  overflow-wrap: anywhere;
}

body[data-page="support"] .contact-chat-bubble.support {
  align-self: flex-start;
  background: #2a3340;
  color: #ffffff;
  border-bottom-left-radius: 12px;
}

body[data-page="support"] .contact-chat-bubble.user {
  align-self: flex-end;
  background: #f3c35f;
  color: #111925;
  border-bottom-right-radius: 12px;
}

body[data-page="support"] .contact-chat-composer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #111925;
}

body[data-page="support"] .contact-chat-plus {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: transparent;
  color: #273140;
  display: grid;
  place-items: center;
}

body[data-page="support"] .contact-chat-plus .ui-icon {
  width: 22px;
  height: 22px;
}

body[data-page="support"] .contact-chat-input-wrap {
  display: block;
}

body[data-page="support"] .contact-chat-input-wrap input {
  width: 100%;
  min-height: 60px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #0f0f10;
  color: #ffffff;
  font: inherit;
}

body[data-page="support"] .contact-chat-input-wrap input::placeholder {
  color: #5f6776;
}

body[data-page="support"] .contact-chat-input-wrap input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(243, 195, 95, 0.28);
}

body[data-page="support"] .contact-chat-send {
  min-width: 80px;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #f3c35f;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

body[data-page="convert"] .screen {
  min-height: 100vh;
  padding: 0 12px 28px;
  background: #121925;
}

body[data-page="convert"] .page-title-row {
  margin: 0 -12px 22px;
  padding: 8px 14px 14px;
  background: #121925;
}

body[data-page="convert"] .page-title-row h1 {
  font-size: 1.18rem;
}

body[data-page="convert"] .convert-panel {
  position: relative;
  padding: 24px 22px 22px;
  border-radius: 12px;
  background: #101010;
  margin: 0;
}

body[data-page="convert"] .convert-panel + .convert-panel {
  margin-top: 10px;
}

body[data-page="convert"] .convert-panel-head,
body[data-page="convert"] .convert-panel-body,
body[data-page="convert"] .convert-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-page="convert"] .convert-panel-head {
  margin-bottom: 28px;
  color: #ffffff;
  font-size: 0.98rem;
}

body[data-page="convert"] .convert-panel-head span:last-child {
  color: #d7dde8;
}

body[data-page="convert"] .convert-slippage-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-page="convert"] .convert-slippage-label .ui-icon {
  color: #8a93a5;
}

body[data-page="convert"] .convert-panel-body {
  align-items: flex-start;
  gap: 16px;
}

body[data-page="convert"] .convert-token-block,
body[data-page="convert"] .convert-amount-block {
  flex: 1;
  min-width: 0;
}

body[data-page="convert"] .convert-token-row {
  justify-content: flex-start;
  gap: 12px;
}

body[data-page="convert"] .convert-token-row .token-badge {
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  box-shadow: none;
}

body[data-page="convert"] .convert-token-row select {
  appearance: none;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 1.12rem;
  font-weight: 700;
  padding-right: 0;
}

body[data-page="convert"] .convert-token-row .ui-icon {
  color: #ffffff;
}

body[data-page="convert"] .convert-amount-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

body[data-page="convert"] .convert-amount-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  text-align: right;
}

body[data-page="convert"] .convert-amount-input::placeholder {
  color: #ffffff;
  opacity: 1;
}

body[data-page="convert"] .convert-amount-input:focus {
  outline: none;
}

body[data-page="convert"] .convert-max-button {
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #f3c35f;
  font-size: 0.98rem;
  font-weight: 600;
}

body[data-page="convert"] .convert-amount-block-output {
  padding-top: 2px;
}

body[data-page="convert"] .convert-amount-block-output strong {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: right;
}

body[data-page="convert"] .convert-swap-button {
  width: 74px;
  height: 74px;
  margin: -16px auto -16px;
  border: 0;
  border-radius: 50%;
  background: #172131;
  color: #ffffff;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

body[data-page="convert"] .convert-swap-button .ui-icon {
  width: 30px;
  height: 30px;
}

body[data-page="convert"] .convert-rate-copy {
  margin: 42px 0 24px;
  color: #ffffff;
  font-size: 1rem;
  text-align: center;
}

body[data-page="convert"] .convert-rate-copy strong {
  font-weight: 700;
}

body[data-page="convert"] .convert-submit-button {
  width: 100%;
  min-height: 66px;
  border-radius: 12px;
  background: #f3c35f;
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 700;
}

.profile-page-hero,
.profile-page-card {
  background: #101a27;
  border-radius: 16px;
}

.profile-page-hero {
  padding: 20px 18px;
  margin-bottom: 16px;
}

.profile-page-hero span,
.profile-page-card span {
  color: #8c95a4;
}

.profile-page-hero h2 {
  margin: 10px 0 10px;
  font-family: var(--display-font);
  font-size: 1.4rem;
  line-height: 1.15;
}

.profile-page-hero p {
  margin: 0;
  color: #d4dce6;
  line-height: 1.7;
}

.profile-page-card-stack {
  display: grid;
  gap: 14px;
}

.profile-page-card {
  padding: 18px;
}

.profile-page-card span {
  display: block;
  margin-bottom: 10px;
}

.profile-page-card strong {
  display: block;
  font-size: 1.2rem;
}

.profile-page-hero-history {
  background: linear-gradient(180deg, #142133, #101a27);
}

.profile-status-pills {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.profile-status-pills span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #d7dee7;
  font-size: 0.84rem;
}

.history-timeline-list,
.security-card-stack,
.settings-list {
  display: grid;
  gap: 14px;
}

.history-timeline-card,
.settings-row-card,
.security-detail-card,
.faq-card {
  background: #101a27;
  border-radius: 16px;
}

.history-timeline-card {
  display: flex;
  gap: 14px;
  padding: 18px;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: #f1c45e;
  box-shadow: 0 0 0 4px rgba(241, 196, 94, 0.14);
  flex-shrink: 0;
}

.history-timeline-card span,
.settings-row-card span,
.security-detail-card span,
.faq-card p {
  color: #8c95a4;
}

.history-timeline-card strong,
.settings-row-card strong,
.security-detail-card strong,
.faq-card strong {
  display: block;
  margin: 8px 0;
}

.history-timeline-card p,
.faq-card p,
.security-tip-card p {
  margin: 0;
  color: #d6dde7;
  line-height: 1.65;
}

.share-hero {
  background: linear-gradient(135deg, #12253e, #152132 62%, #111822 100%);
}

.referral-code-card {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.referral-code-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.35rem;
}

.profile-feature-grid.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.accent-card.gold {
  background: linear-gradient(135deg, rgba(241, 196, 94, 0.22), #101a27);
}

.accent-card.teal {
  background: linear-gradient(135deg, rgba(26, 196, 176, 0.2), #101a27);
}

.profile-action-row {
  display: grid;
  gap: 12px;
}

.share-poster-card,
.support-response-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  background: #101a27;
}

.share-poster-card span,
.support-response-card span {
  color: #8c95a4;
}

.share-poster-card strong,
.support-response-card strong {
  display: block;
  margin: 10px 0;
}

.share-poster-card p,
.support-response-card p {
  margin: 0 0 14px;
  color: #d6dde7;
  line-height: 1.65;
}

.profile-feedback-line {
  margin-top: 14px;
}

.profile-outline-button {
  width: 100%;
  margin: 0;
}

.settings-row-card,
.security-detail-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
}

.about-hero {
  background: linear-gradient(180deg, #152030, #101a27);
}

.info-band-card {
  background: linear-gradient(90deg, rgba(241, 196, 94, 0.14), #101a27 70%);
}

.settings-row-card {
  min-height: 86px;
}

.settings-row-card-button {
  padding: 0;
}

.settings-inline-action {
  width: 100%;
  min-height: 86px;
  padding: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.settings-inline-action .ui-icon {
  color: #8f98a8;
}

.settings-switch {
  width: 50px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #2a2f37;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.settings-switch.active {
  justify-content: flex-end;
  background: rgba(26, 196, 176, 0.35);
}

.settings-switch span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  margin: 0;
}

.security-hero {
  background: linear-gradient(135deg, #1a2235, #101a27 65%);
}

.security-detail-card em {
  color: #f1c45e;
  font-size: 0.82rem;
  font-style: normal;
}

.subsection-card .ui-icon {
  color: #8f98a8;
}

.security-section-hero {
  background: linear-gradient(135deg, #18233a, #101a27 68%);
}

.security-section-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.security-section-link {
  min-height: 86px;
  padding: 14px 12px;
  border-radius: 16px;
  background: #101a27;
  color: #9aa4b3;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.security-section-link .ui-icon {
  width: 20px;
  height: 20px;
}

.security-section-link span {
  font-size: 0.88rem;
  line-height: 1.25;
}

.security-section-link.active {
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(241, 196, 94, 0.34);
  background: linear-gradient(135deg, rgba(241, 196, 94, 0.14), #101a27 85%);
}

.security-section-link.active .ui-icon {
  color: #f1c45e;
}

.password-form-stack {
  margin-top: 16px;
}

.password-form-card {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(241, 196, 94, 0.08), #101a27 76%);
}

.password-form-header span,
.password-field span,
.password-form-meta span {
  color: #8c95a4;
}

.password-form-header strong,
.password-form-meta strong {
  display: block;
  margin-top: 8px;
}

.password-form-header p {
  margin: 10px 0 0;
  color: #d6dde7;
  line-height: 1.65;
}

.password-change-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.password-field {
  display: grid;
  gap: 8px;
}

.password-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font: inherit;
}

.password-field input::placeholder {
  color: #667083;
}

.password-field input:focus {
  outline: none;
  border-color: rgba(241, 196, 94, 0.48);
  box-shadow: 0 0 0 3px rgba(241, 196, 94, 0.12);
}

.password-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.password-message {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  line-height: 1.5;
}

.password-message-error {
  background: rgba(217, 83, 79, 0.16);
  color: #ffc4c1;
}

.password-message-success {
  background: rgba(26, 196, 176, 0.16);
  color: #b8fff5;
}

.password-submit-button {
  width: 100%;
}

.security-section-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}

.security-section-icon-wrap .ui-icon {
  width: 24px;
  height: 24px;
}

.security-section-hero.gold .security-section-icon-wrap {
  color: #f1c45e;
}

.security-section-hero.teal .security-section-icon-wrap {
  color: #1ac4b0;
}

.security-section-hero.slate .security-section-icon-wrap {
  color: #9bb1d1;
}

.security-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.security-highlight-card {
  padding: 16px;
  border-radius: 16px;
  background: #101a27;
}

.security-highlight-card span {
  display: block;
  color: #8c95a4;
  margin-bottom: 8px;
}

.security-highlight-card strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}

.security-highlight-card.gold {
  background: linear-gradient(135deg, rgba(241, 196, 94, 0.16), #101a27 82%);
}

.security-highlight-card.teal {
  background: linear-gradient(135deg, rgba(26, 196, 176, 0.16), #101a27 82%);
}

.security-highlight-card.slate {
  background: linear-gradient(135deg, rgba(155, 177, 209, 0.16), #101a27 82%);
}

.security-tip-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 196, 94, 0.14), #101a27 72%);
}

.security-tip-card strong {
  display: block;
  margin-bottom: 8px;
}

.security-checklist {
  margin: 14px 0 0;
  padding-left: 18px;
  color: #d6dde7;
}

.security-checklist li + li {
  margin-top: 8px;
}

.deposit-picker-stage {
  min-height: 140px;
  padding: 10px 0 0;
}

.deposit-picker-copy span {
  display: block;
  color: #8f98a8;
  margin-bottom: 8px;
}

.deposit-picker-copy strong {
  display: block;
  font-family: var(--display-font);
  font-size: 1.2rem;
  line-height: 1.35;
}

.deposit-method-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 20px;
  margin-bottom: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(27, 33, 43, 0.96), rgba(15, 19, 26, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.deposit-method-summary-card span {
  display: block;
  color: #8d98aa;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.deposit-method-summary-card strong {
  display: block;
  font-size: 1.08rem;
}

.deposit-method-trigger {
  width: auto;
  min-width: 138px;
  margin: 0;
  padding: 13px 18px;
  flex-shrink: 0;
  text-align: center;
}

.deposit-method-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.58);
}

.deposit-method-sheet {
  width: min(100%, 500px);
  padding: 10px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #161b24 0%, #0d1118 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 0;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.45);
}

.deposit-method-handle {
  width: 100%;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.deposit-method-handle span {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.deposit-method-sheet-header {
  padding: 4px 4px 16px;
}

.deposit-method-sheet-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-family: var(--display-font);
}

.deposit-method-list {
  display: grid;
  gap: 12px;
}

.deposit-method-card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  text-align: left;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.deposit-method-card.active {
  background: rgba(241, 196, 94, 0.12);
  border-color: rgba(241, 196, 94, 0.48);
}

.deposit-method-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(241, 196, 94, 0.2), rgba(241, 196, 94, 0.08));
  color: #f1c45e;
  flex-shrink: 0;
}

.deposit-method-copy {
  display: grid;
  gap: 5px;
}

.deposit-method-copy strong {
  font-size: 1rem;
}

.deposit-method-copy span {
  color: #96a0b1;
  line-height: 1.45;
  font-size: 0.9rem;
}

.deposit-service-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.deposit-service-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(241, 196, 94, 0.24), rgba(241, 196, 94, 0.08));
  color: #f1c45e;
}

.deposit-service-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.deposit-service-copy {
  display: grid;
  gap: 8px;
}

.deposit-service-badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f1c45e;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deposit-service-copy h2 {
  margin: 0;
  font-family: var(--display-font);
  font-size: 1.25rem;
  line-height: 1.25;
}

.deposit-service-copy p {
  margin: 0;
  color: #9aa4b5;
  line-height: 1.6;
}

.deposit-service-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.deposit-service-metric-card {
  padding: 16px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.deposit-service-metric-card span {
  display: block;
  color: #8f98a8;
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.deposit-service-metric-card strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.45;
}

.deposit-service-highlight {
  margin-bottom: 16px;
}

.deposit-service-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.deposit-service-secondary {
  width: 100%;
  margin: 0;
}

.deposit-service-footer-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.deposit-pay-qr-card {
  display: grid;
  place-items: center;
}

@media (max-width: 420px) {
  .profile-feature-grid.two-up,
  .security-highlight-grid,
  .security-section-nav,
  .deposit-service-metrics {
    grid-template-columns: 1fr;
  }

  .deposit-method-summary-card,
  .deposit-service-hero,
  .deposit-service-footer-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .deposit-method-trigger {
    width: 100%;
  }
}

.announcement-row {
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px 0 14px;
  color: #7e8794;
  border-bottom: 1px solid var(--line);
}

.announcement-row span { flex: 1; }

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.action-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.action-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--white);
  box-shadow: inset 0 0 0 2px rgba(241, 196, 94, 0.12);
}

.action-circle .ui-icon { color: var(--gold); }

.buy-coins-banner,
.asset-summary-card {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(135deg, #ffcf68, #f9a34a);
}

.buy-coins-banner {
  margin: 0 -18px 18px;
  padding: 22px 16px;
}

.buy-coins-banner::before,
.buy-coins-banner::after,
.asset-card-circles::before,
.asset-card-circles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 34px solid rgba(255,255,255,0.12);
}

.buy-coins-banner::before,
.asset-card-circles::before {
  top: -8px;
  right: -26px;
  width: 124px;
  height: 124px;
}

.buy-coins-banner::after,
.asset-card-circles::after {
  top: 44px;
  right: 6px;
  width: 66px;
  height: 66px;
}

.buy-coins-banner strong { display: block; font-size: 1.05rem; }
.buy-coins-banner p { margin: 6px 0 0; font-size: 1rem; }

.round-cta {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #ff7230;
  display: grid;
  place-items: center;
}

.board-tabs,
.market-switcher,
.lower-tabs {
  justify-content: space-around;
}

.board-tabs,
.lower-tabs { margin-bottom: 18px; }

.market-switcher button,
.board-tabs button,
.interval-tabs button,
.lower-tabs button,
.chain-tabs button,
.quick-percent-grid button,
.segmented-control button {
  position: relative;
  padding: 0;
  color: #7f8795;
}

.market-switcher button.active,
.board-tabs button.active,
.lower-tabs button.active,
.interval-tabs button.active,
.chain-tabs button.active,
.segmented-control button.active { color: var(--white); }

.market-switcher button.active::after,
.board-tabs button.active::after,
.lower-tabs button.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold);
  transform: translateX(-50%);
}

.table-head {
  margin-bottom: 10px;
  color: #738197;
  font-size: 0.95rem;
}

.market-list, .coin-list, .account-card-stack, .drawer-options, .transaction-list { display: grid; gap: 10px; }

.price-row,
.market-board-row,
.account-card,
.form-card,
.convert-card,
.chart-panel,
.empty-state,
.transaction-item {
  background: var(--panel);
  border-radius: 16px;
}

.price-row {
  gap: 10px;
  padding: 10px 10px 10px 0;
}

.positive-row { background: linear-gradient(90deg, rgba(9, 54, 54, 0.72), rgba(16, 26, 39, 0.98)); }
.negative-row { background: linear-gradient(90deg, rgba(66, 31, 47, 0.72), rgba(16, 26, 39, 0.98)); }

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

.price-row-price { margin-left: auto; font-size: 0.98rem; }

.change-chip {
  min-width: 88px;
  min-height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--white);
}

.change-chip.positive, .binary-button.up, .buy-long { background: var(--green); }
.change-chip.negative, .binary-button.down { background: var(--red); }
.positive { color: var(--green); }
.negative { color: var(--red); }

.market-board-row {
  gap: 12px;
  padding: 8px 0 8px 2px;
  background: transparent;
}

.market-board-row > div, .trade-meta-row > div { flex: 1; }
.market-board-row > div:nth-child(2) { text-align: center; }
.market-board-row span,
.trade-meta-row span,
.coin-metrics span,
.muted,
.muted-caption { color: var(--muted); }

.trade-header { gap: 10px; margin-bottom: 16px; }

.pair-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
}

.pair-header strong,
.account-section h2,
.field-label,
.form-section-title,
.notice-card h3,
.detail-group h3,
.coin-heading strong,
.account-card strong,
.amount-entry strong,
.depth-last-price strong { font-weight: 800; }

.icon-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.wide-left { width: 28px; }

.interval-tabs { gap: 12px; margin-bottom: 18px; }

.interval-tabs button {
  flex: 1;
  height: 40px;
  border-radius: 4px;
  background: #141d2a;
}

.interval-tabs button.active { color: var(--gold); background: rgba(241,196,94,0.18); }

.trade-meta-row { gap: 10px; margin-bottom: 16px; align-items: flex-start; }
.trade-meta-row strong { display: block; margin-top: 8px; }

.accent-text { color: var(--gold); }

.chart-label-row { gap: 20px; margin-bottom: 8px; }

.chart-panel { padding: 10px 0 0; overflow: hidden; }
.chart-svg { width: 100%; height: auto; display: block; }
.grid-line { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.price-line { stroke: rgba(255,255,255,0.6); stroke-width: 1; stroke-dasharray: 5 4; }
.body-up, .wick-up, .vol-up { fill: #28c9c6; stroke: #28c9c6; }
.body-down, .wick-down, .vol-down { fill: #f05f62; stroke: #f05f62; }
.last-price-label { fill: #d1d7e0; font-size: 12px; font-weight: 700; }

.chart-summary-row {
  gap: 12px;
  padding: 0 6px 8px;
  overflow-x: auto;
  font-size: 0.78rem;
}

.ma-five { color: #f1b13d; }
.ma-ten { color: #ba6df5; }
.ma-twenty { color: #54b8f7; }
.ma-volume { color: #ff5b5b; }

.sticky-tabs {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.sticky-tabs button { white-space: nowrap; flex-shrink: 0; }

.empty-state {
  min-height: 265px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.empty-illustration {
  position: relative;
  width: 170px;
  height: 118px;
}

.empty-illustration .tower,
.empty-illustration .base {
  position: absolute;
  background: linear-gradient(180deg, #ced2d8, #7a818d);
}

.empty-illustration .tower.left { left: 14px; bottom: 18px; width: 26px; height: 62px; }
.empty-illustration .tower.center { left: 60px; bottom: 8px; width: 58px; height: 90px; background: linear-gradient(180deg, #f7f8fa, #b3b7be); }
.empty-illustration .tower.right { right: 10px; bottom: 18px; width: 42px; height: 92px; }
.empty-illustration .base { left: 14px; right: 0; bottom: 0; height: 10px; border-radius: 999px; box-shadow: 0 0 20px #f6f3eb; }

.binary-actions { gap: 20px; margin-top: 14px; }

.binary-button {
  flex: 1;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
}

.perpetual-layout { display: flex; gap: 12px; align-items: flex-start; }
.perpetual-form, .depth-panel { flex: 1; }

.segmented-control.wide {
  overflow: hidden;
  margin-bottom: 12px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: #121b28;
}

.segmented-control.wide button { flex: 1; padding: 12px 0; color: var(--white); }
.segmented-control.wide button.active { background: var(--green); }

.dark-input,
.static-field {
  min-height: 50px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: var(--panel-deep);
  color: var(--white);
}

.dark-input,
.quantity-row,
.with-icon,
.with-action,
.select-input,
.token-select-row {
  display: flex;
  align-items: center;
}

.dark-input input,
.dark-input select,
.token-select-row select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--white);
  outline: none;
}

.token-select-row select,
.dark-input select { appearance: none; }

.quantity-row button,
.with-action button,
.inline-icon,
.amount-entry button { padding: 0 14px; color: var(--gold); }

.quantity-row button { font-size: 1.3rem; color: var(--white); }

.quick-percent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0 12px;
}

.quick-percent-grid button {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #121b28;
}

.checkbox-row { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.primary-action,
.buy-long {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  border-radius: 999px;
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
}

.primary-action { background: var(--gold); }

.depth-head { gap: 12px; margin-bottom: 8px; }

.depth-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  overflow: hidden;
  font-size: 0.94rem;
}

.depth-row .heat { position: absolute; top: 0; right: 0; bottom: 0; opacity: 0.18; }
.depth-row.ask .heat { background: var(--red); }
.depth-row.bid .heat { background: var(--green); }
.depth-last-price { padding: 12px 0; }
.depth-last-price strong { display: block; font-size: 1.8rem; color: var(--red); }

.asset-summary-card {
  min-height: 140px;
  margin-bottom: 20px;
  padding: 22px 26px;
  border-radius: 14px;
}

.exchange-mode-card { min-height: 150px; }
.asset-card-copy { position: relative; z-index: 1; }
.asset-card-copy strong { display: block; font-size: 3rem; line-height: 1.1; }

.account-toggle-row { margin-bottom: 28px; }

.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 20px;
  background: #232b39;
  color: #cdd4df;
}

.account-card { padding: 18px; }
.account-card span { display: block; margin-bottom: 8px; color: #c8d0db; font-size: 1.1rem; }
.account-card strong { display: block; font-size: 2rem; }

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(0,0,0,0.62);
}

.drawer-overlay.open { display: flex; justify-content: flex-start; }

.profile-overlay.open {
  align-items: stretch;
}

.profile-menu-panel {
  width: min(100vw, 500px);
  min-height: 100vh;
  padding: 18px 0 92px;
  background: #0c0f14;
}

.profile-menu-head {
  padding: 0 18px 12px;
}

.profile-identity {
  align-items: flex-start;
  gap: 12px;
}

.profile-id-block {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.vip-chip {
  align-items: center;
  gap: 6px;
  min-width: 64px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff6d4;
  background: linear-gradient(90deg, #8b6533, #e3b55a);
  font-size: 0.84rem;
  font-weight: 700;
}

.profile-id-block > strong {
  font-size: 1.1rem;
}

.profile-id-row {
  gap: 8px;
  color: var(--muted);
}

.profile-id-row strong {
  color: #b9c0cd;
  font-weight: 600;
}

.small-copy {
  padding: 0;
  color: #9098a7;
}

.theme-toggle {
  width: 58px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--gold);
  background: #25282f;
}

.verification-stack {
  display: grid;
  gap: 16px;
  padding: 12px 18px 26px;
}

.verification-card {
  padding: 16px 18px;
  border-radius: 2px;
}

.verification-card strong,
.verification-card span {
  display: block;
}

.verification-card strong {
  margin-bottom: 10px;
  font-size: 1rem;
}

.verification-card span {
  color: rgba(255, 255, 255, 0.82);
}

.verification-card.gold {
  background: #f3c55d;
}

.verification-card.green {
  background: #1fba9e;
}

.verification-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.profile-links {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.profile-link-row {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  color: #aeb6c3;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.profile-link-row:first-child {
  border-top: 0;
}

.drawer-panel {
  width: min(74vw, 370px);
  min-height: 100vh;
  padding: 34px 18px;
  background: #121317;
}

.drawer-panel h2 { margin: 0 0 28px; font-size: 2rem; }

.drawer-options button {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: 8px;
  background: #1c1f24;
  color: var(--white);
  border: 1px solid transparent;
}

.drawer-options button.active { border-color: var(--gold); }
.drawer-options span { display: block; margin-top: 8px; color: var(--muted); }

.coin-row {
  padding: 20px 0 24px;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.coin-metrics { gap: 10px; margin-top: 16px; align-items: flex-start; }
.coin-metrics > div { flex: 1; }
.coin-metrics strong { display: block; margin-top: 8px; }

.token-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--white);
  background: var(--token-color, #8892a0);
}

.convert-card,
.form-card { padding: 18px; margin-bottom: 16px; }

.convert-card { background: var(--panel-deep); }
.convert-header-row { margin-bottom: 18px; }

.amount-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.amount-entry strong { font-size: 1.3rem; }
.amount-entry.static-value { gap: 10px; }

.hidden-range-input { width: 100%; margin-top: 14px; }

.swap-button {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin: -6px auto -6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #162130;
}

.exchange-rate-copy { margin: 36px 0 16px; text-align: center; }
.status-line { margin-top: 14px; text-align: center; color: #bdd9ff; }

.qr-box { display: flex; justify-content: center; margin: 26px 0 22px; }

.qr-preview { width: 126px; height: 126px; background: var(--white); }

.outline-action {
  display: block;
  width: 194px;
  height: 48px;
  margin: 0 auto 24px;
  border-radius: 999px;
  color: var(--gold);
  border: 1px solid var(--gold);
}

.section-title-sm,
.field-label,
.detail-group h3 { margin: 0 0 14px; font-size: 1rem; }

.detail-group p { margin: 0; line-height: 1.8; color: #d9dee6; }

.static-field { display: flex; align-items: center; padding: 0 14px; }

.notice-card ol {
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.95;
  color: #d8dee8;
}

.help-link { display: block; margin: 4px auto 20px; color: var(--gold); }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100vw, 500px);
  height: 74px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  transform: translateX(-50%);
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(10,18,27,0.98);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #5c6676;
}

.nav-item.active { color: var(--white); }
.nav-item.active .ui-icon { color: var(--gold); }

.ui-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 420px) {
  .screen { padding-inline: 14px; }
  .screen.no-bottom-nav { padding-inline: 14px; }
  .buy-coins-banner { margin-inline: -14px; }
  .banner-copy { padding-left: 36px; padding-right: 126px; }
  .banner-copy h1 { font-size: 1.9rem; }
  .asset-card-copy strong { font-size: 2.45rem; }
  .perpetual-layout { flex-direction: column; }
  .depth-panel { width: 100%; }
}

.trade-screen-shell {
  padding-bottom: 92px;
}

.trade-screen {
  min-height: calc(100vh - 92px);
  padding: 0 0 20px;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at top right, rgba(241, 196, 94, 0.1), transparent 24%),
    linear-gradient(180deg, #0a111b 0%, #08111b 100%);
}

.trade-screen-header,
.trade-screen-pair,
.trade-screen-header-actions,
.trade-screen-topline,
.trade-screen-book-layout,
.trade-direction-toggle,
.trade-screen-book-head,
.trade-screen-book-row,
.trade-screen-tabs,
.trade-screen-balance-row,
.trade-screen-slider-labels {
  display: flex;
  align-items: center;
}

.trade-screen-header,
.trade-screen-topline,
.trade-screen-book-layout,
.trade-screen-book-head,
.trade-screen-book-row,
.trade-screen-tabs,
.trade-screen-balance-row,
.trade-screen-slider-labels {
  justify-content: space-between;
}

.trade-screen-header {
  padding: 18px 16px 24px;
  color: #ffffff;
  background: transparent;
}

.trade-screen-pair {
  gap: 10px;
}

.trade-screen-pair strong {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.trade-screen-header-actions {
  gap: 10px;
}

.trade-screen-delivery-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
}

.trade-screen-panel {
  margin: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(18, 24, 34, 0.96);
  min-height: calc(100vh - 170px);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.28);
}

.trade-screen-topline {
  padding: 16px 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.trade-screen-topline span {
  display: block;
  margin-bottom: 6px;
  color: #97a1b3;
  font-size: 0.92rem;
}

.trade-screen-topline strong {
  color: #ffffff;
  font-size: 1rem;
}

.trade-screen-topline-right {
  text-align: right;
}

.trade-screen-topline-right strong {
  font-size: 1.45rem;
  color: #f0c45f;
}

.trade-screen-book-layout {
  gap: 18px;
  align-items: flex-start;
  padding: 0 14px;
}

.trade-screen-controls {
  flex: 0 0 56%;
  padding: 16px 0 0;
}

.trade-direction-toggle {
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-direction-toggle button {
  flex: 1;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: #95a0b2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 600;
}

.trade-direction-toggle button.active.long {
  background: #3ebd7a;
  color: #ffffff;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

.trade-direction-toggle button.active.short {
  background: #f05b6f;
  color: #ffffff;
}

.trade-screen-select-wrap,
.trade-screen-quantity-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 12px;
}

.trade-screen-select-wrap select,
.trade-screen-quantity-row input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 1rem;
  appearance: none;
}

.trade-screen-quantity-row {
  gap: 10px;
}

.trade-screen-quantity-row span {
  color: #d6dbe5;
  font-size: 0.98rem;
}

.trade-screen-quantity-row input {
  text-align: right;
  font-size: 1.8rem;
  font-family: var(--display-font);
}

.trade-screen-slider-block {
  margin: 10px 0 16px;
}

.trade-screen-slider-block input[type='range'] {
  width: 100%;
  accent-color: #f0c45f;
}

.trade-screen-slider-labels {
  margin-top: 8px;
  color: #c3cad6;
  font-size: 0.9rem;
}

.trade-screen-submit {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 20px rgba(46, 157, 102, 0.25);
}

.trade-screen-submit.long {
  background: #3ebd7a;
}

.trade-screen-submit.short {
  background: #f05b6f;
  box-shadow: 0 8px 20px rgba(240, 91, 111, 0.22);
}

.trade-screen-balance-row {
  margin-top: 10px;
  color: #d6dbe5;
  font-size: 0.94rem;
}

.trade-screen-book {
  flex: 1;
  padding-top: 18px;
}

.trade-screen-book-head {
  margin-bottom: 8px;
  color: #8f98a8;
  font-size: 0.92rem;
}

.trade-screen-book-list {
  display: grid;
  gap: 6px;
}

.trade-screen-book-row {
  font-size: 0.98rem;
}

.trade-screen-book-row strong {
  font-weight: 500;
}

.trade-screen-book-row.ask strong {
  color: #3ebd7a;
}

.trade-screen-book-row.bid strong {
  color: #f05b6f;
}

.trade-screen-book-row span {
  color: #d6dbe5;
}

.trade-screen-mid-price {
  margin: 14px 0 12px;
  color: #ffffff;
  font-family: var(--display-font);
  font-size: 2.15rem;
  font-weight: 700;
  text-align: left;
}

.trade-screen-tabs {
  gap: 10px;
  padding: 16px 14px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.trade-screen-tabs button {
  border: 0;
  background: transparent;
  color: #8a94a6;
  font-size: 0.98rem;
  font-weight: 700;
}

.trade-screen-tabs button.active {
  color: #ffffff;
}

.trade-screen-tab-panel {
  min-height: 280px;
  padding: 6px 14px 18px;
}

.trade-screen-tab-panel .empty-state {
  min-height: 220px;
}

.deposit-currency-screen {
  min-height: 100vh;
  padding: 0;
  background:
    radial-gradient(circle at top right, rgba(241, 196, 94, 0.1), transparent 28%),
    linear-gradient(180deg, #121925 0%, #0f1722 100%);
  color: #ffffff;
}

.deposit-currency-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 18px;
  color: #ffffff;
}

.deposit-currency-header .icon-button.ghost {
  color: #ffffff;
}

.deposit-currency-search {
  flex: 1;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.96);
}

.deposit-currency-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.deposit-currency-search input:focus {
  outline: none;
}

.deposit-currency-panel {
  min-height: calc(100vh - 60px);
  padding: 18px 14px 32px;
  border-radius: 24px 24px 0 0;
  background: rgba(8, 13, 18, 0.46);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.deposit-currency-panel h2 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 1.15rem;
  font-family: var(--display-font);
}

.deposit-currency-list {
  display: grid;
  gap: 14px;
}

.deposit-currency-item {
  width: 100%;
  min-height: 62px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  text-align: left;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.deposit-currency-item:active {
  transform: scale(0.985);
}

.deposit-currency-item:hover {
  border-color: rgba(241, 196, 94, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.deposit-currency-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deposit-currency-item .token-badge {
  width: 28px;
  height: 28px;
  box-shadow: none;
  font-size: 0.95rem;
}

.deposit-currency-item strong {
  font-size: 0.98rem;
  font-weight: 600;
}

.p2p-screen {
  min-height: 100vh;
  padding: 10px 14px 28px;
  background:
    radial-gradient(circle at top right, rgba(241, 196, 94, 0.1), transparent 26%),
    linear-gradient(180deg, #2f343e 0%, #262c35 100%);
}

.p2p-market-header,
.p2p-market-mode-row,
.p2p-market-filter-row,
.p2p-market-top-tabs,
.p2p-market-mode-toggle,
.p2p-market-currency-chip,
.p2p-market-filter-chip,
.p2p-offer-head,
.p2p-offer-merchant-line,
.p2p-offer-name-row,
.p2p-offer-body,
.p2p-offer-side,
.p2p-inline-header,
.p2p-inline-header-spread,
.p2p-buy-title-row,
.p2p-amount-row,
.p2p-amount-meta,
.p2p-method-main,
.p2p-method-meta,
.p2p-subscribe-row,
.p2p-advertiser-row,
.p2p-chat-order-bar,
.p2p-chat-composer,
.p2p-merchant-main,
.p2p-payment-heading,
.p2p-chat-merchant-head {
  display: flex;
  align-items: center;
}

.p2p-market-header,
.p2p-market-mode-row,
.p2p-market-filter-row,
.p2p-offer-body,
.p2p-inline-header,
.p2p-inline-header-spread,
.p2p-amount-row,
.p2p-method-card,
.p2p-method-main,
.p2p-method-meta,
.p2p-subscribe-row,
.p2p-advertiser-row,
.p2p-chat-order-bar,
.p2p-payment-heading {
  justify-content: space-between;
}

.p2p-market-screen {
  padding-bottom: 28px;
}

.p2p-market-header {
  gap: 12px;
  margin-bottom: 18px;
}

.p2p-market-top-tabs {
  flex: 1;
  justify-content: center;
  gap: 22px;
}

.p2p-market-top-tabs button,
.p2p-market-mode-toggle button {
  border: 0;
  background: transparent;
  color: #a9b1c0;
  font-size: 1rem;
  font-weight: 700;
}

.p2p-market-top-tabs button.active {
  color: #ffffff;
}

.p2p-market-currency-chip,
.p2p-market-filter-chip {
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

.p2p-market-currency-chip {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
}

.p2p-market-mode-row {
  margin-bottom: 16px;
}

.p2p-market-mode-toggle {
  padding: 4px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
}

.p2p-market-mode-toggle button {
  min-width: 86px;
  min-height: 52px;
  border-radius: 18px;
}

.p2p-market-mode-toggle button.active {
  background: #eef1f7;
  color: #232b37;
}

.p2p-market-filter-row {
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.p2p-market-filter-chip {
  min-height: 42px;
  padding: 0 10px;
  border-radius: 14px;
}

.p2p-market-filter-chip .token-badge {
  width: 22px;
  height: 22px;
  box-shadow: none;
  font-size: 0.78rem;
}

.p2p-market-filter-action {
  margin-left: auto;
}

.p2p-offer-list {
  display: grid;
  gap: 14px;
}

.p2p-offer-card {
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.p2p-offer-merchant-line {
  gap: 12px;
}

.p2p-offer-avatar-wrap {
  position: relative;
}

.p2p-offer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 700;
}

.p2p-offer-online-dot {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #18c99c;
  border: 2px solid #2b3038;
}

.p2p-offer-name-row {
  gap: 8px;
  margin-bottom: 6px;
}

.p2p-offer-name-row strong {
  font-size: 1.02rem;
}

.p2p-offer-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.p2p-offer-badge.gold {
  background: #d7b068;
}

.p2p-offer-badge.silver {
  background: #9aa4b5;
}

.p2p-offer-head p,
.p2p-offer-body p,
.p2p-offer-side span {
  margin: 0;
  color: #b5bdca;
}

.p2p-offer-price {
  margin: 18px 0 12px;
  font-family: var(--display-font);
  font-size: 1.55rem;
  font-weight: 700;
}

.p2p-offer-side {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.p2p-offer-side strong {
  color: #d9e0e8;
}

.p2p-offer-buy-button {
  min-width: 118px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #39b784;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.p2p-inline-header {
  gap: 12px;
  margin-bottom: 18px;
}

.p2p-inline-header-spread {
  margin-bottom: 22px;
}

.p2p-buy-header-copy {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.p2p-buy-title-row {
  gap: 12px;
}

.p2p-buy-title-row .token-badge {
  width: 44px;
  height: 44px;
  box-shadow: none;
}

.p2p-buy-title-row strong,
.p2p-details-hero h1,
.p2p-chat-order-bar strong {
  display: block;
  font-family: var(--display-font);
}

.p2p-buy-title-row strong {
  font-size: 1.55rem;
}

.p2p-buy-title-row span,
.p2p-details-hero p,
.p2p-chat-order-bar span,
.p2p-chat-merchant-head span,
.p2p-merchant-main span,
.p2p-payment-footer span,
.p2p-payment-grid span {
  color: #d3dae5;
}

.p2p-refresh-button {
  color: #d3dae5;
}

.p2p-buy-card,
.p2p-method-card,
.p2p-subscribe-card,
.p2p-advertiser-card,
.p2p-merchant-card,
.p2p-payment-card,
.p2p-chat-warning-banner,
.p2p-help-button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
}

.p2p-buy-card {
  padding: 18px 16px 22px;
  border-radius: 26px;
}

.p2p-buy-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
}

.p2p-buy-tabs button {
  position: relative;
  padding: 0 0 10px;
  border: 0;
  background: transparent;
  color: #8f98a8;
  font-size: 1rem;
  font-weight: 700;
}

.p2p-buy-tabs button.active {
  color: #ffffff;
}

.p2p-buy-tabs button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: #f1c45e;
}

.p2p-amount-row {
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.p2p-amount-row input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #a3adbf;
  font-size: 4rem;
  font-weight: 700;
}

.p2p-amount-row input:focus {
  outline: none;
}

.p2p-amount-meta {
  gap: 12px;
  flex-shrink: 0;
}

.p2p-amount-meta strong {
  font-size: 1.05rem;
}

.p2p-amount-meta button,
.p2p-header-link,
.p2p-shortcut-link,
.p2p-chat-inline-link {
  border: 0;
  background: transparent;
  color: #f1c45e;
  font-size: 1rem;
  font-weight: 700;
}

.p2p-limit-row,
.p2p-receive-row {
  color: #a6b0c1;
}

.p2p-limit-row {
  margin-top: 18px;
  font-size: 0.98rem;
}

.p2p-receive-row {
  margin-top: 32px;
  font-size: 1.2rem;
  font-weight: 700;
}

.p2p-method-card {
  width: 100%;
  margin-bottom: 18px;
  padding: 22px 18px;
  border-radius: 22px;
  color: #ffffff;
  text-align: left;
}

.p2p-method-main,
.p2p-subscribe-row,
.p2p-advertiser-row {
  gap: 12px;
}

.p2p-method-dot,
.p2p-online-dot,
.p2p-merchant-verified {
  flex-shrink: 0;
}

.p2p-method-dot {
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: #18c99c;
}

.p2p-method-meta,
.p2p-advertiser-row .inline-action {
  gap: 8px;
  color: #d9e0e8;
}

.p2p-subscribe-card,
.p2p-advertiser-card {
  margin-bottom: 22px;
  padding: 0 0 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.p2p-subscribe-card h2,
.p2p-advertiser-card h2 {
  margin: 0 0 22px;
  font-family: var(--display-font);
  font-size: 1.1rem;
}

.p2p-subscribe-row {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.p2p-subscribe-row strong,
.p2p-advertiser-name-row strong {
  display: block;
  font-size: 1rem;
}

.p2p-subscribe-row span {
  color: #22c58b;
}

.p2p-advertiser-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p2p-merchant-verified {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f1c45e;
  box-shadow: inset 0 0 0 4px rgba(47, 52, 62, 0.72);
}

.p2p-online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #18c99c;
}

.p2p-advertiser-notice {
  margin-top: 28px;
  color: #d8dee7;
  font-size: 0.98rem;
  line-height: 1.6;
}

.p2p-advertiser-notice p {
  margin: 0 0 14px;
}

.p2p-place-order-button,
.p2p-notify-button {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 14px;
  font-size: 1.12rem;
  font-weight: 700;
}

.p2p-place-order-button {
  background: #39b784;
  color: #ffffff;
}

.p2p-details-hero {
  margin-bottom: 22px;
}

.p2p-details-hero h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  line-height: 1.05;
}

.p2p-details-hero p {
  margin: 0 0 10px;
  font-size: 1rem;
}

.p2p-merchant-card,
.p2p-payment-card {
  position: relative;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 24px;
}

.p2p-merchant-main {
  gap: 12px;
}

.p2p-merchant-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f5f6fa;
  color: #202735;
  font-size: 1.6rem;
  font-weight: 700;
}

.p2p-chat-entry-button {
  position: relative;
  min-width: 88px;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #f6d331;
  color: #232b37;
  font-size: 1rem;
  font-weight: 700;
}

.p2p-chat-entry-button span {
  position: absolute;
  top: -7px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ff436b;
  color: #ffffff;
  font-size: 0.75rem;
}

.p2p-payment-card {
  padding-left: 32px;
}

.p2p-step-marker {
  position: absolute;
  left: -10px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f5f6fa;
  color: #202735;
  font-size: 1rem;
  font-weight: 700;
}

.p2p-step-marker.secondary {
  position: static;
  width: 32px;
  height: 32px;
}

.p2p-payment-body {
  display: grid;
  gap: 18px;
}

.p2p-payment-heading strong,
.p2p-payment-footer strong {
  font-size: 1rem;
}

.p2p-payment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 12px;
}

.p2p-payment-grid span {
  display: block;
  color: #aab2c1;
  margin-bottom: 8px;
}

.p2p-payment-grid strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.5;
}

.p2p-copy-button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #d6dce6;
  display: grid;
  place-items: center;
  align-self: center;
}

.p2p-order-link {
  width: fit-content;
  padding: 0;
}

.p2p-payment-footer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.p2p-help-card {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.p2p-help-button {
  width: 102px;
  min-height: 92px;
  border-radius: 20px;
  border: 0;
  color: #d8dee8;
  display: grid;
  place-items: center;
  gap: 8px;
}

.p2p-help-button .ui-icon {
  width: 28px;
  height: 28px;
}

.p2p-notify-button {
  background: #f6d331;
  color: #232b37;
}

.p2p-chat-screen {
  padding: 0 0 18px;
}

.p2p-chat-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 12px;
  background: rgba(22, 26, 34, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.p2p-chat-order-bar {
  padding: 14px;
  gap: 12px;
}

.p2p-status-chip {
  min-width: 126px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #f6d331;
  color: #232b37;
  font-size: 1rem;
  font-weight: 700;
}

.p2p-status-chip.active {
  background: #f6d331;
}

.p2p-chat-warning-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin: 0 14px 18px;
  padding: 16px;
  border-radius: 20px;
}

.p2p-chat-warning-banner p {
  margin: 0;
  color: #d9dfe8;
  line-height: 1.5;
}

.p2p-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 270px);
  padding: 0 14px 14px;
}

.p2p-chat-bubble {
  max-width: 88%;
  padding: 18px;
  border-radius: 24px;
  line-height: 1.45;
}

.p2p-chat-bubble.system {
  background: rgba(15, 18, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.p2p-chat-bubble.seller {
  align-self: flex-start;
  background: #3a3f4d;
}

.p2p-chat-bubble.user {
  align-self: flex-end;
  background: #f6d331;
  color: #232b37;
}

.p2p-chat-bubble p {
  margin: 0;
  white-space: pre-line;
}

.p2p-chat-bubble span {
  display: block;
  margin-top: 10px;
  color: #aab2c0;
  font-size: 0.84rem;
  text-align: right;
}

.p2p-chat-inline-link {
  margin-top: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.p2p-chat-composer {
  position: sticky;
  bottom: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  background: rgba(22, 26, 34, 0.96);
}

.p2p-chat-send-icon {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #d8dee8;
  display: grid;
  place-items: center;
}

@media (max-width: 420px) {
  .trade-screen-book-layout {
    gap: 12px;
  }

  .trade-screen-controls {
    flex-basis: 58%;
  }

  .trade-screen-pair strong {
    font-size: 1.42rem;
  }

  .trade-screen-mid-price {
    font-size: 1.9rem;
  }

  .trade-screen-tabs {
    gap: 8px;
    overflow-x: auto;
  }

  .trade-screen-tabs button {
    white-space: nowrap;
  }

  .p2p-buy-title-row strong,
  .p2p-details-hero h1 {
    font-size: 1.7rem;
  }

  .p2p-amount-row input {
    font-size: 3.4rem;
  }

  .p2p-chat-order-bar {
    align-items: flex-start;
    flex-direction: column;
  }
}