* { box-sizing: border-box }
:root {
  --bg: #f7f7f4;
  --card: #ffffff;
  --sage: #dce1dc;
  --sage-2: #eef1ed;
  --line: #e7e9e6;
  --line-2: #f0f1ee;
  --text: #161616;
  --text-2: #222222;
  --muted: #8a8f8a;
  --muted-2: #b1b5b1;
  --orange: #FF6633;
  --orange-2: #ff8a55;
  --green: #2f8f5a;
  --red: #d65c5c;
  --chip-low-bg: #e3f0e6; --chip-low-text: #226b3c;
  --chip-med-bg: #f6ebd2; --chip-med-text: #8a6512;
  --chip-high-bg: #f6dada; --chip-high-text: #963535;
  --chip-uns-bg:  #e8e8e8; --chip-uns-text: #5a5a5a;
  --shadow-card: 0 6px 20px rgba(20,30,20,.06), 0 1px 2px rgba(20,30,20,.04);
  --header-bg: #ffffff;
  --row-hover: #fafbf9;
  --grid-line: #d4d8d4;
  --area-green: rgba(47,143,90,.14);
  --area-red:   rgba(214,92,92,.16);
  --spark-no-data: #b1b5b1;
  --input-bg: #ffffff;
}

html[data-theme="dark"] {
  --bg: #0d1014;
  --card: #181c22;
  --sage: #2a3433;            /* dark sage for table header */
  --sage-2: #1f262a;
  --line: #2a313a;
  --line-2: #232932;
  --text: #ecedef;
  --text-2: #d8dade;
  --muted: #8a93a0;
  --muted-2: #5b6370;
  --orange: #ef7c46;          /* brand stays */
  --orange-2: #ff8a55;
  --green: #4ed98c;
  --red:   #ef7878;
  --chip-low-bg:  #1d3a28; --chip-low-text:  #8be1a8;
  --chip-med-bg:  #3a2e10; --chip-med-text:  #f3d27a;
  --chip-high-bg: #3a1c1c; --chip-high-text: #f29f9f;
  --chip-uns-bg:  #232932; --chip-uns-text:  #8a93a0;
  --shadow-card: 0 8px 24px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --header-bg: #14171c;
  --row-hover: #1d2127;
  --grid-line: #2c333d;
  --area-green: rgba(78,217,140,.10);
  --area-red:   rgba(239,120,120,.10);
  --spark-no-data: #5b6370;
  --input-bg: #14171c;
}
html[data-theme="dark"] .row.head .c-num.sortable.active-asc::after,
html[data-theme="dark"] .row.head .c-num.sortable.active-desc::after { color: var(--orange); }

html, body { margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--text); font:14px/1.45 'Mont', 'Manrope', Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

header {
  display:flex; align-items:center; gap:14px; padding:14px 28px; background:var(--header-bg); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; background:transparent; cursor:pointer;
  border:1.5px solid var(--line); border-radius:8px; color:var(--text);
  font-family:inherit; font-size:16px; line-height:1; transition:border-color .15s, background .15s;
  margin-left:auto;
}
.theme-toggle:hover { border-color:var(--orange); }
.theme-toggle .theme-icon { display:inline-block; transform:translateY(-1px); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; font-family:'Mont','Manrope',sans-serif; }
.logo-tile {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  border-radius:10px; overflow:hidden;
  box-shadow: 0 2px 6px rgba(239,124,70,.25);
}
.logo-tile img { width:100%; height:100%; display:block; object-fit:cover; }
.brand-text { display:flex; flex-direction:column; gap:3px; }
/* Brand text — figma text-16/text-17 (Mont-Bold 800 / Mont-Regular 600), exact metrics */
.brand-name {
  display:flex; flex-direction:column;
  font-weight:800; font-size:19.13px; line-height:19.13px;
  letter-spacing:0; color:var(--text); text-transform:uppercase;
}
.brand-name span { display:block; white-space:nowrap; }
.brand-sub {
  font-weight:600; font-size:12.46px; line-height:13.7px;
  letter-spacing:0.02em; color:var(--muted); white-space:nowrap;
}
header input[type=search] {
  flex:1; max-width:520px; padding:10px 14px; background:var(--input-bg); color:var(--text);
  border:1.5px solid var(--line); border-radius:8px; font-size:14px; outline:none;
  transition:border-color .15s;
}
header input[type=search]::placeholder { color:var(--muted-2); }
header input[type=search]:focus { border-color:var(--orange); }
.status { margin-left:auto; font-size:13px; color:var(--muted); padding:6px 10px; border-radius:14px; background:var(--sage-2); }
.status.warn { color:#8a6512; background:#f6ebd2; }
.status.bad  { color:#963535; background:#f6dada; }

main { display:grid; grid-template-columns: 340px 1fr; grid-template-rows:auto 1fr; gap:18px 24px; padding:24px 28px 60px; max-width:1640px; margin:0 auto; }
#toolbar { grid-column:1 / -1; }

aside#filters {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 18px 12px; height:fit-content; position:sticky; top:84px;
  box-shadow: var(--shadow-card);
}
.fgroup { margin-bottom:16px; }
.ftitle { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:8px; }
.row2 { display:flex; gap:8px; }
input[type=number], input[type=text] {
  width:100%; padding:8px 10px; background:var(--input-bg); color:var(--text);
  border:1.5px solid var(--line); border-radius:6px; outline:none; font-size:13px;
  font-family:inherit;
}
input[type=number]:focus, input[type=text]:focus { border-color:var(--orange); }

/* slider filters */
.ftitle-row { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ftitle-row .ftitle { margin-bottom:0; }
.fval {
  font-size:12px; font-weight:600; color:var(--orange); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.fval.dim { color:var(--muted); font-weight:500; }

.slider-wrap {
  position:relative;
  padding:14px 0 0;
}
input[type=range].range {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; padding:0; margin:0; display:block;
  background:linear-gradient(to right, var(--orange) var(--fill,0%), var(--line) var(--fill,0%));
  border-radius:2px; outline:none; cursor:pointer;
}
input[type=range].range::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; background:var(--orange); border:2px solid var(--card);
  border-radius:50%; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:transform .12s;
}
input[type=range].range::-webkit-slider-thumb:hover,
.slider-wrap.active input[type=range].range::-webkit-slider-thumb { transform:scale(1.18); }
input[type=range].range::-moz-range-thumb {
  width:16px; height:16px; background:var(--orange); border:2px solid var(--card);
  border-radius:50%; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3);
}
input[type=range].range::-moz-range-track { background:var(--line); height:4px; border-radius:2px; }
input[type=range].range::-moz-range-progress { background:var(--orange); height:4px; border-radius:2px; }

.bubble {
  position:absolute; bottom:14px;
  background:var(--orange); color:#fff;
  padding:3px 8px; border-radius:5px;
  font-size:11px; font-weight:600; line-height:1.2;
  white-space:nowrap; pointer-events:none;
  transform:translateX(-50%);
  left:calc(var(--p, 0) * 1%);
  opacity:0; transition:opacity .15s;
  font-variant-numeric:tabular-nums;
  z-index:2;
}
.bubble::after {
  content:''; position:absolute; top:100%; left:50%; margin-left:-4px;
  border:4px solid transparent; border-top-color:var(--orange);
}
.slider-wrap.active .bubble { opacity:1; }

.scale {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  margin-top:8px;
  font-size:10px; color:var(--muted);
  font-variant-numeric:tabular-nums; user-select:none;
  pointer-events:none;
}
.scale span:nth-child(1) { text-align:left; }
.scale span:nth-child(2) { text-align:center; }
.scale span:nth-child(3) { text-align:right; }

.dual-range { display:flex; flex-direction:column; gap:14px; }
.dual-range .slider-wrap { padding-top:14px; }

/* Dual-handle slider on a single track */
.dual-track {
  position:relative;
  height:26px;
  padding-top:14px;
}
.dual-track::before {
  content:''; position:absolute; left:0; right:0; top:calc(14px + 11px);
  height:4px; background:var(--line); border-radius:2px;
  transform:translateY(-50%);
}
.dual-track::after {
  content:''; position:absolute; top:calc(14px + 11px);
  left:var(--lo, 0%); right:calc(100% - var(--hi, 100%));
  height:4px; background:var(--orange); border-radius:2px;
  transform:translateY(-50%); pointer-events:none;
}
.range-dual {
  position:absolute; left:0; right:0; top:14px;
  width:100%; height:18px; margin:0; padding:0;
  background:transparent;
  -webkit-appearance:none; appearance:none;
  pointer-events:none;
  outline:none;
}
.range-dual::-webkit-slider-runnable-track { background:transparent; height:4px; }
.range-dual::-moz-range-track { background:transparent; height:4px; }
.range-dual::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:18px; height:18px; background:var(--orange); border:2px solid var(--card);
  border-radius:50%; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3);
  transition:transform .12s; margin-top:-7px; position:relative; z-index:2;
}
.range-dual:active::-webkit-slider-thumb,
.range-dual:focus::-webkit-slider-thumb { transform:scale(1.18); z-index:3; }
.range-dual::-moz-range-thumb {
  pointer-events:auto;
  width:16px; height:16px; background:var(--orange); border:2px solid var(--card);
  border-radius:50%; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.dual-track .bubble {
  bottom:24px;
  opacity:0;
}
.dual-track.active-lo #ret-min-bubble,
.dual-track.active-hi #ret-max-bubble,
.dual-track.active-lo #balance-min-bubble,
.dual-track.active-hi #balance-max-bubble { opacity:1; }
.cb { display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; font-size:13px; color:var(--text-2); }
.cb input { accent-color:var(--orange); }
.btn-flat {
  display:inline-block; padding:8px 12px; background:var(--input-bg); color:var(--text);
  border:1.5px solid var(--line); border-radius:6px; cursor:pointer; font-size:13px;
  font-family:inherit; transition:border-color .15s, color .15s;
}
.btn-flat:hover { border-color:var(--orange); color:var(--orange); }
.btn-orange {
  background:var(--orange); color:#fff; border:1.5px solid var(--orange); padding:8px 14px;
  border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; font-family:inherit;
}
.btn-orange:hover { background:var(--orange-2); border-color:var(--orange-2); }

.btn-reset {
  padding:5px 10px; font-size:11px; font-weight:600; font-family:inherit;
  background:transparent; color:var(--orange);
  border:1.5px solid var(--orange); border-radius:14px;
  cursor:pointer; letter-spacing:.2px; text-transform:lowercase;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.btn-reset:hover { background:var(--orange); color:#fff; }
html[data-theme="dark"] .btn-reset { color:#ffb38a; border-color:#ffb38a; }
html[data-theme="dark"] .btn-reset:hover { background:#ffb38a; color:#1a1d22; }

.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  padding:5px 10px; background:var(--input-bg); color:var(--text-2); border:1.5px solid var(--line);
  border-radius:14px; cursor:pointer; font-size:12px; font-family:inherit;
}
.chip:hover { border-color:var(--orange); }
.chip.on { background:var(--orange); color:#fff; border-color:var(--orange); }

section#list-wrap { min-width:0; }
#toolbar {
  display:flex; gap:14px; align-items:center; padding:0 4px;
}
#counts { color:var(--muted); font-size:13px; }
.sort { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.sort select {
  padding:7px 10px; background:var(--input-bg); color:var(--text); border:1.5px solid var(--line);
  border-radius:6px; font-family:inherit; font-size:13px; cursor:pointer;
}

.table {
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow-card);
}

.row {
  display:grid;
  grid-template-columns:
    minmax(180px,1.6fr)  /* name */
    minmax(120px,1.1fr)  /* sparkline */
    100px                /* return */
    80px                 /* copiers */
    120px                /* AUM */
    100px                /* maxDD */
    70px                 /* age */
    100px                /* balance */
    80px                 /* fee */
    104px;               /* signal link */
  align-items:center; padding:14px 20px; border-bottom:1px solid var(--line-2); gap:12px;
  transition:background .12s;
}
.row:not(.head) { cursor:pointer; }
.row:last-child { border-bottom:none; }
.row.head {
  background:var(--sage); color:var(--text); font-size:13px; font-weight:600;
  letter-spacing:.1px; padding-top:14px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.row:not(.head):hover { background:var(--row-hover); }
.row .c-num { text-align:right; font-variant-numeric:tabular-nums; }
.row .c-num.head-aligned { text-align:right; }
.row .c-spark svg { display:block; }

.row.head .c-num { display:flex; align-items:center; justify-content:flex-end; gap:4px; cursor:pointer; user-select:none; }
.row.head .c-num.sortable::after { content:'⇅'; font-size:10px; color:var(--muted-2); }
.row.head .c-num.sortable.active-asc::after { content:'↑'; color:var(--orange); }
.row.head .c-num.sortable.active-desc::after { content:'↓'; color:var(--orange); }

.name { display:flex; align-items:center; gap:10px; min-width:0; }
.avatar {
  position:relative;
  width:32px; height:32px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#ef7c46,#ff6633); display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; font-weight:700; overflow:hidden; letter-spacing:.5px;
}
.avatar .avatar-fallback { line-height:1; }
.avatar .avatar-img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.nm { overflow:hidden; }
.nm .title { font-weight:600; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nm .title a { color:inherit; text-decoration:none; }
.nm .title a:hover { color:var(--orange); }
.nm .by { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.signal-link {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 12px; border:1.5px solid var(--orange); border-radius:8px;
  background:transparent; color:var(--orange); text-decoration:none;
  font-family:inherit; font-size:12px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background .15s, color .15s;
}
.signal-link:hover { background:var(--orange); color:#fff; }
.signal-link::after { content:'↗'; font-size:11px; }

.pill { display:inline-block; padding:3px 9px; border-radius:12px; font-size:11px; line-height:1.3; font-weight:600; }
.pill.Low { background:var(--chip-low-bg); color:var(--chip-low-text); }
.pill.Medium { background:var(--chip-med-bg); color:var(--chip-med-text); }
.pill.High { background:var(--chip-high-bg); color:var(--chip-high-text); }
.pill.Unsuitable { background:var(--chip-uns-bg); color:var(--chip-uns-text); }

.free-cell { color:var(--chip-low-text); font-weight:600; }
.free-badge {
  display:inline-block; vertical-align:middle;
  margin-left:6px; padding:1px 6px;
  font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--chip-low-text); background:var(--chip-low-bg);
  border-radius:6px; line-height:1.4;
}

.green { color:var(--green); }
.red { color:var(--red); }
.dim { color:var(--muted); }

.details {
  display:none; padding:6px 20px 20px;
  border-bottom:1px solid var(--line-2); background:var(--sage-2);
}
.row.open + .details { display:grid; }
.details {
  grid-template-columns: repeat(6, 1fr);
  gap:14px;
}
.details .field { padding:10px 0; }
.details .field.markets { grid-column: 1 / -1; padding-top:14px; border-top:1px dashed var(--line); margin-top:4px; }
.details .label { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:4px; font-weight:600; }
.details .value { font-size:15px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.markets-list { display:flex; flex-wrap:wrap; gap:6px; font-size:12px; font-weight:500; }
.market-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:4px 8px; color:var(--text);
}
.market-count { color:var(--muted); font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; }

/* Buttons row: lives next to Currency in the details grid (default desktop = repeat(6,1fr) → span 2) */
.details .trades-buttons {
  grid-column: span 2;
  display:flex; gap:8px; flex-wrap:wrap;
  align-self:end; padding:10px 0;
}
.details .trades-buttons .trades-toggle { flex:1 1 auto; justify-content:center; }

/* Expanded list goes full-width below Markets */
.details .trades-list-block {
  grid-column:1 / -1;
  padding-top:14px; margin-top:4px;
  border-top:1px dashed var(--line);
}
.trades-list-title {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); margin-bottom:8px;
}

/* Toggle button: Open Trades / Trade History — orange-tinted glass pill */
.trades-toggle {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  background:rgba(255,102,51,.10);
  border:1.5px solid rgba(255,102,51,.32);
  border-radius:8px;
  color:var(--orange);
  font-family:inherit; font-size:13px; font-weight:700;
  letter-spacing:.2px;
  cursor:pointer; user-select:none;
  transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.trades-toggle:hover {
  background:rgba(255,102,51,.18);
  border-color:rgba(255,102,51,.55);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(255,102,51,.20);
}
.trades-toggle:active { transform:translateY(0); }
.trades-toggle.open {
  background:rgba(255,102,51,.18);
  border-color:rgba(255,102,51,.45);
}
.trades-chev { font-size:13px; line-height:1; transition:transform .2s; }
.trades-count {
  margin-left:4px; padding:1px 8px; border-radius:10px;
  background:rgba(255,255,255,.10); color:var(--text);
  font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;
}
html[data-theme="light"] .trades-count { background:rgba(0,0,0,.07); }

.trades-list {
  display:flex; flex-direction:column; gap:6px; margin-top:10px;
  max-height:420px; overflow-y:auto; padding-right:6px;
}
/* Subtle scrollbar on the trades list */
.trades-list::-webkit-scrollbar { width:8px; }
.trades-list::-webkit-scrollbar-track { background:transparent; }
.trades-list::-webkit-scrollbar-thumb { background:var(--line); border-radius:4px; }
.trades-list::-webkit-scrollbar-thumb:hover { background:var(--muted-2); }
.trade {
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap:14px; row-gap:3px;
  padding:8px 12px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px; line-height:1.3;
}
html[data-theme="light"] .trade { background:rgba(0,0,0,.02); }
.trade-main {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  grid-row:1; grid-column:1;
}
.trade-dir {
  font-weight:700; font-size:10.5px; padding:2px 7px; border-radius:4px;
  letter-spacing:.5px; line-height:1.4;
}
.trade-dir.dir-buy  { color:#4a90e2; background:rgba(74,144,226,.14); }
.trade-dir.dir-sell { color:var(--red); background:rgba(214,92,92,.14); }
.trade-qty   { font-weight:600; font-variant-numeric:tabular-nums; }
.trade-inst  { font-weight:600; }
.trade-prices{ color:var(--muted); font-variant-numeric:tabular-nums; }
.trade-meta  {
  grid-row:2; grid-column:1;
  display:flex; gap:10px; flex-wrap:wrap;
  color:var(--muted); font-size:10.5px; font-variant-numeric:tabular-nums;
}
.trade-pnl   {
  grid-row:1 / span 2; grid-column:2;
  align-self:center; font-weight:700; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.trades-more {
  margin-top:4px; padding:7px 12px; align-self:flex-start;
  background:transparent; border:1.5px dashed var(--line); border-radius:6px;
  color:var(--orange); cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600;
}
.trades-more:hover:not(:disabled) { border-color:var(--orange); border-style:solid; }
.trades-more:disabled { cursor:wait; opacity:.7; }
.trades-empty { padding:8px 0; font-size:12px; }

#loadmore { padding:22px; text-align:center; color:var(--muted); font-size:13px; }

.pager {
  display:flex; gap:6px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin:18px 0 60px; font-size:13px;
}
.pager button, .pager .page {
  min-width:36px; height:34px; padding:0 10px;
  background:var(--input-bg); color:var(--text); border:1.5px solid var(--line); border-radius:6px;
  cursor:pointer; font-family:inherit; font-size:13px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.pager button:hover:not(:disabled), .pager .page:hover:not(.cur) { border-color:var(--orange); color:var(--orange); }
.pager .page.cur { background:var(--orange); color:#fff; border-color:var(--orange); cursor:default; }
.pager button:disabled { opacity:.4; cursor:not-allowed; }
.pager .gap { color:var(--muted); padding:0 4px; }
.pager .info { color:var(--muted); margin-left:10px; }

.progress-bar {
  height:3px; background:var(--line-2); border-radius:2px; overflow:hidden;
  margin:0 4px 12px; position:relative;
}
.progress-bar > span { display:block; height:100%; background:var(--orange); transition:width .3s; }
.spinner {
  display:inline-block; width:13px; height:13px; border-radius:50%;
  border:2px solid var(--muted-2); border-top-color:var(--orange);
  animation:spin .8s linear infinite; vertical-align:middle; margin-right:8px;
}
@keyframes spin { to { transform:rotate(360deg); } }

.banner {
  margin:18px; padding:14px 16px; border-radius:8px; background:#fdf3e6; color:#7a4a16;
  border:1px solid #f0d4ad; font-size:13px;
}
.banner code { background:var(--input-bg); padding:2px 6px; border-radius:3px; font-size:12px; }

/* hide the Filters drawer toggle by default; only shown on mobile */
.filters-toggle { display:none; }

/* ---- compact desktop: fits common laptops 1366/1440/1536/1600 with sidebar still visible ---- */
@media (max-width:1700px) {
  main { grid-template-columns: 280px 1fr; gap:14px 18px; padding:20px 20px 50px; }
  aside#filters { padding:14px 14px 8px; }
  .row {
    grid-template-columns:
      minmax(140px,1.4fr)  /* name */
      minmax(95px,1fr)     /* sparkline */
      78px                 /* return */
      62px                 /* copiers */
      97px                 /* AUM */
      82px                 /* maxDD */
      50px                 /* age */
      85px                 /* balance */
      62px                 /* fee */
      105px;               /* link */
    padding:12px 14px; gap:10px;
  }
  .nm .title { font-size:13px; }
  .nm .by { font-size:11px; }
  .row.head { font-size:12px; }
  .signal-link { padding:6px 9px; font-size:11px; }
}

/* ---- below ~1340: sidebar stacks above the table (small laptops, narrow windows) ---- */
@media (max-width:1340px) {
  main { grid-template-columns: 1fr; padding:14px 14px 50px; gap:12px; }
  aside#filters { position:static; padding:14px; max-width:760px; }
  .row {
    grid-template-columns:
      minmax(140px,1.3fr)  /* name */
      minmax(85px,0.9fr)   /* sparkline */
      70px 55px 90px 75px 50px 80px 55px 92px;
    padding:10px 12px; gap:8px;
  }
  .details { grid-template-columns: repeat(3, 1fr); padding:6px 12px 16px; }
}

/* ---- mobile: iPhone 14/15/16 (390-430px viewport) ---- */
@media (max-width:720px) {
  header { padding:10px 14px; gap:10px; }
  .logo-tile { width:38px; height:38px; border-radius:8px; }
  .brand-name { font-size:14px; line-height:14px; }
  .brand-sub  { font-size:9.5px; line-height:11px; }
  header input[type=search] { padding:8px 10px; font-size:13px; max-width:none; min-width:0; }
  .theme-toggle { width:34px; height:34px; font-size:14px; }

  main { padding:12px; gap:12px; }

  /* Filters become a togglable drawer; hidden by default */
  .filters-toggle { display:inline-flex; align-items:center; }
  aside#filters { display:none; padding:14px; }
  aside#filters.open { display:block; }

  /* Toolbar */
  #toolbar { flex-wrap:wrap; gap:8px; padding:0 4px 10px; }
  #counts { font-size:12px; flex-basis:100%; order:3; }
  .sort { margin-left:auto; }
  .sort label { display:none; }
  .sort select { font-size:12px; padding:6px 8px; }

  /* Hide the table head row — column titles move into the rows themselves */
  .row.head { display:none; }

  /* Each row becomes a card */
  .table { border-radius:10px; }
  .row {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px 14px;
    padding:14px 14px 12px;
    align-items:start;
  }

  /* Name spans full width */
  .row .name { grid-column:1 / -1; align-items:center; }
  .avatar { width:36px; height:36px; font-size:13px; }
  .nm .title { font-size:15px; }
  .nm .by { font-size:12px; }

  /* Sparkline full width — stretches to card edges via preserveAspectRatio="none" on the SVG */
  .row .c-spark { grid-column:1 / -1; }
  .row .c-spark svg { width:100%; height:72px; display:block; }

  /* Numeric stats: grid 2-col with mini labels */
  .row > .c-num {
    text-align:left;
    background:var(--sage-2);
    border-radius:8px;
    padding:8px 10px;
    line-height:1.2;
    font-size:14px;
    font-weight:600;
  }
  .row > .c-num::before {
    content: attr(data-label);
    display:block;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    margin-bottom:3px;
  }

  /* Signal-link button — full width at the bottom of the card */
  .row .c-link { grid-column:1 / -1; }
  .signal-link { width:100%; padding:10px 12px; font-size:13px; }

  /* Expanded details — stack into single column */
  .details {
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    padding:14px 14px 18px;
  }
  .details .field.markets { grid-column:1 / -1; }
  .details .value { font-size:14px; }
  /* Trades buttons go to their own full-width row on mobile */
  .details .trades-buttons { grid-column:1 / -1; padding:6px 0 0; }
  .details .trades-buttons .trades-toggle { padding:10px 12px; font-size:12.5px; }

  /* Visually pair the expanded row with its details so it's obvious which card is open.
     - The open row gets a subtle highlight (lifts off the rest of the list)
     - The details panel sits noticeably tinted right below it
     - Round only the outer corners so they read as one connected block
     - Subtle drop shadow groups them and separates from the next card */
  .row.open {
    background:rgba(255,255,255,.05);
    border-radius:10px 10px 0 0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .row.open + .details {
    background:rgba(255,255,255,.08);
    border-radius:0 0 10px 10px;
    margin:0 0 10px;
    box-shadow:0 6px 16px rgba(0,0,0,.22);
  }
  /* Stat cards inside the open row pop a touch more so they don't blend with the new bg */
  .row.open > .c-num { background:rgba(255,255,255,.05); }

  html[data-theme="light"] .row.open {
    background:rgba(0,0,0,.03);
    border-bottom-color:rgba(0,0,0,.06);
  }
  html[data-theme="light"] .row.open + .details {
    background:rgba(0,0,0,.05);
    box-shadow:0 6px 16px rgba(20,30,20,.10);
  }
  html[data-theme="light"] .row.open > .c-num { background:rgba(0,0,0,.04); }

  /* Pager: smaller buttons, hide goto on tiny screens */
  .pager { gap:4px; margin:14px 0 40px; }
  .pager button, .pager .page { min-width:32px; height:32px; padding:0 8px; font-size:12px; }
  .pager .info { display:none; }

  /* Progress / loadmore */
  #loadmore { padding:14px 6px; font-size:12px; }
}

/* =============================================================
   Liquid glass + modern interactive
   - Atmospheric chrome-blob decorations (from the Figma design)
   - Frosted-glass panels (header, sidebar, table)
   - Soft hover lifts, button micro-animations, pulsing FREE badge
   ============================================================= */

body { position:relative; overflow-x:hidden; }
body::before, body::after {
  content:''; position:fixed; pointer-events:none; z-index:0;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  filter:saturate(120%);
}
body::before {
  /* orange/chrome wave — top right */
  background-image:url('/bg-blob.png');
  width:920px; height:480px; top:-140px; right:-160px;
  transform:rotate(-12deg); opacity:.42;
}
body::after {
  /* silver chrome — bottom left */
  background-image:url('/bg-blob2.png');
  width:780px; height:580px; bottom:-180px; left:-140px;
  transform:rotate(18deg); opacity:.30;
}
html[data-theme="light"] body::before { opacity:.18; }
html[data-theme="light"] body::after  { opacity:.12; }

/* keep app content above the decorations */
header, main, .pager { position:relative; z-index:1; }

/* Frosted-glass header */
header {
  background:rgba(20,23,28,.62);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
          backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
html[data-theme="light"] header {
  background:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Frosted-glass cards (filters sidebar + table) */
aside#filters, .table {
  background:rgba(24,28,34,.55);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="light"] aside#filters,
html[data-theme="light"] .table {
  background:rgba(255,255,255,.62);
  border-color:rgba(0,0,0,.06);
  box-shadow:0 8px 32px rgba(20,30,20,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.row.head {
  background:rgba(42,52,51,.50);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
html[data-theme="light"] .row.head {
  background:rgba(220,225,220,.55);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Smoother global easing for interactive elements */
.row:not(.head),
.signal-link, .btn-flat, .btn-orange, .btn-reset, .chip,
.theme-toggle, .logo-tile, .pager button, .pager .page {
  transition:
    transform   .25s cubic-bezier(.2,.8,.2,1),
    background-color .2s ease,
    border-color     .2s ease,
    color            .2s ease,
    box-shadow  .25s cubic-bezier(.2,.8,.2,1);
}

/* Row hover: subtle slide + orange edge cue */
.row:not(.head):hover {
  transform:translateX(2px);
  background:rgba(255,255,255,.04);
  box-shadow:inset 3px 0 0 0 var(--orange);
}
html[data-theme="light"] .row:not(.head):hover {
  background:rgba(0,0,0,.025);
}
.row .c-spark svg { transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.row:not(.head):hover .c-spark svg { transform:scale(1.04); }

/* Buttons — liquid feel */
.signal-link:hover {
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 6px 20px rgba(239,124,70,.35);
}
.signal-link:active { transform:translateY(0) scale(.98); }

.btn-flat:hover, .pager button:hover:not(:disabled), .pager .page:hover:not(.cur) {
  transform:translateY(-1px);
}
.btn-flat:active, .pager button:active:not(:disabled), .pager .page:active:not(.cur) {
  transform:translateY(0);
}

.chip:hover { transform:translateY(-1px); }
.chip.on    { box-shadow:0 4px 14px rgba(239,124,70,.40); }

.btn-reset:hover { transform:scale(1.03); }
.theme-toggle:hover { transform:rotate(20deg); }

/* Brand logo: subtle bounce on hover */
.logo-tile { transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.brand:hover .logo-tile {
  transform:scale(1.06) rotate(-3deg);
  box-shadow:0 4px 16px rgba(239,124,70,.40);
}

/* Search input: orange focus ring */
header input[type=search] { transition:border-color .2s, box-shadow .25s; }
header input[type=search]:focus { box-shadow:0 0 0 3px rgba(239,124,70,.18); }

/* Slider thumbs: soft orange halo when active */
input[type=range].range::-webkit-slider-thumb,
.range-dual::-webkit-slider-thumb {
  transition:transform .15s, box-shadow .25s;
}
.slider-wrap.active input[type=range].range::-webkit-slider-thumb,
.range-dual:active::-webkit-slider-thumb,
.range-dual:focus::-webkit-slider-thumb {
  box-shadow:0 0 0 6px rgba(239,124,70,.18), 0 1px 4px rgba(0,0,0,.3);
}

/* FREE badge: soft pulse */
@keyframes free-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(78,217,140,.35); }
  50%      { box-shadow:0 0 0 5px rgba(78,217,140,0);  }
}
.free-badge { animation:free-pulse 2.4s ease-in-out infinite; }

/* Sort indicator — smoother color shift */
.row.head .c-num.sortable::after { transition:color .2s, transform .2s; }

/* =====  iOS-flavor liquid glass nuance  =====
   - stronger top rim / bottom rim on glass panels (light catches the edge)
   - subtle frost noise overlay on the cards (matte glass texture)
   - specular shimmer sweep on the primary CTA on hover
   - glass-bead slider thumbs (gradient + bright top highlight)
*/

/* Reinforced rim lighting on glass panels (top catches light, bottom darkens) */
header {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
html[data-theme="light"] header {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.04);
}
aside#filters, .table {
  box-shadow:
    0 8px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
html[data-theme="light"] aside#filters,
html[data-theme="light"] .table {
  box-shadow:
    0 8px 32px rgba(20,30,20,.08),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.04);
}

/* Subtle frost-noise texture overlay on the glass panels */
.table { position:relative; }   /* aside is already position:sticky — leave it */
aside#filters::before, .table::before {
  content:''; position:absolute; inset:0;
  pointer-events:none; border-radius:inherit;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* table head sits inside the table, suppress noise duplication */
.table > #head { position:relative; z-index:1; }
.table > #list { position:relative; z-index:1; }

/* Specular shimmer sweep on the primary CTA */
.signal-link { position:relative; overflow:hidden; }
.signal-link::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,.28) 50%,
    transparent 70%);
  transform:translateX(-130%);
  pointer-events:none;
  transition:transform 0s;
  border-radius:inherit;
}
.signal-link:hover::after {
  transform:translateX(130%);
  transition:transform .85s cubic-bezier(.25,.1,.25,1);
}

/* Glass-bead slider thumbs: gradient body + bright top highlight */
input[type=range].range::-webkit-slider-thumb,
.range-dual::-webkit-slider-thumb {
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 60%, #c14a23 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 4px rgba(0,0,0,.35);
}
input[type=range].range::-moz-range-thumb,
.range-dual::-moz-range-thumb {
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 60%, #c14a23 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 1px 4px rgba(0,0,0,.35);
}

/* Mobile: lighter blur for performance, keep effects */
@media (max-width:720px) {
  header, aside#filters, .table {
    -webkit-backdrop-filter:blur(10px) saturate(150%);
            backdrop-filter:blur(10px) saturate(150%);
  }
  body::before { width:560px; height:300px; opacity:.32; }
  body::after  { width:480px; height:360px; opacity:.22; }
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}