:root{
  color-scheme:dark;
  --orange:#ff7400;
  --cream:#ffebdb;
  --positive:#31f08a;
  --negative:#ff5c6c;
  --blue-1:#02152e;
  --blue-2:#053770;
  --grid:rgba(255,255,255,.055);
  --muted:rgba(255,235,219,.66);
  --line:rgba(255,255,255,.13);
  --transition:480ms cubic-bezier(.22,.72,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#d9d7d7}
body{margin:0;min-width:0;background:#d9d7d7;color:var(--cream);font-family:"Arimo";font-size:var(--vasc-text-body);font-synthesis:none}
button{font:inherit}
.rui-shell{padding:10px 18px 16px}
.rui-surface{
  position:relative;width:100%;height:clamp(700px,calc(100dvh - 120px),860px);min-height:700px;margin:0 auto;overflow:hidden;
  border:1px solid rgba(255,116,0,.32);border-radius:28px;
  background:radial-gradient(circle at 12% 2%,rgba(255,116,0,.20),transparent 28%),radial-gradient(circle at 88% 0%,rgba(49,240,138,.09),transparent 27%),linear-gradient(135deg,#05346f,#06295a 58%,#031a3d);
  box-shadow:0 28px 70px rgba(0,0,0,.22)
}
.rui-layout{display:grid;grid-template-columns:clamp(320px,25vw,410px) minmax(0,1fr);gap:18px;height:100%;padding:22px}
.asset-panel,.chart-workspace{min-width:0;min-height:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(2,21,46,.86),rgba(5,55,112,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.18)}
.asset-panel{display:flex;flex-direction:column;overflow:hidden}
.panel-head,.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.10)}
.eyebrow{display:block;color:#ff9a3d;font-size:var(--vasc-text-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.panel-head h1,.selected-asset h2{margin:3px 0 0;color:#fff;font-weight:650;letter-spacing:.02em}
.panel-head h1{font-size:var(--vasc-text-number)}
.selected-asset h2{font-size:var(--vasc-text-number)}
.asset-columns{display:grid;grid-template-columns:minmax(0,1fr) 92px 62px;gap:8px;padding:8px 12px;color:rgba(255,235,219,.5);font-size:var(--vasc-text-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.asset-columns span:not(:first-child){text-align:right}
.asset-list{min-height:0;overflow:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,116,0,.55) transparent}
.asset-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 92px 62px;align-items:center;gap:8px;min-height:44px;padding:5px 7px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--cream);cursor:pointer;text-align:left;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.asset-row:hover,.asset-row:focus-visible{outline:none;border-color:rgba(255,116,0,.42);background:rgba(255,255,255,.07);transform:translateY(-1px)}
.asset-row.is-active{border-color:rgba(255,116,0,.72);background:linear-gradient(90deg,rgba(255,116,0,.18),rgba(255,255,255,.055))}
.selected-logo{display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.92);color:#052c5e;font-weight:800}
.selected-logo{width:42px;height:42px}
.selected-logo.market-logo{font-size:var(--vasc-text-label);letter-spacing:.04em}
.selected-logo img{width:100%;height:100%;object-fit:cover}
.asset-name{min-width:0}
.asset-name strong,.asset-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset-name strong{color:#fff;font-size:var(--vasc-text-support);font-weight:650}
.asset-name small{margin-top:2px;color:rgba(255,235,219,.5);font-size:var(--vasc-text-label)}
.is-positive{color:var(--positive)!important}
.is-negative{color:var(--negative)!important}
.is-neutral{color:var(--cream)!important}
#selectedPerformance.is-neutral{color:#fff!important}
.chart-workspace{display:flex;flex-direction:column;overflow:hidden}
.workspace-head{min-height:76px;padding:12px 18px}
.selected-asset{display:flex;align-items:center;gap:11px;min-width:0}
.selected-asset>div{min-width:0}
.selected-asset h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selected-kpis{display:flex;gap:8px}
.selected-kpis>div{min-width:96px;padding:7px 10px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:rgba(0,0,0,.16);text-align:right}
.selected-kpis span,.selected-kpis strong{display:block}
.selected-kpis span{color:var(--muted);font-size:var(--vasc-text-label);text-transform:uppercase;letter-spacing:.08em}
.selected-kpis strong{margin-top:3px;color:#fff;font-size:var(--vasc-text-support);font-variant-numeric:tabular-nums}
@media(max-width:1100px) and (min-width:901px){.rui-layout{grid-template-columns:320px minmax(0,1fr);gap:12px;padding:16px}
}
@media(max-width:900px){.rui-shell{padding:0}
.rui-surface{height:auto;min-height:0;border:0;border-radius:0}
.rui-layout{grid-template-columns:1fr;height:auto;padding:12px}
.asset-panel{max-height:330px}
.chart-workspace{height:720px}
}
@media(max-width:560px){.rui-layout{gap:10px;padding:8px}
.workspace-head{align-items:flex-start}
.selected-kpis{display:block}
.selected-kpis>div{min-width:104px}
.selected-kpis>div+div{margin-top:5px}
.chart-workspace{height:700px}
.asset-row,.asset-columns{grid-template-columns:minmax(0,1fr) 80px 58px}
}
@media(prefers-reduced-motion:reduce){.asset-row{transition:none}
.asset-row:hover{transform:none}
}