/* uikit-theme.css — AegeanOil "Liquid Glass" theme on top of UIkit 3.
   Adaptive glassmorphism: dark liquid glass (macOS Sonoma style) by default,
   light frosted glass (iOS Control Center style) when light mode is toggled.
   Each theme gets its own proper glass treatment: translucent panels with
   backdrop-blur, subtle inner highlights, and ambient accent glow. */

/* ─── Theme variables ─────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Deep navy base + frosted panel tints (semi-transparent for glass effect) */
  --bg: #07090f;
  --panel: rgba(22, 27, 34, 0.55);        /* frosted dark glass */
  --panel-solid: #161b22;                  /* fallback when blur unsupported */
  --panel-2: rgba(30, 35, 41, 0.45);
  --surface: rgba(43, 49, 57, 0.55);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #eaecef; --dim: #8b96a8; --faint: #5e6673;
  --up: #0ecb81; --down: #f6465d;
  --accent: #fcd535; --accent-2: #f0b90b;
  --glow-up: rgba(14, 203, 129, .14); --glow-down: rgba(246, 70, 93, .14);
  --glow-acc: rgba(252, 213, 53, .10);

  /* Glass effect tokens */
  --glass-blur: 24px;
  --glass-saturate: 1.4;
  --glass-tint: rgba(255, 255, 255, 0.04);
  --glass-highlight: rgba(255, 255, 255, 0.08);  /* top inner edge highlight */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 1px 0 var(--glass-highlight);
  --radius: 18px;
  --radius-sm: 11px;

  /* Aliases kept for JS references (var(--tp-*)) */
  --tp-bg: var(--bg); --tp-panel: var(--panel); --tp-panel-2: var(--panel-2);
  --tp-border: var(--border); --tp-text: var(--text); --tp-text-dim: var(--dim);
  --tp-up: var(--up); --tp-down: var(--down);
  --tp-accent: var(--accent); --tp-accent-2: var(--accent-2);
  --tp-text-dim: var(--dim);

  /* UIkit variable overrides (dark) */
  --uk-background-default: var(--bg);
  --uk-background-muted: var(--panel);
  --uk-background-secondary: var(--panel-2);
  --uk-border: var(--border);
  --uk-text: var(--text);
  --uk-text-muted: var(--dim);
  --uk-input-background: var(--panel-2);
  --uk-input-border: var(--border);
  --uk-button-default-background: var(--surface);
  --uk-button-default-border: var(--border);

  color-scheme: dark;
}

[data-theme="light"] {
  /* Soft gradient base + frosted white glass (iOS Control Center) */
  --bg: #eef1f6;
  --panel: rgba(255, 255, 255, 0.62);       /* frosted white glass */
  --panel-solid: #ffffff;
  --panel-2: rgba(255, 255, 255, 0.42);
  --surface: rgba(255, 255, 255, 0.55);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --text: #1a1f2e; --dim: #5a6478; --faint: #98a1b3;
  --up: #0cb873; --down: #e63956;
  --accent: #b3850a; --accent-2: #d99e0a;
  --glow-up: rgba(12, 184, 115, .12); --glow-down: rgba(230, 57, 86, .12);
  --glow-acc: rgba(217, 158, 10, .10);

  /* Glass effect tokens */
  --glass-blur: 30px;
  --glass-saturate: 1.2;
  --glass-tint: rgba(255, 255, 255, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12), inset 0 1px 0 var(--glass-highlight);
  --radius: 18px;
  --radius-sm: 11px;

  --tp-bg: var(--bg); --tp-panel: var(--panel); --tp-panel-2: var(--panel-2);
  --tp-border: var(--border); --tp-text: var(--text); --tp-text-dim: var(--dim);
  --tp-up: var(--up); --tp-down: var(--down);
  --tp-accent: var(--accent); --tp-accent-2: var(--accent-2);

  --uk-background-default: var(--bg);
  --uk-background-muted: var(--panel);
  --uk-background-secondary: var(--panel-2);
  --uk-border: var(--border);
  --uk-text: var(--text);
  --uk-text-muted: var(--dim);

  color-scheme: light;
}

/* ─── Base + ambient background ───────────────────────────────── */
html, body { height: 100%; background: var(--bg) !important; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient glow blobs — fixed, blurred, behind everything. Gives the glass
   panels something colorful to refract. Animated drift for life. */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  animation: drift 24s ease-in-out infinite alternate;
}

/* The trading terminal is a continuously-updating workspace. Keep its
   background static so the chart and live quotes get the GPU budget. */
.dashboard-page::before,
.dashboard-page::after { display: none; animation: none; filter: none; }
body::before {
  width: 480px; height: 480px;
  top: -120px; left: -120px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}
body::after {
  width: 520px; height: 520px;
  bottom: -160px; right: -160px;
  background: radial-gradient(circle, #2962ff 0%, transparent 70%);
  animation-delay: -12s;
  animation-duration: 30s;
}
[data-theme="light"] body::before { opacity: 0.35; }
[data-theme="light"] body::after { opacity: 0.28; }

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.15); }
}

/* All app content sits above the ambient blobs */
nav, .uk-navbar-container, .tp-nav, .uk-section, .uk-container, .main-layout,
.portfolio-bar, .tp-panel, .uk-card, .modal, .uk-modal, .chat-fab, .chat-popup,
.toast, .tp-nav + * { position: relative; z-index: 1; }

::selection { background: var(--accent); color: #1e2329; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ─── Glass surface primitive ─────────────────────────────────── */
/* Reusable frosted-glass treatment. Applied to panels, cards, modals, nav. */
.glass {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%),
    var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}
/* Specular sheen: a soft diagonal light streak across the top edge, like
   real glass catching the light. Pointer-transparent, sits above content. */
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}

/* ─── Force UIkit surfaces to the glass palette ───────────────── */
.uk-background-default { background: var(--bg) !important; }
.uk-background-muted { background: var(--panel) !important; }
.uk-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%),
    var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}
.uk-card-body { padding: 14px; }
.uk-input, .uk-select, .uk-textarea {
  background: var(--glass-tint) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--glow-acc);
}
.uk-input::placeholder { color: var(--faint); }
.uk-table { color: var(--text); }
.uk-table th { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.uk-table td { border-color: var(--border) !important; }
.uk-table-striped tbody tr:nth-of-type(odd) { background: var(--glass-tint); }
.uk-link, a { color: var(--accent); }

/* Buttons — glass with hover lift */
.uk-button {
  border-radius: var(--radius-sm);
  transition: all .18s cubic-bezier(.4, 0, .2, 1);
  font-weight: 600;
}
.uk-button-default {
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  border: 1px solid var(--border);
}
.uk-button-default:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--glow-acc);
}
.uk-button-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1a1a;
  box-shadow: 0 4px 14px var(--glow-acc);
}
.uk-button-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--glow-acc);
}
.uk-button-danger {
  background: linear-gradient(135deg, var(--down), #c93550);
  color: #fff;
  box-shadow: 0 4px 14px var(--glow-down);
}
.uk-button-danger:hover { filter: brightness(1.08); transform: translateY(-1px); }
.uk-button-success {
  background: linear-gradient(135deg, var(--up), #0aa56e);
  color: #fff;
  box-shadow: 0 4px 14px var(--glow-up);
}
.uk-button-success:hover { filter: brightness(1.08); transform: translateY(-1px); }
.uk-button-small { font-size: 11px; padding: 0 12px; line-height: 30px; }
.uk-button-text { color: var(--dim); padding: 0; }
.uk-button-text:hover { color: var(--accent); }

.uk-label {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--dim);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: none;
  border: 1px solid var(--border);
}

/* Modals — premium glass dialog */
.uk-modal-dialog, .uk-modal-body {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%),
    var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), var(--glass-shadow);
}
.uk-modal-body { background: transparent; }
.uk-modal-header, .uk-modal-footer { background: transparent; border-color: var(--border); }
.uk-modal-title { font-weight: 700; }

/* Tabs — underline with glow */
.uk-tab { border-bottom: 1px solid var(--border); }
.uk-tab > * > a {
  color: var(--dim);
  border-bottom: 2px solid transparent;
  font-weight: 600;
  transition: color .15s;
}
.uk-tab > .uk-active > a {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--glow-acc);
}
.uk-tab > * > a:hover { color: var(--text); }

/* Navbar — frosted sticky glass */
.uk-navbar-container {
  background: var(--panel) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--glass-highlight);
}
.uk-navbar-container .uk-navbar-nav > li > a {
  color: var(--dim);
  font-size: 12px;
  min-height: 38px;
  padding: 0 10px;
  font-weight: 500;
  transition: color .15s;
}
.uk-navbar-container .uk-navbar-nav > li > a:hover,
.uk-navbar-container .uk-navbar-nav > li.uk-active > a {
  color: var(--accent);
}
.uk-navbar-container .uk-navbar-toggle,
.uk-navbar-container .uk-navbar-item {
  color: var(--text);
  min-height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}
.uk-dropdown {
  background: var(--panel-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-shadow);
}

/* Force UIkit sections/containers/tiles to use our theme backgrounds */
.uk-section, .uk-section-default, .uk-section-muted,
.uk-tile, .uk-tile-default, .uk-tile-muted,
.uk-container { background-color: transparent !important; }

/* ─── Brand + theme toggle ───────────────────────────────────── */
.tp-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  color: var(--accent) !important;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: -.01em;
}
.tp-theme-toggle {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--dim);
  cursor: pointer;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 99px;
  transition: all .15s;
}
.tp-theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Role badges (glass pills) ───────────────────────────────── */
.role-admin { background: linear-gradient(135deg, var(--down), #c93550) !important; color: #fff !important; border: none !important; font-size: 9px !important; padding: 2px 8px !important; }
.role-manager { background: linear-gradient(135deg, #d29922, #b8831a) !important; color: #fff !important; border: none !important; font-size: 9px !important; padding: 2px 8px !important; }
.role-agent { background: linear-gradient(135deg, #2962ff, #1e4dd6) !important; color: #fff !important; border: none !important; font-size: 9px !important; padding: 2px 8px !important; }
.role-user { background: linear-gradient(135deg, var(--up), #0aa56e) !important; color: #fff !important; border: none !important; font-size: 9px !important; padding: 2px 8px !important; }
.uk-navbar-item .uk-label { font-size: 9px; padding: 2px 8px; border-radius: 99px; }

/* ─── Direction / P&L colors ──────────────────────────────────── */
.up { color: var(--up); }
.down { color: var(--down); }
.text-up { color: var(--up); }
.text-down { color: var(--down); }
.pnl-positive { color: var(--up); font-weight: 600; }
.pnl-negative { color: var(--down); font-weight: 600; }

/* ─── Ghost buttons (used in tables) ──────────────────────────── */
.btn-ghost {
  background: var(--glass-tint) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--glow-acc) !important;
}

/* ─── Panels (frosted glass cards) ────────────────────────────── */
.tp-panel {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%),
    var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.tp-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--glass-tint);
}
.tp-panel-body { padding: 12px 14px; }
.tp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tp-table th {
  text-align: left; color: var(--faint); font-weight: 600;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.tp-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tp-table tr { transition: background .12s; }
.tp-table tr:hover td { background: var(--glass-tint); }

/* ─── Stat cards (glass with accent glow on hover) ────────────── */
.stat-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--glass-highlight) 0%, rgba(255,255,255,0) 38%),
    var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--glass-shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--glass-highlight);
}
.stat-card .stat-label {
  font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 5px;
}
.stat-card .stat-value {
  font-size: 24px; font-weight: 800; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* ─── Balance display ─────────────────────────────────────────── */
.client-balance-display, .admin-balance-display, .mgr-balance-display {
  font-size: 18px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.client-balance-label, .admin-balance-label, .mgr-balance-label {
  font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em;
}

/* ─── Quick adjust buttons ────────────────────────────────────── */
.quick-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.quick-btns button {
  padding: 4px 10px; font-size: 10px; font-weight: 700;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--dim); cursor: pointer; font-family: inherit;
  transition: all .12s;
}
.quick-btns button:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.quick-btns button.credit { border-color: rgba(14,203,129,.4); color: var(--up); }
.quick-btns button.credit:hover { background: var(--up); color: #fff; }
.quick-btns button.debit { border-color: rgba(246,70,93,.4); color: var(--down); }
.quick-btns button.debit:hover { background: var(--down); color: #fff; }
.adjust-row { display: flex; gap: 4px; align-items: center; }
.adjust-row input { width: 80px; }

/* ─── Empty states ────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 32px; color: var(--dim);
  background: var(--glass-tint);
}
.empty-state i { font-size: 28px; display: block; margin-bottom: 10px; opacity: .4; }
.pos-empty { padding: 28px; text-align: center; color: var(--dim); }

/* ─── Skeleton loader (for async content) ─────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--glass-tint) 25%, var(--border) 50%, var(--glass-tint) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row { height: 14px; margin: 8px 0; }

/* ─── Client avatar / display ─────────────────────────────────── */
.client-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--glow-acc);
}
.client-name { font-weight: 700; color: var(--text); }
.client-sub { font-size: 11px; color: var(--dim); }

/* ─── Referral share card ─────────────────────────────────────── */
.referral-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: 0 8px 32px var(--glow-acc), var(--glass-shadow);
}
.referral-card .ref-icon { font-size: 28px; color: var(--accent); }
.referral-card .ref-text strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.referral-card .ref-text span { font-size: 12px; color: var(--dim); }
.referral-code-box {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--glass-tint);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-sm);
  font-family: 'SF Mono', 'Monaco', monospace; font-size: 17px; font-weight: 800;
  color: var(--accent); letter-spacing: .05em;
}
.referral-code-box button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1a1a; border: none; padding: 5px 12px;
  border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 700;
  transition: filter .15s;
}
.referral-code-box button:hover { filter: brightness(1.1); }

/* ─── Pair icons (dashboard market + trade panel) ─────────────── */
.pair-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; color: #fff;
  overflow: hidden; position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.pair-icon img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; position: absolute; inset: 0; }
.pair-icon-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pair-icon-crypto, .pair-icon-stock { background: var(--surface); }
.pair-icon-commodity { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.pair-icon-forex { background: linear-gradient(135deg, #2563eb, #14b8a6); }
.pair-icon-index { background: linear-gradient(135deg, #f59e0b, #ef4444); }

/* ─── Dashboard layout ───────────────────────────────────────── */
.portfolio-bar {
  display: flex; gap: 0;
  background: var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--border);
  padding: 12px 22px;
  overflow-x: auto;
  box-shadow: 0 1px 0 var(--glass-highlight);
}
.portfolio-stat {
  display: flex; flex-direction: column;
  min-width: 110px; padding-right: 26px; margin-right: 26px;
  border-right: 1px solid var(--border);
}
.portfolio-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.portfolio-stat-label {
  font-size: 10px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 3px;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.portfolio-stat-label i { font-size: 10px; }
.portfolio-stat-value {
  font-size: 21px; font-weight: 800; color: var(--text);
  line-height: 1.2; font-variant-numeric: tabular-nums;
  white-space: nowrap; letter-spacing: -.02em;
  transition: color .3s;
}
.portfolio-stat-value.flash-up { animation: valFlashUp .6s ease-out; }
.portfolio-stat-value.flash-down { animation: valFlashDown .6s ease-out; }
@keyframes valFlashUp { 0% { color: var(--up); } 100% { color: var(--text); } }
@keyframes valFlashDown { 0% { color: var(--down); } 100% { color: var(--text); } }

.main-layout { display: flex; padding: 8px; gap: 0; height: calc(100vh - 116px); }
.market-panel { width: 290px; flex-shrink: 0; display: flex; flex-direction: column; }
.market-panel .tp-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chart-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.chart-full { flex: 1 1 0; display: flex; flex-direction: column; min-height: 300px; overflow: hidden; }
.positions-panel { flex: 0 0 128px; min-height: 96px; display: flex; flex-direction: column; overflow: hidden; }
.trade-history-panel.dashboard-window { flex: 0 0 196px; min-height: 132px; display: flex; flex-direction: column; }
.positions-panel > .positions-wrap,
.trade-history-panel > .trade-history-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.dashboard-window { min-width: 0; }
.dashboard-splitter {
  position: relative;
  z-index: 24;
  flex: 0 0 auto;
  outline: none;
  touch-action: none;
  user-select: none;
}
.dashboard-splitter--columns { width: 10px; cursor: col-resize; }
.dashboard-splitter--rows { height: 9px; cursor: row-resize; }
.dashboard-splitter span {
  position: absolute;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dashboard-splitter--columns span { top: 12px; bottom: 12px; left: 4px; width: 2px; }
.dashboard-splitter--rows span { left: 14px; right: 14px; top: 3px; height: 3px; }
.dashboard-splitter:hover span,
.dashboard-splitter:focus-visible span,
.dashboard-splitter.is-active span { background: var(--accent); box-shadow: 0 0 0 4px var(--glow-acc), 0 0 18px var(--glow-acc); }
.dashboard-splitter--columns:hover span,
.dashboard-splitter--columns:focus-visible span,
.dashboard-splitter--columns.is-active span { transform: scaleX(1.45); }
.dashboard-splitter--rows:hover span,
.dashboard-splitter--rows:focus-visible span,
.dashboard-splitter--rows.is-active span { transform: scaleY(1.4); }
body.dashboard-resizing,
body.dashboard-resizing * { cursor: inherit !important; user-select: none !important; }
.dashboard-layout-reset {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 30px; padding: 0 9px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--glass-tint); color: var(--dim);
  font: inherit; font-size: 9px; font-weight: 800; cursor: pointer;
}
.dashboard-layout-reset:hover { color: var(--accent); border-color: var(--accent); background: var(--glow-acc); }
.dashboard-layout-reset i { font-size: 10px; }
.chart-area { flex: 1; position: relative; overflow: hidden; display: flex; }
.chart-area .chart-wrap { flex: 1; min-width: 0; }
.chart-wrap { height: 100%; position: relative; overflow: hidden; min-height: 400px; }
.chart-wrap .tradingview-widget-container, .chart-wrap iframe {
  height: calc(100% + 36px) !important; margin-bottom: -36px; width: 100% !important;
}
.chart-wrap::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
  background: var(--panel-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  pointer-events: none; z-index: 2;
}
.chart-wrap.has-api-chart::after { display: none; }
.chart-wrap .native-market-chart {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
.api-market-chart-shell { height: 100%; min-height: 360px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: var(--panel-solid); }
.api-chart-topbar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 10px; border-bottom: 1px solid var(--border); }
.api-chart-topbar > div:first-child { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.api-chart-topbar strong { color: var(--text); font-size: 11px; }
.api-chart-topbar span { color: var(--faint); font-size: 8px; }
.api-chart-ranges { display: flex; align-items: center; gap: 3px; }
.api-chart-ranges button { min-width: 31px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.api-chart-ranges button:hover { color: var(--text); background: var(--glass-tint); }
.api-chart-ranges button.active { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 45%,transparent); background: var(--glow-acc); }
.api-chart-stage { position: relative; min-width: 0; min-height: 320px; overflow: hidden; }
.api-chart-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--dim); font-size: 11px; }
.api-chart-message i { color: var(--accent); font-size: 20px; }
.api-chart-message.error i { color: var(--down); }
.api-chart-message button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--glass-tint); color: var(--text); cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.api-chart-credit { min-height: 25px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 3px 10px; border-top: 1px solid var(--border); color: var(--faint); font-size: 8px; }
.api-chart-credit a { color: var(--dim); text-decoration: none; }
.api-chart-credit a:hover { color: var(--accent); }
.tradingview-widget-container { height: 100%; width: 100%; }

/* ─── Market list ─────────────────────────────────────────────── */
.market-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  padding: 8px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background .12s, transform .12s;
  font-variant-numeric: tabular-nums;
}
.market-row:hover { background: var(--glass-tint); }
.market-row.active {
  background: var(--glow-acc);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}
.market-scroll { flex: 1; overflow-y: auto; }
.market-scroll { contain: layout paint style; }
.market-scroll .market-row {
  content-visibility: auto;
  contain-intrinsic-size: 52px;
}
.market-header-row {
  cursor: pointer; padding: 6px 14px;
  background: var(--glass-tint);
  border-bottom: 1px solid var(--border);
  font-size: 10px; text-transform: uppercase; color: var(--faint); letter-spacing: .04em;
}
.market-header-row .sortable { cursor: pointer; display: flex; align-items: center; gap: 3px; user-select: none; }
.market-header-row .sortable:hover { color: var(--dim); }
.market-header-row .sortable i { font-size: 8px; opacity: .4; }
.market-header-row .sortable.sorted i { opacity: 1; color: var(--accent); }
.pair-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pair-text { min-width: 0; }
.pair-sym { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.2; }
.pair-name { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-cell { font-size: 14px; font-weight: 700; text-align: right; }
.chg-cell { font-size: 13px; font-weight: 700; text-align: right; }
.market-type-btn {
  padding: 6px 14px !important; font-size: 12px !important; font-weight: 700 !important;
  border-radius: var(--radius-sm) !important; border: 1px solid var(--border) !important;
  background: var(--glass-tint) !important;
  -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
  color: var(--dim) !important; cursor: pointer;
  display: inline-flex !important; align-items: center; gap: 5px;
  transition: all .15s !important;
}
.market-type-btn:hover { border-color: var(--accent) !important; color: var(--text) !important; }
.market-type-btn.active { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--glow-acc) !important; }
.market-type-picker { position: relative; display: inline-flex; }
.market-type-chevron { font-size: 9px; margin-left: 2px; opacity: .7; }
.market-type-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; min-width: 148px;
  padding: 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.market-type-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 5px; background: transparent; color: var(--dim);
  text-align: left; font-size: 12px; font-weight: 700; cursor: pointer;
}
.market-type-menu button:hover, .market-type-menu button.active { color: var(--accent); background: var(--glow-acc); }
.market-cat-tabs { display: flex; gap: 3px; }
.market-cat-tabs button {
  flex: 1; padding: 4px 6px; font-size: 10px; font-weight: 700; border-radius: 6px;
  border: 1px solid var(--border); background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--dim); cursor: pointer; transition: all .12s;
}
.market-cat-tabs button:hover { color: var(--text); border-color: var(--accent); }
.market-cat-tabs button.active { color: var(--accent); border-color: var(--accent); background: var(--glow-acc); }
.market-view-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.market-view-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--glass-tint); }
.market-view-toggle button { padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.market-view-toggle button:hover { color: var(--text); }
.market-view-toggle button.active { color: #17191e; background: var(--accent); }
.market-result-count { color: var(--faint); font-size: 9px; white-space: nowrap; }
.market-load-more { width: calc(100% - 20px); display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px; padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--glass-tint); color: var(--dim); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }
.market-load-more:hover { color: var(--accent); border-color: var(--accent); }
.market-load-more span { color: var(--faint); font-weight: 500; }
.currency-flags { position: relative; width: 30px; height: 22px; display: inline-block; font-size: 17px; line-height: 1; }
.currency-flags span { position: absolute; filter: saturate(.9); }
.currency-flags span:first-child { left: 0; top: 0; z-index: 1; }
.currency-flags span:last-child { right: 0; bottom: 0; }
.macro-market-icon { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 17px; line-height: 1; }
.pair-icon-commodity .macro-market-icon { color: #ffd76a; font-size: 14px; }

/* Avoid a separate backdrop-blur compositor layer on every live dashboard
   surface. Solid theme surfaces retain the same hierarchy at much lower cost. */
.dashboard-page .tp-panel,
.dashboard-page .portfolio-bar,
.dashboard-page .trade-overlay,
.dashboard-page .market-type-btn,
.dashboard-page .market-cat-tabs button,
.dashboard-page .chart-wrap::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.dashboard-page .tp-panel,
.dashboard-page .portfolio-bar,
.dashboard-page .trade-overlay { background: var(--panel-solid); }

/* ─── Chart header ────────────────────────────────────────────── */
.chart-pair-selector { display: flex; align-items: center; gap: 14px; }
.chart-stats-bar { display: flex; gap: 0; padding: 0; background: none; border: none; overflow-x: auto; }
.chart-stat { display: flex; flex-direction: column; padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--border); }
.chart-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.chart-stat .dim { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px; }
.chart-stat span:last-child { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─── Trade overlay ───────────────────────────────────────────── */
.trade-overlay {
  position: absolute; bottom: 0; left: 0; width: 330px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-saturate));
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-saturate));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 10;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--glass-highlight);
  max-height: 85%; overflow-y: auto;
  animation: tradeOverlayIn .25s cubic-bezier(.4, 0, .2, 1);
}
.trade-overlay-resize-cue { display: none; }
@media (min-width: 769px) {
  .trade-overlay { min-width: 285px; min-height: 270px; max-width: min(620px, 78%); max-height: 94%; resize: both; }
  .trade-overlay-resize-cue { position: absolute; right: 4px; bottom: 4px; z-index: 12; display: grid; place-items: center; width: 20px; height: 20px; color: var(--accent); font-size: 8px; opacity: .72; pointer-events: none; }
}
@keyframes tradeOverlayIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.trade-overlay-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--glass-tint);
}
.trade-overlay-body { padding: 14px 16px; }
.trade-popup-pair { display: flex; align-items: center; gap: 10px; padding: 8px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.trade-live-quote { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; margin:-4px 0 10px; }
.trade-live-quote > div { border:1px solid var(--border); border-radius:7px; padding:7px 8px; background:var(--glass-tint); text-align:center; min-width:0; }
.trade-live-quote small { display:block; color:var(--faint); font-size:8px; font-weight:800; letter-spacing:.06em; }
.trade-live-quote strong { display:block; margin-top:2px; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trade-live-quote .quote-bid strong { color:var(--down); }
.trade-live-quote .quote-ask strong { color:var(--up); }
.trade-live-quote .quote-spread { padding-inline:6px; }
.trade-live-quote .quote-spread strong { color:var(--accent); font-size:11px; }
.trade-popup-info { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.trade-info-label { font-size: 13px; color: var(--faint); }
.trade-info-value { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.trade-panel-side-toggle { display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); margin-bottom: 12px; }
.trade-panel-side-toggle button {
  flex: 1; padding: 11px 0; font-size: 14px; font-weight: 800; border: none;
  cursor: pointer; transition: all .15s; text-transform: uppercase; letter-spacing: .05em;
  font-family: inherit; background: var(--glass-tint); color: var(--dim);
}
.trade-panel-side-toggle .trade-btn-buy.active { background: linear-gradient(135deg, var(--up), #0aa56e); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.trade-panel-side-toggle .trade-btn-sell.active { background: linear-gradient(135deg, var(--down), #c93550); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.trade-input-group { margin: 10px 0 4px; }
.trade-amount-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.trade-input-group label { display: block; font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; font-weight: 700; }
.fx-qty-toggle { display:flex; border:1px solid var(--border); border-radius:5px; overflow:hidden; margin-bottom:5px; }
.fx-qty-toggle button { border:0; border-right:1px solid var(--border); background:transparent; color:var(--dim); padding:3px 8px; font:700 9px inherit; cursor:pointer; }
.fx-qty-toggle button:last-child { border-right:0; }
.fx-qty-toggle button.active { background:var(--accent); color:#151515; }
.trade-input-wrap { display: flex; align-items: center; background: var(--glass-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; }
.trade-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-acc); }
.trade-input-wrap input {
  flex: 1; background: transparent; border: none; color: var(--text);
  font-size: 22px; font-weight: 800; padding: 13px 16px; outline: none;
  font-family: 'SF Mono', monospace; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.trade-input-wrap input::placeholder { color: var(--faint); font-weight: 400; }
.trade-input-unit { padding: 0 12px; font-size: 12px; color: var(--dim); font-weight: 700; white-space: nowrap; border-left: 1px solid var(--border); background: var(--glass-tint); display: flex; align-items: center; }
.size-pct { display: flex; gap: 4px; margin-top: 5px; margin-bottom: 10px; }
.size-pct button {
  flex: 1; background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--dim); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 0; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.size-pct button:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.trade-summary { background: var(--glass-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; }
.trade-risk-stack { display: grid; gap: 10px; margin: 10px 0; }
.trade-risk-card {
  background: rgba(39, 43, 56, .82); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 11px; transition: border-color .15s, opacity .15s;
}
.trade-risk-card:not(.is-enabled) { opacity: .72; }
.trade-risk-card.is-enabled { border-color: var(--border-strong); opacity: 1; }
.trade-risk-heading { display:flex; align-items:center; gap:7px; color:var(--text); font-size:13px; cursor:pointer; user-select:none; }
.trade-risk-heading input { position:absolute; opacity:0; pointer-events:none; }
.trade-risk-check { width:18px; height:18px; border-radius:4px; border:1px solid var(--border-strong); background:var(--glass-tint); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
.trade-risk-heading input:checked + .trade-risk-check { background:var(--up); border-color:var(--up); }
.trade-risk-heading input:checked + .trade-risk-check::after { content:'✓'; font-weight:800; }
.trade-risk-details { animation: riskDetailsIn .16s ease-out; }
@keyframes riskDetailsIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.trade-risk-tabs { display:flex; margin:9px 0 8px; border:1px solid var(--border); border-radius:5px; overflow:hidden; }
.trade-risk-tabs button { flex:1; border:0; border-right:1px solid var(--border); background:transparent; color:var(--dim); padding:6px 4px; font-family:inherit; font-size:10px; font-weight:600; cursor:pointer; }
.trade-risk-tabs button:last-child { border-right:0; }
.trade-risk-tabs button.active { background:var(--glass-tint); color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong); }
.trade-risk-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:18px; font-size:11px; color:var(--faint); }
.trade-risk-meta strong { color:var(--up); font-weight:800; }
#stopLossCard .trade-risk-meta strong { color:var(--down); }
.trade-risk-input-row { display:flex; gap:5px; align-items:stretch; margin-top:7px; }
.trade-risk-input-row input { min-width:0; flex:1; color:var(--text); background:var(--glass-tint); border:1px solid var(--border); border-radius:5px; padding:10px 11px; font:800 17px 'SF Mono',monospace; outline:none; }
.trade-risk-input-row input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--glow-acc); }
.trade-risk-input-row button { width:28px; border:1px solid var(--border); border-radius:5px; background:var(--glass-tint); color:var(--text); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; }
.trade-risk-input-row button:hover { border-color:var(--accent); color:var(--accent); }
.trade-execute-btn {
  width: 100%; padding: 15px; font-size: 16px; font-weight: 800;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  text-transform: uppercase; letter-spacing: .06em;
  transition: all .2s; color: #fff; font-family: inherit;
  letter-spacing: -.01em;
}
.trade-execute-btn:active { transform: scale(.98); }
.trade-execute-btn.btn-buy { background: linear-gradient(135deg, var(--up), #0aa56e); box-shadow: 0 4px 16px var(--glow-up); }
.trade-execute-btn.btn-buy:hover { box-shadow: 0 6px 24px var(--glow-up); filter: brightness(1.1); transform: translateY(-1px); }
.trade-execute-btn.btn-sell { background: linear-gradient(135deg, var(--down), #c93550); box-shadow: 0 4px 16px var(--glow-down); }
.trade-execute-btn.btn-sell:hover { box-shadow: 0 6px 24px var(--glow-down); filter: brightness(1.1); transform: translateY(-1px); }
.trade-execute-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; filter: none !important; box-shadow: none !important; }
.position-risk-cell { white-space:nowrap; font-size:10px; line-height:1.45; }
.position-risk-cell span { display:block; }
.position-risk-cell .risk-tp { color:var(--tp-up); }
.position-risk-cell .risk-sl { color:var(--tp-down); }

/* ─── Flash on price update ──────────────────────────────────── */
@keyframes flash-up   { 0% { background: var(--glow-up); }   100% { background: transparent; } }
@keyframes flash-down { 0% { background: var(--glow-down); } 100% { background: transparent; } }
.flash-up { animation: flash-up .6s ease-out; }
.flash-down { animation: flash-down .6s ease-out; }

/* Actual tick direction (not the 24-hour percentage). The cache includes the
   previous price with every WS message, so all market types use one signal. */
@keyframes price-flash-up {
  0% { color: var(--up); background: var(--glow-up); box-shadow: 0 0 0 1px rgba(14,203,129,.32); }
  100% { background: transparent; box-shadow: 0 0 0 1px transparent; }
}
@keyframes price-flash-down {
  0% { color: var(--down); background: var(--glow-down); box-shadow: 0 0 0 1px rgba(246,70,93,.32); }
  100% { background: transparent; box-shadow: 0 0 0 1px transparent; }
}
.price-flash-up,
.price-flash-down {
  border-radius: 5px;
  animation-duration: .8s;
  animation-timing-function: ease-out;
}
.price-flash-up { animation-name: price-flash-up; }
.price-flash-down { animation-name: price-flash-down; }

/* ─── Positions table ────────────────────────────────────────── */
.positions-wrap { max-height: 220px; overflow-y: auto; }

/* ─── Agent/Manager User Selector ─────────────────────────────── */
.agent-user-bar {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
/* When compact bar is shown, override to top bar */
.agent-user-bar.has-selection {
  position: relative; inset: auto;
  background: linear-gradient(180deg, rgba(0,200,150,.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  display: block;
}
/* Full selector (no user picked) */
.agent-select-wrap {
  max-width: 480px; width: 100%; padding: 24px 20px 20px;
}
.agent-select-header {
  text-align: center; font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.agent-select-header i { color: var(--accent); font-size: 18px; }

/* Search */
.agent-select-search {
  position: relative; margin-bottom: 16px;
}
.agent-select-search > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 13px; pointer-events: none; z-index: 1;
}
.agent-select-search input {
  width: 100%; padding: 12px 14px 12px 40px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 14px;
  outline: none; transition: all .2s; box-sizing: border-box;
}
.agent-select-search input::placeholder { color: var(--faint); }
.agent-select-search input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-acc);
}
.agent-user-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 200; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.agent-user-dropdown.show { display: block; }
.agent-user-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .12s; display: flex; align-items: center; gap: 10px;
}
.agent-user-item:hover { background: var(--glass-tint); }
.agent-user-item:last-child { border-bottom: none; }
.agent-user-item .item-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.agent-user-item .item-info { flex: 1; min-width: 0; }
.agent-user-item .item-name { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.agent-user-item .item-meta { font-size: 11px; color: var(--faint); display: block; }
.agent-user-item .item-bal { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* Recent section */
.agent-select-recent { margin-bottom: 12px; }
.agent-recent-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 8px; font-weight: 700; }
.agent-recent-list { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-recent-card {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px;
  cursor: pointer; transition: all .15s; font-size: 12px; color: var(--text);
}
.agent-recent-card:hover {
  border-color: var(--accent); background: rgba(0,200,150,.06);
  box-shadow: 0 0 12px rgba(0,200,150,.1);
}
.agent-recent-card .rc-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.agent-recent-card .rc-name { font-weight: 600; }

/* All users list */
.agent-select-all { }
.agent-all-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 8px; font-weight: 700; }
.agent-all-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  transition: background .12s; margin-bottom: 2px;
}
.agent-all-item:hover { background: var(--glass-tint); }
.agent-all-item .ai-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.agent-all-item .ai-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.agent-all-item .ai-name { font-size: 13px; font-weight: 600; color: var(--text); }
.agent-all-item .ai-meta { font-size: 10px; color: var(--faint); }
.agent-all-item .ai-bal { font-size: 12px; font-weight: 600; color: var(--accent); }

/* Compact bar (after user selected) */
.agent-compact-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px; max-width: 1100px; margin: 0 auto;
}
.agent-compact-left {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.agent-compact-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1e2329; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.agent-compact-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.agent-compact-bal { font-size: 11px; color: var(--faint); }
.agent-compact-switch, .agent-compact-x {
  background: var(--glass-tint); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 11px;
  cursor: pointer; color: var(--text); transition: all .15s;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.agent-compact-switch:hover { border-color: var(--accent); color: var(--accent); }
.agent-compact-x { padding: 4px 8px; }
.agent-compact-x:hover { border-color: var(--down); color: var(--down); }

.trade-for-badge {
  margin-left: auto; font-size: 10px; font-weight: 600;
  color: var(--accent); background: rgba(0,200,150,.1);
  padding: 2px 8px; border-radius: 8px;
}

/* ─── Chat ────────────────────────────────────────────────────── */
.chat-fab {
  position: fixed; bottom: 22px; right: 22px;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1e2329;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
  box-shadow: 0 6px 20px var(--glow-acc);
  z-index: 1000;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--glass-highlight);
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 8px 28px var(--glow-acc); }
.chat-fab-badge {
  position: absolute; top: -3px; right: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--down); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
  animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.chat-popup {
  position: fixed; bottom: 84px; right: 22px;
  width: 380px; height: 520px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  z-index: 999;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), var(--glass-shadow);
  animation: slideUp .25s cubic-bezier(.4, 0, .2, 1);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-popup-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--glass-tint);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 13px; font-weight: 700;
}
.chat-popup-close { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 15px; padding: 4px; transition: color .15s; }
.chat-popup-close:hover { color: var(--down); }
.chat-popup-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.chat-popup-input { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--glass-tint); border-radius: 0 0 var(--radius) var(--radius); }
.chat-popup-input input {
  flex: 1; font-size: 13px;
  background: var(--glass-tint); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 8px 12px;
}
.chat-popup-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-acc); outline: none; }
.chat-bubble-user {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1e2329;
  border-radius: 14px 14px 4px 14px;
  padding: 9px 14px; margin-left: auto; max-width: 80%;
  word-wrap: break-word; font-size: 13px; line-height: 1.4; font-weight: 600;
  box-shadow: 0 2px 8px var(--glow-acc);
}
.chat-bubble-ai {
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 9px 14px; max-width: 85%;
  word-wrap: break-word; font-size: 13px; line-height: 1.5;
}
.chat-bubble-system { color: var(--faint); font-size: 10px; text-align: center; font-style: italic; padding: 5px; }
.chat-suggestions { display: flex; gap: 5px; padding: 8px 12px; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--glass-tint); }
.chat-suggestions button {
  padding: 5px 11px; font-size: 10px; font-weight: 600; border-radius: 99px;
  border: 1px solid var(--border); background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--dim); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.chat-suggestions button:hover { border-color: var(--accent); color: var(--accent); background: var(--glow-acc); }

/* Chat bubble markdown rendering */
.chat-bubble-ai strong, .chat-bubble-ai b { color: var(--accent); font-weight: 800; }
.chat-bubble-ai code { background: rgba(0,0,0,.25); padding: 1px 6px; border-radius: 4px; font-size: 11px; font-family: 'SF Mono', monospace; }
.chat-bubble-ai p { margin: 0 0 5px; }
.chat-bubble-ai p:last-child { margin: 0; }
.chat-bubble-ai ul, .chat-bubble-ai ol { margin: 4px 0 6px; padding-left: 18px; }
.chat-bubble-ai li { margin: 2px 0; }
.chat-bubble-ai h2, .chat-bubble-ai h3 { font-size: 13px; font-weight: 800; margin: 8px 0 4px; color: var(--accent); }
.chat-bubble-ai hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.chat-bubble-ai blockquote { border-left: 3px solid var(--accent); margin: 5px 0; padding: 3px 12px; color: var(--dim); font-style: italic; }
.chat-bubble-ai table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 11px; }
.chat-bubble-ai th { text-align: left; color: var(--dim); font-weight: 700; padding: 4px 8px; border-bottom: 1px solid var(--border-strong); text-transform: uppercase; font-size: 9px; }
.chat-bubble-ai td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.chat-bubble-ai tr:last-child td { border-bottom: none; }

/* ─── Adjust modal ────────────────────────────────────────────── */
.adjust-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--glass-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.adjust-info-grid .info-item { display: flex; flex-direction: column; }
.adjust-info-grid .info-label { font-size: 9px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.adjust-info-grid .info-value { font-size: 14px; font-weight: 700; margin-top: 3px; }
.adjust-mode-btns { display: flex; gap: 8px; }
.adjust-mode {
  flex: 1; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--dim); font-weight: 700; font-size: 13px;
  cursor: pointer; text-align: center; transition: all .12s; font-family: inherit;
}
.adjust-mode:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.adjust-mode.active#modeAdd { border-color: var(--up); color: var(--up); background: var(--glow-up); }
.adjust-mode.active#modeSub { border-color: var(--down); color: var(--down); background: var(--glow-down); }
.adjust-preview { margin-top: 12px; background: var(--glass-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.preview-row { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 12px; border-bottom: 1px solid var(--border); }
.preview-row:last-child { border-bottom: none; }
.preview-row span:first-child { color: var(--dim); }
.preview-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.preview-row.highlight span:last-child { color: var(--accent); font-size: 14px; }
.preview-row.delta { background: var(--glass-tint); }
.preview-row.delta span:last-child { font-size: 15px; }

/* Audited position adjustments */
.glass-modal.adjustment-modal { max-width: 600px; border-radius: 22px; }
.adjustment-modal .glass-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  text-align: left; padding-bottom: 14px;
  background: linear-gradient(135deg, rgba(252,213,53,.08), transparent 60%);
}
.modal-kicker { margin-top: 3px; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.modal-icon-close {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--glass-tint); color: var(--dim); cursor: pointer; transition: .15s ease;
}
.modal-icon-close:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.adjust-position-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--border-strong);
  border-radius: 14px; background: linear-gradient(135deg, var(--glass-tint), transparent);
}
.adjust-position-symbol { display: flex; align-items: baseline; gap: 8px; }
.adjust-position-symbol span { font-size: 20px; font-weight: 850; color: var(--text); letter-spacing: -.02em; }
.adjust-position-symbol small { color: var(--faint); font-weight: 700; }
.adjust-position-meta { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 11px; }
.adjust-position-meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 8px 2px 0; }
.adjust-notice {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 16px;
  border: 1px solid rgba(14,203,129,.18); border-radius: 11px; background: rgba(14,203,129,.06);
  color: var(--dim); font-size: 11px; line-height: 1.45;
}
.adjust-notice i { color: var(--up); margin-top: 2px; }
.adjust-label { display: block; margin: 0 0 6px; color: var(--dim) !important; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.adjust-mode-grid { margin-bottom: 14px; }
.adjust-mode-grid .adjust-mode { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; font-size: 11px; }
.adjust-mode-grid .adjust-mode.active { color: #1a1a1a; border-color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px rgba(240,185,11,.14); }
.adjust-field-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; }
.adjustment-preview { margin-top: 14px; }
.adjust-history-wrap { margin-top: 16px; }
.adjust-history-head { display: flex; justify-content: space-between; color: var(--dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; }
.adjust-history { max-height: 176px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--glass-tint); }
.adjust-history-item { padding: 10px 13px; border-bottom: 1px solid var(--border); }
.adjust-history-item:last-child { border-bottom: 0; }
.adjust-history-item.is-reversed { opacity: .5; }
.history-prices { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.history-prices strong { font-size: 12px; color: var(--text); }
.history-prices span { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.history-reason { margin-top: 3px; color: var(--dim); font-size: 11px; }
.history-meta { margin-top: 4px; color: var(--faint); font-size: 9px; }
.adjustment-revert { color: var(--down); }
.position-entry { display: block; font-weight: 750; }
.position-entry.is-adjusted { color: var(--accent); }
.entry-original { display: block; margin-top: 2px; color: var(--faint); font-size: 9px; white-space: nowrap; }
.trade-history-panel { overflow: hidden; }
.trade-history-scroll { overflow-x: auto; }
.trade-history-scroll .tp-table { min-width: 760px; }
.trade-history-summary { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px 0; }
.trade-history-stat { padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--glass-tint); color: var(--dim); font-size: 10px; }
.trade-history-stat strong { color: var(--text); margin-left: 3px; font-variant-numeric: tabular-nums; }
.trade-history-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 9px 12px 11px; border-top: 1px solid var(--border); }
.trade-history-pagination button { min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--glass-tint); color: var(--dim); cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; }
.trade-history-pagination button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.trade-history-pagination button.active { color: #17191e; border-color: var(--accent); background: var(--accent); }
.trade-history-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.trade-history-pagination > span { color: var(--faint); font-size: 10px; }
.trade-status { display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 5px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.trade-status.closed { color: var(--up); background: rgba(14,203,129,.12); }
.trade-status.cancelled { color: var(--dim); background: var(--glass-tint); }

@media (max-width: 640px) {
  .adjustment-modal { max-width: calc(100vw - 20px); }
  .adjust-field-grid { grid-template-columns: 1fr; }
  .adjust-position-card { align-items: flex-start; flex-direction: column; gap: 6px; }
  .adjust-position-meta { flex-wrap: wrap; }
  .adjust-mode-grid { display: grid; grid-template-columns: 1fr; }
  .adjustment-modal .glass-modal__footer { flex-wrap: wrap; }
  .adjustment-modal .glass-modal__action { min-width: 50%; }
}

/* ─── Overrides page ──────────────────────────────────────────── */
.ov-mode-switch { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px; background: var(--glass-tint); }
.ov-mode-switch button { flex: 1; padding: 11px 16px; border: none; background: transparent; color: var(--dim); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; border-right: 1px solid var(--border); font-family: inherit; }
.ov-mode-switch button:last-child { border-right: none; }
.ov-mode-switch button:hover { color: var(--text); }
.ov-mode-switch button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #1a1a1a; }
.ov-user-search, .ov-symbol-picker { position: relative; margin-bottom: 14px; }
.ov-user-dropdown, .ov-symbol-results {
  position: absolute; top: 100%; left: 0; right: 0; max-height: 280px; overflow-y: auto;
  background: var(--panel-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  z-index: 50; box-shadow: var(--glass-shadow); display: none; margin-top: 4px;
}
.ov-user-dropdown.show, .ov-symbol-results.show { display: block; }
.ov-user-item { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px; }
.ov-user-item:last-child { border-bottom: none; }
.ov-user-item:hover { background: var(--glass-tint); }
.ov-user-item .uname { font-weight: 700; color: var(--text); }
.ov-user-item .umeta { font-size: 11px; color: var(--dim); }
.ov-selected-user { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--glass-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; }
.ov-selected-user .uname { font-weight: 800; color: var(--accent); }
.ov-selected-user .change { margin-left: auto; font-size: 11px; color: var(--dim); cursor: pointer; text-decoration: underline; }
.ov-symbol-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--border); font-size: 13px; }
.ov-symbol-item:last-child { border-bottom: none; }
.ov-symbol-item:hover { background: var(--glass-tint); }
.ov-symbol-item img { width: 22px; height: 22px; border-radius: 50%; }
.ov-symbol-item .icon-fb { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.ov-symbol-item .sym-name { font-weight: 700; }
.ov-symbol-item .sym-meta { font-size: 11px; color: var(--dim); margin-left: auto; }
.ov-preview-box { background: var(--glass-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 10px; }
.ov-preview-box .row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.ov-preview-box .row span:first-child { color: var(--dim); }
.ov-preview-box .row.highlight { font-size: 15px; font-weight: 800; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 8px; }
.ov-preview-box .row.highlight span:last-child { color: var(--accent); }
.ov-type-btns { display: flex; gap: 8px; }
.ov-type-btn { flex: 1; padding: 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--glass-tint); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--dim); font-weight: 700; font-size: 12px; cursor: pointer; text-align: center; transition: all .15s; font-family: inherit; }
.ov-type-btn:hover { border-color: var(--accent); color: var(--text); }
.ov-type-btn.active[data-type="fixed"] { border-color: var(--accent); color: var(--accent); background: var(--glow-acc); }
.ov-type-btn.active[data-type="percent_plus"] { border-color: var(--up); color: var(--up); background: var(--glow-up); }
.ov-type-btn.active[data-type="percent_minus"] { border-color: var(--down); color: var(--down); background: var(--glow-down); }
.ov-table .sym { font-weight: 700; }
.ov-table .type-tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 700; }
.ov-table .type-fixed { background: rgba(240,185,11,.15); color: var(--accent); }
.ov-table .type-plus { background: rgba(14,203,129,.15); color: var(--up); }
.ov-table .type-minus { background: rgba(246,70,93,.15); color: var(--down); }
.ov-table .final-price { font-weight: 800; color: var(--accent); }
.ov-table .market-price { color: var(--dim); }
.ov-table .paused { opacity: .45; }
.ov-status { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 700; }
.ov-status.on { background: rgba(14,203,129,.15); color: var(--up); }
.ov-status.off { background: rgba(246,70,93,.15); color: var(--down); }
.ov-actions { display: flex; gap: 4px; }

/* ─── Positions modal (admin) ─────────────────────────────────── */
.pos-group { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; background: var(--glass-tint); }
.pos-group-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--glass-tint); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.pos-group-head label { display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }
.pos-group-body { max-height: 220px; overflow-y: auto; }
.pos-row { display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 12px; }
.pos-row:last-child { border-bottom: none; }
.pos-row:hover { background: var(--glass-tint); }
.pos-row .side-tag { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 700; }
.pos-row .side-buy { background: rgba(14,203,129,.15); color: var(--up); }
.pos-row .side-sell { background: rgba(246,70,93,.15); color: var(--down); }
.pos-selected-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--glass-tint); border-top: 1px solid var(--border); }
.pos-selected-bar .count { color: var(--accent); font-weight: 700; }

/* ─── Toast (shared) ──────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; z-index: 999;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-strong);
  box-shadow: var(--glass-shadow);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: linear-gradient(135deg, rgba(14,203,129,.95), rgba(12,184,115,.95)); color: #fff; }
.toast.error { background: linear-gradient(135deg, rgba(246,70,93,.95), rgba(230,57,86,.95)); color: #fff; }

/* ─── Wizard (registration) ──────────────────────────────────── */
.wizard-steps { display: flex; justify-content: space-between; margin-bottom: 22px; position: relative; }
.wizard-steps::before { content: ''; position: absolute; top: 15px; left: 10%; right: 10%; height: 2px; background: var(--border); z-index: 0; }
.wizard-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 2px solid var(--border); color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; z-index: 1;
  transition: all .25s; margin: 0 auto;
}
.wizard-step-dot.active { border-color: var(--accent); color: var(--accent); background: var(--glow-acc); box-shadow: 0 0 0 4px var(--glow-acc); }
.wizard-step-dot.done { background: linear-gradient(135deg, var(--up), #0aa56e); border-color: var(--up); color: #fff; }
.wizard-step-label { font-size: 9px; color: var(--dim); text-align: center; margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.wizard-step-label.active { color: var(--accent); }
.wizard-col { flex: 1; }
.wizard-panel { display: none; animation: fadeIn .3s cubic-bezier(.4, 0, .2, 1); }
.wizard-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wizard-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.referral-wrap { position: relative; }
.referral-status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; pointer-events: none; }
.referral-status.valid { color: var(--up); }
.referral-status.invalid { color: var(--down); }
.referral-status.checking { color: var(--dim); }
.referral-hint { font-size: 11px; color: var(--dim); margin-top: 5px; min-height: 14px; }
.referral-hint.ok { color: var(--up); }


/* ─── Mobile ─────────────────────────────────────────────────── */
.mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 250; backdrop-filter: blur(4px); }
.mobile-backdrop.mobile-open { display: block; }
.market-close-btn { display: none; }
.pair-selector-chevron { display: none; }
.chart-head-main { text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 12px !important; }

@media (max-width: 768px) {
  body { font-size: 12px; -webkit-tap-color: transparent; }
  body::before, body::after { width: 300px; height: 300px; }
  .uk-navbar-container .uk-navbar-nav > li > a {
    font-size: 11px;
    min-height: 32px;
    padding: 0 6px;
  }
  .uk-navbar-container .uk-navbar-item {
    min-height: 32px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .tp-brand { font-size: 13px; gap: 4px; }
  .tp-theme-toggle { font-size: 12px; padding: 4px 6px; }
  .uk-navbar-item .uk-label { font-size: 8px; padding: 1px 6px; }
  .portfolio-bar { padding: 6px 12px; gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .portfolio-bar::-webkit-scrollbar { display: none; }
  .portfolio-stat { min-width: 84px; padding-right: 14px; margin-right: 14px; }
  .portfolio-stat-label { font-size: 8px; gap: 3px; }
  .portfolio-stat-label i { font-size: 8px; }
  .portfolio-stat-value { font-size: 15px; }
  .main-layout { flex-direction: column; padding: 0; gap: 0; height: auto; }
  .dashboard-splitter, .dashboard-layout-reset { display: none !important; }
  .chart-panel { width: 100%; }
  .chart-panel > .dashboard-window { flex: 0 0 auto !important; height: auto !important; }
  .chart-full { min-height: 0; border: none; border-radius: 0; border-bottom: 1px solid var(--border); }
  .positions-panel, .trade-history-panel.dashboard-window { min-height: 0; }
  .chart-head-main { padding: 8px 12px !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap; }
  .chart-pair-selector { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 5px 12px 5px 5px; border-radius: 99px; background: var(--glass-tint); border: 1px solid var(--border); flex-shrink: 0; }
  .chart-pair-selector:active { border-color: var(--accent); }
  .pair-selector-chevron { display: inline-block !important; font-size: 9px; color: var(--dim); }
  .chart-stats-bar { margin-left: auto; gap: 0; overflow: hidden; }
  .chart-stat { padding-right: 10px; margin-right: 10px; flex-direction: row; align-items: center; gap: 3px; border-right: 1px solid var(--border); }
  .chart-stat:last-child { border-right: none; }
  .chart-stat .dim { font-size: 9px; text-transform: none; margin: 0; }
  .chart-stat span:last-child { font-size: 11px !important; }
  .chart-area { flex-direction: column; height: auto !important; min-height: 0 !important; }
  .chart-area .chart-wrap { height: 42vh !important; min-height: 280px !important; flex: 0 0 42vh; }
  .trade-overlay { position: static !important; width: 100% !important; height: auto !important; max-height: none !important; border: none; border-radius: 0; box-shadow: none; resize: none; }
  .trade-overlay-header { display: none; }
  .trade-overlay-body { padding: 10px 14px; }
  .market-panel { position: fixed; bottom: 0; left: 0; right: 0; width: 100% !important; height: 80vh; z-index: 300; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); padding: 0; }
  .market-panel.mobile-open { transform: translateY(0); }
  .market-panel .tp-panel { border-radius: 18px 18px 0 0; height: 100%; }
  .market-panel .tp-panel-head { border-radius: 18px 18px 0 0; padding-top: 16px; }
  .market-panel .tp-panel-head::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: -8px auto 8px; }
  .market-close-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--glass-tint); color: var(--dim); font-size: 14px; cursor: pointer; }
  .market-close-btn:hover { background: var(--down); color: #fff; }
  .positions-wrap { max-height: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tp-table { min-width: 560px; }
  .tp-table th, .tp-table td { padding: 6px 10px; font-size: 11px; }
  .chat-fab { bottom: 16px; right: 14px; width: 52px; height: 52px; font-size: 21px; }
  .chat-popup { position: fixed; inset: 0; width: 100% !important; height: 100% !important; bottom: 0; right: 0; border-radius: 0; border: none; max-width: 100%; }
  .chat-popup-header { border-radius: 0; padding: 16px 18px; font-size: 15px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .chat-popup-messages { flex: 1; padding: 14px; gap: 10px; }
  .chat-bubble-user { font-size: 14px; padding: 11px 16px; max-width: 85%; }
  .chat-bubble-ai { font-size: 14px; padding: 11px 16px; max-width: 88%; line-height: 1.55; }
  .chat-popup-input { border-radius: 0; padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .chat-popup-input input { font-size: 16px; padding: 12px 16px; }
  .pair-icon { width: 30px; height: 30px; }
  .pair-icon img { width: 30px; height: 30px; }
  .pair-sym { font-size: 13px; }
  .pair-name { font-size: 10px; }
  .market-row { padding: 9px 14px; }
  .market-row .price-cell { font-size: 13px; }
  .market-row .chg-cell { font-size: 12px; }
}

@media (max-width: 420px) {
  .portfolio-stat { min-width: 76px; padding-right: 12px; margin-right: 12px; }
  .portfolio-stat-value { font-size: 14px; }
  .portfolio-stat-label { font-size: 7px; }
  .chart-stats-bar { display: none; }
  .chart-area .chart-wrap { height: 38vh !important; min-height: 240px !important; flex: 0 0 38vh; }
  .pair-icon { width: 28px; height: 28px; }
  .pair-icon img { width: 28px; height: 28px; }
  .chat-fab { bottom: 14px; right: 12px; width: 48px; height: 48px; font-size: 19px; }
  /* Agent user selector mobile */
  .agent-select-wrap { padding: 16px 14px; }
  .agent-select-header { font-size: 14px; margin-bottom: 12px; }
  .agent-select-search input { padding: 10px 12px 10px 36px; font-size: 13px; }
  .agent-recent-list { gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .agent-recent-list::-webkit-scrollbar { display: none; }
  .agent-recent-card { flex-shrink: 0; }
  .agent-compact-bar { padding: 6px 12px; gap: 8px; }
  .agent-compact-name { font-size: 12px; }
  .agent-compact-switch span { display: none; }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body::before, body::after { animation: none !important; }
}

/* ─── Compact shared navigation ─────────────────────────────── */
.tp-nav {
  position: sticky;
  top: 0;
  z-index: 220;
  width: 100%;
  background: color-mix(in srgb, var(--panel-solid) 78%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.tp-nav-shell { min-height: 58px; display: flex; align-items: center; gap: 24px; padding: 0 22px; }
.tp-nav .tp-brand { flex: 0 0 auto; gap: 9px; color: var(--text) !important; font-size: 15px; }
.tp-brand-mark { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: #16181d; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 7px 20px var(--glow-acc); }
.tp-nav-menu { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.tp-nav-links { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0; margin: 0; }
.tp-nav-links li a { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 10px; color: var(--dim); font-size: 12px; font-weight: 700; text-decoration: none; transition: color .16s, background .16s, transform .16s; }
.tp-nav-links li a:hover { color: var(--text); background: var(--glass-tint); transform: translateY(-1px); }
.tp-nav-links li.uk-active a { color: var(--accent); background: var(--glow-acc); }
.tp-nav-links li a i { width: 14px; text-align: center; font-size: 11px; }
.tp-nav-account { display: flex; align-items: center; gap: 7px; }
.tp-nav-account .uk-label { display: inline-flex; align-items: center; gap: 6px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-nav-logout, .tp-nav-toggle { border: 1px solid var(--border); background: var(--glass-tint); color: var(--dim); border-radius: 9px; min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.tp-nav-logout:hover, .tp-nav-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.tp-nav-logout span { display: none; }
.tp-nav-toggle { display: none; margin-left: auto; width: 36px; padding: 0; font-size: 14px; }

/* ─── Funding page ──────────────────────────────────────────── */
.funding-page { position: relative; z-index: 1; width: min(1220px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.funding-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.funding-heading h1 { margin: 5px 0 3px; color: var(--text); font-size: clamp(24px,3vw,34px); line-height: 1.15; font-weight: 850; letter-spacing: -.035em; }
.funding-heading p { margin: 0; color: var(--dim); font-size: 13px; }
.funding-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.funding-balance-card { min-width: 230px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg,var(--glow-acc),var(--glass-tint)); box-shadow: var(--glass-shadow); }
.funding-balance-card span, .funding-balance-card small { display: block; color: var(--dim); font-size: 10px; }
.funding-balance-card strong { display: block; color: var(--text); font-size: 24px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.funding-operator-bar { display: grid; grid-template-columns: 1fr minmax(260px,380px); gap: 20px; align-items: center; margin-bottom: 14px; padding: 14px 16px; border: 1px solid rgba(41,98,255,.2); border-radius: 15px; background: linear-gradient(120deg,rgba(41,98,255,.11),var(--glass-tint)); }
.funding-operator-copy { display: flex; align-items: center; gap: 12px; }
.funding-operator-copy > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #2962ff; }
.funding-operator-copy strong, .funding-operator-copy span { display: block; }
.funding-operator-copy strong { color: var(--text); font-size: 13px; }
.funding-operator-copy span { color: var(--dim); font-size: 11px; }
.funding-client-picker { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; }
.funding-client-picker label { color: var(--dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.funding-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.funding-stats article { padding: 13px 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.funding-stats span { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 10px; font-weight: 700; }
.funding-stats span i { color: var(--accent); }
.funding-stats strong { display: block; margin-top: 3px; color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.funding-workspace { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(420px,1.2fr); gap: 14px; align-items: start; }
.funding-request-card, .funding-methods-card, .funding-history-card { overflow: hidden; }
.funding-request-card { padding: 18px; }
.funding-methods-card { padding: 18px; }
.funding-card-head, .funding-card-head > div { display: flex; align-items: center; gap: 11px; }
.funding-card-head { justify-content: space-between; margin-bottom: 16px; }
.funding-card-head h2, .funding-history-head h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 800; }
.funding-card-head p, .funding-history-head p { margin: 1px 0 0; color: var(--dim); font-size: 10px; }
.funding-card-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#2962ff,#1e4dd6); }
.funding-card-icon.bank { color: #17191e; background: linear-gradient(135deg,var(--accent),var(--accent-2)); }
.funding-type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--glass-tint); }
.funding-type-switch button { padding: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--dim); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.funding-type-switch button.active { color: #15181d; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 6px 16px var(--glow-acc); }
.funding-type-switch button i { margin-right: 5px; }
.funding-label { display: flex; justify-content: space-between; margin: 12px 0 6px; color: var(--dim); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.funding-label span { color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.funding-amount-input { height: 58px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--glass-tint); }
.funding-amount-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-acc); }
.funding-amount-input span { color: var(--dim); font-size: 22px; }
.funding-amount-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 25px; font-weight: 800; }
.funding-amount-input input::-webkit-inner-spin-button { display: none; }
.funding-quick-amounts { display: flex; gap: 5px; margin-top: 7px; }
.funding-quick-amounts button { flex: 1; padding: 6px 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--glass-tint); color: var(--dim); cursor: pointer; font: inherit; font-size: 9px; font-weight: 700; }
.funding-quick-amounts button:hover { color: var(--accent); border-color: var(--accent); }
.funding-request-notice, .funding-status-impact, .funding-card-warning { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 9px 10px; border: 1px solid rgba(41,98,255,.18); border-radius: 10px; background: rgba(41,98,255,.07); color: var(--dim); font-size: 10px; line-height: 1.4; }
.funding-request-notice i, .funding-status-impact i, .funding-card-warning i { color: #5d85ff; margin-top: 2px; }
.funding-form-error { min-height: 16px; margin-top: 7px; color: var(--down); font-size: 11px; }
.funding-primary-btn { width: 100%; min-height: 42px; border: 0; border-radius: 11px; color: #17191e; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 8px 22px var(--glow-acc); cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; }
.funding-primary-btn:disabled { opacity: .45; cursor: not-allowed; }
.funding-secondary-btn, .funding-icon-btn { min-height: 33px; border: 1px solid var(--border); border-radius: 9px; background: var(--glass-tint); color: var(--text); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }
.funding-secondary-btn { padding: 0 10px; }
.funding-icon-btn { width: 34px; }
.payment-method-list { display: grid; gap: 10px; }
.funding-method-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 5px 0 9px; }
.funding-method-section-head > div { min-width: 0; }
.funding-method-section-head strong, .funding-method-section-head span { display: block; }
.funding-method-section-head strong { color: var(--text); font-size: 11px; }
.funding-method-section-head > div > span { color: var(--dim); font-size: 9px; }
.funding-method-divider { height: 1px; margin: 17px 0; background: var(--border); }
.funding-readonly-badge { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--dim); background: var(--glass-tint); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.funding-client-owned-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 14px 10px; padding: 8px; border-radius: 8px; color: var(--dim); background: var(--panel-2); font-size: 9px; }
.funding-client-owned-note i { color: var(--accent); margin-top: 2px; }
.payment-method-item { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-tint); }
.payment-method-item.inactive { opacity: .58; }
.payment-method-item > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.payment-method-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--accent); background: var(--glow-acc); }
.payment-method-item header strong, .payment-method-item header small { display: block; }
.payment-method-item header strong { color: var(--text); font-size: 12px; }
.payment-method-item header small { color: var(--dim); font-size: 9px; }
.payment-method-badges { display: flex; gap: 4px; margin-left: auto; }
.payment-method-badges span { padding: 3px 7px; border-radius: 99px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.payment-method-badges .primary { color: var(--accent); background: var(--glow-acc); }
.payment-method-badges .inactive-badge { color: var(--down); background: var(--glow-down); }
.payment-method-details { padding: 8px 14px; }
.payment-detail-row { display: grid; grid-template-columns: minmax(90px,.65fr) minmax(0,1.35fr) auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.payment-detail-row:last-child { border-bottom: 0; }
.payment-detail-row span { color: var(--dim); font-size: 9px; }
.payment-detail-row strong { overflow-wrap: anywhere; color: var(--text); font-size: 10px; text-align: right; }
.payment-detail-row button { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 10px; }
.payment-detail-row button:hover { color: var(--accent); }
.funding-mono { font-family: ui-monospace,SFMono-Regular,Consolas,monospace !important; letter-spacing: .02em; }
.payment-method-note { display: flex; gap: 6px; margin: 0 14px 10px; padding: 8px; border-radius: 8px; color: var(--dim); background: var(--panel-2); font-size: 9px; }
.payment-method-note i { color: var(--accent); margin-top: 2px; }
.payment-method-item > footer { display: flex; justify-content: flex-end; gap: 5px; padding: 8px 12px; border-top: 1px solid var(--border); }
.payment-method-item > footer button, .funding-row-actions button { border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--dim); cursor: pointer; font: inherit; font-size: 9px; padding: 5px 8px; }
.payment-method-item > footer button.danger, .funding-row-actions button.danger { color: var(--down); }
.payment-embed-wrap { margin: 0 14px 12px; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--panel-solid); }
.payment-embed-wrap iframe { display: block; width: 100%; height: 360px; border: 0; background: #fff; }
.payment-embed-wrap a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-top: 1px solid var(--border); color: var(--accent); font-size: 10px; font-weight: 750; text-decoration: none; }
.funding-empty { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 20px; text-align: center; color: var(--dim); }
.funding-empty > i { margin-bottom: 4px; color: var(--faint); font-size: 24px; }
.funding-empty strong { color: var(--text); font-size: 12px; }
.funding-empty span { max-width: 310px; font-size: 10px; }
.funding-empty.compact { min-height: 108px; }
.funding-history-card { margin-top: 14px; }
.funding-history-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.funding-filters { display: flex; gap: 6px; }
.funding-filters .uk-select { width: 140px; min-height: 34px; font-size: 10px; }
.funding-table-wrap { overflow-x: auto; }
.funding-table { min-width: 850px; }
.funding-table td small { display: block; color: var(--faint); font-size: 8px; }
.funding-reference { color: var(--text); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 10px; }
.funding-client-cell { display: block; color: var(--text); font-weight: 700; }
.funding-type, .funding-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 7px; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.funding-type.deposit { color: var(--up); background: var(--glow-up); }
.funding-type.withdrawal { color: var(--down); background: var(--glow-down); }
.funding-status.pending { color: #d29922; background: rgba(210,153,34,.13); }
.funding-status.processing { color: #5d85ff; background: rgba(41,98,255,.13); }
.funding-status.approved, .funding-status.completed { color: var(--up); background: var(--glow-up); }
.funding-status.rejected { color: var(--down); background: var(--glow-down); }
.funding-status.cancelled { color: var(--dim); background: var(--glass-tint); }
.funding-row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.glass-modal.funding-modal { max-width: 1040px; }
.glass-modal.funding-small-modal { max-width: 480px; }
.glass-modal.funding-method-modal { border-radius: 22px; background: color-mix(in srgb,var(--panel-solid) 96%,transparent); }
.glass-modal.funding-method-modal.is-withdrawal { max-width: 820px; }
.glass-modal.funding-method-modal::before { left: 4%; right: 4%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); }
.funding-method-modal .funding-method-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid var(--border); text-align: left; background: linear-gradient(135deg,var(--glow-acc),transparent 58%); }
.funding-modal-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.funding-modal-heading__icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid color-mix(in srgb,var(--accent) 36%,var(--border)); border-radius: 13px; color: var(--accent); background: color-mix(in srgb,var(--accent) 13%,var(--panel-solid)); box-shadow: inset 0 1px rgba(255,255,255,.08); font-size: 17px; }
.funding-method-modal .glass-modal__title { margin-top: 2px; color: var(--text); font-size: 20px; font-weight: 850; letter-spacing: -.025em; }
.funding-method-modal .modal-kicker { margin: 0; color: var(--accent); font-size: 9px; }
.funding-modal-client { margin-top: 3px; overflow: hidden; color: var(--dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.funding-method-modal .modal-icon-close { flex: 0 0 auto; }
.funding-method-modal .funding-modal-body { max-height: min(72vh,720px); padding: 18px 22px 22px; overflow-y: auto; text-align: left; scrollbar-color: var(--border-strong) transparent; }
.funding-method-modal.is-withdrawal .funding-modal-body { padding: 24px; }
.funding-method-modal.is-withdrawal #bankMethodFields { padding: 22px; }
.funding-method-modal.is-withdrawal #bankMethodFields .funding-form-grid { grid-template-columns: .9fr 1.1fr; }
.funding-modal-notice { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-bottom: 12px; padding: 11px 13px; border: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border)); border-radius: 12px; background: color-mix(in srgb,var(--accent) 7%,var(--glass-tint)); }
.funding-modal-notice > i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--accent); background: var(--glow-acc); }
.funding-modal-notice strong, .funding-modal-notice span { display: block; }
.funding-modal-notice strong { color: var(--text); font-size: 10px; }
.funding-modal-notice div > span { margin-top: 1px; color: var(--dim); font-size: 9px; }
.funding-modal-purpose-badge { padding: 5px 9px; border-radius: 99px; color: var(--accent); background: var(--glow-acc); font-size: 8px !important; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.funding-form-section { margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg,var(--glass-tint),transparent 80%); }
.funding-form-section:first-of-type { margin-top: 0; }
.funding-form-section__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.funding-form-section__head > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--accent); background: var(--panel-2); font: 800 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.funding-form-section__head strong, .funding-form-section__head small { display: block; }
.funding-form-section__head strong { color: var(--text); font-size: 12px; font-weight: 800; }
.funding-form-section__head small { margin-top: 2px; color: var(--dim); font-size: 9px; font-weight: 500; }
.funding-native-method-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.funding-method-type-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.funding-method-type { min-width: 0; min-height: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 11px; color: var(--dim); background: var(--panel-2); cursor: pointer; font: inherit; text-align: left; transition: border-color .16s ease,background .16s ease,transform .16s ease; }
.funding-method-type:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.funding-method-type i { margin-bottom: 3px; color: var(--faint); font-size: 14px; }
.funding-method-type span { overflow: hidden; width: 100%; color: inherit; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.funding-method-type small { color: var(--faint); font-size: 7px; }
.funding-method-type.is-active { border-color: color-mix(in srgb,var(--accent) 62%,var(--border)); color: var(--text); background: color-mix(in srgb,var(--accent) 11%,var(--panel-2)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent); }
.funding-method-type.is-active i { color: var(--accent); }
.funding-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.funding-field { min-width: 0; }
.funding-field--wide { grid-column: 1 / -1; }
.funding-field .funding-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; color: var(--dim); font-size: 9px; font-weight: 750; letter-spacing: .015em; }
.funding-field .funding-label b { color: inherit; font: inherit; }
.funding-field .funding-label em { padding: 2px 5px; border-radius: 5px; color: var(--accent); background: var(--glow-acc); font-size: 7px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.funding-field .funding-label span { color: var(--faint); font-size: 7px; font-weight: 600; }
.funding-input-wrap { position: relative; display: flex; align-items: center; min-height: 43px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); transition: border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.funding-input-wrap:focus-within { border-color: color-mix(in srgb,var(--accent) 65%,var(--border)); background: color-mix(in srgb,var(--panel-2) 90%,var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent); }
.funding-input-wrap > i { width: 38px; flex: 0 0 auto; color: var(--faint); text-align: center; font-size: 11px; }
.funding-input-wrap:focus-within > i { color: var(--accent); }
.funding-input-wrap .uk-input { min-height: 41px; height: 41px; padding: 0 11px 0 0; border: 0 !important; outline: 0; color: var(--text); background: transparent !important; box-shadow: none !important; font-size: 11px; }
.funding-input-wrap .uk-input::placeholder, .funding-instructions::placeholder { color: var(--faint); opacity: .75; }
.funding-uppercase { text-transform: uppercase; }
.funding-instructions { min-height: 82px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--panel-2); resize: vertical; font-size: 11px; transition: border-color .16s ease,box-shadow .16s ease; }
.funding-instructions:focus { border-color: color-mix(in srgb,var(--accent) 65%,var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent); }
.funding-card-warning { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; padding: 10px 12px; border: 1px solid color-mix(in srgb,var(--accent) 22%,var(--border)); border-radius: 10px; color: var(--dim); background: var(--glow-acc); font-size: 9px; }
.funding-card-warning > i { margin-top: 2px; color: var(--accent); }
.funding-card-warning strong, .funding-card-warning span { display: block; }
.funding-card-warning strong { color: var(--text); font-size: 9px; }
.funding-card-warning span { margin-top: 2px; }
.funding-method-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.funding-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.funding-switch-row span, .funding-switch-row strong, .funding-switch-row small { display: block; }
.funding-switch-row strong { color: var(--text); font-size: 9px; }
.funding-switch-row small { margin-top: 2px; color: var(--faint); font-size: 7px; }
.funding-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.funding-switch-row > i { position: relative; width: 35px; height: 20px; flex: 0 0 auto; border-radius: 99px; background: var(--border-strong); transition: .18s ease; }
.funding-switch-row > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .18s ease; }
.funding-switch-row input:checked + i { background: var(--accent); }
.funding-switch-row input:checked + i::after { transform: translateX(15px); }
.funding-switch-row input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.funding-form-error { min-height: 18px; margin-top: 10px; color: var(--down); font-size: 10px; font-weight: 650; }
.funding-method-modal .funding-method-modal__footer { min-height: 64px; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 12px 9px 20px; background: color-mix(in srgb,var(--panel-solid) 96%,transparent); }
.funding-footer-security { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 8px; }
.funding-footer-security i { color: var(--accent); }
.funding-footer-actions { display: flex; align-items: center; gap: 7px; }
.funding-method-modal__footer .glass-modal__action { flex: 0 0 auto; width: auto; min-width: 104px; height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 10px; }
.funding-method-modal__footer .glass-modal__action + .glass-modal__action { border-left: 1px solid var(--border); }
.funding-method-modal__footer .glass-modal__action--primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 170px; border-color: var(--accent); color: #171717; background: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb,var(--accent) 20%,transparent); }
.funding-method-modal__footer .glass-modal__action--primary:hover { filter: brightness(1.05); background: var(--accent); }
.funding-method-modal__footer .glass-modal__action:disabled { opacity: .6; cursor: wait; }
.funding-timeline { position: relative; padding-left: 4px; }
.funding-timeline-item { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding-bottom: 18px; }
.funding-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--border-strong); }
.funding-timeline-dot { width: 11px; height: 11px; margin-top: 5px; border: 3px solid var(--panel-solid); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--border-strong); z-index: 1; }
.funding-timeline-item > div > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.funding-timeline-item time { color: var(--faint); font-size: 8px; }
.funding-timeline-item p { margin: 5px 0 1px; color: var(--text); font-size: 10px; }
.funding-timeline-item small { color: var(--dim); font-size: 8px; }

@media (max-width: 900px) {
  .tp-nav-shell { min-height: 54px; padding: 0 14px; gap: 10px; }
  .tp-nav-toggle { display: inline-flex; }
  .tp-nav-menu { display: none; position: absolute; top: 100%; left: 10px; right: 10px; flex-direction: column; align-items: stretch; gap: 12px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 0 0 15px 15px; background: color-mix(in srgb,var(--panel-solid) 94%,transparent); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); box-shadow: 0 18px 42px rgba(0,0,0,.28); }
  .tp-nav-menu.is-open { display: flex; }
  .tp-nav-links { flex-direction: column; align-items: stretch; }
  .tp-nav-links li a { min-height: 42px; padding: 0 13px; font-size: 13px; }
  .tp-nav-account { padding: 9px 3px 2px; border-top: 1px solid var(--border); }
  .tp-nav-account .uk-label { margin-right: auto; }
  .tp-nav-logout span { display: inline; }
  .funding-workspace { grid-template-columns: 1fr; }
  .funding-methods-card { grid-row: 1; }
  .funding-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .funding-page { width: min(100% - 20px,1220px); padding-top: 18px; }
  .funding-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .funding-balance-card { min-width: 0; }
  .funding-operator-bar { grid-template-columns: 1fr; }
  .funding-client-picker { grid-template-columns: 1fr; }
  .funding-stats { gap: 7px; }
  .funding-stats article { padding: 11px; }
  .funding-stats strong { font-size: 15px; }
  .funding-request-card, .funding-methods-card { padding: 14px; }
  .funding-card-head { align-items: flex-start; }
  .funding-history-head { align-items: stretch; flex-direction: column; }
  .funding-filters { width: 100%; }
  .funding-filters .uk-select { min-width: 0; flex: 1; width: auto; }
  .funding-form-grid { grid-template-columns: 1fr; }
  .funding-field--wide { grid-column: auto; }
  .payment-detail-row { grid-template-columns: 90px minmax(0,1fr) auto; }
  .payment-embed-wrap iframe { height: 300px; }
  .glass-modal.funding-modal, .glass-modal.funding-method-modal.is-withdrawal { max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 17px; }
  .funding-method-modal .funding-method-modal__header { padding: 15px; }
  .funding-modal-heading { gap: 10px; }
  .funding-modal-heading__icon { width: 38px; height: 38px; border-radius: 11px; }
  .funding-method-modal .glass-modal__title { font-size: 17px; }
  .funding-modal-client { max-width: 230px; }
  .funding-method-modal .funding-modal-body, .funding-method-modal.is-withdrawal .funding-modal-body { max-height: calc(100dvh - 142px); padding: 12px; }
  .funding-modal-notice { grid-template-columns: 28px minmax(0,1fr); }
  .funding-modal-purpose-badge { display: none !important; }
  .funding-form-section { padding: 13px; border-radius: 12px; }
  .funding-method-type-grid { grid-template-columns: 1fr 1fr; }
  .funding-method-type { min-height: 64px; }
  .funding-method-type:last-child { grid-column: 1 / -1; }
  .funding-method-controls { grid-template-columns: 1fr; }
  .funding-method-modal .funding-method-modal__footer { min-height: 58px; padding: 8px; }
  .funding-method-modal.is-withdrawal #bankMethodFields { padding: 13px; }
  .funding-method-modal.is-withdrawal #bankMethodFields .funding-form-grid { grid-template-columns: 1fr; }
  .funding-footer-security { display: none; }
  .funding-footer-actions { width: 100%; }
  .funding-method-modal__footer .glass-modal__action { flex: 1; min-width: 0; }
  .funding-method-modal__footer .glass-modal__action--primary { min-width: 0; }
}

/* Overnight swap administration */
.swap-admin-hero { overflow: hidden; }
.swap-admin-body { padding: 20px; }
.swap-explainer { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid color-mix(in srgb,var(--accent) 34%,var(--border)); border-radius: 14px; background: linear-gradient(125deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--panel-solid) 88%,transparent)); }
.swap-explainer-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--accent); background: color-mix(in srgb,var(--accent) 15%,transparent); font-size: 18px; }
.swap-explainer strong { color: var(--text); font-size: 14px; }
.swap-explainer p { margin: 4px 0 9px; color: var(--dim); font-size: 12px; line-height: 1.55; }
.swap-explainer code { display: inline-block; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in srgb,var(--page-bg) 82%,transparent); color: var(--text); font-size: 11px; }
.swap-global-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 14px 0 20px; }
.swap-control-card { display: flex; flex-direction: column; gap: 7px; min-height: 126px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb,var(--panel-2) 90%,transparent); }
.swap-control-card--toggle { justify-content: center; }
.swap-control-kicker { color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.swap-toggle-row { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 13px; }
.swap-control-card small { color: var(--dim); font-size: 10px; line-height: 1.45; }
.swap-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 4px 0 10px; }
.swap-section-heading h4 { margin: 0; color: var(--text); font-size: 14px; }
.swap-section-heading p { margin: 3px 0 0; color: var(--dim); font-size: 11px; }
.swap-pill { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--dim); background: var(--panel-2); font-size: 9px; }
.swap-table-shell { border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb,var(--panel-solid) 70%,transparent); }
.swap-table-shell table { margin: 0; }
.swap-rule-table input[type="number"] { min-width: 92px; }
.swap-rule-table select { min-width: 116px; }
.swap-example { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 2px; padding: 11px 12px; border-left: 3px solid var(--accent); border-radius: 4px 10px 10px 4px; color: var(--dim); background: color-mix(in srgb,var(--accent) 8%,transparent); font-size: 11px; }
.swap-example i { margin-top: 2px; color: var(--accent); }
.swap-example strong { color: var(--text); }
.swap-instrument-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.swap-instrument-grid label { min-width: 0; }
.swap-inline-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--text); font-size: 12px; font-weight: 700; }
.form-error { min-height: 19px; margin-top: 5px; color: var(--tp-down); font-size: 11px; }
.swap-amount-positive { color: var(--tp-up); font-weight: 700; }
.swap-amount-negative { color: var(--tp-down); font-weight: 700; }

@media (max-width: 900px) {
  .swap-global-grid { grid-template-columns: 1fr; }
  .swap-control-card { min-height: 0; }
  .swap-instrument-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .swap-admin-body { padding: 13px; }
  .swap-explainer { grid-template-columns: 36px minmax(0,1fr); padding: 12px; }
  .swap-explainer-icon { width: 36px; height: 36px; border-radius: 10px; }
  .swap-section-heading { align-items: flex-start; flex-direction: column; }
  .swap-instrument-grid { grid-template-columns: 1fr; }
}