/* Shared visual vocabulary from MexcTransBot / MexcGraph1.
   Loaded last: screen structure and application behavior stay in their existing files. */
:root {
  --bg: #050911;
  --bg-secondary: #0b1420;
  --surface: #101721;
  --surface-hover: #152334;
  --border: #27364a;
  --border-hover: #395773;
  --text-primary: #f7f9fc;
  --text-secondary: #b4c0d0;
  --text-muted: #8f99aa;
  --green: #30c49a;
  --green-glow: rgb(48 196 154 / 16%);
  --green-surface: #123c35;
  --green-border: #286453;
  --blue: #1683ff;
  --cyan: #13b8e8;
  --blue-soft: #8bc9ff;
  --shadow: 0 12px 30px rgb(0 8 20 / 24%), inset 0 1px 0 rgb(255 255 255 / 3%);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --line: var(--border);
  --soft-line: #1d2a3b;
  --card: var(--surface);
  --raised: var(--surface-hover);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --space-shift: 0px;
  --motion-duration: 180ms;
  --focus: #75c4ff;
  --button-gradient: linear-gradient(105deg, var(--blue), var(--cyan));
  --profile-surface: rgb(8 35 65 / 92%);
  --profile-border: #234765;
  --notice-bg: #252314;
  --notice-border: #665325;
  --notice-text: #ffe4a6;
  --error-bg: #341c23;
  --error-border: #904e4e;
  --error-text: #ffc7c7;
  font-family: Inter, "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html { background: var(--bg); }
body { position: relative; isolation: isolate; color: var(--text-primary); }
body::before {
  z-index: 0;
  inset: -48px 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(3 8 15 / 62%), rgb(3 8 15 / 35%)), url('/static/assets/space-background.png');
  background-position: center top;
  transform: translate3d(0, var(--space-shift), 0);
}
html.motion-enabled body::before { will-change: transform; }
.app { position: relative; z-index: 1; width: min(100%, 480px); }
button, input { font-family: inherit; -webkit-tap-highlight-color: transparent; }
button {
  transition: transform var(--motion-duration) ease, filter var(--motion-duration) ease,
    background var(--motion-duration) ease, border-color var(--motion-duration) ease,
    box-shadow var(--motion-duration) ease;
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
button:disabled { transform: none; box-shadow: none; }
.profile-header, .card, .transaction, .modal {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.profile-header { background: var(--profile-surface); border-color: var(--profile-border); }
.card { padding: 22px 20px; }
.profile-header .brand strong { color: var(--text-primary); }
.profile-header .avatar { background: var(--bg-secondary); border-color: var(--border-hover); }
.profile-copy h1 { font-size: 14px; font-weight: 700; line-height: 1.35; }
.profile-eyebrow, .eyebrow { color: var(--blue-soft); font-size: 12px; font-weight: 650; }
.profile-link { color: var(--blue-soft); min-height: 44px; }
.profile-header .profile-user { display: flex; align-items: center; gap: 12px; flex: 1; }
.profile-header .profile-copy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; text-align: right; }
.profile-header .profile-copy h1 { margin: 0; max-width: 100%; }
.profile-header .profile-copy .profile-link { max-width: 100%; min-height: 24px; padding: 0; margin: 0; text-align: right; line-height: 1.4; }
.profile-header .telegram-user-button { display: inline-flex; float: none; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 32px; margin: 2px 0 0; padding: 6px 10px; border: 1px solid var(--green-border); border-radius: 18px; background: var(--green-surface); color: var(--green); box-shadow: 0 0 14px var(--green-glow); font-size: 10px; white-space: nowrap; }
.profile-header .telegram-user-button:active:not(:disabled) { transform: scale(.97); }
.profile-header .avatar { align-self: center; flex-shrink: 0; }
h2, #withdrawal h2, .orders h2, .modal h2 {
  color: var(--text-primary); font-size: 25px; font-weight: 720;
  line-height: 1.25; letter-spacing: -.4px;
}
.balance, .pnl-row strong, .result, .tx-value strong, .tx-number, #amount, #maximum {
  font-variant-numeric: tabular-nums lining-nums;
}
.balance { font-size: clamp(27px, 7.8vw, 38px); font-weight: 780; letter-spacing: -.8px; line-height: 1.2; }
.balance-card > p, .muted, #complete > p:not(.result), #detail-content {
  color: var(--text-secondary); font-size: 14px; line-height: 1.65;
}
.pnl-row { gap: 12px; flex-wrap: wrap; }
.pnl-row mark { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pnl-row strong { font-size: clamp(18px, 5.2vw, 23px); letter-spacing: -.3px; }
.pnl-row label, .axis { color: var(--text-muted); font-size: 12px; }
.pnl-row mark { color: var(--green); background: var(--green-surface); border-radius: var(--radius-sm); }
.chart .line { stroke-width: 2; }
.primary, .secondary, .segmented, input, .amount-input { border-radius: var(--radius-sm); }
.primary { background: var(--button-gradient); box-shadow: 0 6px 20px rgb(22 131 255 / 15%); }
.secondary { background: var(--bg-secondary); border-color: var(--border-hover); }
.segmented { border-color: var(--border); }
.orders .pages { margin-top: 20px; }
.orders #history-title { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 14px; line-height: 1.25; }
.orders #history-title small { font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: #94a0b2; }
.orders .history-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; padding: 4px; margin: 0 0 18px; border-radius: 12px; border-color: #30333d; background: #1c2029; overflow: visible; }
.orders .history-filters button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: 0; padding: 10px 4px; border: 0; border-radius: 8px; background: transparent; color: #a4afbf; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center; }
.orders .history-filters button:hover { background: #2a2d36; color: white; }
.orders .history-filters button.active { background: #087cff; color: white; box-shadow: 0 2px 6px rgb(0 70 180 / 22%); }
.orders .history-filters button:focus-visible { outline-offset: -2px; }
.segmented button { font-size: 14px; font-weight: 650; color: var(--text-secondary); background: var(--bg-secondary); }
.segmented button.active { background: var(--blue); color: var(--text-primary); }
.primary:active:not(:disabled), .secondary:active:not(:disabled), .profile-link:active:not(:disabled), .amount-input button:active { transform: scale(.97); }

/* Keep the entire row as one accessible button. The circular icon shares
   its existing click handler, so there are no nested buttons or new receipt logic. */
.transaction {
  grid-template-columns: 24px 44px minmax(0, 1fr) auto;
  gap: 10px; min-height: 88px; padding: 16px 12px;
  backdrop-filter: none;
}
.tx-number { color: var(--text-muted); font-size: 12px; text-align: center; }
.tx-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--green-border);
  background: var(--green-surface); color: var(--green);
  box-shadow: 0 0 14px var(--green-glow);
  transition: transform var(--motion-duration) ease, box-shadow var(--motion-duration) ease;
}
.tx-icon svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tx-copy strong { font-size: 14px; font-weight: 650; }
.tx-copy span, .tx-value span { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.tx-copy span { overflow-wrap: anywhere; }
.tx-value strong { font-size: 14px; font-weight: 700; color: var(--green); }
.transaction:active { transform: none; background: var(--surface-hover); }
.transaction:active .tx-icon { transform: scale(.97); }
.transaction:focus-visible .tx-icon { box-shadow: 0 0 20px var(--green-glow); }
.field { color: var(--text-muted); border-color: var(--soft-line); }
input, .amount-input { background: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); }
input:disabled { color: var(--text-muted); }
.amount-input:focus-within { border-color: var(--focus); }
.amount-input button { min-width: 56px; min-height: 56px; color: var(--blue-soft); }
.success-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green-surface); color: var(--green); box-shadow: 0 0 18px var(--green-glow); }
.modal {
  background: linear-gradient(155deg, var(--surface-hover), var(--surface));
  padding: 30px 22px 22px;
  box-shadow: var(--shadow), 0 0 28px rgb(22 131 255 / 8%);
}
.modal::backdrop { background: rgb(3 6 10 / 82%); }
.modal .close { min-width: 44px; min-height: 44px; top: 5px; right: 7px; color: var(--text-muted); }
.modal .eyebrow { padding-right: 32px; }
.modal .result, #complete .result { color: var(--green); font-size: clamp(26px, 7vw, 34px); font-weight: 780; letter-spacing: -.6px; overflow-wrap: anywhere; text-shadow: 0 0 14px var(--green-glow); }
.detail-row { border-color: var(--border); line-height: 1.5; }
.detail-row dt { color: var(--text-muted); }
.detail-row dd { color: var(--text-primary); overflow-wrap: anywhere; }
.status-notice { border-color: var(--notice-border); background: var(--notice-bg); color: var(--notice-text); border-radius: var(--radius-md); }
#context-notice { font-size: 12px; line-height: 1.55; }
.modal #context-notice { margin: 0 48px 20px 0; padding: 10px 12px; }
.balance-card > .balance + hr { margin-top: 24px; }
#error { border-color: var(--error-border); background: var(--error-bg); color: var(--error-text); border-radius: var(--radius-sm); }
footer { color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; text-align: center; }
.contact-link { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 12px; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .transaction:hover { background: var(--surface-hover); border-color: var(--border-hover); }
  .transaction:hover .tx-icon { transform: scale(1.03); box-shadow: 0 0 22px var(--green-glow); }
  .transaction:active .tx-icon { transform: scale(.97); }
  .primary:hover:not(:disabled) { filter: brightness(1.08); }
  .secondary:hover:not(:disabled), .segmented button:not(.active):hover { background: var(--surface-hover); border-color: var(--border-hover); }
  .profile-link:hover:not(:disabled), .close:hover { color: var(--text-primary); }
}
@media (max-width: 390px) {
  .card { padding: 20px 15px; }
  .transaction { grid-template-columns: 22px 44px minmax(0, 1fr); gap: 9px; padding: 14px 10px; }
  .tx-number, .tx-icon { grid-row: 1 / 3; }
  .tx-copy { grid-column: 3; }
  .tx-copy span { margin-top: 3px; }
  .tx-value { grid-column: 3; margin-left: 0; text-align: left; white-space: normal; }
  .tx-value strong { white-space: nowrap; }
  .tx-value span { display: inline; margin-left: 8px; }
  .profile-header { padding: 12px; }
  .profile-user { gap: 7px; }
  .profile-header .brand { gap: 5px; }
  .profile-header .brand strong { font-size: 20px; }
  .profile-header .brand img { width: 24px; flex-basis: 24px; }
  .profile-copy h1 { max-width: 112px; font-size: 12px; }
  .profile-copy .profile-link { font-size: 11px; }
}
.payment-summary, .payment-bank { margin-bottom: 22px; }
.payment-bank { padding: 28px 25px; background: #15181f; border-radius: 22px; }
.payment-bank h2 { margin: 0 0 22px; font-size: 24px; font-weight: 500; }
.payment-bank dl { margin: 0; }
.payment-bank .payment-field { padding: 26px 0; border-color: #2c2e37; }
.payment-bank .payment-field dt { margin-bottom: 8px; font-size: 14px; }
.payment-bank .payment-field dd { font-size: 20px; line-height: 1.5; }
.payment-bank .payment-field:last-child { padding-bottom: 20px; }
.payment-bank #copy-card { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 13px; background: #2a2d36; color: #008bff; font-size: 23px; }
.payment-bank #copy-card svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.payment-example { display: inline-block; margin-left: 8px; color: var(--text-muted); font-size: 12px; font-weight: 400; }
#payment-card-mask { font-size: clamp(16px, 4.7vw, 20px); white-space: nowrap; }
#payment .payment-notice { align-items: flex-start; padding: 18px; margin: 24px 0 16px; font-size: 14px; color: #ffd33d; }
.payment-notice > span:first-child { font-size: 22px; line-height: 1.3; }
.payment-total { font-size: clamp(27px, 7.8vw, 38px); font-weight: 780; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payment-summary { padding: 28px 25px; border-radius: 22px; background: #15181f; }
.payment-summary .eyebrow { color: #008bff; font-size: 14px; }
.payment-summary h2 { margin: 18px 0 22px; font-size: clamp(25px, 7vw, 32px); line-height: 1.3; }
.payment-summary .payment-total { margin: 0 0 24px; font-size: clamp(36px, 11vw, 50px); line-height: 1.2; font-weight: 780; letter-spacing: -.7px; }
.payment-summary .muted { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--text-muted); }
.payment-field { padding: 22px 0; border-bottom: 1px solid var(--border); }
.payment-field:last-child { border-bottom: 0; padding-bottom: 0; }
.payment-field dt { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.payment-field dd { margin: 0; font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payment-card-number { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#copy-card { flex-shrink: 0; min-width: 44px; color: var(--blue-soft); }
#payment .status-notice { line-height: 1.65; }
#payment-paid { margin-top: 0; }
.deposit-modal { width: min(464px, calc(100% - 28px)); padding: 22px 18px 18px; }
.deposit-modal #detail-title { margin: 18px 38px 36px 0; font-size: clamp(27px, 7.5vw, 38px); line-height: 1.45; font-weight: 750; letter-spacing: -.6px; }
.deposit-modal .close { top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; line-height: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); }
.deposit-modal label { color: var(--text-primary); font-size: 15px; }
.deposit-input { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-right: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); }
.deposit-input:focus-within { border-color: var(--focus); }
.deposit-input input { margin: 0; border: 0; background: transparent; min-height: 64px; padding: 14px 20px; font-variant-numeric: tabular-nums; }
.deposit-input span { flex-shrink: 0; color: var(--text-primary); font-size: 25px; font-weight: 750; }
#deposit-hint { margin: 16px 0 10px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.status-note { color: var(--notice-text); font-size: 12px; }
#deposit-continue { min-height: 56px; margin-top: 24px; font-size: 17px; }
#deposit-continue:disabled { opacity: .45; }
.deposit-modal, .withdrawal-warning { background: #1c1d22; border-color: #36373e; }
.deposit-modal .deposit-input, #withdrawal input, #withdrawal .amount-input { background: #111115; border-color: #393a42; border-radius: 15px; }
#withdrawal { background: #15181f; border-radius: 22px; }
#withdrawal input { min-height: 64px; padding: 18px 22px; }
input, textarea, select { font-family: inherit; font-size: 20px; font-weight: 500; font-style: normal; line-height: 1.4; letter-spacing: 0; }
input::placeholder, textarea::placeholder { font: inherit; letter-spacing: inherit; }
#withdrawal .primary { min-height: 58px; font-size: 20px; border-radius: 16px; }
.withdrawal-warning { width: min(455px, calc(100% - 28px)); padding: 20px; }
.withdrawal-warning #dialog-eyebrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 13px; background: #3c3420; color: #ffd536; font-size: 28px; }
.withdrawal-warning #detail-title { margin: 18px 0 22px; font-size: clamp(28px, 7.5vw, 36px); line-height: 1.4; }
.withdrawal-warning #detail-content > p:first-child { color: #b7b7bf; font-size: 19px; line-height: 1.5; }
.withdrawal-warning #dialog-ok { min-height: 44px; font-size: 16px; font-weight: 500; }
.processing-modal { width: min(464px, calc(100% - 28px)); padding: 24px; background: #1c1d22; border-color: #36373e; }
.processing-modal #dialog-eyebrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 13px; background: #3c3420; color: #ffd536; }
.processing-modal #dialog-eyebrow svg { width: 28px; height: 28px; }
.processing-modal .close { top: 24px; right: 16px; display: grid; place-items: center; padding: 0; line-height: 1; }
.processing-modal #detail-title { margin: 18px 0 22px; font-size: clamp(27px, 7vw, 34px); line-height: 1.3; }
.processing-modal #detail-content > p:not(.status-note) { margin: 0 0 28px; font-size: 19px; line-height: 1.55; color: #b7b7bf; }
.processing-modal a { color: #008bff; text-decoration: underline; }
.processing-modal #dialog-ok { min-height: 56px; border-radius: 13px; font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  body::before { transform: none; will-change: auto; }
  button, .tx-icon { transform: none !important; }
}