@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:        #0B0E11;
  --bg-2:      #1E2329;
  --bg-3:      #2B3139;
  --border:    #2B3139;
  --border-2:  #3C4349;
  --text:      #EAECEF;
  --text-2:    #B7BEC8;
  --text-3:    #848E9C;
  --green:     #0ECB81;
  --green-dim: rgba(14,203,129,.12);
  --red:       #F6465D;
  --red-dim:   rgba(246,70,93,.12);
  --yellow:    #F0B90B;
  --yellow-dim:rgba(240,185,11,.12);
  --blue:      #1890FF;
  --amber:     #F0B90B;
  --accent:    #F0B90B;
  --accent-dim:rgba(240,185,11,.12);
}
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  font-size:13px; line-height:1.5; min-height:100vh;
  overflow-x:clip;
}
html { overflow-x:clip; scroll-padding-top:116px; }
button,a { touch-action:manipulation; }
img { max-width:100%; height:auto; }
/* Extra top padding compensates for fixed header+tabs (≈64+52px) */
.app { max-width:1400px; margin:0 auto; padding:120px 20px 24px; }

/* ── Header ─────────────────────────────────────── */
header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; margin-bottom:0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:fixed; top:0; left:0; right:0; z-index:10;
  max-width:1400px; margin:0 auto;
  background:rgba(11,14,17,0.92);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:36px; height:36px; flex-shrink:0; }
.brand-text { display:flex; flex-direction:column; gap:1px; }
.brand-name { font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.brand-name span { color:var(--yellow); }
.brand-sub { font-size:10px; color:var(--text-3); letter-spacing:.04em; text-transform:uppercase; }
.header-right { display:flex; align-items:center; gap:8px; }
.live-badge {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--text-2); font-weight:500;
}
.live-dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:breathe 2.4s ease-in-out infinite; flex-shrink:0; }
#lastUpdate { font-size:11px; color:var(--text-3); }
.ver-badge { font-size:10px; color:var(--text-3); margin-left:6px; }
/* Header lang picker */
.lang-picker { display:flex; align-items:center; gap:2px; background:var(--bg-2); border:1px solid var(--border-2); border-radius:6px; padding:4px 8px; }
.lang-label { font-size:9px; color:var(--text-2); margin-right:4px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; min-width:62px; text-align:center; flex-shrink:0; }
.lang-btn { background:none; border:1px solid transparent; border-radius:4px; padding:2px 4px; cursor:pointer; line-height:1; transition:.15s; opacity:.7; display:flex; align-items:center; }
.lang-btn img { border-radius:2px; display:block; }
.lang-btn:hover { opacity:1; border-color:var(--border-2); background:var(--bg-3); }
.lang-btn.active { opacity:1; border-color:var(--yellow); background:rgba(240,185,11,.08); }
/* Login lang picker */
.lang-picker-login { display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--bg-3); border:1px solid var(--border-2); border-radius:10px; padding:12px 14px; }
.lang-picker-login .lang-label { font-size:10px; color:var(--text-2); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0; }
.lang-flags-row { display:flex; align-items:center; gap:4px; }
.lang-flags-row .lang-btn { padding:4px 6px; opacity:.7; }
.lang-flags-row .lang-btn img { width:24px; height:18px; border-radius:3px; }
.lang-flags-row .lang-btn:hover { opacity:1; background:var(--bg-2); border-color:var(--border-2); }
.lang-flags-row .lang-btn.active { opacity:1; border-color:var(--yellow); background:rgba(240,185,11,.1); }
.btn-icon {
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text-2); border-radius:6px; padding:6px 12px;
  font-size:12px; cursor:pointer; transition:.15s; font-family:inherit; font-weight:500;
}
.btn-icon:hover { color:var(--text); border-color:var(--border-2); background:var(--bg-3); }

/* ── Nav tabs ───────────────────────────────────── */
.tabs {
  display:flex; gap:0; margin-bottom:0;
  border-bottom:1px solid var(--border);
  padding-top:4px;
  position:fixed; top:64px; left:0; right:0; z-index:9;
  max-width:1400px; margin:0 auto;
  background:var(--bg); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.tab {
  padding:10px 20px; cursor:pointer; font-size:13px; font-weight:500;
  color:var(--text-2); border-bottom:2px solid transparent;
  transition:.15s; margin-bottom:-1px; letter-spacing:.01em;
}
.tab:hover { color:var(--text); }
.tab.active { color:var(--yellow); border-bottom:3px solid var(--yellow); font-weight:600; text-shadow:0 0 18px rgba(240,185,11,.3); }
.tab-content { display:none; }
.tab-content.active { display:block; }
/* Admin Licence Settings tab */
.adm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.adm-header h2 { font-size:16px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.adm-section { background:var(--bg-2); border:1px solid var(--border-2); border-radius:12px; padding:20px 24px; margin-bottom:16px; }
.adm-section h3 { font-size:13px; font-weight:700; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.adm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.adm-grid.g3 { grid-template-columns:1fr 1fr 1fr; }
.adm-field { display:flex; flex-direction:column; gap:4px; }
.adm-field label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.adm-field input, .adm-field select { background:var(--bg-3); border:1px solid var(--border-2); border-radius:6px; color:var(--text); font-size:12px; padding:7px 10px; font-family:inherit; }
.adm-field input:focus, .adm-field select:focus { border-color:var(--accent); outline:none; }
.adm-table { width:100%; border-collapse:collapse; font-size:12px; }
.adm-table th { text-align:left; font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border); }
.adm-table td { padding:8px 8px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text-2); vertical-align:middle; }
.adm-table tr:hover td { background:rgba(255,255,255,.02); }
.adm-wallet { font-family:monospace; font-size:11px; color:var(--text-3); }
.adm-key-badge { font-family:monospace; font-size:11px; color:var(--accent); }
.adm-status-active { color:var(--green); font-weight:600; font-size:11px; }
.adm-status-revoked { color:var(--red); font-weight:600; font-size:11px; }
.adm-actions { display:flex; gap:4px; }
.adm-btn { font-size:11px; padding:3px 8px; border-radius:4px; border:1px solid var(--border-2); background:var(--bg-3); color:var(--text-2); cursor:pointer; transition:.15s; white-space:nowrap; }
.adm-btn:hover { border-color:var(--border-2); background:var(--bg-2); color:var(--text); }
.adm-btn.danger { border-color:rgba(246,70,93,.4); color:var(--red); }
.adm-btn.danger:hover { background:rgba(246,70,93,.1); }
.adm-btn.success { border-color:rgba(14,203,129,.4); color:var(--green); }
.adm-verify-result { margin-top:10px; padding:10px 14px; border-radius:8px; font-size:12px; display:none; }
.adm-verify-result.found { background:rgba(14,203,129,.08); border:1px solid rgba(14,203,129,.3); color:var(--green); }
.adm-verify-result.notfound { background:rgba(246,70,93,.08); border:1px solid rgba(246,70,93,.3); color:var(--red); }
.adm-stats { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.adm-stat { background:var(--bg-3); border:1px solid var(--border); border-radius:8px; padding:10px 16px; flex:1; min-width:80px; }
.adm-stat .asl { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.adm-stat .asv { font-size:18px; font-weight:700; color:var(--text); }
/* ── My Licence tab ─────────────────────────────── */
.ml-card { background:var(--bg-2); border:1px solid var(--border-2); border-radius:14px; padding:28px 32px; max-width:520px; margin:20px auto; }
.ml-key-box { background:var(--bg-3); border:2px solid var(--accent); border-radius:10px; padding:18px; text-align:center; margin:20px 0; position:relative; }
.ml-key { font-family:monospace; font-size:20px; letter-spacing:.1em; color:var(--accent); font-weight:700; }
.ml-copy { position:absolute; right:10px; top:50%; transform:translateY(-50%); }
.ml-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; }
.ml-row:last-child { border:none; }
.ml-row .mll { color:var(--text-3); }
.ml-row .mlv { color:var(--text); font-weight:500; }
/* payment link result */
.pay-link-box { background:var(--bg-3); border:1px solid var(--accent); border-radius:8px; padding:14px 16px; margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pay-link-url { font-family:monospace; font-size:11px; color:var(--text-2); word-break:break-all; flex:1; }
/* config section */
.adm-grid.g4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.adm-input-pw { position:relative; }
.adm-input-pw input { width:100%; }

/* ── Summary strip ──────────────────────────────── */
.summary-strip {
  display:grid; gap:8px; margin-bottom:16px;
  grid-template-columns: 1.8fr 1fr 1.3fr 0.9fr;
}
@media(max-width:900px) { .summary-strip { grid-template-columns:1fr 1fr; } }

.s-card {
  background:rgba(30,35,41,0.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; padding:16px 18px;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.s-card:hover {
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.1);
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
}
.s-card.accent {
  border-color:rgba(240,185,11,.10);
  background:linear-gradient(135deg,rgba(30,35,41,0.9),rgba(240,185,11,.06));
}
.s-label {
  font-size:11px; color:var(--text-2); font-weight:500;
  margin-bottom:8px;
}
.s-val { font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.s-sub { font-size:11px; color:var(--text-3); margin-top:6px; }
.s-sub b { color:var(--text-2); font-weight:500; }

/* pnl tab card */
.pnl-card { display:flex; flex-direction:column; gap:10px; }
.pnl-tabs-row { display:flex; gap:4px; }
.ptab {
  flex:1; padding:6px 0; border:1px solid var(--border);
  border-radius:6px; background:transparent; color:var(--text-3);
  font-size:10px; font-weight:600; cursor:pointer; transition:.15s;
  letter-spacing:.04em; font-family:inherit;
}
.ptab:hover { border-color:var(--border-2); color:var(--text-2); }
.ptab.active { border-color:var(--yellow); background:var(--yellow-dim); color:var(--yellow); }
.ptab-detail .pd-label { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.ptab-detail .pd-val { font-size:24px; font-weight:700; letter-spacing:-.02em; margin-top:2px; }
.tab-legend { font-size:9px; color:var(--text-3); margin-top:2px; }
.pos { color:var(--green); }
.neg { color:var(--red); }
.neutral { color:var(--text-2); }

/* ── Instances list ──────────────────────────────── */
.instances-list { display:flex; flex-direction:column; gap:4px; }
.inst-row {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:8px; transition:border-color .2s;
}
.inst-row:hover { border-color:var(--border-2); }
.inst-row.offline { opacity:.45; }
.inst-compact {
  display:grid;
  grid-template-columns: 10px 1fr 140px 100px 100px 100px 100px 70px auto 16px;
  align-items:center; gap:12px;
  padding:11px 16px; cursor:pointer; -webkit-user-select:none; user-select:none;
  overflow:hidden;
}
.inst-compact:hover { background:rgba(255,255,255,.015); }
.sdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sdot.on  { background:var(--green); box-shadow:0 0 6px rgba(14,203,129,.5); }
.sdot.off { background:var(--text-3); }
.inst-name-col .in { font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; }
.inst-name-col .sub { font-size:10px; color:var(--text-3); margin-top:1px; }
.exch-badge { font-size:9px; font-weight:700; padding:1px 6px; border-radius:4px; letter-spacing:.03em; text-transform:uppercase; }
.i-metric { text-align:right; }
.i-metric .ml { font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; font-weight:500; }
.i-metric .mv { font-size:13px; font-weight:600; }
.expand-icon { color:var(--text-3); font-size:8px; transition:transform .2s; text-align:center; }
.expand-icon.open { transform:rotate(90deg); }
.inst-body { display:none; border-top:1px solid var(--border); background:rgba(0,0,0,.2); }
.inst-body.open { display:block; }
.inst-body-inner { padding:16px; }
.exp-title {
  font-size:9px; color:var(--text-3); text-transform:uppercase;
  letter-spacing:.08em; margin:14px 0 8px; font-weight:600;
}
.exp-title:first-child { margin-top:0; }

/* PnL chips */
.pnl-chips { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:4px; }
.pc { background:var(--bg-3); border:1px solid var(--border); border-radius:6px; padding:8px 10px; text-align:center; }
.pc .pcl { font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; font-weight:500; }
.pc .pcv { font-size:12px; font-weight:600; }

/* Coin grid */
.coins-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:5px; margin-bottom:4px; }
.coin-chip { background:var(--bg-3); border:1px solid var(--border); border-radius:6px; padding:8px 10px; }
.coin-chip .ct { display:flex; justify-content:space-between; align-items:center; }
.coin-chip .csym { font-weight:600; font-size:12px; }
.coin-chip .cusd { color:var(--green); font-weight:600; font-size:11px; }
.coin-chip .camt { color:var(--text-3); font-size:9px; margin-top:2px; }

/* Mini pairs table */
.mini-table { width:100%; border-collapse:collapse; font-size:11px; }
.mini-table th {
  text-align:left; padding:6px 8px; color:var(--text-2);
  font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--border); font-weight:600;
}
.mini-table th:not(:first-child) { text-align:right; }
.mini-table td { padding:5px 8px; border-bottom:1px solid rgba(43,49,57,.7); }
.mini-table td:not(:first-child) { text-align:right; }
.mini-table tr:last-child td { border-bottom:none; }
.mini-table tr:hover td { background:rgba(255,255,255,.025); }
.pbadge { display:inline-block; font-size:9px; padding:2px 7px; border-radius:4px; font-weight:700; letter-spacing:.03em; }
.pbadge.active { background:var(--green-dim); color:var(--green); border:1px solid rgba(14,203,129,.25); }
.pbadge.bag    { background:rgba(240,185,11,.12); color:var(--yellow); border:1px solid rgba(240,185,11,.25); }
.pbadge.no-bag { background:rgba(14,203,129,.1); color:#0ECB81; border:1px solid rgba(14,203,129,.2); }
.pbadge.out    { background:var(--bg-3); color:var(--text-3); }

/* ── Pairs tab ──────────────────────────────────── */
.pairs-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pairs-toolbar h2 { font-size:14px; font-weight:600; }
.pairs-toolbar .pt-meta { font-size:11px; color:var(--text-3); }
.pairs-card { background:var(--bg-2); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.ptable { width:100%; border-collapse:collapse; font-size:12.5px; }
.ptable thead th {
  padding:9px 14px; background:rgba(13,16,20,1);
  font-weight:600; color:var(--text-3); border-bottom:2px solid rgba(255,255,255,.07);
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; position:sticky; top:0; z-index:2;
}
.ptable thead th:not(:first-child) { text-align:right; }
.ptable thead th:first-child { text-align:left; }
.ptable tbody td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.03); white-space:nowrap; color:var(--text); }
.ptable tbody td:not(:first-child) { text-align:right; }
.ptable tbody td.td-pair { text-align:left; padding:8px 10px 8px 4px; }
.ptable tbody tr:hover td { background:rgba(255,255,255,.035); }
.ptable tbody tr:last-child td { border-bottom:none; }
.ptable .group-row td {
  padding:10px 16px;
  background:linear-gradient(90deg,rgba(26,30,38,1) 0%,rgba(18,22,28,1) 100%);
  font-size:11px; font-weight:700; color:var(--text);
  text-transform:none; letter-spacing:0;
  border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.04);
  display:flex; align-items:center; gap:10px;
  position:sticky; top:37px; z-index:1;
}
.ptable .group-row:first-child td { border-top:none; }
.grp-name { font-size:12.5px; font-weight:700; color:var(--text); }
.grp-pairs { font-size:10px; color:var(--text-3); font-weight:500; padding:2px 7px; background:rgba(255,255,255,.05); border-radius:10px; }
.grp-pnl { font-size:12px; font-weight:700; text-transform:none; letter-spacing:0; margin-left:auto; }
.ptable thead th.sortable { cursor:pointer; }
.ptable thead th.sortable:hover { color:var(--text-2); }
.ptable thead th.sort-on { color:var(--yellow); }
.sarr { margin-left:3px; font-size:8px; }
.pair-bars { font-size:9px; color:var(--green); opacity:.55; letter-spacing:-1px; margin-right:3px; }
.pair-name { font-weight:700; }
.pair-mkt-dot { display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:4px; vertical-align:middle; position:relative; top:-1px; flex-shrink:0; }
.pair-mkt-dot.metals { background:#C8A96E; box-shadow:0 0 5px rgba(200,169,110,.6); }
.pair-mkt-dot.stocks { background:#5DA7DB; box-shadow:0 0 5px rgba(93,167,219,.6); }
.mkt-badge { display:inline-flex; align-items:center; gap:2px; font-size:9px; font-weight:700; letter-spacing:.04em; padding:1px 5px; border-radius:3px; margin-right:5px; vertical-align:middle; white-space:nowrap; flex-shrink:0; }
.mkt-badge.crypto { background:rgba(240,185,11,.12); color:#F0B90B; border:1px solid rgba(240,185,11,.2); }
.mkt-badge.metals { background:rgba(200,169,110,.15); color:#C8A96E; border:1px solid rgba(200,169,110,.35); }
.mkt-badge.stocks { background:rgba(93,167,219,.15); color:#5DA7DB; border:1px solid rgba(93,167,219,.35); }

/* Add Server button */
.instances-header { display:flex; justify-content:flex-start; margin-bottom:10px; }
.add-server-btn {
  display:flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:8px;
  background:transparent; border:1.5px solid var(--yellow);
  color:var(--yellow); font-size:12px; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s;
}
.add-server-btn:hover { background:var(--yellow); color:#000; }

/* Instance action buttons */
.inst-actions { display:flex; align-items:center; gap:6px; margin-left:8px; }
.ia-login { padding:4px 10px; border-radius:6px; font-size:10px; font-weight:700; cursor:pointer; border:1.5px solid; transition:background .15s; white-space:nowrap; }
.ia-login.enabled  { border-color:rgba(246,70,93,.5); color:var(--red);    background:rgba(246,70,93,.08); }
.ia-login.enabled:hover  { background:rgba(246,70,93,.18); }
.ia-login.disabled { border-color:rgba(14,203,129,.5); color:var(--green); background:rgba(14,203,129,.08); }
.ia-login.disabled:hover { background:rgba(14,203,129,.18); }
.ia-icon { width:28px; height:28px; border-radius:6px; background:var(--bg-3); border:1px solid var(--border); color:var(--text-2); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.ia-icon:hover { background:var(--border-2); color:var(--text); }
.ia-icon.del:hover { background:rgba(246,70,93,.15); color:var(--red); border-color:rgba(246,70,93,.3); }

/* Server modal */
.srv-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1000; display:flex; align-items:center; justify-content:center; }
.srv-overlay.hidden { display:none; }
.srv-modal { background:var(--bg-2); border:1px solid var(--border-2); border-radius:16px; padding:32px; width:520px; max-width:calc(100vw - 32px); position:relative; box-shadow:0 24px 48px rgba(0,0,0,.5); }
.srv-modal-close { position:absolute; top:16px; right:16px; background:var(--bg-3); border:none; color:var(--text-2); width:32px; height:32px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.srv-modal-close:hover { background:var(--border-2); color:var(--text); }
.srv-modal h3 { font-size:22px; font-weight:700; color:var(--text); margin:0 0 24px; }
.srv-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.srv-field label { font-size:11px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; }
.srv-field input, .srv-field select {
  padding:10px 14px; background:var(--bg-3); border:1px solid var(--border-2);
  border-radius:8px; color:var(--text); font-size:14px; outline:none;
  transition:border-color .15s; font-family:inherit;
}
.srv-field input:focus, .srv-field select:focus { border-color:var(--yellow); }
.srv-field select option { background:var(--bg-3); }
.srv-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.srv-row3 { display:grid; grid-template-columns:90px 1fr 90px; gap:10px; }
.srv-btn-full { width:100%; }
.srv-check { display:flex; align-items:center; gap:10px; margin-bottom:24px; color:var(--text-2); font-size:13px; cursor:pointer; }
.srv-check input { width:16px; height:16px; accent-color:var(--yellow); cursor:pointer; }
.srv-modal-btns { display:flex; gap:10px; justify-content:flex-end; }
.srv-btn-cancel { padding:10px 20px; background:var(--bg-3); border:1px solid var(--border-2); border-radius:8px; color:var(--text-2); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; }
.srv-btn-cancel:hover { background:var(--border-2); }
.srv-btn-save { padding:10px 24px; background:var(--yellow); border:none; border-radius:8px; color:#000; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .15s; }
.srv-btn-save:hover { opacity:.85; }

/* Filter chips */
.filter-chips { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.chip {
  padding:4px 12px; border:1px solid var(--border);
  border-radius:20px; font-size:11px; cursor:pointer;
  color:var(--text-3); background:var(--bg-2); transition:.15s; font-family:inherit; font-weight:500;
}
.chip:hover { color:var(--text-2); border-color:var(--border-2); }
.chip.active { background:var(--yellow-dim); border-color:var(--yellow); color:var(--yellow); font-weight:600; }

/* Unrealized PnL */
.unrl { font-size:9px; font-weight:600; margin-left:4px; }

/* Mobile actions in expanded body */
.mob-actions { display:none; padding:10px 16px; gap:8px; align-items:center; border-bottom:1px solid var(--border); }

/* ── Responsive ─────────────────────────────────── */
@media(max-width:1100px) {
  /* Tablet: hide Today + Earn, shrink layout */
  .inst-compact { grid-template-columns:10px 1fr 140px 100px 100px auto 16px; }
  .i-today,.i-earn { display:none; }
  .ia-login { display:none; } /* show only icons */
}
@media(max-width:900px) {
  /* Small tablet: also hide Pairs */
  .inst-compact { grid-template-columns:10px 1fr 140px auto 16px; }
  .i-today,.i-week,.i-liquid { display:none; }
  .ia-login { display:none; }
}
@media(max-width:768px) {
  .summary-strip { grid-template-columns:1fr 1fr; }
  .inst-compact { grid-template-columns:10px 1fr 120px 16px; gap:8px; }
  .i-today,.i-week,.i-pairs,.inst-actions { display:none; }
  .mob-actions { display:flex; }
  .field-row { grid-template-columns:1fr; }
  .pnl-chips { grid-template-columns:repeat(3,1fr); }
  .tabs { gap:0; }
  .tab { flex:1 1 0; min-width:0; text-align:center; padding:10px 2px; font-size:10px; overflow:hidden; }
  .ptable-wrap { overflow-x:auto; }
  .ptable { min-width:560px; }
  .pairs-toolbar { flex-direction:column; align-items:flex-start; gap:6px; }
  .filter-chips { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .srv-modal { padding:24px 20px; }
  .srv-row { grid-template-columns:1fr; }
  .srv-row3 { grid-template-columns:1fr 1fr; }
  /* Header — hide non-essential items */
  #lastUpdate { display:none; }
  #refresh-timer { display:none; }
  .live-badge span[data-i18n] { display:none; }
  /* Admin grids collapse */
  .adm-grid.g3 { grid-template-columns:1fr 1fr; }
  .adm-grid.g4 { grid-template-columns:1fr 1fr; }
  .adm-table th,.adm-table td { font-size:10px; padding:5px 6px; }
}
@media(max-width:480px) {
  .app { padding:90px 10px 24px; }
  .summary-strip { grid-template-columns:1fr; gap:10px; }
  .s-card { border-radius:14px; padding:16px 14px; }
  .s-val { font-size:28px; }
  .pf-balance { font-size:26px; }
  .inst-compact { grid-template-columns:10px 1fr 16px; gap:8px; }
  .i-bal,.i-today,.i-week,.i-pairs,.inst-actions { display:none; }
  .mob-actions { display:flex; }
  .brand-sub { display:none; }
  .instances-header { margin-bottom:8px; }
  .bnh-bar { flex-direction:column; align-items:flex-start; }
  .analytics-row { gap:10px; }
  .analytics-card { border-radius:14px; }
  .rank-card { border-radius:14px; }
  .bnh-card { border-radius:14px; }
  /* Admin grids */
  .adm-grid,.adm-grid.g3,.adm-grid.g4 { grid-template-columns:1fr; }
  .adm-stats { grid-template-columns:repeat(3,1fr); gap:6px; }
  /* ML card */
  .ml-card { padding:18px 14px; }
  /* Pairs search */
  .pairs-search { width:100%; box-sizing:border-box; }
  .pairs-meta-row { flex-direction:column; align-items:flex-start; gap:4px; width:100%; }
  /* PnL period tabs */
  .pf-tab { padding:3px 8px; font-size:10px; }
  /* BnH */
  .bnh-grid { grid-template-columns:1fr; }
  .bnh-btn-group { flex-wrap:wrap; }
  /* AI */
  .ai-config-panel { max-height:none; }
  .ai-chat-panel { height:380px; }
  /* Tabs even tighter on small phones */
  .tab { padding:8px 1px; font-size:8.5px; }
  .lang-btn img { width:18px !important; height:13px !important; }
}

/* ── Small phones (≤360px) ───────────────────────── */
@media(max-width:360px) {
  .app { padding:0 8px 24px; }
  .brand-logo { width:28px; height:28px; }
  .brand-name { font-size:13px; }
  .pf-balance { font-size:22px; }
  .s-val { font-size:24px; }
  .adm-stats { grid-template-columns:1fr 1fr; }
}

/* ── B&H card ───────────────────────────────────── */
.bnh-card {
  background:rgba(30,35,41,0.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; padding:12px 16px; margin-bottom:12px; font-size:11px;
  transition:border-color .2s;
}
.bnh-card:hover { border-color:rgba(255,255,255,0.1); }
.bnh-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; flex-wrap:wrap; gap:6px;
}
.bnh-title { color:var(--text-2); font-weight:600; font-size:12px; }
.bnh-subtitle { color:var(--text-3); font-size:10px; margin-top:1px; }
.bnh-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.bnh-col {
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:6px; padding:10px 12px;
}
.bnh-col.winner-col { border-color:var(--green); background:rgba(14,203,129,.05); }
.bnh-col-title { font-size:10px; font-weight:700; color:var(--text-2); margin-bottom:7px; text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:6px; }
.bnh-trophy { font-size:12px; }
.bnh-metric { display:flex; justify-content:space-between; align-items:center; padding:3px 0; border-bottom:1px solid rgba(43,49,57,.5); }
.bnh-metric:last-child { border-bottom:none; }
.bnh-mlabel { color:var(--text-3); }
.bnh-mval { font-weight:600; }
.bnh-empty { color:var(--text-3); font-size:11px; text-align:center; padding:8px 0; }
.bnh-empty-full { grid-column:1/-1; }
.bnh-status-pill { font-size:10px; font-weight:700; color:var(--green); letter-spacing:.04em; margin-left:6px; }
.bnh-btn-group { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.btn.danger { background:rgba(246,70,93,.1); border-color:rgba(246,70,93,.35); color:var(--red); }
.btn.danger:hover { background:rgba(246,70,93,.2); }
.hidden { display:none; }

/* ── Earn tab ────────────────────────────────────── */
.earn-toggle-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.earn-toggle-row span { font-size:13px; color:var(--text); font-weight:500; }
.earn-bal { margin:14px 0; }
.earn-future { display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); margin-top:12px; }
.earn-future .sc { opacity:.3; pointer-events:none; }
.earn-future .sc h3 { font-size:12px; }
.earn-cs { font-size:9px; font-weight:500; color:var(--text-3); margin-left:8px; text-transform:uppercase; letter-spacing:.05em; background:var(--bg-3); padding:2px 6px; border-radius:4px; }
.earn-log-row { display:grid; grid-template-columns:150px 1fr; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:11px; }
.earn-log-row:last-child { border-bottom:none; }
.earn-summary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin:12px 0 4px; }
.earn-summary-stat { background:var(--bg-3); border-radius:8px; padding:14px 16px; border:1px solid var(--border); }
.earn-summary-stat .esl { font-size:10px; color:var(--text-2); margin-bottom:6px; font-weight:500; }
.earn-summary-stat .esv { font-size:18px; font-weight:700; color:var(--text); }
.earn-summary-stat .esv.pos { color:var(--green); }
.earn-card-header { cursor:pointer; -webkit-user-select:none; user-select:none; display:flex; align-items:center; justify-content:space-between; }
.earn-card-header::after { content:'▾'; font-size:14px; color:var(--text-3); transition:transform .2s; }
.earn-card-header.collapsed::after { transform:rotate(-90deg); }
.earn-card-body { overflow:hidden; }
.earn-card-body.collapsed { display:none; }
/* ── DCA Floor Projector ─────────────────────────── */
.dca-card { background:var(--bg-3); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.dca-card-label { font-size:10px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.dca-card-val { font-size:20px; font-weight:800; color:var(--text); line-height:1.1; }
.dca-card-sub { font-size:11px; color:var(--text-3); margin-top:4px; }
.dca-floor-card { border-color:rgba(246,70,93,.35); background:rgba(246,70,93,.06); }
.dca-floor-card .dca-card-val { color:#F6465D; }
.dca-safe-card { border-color:rgba(14,203,129,.3); background:rgba(14,203,129,.05); }
.dca-safe-card .dca-card-val { color:#0ECB81; }
.dca-risk-high-card { border-color:rgba(246,70,93,.3); background:rgba(246,70,93,.05); }
.dca-risk-high-card .dca-card-val { color:#F6465D; }
.dca-risk-med-card { border-color:rgba(240,185,11,.3); background:rgba(240,185,11,.05); }
.dca-risk-med-card .dca-card-val { color:#F0B90B; }
.dca-level-funded td { color:var(--text-2); }
.dca-level-floor td { background:rgba(246,70,93,.08) !important; font-weight:700; }
.dca-level-floor td:last-child { color:#F6465D; }
.dca-level-empty td { color:var(--text-3); opacity:.6; }
.field-input { background:var(--bg-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:6px 10px; font-size:12px; font-family:inherit; cursor:pointer; }
.field-input:focus { outline:none; border-color:var(--yellow); }

/* ── End DCA ──────────────────────────────────────── */
.earn-log-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.earn-pagination { display:flex; gap:4px; flex-wrap:wrap; margin-top:10px; }
.earn-page-btn { background:var(--bg-2); border:1px solid var(--border); color:var(--text-2); border-radius:4px; padding:4px 10px; font-size:11px; cursor:pointer; font-family:inherit; transition:.15s; }
.earn-page-btn:hover { border-color:var(--border-2); color:var(--text); }
.earn-page-btn.active { background:var(--yellow); color:#0B0E11; border-color:var(--yellow); font-weight:700; }
.earn-summary-card { margin-bottom:12px; }
.mexc-earn-rows { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.mexc-earn-breakdown { font-size:11px; color:var(--text-3); margin-top:4px; padding:0 4px; }
.ex-icon { display:inline-block; width:22px; height:22px; border-radius:5px; margin-right:0; vertical-align:middle; flex-shrink:0; object-fit:cover; }
.group-row td { cursor:pointer; }
.group-row .grp-toggle { font-size:12px; color:var(--text-3); margin-left:4px; transition:transform .22s; display:inline-block; }
.group-row.collapsed .grp-toggle { transform:rotate(-90deg); }
.earn-log-time { color:var(--text-3); font-size:10px; }
.earn-log-note { color:var(--text-3); font-size:10px; margin-top:2px; }
.field-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.earn-exchange-title { border-left:3px solid var(--yellow); padding-left:10px; }
.earn-kucoin-title { border-left-color:#0ECB81; }
.earn-okx-title { border-left-color:#848E9C; }
.earn-mexc-title { border-left-color:#1890FF; }
.input-sm { max-width:120px; }
.sc-mt { margin-top:12px; }
.earn-empty { color:var(--text-3); font-size:12px; padding:10px 0; }
.field-group { margin-bottom:14px; }
.field-group > label { display:block; font-size:10px; color:var(--text-3); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

/* ── Settings ───────────────────────────────────── */
.settings-grid { display:grid; gap:10px; }
.rpt-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rpt-pill { display:flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; border:1px solid var(--border); background:var(--bg-3); cursor:pointer; font-size:11px; color:var(--text-2); transition:background .15s, border-color .15s, color .15s; user-select:none; -webkit-user-select:none; }
.rpt-pill input[type=checkbox] { display:none; }
.rpt-pill:has(input:checked) { background:rgba(14,203,129,.12); border-color:rgba(14,203,129,.4); color:var(--green); }
.rpt-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rpt-card-header h3 { margin:0; }
.thr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:8px; margin-top:8px; }
.thr-card { background:var(--bg-3); border:1px solid var(--border); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:7px; transition:border-color .15s; }
.thr-card.active { border-color:rgba(14,203,129,.4); }
.thr-card-top { display:flex; align-items:center; justify-content:space-between; }
.thr-card-name { font-size:12px; font-weight:600; color:var(--text-1); }
.thr-card-port { font-size:10px; color:var(--text-3); }
.thr-card input[type=number] { width:100%; background:var(--bg-2); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:12px; color:var(--text-1); }
.thr-card input[type=number]:disabled { opacity:.4; pointer-events:none; }
.sc {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:8px; padding:20px;
}
.sc h3 { font-size:13px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.sc .sc-desc { font-size:11px; color:var(--text-2); margin-bottom:16px; line-height:1.65; }
.field { margin-bottom:12px; }
.field:last-of-type { margin-bottom:0; }
.field label { display:block; font-size:10px; color:var(--text-2); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.field input {
  width:100%; padding:9px 12px; background:var(--bg-3);
  border:1px solid var(--border); border-radius:6px; color:var(--text);
  font-family:inherit; font-size:13px; transition:.15s;
}
.field input:focus { outline:none; border-color:var(--yellow); box-shadow:0 0 0 2px var(--yellow-dim); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.help { font-size:10px; color:var(--text-3); margin-top:5px; line-height:1.5; }
.help a { color:var(--yellow); }
.btn {
  padding:8px 16px; background:var(--bg-3); color:var(--text-2);
  border:1px solid var(--border); border-radius:6px; cursor:pointer;
  font-size:12px; font-family:inherit; font-weight:600; transition:.15s;
}
.btn:hover { background:var(--border-2); color:var(--text); }
.btn.primary { background:var(--yellow); color:#0B0E11; border-color:var(--yellow); font-weight:700; }
.btn.primary:hover { background:#d4a20a; border-color:#d4a20a; }
.btn-row { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.btn-mt { margin-top:14px; }
.toggle { position:relative; display:inline-block; width:40px; height:22px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--bg-3); border:1px solid var(--border); border-radius:22px; transition:.2s; }
.toggle-slider:before { content:""; position:absolute; height:16px; width:16px; left:2px; bottom:2px; background:var(--text-3); border-radius:50%; transition:.2s; }
.toggle input:checked + .toggle-slider { background:var(--yellow); border-color:var(--yellow); }
.toggle input:checked + .toggle-slider:before { transform:translateX(18px); background:#0B0E11; }
.alert { padding:10px 14px; border-radius:6px; margin-bottom:12px; font-size:12px; display:none; font-weight:500; }
.alert.success { background:var(--green-dim); color:var(--green); border:1px solid rgba(14,203,129,.25); }
.alert.error   { background:var(--red-dim);   color:var(--red);   border:1px solid rgba(246,70,93,.25); }
.alert.show { display:block; }
.threshold-row {
  display:grid; grid-template-columns:20px 1fr 130px;
  gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border);
}
.threshold-row:last-child { border-bottom:none; }
.threshold-row .tname { font-size:12px; font-weight:600; }
.threshold-row .tsub  { font-size:10px; color:var(--text-3); margin-top:2px; }
.threshold-row input[type="number"] {
  width:100%; text-align:right; padding:6px 10px;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:5px; color:var(--text); font-size:12px;
  font-family:inherit; transition:.15s;
}
.threshold-row input[type="number"]:focus { outline:none; border-color:var(--yellow); }
.threshold-row input[type="number"]:disabled { opacity:.3; cursor:not-allowed; }
.threshold-row input[type="checkbox"] { width:15px; height:15px; cursor:pointer; accent-color:var(--yellow); }
footer {
  text-align:center; margin-top:32px; padding-top:16px;
  border-top:1px solid var(--border); color:var(--text-3); font-size:11px;
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ── Instance left border ───────────────────────── */
.inst-row { border-left:3px solid var(--border); transition:border-color .2s, border-left-color .2s, box-shadow .2s; border-radius:12px; }
.inst-row:hover { box-shadow:0 4px 20px rgba(0,0,0,0.25); }
.inst-row.offline { border-left-color:var(--text-3); }

/* ── Status badge ───────────────────────────────── */
.status-pill {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9px; font-weight:700; padding:2px 7px;
  border-radius:20px; letter-spacing:.04em; vertical-align:middle;
}
.status-pill.on { background:var(--green-dim); color:var(--green); }
.status-pill.off { background:rgba(132,142,156,.1); color:var(--text-3); }

/* ── Portfolio card ─────────────────────────────── */
.s-card.portfolio {
  background:linear-gradient(135deg,#1a2020,#1E2329);
  border-color:rgba(14,203,129,.25);
  position:relative; overflow:hidden;
}
.s-card.portfolio::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle,rgba(14,203,129,.08),transparent 70%);
  pointer-events:none;
}
.pf-balance { font-size:26px; font-weight:800; margin:6px 0 10px; letter-spacing:-.03em; background:linear-gradient(135deg,#F0B90B,#EAECEF); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pf-balance.pos { background:none; -webkit-text-fill-color:var(--green); }
.pf-balance.neg { background:none; -webkit-text-fill-color:var(--red); }
.pf-eur-hint { font-size:11px; color:var(--text-3); margin-top:-6px; margin-bottom:6px; }
.today-progress-wrap { height:3px; background:var(--border-2); border-radius:2px; margin-top:6px; overflow:hidden; }
.today-progress-bar  { height:100%; border-radius:2px; transition:width .6s ease; }
.pf-pnl-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pf-pnl-val { font-size:12px; font-weight:600; }
.pf-period-tabs { display:flex; gap:4px; }
.pf-tab { padding:3px 9px; border-radius:5px; background:var(--bg-3); border:1px solid var(--border); color:var(--text-3); font-size:10px; font-weight:600; cursor:pointer; transition:background .12s, color .12s; }
.pf-tab.active { background:var(--yellow); color:#000; border-color:var(--yellow); }
.pf-tab:hover:not(.active) { color:var(--text); border-color:var(--border-2); }
.src-badge { display:inline-block; font-size:8px; font-weight:700; padding:1px 5px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em; }
.src-badge.gunbot    { background:rgba(240,185,11,.15); color:var(--yellow); border:1px solid rgba(240,185,11,.3); }
.src-badge.exchange  { background:rgba(82,140,255,.15); color:#528CFF;       border:1px solid rgba(82,140,255,.3); }
.src-badge.vps       { background:rgba(160,100,255,.15); color:#a064ff;      border:1px solid rgba(160,100,255,.3); }
.s-card.today-pnl {
  background:linear-gradient(135deg,var(--bg-2),rgba(240,185,11,.05));
  border-color:rgba(240,185,11,.09);
}

/* ── Toast ──────────────────────────────────────── */
.toast-container {
  position:fixed; bottom:24px; right:24px;
  display:flex; flex-direction:column; gap:8px;
  z-index:9999; pointer-events:none;
}
.toast {
  background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:8px; padding:12px 16px; font-size:13px; font-weight:500;
  min-width:220px; max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  animation:toastIn .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events:all; display:flex; align-items:center; gap:10px;
}
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red); }
.toast.info    { border-left:3px solid var(--yellow); }
.toast.out     { animation:toastOut .25s ease forwards; }
.toast-icon    { font-size:15px; flex-shrink:0; }
.toast-msg     { flex:1; color:var(--text); }
@keyframes toastIn  { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{transform:translateX(0);opacity:1}    to{transform:translateX(110%);opacity:0} }
@keyframes dcaSpin  { to{transform:rotate(360deg)} }

/* ── Analytics row ──────────────────────────────── */
.analytics-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; align-items:stretch; }
@media(max-width:760px) { .analytics-row { grid-template-columns:1fr; } }
.analytics-card { background:rgba(30,35,41,0.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px 18px; transition:border-color .2s, box-shadow .2s; display:flex; flex-direction:column; }
.analytics-card:hover { border-color:rgba(255,255,255,0.1); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.ac-label { font-size:10px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ac-label-sub { font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-3); }
#portfolio-chart { flex:1; display:flex; align-items:center; min-height:90px; }
#portfolio-chart .chart-svg { height:100%; }
#portfolio-chart .chart-empty { margin:auto; }
.exch-bar { height:10px; border-radius:5px; overflow:hidden; display:flex; margin-bottom:10px; gap:1px; }
.exch-seg { height:100%; min-width:2px; }
.exch-legend { display:flex; flex-direction:column; gap:5px; }
.exch-leg-item { display:flex; align-items:center; justify-content:space-between; font-size:11px; }
.exch-leg-left { display:flex; align-items:center; gap:6px; }
.exch-leg-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.exch-leg-name { color:var(--text-2); font-weight:500; }
.exch-leg-val { color:var(--text-3); }
.exch-liquid-row { font-size:10px; color:var(--text-3); margin-top:6px; border-top:1px solid var(--border-1); padding-top:5px; }
.chart-svg { width:100%; display:block; overflow:visible; }
.chart-empty { color:var(--text-3); font-size:11px; text-align:center; padding:22px 0; }

/* ── Rankings panel ─────────────────────────────── */
.rankings-panel { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
@media(max-width:700px) { .rankings-panel { grid-template-columns:1fr; } }
.rank-card { background:rgba(30,35,41,0.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:12px 14px; transition:border-color .2s, box-shadow .2s; }
.rank-card:hover { border-color:rgba(255,255,255,0.1); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.rank-title { font-size:11px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.rank-title-sub { font-size:9px; font-weight:400; color:var(--text-3); }
.rank-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid rgba(43,49,57,.5); font-size:11px; }
.rank-row:last-child { border-bottom:none; }
.rank-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-sub { font-size:9px; color:var(--text-3); margin-top:1px; }
.rank-val { text-align:right; font-weight:600; white-space:nowrap; }
.rank-empty { color:var(--text-3); font-size:11px; padding:4px 0; }

/* ── Skeleton ───────────────────────────────────── */
.skel-wrap { display:flex; flex-direction:column; gap:4px; }
.skel {
  background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:8px;
}
.skel-row { height:50px; }
.skel-card { height:80px; border-radius:8px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes fadeUpdate { 0%{opacity:.55} 100%{opacity:1} }
.val-updated { animation:fadeUpdate .5s ease-out; }
@keyframes flashPos { 0%{background:rgba(14,203,129,.22);border-radius:6px} 100%{background:transparent} }
@keyframes flashNeg { 0%{background:rgba(246,70,93,.22);border-radius:6px} 100%{background:transparent} }
.flash-pos { animation:flashPos 1s ease-out; }
.flash-neg { animation:flashNeg 1s ease-out; }

/* Favorites star */
.fav-star { background:none;border:none;cursor:pointer;font-size:13px;line-height:1;padding:0 1px;color:#F0B90B;opacity:.18;transition:opacity .15s,transform .13s;vertical-align:middle; }
.fav-star:hover { opacity:.55; }
.fav-star.on { opacity:1;transform:scale(1.22); }

/* Pull-to-refresh */
#ptr-indicator { position:fixed;top:-48px;left:50%;transform:translateX(-50%);z-index:9999;width:28px;height:28px;background:var(--bg-2);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;pointer-events:none;color:var(--text-3); }
@keyframes ptrSpin { to { transform:translateX(-50%) rotate(360deg); } }
#ptr-indicator.spinning { animation:ptrSpin .6s linear infinite; }

/* Demo banner */
#demo-banner { position:fixed;bottom:0;left:0;right:0;z-index:980;background:rgba(93,167,219,.1);border-top:1px solid rgba(93,167,219,.2);padding:5px 16px;display:none;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#5DA7DB;letter-spacing:.02em; }

/* Mobile hamburger menu */
.mob-menu-btn { display:none; align-items:center; gap:7px; background:var(--bg-3); border:1px solid var(--border); border-radius:8px; padding:5px 11px; font-size:13px; color:var(--text); cursor:pointer; font-weight:500; white-space:nowrap; }
.mob-nav { position:fixed; top:52px; left:0; right:0; z-index:98; background:var(--bg-2); border-bottom:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.18); padding:6px 0 8px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); visibility:hidden; opacity:0; transform:translateY(-6px); transition:opacity .15s ease, transform .15s ease, visibility .15s; }
.mob-nav.open { visibility:visible; opacity:1; transform:translateY(0); }
.mob-nav-item { margin:1px 10px; padding:9px 14px; font-size:12.5px; font-weight:500; color:var(--text-2); cursor:pointer; border-radius:8px; display:flex; align-items:center; gap:8px; transition:background .12s, color .12s; }
.mob-nav-item:active { background:rgba(255,255,255,.04); }
.mob-nav-item.active { color:var(--yellow); font-weight:600; background:rgba(240,185,11,.08); }

/* Bottom navigation — mobile */
#bottom-nav { display:none;position:fixed;bottom:0;left:0;right:0;z-index:975;background:var(--bg-2);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px); }
.bn-inner { display:flex;justify-content:space-around; }
.bn-item { flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px 5px;font-size:9px;color:var(--text-3);background:none;border:none;cursor:pointer;line-height:1;min-width:0;transition:color .15s; }
.bn-item.active { color:var(--yellow); }
.bn-icon { font-size:18px;margin-bottom:1px; }
@media(max-width:600px) {
  #bottom-nav { display:none; }
  #demo-banner { bottom:0; }
  #main-app { padding-bottom:16px; }
  body, #main-app { touch-action:pan-y; overflow-x:hidden; }
  /* Header: compact, fixed at top — only brand + tiny flags + 👁 + 🌙 */
  header { padding:8px 20px; gap:6px; }
  header .btn-icon { display:none; }
  .ver-badge { display:none; }
  .live-badge { display:none; }
  /* Tabs hidden on mobile — replaced by hamburger dropdown */
  .tabs { display:none; }
  .mob-menu-btn { display:flex; }
  /* Lang picker replaced by compact dropdown on mobile */
  #header-lang-picker { display:none; }
  #mob-lang-btn { display:flex !important; align-items:center; justify-content:center; gap:0; width:32px; height:32px; padding:0; border-radius:6px; }
  /* Active tab: pill bg — removes the orange border line */
  .tab.active { border-bottom:none !important; background:rgba(240,185,11,.18); border-radius:6px 6px 0 0; }
  /* Lang picker: hide label, tiny flags only */
  .lang-label { display:none; }
  #header-lang-picker .lang-picker { padding:2px 3px; gap:0; background:none; border:none; }
  #header-lang-picker .lang-btn { padding:1px 2px; }
  #header-lang-picker .lang-btn img { width:14px !important; height:10px !important; }
  /* Reduce app top padding for mobile header height */
  .app { padding-top:90px; }
  html { scroll-padding-top:88px; }
  /* Remove backdrop-filter on cards — scroll-stutter fix */
  .s-card,.analytics-card,.rank-card,.bnh-card { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(22,28,36,0.97); }
  .ai-chat-panel { height:340px; }
  .field-row-3 { grid-template-columns:1fr; }
}

/* Tour overlay */
#tour-overlay { position:fixed;inset:0;z-index:10000;pointer-events:none; }
.tour-hl { position:fixed;pointer-events:none;border-radius:8px;outline:3px solid var(--yellow);outline-offset:4px;box-shadow:0 0 0 9999px rgba(0,0,0,.6);z-index:10001;transition:all .3s ease; }
.tour-tip { position:fixed;background:var(--bg-2);border:1px solid rgba(240,185,11,.4);border-radius:12px;padding:16px 18px;width:270px;z-index:10002;pointer-events:all;box-shadow:0 8px 32px rgba(0,0,0,.5); }
.tour-tip-title { font-size:13px;font-weight:700;color:var(--yellow);margin-bottom:6px; }
.tour-tip-body { font-size:11px;color:var(--text-2);line-height:1.65;margin-bottom:14px; }
.tour-tip-nav { display:flex;align-items:center;justify-content:space-between; }
.tour-step-dots { display:flex;gap:4px;align-items:center; }
.tour-dot { width:5px;height:5px;border-radius:50%;background:var(--border); }
.tour-dot.active { background:var(--yellow); }
.pos { color:var(--green); text-shadow:0 0 12px rgba(14,203,129,.3); }
.neg { color:var(--red);   text-shadow:0 0 12px rgba(246,70,93,.3); }

/* ── Login overlay ───────────────────────────────── */
#login-overlay {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.login-box {
  background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:20px; padding:36px 40px;
  width:420px;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:0;
  box-sizing:border-box;
}
#login-lang-picker { margin-bottom:20px; }
.login-brand { display:flex; align-items:center; gap:16px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--border); }
.login-brand svg { width:48px; height:48px; flex-shrink:0; }
.login-brand-name { font-size:28px; font-weight:800; color:var(--text); line-height:1.1; }
.login-brand-name span { color:var(--accent); }
.login-title { font-size:13px; color:var(--text-3); margin-top:4px; }
.login-label { font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; display:block; letter-spacing:.02em; }
.login-input {
  width:100%; background:var(--bg-3); border:1px solid var(--border-2);
  border-radius:9px; padding:12px 14px; color:var(--text); font-size:14px;
  font-family:'Courier New',monospace; letter-spacing:.03em;
  outline:none; transition:border-color .2s; box-sizing:border-box;
}
.login-input:focus { border-color:var(--accent); }
.login-input::placeholder { color:var(--text-3); font-family:inherit; }
.login-field { margin-bottom:16px; }
.login-remember { display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:20px; margin-top:4px; }
.login-remember input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.login-remember span { font-size:12px; color:var(--text-2); }
.login-btn {
  width:100%; padding:13px; border-radius:9px; border:none; cursor:pointer;
  background:var(--accent); color:#000; font-size:14px; font-weight:700;
  font-family:inherit; transition:opacity .2s;
  box-shadow:0 4px 16px rgba(240,185,11,.25);
}
.login-btn:hover { opacity:.88; }
.login-btn:disabled { opacity:.5; cursor:not-allowed; }
.login-error {
  font-size:12px; color:var(--red); background:var(--red-dim);
  border:1px solid rgba(246,70,93,.2); border-radius:8px;
  padding:10px 12px; display:none; margin-bottom:12px;
}
.login-error.visible { display:block; }
.login-footer { font-size:11px; color:var(--text-3); text-align:center; margin-top:16px; }
.login-key-help { font-size:11px; color:var(--text-3); margin-top:5px; }

/* ═══════════════════════════════════════════════════
   VISUAL IMPROVEMENTS PACK
   ═══════════════════════════════════════════════════ */

/* ── Monospace numbers ─────────────────────────── */
.mv, .pcv, .esv, .adm-stat .asv { font-family:'JetBrains Mono','Courier New',monospace; font-variant-numeric:tabular-nums; }
.s-val, .pf-balance, .pd-val, .pf-pnl-val, .rank-val { font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ── Row PnL coloring ──────────────────────────── */
.ptable tbody tr.row-pos td { background:rgba(14,203,129,.02); }
.ptable tbody tr.row-neg td { background:rgba(246,70,93,.02); }
.ptable tbody tr.row-pos:hover td { background:rgba(14,203,129,.045); }
.ptable tbody tr.row-neg:hover td { background:rgba(246,70,93,.045); }
.ptable tbody tr.mkt-metals td.td-pair { border-left:2px solid rgba(200,169,110,.55); }
.ptable tbody tr.mkt-stocks td.td-pair { border-left:2px solid rgba(93,167,219,.55); }

/* ── Tooltips ──────────────────────────────────── */
[data-tip] { position:relative; cursor:default; }
[data-tip]::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 7px);
  left:50%; transform:translateX(-50%); white-space:nowrap;
  background:rgba(11,14,17,.96); border:1px solid var(--border-2);
  color:var(--text-2); font-size:11px; padding:5px 10px;
  border-radius:6px; pointer-events:none; opacity:0;
  transition:opacity .15s; z-index:500;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
[data-tip]:hover::after { opacity:1; }

/* ── Pairs search ──────────────────────────────── */
.pairs-search {
  padding:7px 12px; background:var(--bg-2);
  border:1px solid var(--border-2); border-radius:8px;
  color:var(--text); font-size:12px; font-family:inherit;
  outline:none; width:190px; transition:border-color .15s;
}
.pairs-search:focus { border-color:var(--yellow); }
.pairs-search::placeholder { color:var(--text-3); }
.pairs-toolbar-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:8px; }

/* ── Theme toggle ──────────────────────────────── */
.theme-toggle {
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text-2); border-radius:6px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; transition:.15s; flex-shrink:0;
}
.theme-toggle:hover { background:var(--bg-3); color:var(--text); }

/* ── Inline confirm modal ──────────────────────── */
.ic-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  z-index:9997; display:flex; align-items:center; justify-content:center;
  animation:fadeIn .15s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.ic-box {
  background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:14px; padding:28px 32px; max-width:360px;
  width:calc(100vw - 32px); box-shadow:0 20px 60px rgba(0,0,0,.6);
  text-align:center; animation:slideUp .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp { from{transform:translateY(12px);opacity:0} to{transform:none;opacity:1} }
.ic-icon { font-size:28px; margin-bottom:12px; }
.ic-msg { font-size:13px; color:var(--text-2); margin-bottom:20px; line-height:1.6; }
.ic-btns { display:flex; gap:10px; justify-content:center; }
.ic-btn { padding:9px 24px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; }
.ic-btn-cancel { background:var(--bg-3); border:1px solid var(--border-2); color:var(--text-2); }
.ic-btn-cancel:hover { background:var(--border-2); }
.ic-btn-ok { background:var(--red); border:none; color:#fff; }
.ic-btn-ok:hover { opacity:.85; }
.ic-btn-ok.safe { background:var(--yellow); color:#000; }

/* ── Login redesign ────────────────────────────── */
#login-overlay {
  background:radial-gradient(ellipse 100% 70% at 50% -10%, rgba(240,185,11,.07) 0%, transparent 60%),
             radial-gradient(ellipse 60% 50% at 85% 85%, rgba(14,203,129,.04) 0%, transparent 60%),
             var(--bg);
}
.login-box {
  box-shadow:0 0 0 1px rgba(240,185,11,.1), 0 40px 100px rgba(0,0,0,.7) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
.login-input:focus { box-shadow:0 0 0 3px rgba(240,185,11,.12); }
.login-input.valid   { border-color:var(--green) !important; box-shadow:0 0 0 3px rgba(14,203,129,.1) !important; }
.login-input.invalid { border-color:var(--red)   !important; box-shadow:0 0 0 3px rgba(246,70,93,.1)  !important; }

/* ── Paste button ──────────────────────────────── */
.input-paste-wrap { position:relative; }
.input-paste-wrap .login-input { padding-right:48px; }
.paste-btn {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:var(--bg-3); border:1px solid var(--border-2);
  color:var(--text-3); border-radius:5px; padding:3px 8px;
  font-size:12px; cursor:pointer; transition:.15s; line-height:1.4;
}
.paste-btn:hover { background:var(--border-2); color:var(--text); }

/* ── Sparkline in KPI card ─────────────────────── */
.s-sparkline { width:100%; height:28px; margin-top:6px; display:block; overflow:visible; }

/* ── Heatmap ───────────────────────────────────── */
.heatmap-section { margin-bottom:12px; }
.heatmap-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.heatmap-title { font-size:11px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.06em; }
.heatmap-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(70px,1fr)); gap:4px; }
.hm-cell {
  border-radius:7px; padding:7px 8px; font-size:10px;
  font-weight:700; cursor:default; transition:transform .12s, box-shadow .12s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative;
}
.hm-cell:hover { transform:scale(1.06); box-shadow:0 4px 16px rgba(0,0,0,.4); z-index:1; }
.hm-sym { display:block; color:rgba(255,255,255,.92); font-size:10px; }
.hm-val { display:block; color:rgba(255,255,255,.7); font-size:9px; font-weight:400; margin-top:1px; font-family:'JetBrains Mono',monospace; }
.hm-exch { display:block; color:rgba(255,255,255,.45); font-size:8px; margin-top:1px; }

/* ── Light mode ────────────────────────────────── */
body.light {
  --bg:#F0F2F5; --bg-2:#FFFFFF; --bg-3:#F5F7FA;
  --border:#E2E8F0; --border-2:#CBD5E0;
  --text:#1A202C; --text-2:#4A5568; --text-3:#718096;
  --green-dim:rgba(14,203,129,.1); --red-dim:rgba(246,70,93,.1);
}
body.light .analytics-card, body.light .rank-card,
body.light .bnh-card, body.light .s-card { background:rgba(255,255,255,.95); border-color:#E2E8F0; }
body.light .s-card.accent { background:linear-gradient(135deg,#fff,rgba(240,185,11,.06)); }
body.light .s-card.portfolio { background:linear-gradient(135deg,#f0fff8,#fff); }
body.light .s-card.today-pnl { background:linear-gradient(135deg,#fff,rgba(240,185,11,.04)); }
body.light .inst-row { background:#fff; border-color:#E2E8F0; }
body.light header { background:rgba(240,242,245,.9); border-color:#E2E8F0; }
body.light .tabs { border-color:#E2E8F0; }
body.light .sc { background:#fff; border-color:#E2E8F0; }
body.light .pairs-card { background:#fff; border-color:#E2E8F0; }
body.light .adm-section { background:#fff; border-color:#E2E8F0; }
body.light .pc { background:#F5F7FA; border-color:#E2E8F0; }
body.light .login-box { background:rgba(255,255,255,.97); }
body.light #login-overlay { background:radial-gradient(ellipse 100% 70% at 50% -10%, rgba(240,185,11,.08) 0%, transparent 60%), #F0F2F5; }
body.light ::-webkit-scrollbar-thumb { background:#CBD5E0; }

/* ── Trend arrow ───────────────────────────────── */
.trend-arrow { font-size:12px; font-weight:700; margin-left:5px; }
.trend-arrow.up { color:var(--green); }
.trend-arrow.dn { color:var(--red); }

/* ── Admin status pills ────────────────────────── */
.adm-status-active {
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
  border-radius:20px; font-size:10px; font-weight:700;
  background:var(--green-dim); color:var(--green); border:1px solid rgba(14,203,129,.3);
}
.adm-status-pending {
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
  border-radius:20px; font-size:10px; font-weight:700;
  background:rgba(240,185,11,.1); color:#F0B90B; border:1px solid rgba(240,185,11,.3);
}
.adm-status-revoked {
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
  border-radius:20px; font-size:10px; font-weight:700;
  background:var(--red-dim); color:var(--red); border:1px solid rgba(246,70,93,.3);
}

/* ── Refresh timer ─────────────────────────────── */
#refresh-timer { font-size:10px; color:var(--text-3); }

/* ── Pie chart ─────────────────────────────────── */
.pie-wrap { display:flex; align-items:center; gap:16px; flex:1; }
.pie-svg { flex-shrink:0; width:90px; height:90px; }
.pie-wrap .exch-legend { flex:1; display:flex; flex-direction:column; gap:6px; }
.exch-liquid-row { margin-top:10px; flex-shrink:0; font-size:10px; color:var(--text-3); border-top:1px solid rgba(255,255,255,.04); padding-top:8px; }

/* ── Pairs count badge ─────────────────────────── */
.pairs-meta-row { display:flex; align-items:center; gap:8px; }

/* ── Summary card flex layout ──────────────────── */
.s-card.today-pnl, .s-card.status-vps {
  display:flex; flex-direction:column;
}
.sc-mid {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:10px 0;
}
.sc-mid .s-val { font-size:26px; }
.sc-mid .s-sub { text-align:center; margin-top:5px; }
.sc-foot { flex-shrink:0; border-top:1px solid rgba(255,255,255,.04); padding-top:8px; margin-top:4px; }
.sc-foot .s-sub { font-size:10px; margin-bottom:3px; }
.sc-foot .s-sub:last-child { margin-bottom:0; }
.status-big { font-size:32px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.status-big span { font-size:16px; font-weight:400; color:var(--text-3); }

/* ── #1 PnL tab colors ─────────────────────────── */
.ptab.ptab-pos { color:var(--green); border-color:rgba(14,203,129,.25); }
.ptab.ptab-pos:hover { color:var(--green); border-color:rgba(14,203,129,.5); }
.ptab.ptab-pos.active { background:rgba(14,203,129,.12); border-color:var(--green); color:var(--green); }
.ptab.ptab-neg { color:var(--red); border-color:rgba(246,70,93,.25); }
.ptab.ptab-neg:hover { color:var(--red); border-color:rgba(246,70,93,.5); }
.ptab.ptab-neg.active { background:rgba(246,70,93,.12); border-color:var(--red); color:var(--red); }

/* ── #2 Portfolio card dynamic gradient ─────────── */
.s-card.portfolio.pnl-up { background:linear-gradient(135deg,#0f1c18,#1E2329); border-color:rgba(14,203,129,.3); }
.s-card.portfolio.pnl-down { background:linear-gradient(135deg,#1c0f10,#1E2329); border-color:rgba(246,70,93,.2); }
body.light .s-card.portfolio.pnl-up { background:linear-gradient(135deg,#f0fff8,#fff); border-color:rgba(14,203,129,.3); }
body.light .s-card.portfolio.pnl-down { background:linear-gradient(135deg,#fff5f5,#fff); border-color:rgba(246,70,93,.2); }

/* ── #4 Nav tab badge ───────────────────────────── */
.tab-badge { font-size:9px; background:rgba(240,185,11,.12); color:var(--yellow); border:1px solid rgba(240,185,11,.25); border-radius:9px; padding:0 5px; margin-left:4px; font-weight:700; vertical-align:middle; line-height:1.7; display:inline-block; }
.tab.active .tab-badge { background:rgba(240,185,11,.22); }

/* ── #6 Tab content fade transition ────────────── */
@keyframes tabFadeIn { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none} }
.tab-content.active { display:block; animation:tabFadeIn .18s ease; }

/* ── #8 Instance balance progress bar ───────────── */
.inst-bal-bar { height:2px; background:rgba(255,255,255,.06); border-radius:1px; margin-top:5px; overflow:hidden; }
.inst-bal-bar-fill { height:100%; border-radius:1px; transition:width .6s ease; }
body.light .inst-bal-bar { background:rgba(0,0,0,.06); }


/* ── Market type filter ─────────────────────────── */
.mkt-filter { display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap; }
.mkt-chip { padding:3px 10px; border-radius:10px; font-size:10px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-3); transition:.12s; font-family:inherit; }
.mkt-chip:hover { color:var(--text-2); border-color:var(--border-2); }
.mkt-chip.active { color:var(--text); border-color:var(--border-2); background:var(--bg-3); }
.mkt-chip[data-type="all"].active { color:var(--text-2); }
.mkt-chip[data-type="crypto"].active { color:#F0B90B; border-color:rgba(240,185,11,.5); background:rgba(240,185,11,.08); }
.mkt-chip[data-type="metals"].active { color:#C8A96E; border-color:rgba(200,169,110,.5); background:rgba(200,169,110,.08); }
.mkt-chip[data-type="stocks"].active { color:#5DA7DB; border-color:rgba(93,167,219,.5); background:rgba(93,167,219,.08); }
.mkt-empty { text-align:center; padding:28px 12px; color:var(--text-3); font-size:11px; line-height:1.9; flex:1; }
.mkt-badge { display:inline-flex; align-items:center; font-size:8px; font-weight:700; padding:1px 5px; border-radius:3px; text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; margin-left:3px; }
.mkt-badge.crypto { background:rgba(240,185,11,.12); color:#F0B90B; border:1px solid rgba(240,185,11,.2); }
.mkt-badge.metals { background:rgba(200,169,110,.12); color:#C8A96E; border:1px solid rgba(200,169,110,.2); }
.mkt-badge.stocks { background:rgba(93,167,219,.12); color:#5DA7DB; border:1px solid rgba(93,167,219,.2); }

/* ── Global Market Selector (on Total Value card) ── */
.gms-row { display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap; }
.gms-btn { padding:3px 10px; border-radius:10px; font-size:10px; font-weight:600; cursor:pointer; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--text-3); transition:.12s; font-family:inherit; }
.gms-btn:hover { color:var(--text-2); border-color:rgba(255,255,255,.2); }
.gms-btn[data-mkt="all"].active { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:var(--text-2); }
.gms-btn[data-mkt="crypto"].active { color:#F0B90B; border-color:rgba(240,185,11,.45); background:rgba(240,185,11,.1); }
.gms-btn[data-mkt="metals"].active { color:#C8A96E; border-color:rgba(200,169,110,.45); background:rgba(200,169,110,.1); }
.gms-btn[data-mkt="stocks"].active { color:#5DA7DB; border-color:rgba(93,167,219,.45); background:rgba(93,167,219,.1); }
body.light .gms-btn { border-color:rgba(0,0,0,.1); }
body.light .gms-btn[data-mkt="all"].active { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.18); }
.gms-market-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin-bottom:2px; }

/* ── AI Watchdog strip (Overview) ─────────────────────── */
#ai-watchdog { display:flex; align-items:center; gap:12px;
  background:linear-gradient(120deg,rgba(240,185,11,.07),rgba(240,185,11,.02));
  border:1px solid rgba(240,185,11,.2); border-left:3px solid #F0B90B;
  border-radius:10px; padding:12px 16px; margin-bottom:16px; }
.aiw-logo { flex-shrink:0; display:flex; align-items:center; }
.aiw-body { flex:1; min-width:0; }
.aiw-label { font-size:10px; font-weight:700; color:var(--yellow); letter-spacing:.05em;
  text-transform:uppercase; display:flex; align-items:center; gap:5px; }
.aiw-live { width:6px; height:6px; background:#0ECB81; border-radius:50%;
  animation:aipulse 2s infinite; display:inline-block; flex-shrink:0; }
.aiw-insight { font-size:12px; color:var(--text); margin-top:3px; font-weight:500; }
.aiw-stats { font-size:10px; color:var(--text-3); margin-top:2px; }
.aiw-btn { padding:6px 14px; border-radius:8px; border:1px solid rgba(240,185,11,.3);
  background:rgba(240,185,11,.08); color:var(--yellow); font-size:11px; font-weight:700;
  cursor:pointer; white-space:nowrap; flex-shrink:0; transition:.15s; }
.aiw-btn:hover { background:rgba(240,185,11,.18); border-color:rgba(240,185,11,.5); }
.login-ai-tag { font-size:12px; color:var(--text-3); letter-spacing:.04em;
  display:flex; align-items:center; gap:6px; margin-top:4px; }
.login-ai-dot { width:6px; height:6px; background:#0ECB81; border-radius:50%;
  display:inline-block; animation:aipulse 2s infinite; flex-shrink:0; }
/* AI toggle switch */
.ai-toggle-sw { position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; flex-shrink:0; }
.ai-toggle-sw input { opacity:0; width:0; height:0; position:absolute; }
.ai-toggle-track { position:absolute; inset:0; border-radius:11px; background:var(--bg-3); border:1px solid var(--border); transition:.2s; }
.ai-toggle-track::before { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background:var(--text-3); transition:.2s; }
.ai-toggle-sw input:checked ~ .ai-toggle-track { background:var(--yellow); border-color:var(--yellow); }
.ai-toggle-sw input:checked ~ .ai-toggle-track::before { transform:translateX(18px); background:#0B0E11; }

/* ── MIMIX AI ─────────────────────────────────────────── */
:root { --ai:#F0B90B; --ai2:#C9960A; --ai-glow:rgba(240,185,11,.18); }
body.light { --ai:#D4A200; --ai2:#B08A00; --ai-glow:rgba(240,185,11,.12); }

.ai-hero { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  background:linear-gradient(135deg,rgba(240,185,11,.1),rgba(240,185,11,.03));
  border:1px solid rgba(240,185,11,.3); border-radius:14px; padding:20px 24px; margin-bottom:20px; }
.ai-hero-left { display:flex; align-items:center; gap:14px; }
.ai-logo-wrap { position:relative; flex-shrink:0; }
.ai-logo { width:48px; height:48px; }
.ai-badge { position:absolute; bottom:-4px; right:-6px; background:var(--ai); color:#fff;
  font-size:8px; font-weight:800; letter-spacing:.08em; padding:2px 5px; border-radius:4px; }
.ai-hero-title { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.ai-hero-title span { color:var(--ai); }
.ai-hero-sub { font-size:12px; color:var(--text-2); margin-top:2px; }
.ai-hero-stats { display:flex; gap:20px; }
.ai-hstat { text-align:center; }
.ai-hstat-v { font-size:18px; font-weight:700; color:var(--ai); }
.ai-hstat-l { font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; }
.ai-ea-badge { display:flex; align-items:center; gap:6px; background:rgba(240,185,11,.12);
  border:1px solid rgba(240,185,11,.3); border-radius:20px; padding:6px 14px;
  font-size:11px; font-weight:700; color:var(--ai); }
.ai-ea-dot { width:7px; height:7px; background:var(--ai); border-radius:50%; animation:aipulse 2s infinite; }
@keyframes aipulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }

.ai-layout { display:grid; grid-template-columns:minmax(280px,340px) 1fr; gap:16px; margin-bottom:24px; }
@media(max-width:900px){ .ai-layout{grid-template-columns:1fr} }

.ai-config-panel { background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; max-height:560px; }
.ai-config-section { }
.ai-config-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:8px; }
.ai-inst-list { display:flex; flex-direction:column; gap:4px; }
.ai-inst-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px;
  background:var(--bg-3); border:1px solid var(--border); cursor:pointer; transition:.15s; }
.ai-inst-row:hover { border-color:rgba(240,185,11,.4); }
.ai-inst-row.selected { border-color:var(--ai); background:rgba(240,185,11,.08); }
.ai-inst-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.ai-inst-name { font-size:11px; font-weight:600; color:var(--text); flex:1; }
.ai-inst-check { font-size:12px; color:var(--ai); }
.ai-focus-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ai-focus-chip { padding:6px 8px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-3); cursor:pointer; transition:.15s; text-align:center; }
.ai-focus-chip:hover { border-color:rgba(240,185,11,.4); }
.ai-focus-chip.on { border-color:var(--ai); background:rgba(240,185,11,.1); }
.ai-focus-icon { font-size:16px; display:block; margin-bottom:2px; }
.ai-focus-label { font-size:9px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; }
.ai-focus-chip.on .ai-focus-label { color:var(--ai); }

.ai-chat-panel { background:var(--bg-2); border:1px solid var(--border); border-radius:12px;
  display:flex; flex-direction:column; height:560px; overflow:hidden; }
.ai-chat-topbar { display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--border); flex-shrink:0; }
.ai-chat-avatar { width:32px; height:32px; background:var(--bg-3); border:1px solid var(--border);
  border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-chat-avatar svg { width:18px; height:18px; }
.ai-chat-name { font-weight:700; font-size:13px; color:var(--text); }
.ai-chat-status { font-size:10px; color:var(--ai); display:flex; align-items:center; gap:4px; }
.ai-chat-online-dot { width:5px; height:5px; background:var(--ai); border-radius:50%; }
.ai-chat-clear { margin-left:auto; font-size:10px; color:var(--text-3); cursor:pointer;
  padding:3px 8px; border-radius:5px; border:1px solid var(--border); background:none; transition:.15s; }
.ai-chat-clear:hover { color:var(--text); border-color:var(--text-3); }

.ai-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth; }
.ai-msg { display:flex; gap:10px; max-width:88%; animation:msgIn .2s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.ai-msg.user { align-self:flex-end; flex-direction:row-reverse; }
.ai-msg-avatar { width:28px; height:28px; border-radius:8px; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:12px; }
.ai-msg-avatar.bot { background:var(--bg-3); border:1px solid var(--border); }
.ai-msg-avatar.usr { background:var(--bg-3); border:1px solid var(--border); }
.ai-msg-bubble { padding:10px 14px; border-radius:12px; font-size:12px; line-height:1.65; }
.ai-msg.bot .ai-msg-bubble { background:var(--bg-3); border:1px solid var(--border);
  border-bottom-left-radius:3px; color:var(--text); }
.ai-msg.user .ai-msg-bubble { background:linear-gradient(135deg,var(--ai),var(--ai2));
  color:#0B0E11; border-bottom-right-radius:3px; }
.ai-msg-bubble b { font-weight:700; }
.ai-msg-bubble ul { margin:6px 0 0 14px; }
.ai-msg-bubble li { margin-bottom:3px; }
.ai-typing { display:flex; align-items:center; gap:4px; padding:10px 14px;
  background:var(--bg-3); border:1px solid var(--border); border-radius:12px; border-bottom-left-radius:3px; }
.ai-typing span { width:6px; height:6px; background:var(--ai); border-radius:50%;
  animation:typing .9s ease infinite; }
.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

.ai-suggestions { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; flex-shrink:0; }
.ai-suggestion { padding:5px 11px; border-radius:20px; border:1px solid rgba(240,185,11,.35);
  background:rgba(240,185,11,.07); color:var(--ai); font-size:11px; cursor:pointer; transition:.15s; }
.ai-suggestion:hover { background:rgba(240,185,11,.15); }

.ai-input-row { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.ai-input { flex:1; background:var(--bg-3); border:1px solid var(--border); border-radius:10px;
  padding:9px 14px; font-size:12px; color:var(--text); outline:none; font-family:inherit; resize:none;
  height:40px; transition:.15s; }
.ai-input:focus { border-color:var(--ai); box-shadow:0 0 0 2px var(--ai-glow); }
.ai-send-btn { width:40px; height:40px; border-radius:10px; border:none; cursor:pointer; flex-shrink:0;
  background:linear-gradient(135deg,var(--ai),var(--ai2)); color:#0B0E11; font-size:16px;
  display:flex; align-items:center; justify-content:center; transition:.15s; }
.ai-send-btn:hover { transform:scale(1.05); }
.ai-send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.ai-features-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.ai-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
@media(max-width:700px){ .ai-feature-grid{grid-template-columns:1fr 1fr} }
.ai-feature-card { background:var(--bg-2); border:1px solid var(--border); border-radius:12px;
  padding:16px; transition:.2s; cursor:default; }
.ai-feature-card:hover { border-color:rgba(240,185,11,.4); transform:translateY(-2px); box-shadow:0 6px 24px rgba(240,185,11,.1); }
.ai-fc-icon { font-size:24px; margin-bottom:10px; display:block; }
.ai-fc-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.ai-fc-desc { font-size:11px; color:var(--text-2); line-height:1.55; }
.ai-fc-tag { display:inline-block; margin-top:8px; font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:4px; }
.ai-fc-tag.soon { background:rgba(240,185,11,.12); color:var(--ai); border:1px solid rgba(240,185,11,.25); }
.ai-fc-tag.live { background:rgba(14,203,129,.12); color:var(--green); border:1px solid rgba(14,203,129,.25); }

.ai-faq-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; }
.ai-faq { display:flex; flex-direction:column; gap:6px; margin-bottom:32px; }
.ai-faq-item { background:var(--bg-2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.ai-faq-q { display:flex; justify-content:space-between; align-items:center;
  padding:13px 16px; cursor:pointer; font-size:12px; font-weight:600; color:var(--text);
  transition:.15s; -webkit-user-select:none; user-select:none; }
.ai-faq-q:hover { color:var(--ai); }
.ai-faq-chevron { font-size:10px; color:var(--text-3); transition:transform .2s; }
.ai-faq-item.open .ai-faq-chevron { transform:rotate(180deg); }
.ai-faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.ai-faq-item.open .ai-faq-a { max-height:200px; }
.ai-faq-a-inner { padding:0 16px 14px; font-size:12px; color:var(--text-2); line-height:1.65; border-top:1px solid var(--border); padding-top:10px; }

/* ── AI Floating Bubble ─────────────────────────────── */
#ai-bubble-btn { position:fixed; bottom:24px; right:24px; z-index:200;
  width:52px; height:52px; border-radius:50%; border:2px solid rgba(240,185,11,.5); cursor:pointer;
  background:#0B0E11;
  box-shadow:0 4px 20px rgba(240,185,11,.3); transition:.2s; display:flex; align-items:center; justify-content:center; }
#ai-bubble-btn:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(240,185,11,.5); }
#ai-bubble-btn svg { width:24px; height:24px; }
#ai-bubble-badge { position:absolute; top:-3px; right:-3px; width:16px; height:16px;
  background:var(--red); border-radius:50%; font-size:9px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center; display:none; }
#ai-bubble-panel { position:fixed; bottom:86px; right:24px; z-index:200; width:320px;
  background:var(--bg-2); border:1px solid rgba(240,185,11,.35); border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.35); overflow:hidden;
  transform:scale(.92) translateY(10px); opacity:0; pointer-events:none;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .18s ease; transform-origin:bottom right; }
#ai-bubble-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }
.abp-header { background:linear-gradient(135deg,rgba(240,185,11,.1),rgba(240,185,11,.03));
  padding:14px 16px; border-bottom:1px solid rgba(240,185,11,.2);
  display:flex; align-items:center; gap:10px; }
.abp-avatar { width:36px; height:36px; background:var(--bg-3); border:1px solid var(--border);
  border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.abp-title { font-weight:700; font-size:13px; color:var(--text); }
.abp-sub { font-size:10px; color:var(--ai); }
.abp-close { margin-left:auto; background:none; border:none; color:var(--text-3);
  cursor:pointer; font-size:16px; padding:2px 6px; border-radius:4px; }
.abp-close:hover { color:var(--text); }
.abp-msgs { height:200px; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.abp-input-row { display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--border); }
.abp-input { flex:1; background:var(--bg-3); border:1px solid var(--border); border-radius:8px;
  padding:7px 11px; font-size:11px; color:var(--text); outline:none; font-family:inherit; }
.abp-input:focus { border-color:var(--ai); }
.abp-send { width:32px; height:32px; border-radius:8px; border:none; cursor:pointer;
  background:var(--ai); color:#0B0E11; font-size:14px; display:flex; align-items:center; justify-content:center; }
.abp-footer { padding:8px 12px; text-align:center; font-size:9px; color:var(--text-3); border-top:1px solid var(--border); }

/* ── Dot grid background ────────────────────────── */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:28px 28px;
}
body.light::before {
  background-image:radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
}

/* ── Privacy mode ──────────────────────────────── */
.privacy-btn {
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text-2); border-radius:6px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; transition:.15s; flex-shrink:0;
}
.privacy-btn:hover { background:var(--bg-3); color:var(--text); }
.privacy-btn.on { border-color:var(--yellow); color:var(--yellow); background:rgba(240,185,11,.08); }
body.privacy .pf-balance,
body.privacy .s-val,
body.privacy .pd-val,
body.privacy .grp-pnl,
body.privacy .pf-pnl-val,
body.privacy .mv,
body.privacy .ptable tbody td:nth-child(2),
body.privacy .ptable tbody td:nth-child(7) { filter:blur(5px); -webkit-user-select:none; user-select:none; pointer-events:none; }

/* ── Stagger animation ──────────────────────────── */
@keyframes cardStagger { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.s-card.stagger-in { animation:cardStagger .35s ease forwards; }

/* ── Pair tbody smooth collapse ─────────────────── */
#pairsTable tbody.pair-tbody { transition:opacity .22s ease; }
#pairsTable tbody.pair-tbody.collapsing { opacity:0; }

/* ── Exchange tint per row ──────────────────────── */
.ptable tbody tr[data-exch="binance"] td { background:rgba(240,185,11,.013); }
.ptable tbody tr[data-exch="kucoin"] td  { background:rgba(9,199,121,.013);  }
.ptable tbody tr[data-exch="okx"] td     { background:rgba(82,140,255,.013); }
.ptable tbody tr[data-exch="mexc"] td    { background:rgba(0,200,200,.013);  }
.ptable tbody tr[data-exch="bybit"] td   { background:rgba(240,100,11,.013); }
.ptable tbody tr[data-exch="kraken"] td  { background:rgba(130,90,255,.013); }
.ptable tbody tr[data-exch="binance"]:hover td { background:rgba(240,185,11,.04); }
.ptable tbody tr[data-exch="kucoin"]:hover td  { background:rgba(9,199,121,.04);  }
.ptable tbody tr[data-exch="okx"]:hover td     { background:rgba(82,140,255,.04); }
.ptable tbody tr[data-exch="mexc"]:hover td    { background:rgba(0,200,200,.04);  }
.ptable tbody tr[data-exch="bybit"]:hover td   { background:rgba(240,100,11,.04); }
.ptable tbody tr[data-exch="kraken"]:hover td  { background:rgba(130,90,255,.04); }

/* ── Active position pulsing dot ────────────────── */
@keyframes posPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(14,203,129,.5)} 50%{opacity:.6;box-shadow:0 0 0 4px rgba(14,203,129,0)} }
.active-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); animation:posPulse 1.8s ease-in-out infinite; margin-right:5px; vertical-align:middle; flex-shrink:0; }

/* ── BAG blink when deep negative ───────────────── */
@keyframes bagBlink { 0%,100%{opacity:1} 50%{opacity:.35} }
.pbadge.bag.deep-neg { animation:bagBlink 1.4s ease-in-out infinite; color:#F6465D; background:rgba(246,70,93,.1); border-color:rgba(246,70,93,.35); }

/* ── Micro-bounce on button press ───────────────── */
.btn-icon:active, .btn:active, .btn-icon.bounce, .btn.bounce { transform:scale(.95); }

/* ── Scroll reveal ──────────────────────────────── */
@keyframes revealUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.reveal-el { opacity:0; }
.reveal-el.revealed { animation:revealUp .38s ease forwards; }

/* ── Live-dot breathe (enhanced) ───────────────── */
@keyframes breathe {
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(14,203,129,.5); }
  50%{ opacity:.6; transform:scale(1.15); box-shadow:0 0 0 5px rgba(14,203,129,0); }
}

/* ── Mini exchange icon in pair row ─────────────── */
.row-exch-icon { display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:middle; object-fit:cover; margin-left:5px; opacity:.55; }
.row-exch-icon-txt { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:3px; vertical-align:middle; background:var(--bg-3); font-size:8px; font-weight:800; margin-left:5px; opacity:.55; }