:root {
  --bg: #1c1f2d;
  --surface-0: #121520;
  --surface-1: #1c1f2d;
  --surface-2: #2b3040;
  --surface-3: #303440;
  --sidebar-bg: #1b1e2b;
  --panel: var(--surface-2);
  --panel2: var(--surface-2);
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.30);
  --text: #fff;
  --text-secondary: rgba(255,255,255,.72);
  --muted: rgba(255,255,255,.50);
  --green: #0faf59;
  --green-dim: #0b934a;
  --red: #db4635;
  --blue: #026fd3;
  --blue-active: #1a6cfe;
  --blue-bright: #2b99ff;
  --yellow: #ff9d00;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --sidebar-w: 80px;
  --topbar-h: 63px;
  --control-h: 38px;
  --shadow-green: 0 4px 10px rgba(53,184,114,.25);
  --shadow-red: 0 4px 10px rgba(255,82,82,.25);
  --shadow-pop: 0 18px 44px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; max-width: 100%; }
body {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(circle at 50% 0%, #1d233a 0%, #121520 85%);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--green); text-decoration: none; transition: color .15s ease; }
button, input, select, textarea { font-family: inherit; }
button, .btn, input, select, textarea { min-height: 44px; }
img, svg { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: anywhere; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px 0 10px;
  gap: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 20;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.sidebar-spacer { flex: 1 1 auto; min-height: 12px; width: 100%; }
.sidebar a,
.sidebar .sidebar-btn,
.sidebar-help {
  position: relative;
  width: 60px;
  min-height: 62px;
  height: 62px;
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: none;
  text-transform: uppercase;
}
.sidebar a.active,
.sidebar .sidebar-btn.active {
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}
.sidebar a:not(.active):not(.sidebar-help):hover,
.sidebar .sidebar-btn:not(.active):hover,
.sidebar-help:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.sidebar .icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
}
.sidebar .icon svg { width: 20px; height: 20px; display: block; }
.sidebar-label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
  max-width: 56px;
  overflow: hidden;
}
.sidebar-help {
  height: auto !important;
  min-height: 44px !important;
  margin-bottom: 4px;
  color: var(--green) !important;
}
.sidebar-help:hover {
  background: rgba(15,175,89,.12) !important;
  color: #14bf64 !important;
}
.sidebar-help .sidebar-label { color: inherit; font-size: 11px; line-height: 14px; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 10px 10px;
  border-bottom: 0;
  background: var(--surface-1);
  position: relative;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', Sora, 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.18s ease;
}
a.brand:hover { opacity: 0.94; }
a.brand:hover .brand-mark {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(15, 175, 89, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-lite {
  color: #f8fafc;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand-bin {
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #22c55e 0%, #4ade80 45%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.22));
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  color: #ecfdf5;
  background: linear-gradient(155deg, #087a40 0%, #0faf59 46%, #35CB01 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow:
    0 2px 12px rgba(15, 175, 89, 0.32),
    0 0 0 1px rgba(15, 175, 89, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.brand-mark-svg {
  display: block;
  width: 86%;
  height: 86%;
  overflow: visible;
}
.brand-name {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(100deg, #f8fafc 0%, #e2e8f0 40%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-sub { display: none; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.icon-btn {
  position: relative; width: 38px; height: 38px; min-height: 38px; border-radius: var(--radius-xs);
  background: var(--surface-2); border: 0; color: var(--text);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--blue-bright); color: #fff; border-radius: 999px;
  font-size: 10px; padding: 1px 5px; line-height: 1.5; min-width: 16px; text-align: center;
}

/* Account switcher — Quotex-matched chip (.Xlyoi) */
.acct-wrap { position: relative; }
.account-switch {
  display: flex; align-items: center; gap: 10px;
  height: 38px; min-height: 38px; min-width: 143px;
  background: var(--surface-2); border: 0;
  border-radius: 4px; padding: 4px 12px; cursor: pointer; color: #fff;
  font-size: 14px; line-height: 18px; overflow: visible;
  position: relative; user-select: none; text-align: left;
}
.account-switch[aria-expanded="true"] { background: #191919; }
.acct-level {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
}
.acct-level-icon { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.acct-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; }
.acct-label {
  display: block; font-size: 10px; line-height: 12px; font-weight: 900;
  color: #9a9da6; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.acct-live-btn .acct-label { color: var(--green); }
.acct-demo-btn .acct-label { color: #9a9da6; }
.acct-bal {
  font-size: 14px; line-height: 18px; font-weight: 700;
  display: block; color: #fff; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.acct-bal.balance-credit { animation: balanceCredit 1.2s ease; }
.acct-bal.balance-debit { animation: balanceDebit 1.2s ease; }
@keyframes balanceCredit {
  0%, 100% { color: #fff; text-shadow: none; }
  25%, 70% { color: #86efac; text-shadow: 0 0 13px rgba(34,197,94,.65); }
}
@keyframes balanceDebit {
  0%, 100% { color: #fff; }
  25%, 70% { color: #fca5a5; }
}
.acct-caret {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  color: #fff; width: 9px; height: 9px;
}
.acct-caret svg {
  display: block; width: 9px; height: 9px;
  transition: transform .2s linear;
}
.account-switch[aria-expanded="true"] .acct-caret svg { transform: rotate(180deg); }
#acctMenu {
  position: absolute; right: 0; top: 46px; z-index: 50;
  width: 417px;
  max-width: calc(100vw - 20px);
  height: 358px;
  max-height: min(358px, calc(100vh - 80px));
  padding: 0;
  background: #1a1d27;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  overflow: hidden;
}
.acct-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: transparent; border: 0; color: var(--text);
  padding: 10px 12px; border-radius: 9px; cursor: pointer; font-size: 13.5px;
}
.acct-item:hover { background: #223045; }
.acct-item.on { background: #14351f; color: #bbf7d0; }
.acct-item b { font-weight: 600; }

.acct-panel { /* alias for #acctMenu */ }
.acct-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  height: 100%;
  min-height: 0;
}
.acct-panel-left {
  padding: 10px 14px 12px;
  border-right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #212532;
  overflow: auto;
}
.acct-panel-right {
  display: flex;
  flex-direction: column;
  padding: 10px 0 8px;
  background: #12141c;
  min-height: 0;
}
.acct-panel-right a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  height: auto;
  padding: 10px 18px;
  border-radius: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.acct-panel-right a:hover { background: rgba(255,255,255,.04); }
.acct-logout-sep {
  height: 1px;
  margin: 8px 14px 4px;
  background: rgba(219, 70, 53, .55);
  flex: 0 0 auto;
}
.acct-panel-right .acct-logout {
  color: #ff6b5b;
  margin-top: auto;
  font-weight: 600;
}
.acct-logout-icon { display: block; flex: none; color: #ff6b5b; }

.acct-standard-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 32px; padding: 0 8px 0 10px;
  border-radius: 4px;
  background: #2a2f3d;
}
.acct-standard-left {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.acct-standard-plane { display: block; flex: none; }
.acct-standard-label {
  color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
}
.acct-standard-profit { color: #fff; font-size: 12px; font-weight: 700; }
.acct-standard-eye {
  width: 24px; min-width: 24px; height: 24px; min-height: 24px !important;
  padding: 0; border: 0; border-radius: 3px;
  background: rgba(0,0,0,.25); color: rgba(255,255,255,.75);
  display: grid; place-items: center; cursor: default; flex: none;
}
.acct-standard-eye:hover { color: #fff; background: rgba(0,0,0,.35); }

.acct-user { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.acct-email {
  font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-id { color: rgba(255,255,255,.45); font-size: 11px; line-height: 1.3; }

.acct-currency-row {
  display: flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 2px;
}
.acct-currency-label { color: rgba(255,255,255,.5); font-size: 12px; font-weight: 500; }
.acct-currency-code { font-size: 13px; font-weight: 700; color: #fff; }
.acct-currency-change {
  margin-left: auto; min-height: 24px !important; height: 24px; padding: 0 10px;
  border: 0; border-radius: 3px; background: #026fd3;
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .03em; cursor: pointer;
  text-transform: uppercase;
}
.acct-currency-change:hover { background: #1a7fe0; }
.acct-currency-picker {
  display: grid; gap: 2px; padding: 4px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 4px; background: #171a24;
}
.acct-currency-picker[hidden] { display: none !important; }
.acct-currency-opt {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; min-height: 32px !important; padding: 6px 10px; border: 0; border-radius: 4px;
  background: transparent; color: #fff; cursor: pointer; text-align: left; font-size: 12px;
}
.acct-currency-opt small { color: rgba(255,255,255,.45); font-size: 10px; }
.acct-currency-opt:hover { background: rgba(255,255,255,.06); }
.acct-currency-opt.on { background: rgba(2,111,211,.22); box-shadow: inset 2px 0 #026fd3; }

.acct-modes { display: flex; flex-direction: column; gap: 0; margin-top: 2px; }
.acct-mode-form { margin: 0; }
.acct-mode {
  width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px;
  min-height: 0 !important; padding: 8px 2px; border: 0; border-radius: 0;
  background: transparent; color: #fff; cursor: pointer; text-align: left;
}
.acct-mode:hover { background: transparent; }
.acct-mode.on { background: transparent; border: 0; }
.acct-radio {
  width: 16px; height: 16px; margin-top: 2px; flex: none;
  border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%;
  display: inline-block; position: relative; box-sizing: border-box;
}
.acct-mode.on .acct-radio::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%; background: #fff;
}
.acct-mode-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; flex: 1 1 auto;
}
.acct-mode-title {
  font-size: 13px; font-weight: 600; color: #fff; line-height: 1.25;
}
.acct-mode-bal {
  font-size: 18px; font-weight: 700; color: #fff; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.acct-limit-hint {
  display: block; margin-top: 2px;
  color: rgba(255,255,255,.42); font-size: 11px; font-weight: 400; line-height: 1.3;
}
.acct-set-limit {
  display: inline-block; margin-top: 4px;
  color: #2b99ff; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.2;
  pointer-events: none;
}
.acct-mode-divider {
  height: 1px; margin: 6px 0 4px;
  background: rgba(255,255,255,.08);
}
.acct-demo-row {
  display: grid;
  grid-template-columns: max-content 22px 1fr 18px;
  align-items: start;
  column-gap: 2px;
  width: 100%;
}
.acct-demo-row .acct-mode-form {
  grid-column: 1;
  width: max-content;
  max-width: 100%;
}
.acct-demo-row .acct-mode {
  width: auto;
  max-width: 100%;
  padding-right: 4px;
}
.acct-demo-row .acct-mode-body { width: auto; }
.acct-refresh-form {
  grid-column: 2;
  margin: 0;
  display: flex;
  align-items: center;
  align-self: end;
  margin-bottom: 8px;
}
.acct-refresh {
  width: 20px; min-width: 20px; height: 20px; min-height: 20px !important; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: rgba(255,255,255,.88);
  cursor: pointer; display: grid; place-items: center;
}
.acct-refresh:hover { background: transparent; color: #fff; }
.acct-demo-edit {
  grid-column: 4;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 8px; justify-self: end;
  color: rgba(255,255,255,.35); pointer-events: none;
}

.btn { border: 0; border-radius: 10px; padding: 10px 15px; cursor: pointer; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; }
.btn-green { background: var(--green); color: #04120a; }
.btn-green:hover { background: #4ade80; }
.btn-red { background: var(--red); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: #223045; }

.disclaimer {
  background: #3b2606; color: #fde68a; padding: 5px 16px; font-size: 11.5px;
  border-bottom: 1px solid #6b4708;
}
.content { flex: 1; padding: 14px 16px; min-width: 0; }
.content-wide { padding: 10px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; min-width: 0; }
.flash { margin: 10px 16px 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.flash-error { background: #450a0a; color: #fecaca; border: 1px solid #7f1d1d; }
.flash-success { background: #052e16; color: #bbf7d0; border: 1px solid #166534; }

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(34,197,94,.12), transparent 70%), #070a0f;
}
.auth-card { width: 100%; max-width: 430px; }
.auth-card h1 { margin: 0 0 6px; font-size: 26px; }
.auth-card p.muted { color: var(--muted); margin-top: 0; font-size: 14px; }
.auth-back { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 13px; }
.form-row { margin-bottom: 12px; }
.profile-avatar-upload { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.profile-avatar-preview {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(43,153,255,.45);
}
.profile-avatar-placeholder {
  display: grid; place-items: center; background: #d1e9ff; color: #155289;
  font-size: 24px; font-weight: 800;
}
.form-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; background: #0b1220; border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 12px; color: var(--text); font-size: 16px;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: var(--green);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Tables ---------- */
.table {
  width: 100%; border-collapse: collapse; display: block; overflow-x: auto;
  overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
}
.table thead, .table tbody { white-space: nowrap; }
.table tr { width: 100%; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px; }
.table th { color: var(--muted); font-weight: 500; }
.status-failed, .status-rejected, .status-lost { color: var(--red); }
.status-approved, .status-won { color: var(--green); }
.status-pending, .status-open { color: var(--yellow); }
.muted { color: var(--muted); }

/* ---------- Trading terminal ---------- */
.terminal {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: calc(100vh - 92px);
  min-height: 540px;
}
.term-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.term-chart-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.terminal > * { min-width: 0; max-width: 100%; }
.asset-bar {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: nowrap;
}
.cat-tabs {
  display: flex; gap: 4px; flex: 0 0 auto; padding: 3px;
  background: #0b1220; border: 1px solid var(--border); border-radius: 12px;
}
.cat-tab {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 16px; border-radius: 9px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; color: var(--muted); white-space: nowrap; background: transparent;
}
.cat-tab:hover { color: var(--text); background: #141d2a; }
.cat-tab.active { background: #1d4ed8; color: #fff; box-shadow: 0 2px 12px rgba(29,78,216,.35); }
.cat-tab.empty:not(.active) { opacity: .5; }

.chart-wrap {
  background: #080d14; border: 1px solid var(--border); border-radius: 14px;
  position: relative; flex: 1; min-height: 340px; overflow: hidden;
}
.price-chart { position: absolute; inset: 0; width: 100%; max-width: 100%; min-width: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.litebinx-chart-canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-tap-highlight-color: transparent; }
.chart-price-tag {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  background: #152033; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font-size: 12.5px; pointer-events: none;
}
.chart-tf {
  position: absolute; top: 10px; left: 12px; z-index: 3;
  background: #152033; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; font-size: 11.5px; color: var(--muted);
  pointer-events: none;
}
.trade-toast-stack {
  position: absolute; z-index: 8; top: 48px; right: 12px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  width: min(360px, calc(100% - 24px)); pointer-events: none;
}
.trade-toast {
  max-width: 100%; padding: 10px 13px; border-radius: 9px;
  background: #152033; color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.42); font-size: 12.5px;
  opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease;
}
.trade-toast.show { opacity: 1; transform: translateY(0); }
.trade-toast-up, .trade-toast-success { border-color: #15803d; background: #052e16; color: #bbf7d0; }
.trade-toast-down, .trade-toast-error { border-color: #991b1b; background: #450a0a; color: #fecaca; }

.term-trade {
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.term-history {
  flex: 0 0 auto;
  min-height: 140px;
  max-height: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.term-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 9px; overflow: auto; min-width: 0;
}
.tp-trade-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px 0; min-height: 36px;
}
.tp-asset-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-asset-meta strong { font-size: 13px; font-weight: 700; }
.tp-head { display: none; }
.tp-pct { color: var(--yellow); font-weight: 900; font-size: 12px; }
.tp-field {
  background: #0b1220; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
}
.tp-field label { display: block; font-size: 10px; color: var(--muted); letter-spacing: .06em; margin-bottom: 4px; }
.tp-stepper { display: flex; align-items: center; gap: 6px; }
.tp-stepper button {
  width: 44px; height: 44px; border-radius: 8px; flex: none;
  background: var(--panel2); border: 1px solid var(--border); color: #fff; cursor: pointer;
}
.tp-stepper button:hover { background: #223045; }
.tp-stepper input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text);
  text-align: center; font-size: 16px; font-weight: 600;
}
.tp-stepper input:focus { outline: none; }
.tp-hint {
  text-align: center; font-size: 9px; color: var(--blue);
  letter-spacing: .12em; margin-top: 5px;
}
.tp-up, .tp-down {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 10px; padding: 15px; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.tp-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "time invest"
    "payout payout"
    "error error"
    "up down";
  gap: 10px;
  padding: 10px 14px 14px;
}
.tp-order .tp-field:first-child { grid-area: time; }
.tp-order .tp-field:nth-child(2) { grid-area: invest; }
.tp-order .tp-payout { grid-area: payout; }
.tp-order .tp-order-error { grid-area: error; }
.tp-order .tp-up { grid-area: up; }
.tp-order .tp-down { grid-area: down; }
.tp-up { background: var(--green); color: #04120a; }
.tp-up:hover { background: #4ade80; }
.tp-down { background: var(--red); color: #fff; }
.tp-down:hover { background: #f87171; }
.tp-up[disabled], .tp-down[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.tp-up.is-loading, .tp-down.is-loading { position: relative; color: transparent; }
.tp-up.is-loading::after, .tp-down.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor;
  animation: orderSpin .7s linear infinite;
}
@keyframes orderSpin { to { transform: rotate(360deg); } }
.tp-order-error {
  padding: 8px 10px; border: 1px solid #7f1d1d; border-radius: 8px;
  background: #450a0a; color: #fecaca; font-size: 11.5px; line-height: 1.35;
}
.tp-payout { display: flex; align-items: center; font-size: 12px; color: var(--muted); }
.tp-payout strong { color: #fff; }

.tp-trades { margin-top: 0; border-top: 0; padding-top: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tp-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tp-tab {
  flex: 1; background: #0b1220; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 7px; font-size: 11.5px; cursor: pointer;
}
.tp-tab.active { background: #16233a; color: #fff; border-color: var(--blue); }
.tp-tab b { color: var(--green); }
.tp-timezone { color: var(--muted); font-size: 9.5px; margin: -2px 2px 6px; text-align: right; }
.tp-list { overflow: auto; max-height: none; flex: 1; }
.tp-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 18px 6px; }
.tp-row {
  padding: 8px 0; border-bottom: 1px solid #1b2534; font-size: 12px;
}
.tp-row-main { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tp-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tp-row-right { text-align: right; text-transform: capitalize; flex-shrink: 0; }
.tp-side {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 900;
  color: #fff; flex-shrink: 0;
}
.tp-side-up { background: #22c55e; }
.tp-side-down { background: #ef4444; }
.tp-row-main > :last-child { text-align: right; text-transform: capitalize; }
.tp-row-sym { color: var(--text); }
.tp-row-dir { font-size: 10px; color: var(--muted); }
.tp-row-times {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px;
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed #243044;
}
.tp-row-times span { display: flex; flex-direction: column; min-width: 0; }
.tp-row-times b { color: var(--muted); font-size: 9px; font-weight: 500; text-transform: uppercase; }
.tp-row-times time { color: #cbd5e1; font-size: 10px; white-space: nowrap; }
.tp-countdown { color: #facc15; font-variant-numeric: tabular-nums; font-weight: 700; }
.tp-countdown.ending { color: #fb7185; animation: countdownPulse .75s ease-in-out infinite alternate; }
@keyframes countdownPulse { to { opacity: .55; } }

/* ---------- Admin ---------- */
.admin-layout { display: flex; min-height: 100vh; }
.admin-nav {
  width: 240px; background: #080c11; border-right: 1px solid var(--border);
  padding: 16px; position: sticky; top: 0; height: 100vh; overflow: auto;
}
.admin-nav a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--muted); margin-bottom: 4px; font-size: 14px; }
.admin-nav a.active, .admin-nav a:hover { background: #141d2a; color: #fff; }
.admin-main { flex: 1; padding: 20px; min-width: 0; }
.admin-mobile-bar, .admin-nav-backdrop { display: none; }
.admin-main > div[style*="display:flex"],
.admin-main > form[style*="display:flex"],
.card > div[style*="display:flex"] { flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.stat .n { font-size: 28px; font-weight: 700; }
.stat .l { color: var(--muted); font-size: 13px; }

@media (max-width: 1000px) {
  .terminal { height: auto; min-height: 0; }
  .chart-wrap { min-height: 320px; height: clamp(320px, 46vh, 520px); flex: none; }
  .term-history { max-height: 260px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .stats, .grid-2 { grid-template-columns: 1fr; }
  .app { display: block; min-height: 100dvh; }
  .sidebar {
    position: fixed; z-index: 100; inset: auto 0 0; width: 100%; height: auto;
    flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 4px max(4px, env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--border); background: rgba(27,30,43,.97);
    backdrop-filter: blur(12px);
  }
  .sidebar-nav {
    flex: 1; flex-direction: row; justify-content: space-around; gap: 0; width: auto;
  }
  .sidebar-spacer,
  .sidebar-help { display: none; }
  .sidebar a,
  .sidebar .sidebar-btn {
    width: auto; min-width: 56px; flex: 1; max-width: 92px; min-height: 54px; height: auto;
    border-radius: 9px; font-size: 8.5px; line-height: 11px;
  }
  .sidebar-label { font-size: inherit; line-height: inherit; max-width: none; }
  .main { min-height: 100dvh; padding-bottom: calc(63px + env(safe-area-inset-bottom)); }
  .brand-sub { display: none; }
  .topbar { height: auto; min-height: 58px; flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .topbar > .brand { margin-right: auto; }
  .top-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 44px auto auto; gap: 6px; }
  .account-switch { width: 100%; justify-content: center; padding-inline: 8px; }
  .acct-bal { font-size: 13px; }
  #acctMenu { position: fixed; top: 112px; right: 10px; left: 10px; width: auto; max-width: none; height: auto; max-height: min(90vh, 520px); }
  .acct-panel-grid { grid-template-columns: 1fr; }
  .disclaimer { padding: 6px 10px; text-align: center; line-height: 1.35; }
  .content { padding: 12px 10px; }
  .content-wide { padding: 8px; }
  .card { padding: 14px; }
  .flash { margin-inline: 10px; }

  .terminal { gap: 8px; min-height: 0; }
  .asset-bar { flex-direction: row; gap: 0; overflow: visible; }
  .cat-tabs { width: 100%; }
  .cat-tab { flex: 1; padding: 0 8px; }
  .chart-wrap { height: clamp(260px, 40dvh, 400px); min-height: 220px; border-radius: 12px; }
  .term-trade { border-radius: 12px; }
  .term-history { border-radius: 12px; max-height: 120px; }
  .tp-order {
    gap: 6px; padding: 8px;
  }
  .tp-field { padding: 0; }
  .tp-field label, .tp-hint { text-align: left; }
  .tp-hint { display: none; }
  .tp-stepper { gap: 0; }
  .tp-stepper button { width: 30px; height: 100%; }
  .tp-up, .tp-down { min-height: 42px; padding: 0 12px; }
  .tp-payout { min-height: 16px; }
  .tp-trades { padding: 6px 10px 8px; }
  .tp-tab { min-height: 36px; }

  .admin-layout { display: block; }
  .admin-mobile-bar {
    display: flex; position: sticky; top: 0; z-index: 80; min-height: 58px;
    align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px;
    background: #0c1118; border-bottom: 1px solid var(--border);
  }
  .admin-menu-toggle { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); color: var(--text); }
  .admin-nav {
    position: fixed; z-index: 100; inset: 0 auto 0 0; width: min(280px, 86vw); height: 100dvh;
    transform: translateX(-102%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(0,0,0,.55);
  }
  .admin-nav.open { transform: translateX(0); }
  .admin-nav-backdrop {
    position: fixed; z-index: 90; inset: 0; background: rgba(0,0,0,.62); border: 0;
  }
  .admin-nav-backdrop.open { display: block; }
  .admin-nav a { min-height: 44px; display: flex; align-items: center; }
  .admin-main { padding: 14px 10px 28px; width: 100%; }
  .admin-main h1 { font-size: 25px; overflow-wrap: anywhere; }
}

/* ---------- Terminal fidelity controls ---------- */
.live-indicator { display:flex; align-items:center; gap:5px; height:26px; padding:0 7px; border-radius:4px; background:var(--surface-2); color:var(--green); font-size:9px; font-weight:900; }
.live-indicator svg { width:17px; height:17px; }
.notifications-panel {
  position: absolute;
  z-index: 220;
  top: calc(100% - 4px);
  right: 10px;
  width: min(360px, calc(100vw - 20px));
  max-height: min(430px, calc(100vh - 80px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #2b3040;
  box-shadow: var(--shadow-pop);
}
.notifications-panel[hidden] { display: none !important; }
.notifications-panel header {
  position: sticky; top: 0; z-index: 1;
  padding: 12px 14px; background: #303548; font-weight: 800; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.notifications-panel article { padding: 11px 14px; border-top: 1px solid var(--border); }
.notifications-panel article:first-of-type { border-top: 0; }
.notifications-panel article strong { display: block; font-size: 13px; }
.notifications-panel article p { margin: 4px 0; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.notifications-panel article time { color: var(--muted); font-size: 9px; }
.notifications-panel .notif-empty,
.notifications-panel .muted { margin: 0; padding: 22px 14px; text-align: center; }
.nav-badge { position:absolute; top:2px; right:8px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#2b99ff; color:#fff; font:700 9px/16px Arial; text-align:center; }
.sidebar a,
.sidebar .sidebar-btn { position:relative; }

.chart-tools { position:absolute; z-index:5; top:10px; left:10px; display:flex; flex-direction:column; gap:8px; }
.chart-tools button { position:relative; width:36px; height:36px; min-height:36px; padding:0; display:grid; place-items:center; border:0; border-radius:8px; background:#303548; color:#fff; font-weight:900; cursor:pointer; }
.chart-tools svg { width:19px; height:19px; }
.chart-tools b { position:absolute; right:-3px; top:-4px; min-width:15px; height:15px; border-radius:8px; background:#298ff0; font:700 9px/15px Arial; }
.chart-menu,.chart-info { position:absolute; z-index:9; padding:8px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#1c2132; box-shadow:0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); backdrop-filter:blur(12px); min-width:190px; }
.chart-menu[hidden],.chart-info[hidden] { display:none; }
.chart-menu { top:10px; left:54px; }
.chart-type-menu { top:10px; left:54px; }
.chart-ind-menu { top:52px; left:54px; min-width:230px; }
.chart-menu-title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.45); padding:4px 8px 8px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:4px; }
.chart-menu-divider { height:1px; background:rgba(255,255,255,.07); margin:6px 0; }
.chart-menu button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; width:100%; min-height:36px; padding:6px 10px; border:0; border-radius:6px; background:transparent; color:#fff; text-align:left; font-size:12px; font-weight:600; cursor:pointer; transition:background .15s; }
.chart-menu button span { display:flex; align-items:center; gap:6px; }
.chart-menu button small { font-size:10px; color:rgba(255,255,255,.45); margin-top:2px; font-weight:400; }
.chart-menu button:hover { background:rgba(255,255,255,.08); }
.chart-menu button.active { background:rgba(41,143,240,.18); color:#60a5fa; }
.chart-menu button.active small { color:#93c5fd; }
.ind-row { display:flex; width:100%; justify-content:space-between; align-items:center; }
.ind-badge { font-size:9px; font-weight:800; padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); }
.ind-badge.active { background:#22c55e; color:#052e16; }
.chart-clock { position:absolute; z-index:5; top:12px; left:60px; display:grid; grid-template-columns:8px auto 20px 20px; align-items:center; gap:3px; color:#fff; font-size:10px; font-weight:700; }
.chart-clock i { width:7px; height:7px; border-radius:50%; background:var(--green); }
.chart-clock small { color:rgba(255,255,255,.42); font-size:9px; }
.chart-clock button { min-height:20px; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:#026fd3; color:#fff; font:700 11px Arial; }
.chart-info { top:38px; left:60px; max-width:240px; color:var(--text-secondary); font-size:11px; }
.price-chart { cursor:grab; }
.price-chart:active { cursor:grabbing; }

.tp-hint { min-height:14px!important; height:14px; padding:1px 4px; border:0; background:var(--surface-2); cursor:pointer; }
.tp-payout i { flex:1; align-self:center; margin:0 6px; border-top:1px dotted rgba(255,255,255,.25); }
.tp-payout .tp-pct { margin-left: 4px; font-style: normal; }

@media (max-width:760px) {
  .top-actions { justify-content:flex-end; }
  .acct-wrap { margin-right:auto; }
  .account-switch { background: var(--surface-2); padding: 2px 8px; min-width: 0; gap: 6px; }
  .acct-level { display: none; }
  .acct-label { display:block; }
  .acct-caret { display: none; }
  .disclaimer { position:absolute; z-index:7; top:66px; right:62px; width:auto; max-width:160px; height:18px; min-height:18px; padding:1px 6px; border:1px solid rgba(255,157,0,.3); border-radius:9px; background:rgba(59,38,6,.8); color:#ffd57a; font-size:7px; line-height:14px; pointer-events:none; }
  .term-chart-col { height:calc(100% - 174px - 30px); }
  .chart-clock { top:10px; }
  .chart-tools { top:10px; }
  .tp-pending { top:0; width:100%; position:relative; }
  .mobile-more { display:flex; }
}

.top-actions .acct-wrap { order:1; }
.top-actions > .icon-btn { order:2; }
.top-actions > .btn-deposit,
.top-actions > .btn-green { order:3; }
.top-actions > .btn-withdraw,
.top-actions > .btn-ghost { order:4; }

@media (max-width: 430px) {
  .brand-name { font-size: 14px; }
  .top-actions .btn { padding-inline: 9px; font-size: 12px; }
  .acct-label { font-size: 8px; }
  .acct-bal { font-size: 12px; }
  .chart-wrap { height: clamp(280px, 42dvh, 380px); min-height: 280px; }
  .tp-order { padding: 8px; gap: 6px; }
  .tp-stepper button { width: 36px; }
  .content { padding-inline: 8px; }
  .auth-wrap { padding: 16px 10px; }
}

/* ---------- Measured terminal system (1440 desktop / 390 mobile) ---------- */
html { background: var(--surface-1); }
body { font-size: 14px; line-height: 18px; }
button, .btn, input, select, textarea { min-height: var(--control-h); }
button, .btn, a, input, select, textarea { transition: color .2s linear, background-color .2s linear, border-color .2s linear, box-shadow .2s linear, opacity .2s linear, transform .2s linear; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.app { height: 100vh; min-height: 560px; overflow: hidden; background: var(--surface-1); }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); padding: 58px 0 10px; gap: 0;
  background: var(--sidebar-bg); border-right: 0; z-index: 20;
}
.sidebar-nav { gap: 10px; }
/* Desktop-only sidebar item sizing — must NOT override mobile bottom nav */
@media (min-width: 769px) {
  .sidebar a:not(.sidebar-help),
  .sidebar .sidebar-btn {
    width: 60px; min-height: 62px; height: 62px; padding: 0; gap: 5px; border-radius: var(--radius-xs);
    color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0;
    text-transform: uppercase;
  }
  .sidebar a:not(.sidebar-help).active,
  .sidebar .sidebar-btn.active {
    background: var(--blue);
    box-shadow: none;
  }
  .sidebar a:not(.sidebar-help):not(.active):hover,
  .sidebar .sidebar-btn:not(.active):hover { background: rgba(255,255,255,.06); }
  .sidebar .icon svg { width: 20px; height: 20px; }
  .sidebar-help {
    width: 60px; min-height: 44px; height: auto; margin-bottom: 6px;
    color: var(--green) !important; font-size: 11px; line-height: 14px;
    background: transparent !important;
  }
  .sidebar-help:hover { background: rgba(15,175,89,.12) !important; color: #14bf64 !important; }
  .sidebar-help .sidebar-label { color: inherit; font-size: 11px; line-height: 14px; }
}
.main { height: 100vh; position: relative; }
.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h); padding: 15px 10px 10px; gap: 12px;
  background: var(--surface-1); border: 0; position: relative;
}
.brand { gap: 10px; font-size: 17px; letter-spacing: -0.02em; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; }
.brand-sub { display: none; }
.top-actions { gap: 12px; }
.icon-btn { width: 38px; height: 38px; min-height: 38px; border: 0; border-radius: var(--radius-xs); background: var(--surface-2); }
.account-switch { height: 38px; min-height: 38px; border: 0; border-radius: 4px; background: var(--surface-2); padding: 4px 12px; gap: 10px; }
.acct-label { display: block; font-size: 10px; line-height: 12px; font-weight: 900; }
.acct-live-btn .acct-label { color: var(--green); }
.acct-demo-btn .acct-label { color: #9a9da6; }
.acct-bal { font-size: 14px; line-height: 18px; font-weight: 700; white-space: nowrap; }
#acctMenu {
  top: 43px; width: 417px; height: 358px;
  background: #1a1d27; border: 0; border-radius: 6px;
}
.acct-panel-left { background: #212532; }
.acct-panel-right { background: #12141c; }
.btn { min-height: 38px; border-radius: var(--radius-xs); padding: 0 12px; font-size: 14px; font-weight: 700; }
.btn-green,
.btn-deposit { background: var(--green); color: #fff; box-shadow: var(--shadow-green); }
.btn-green:hover,
.btn-deposit:hover { background: #14bf64; transform: translateY(-1px); }
.btn-red { background: var(--red); }
.btn-blue { background: var(--blue); }
.btn-ghost { background: #575d75; border: 0; color: #fff; }
.btn-ghost:hover { background: #68708a; }
/* Withdraw is an available primary-secondary action — not muted/disabled gray */
.btn-withdraw {
  background: var(--blue);
  border: 0;
  color: #fff;
  box-shadow: 0 6px 16px rgba(2, 111, 211, 0.28);
}
.btn-withdraw:hover {
  background: var(--blue-active);
  transform: translateY(-1px);
}
.top-actions .btn-deposit,
.top-actions .btn-withdraw { height: 38px; min-height: 38px; }
.disclaimer {
  position: absolute; z-index: 4; top: 15px; left: 50%; transform: translateX(-50%);
  width: min(430px,32vw); height: 38px; min-height: 38px; padding: 9px 14px; text-align: center;
  background: rgba(15,175,89,.95); border: 0; border-radius: 28px;
  color: #fff; font-size: 10px; line-height: 20px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-green);
}
.content { overflow: auto; }
.content-wide { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
.card { background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-xs); box-shadow: 0 1px 0 rgba(255,255,255,.02); }

.terminal { display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; }
.term-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.term-chart-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.term-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface-2);
}
.asset-bar { height: 46px; min-height: 46px; gap: 0; padding: 0; overflow: hidden; }
.cat-tabs { height: 46px; padding: 3px; gap: 2px; background: var(--surface-2); border: 0; border-radius: var(--radius-xs); }
.cat-tab { min-height: 40px; padding: 0 12px; border-radius: 3px; color: var(--muted); font-size: 10px; letter-spacing: .03em; }
.cat-tab.active { background: var(--blue); color: #fff; box-shadow: 0 4px 10px rgba(2,111,211,.25); }
.chart-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  border: 0;
  border-radius: 0;
  background: var(--surface-1);
  overflow: hidden;
}
.price-chart { width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.litebinx-chart-canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-tap-highlight-color: transparent; }

.chart-tools {
  position: absolute;
  top: 12px;
  left: 64px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(30, 34, 48, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 3px;
}
.chart-tools button {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.chart-tools button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.chart-tools svg {
  width: 14px;
  height: 14px;
}

.chart-clock {
  position: absolute;
  top: 12px;
  left: 170px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 34, 48, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.chart-clock small {
  color: var(--blue-bright);
  font-size: 9px;
  font-weight: 800;
}
.chart-clock button {
  min-height: 16px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 10px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.chart-info {
  position: absolute;
  top: 46px;
  left: 170px;
  z-index: 25;
  background: #181b28;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: #fff;
  box-shadow: var(--shadow-pop);
}

.chart-price-tag {
  position: absolute;
  top: 12px;
  right: 68px;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 10px;
  background: rgba(30, 34, 48, 0.85);
  backdrop-filter: blur(8px);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-price-tag strong {
  color: #fff;
  font-size: 12px;
}

.chart-tf {
  position: absolute;
  bottom: 28px;
  left: 10px;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 4px 8px;
  background: rgba(30, 34, 48, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.chart-menu {
  position: absolute;
  bottom: 60px;
  left: 10px;
  z-index: 30;
  background: #1e2230;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px;
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chart-menu button {
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.chart-menu button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.chart-menu[hidden] { display: none; }
.chart-info[hidden] { display: none; }

.term-panel { padding: 0; gap: 0; border: 0; border-radius: var(--radius-xs); background: transparent; overflow: hidden; }
.term-trade {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 0;
}
.term-history {
  flex: 0 0 auto;
  min-height: 100px;
  max-height: 180px;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tp-pct { color: var(--yellow); font-size: 12px; line-height: 16px; font-weight: 900; }
.tp-trade-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 36px; padding: 0 15px; background: transparent;
}
.tp-asset-meta { min-width: 0; }
.tp-asset-meta strong {
  font-size: 12px; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-pending {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 36px; padding: 0;
  margin-top: 0; position: relative; z-index: 2; color: var(--blue-bright);
  background: transparent; border-radius: 0;
  font-size: 10px; line-height: 12px; font-weight: 900;
  flex-shrink: 0;
}
.toggle { width: 28px; height: 16px; min-height: 16px; padding: 2px; border: 1px solid var(--blue-bright); border-radius: 99px; background: transparent; cursor: pointer; }
.toggle::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-bright); transition: transform .2s ease; }
.toggle[aria-pressed="true"]::after { transform: translateX(12px); }
.tp-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "time invest"
    "payout payout"
    "error error"
    "up down";
  gap: 10px;
  padding: 8px 15px 14px;
  background: transparent;
}
.tp-order .tp-field:first-child { grid-area: time; }
.tp-order .tp-field:nth-child(2) { grid-area: invest; }
.tp-order .tp-payout { grid-area: payout; }
.tp-order .tp-order-error { grid-area: error; }
.tp-order .tp-up { grid-area: up; }
.tp-order .tp-down { grid-area: down; }
.tp-field { height: 58px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: transparent; position: relative; }
.tp-field label { position: absolute; z-index: 2; left: 10px; top: -8px; padding: 0 4px; background: var(--surface-2); color: var(--muted); font-size: 12px; letter-spacing: 0; margin: 0; }
.tp-stepper { height: 100%; gap: 0; }
.tp-stepper button { width: 32px; height: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 22px; }
.tp-stepper button:hover { background: rgba(255,255,255,.06); color: #fff; }
.tp-stepper input { height: 100%; min-height: 0; padding-top: 5px; font-size: 16px; line-height: 20px; font-weight: 400; }
.tp-hint { position: absolute; bottom: 1px; left: 0; right: 0; margin: 0; color: var(--blue-bright); font-size: 9px; line-height: 11px; font-weight: 900; letter-spacing: 0; }
.tp-expiry-presets {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  top: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.tp-expiry-presets[hidden] { display: none !important; }
.tp-expiry-presets button {
  min-height: 28px;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.tp-expiry-presets button:hover { color: #fff; background: rgba(255,255,255,.1); }
.tp-expiry-presets button.active {
  color: #fff;
  border-color: var(--blue-bright);
  background: rgba(59, 130, 246, .18);
}
.tp-field:has(#expiryPresets:not([hidden])) { z-index: 45; overflow: visible; }
.tp-payout { height: 17px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; text-align: left; }
.tp-payout strong { color: #fff; font-size: 14px; }
.tp-up, .tp-down {
  min-height: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-xs); color: #fff;
  font-size: 14px; line-height: 18px; box-shadow: none;
}
.tp-up { background: var(--green); box-shadow: var(--shadow-green); }
.tp-down { background: var(--red); box-shadow: var(--shadow-red); }
.tp-up:hover { background: #14bf64; transform: translateY(-1px); }
.tp-down:hover { background: #e95745; transform: translateY(-1px); }
.tp-up svg, .tp-down svg { margin-left: auto; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(255,255,255,.25); }
.tp-order-error { border-radius: var(--radius-xs); }
.tp-trades { flex: 1; margin-top: 0; padding: 0; border: 0; background: transparent; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.tp-sheet-handle { display: none; }
.tp-sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tp-tabs { height: 42px; margin: 0; gap: 0; display: flex; }
.tp-tab { min-height: 42px; border: 0; border-radius: 0; padding: 10px 11px 12px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.tp-tab.active { color: #fff; background: transparent; border: 0; border-top: 2px solid var(--blue-bright); }
.tp-tab b { color: #fff; margin-left: 5px; }
.tp-tab.has-tickets b#openCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: rgba(43, 153, 255, 0.28);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.tp-timezone { padding: 6px 10px 4px; margin: 0; font-size: 9px; }
.tp-list { max-height: none; padding: 0 6px; flex: 1; min-height: 0; overflow: auto; }
.tp-row { padding: 9px 4px; border-color: var(--border); }
.tp-empty { color: var(--muted); padding: 28px 12px; line-height: 18px; }

/* Quotex-style desktop: chart left, trade ticket right */
@media (min-width: 900px) {
  .terminal { flex-direction: column; }
  .term-main {
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }
  .term-chart-col {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }
  .term-side {
    flex: 0 0 272px;
    width: 272px;
    max-width: 30vw;
    height: 100%;
    min-height: 0;
    border-left: 1px solid rgba(255,255,255,.08);
    background: var(--surface-2);
  }
  .term-trade {
    flex: 0 0 auto;
    border-top: 0;
  }
  .term-history {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .tp-trade-head {
    flex-wrap: wrap;
    height: auto;
    min-height: 40px;
    padding: 10px 12px 4px;
    gap: 8px;
  }
  .tp-pending {
    width: 100%;
    justify-content: space-between;
    height: auto;
    min-height: 28px;
    order: 2;
  }
  .tp-asset-meta {
    width: 100%;
    order: 1;
  }
  .tp-asset-meta strong { font-size: 13px; }
  .tp-order {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "time"
      "invest"
      "payout"
      "error"
      "up"
      "down";
    gap: 12px;
    padding: 10px 12px 12px;
  }
  .tp-order .tp-field:first-child { grid-area: time; }
  .tp-order .tp-field:nth-child(2) { grid-area: invest; }
  .tp-order .tp-payout { grid-area: payout; }
  .tp-order .tp-order-error { grid-area: error; }
  .tp-order .tp-up { grid-area: up; }
  .tp-order .tp-down { grid-area: down; }
  .tp-up, .tp-down {
    width: 100%;
    min-height: 48px;
    height: 48px;
  }
  .tp-expiry-presets {
    top: calc(100% + 6px);
    bottom: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tp-trades { min-height: 0; }
  .tp-list { max-height: none; }
  .chart-wrap { border-radius: 0; }
}

.form-row input, .form-row select, .form-row textarea {
  background: var(--surface-1); border-color: var(--border); border-radius: var(--radius-xs);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(43,153,255,.12); }
.table { display: table; overflow: visible; border-collapse: separate; border-spacing: 0; }
.table th { background: rgba(0,0,0,.10); color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
.table th, .table td { height: 48px; padding: 10px 12px; border-color: var(--border); }
.table tbody tr:hover td { background: rgba(255,255,255,.025); }

/* Ledger tables: scroll instead of clipping; never ellipsize money */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.finance-ledger-card { overflow: visible; min-width: 0; }
.finance-ledger-table {
  width: 100%;
  min-width: 860px;
  table-layout: auto;
}
.finance-ledger-table th.cell-amount,
.finance-ledger-table td.cell-amount,
.table td[data-label="Amount"] {
  width: 1%;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 15px;
  vertical-align: middle;
}
.finance-ledger-table .money-value {
  display: inline-block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.finance-ledger-table td.cell-details,
.table td[data-label="Details"] {
  white-space: normal;
  max-width: 300px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.finance-ledger-table td.cell-details code,
.table td[data-label="Details"] code {
  white-space: normal;
  word-break: break-all;
}
.finance-ledger-table td.cell-date {
  white-space: nowrap;
  color: #94a3b8;
  font-size: 13px;
}

/* Status pills — separate from .badge (notification counter uses position:absolute) */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  min-width: 0;
  top: auto;
  right: auto;
}
.status-pill--pending,
.status-pill--queued {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
}
.status-pill--approved,
.status-pill--completed,
.status-pill--success {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}
.status-pill--rejected,
.status-pill--failed,
.status-pill--cancelled {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
}

/* Ledger type identity (Deposit vs Withdraw) */
.ledger-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.35;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ledger-type--deposit {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
}
.ledger-type--withdraw {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
}
.finance-ledger-table tr.ledger-row--deposit td:first-child {
  box-shadow: inset 3px 0 0 #22c55e;
}
.finance-ledger-table tr.ledger-row--withdraw td:first-child {
  box-shadow: inset 3px 0 0 #f59e0b;
}
.finance-ledger-table .money-deposit,
.finance-ledger-table .money-deposit .money-value {
  color: #4ade80;
}
.finance-ledger-table .money-withdraw,
.finance-ledger-table .money-withdraw .money-value {
  color: #f87171;
}
.ledger-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.ledger-detail-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
}
.ledger-detail-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ledger-detail-chip code,
.ledger-detail-value {
  font-size: 12px;
  color: #e2e8f0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ledger-detail-chip code {
  background: transparent;
  padding: 0;
  color: #cbd5e1;
}
.ledger-recheck { margin-top: 2px; }
.ledger-recheck .btn { padding: 4px 10px; font-size: 11px; }
.ledger-ref { font-variant-numeric: tabular-nums; }
.ledger-gateway { font-size: 13px; }

@media (max-width: 760px) {
  .app { height: 100dvh; min-height: 560px; overflow: hidden; }
  .main { min-height: 0; padding-bottom: 0; }
  .topbar { min-height: 36px; height: 36px; flex: 0 0 36px; padding: 6px 10px; flex-wrap: nowrap; }
  .topbar > .brand {
    display: inline-flex;
    flex-shrink: 0;
    margin-right: auto;
    gap: 8px;
    font-size: 15px;
  }
  .topbar .brand-lite { display: none; }
  .topbar .brand-mark { width: 26px; height: 26px; border-radius: 7px; }
  .top-actions { width: 100%; display: flex; gap: 6px; }
  .top-actions .icon-btn { order: 2; width: 30px; height: 24px; min-height: 24px; }
  .acct-wrap { order: 1; margin-right: auto; }
  .account-switch { height: 24px; min-height: 24px; padding: 2px 8px; min-width: 0; gap: 6px; }
  .acct-level { display: none; }
  .acct-label { font-size: 8px; line-height: 9px; }
  .acct-bal { font-size: 12px; line-height: 14px; }
  .top-actions .btn { height: 24px; min-height: 24px; padding: 0 10px; font-size: 12px; }
  .top-actions .btn-deposit,
  .top-actions .btn-green { order: 3; }
  .top-actions .btn-withdraw,
  .top-actions .btn-ghost { display: none; }
  #acctMenu { position: fixed; top: 34px; left: 8px; right: 8px; width: auto; }
  .disclaimer {
    position: static; transform: none; width: auto; height: 30px; flex: 0 0 30px; min-height: 30px;
    padding: 6px 10px; border-radius: 0; background: rgba(15,175,89,.92); box-shadow: none;
    font-size: 9px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .content-wide { padding: 0; overflow: hidden; }
  .terminal { display: flex; flex-direction: column; gap: 0; height: 100%; }
  .term-main { flex: 1 1 auto; min-height: 0; }
  .term-chart-col { height: auto; min-height: 0; gap: 0; }
  .asset-bar { display: flex; flex-direction: row; height: 36px; min-height: 36px; overflow: hidden; padding: 0 6px; }
  .cat-tabs { width: 100%; height: 36px; padding: 2px; }
  .cat-tab { flex: 1; min-height: 32px; padding: 0 8px; font-size: 9px; }
  .chart-wrap { flex: 1; height: auto; min-height: 180px; border-radius: 0; }
  .chart-price-tag { display: none; }
  .chart-tf { left: 10px; bottom: 26px; }
  .chart-zoom { bottom:26px; }
  .chart-realtime { right:62px; bottom:27px; }
  .trade-toast-stack { top: 10px; right: 8px; width: calc(100% - 16px); }
  .term-trade { flex: 0 0 auto; background: var(--surface-2); border: 0; border-radius: 0; }
  .term-history { flex: 0 0 168px; max-height: 200px; min-height: 140px; border-radius: 0; }
  .tp-trade-head { height: 28px; padding: 0 10px; }
  .tp-pending { position: relative; inset: auto; margin: 0; height: 28px; padding: 0; width: auto; border-radius: 0; }
  .tp-order {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-areas:
      "time invest" "payout payout" "up down" "error error";
    gap: 10px; padding: 0 10px 10px; background: transparent;
    position: static; margin: 0; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
  }
  .tp-order .tp-field:first-child { grid-area: time; }
  .tp-order .tp-field:nth-child(2) { grid-area: invest; }
  .tp-field { height: 50px; padding: 0; }
  .tp-field label { text-align: left; }
  .tp-stepper button { width: 30px; height: 100%; }
  .tp-hint { display: block; left: auto; right: 8px; width: auto; }
  .tp-payout { grid-area: payout; height: 20px; min-height: 20px; margin: 0; }
  .tp-up, .tp-down { min-height: 38px; height: 38px; padding: 0 12px; }
  .tp-up { grid-area: up; }
  .tp-down { grid-area: down; }
  .tp-order-error { grid-area: error; }
  .tp-trades { display: flex; }
  .card { border-radius: var(--radius-xs); }
  .table { display: block; overflow-x: auto; }
  .acct-panel-grid { grid-template-columns: 1fr; }
  #acctMenu { height: auto; max-height: min(90vh, 520px); }
  .acct-panel-left { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .acct-panel-right {
    flex-direction: row; flex-wrap: wrap; gap: 0; padding: 6px 0 8px;
    background: #12141c;
  }
  .acct-panel-right a { flex: 1 1 calc(50% - 4px); min-height: 36px; padding: 8px 14px; }
  .acct-logout-sep { flex: 1 1 100%; margin: 6px 14px; }
  .acct-panel-right .acct-logout { margin-top: 0; flex: 1 1 100%; }
}

@media (max-width: 350px) {
  .tp-order { gap: 6px; padding-inline: 6px; }
  .tp-pending { padding-inline: 6px; }
  .tp-stepper button { width: 26px; }
  .tp-stepper input { font-size: 14px; }
}

/* ---------- Shared product pages ---------- */
.content:not(.content-wide) { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px; }
.page-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-heading { margin-bottom: 18px; }
.page-heading h1 { margin: 4px 0 5px; font-size: 28px; line-height: 34px; }
.page-heading p, .section-heading p { margin: 0; color: var(--muted); }
.eyebrow, .method-category { color: var(--blue-bright); font-size: 10px; line-height: 14px; font-weight: 900; letter-spacing: .12em; }
.finance-card { padding: 20px; }
.section-heading h2 { margin: 0 0 5px; font-size: 19px; }
.method-category { margin: 22px 0 9px; text-transform: uppercase; }
.method-category span { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.payment-method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.payment-method {
  position: relative; min-height: 74px; display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 11px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); cursor: pointer;
}
.payment-method:hover { border-color: rgba(43,153,255,.6); background: #202434; transform: translateY(-1px); }
.payment-method:has(input:checked) { border-color: var(--blue-bright); box-shadow: 0 0 0 2px rgba(43,153,255,.10); }
.payment-method input { position: absolute; opacity: 0; pointer-events: none; }
.payment-method-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--blue-bright); font-size: 11px; font-weight: 900; }
.payment-method strong, .payment-method small { display: block; }
.payment-method strong { font-size: 13px; }
.payment-method small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.payment-method > svg { color: var(--muted); }
.deposit-submit { display: grid; grid-template-columns: minmax(220px,340px) auto; align-items: end; gap: 12px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); }
.deposit-submit .form-row { margin: 0; }
.deposit-submit .btn { min-height: 44px; }
.flash { border-radius: var(--radius-xs); }
.flash-error { background: rgba(219,70,53,.12); border-color: rgba(219,70,53,.42); }
.flash-success { background: rgba(15,175,89,.12); border-color: rgba(15,175,89,.42); }
.status-approved, .status-won { color: #43d788; }
.status-failed, .status-rejected, .status-lost { color: #ff7564; }
.status-pending, .status-open { color: #ffb238; }

.admin-layout { background: var(--surface-1); }
.admin-nav { background: var(--surface-0); border-color: var(--border); }
.admin-demo-notice { margin-bottom: 14px; padding: 7px 10px; border: 1px solid rgba(255,157,0,.24); border-radius: var(--radius-xs); background: rgba(255,157,0,.10); color: #ffc45e; font-size: 10px; text-align: center; }
.admin-nav a { border-radius: var(--radius-xs); }
.admin-nav a.active, .admin-nav a:hover { background: var(--surface-2); box-shadow: inset 3px 0 var(--blue-bright); }
.stat { border-radius: var(--radius-xs); background: var(--surface-2); }
.stat .n { font-size: 25px; }

@media (max-width: 900px) {
  .payment-method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .content:not(.content-wide) { padding: 16px 10px 64px; }
  .page-heading h1 { font-size: 24px; }
  .payment-method-grid { grid-template-columns: 1fr; }
  .deposit-submit { grid-template-columns: 1fr; }
  .deposit-submit .btn { width: 100%; }
  .finance-card { padding: 14px; }
}

/* Final mobile terminal overrides (kept after legacy responsive rules). */
@media (max-width:760px) {
  .disclaimer { position:absolute; z-index:7; top:66px; right:62px; flex:none; width:auto; max-width:160px; height:18px; min-height:18px; padding:1px 6px; border:1px solid rgba(255,157,0,.3); border-radius:9px; background:rgba(59,38,6,.8); color:#ffd57a; font-size:7px; line-height:14px; pointer-events:none; }
  .term-chart-col { height: auto; }
  .term-panel { position:relative; }
  .tp-pending { position:relative; top:auto; width:auto; }
}

/* ---------- Live trader sentiment ---------- */
.trader-sentiment {
  position:absolute; z-index:4; top:0; bottom:28px; left:42px; width:40px;
  display:flex; flex-direction:column; align-items:center; padding:21px 4px;
  pointer-events:none; font:900 12px/16px Roboto,Arial,sans-serif; color:#fff;
}
.sentiment-segment { display:block; flex:none; width:4px; min-height:2px; border-radius:2px; transition:height .35s ease; }
.sentiment-down { background:#ff6251; margin-bottom:4px; }
.sentiment-up { background:#0faf59; }
.sentiment-label { position:absolute; left:0; width:40px; text-align:center; text-shadow:0 1px 2px #000; }
.sentiment-down-label { top:4px; }
.sentiment-up-label { bottom:4px; }
.trader-sentiment small {
  position:absolute; left:31px; top:50%; width:max-content; max-width:72px;
  padding:2px 5px; border-radius:3px;
  background:rgba(48,52,64,.72); color:rgba(255,255,255,.45);
  font:700 8px/11px Roboto,Arial,sans-serif; opacity:0; transition:opacity .2s;
  transform:translateY(-50%); pointer-events:none;
}
.trader-sentiment.no-activity { opacity:.42; }
.trader-sentiment.no-activity small { opacity:.85; }

.price-chart { width: 100%; height: 100%; position: absolute; inset: 0; min-width: 0; min-height: 0; }
.litebinx-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
}

/* ---------- Leader Board (Quotex-style drawer) ---------- */
html.lb-open, body.lb-open { overflow: hidden; }
.lb-root[hidden] { display: none !important; }
.lb-root {
  position: fixed; inset: 0; z-index: 1200;
  display: block;
}
.lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 10, 18, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lb-drawer {
  position: absolute; top: 0; bottom: 0; left: 76px;
  width: min(380px, calc(100vw - 76px));
  display: flex; flex-direction: column;
  background: #171c28;
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 18px 0 48px rgba(0,0,0,.45);
  animation: lbSlide .22s ease-out;
}
@keyframes lbSlide {
  from { transform: translateX(-18px); opacity: .6; }
  to { transform: none; opacity: 1; }
}
.lb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 10px; flex: 0 0 auto;
}
.lb-titles { flex: 1; min-width: 0; }
.lb-titles h2 {
  margin: 0; font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: .01em;
}
.lb-titles p {
  margin: 2px 0 0; color: rgba(255,255,255,.45); font-size: 12px; font-weight: 500;
}
.lb-icon-btn {
  width: 36px; height: 36px; min-height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: rgba(255,255,255,.75); cursor: pointer;
  display: grid; place-items: center;
}
.lb-icon-btn:hover { background: rgba(255,255,255,.06); color: #fff; }

.lb-you {
  margin: 4px 12px 10px; padding: 12px 14px;
  border-radius: 10px; background: #222838;
  border: 1px solid rgba(255,255,255,.06);
}
.lb-you-main { display: flex; align-items: center; gap: 10px; }
.lb-you-meta { flex: 1; min-width: 0; }
.lb-you-meta strong {
  display: block; font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-you-meta span { display: block; margin-top: 3px; color: rgba(255,255,255,.45); font-size: 11px; }

.lb-help-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 12px 12px; min-height: 42px; border: 0; border-radius: 8px;
  background: #1a6fd4; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.lb-help-cta:hover { filter: brightness(1.06); }
.lb-help-ico {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(0,0,0,.18);
}

.lb-periods {
  display: flex; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.lb-periods button {
  flex: 1; min-height: 34px; border: 0; border-radius: 6px;
  background: transparent; color: rgba(255,255,255,.45);
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.lb-periods button.active {
  color: #2b99ff; background: rgba(43,153,255,.12);
}

.lb-list {
  flex: 1; overflow: auto; padding: 6px 0 16px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.lb-row {
  width: 100%; display: grid;
  grid-template-columns: 34px 22px 32px minmax(0,1fr) auto;
  align-items: center; column-gap: 8px;
  padding: 9px 14px; border: 0; background: transparent;
  color: #fff; text-align: left; cursor: pointer; font: inherit;
  min-height: 48px;
}
.lb-row:hover { background: rgba(255,255,255,.04); }
.lb-row.is-current { background: rgba(2,111,211,.14); box-shadow: inset 2px 0 #2b99ff; }
.lb-rank-num {
  width: 28px; text-align: center; color: rgba(255,255,255,.55);
  font-size: 13px; font-weight: 700;
}
.lb-badge {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #1a1a1a;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.lb-badge.gold { background: linear-gradient(180deg, #ffd86a, #e6a90f); }
.lb-badge.silver { background: linear-gradient(180deg, #e8edf4, #9aa6b8); }
.lb-badge.bronze { background: linear-gradient(180deg, #f0b07a, #b56a2e); }
.lb-flag { display:grid; place-items:center; width:22px; flex:0 0 22px; }
.lb-flag-img {
  width: 18px; height: 12px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.lb-flag-emoji { font-size: 15px; line-height: 1; }
.lb-row .lb-flag-img { justify-self: center; }
.lb-avatar, .lb-detail-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #d1e9ff; color: #155289; font-size: 12px; font-weight: 800;
  object-fit: cover; box-shadow: 0 0 0 2px rgba(15,175,89,.55);
}
.lb-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700;
}
.lb-name small {
  display: block; color: #2b99ff; font-size: 8px; line-height: 10px;
  text-transform: uppercase; letter-spacing: .08em;
}
.lb-profit {
  color: #26de81; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.lb-profit.is-neg { color: #ff6251; }
.lb-empty {
  padding: 48px 20px; text-align: center; color: rgba(255,255,255,.45); font-size: 13px;
}
.lb-seed-note {
  margin: 0; padding: 8px 14px 14px; color: rgba(255,255,255,.38); font-size: 10px; line-height: 1.4;
}

.lb-modal[hidden] { display: none !important; }
.lb-modal {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.45);
}
.lb-modal-card {
  position: relative; width: min(360px, 100%);
  padding: 22px 20px 18px; border-radius: 12px;
  background: #1e2433; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: lbPop .18s ease-out;
}
@keyframes lbPop {
  from { transform: translateY(8px) scale(.98); opacity: .7; }
  to { transform: none; opacity: 1; }
}
.lb-modal-close {
  position: absolute; top: 8px; right: 10px;
  width: 32px; height: 32px; min-height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: rgba(255,255,255,.55);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lb-modal-close:hover { color: #fff; background: rgba(255,255,255,.06); }
.lb-detail-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-right: 24px;
}
.lb-detail-avatar { width: 48px; height: 48px; font-size: 18px; flex: 0 0 auto; }
.lb-detail-country {
  display: block; color: rgba(255,255,255,.45); font-size: 11px; margin-bottom: 3px;
}
.lb-detail-head h3 { margin: 0; font-size: 17px; line-height: 22px; }
.lb-detail-email {
  display: inline-block; margin-top: 4px; color: #5eb8ff; font-size: 12px;
  text-decoration: none; word-break: break-all;
}
.lb-detail-email:hover { text-decoration: underline; }
.lb-detail-social {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.lb-social-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  color: #fff; font-size: 11px; font-weight: 700; text-decoration: none;
}
.lb-social-link span:first-child {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 800;
  background: rgba(43,153,255,.25); color: #9fd0ff;
}
.lb-social-link:hover { background: rgba(43,153,255,.18); border-color: rgba(43,153,255,.35); }
.lb-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.lb-detail-grid span {
  display: block; color: rgba(255,255,255,.42); font-size: 11px; margin-bottom: 4px;
}
.lb-detail-grid strong { font-size: 16px; font-weight: 800; }
.lb-help-card h3 { margin: 0 0 10px; font-size: 18px; }
.lb-help-card p { margin: 0 0 12px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.45; }
.lb-help-card ul {
  margin: 0 0 16px; padding-left: 18px; color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.55;
}
.lb-help-done {
  width: 100%; min-height: 42px; border: 0; border-radius: 8px;
  background: #1a6fd4; color: #fff; font-weight: 700; cursor: pointer;
}

@media (max-width:760px) {
  .trader-sentiment { display:none; }
  .lb-drawer { left: 0; width: min(100vw, 420px); }
  .sidebar a, .sidebar .sidebar-btn { min-width: 0; }
}

/* ---------- Support ---------- */
.support-page { max-width: 960px; margin: 0 auto; min-width: 0; }
.support-header { margin-bottom: 16px; }
.support-header h2 { margin: 0 0 6px; font-size: 22px; }
.support-header p { margin: 0; }
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.support-create h3, .support-list h3 { margin: 0 0 12px; font-size: 16px; }
.support-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.support-list-head h3 { margin: 0; }
.support-empty { text-align: center; padding: 28px 12px; }
.support-empty-icon { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: rgba(43,153,255,.12); color: var(--blue-bright); font: 800 20px/1 Arial; }
.support-tickets { display: flex; flex-direction: column; gap: 8px; }
.support-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,.12); color: inherit; text-decoration: none; min-width: 0; }
.support-ticket-row:hover { border-color: rgba(43,153,255,.35); background: rgba(43,153,255,.06); }
.support-ticket-main { min-width: 0; flex: 1; }
.support-ticket-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.support-ticket-id { color: var(--blue-bright); font-weight: 700; font-size: 13px; }
.support-ticket-subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.support-ticket-meta { flex: 0 0 auto; font-size: 12px; text-align: right; }
.support-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font: 700 10px/1.2 Arial; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; }
.support-badge-open { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.35); }
.support-badge-answered { color: #67c4ff; background: rgba(43,153,255,.12); border-color: rgba(43,153,255,.35); }
.support-badge-closed { color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.support-badge-lg { font-size: 11px; padding: 5px 10px; }
.support-unread-dot { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; background: var(--blue-bright); color: #fff; font: 700 9px/1.3 Arial; text-transform: uppercase; }
.support-back { display: inline-block; margin-bottom: 10px; color: var(--blue-bright); font-size: 13px; }
.support-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.support-detail-head h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.support-thread-card { padding: 14px; }
.support-thread { display: flex; flex-direction: column; gap: 10px; max-height: min(60vh, 520px); overflow-y: auto; padding-right: 2px; }
.support-msg { max-width: min(88%, 560px); padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); }
.support-msg-user { align-self: flex-end; background: rgba(15,175,89,.12); border-color: rgba(15,175,89,.28); }
.support-msg-admin { align-self: flex-start; background: rgba(43,153,255,.10); border-color: rgba(43,153,255,.28); }
.support-msg-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 11px; color: var(--muted); }
.support-msg-sender { font-weight: 700; color: var(--text-secondary); }
.support-msg-body { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.support-reply-card h3, .support-closed-notice h3 { margin: 0 0 10px; font-size: 15px; }
.support-closed-notice p { margin: 0 0 8px; }
.support-closed-notice .btn { margin-top: 8px; }
.support-form textarea { min-height: 100px; resize: vertical; }

@media (max-width: 860px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-ticket-row { flex-direction: column; align-items: stretch; }
  .support-ticket-meta { text-align: left; }
}

@media (max-width: 390px) {
  .support-page { padding-inline: 0; }
  .support-header h2, .support-detail-head h2 { font-size: 18px; }
  .support-msg { max-width: 96%; }
  .support-ticket-subject { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* =============================================================================
   Mobile polish — consolidated overrides (320 / 375 / 480 / 768 / 1024)
   Kept last so it wins over legacy responsive rules above.
   ============================================================================= */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-nav-h: 52px;
  --mobile-topbar-h: 44px;
}

html { -webkit-text-size-adjust: 100%; }
button, .btn, a, input, select, textarea {
  -webkit-tap-highlight-color: rgba(43, 153, 255, 0.18);
}
body.menu-open,
body.lp-nav-open,
body.aff-nav-open {
  overflow: hidden;
  touch-action: none;
}

/* Desktop: hide sidebar "More" — account menu lives in topbar */
.sidebar .mobile-more { display: none; }

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .page-heading { gap: 14px; }
  .page-heading-actions { width: 100%; }
  .page-heading-actions .btn {
    flex: 1 1 auto;
    min-width: max-content;
    white-space: nowrap;
  }
  .payment-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile shell (≤768px) ---------- */
@media (max-width: 768px) {
  .app {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding-top: var(--safe-top);
  }

  .sidebar {
    position: fixed;
    z-index: 100;
    inset: auto 0 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    height: calc(var(--mobile-nav-h) + var(--safe-bottom));
    min-height: var(--mobile-nav-h);
    max-height: calc(var(--mobile-nav-h) + var(--safe-bottom));
    flex: none;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: 0 max(2px, var(--safe-right)) var(--safe-bottom) max(2px, var(--safe-left));
    border: 0;
    border-top: 1px solid var(--border);
    background: rgba(27, 30, 43, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    box-sizing: border-box;
  }

  .sidebar-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: var(--mobile-nav-h);
    min-height: var(--mobile-nav-h);
    max-height: var(--mobile-nav-h);
    padding: 0;
    margin: 0;
  }

  .sidebar-spacer,
  .sidebar-help,
  .sidebar a.sidebar-help { display: none !important; }

  .sidebar a:not(.sidebar-help),
  .sidebar .sidebar-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    height: var(--mobile-nav-h) !important;
    min-height: var(--mobile-nav-h) !important;
    max-height: var(--mobile-nav-h) !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c5c9d4;
    background: transparent !important;
    box-shadow: none !important;
    text-transform: none;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .sidebar .sidebar-label { display: none !important; }
  .sidebar .icon {
    width: 22px;
    height: 22px;
  }
  .sidebar .icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .sidebar a:not(.sidebar-help).active,
  .sidebar .sidebar-btn.active {
    background: rgba(43, 153, 255, 0.16) !important;
    color: var(--blue-bright) !important;
    box-shadow: inset 0 2px 0 var(--blue-bright) !important;
  }

  .sidebar .mobile-more { display: flex !important; }

  .main {
    min-height: 0;
    height: calc(100dvh - var(--mobile-nav-h) - var(--safe-bottom) - var(--safe-top));
    padding-bottom: 0;
  }

  .topbar {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    flex-wrap: nowrap;
    padding: 4px max(8px, var(--safe-right)) 4px max(8px, var(--safe-left));
    gap: 6px;
    align-items: center;
  }

  /* Quotex-like: balance first, brand mark only (no big wordmark) */
  .topbar > .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 2px;
    gap: 0;
    font-size: 0;
    min-width: 0;
  }
  .topbar .brand-wordmark,
  .topbar .brand-text,
  .topbar .brand-lite,
  .topbar .brand-bin,
  .topbar .brand-name { display: none !important; }
  .topbar .brand-mark { width: 26px; height: 26px; border-radius: 7px; }

  .top-actions {
    width: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .acct-wrap {
    order: 1;
    margin-right: auto;
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
  }

  .account-switch {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 2px 8px;
    gap: 4px;
    overflow: hidden;
    align-items: center;
  }

  .acct-level { display: none; }
  .acct-caret { display: none; }
  .acct-meta { gap: 3px; width: 100%; }
  .acct-label {
    font-size: 9px;
    line-height: 11px;
    letter-spacing: 0.04em;
  }
  .acct-bal {
    font-size: 14px;
    line-height: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    text-overflow: clip;
  }

  .top-actions > .icon-btn {
    order: 2;
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }

  .top-actions .btn-deposit,
  .top-actions .btn-green {
    order: 3;
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 13px;
  }

  .top-actions .btn-withdraw,
  .top-actions .btn-ghost:not(.btn-deposit) { display: none; }

  .notifications-panel {
    position: fixed;
    z-index: 240;
    top: calc(var(--safe-top) + 58px);
    left: max(8px, var(--safe-left));
    right: max(8px, var(--safe-right));
    width: auto;
    max-width: none;
    max-height: min(70dvh, 420px);
    border-radius: 10px;
    touch-action: pan-y;
  }

  #acctMenu {
    position: fixed;
    top: calc(var(--safe-top) + 62px);
    left: max(8px, var(--safe-left));
    right: max(8px, var(--safe-right));
    width: auto;
    max-width: none;
    height: auto;
    max-height: min(88dvh, 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .acct-panel-grid { grid-template-columns: 1fr; }
  .acct-panel-left { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .acct-panel-right {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding: 6px 0 8px;
    background: #12141c;
  }
  .acct-panel-right a {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    padding: 10px 14px;
  }
  .acct-logout-sep { flex: 1 1 100%; margin: 6px 14px; }
  .acct-panel-right .acct-logout { margin-top: 0; flex: 1 1 100%; }

  .content { padding: 12px max(10px, var(--safe-right)) 12px max(10px, var(--safe-left)); }
  .content-wide {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
  .flash { margin-inline: max(10px, var(--safe-left)); }

  /* Trading terminal — full viewport lock */
  .terminal {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
  }

  .term-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .term-chart-col {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .term-side {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: auto;
    border-left: 0;
    background: var(--surface-2);
  }

  .asset-bar {
    flex: 0 0 auto;
    height: 38px;
    min-height: 38px;
    padding: 0 max(8px, var(--safe-left));
    overflow: hidden;
  }

  .cat-tabs {
    width: 100%;
    height: 34px;
    padding: 2px;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 10px;
  }
  .cat-tab {
    flex: 1;
    min-height: 30px;
    padding: 0 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 8px;
  }

  .chart-wrap {
    flex: 1 1 auto;
    min-height: 200px;
    height: auto;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto;
  }

  .chart-price-tag { display: none; }
  .chart-tf { display: none; }
  .chart-zoom { display: none; }
  .chart-realtime { right: 10px; bottom: 22px; width: 28px; height: 28px; min-width: 28px; }

  /* Quotex: small vertical tool stack, top-left */
  .chart-tools {
    top: 8px;
    left: 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    width: 30px;
  }
  .chart-tools button {
    position: relative;
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(27, 30, 43, 0.88);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
  }
  .chart-tools button:hover {
    background: rgba(40, 45, 62, 0.95);
    color: #fff;
  }
  .chart-tools svg {
    width: 14px;
    height: 14px;
  }
  .chart-tools button b {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 99px;
    background: var(--blue-bright);
    color: #fff;
    font: 700 8px/14px Arial, sans-serif;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  }

  /* Quotex: clock sits near top-left after tools — not a heavy right pill */
  .chart-clock {
    top: 10px;
    left: 42px;
    right: auto;
    max-width: none;
    height: 26px;
    min-height: 26px;
    padding: 0 4px 0 0;
    gap: 5px;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.01em;
  }
  .chart-clock i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
  }
  .chart-clock small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 600;
  }
  .chart-clock button {
    min-height: 16px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #026fd3;
    color: #fff;
    font: 700 10px/16px Arial, sans-serif;
  }

  .chart-menu { bottom: 48px; left: 6px; max-width: min(260px, calc(100% - 12px)); }
  .chart-info { left: 42px; top: 36px; }
  .trade-toast-stack { top: 8px; right: 8px; width: min(280px, calc(100% - 52px)); }

  .term-trade {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--border);
  }

  /* Quotex-style bottom sheet: collapsed bar → expand upward for trade list */
  .term-history {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    border-radius: 12px 12px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
    transition: max-height 0.28s ease;
    z-index: 6;
  }
  .term-history .tp-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 14px;
    min-height: 14px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .term-history .tp-sheet-grip {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.28);
  }
  .term-history:not(.is-expanded) {
    flex: 0 0 auto;
    max-height: 54px;
    min-height: 0;
    height: auto;
  }
  .term-history:not(.is-expanded) .tp-sheet-body {
    display: none;
  }
  .term-history.is-expanded {
    max-height: min(52vh, 420px);
    height: min(52vh, 420px);
  }
  .term-history.is-expanded .tp-trades,
  .term-history.is-expanded .tp-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
  }
  .term-history.is-expanded .tp-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .tp-trade-head {
    height: 28px;
    min-height: 28px;
    padding: 2px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .tp-asset-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }
  /* Hide pair name on mobile — payout % stays */
  #assetPairHead,
  .tp-asset-meta strong#assetPairHead {
    display: none !important;
  }
  .tp-asset-meta .tp-pct {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 16px;
  }

  .tp-pending {
    position: relative;
    inset: auto;
    margin: 0;
    height: 28px;
    min-height: 28px;
    padding: 0;
    width: auto;
    gap: 6px;
    font-size: 8px;
    letter-spacing: 0.02em;
  }
  .tp-pending .toggle {
    width: 26px;
    height: 14px;
    min-height: 14px;
    padding: 2px;
  }
  .tp-pending .toggle::after {
    width: 8px;
    height: 8px;
  }
  .tp-pending .toggle[aria-pressed="true"]::after {
    transform: translateX(12px);
  }

  /* Quotex mobile: Time|Invest row, then stacked Up / Down */
  .tp-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "time invest"
      "payout payout"
      "up up"
      "down down"
      "error error";
    gap: 6px;
    padding: 4px 10px 8px;
    background: transparent;
    position: static;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .tp-order .tp-field:first-child { grid-area: time; }
  .tp-order .tp-field:nth-child(2) { grid-area: invest; }
  .tp-payout { grid-area: payout; }
  .tp-up { grid-area: up; }
  .tp-down { grid-area: down; }
  .tp-order-error { grid-area: error; }

  .tp-field {
    min-width: 0;
    overflow: visible;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border-strong);
    position: relative;
    display: block;
  }

  .tp-field label {
    position: absolute;
    z-index: 2;
    left: 8px;
    top: -7px;
    display: block;
    margin: 0;
    padding: 0 3px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    text-transform: none;
    background: var(--surface-2);
    line-height: 12px;
  }

  .tp-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }

  .tp-stepper button {
    width: 28px;
    min-width: 28px;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 18px;
    font-weight: 600;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    touch-action: manipulation;
    transition: background 0.15s ease, color 0.1s ease;
  }
  .tp-stepper button:active {
    transform: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
  }

  .tp-stepper input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: transparent;
    border: 0;
    padding: 4px 0 0;
    outline: none;
  }

  /* Save vertical space — SWITCH stays available via long-press area on desktop */
  .tp-hint {
    display: none !important;
  }

  .tp-payout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 16px;
    min-height: 16px;
    padding: 0 2px;
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
  }
  .tp-payout strong {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }

  .tp-up,
  .tp-down {
    min-height: 40px;
    height: 40px;
    width: 100%;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
  }

  .tp-up {
    background: var(--green);
    color: #04120a;
    box-shadow: none;
  }

  .tp-down {
    background: var(--red);
    color: #ffffff;
    box-shadow: none;
  }

  .tp-up:active,
  .tp-down:active {
    transform: scale(0.985);
    filter: brightness(1.05);
  }

  .tp-up svg,
  .tp-down svg {
    width: 16px;
    height: 16px;
    margin-left: auto;
    padding: 2px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    flex-shrink: 0;
  }

  .tp-tab { min-height: 36px; height: 36px; font-size: 12px; padding: 6px 12px; flex: 1 1 0; }
  .tp-tabs { height: 36px; flex: 0 0 36px; width: 100%; }
  .tp-timezone { display: none; }
  .tp-trades { padding: 0 0 2px; }
  .tp-empty { padding: 18px 10px; font-size: 12px; }
  .tp-list { padding: 0 8px 6px; }
  .tp-tab.has-tickets b#openCount {
    min-width: 17px;
    height: 17px;
    font-size: 10px;
  }

  .trader-sentiment { display: none; }

  /* Leaderboard drawer */
  .lb-drawer {
    left: 0;
    width: min(100vw, 420px);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }

  /* Product pages */
  .content:not(.content-wide) {
    padding: 16px max(10px, var(--safe-right)) calc(64px + var(--safe-bottom)) max(10px, var(--safe-left));
  }

  .page-heading { flex-direction: column; align-items: stretch; }
  .page-heading h1 { font-size: 24px; line-height: 1.2; }
  .page-heading-actions { flex-direction: column; }
  .page-heading-actions .btn { width: 100%; justify-content: center; }

  .grid-2 { grid-template-columns: 1fr; }
  .finance-card { padding: 16px !important; border-radius: 14px !important; }
  .payment-method-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .deposit-submit { grid-template-columns: 1fr; }
  .deposit-submit .btn { width: 100%; }

  /* Responsive tables → card stack */
  .table-responsive-stack { overflow: visible; border: 0; }
  .table-responsive-stack .table,
  .table-responsive-stack .finance-ledger-table {
    display: block;
    overflow: visible;
    white-space: normal;
    min-width: 0;
    width: 100%;
  }
  .table-responsive-stack .table thead { display: none; }
  .table-responsive-stack .table tbody,
  .table-responsive-stack .table tr,
  .table-responsive-stack .table td { display: block; width: 100%; }
  .table-responsive-stack .table tr {
    margin-bottom: 12px;
    padding: 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .table-responsive-stack .table tr:last-child { margin-bottom: 0; }
  .table-responsive-stack .table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    height: auto;
    white-space: normal;
    text-align: right;
    max-width: none;
  }
  .table-responsive-stack .table td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
    padding-top: 2px;
  }
  .table-responsive-stack .table td:first-child { padding-top: 0; }
  .table-responsive-stack .table td:last-child { padding-bottom: 0; }
  .table-responsive-stack .table-empty {
    display: block;
    text-align: center !important;
    padding: 24px !important;
  }
  .table-responsive-stack .table-empty::before { display: none; }
  .table-responsive-stack .table td.cell-amount,
  .table-responsive-stack .table td[data-label="Amount"] {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    align-items: center;
  }
  .table-responsive-stack .table td.cell-amount .money-value,
  .table-responsive-stack .table td[data-label="Amount"] .money-value {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    flex-shrink: 0;
  }
  .table-responsive-stack .table td.cell-details,
  .table-responsive-stack .table td[data-label="Details"] {
    max-width: none;
    white-space: normal;
  }

  /* Finance ledger mobile cards — receipt-style hierarchy */
  .table-responsive-stack .finance-ledger-table tr.ledger-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 0;
    padding: 14px 14px 14px 16px;
    overflow: visible;
    box-shadow: none;
  }
  .table-responsive-stack .finance-ledger-table tr.ledger-row--deposit {
    border-color: rgba(34, 197, 94, 0.28);
    background:
      linear-gradient(90deg, rgba(34, 197, 94, 0.1), transparent 42%),
      var(--surface-1);
    box-shadow: inset 3px 0 0 #22c55e;
  }
  .table-responsive-stack .finance-ledger-table tr.ledger-row--withdraw {
    border-color: rgba(245, 158, 11, 0.28);
    background:
      linear-gradient(90deg, rgba(245, 158, 11, 0.1), transparent 42%),
      var(--surface-1);
    box-shadow: inset 3px 0 0 #f59e0b;
  }
  .table-responsive-stack .finance-ledger-table tr.ledger-row td {
    width: auto;
    min-width: 0;
  }
  .table-responsive-stack .finance-ledger-table tr.ledger-row td:first-child {
    box-shadow: none;
    padding-top: 0;
  }
  .table-responsive-stack .finance-ledger-table .cell-type {
    grid-column: 1;
    order: 1;
    padding-top: 0;
    padding-bottom: 6px;
    justify-content: flex-start;
    align-items: center;
  }
  .table-responsive-stack .finance-ledger-table .cell-status {
    grid-column: 2;
    order: 1;
    padding-top: 0;
    padding-bottom: 6px;
    justify-content: flex-end;
    align-items: center;
  }
  .table-responsive-stack .finance-ledger-table .cell-amount {
    grid-column: 1 / -1;
    order: 2;
    padding: 8px 0 10px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 4px;
    font-size: 20px;
  }
  .table-responsive-stack .finance-ledger-table .cell-amount .money-value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .table-responsive-stack .finance-ledger-table .cell-ref { order: 3; }
  .table-responsive-stack .finance-ledger-table .cell-gateway { order: 4; }
  .table-responsive-stack .finance-ledger-table .cell-details {
    order: 5;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .table-responsive-stack .finance-ledger-table .cell-details .ledger-details {
    width: 100%;
    align-items: stretch;
  }
  .table-responsive-stack .finance-ledger-table .cell-details .ledger-detail-chip {
    justify-content: space-between;
  }
  .table-responsive-stack .finance-ledger-table .cell-date {
    order: 6;
    padding-bottom: 0;
    font-size: 12px;
    color: #64748b;
  }
  .table-responsive-stack .finance-ledger-table .cell-type::before,
  .table-responsive-stack .finance-ledger-table .cell-status::before {
    display: none;
  }
  .table-responsive-stack .finance-ledger-table .cell-amount::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .table-responsive-stack .finance-ledger-table .cell-status .status-pill {
    position: static;
    flex-shrink: 0;
  }

  .support-grid { grid-template-columns: 1fr; }
  .support-ticket-row { flex-direction: column; align-items: stretch; }
  .support-ticket-meta { text-align: left; }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
  .brand { gap: 8px; font-size: 16px; }
  .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
  .brand-lite { font-size: 15px; }
  .brand-bin { font-size: 15px; }
  .brand-name { font-size: 14px; }
  .top-actions .btn-deposit { padding-inline: 10px; font-size: 12px; }
  .account-switch {
    min-height: 44px;
    height: auto;
    padding: 5px 8px;
    overflow: visible;
  }
  .acct-caret { display: none !important; }
  .acct-meta { gap: 3px; }
  .acct-label { font-size: 9px; line-height: 11px; letter-spacing: 0.04em; }
  .acct-bal {
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }
  .chart-wrap { min-height: 180px; }
  .term-history:not(.is-expanded) { max-height: 52px; }
  .term-history.is-expanded { max-height: min(50vh, 380px); height: min(50vh, 380px); }
  .tp-order { gap: 5px; padding: 2px 8px 6px; }
  .tp-field { height: 42px; min-height: 42px; max-height: 42px; }
  .tp-up, .tp-down { min-height: 38px; height: 38px; font-size: 13px; }
  .card { padding: 14px; }
  .page-heading h1 { font-size: 22px; }
}

/* ---------- iPhone SE / narrow (≤375px) ---------- */
@media (max-width: 375px) {
  .tp-order { gap: 5px; padding: 2px 6px 6px; }
  .tp-field { height: 40px; min-height: 40px; max-height: 40px; }
  .tp-field label { font-size: 9px; left: 6px; }
  .tp-stepper button { width: 26px; min-width: 26px; font-size: 16px; }
  .tp-stepper input { font-size: 13px; }
  .tp-up, .tp-down { min-height: 36px; height: 36px; font-size: 13px; border-radius: 7px; }
  .term-history:not(.is-expanded) { max-height: 50px; }
  .term-history.is-expanded { max-height: min(48vh, 340px); height: min(48vh, 340px); }
  .cat-tab { font-size: 8.5px; padding: 0 4px; }
  .content { padding-inline: 6px; }
}

/* ---------- Ultra-narrow (≤320px) ---------- */
@media (max-width: 320px) {
  .top-actions { gap: 4px; }
  .top-actions .btn-deposit { padding-inline: 8px; font-size: 11px; }
  .account-switch { padding: 5px 6px; gap: 4px; min-height: 44px; }
  .acct-label { font-size: 8px; line-height: 10px; }
  .acct-bal { font-size: 12px; line-height: 15px; }
  .tp-order { gap: 4px; padding: 2px 4px 5px; }
  .tp-field { height: 38px; min-height: 38px; max-height: 38px; }
  .tp-stepper button { width: 24px; min-width: 24px; font-size: 15px; }
  .tp-stepper input { font-size: 12px; }
  .tp-up, .tp-down { min-height: 34px; height: 34px; font-size: 12px; padding: 0 10px; }
}