:root{
  --bg:#0B0F14;
  --panel:#121821;
  --border:#1F2A37;
  --text-primary:#E5E7EB;
  --text-secondary:#9CA3AF;
  --text-muted:#6B7280;
  --accent-primary:#3B82F6;
  --accent-secondary:#8B5CF6;
  --l20-green:#10B981;
  --l20-yellow:#F59E0B;
  --l20-red:#EF4444;
  --l20-grey:#6B7280;
  --profit:#22C55E;
  --loss:#EF4444;
  --risk-low:#22C55E;
  --risk-medium:#F59E0B;
  --risk-high:#EF4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text-primary);
}

#app{min-height:100%;display:flex;flex-direction:column}
.layout{display:flex;flex-direction:column;gap:12px;padding:12px}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
}

.header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:0.02em}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,0.02);
  color:var(--text-secondary);
  font-size:12px;
}
.dot{width:10px;height:10px;border-radius:50%;background:var(--l20-grey)}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.shell{display:grid;grid-template-columns:240px 1fr;gap:12px}
.content-area{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width: 960px){
  .shell{grid-template-columns:1fr}
}

.sidebar{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sidebar.collapsed .sidebar-list{display:none}
.sidebar-list{display:flex;flex-direction:column;gap:8px}
.sidebar-item{text-align:left;text-transform:capitalize}
.sidebar-toggle{width:100%}

.tab{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text-secondary);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.tab[aria-current="page"]{
  border-color:rgba(59,130,246,0.6);
  color:var(--text-primary);
  box-shadow:0 0 0 3px rgba(59,130,246,0.15);
}

.main{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 960px){
  .main{grid-template-columns:1fr 1fr}
}

.panel{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:120px;
}
.panel-title{font-size:13px;color:var(--text-secondary);text-transform:none}
.nodata{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  border:1px dashed rgba(31,42,55,0.9);
  border-radius:10px;
  padding:16px;
}

.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  color:var(--text-secondary);
  padding:8px 10px;
  border-radius:10px;
}
.btn[disabled]{opacity:0.55}

.footerbar{
  position:sticky;
  bottom:0;
  margin-top:12px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  padding:10px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.footer-item{opacity:0.95}
.metric{font-weight:700}
.metric.ok{color:var(--green)}
.metric.warn{color:var(--yellow)}
.metric.crit{color:var(--red)}
.metric.neutral{color:var(--muted)}