/* same as your current v4 with one key change: BG swatch red */
:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #0b1220;
  --muted: #667085;
  --line: rgba(15, 23, 42, .10);

  --cash:#0f172a;
  --shadow: 0 18px 40px rgba(15,23,42,.08);
  --shadow2: 0 10px 22px rgba(15,23,42,.08);

  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(2,6,23,.06), transparent 60%),
    radial-gradient(900px 520px at 85% 8%, rgba(2,6,23,.04), transparent 60%),
    var(--bg);
}

.shell{max-width:1400px;margin:0 auto;padding:14px}

/* topnav, aside, cards — unchanged from your current version */
.topnav{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  box-shadow: var(--shadow2);
  position:sticky; top:10px; z-index: 50;
  backdrop-filter: blur(10px);
}
.topnav__left{display:flex;align-items:center;gap:12px}
.brandMark{
  height:40px;border-radius:14px;
  
  box-shadow: 0 12px 30px rgba(15,23,42,.14);
}
.brandText__title{font-weight:900;letter-spacing:.2px}
.brandText__sub{font-size:12px;color:var(--muted);margin-top:2px}

.pill{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  color:var(--muted);
}
.dot{width:8px;height:8px;border-radius:999px;background:#9ca3af}
.dot--live{background:#111827; box-shadow: 0 0 0 6px rgba(17,24,39,.10)}
.topnav__right{display:flex;gap:10px;align-items:center}

.main{display:grid;grid-template-columns: 320px 1fr;gap:14px;margin-top:14px;}
@media (max-width: 980px){ .main{grid-template-columns:1fr} }

.aside{
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  border-radius:16px;
  box-shadow: var(--shadow2);
  padding:12px;
  backdrop-filter: blur(10px);
  height: calc(100vh - 110px);
  position:sticky;
  top:90px;
  overflow:auto;
}
@media (max-width: 980px){ .aside{position:relative; height:auto; top:auto} }

.aside__section{margin-bottom:14px}
.aside__title{font-size:12px;font-weight:900;color:#111827;margin:6px 4px 8px;letter-spacing:.2px;}
.aside__item{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border-radius:12px;text-decoration:none;color:var(--text);
  border:1px solid transparent;transition: all .18s ease;
}
.aside__item:hover{background:rgba(2,6,23,.04);border-color: rgba(2,6,23,.10)}
.aside__item.active{background:rgba(2,6,23,.06);border-color: rgba(2,6,23,.14)}
.aside__item.is-disabled{opacity:.45;filter:grayscale(1);cursor:not-allowed;pointer-events:none;}

.tag{margin-left:auto;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;border:1px solid rgba(2,6,23,.12);color: rgba(2,6,23,.60);background: rgba(255,255,255,.75);}
.aside__icon{width:20px;display:inline-flex;justify-content:center}
.i{width:18px;height:18px;stroke:#111827;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

.aside__hr{height:1px;background:var(--line);margin:12px 0}
.smallMuted{font-size:12px;color:var(--muted);line-height:1.35}

.assetList{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.assetRow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.86);
  border-radius:14px;padding:10px 10px;transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.assetRow:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,.06)}
.assetRow.included{border-color: rgba(2,6,23,.28);background: linear-gradient(180deg, rgba(2,6,23,.05), rgba(255,255,255,.88));box-shadow: 0 14px 30px rgba(15,23,42,.08);}
.assetMeta{display:flex;flex-direction:column;gap:2px}
.assetName{font-size:12px;font-weight:900}
.assetVal{font-size:12px;color:var(--muted);font-variant-numeric: tabular-nums}
.assetBtns{display:flex;gap:8px;align-items:center}
.pmBtn{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.94);cursor:pointer;transition: all .15s ease;font-weight:1000;}
.pmBtn:hover{background:rgba(2,6,23,.05);border-color: rgba(2,6,23,.18)}
.pmBtn.off{opacity:.40}

.content{display:flex;flex-direction:column;gap:14px}
.card{border:1px solid var(--line);background: rgba(255,255,255,.86);border-radius:18px;box-shadow: var(--shadow);padding:14px;backdrop-filter: blur(10px);}
.card--hero{padding:14px 14px 12px}

.heroTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
@media (max-width: 980px){ .heroTop{flex-direction:column} }
.heroTitle{font-size:16px;font-weight:1000}
.heroSub{font-size:12px;color:var(--muted);margin-top:3px}

.heroKpis{display:grid;grid-template-columns: repeat(3, 1fr);gap:10px;min-width: 520px;}
@media (max-width: 980px){ .heroKpis{min-width:0; grid-template-columns:1fr} }
.kpi{border:1px solid var(--line);background:rgba(255,255,255,.94);border-radius:16px;padding:10px 10px;}
.kpiK{font-size:11px;color:var(--muted);font-weight:900}
.kpiV{font-size:16px;font-weight:1000;margin-top:4px;font-variant-numeric: tabular-nums}

.chartWrap{position:relative;margin-top:12px;border:1px solid rgba(15,23,42,.10);border-radius:18px;overflow:hidden;background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,252,255,.88));}
.chartWrap canvas{display:block; width:100%; height: 580px}
@media (max-width: 980px){ .chartWrap canvas{height: 540px} }
.chartHint{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--muted);background: rgba(255,255,255,.88);border:1px solid var(--line);padding:8px 10px;border-radius:999px;backdrop-filter: blur(10px);}

.legendRow{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:12px;}
.legendItem{display:flex;align-items:center;gap:8px}
.legendSwatch{width:14px;height:8px;border-radius:999px;background:#cbd5e1}
.legendSwatch--line{background: #111827}
.legendSwatch--cash{background: #374151}
/* ✅ BG legend is RED */
.legendSwatch--bg{background: #ef4444}
.legendSwatch--eu{background: #6b7280}

.btn{border:1px solid var(--line);background: rgba(255,255,255,.92);padding:9px 12px;border-radius:12px;cursor:pointer;transition: all .15s ease;font-weight:900;font-family: var(--font);}
.btn:hover{background: rgba(2,6,23,.05); border-color: rgba(2,6,23,.18)}
.btn--wide{width:100%}
.btn--primary{background: rgba(2,6,23,.08);border-color: rgba(2,6,23,.20);color:#0b1220;}
.btn--primary:hover{background: rgba(2,6,23,.10)}
.btn--ghost{background: rgba(255,255,255,.75)}
.iconBtn{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background: rgba(255,255,255,.94);cursor:pointer;font-weight:1000;}
.iconBtn:hover{background: rgba(2,6,23,.05); border-color: rgba(2,6,23,.18)}

.scenarioBar{margin-top: 12px;border:1px solid rgba(2,6,23,.12);background: rgba(255,255,255,.92);border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.scenarioBar__title{font-weight:1000}
.scenarioBar__sub{font-size:12px;color:var(--muted);margin-top:3px}

.orderBook{margin-top: 12px;border:1px solid rgba(2,6,23,.10);border-radius:16px;background: rgba(255,255,255,.92);overflow:hidden;}
.orderBook__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid rgba(2,6,23,.08);}
.orderBook__title{font-weight:1000}
.orderBook__sub{font-size:12px;color:var(--muted);margin-top:3px}
.orderBook__meta{font-size:12px;color:var(--muted);font-weight:800}

.tblWrap{overflow:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width: 1120px;}
.tbl th,.tbl td{padding:10px 10px;border-bottom:1px solid rgba(2,6,23,.06);white-space:nowrap;}
.tbl th{text-align:left;font-weight:1000;color:#111827;background: rgba(2,6,23,.03);position:sticky;top:0;z-index: 2;}
.tbl td{color:#0b1220}
.tbl td.r{text-align:right;font-variant-numeric: tabular-nums}
.tbl tr:hover td{background: rgba(2,6,23,.02)}
.tbl .empty{text-align:center;color:var(--muted);padding:18px 10px;}

.linkBtn{border:1px solid rgba(2,6,23,.12);background: rgba(255,255,255,.92);padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:900;font-family: var(--font);}
.linkBtn:hover{background: rgba(2,6,23,.05);border-color: rgba(2,6,23,.18)}

.drawer,.modal{position:fixed;inset:0;display:none;z-index:200;}
.drawer.show,.modal.show{display:block}
.drawer__backdrop,.modal__backdrop{position:absolute;inset:0;z-index:200;background: rgba(15,23,42,.22);backdrop-filter: blur(6px);}
.drawer__panel{position:absolute;top:14px;right:14px;width:430px;max-width:calc(100vw - 28px);height:calc(100vh - 28px);z-index:210;background: rgba(255,255,255,.94);border:1px solid var(--line);border-radius:18px;box-shadow: var(--shadow);overflow:hidden;transform: translateX(10px);animation: slideIn .18s ease forwards;}
.modal__panel{position:absolute;top:60px;left:50%;transform: translateX(-50%);width:680px;max-width:calc(100vw - 28px);z-index:210;background: rgba(255,255,255,.94);border:1px solid var(--line);border-radius:18px;box-shadow: var(--shadow);overflow:hidden;}
@keyframes slideIn { to { transform: translateX(0) } }
.drawer__head,.modal__head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-bottom:1px solid var(--line);background: rgba(255,255,255,.96);}
.drawer__title,.modal__title{font-weight:1000}
.drawer__sub,.modal__sub{font-size:12px;color:var(--muted);margin-top:2px}
.drawer__body,.modal__body{padding:12px;overflow:auto;height:calc(100% - 60px)}
.drawer__hr,.modal__hr{height:1px;background:var(--line);margin:12px 0}
.field{margin:10px 0}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:1000}
input,select{width:100%;border:1px solid var(--line);background: rgba(255,255,255,.96);padding:10px 10px;border-radius:12px;outline:none;font-weight:800;font-family: var(--font);}
input:focus,select:focus{border-color: rgba(2,6,23,.35); box-shadow: 0 0 0 4px rgba(2,6,23,.08)}
.hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.35}
.grid2{display:grid;grid-template-columns: 1fr 1fr;gap:10px}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr} }
.seg{display:grid;grid-template-columns: 1fr 1fr;gap:8px}
.seg__btn{border:1px solid var(--line);background: rgba(255,255,255,.92);padding:10px 10px;border-radius:12px;cursor:pointer;font-weight:1000;font-family: var(--font);}
.seg__btn.active{background: rgba(2,6,23,.08);border-color: rgba(2,6,23,.20);color:#0b1220;}
.heroKpis{ displa:contentReference[oaicite:18]{index=18}-:contentReference[oaicite:19]{index=19}r); gap:10px; min-width: 740px; }
@media (max-width: 1200px){ .heroKpis{ grid-template-columns: repeat(3, 1fr); min-width: 0; } }
@media (max-width: 980px){ .heroKpis{ grid-template-columns: 1fr; } }