/* Traders, eye-catching (owner, 29 Oct 2026: "De trader pagina moet eigen
   eye catching zijn voor users"). Presentation only, on top of
   external-copy.css and the page's own styles: a hero with the best reported
   result, the ranked five with #1 in the spotlight and medals for #2/#3, and
   compact community cards. Light mode is derived from this file. */

/* ── hero ─────────────────────────────────────────────────────────────── */
#app .tr-hero{position:relative;overflow:hidden;isolation:isolate;margin:2px 0 16px;padding:18px 16px 16px;border:1px solid rgba(247,185,85,.30);border-radius:20px;
  background:radial-gradient(120% 95% at 100% 0%,rgba(247,185,85,.22),rgba(247,185,85,0) 58%),radial-gradient(90% 80% at 0% 100%,rgba(58,210,155,.16),rgba(58,210,155,0) 62%),linear-gradient(160deg,#131d28,#0b1118 72%);
  box-shadow:0 18px 40px -24px rgba(247,185,85,.45)}
#app .tr-hero-art{position:absolute;z-index:-1;right:-4px;bottom:0;width:72%;height:62%;color:#f7b955;opacity:.55;pointer-events:none}
#app .tr-hero .top-five-heading{margin:0 0 6px}
#app .tr-hero .copy-eyebrow{display:inline-flex!important;align-items:center;gap:6px;margin:0 0 9px;padding:4px 9px;border:1px solid rgba(247,185,85,.35);border-radius:999px;background:rgba(247,185,85,.10);color:#f7b955;font-size:9.5px;letter-spacing:1.3px}
#app .tr-hero .copy-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ad29b;box-shadow:0 0 0 3px rgba(58,210,155,.20)}
/* A solid colour, not gradient-clipped text: the derived light theme keeps
   backgrounds but not background-clip, which turned the title into a bar. */
#app .tr-hero .top-five-heading h2{font-size:30px!important;line-height:1.05;letter-spacing:-.9px;color:#fff3dc;text-shadow:0 2px 18px rgba(247,185,85,.35)}
#app .tr-hero .copy-intro{margin:2px 0 14px;max-width:420px;color:#c4ccd6;font-size:13.5px;line-height:1.45}
#app .tr-hero .copy-refresh{background:rgba(13,20,28,.72);border-color:rgba(255,255,255,.10);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#app .tr-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
#app .tr-hero-stats[hidden]{display:none!important}
#app .tr-hero-stats>div{min-width:0;padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(8,13,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#app .tr-hero-stats b{display:block;color:#eef1f5;font-size:17px;font-weight:800;line-height:1.15;letter-spacing:-.3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .tr-hero-stats>div:first-child b{color:#3ad29b}
#app .tr-hero-stats small{display:block;margin-top:3px;color:#8d98a6;font-size:10px;line-height:1.3}
#app .tr-hero .copy-steps{display:flex!important;flex-wrap:nowrap;gap:5px;margin:0;padding:0;border:0;font-size:10.5px;color:#aeb8c4}
#app .tr-hero .copy-steps[hidden]{display:none!important}
#app .tr-hero .copy-steps span{flex:1 1 auto;min-width:0;justify-content:center;gap:5px;padding:7px 3px;border-radius:10px;background:rgba(255,255,255,.04);white-space:nowrap}
#app .tr-hero .copy-steps b{width:19px;height:19px;font-size:10px;background:#f7b955;color:#1a1206;border:0}
#app .tr-hero.is-active{padding-bottom:14px}
#app .tr-hero.is-active .tr-hero-stats{margin:0}

/* ── ranked traders ───────────────────────────────────────────────────── */
#app .copy-list-heading h3{font-size:17px;letter-spacing:-.3px}
#app .top-five-list{gap:8px}
#app .top-five-row{position:relative;border-color:#223040;background:linear-gradient(180deg,#111a24,#0e151d)}
#app .top-five-left{gap:10px}
#app .tr-rank-num{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:7px;background:#17212c;color:#8d98a6;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
#app .tr-rank-1 .tr-rank-num{background:linear-gradient(135deg,#ffd98a,#f7b955);color:#241703}
#app .tr-rank-2 .tr-rank-num{background:linear-gradient(135deg,#eef1f5,#aab4c0);color:#1a2028}
#app .tr-rank-3 .tr-rank-num{background:linear-gradient(135deg,#f0b27a,#c47a3c);color:#241304}
#app .tr-rank-1 .top-five-avatar{box-shadow:0 0 0 2px #f7b955,0 0 18px rgba(247,185,85,.45)}
#app .tr-rank-2 .top-five-avatar{box-shadow:0 0 0 2px #c3ccd6}
#app .tr-rank-3 .top-five-avatar{box-shadow:0 0 0 2px #d18a4c}
#app .top-five-profit{color:#3ad29b}
#app .top-five .smart-copy-action{border:0;border-radius:11px;background:linear-gradient(180deg,#ffd27d,#f2a93b);color:#1a1206;font-weight:800;box-shadow:0 6px 16px -8px rgba(247,185,85,.75)}
#app .top-five .smart-copy-action:disabled{box-shadow:none}

/* #1: the spotlight card */
#app .tr-rank-1{padding:14px 12px 12px!important;border:1px solid rgba(247,185,85,.55);
  background:radial-gradient(110% 120% at 100% 0%,rgba(247,185,85,.20),rgba(247,185,85,0) 60%),linear-gradient(180deg,#17202a,#0f161e);
  box-shadow:0 14px 30px -20px rgba(247,185,85,.8)}
#app .tr-crown{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin:0 0 2px;padding:3px 9px;border-radius:999px;background:rgba(247,185,85,.14);color:#f7b955;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
#app .tr-crown::before{content:"★";font-size:11px}
/* #1 gets its own rows: name across the card, result and Copy below it. */
#app .top-five-row.tr-rank-1{grid-template-columns:minmax(0,1fr) auto!important;gap:10px 12px}
#app .tr-rank-1 .top-five-left{grid-column:1/-1}
#app .tr-rank-1 .top-five-metrics{grid-column:1;text-align:left}
#app .tr-rank-1 .top-five-actions{grid-column:2;min-width:118px}
#app .tr-rank-1 .top-five-detail-panel{grid-column:1/-1}
#app .tr-rank-1 .top-five-avatar{width:46px;height:46px}
#app .tr-rank-1 .top-five-name{font-size:16px}
#app .tr-rank-1 .top-five-profit{font-size:24px!important}

/* ── community traders ────────────────────────────────────────────────── */
#app .grid{gap:10px}
#app .card{border-radius:16px;background:linear-gradient(180deg,#10171f,#0c1218)}
#app .card-body{gap:12px}
#app .card.top-1{border-color:rgba(247,185,85,.5);box-shadow:0 12px 28px -20px rgba(247,185,85,.8)}
#app .card.top-2{border-color:rgba(195,204,214,.30)}
#app .card.top-3{border-color:rgba(209,138,76,.32)}
#app .card .stats{gap:6px}
#app .card .stat{padding:8px 10px;border-radius:10px}
#app .card .stat-value{font-size:15px}
#app .card .stat-value.acc{color:#3ad29b}
#app .card[data-pnl^="-"] .stat-value.acc{color:#ff6b7f}
#app .card .card-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-top:12px}
#app .card .card-actions>.btn-my-profile{grid-column:1/-1}
#app .card .btn-copy-full{border-radius:11px;background:linear-gradient(180deg,#ffd27d,#f2a93b);color:#1a1206;font-weight:800;box-shadow:0 6px 16px -10px rgba(247,185,85,.8)}
#app .card .btn-copy-full.copying{background:rgba(247,185,85,.14);color:#f7b955;box-shadow:none}
#app .card .btn-follow-outline{min-width:104px;border-radius:11px;padding:0 14px}

/* Two columns from 601px: #1 takes the whole first row, so #2 is not
   stretched to its height. */
@media(min-width:601px){
  #app .top-five-row.tr-rank-1{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center}
  #app .tr-rank-1 .top-five-left{grid-column:1}
  #app .tr-rank-1 .top-five-metrics{grid-column:2;text-align:right}
  #app .tr-rank-1 .top-five-actions{grid-column:3}
  #app .tr-rank-1 .top-five-profit{font-size:28px!important}
}
@media(max-width:430px){
  #app .tr-hero .copy-steps{font-size:10px;gap:4px}
  #app .tr-hero .copy-steps span{padding:7px 2px;gap:4px}
  #app .tr-hero .copy-steps b{width:17px;height:17px}
}
@media(max-width:370px){
  #app .tr-hero{padding:16px 13px 14px}
  #app .tr-hero .top-five-heading h2{font-size:26px!important}
  #app .tr-hero-stats b{font-size:15px}
  #app .tr-hero .copy-steps{font-size:9.5px;gap:3px}
  #app .tr-hero .copy-steps b{width:16px;height:16px;font-size:9px}
  #app .card .btn-follow-outline{min-width:88px;padding:0 10px}
}
@media(min-width:900px){
  #app .tr-hero{padding:24px 24px 20px}
  #app .tr-hero .top-five-heading h2{font-size:38px!important}
  #app .tr-hero-stats{max-width:640px}
  #app .tr-hero .copy-steps{max-width:640px}
}