:root {
  color-scheme: dark;
  font-family: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  background: #070b13;
  color: #e5f0ff;
  --bg: #070b13;
  --panel: #0d1522;
  --panel-2: #111d2d;
  --line: #26384c;
  --muted: #8192a8;
  --green: #57e389;
  --yellow: #f4c95d;
  --red: #ff7373;
  --cyan: #70d7e5;
  --purple: #c896ff;
  --orange: #ff9a6b;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 80% -10%, #173052, var(--bg) 48%); }
a { color: var(--cyan); }
button, input, select { font: inherit; }
button { border: 1px solid var(--line); background: #132337; color: var(--green); padding: .62rem .8rem; cursor: pointer; border-radius: 3px; }
button:hover { border-color: var(--green); background: #19324a; }
.shell { width: min(1440px, calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0 3rem; }
.topbar { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
.brand { letter-spacing: .14em; font-size: .74rem; color: var(--yellow); }
.status { color: var(--green); font-size: .72rem; }
h1 { margin: .7rem 0 .2rem; font-size: clamp(1.35rem, 3vw, 2.25rem); }
h2 { margin: 0 0 .65rem; font-size: .94rem; color: var(--cyan); }
h3 { margin: 0 0 .35rem; font-size: .78rem; color: var(--muted); font-weight: 400; }
.lede { color: var(--muted); max-width: 860px; line-height: 1.5; margin: 0 0 1rem; }
.banner { margin: .8rem 0; padding: .65rem .8rem; border: 1px solid #785e1a; background: #29220e; color: var(--yellow); font-size: .76rem; }
.workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: start; }
.sidebar { position: sticky; top: .8rem; background: #0a111c; border: 1px solid var(--line); padding: .9rem; }
.sidebar-label { font-size: .66rem; color: var(--muted); letter-spacing: .12em; margin-bottom: .7rem; }
.nav-item { display: block; padding: .55rem .6rem; color: var(--muted); border-left: 2px solid transparent; text-decoration: none; font-size: .76rem; }
.nav-item.active, .nav-item:hover { color: var(--cyan); border-left-color: var(--cyan); background: #112033; }
.main-column { min-width: 0; }
.panel { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); padding: 1rem; box-shadow: 0 12px 32px #0004; }
.panel + .panel { margin-top: 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat-grid { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.metric { font-size: 1.45rem; color: var(--green); }
.metric small { display: block; font-size: .66rem; color: var(--muted); margin-top: .25rem; }
.kpi { border-left: 3px solid var(--cyan); padding: .65rem .75rem; background: #0b1927; }
.kpi strong { display: block; font-size: 1.18rem; color: var(--cyan); }
.kpi small { color: var(--muted); font-size: .66rem; }
.positive { color: var(--green); } .negative { color: var(--red); } .warning { color: var(--yellow); }
.toolbar { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; }
input, select { background: #08121e; color: #e5f0ff; border: 1px solid var(--line); padding: .57rem; border-radius: 3px; }
canvas { display: block; width: 100%; height: 220px; background: #08121e; border: 1px solid var(--line); }
.chart-tall canvas { height: 290px; }
.chart-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(230px, 1fr); gap: 1rem; }
.meta { display: grid; grid-template-columns: 90px 1fr; gap: .35rem .8rem; color: var(--muted); font-size: .72rem; }
.meta strong { color: #e5f0ff; overflow-wrap: anywhere; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); padding: .25rem .45rem; color: var(--muted); font-size: .66rem; border-radius: 99px; }
.log { min-height: 74px; max-height: 180px; overflow: auto; color: var(--muted); font-size: .72rem; line-height: 1.55; white-space: pre-wrap; }
.terminal { background: #050b10; border: 1px solid #203a46; padding: .85rem; color: #86f3b0; min-height: 130px; font-size: .72rem; line-height: 1.6; white-space: pre-wrap; }
.code { background: #080d17; border: 1px solid var(--line); padding: .9rem; color: #c896ff; font-size: .72rem; line-height: 1.6; white-space: pre-wrap; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .72rem; }
th, td { padding: .5rem; border-bottom: 1px solid #1b2b3d; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 400; }
.heatmap { display: grid; grid-template-columns: repeat(6, minmax(42px, 1fr)); gap: 3px; }
.heatmap span { min-height: 34px; display: grid; place-items: center; border: 1px solid #20394e; font-size: .66rem; color: #071014; }
.heatmap span:nth-child(3n) { background: #57e389; } .heatmap span:nth-child(3n+1) { background: #f4c95d; } .heatmap span:nth-child(3n+2) { background: #70d7e5; }
.orderbook { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.orderbook div { padding: .45rem; background: #0b1a23; border: 1px solid #1c3840; font-size: .7rem; }
.orderbook .ask { color: var(--red); } .orderbook .bid { color: var(--green); }
.timeline { display: grid; grid-template-columns: 78px 1fr 80px; gap: .2rem .7rem; font-size: .7rem; }
.timeline span { padding: .45rem 0; border-bottom: 1px solid #1b2b3d; }
.cards a { text-decoration: none; }
.cards .panel { min-height: 170px; transition: transform .15s ease, border-color .15s ease; }
.cards .panel:hover { transform: translateY(-2px); border-color: var(--green); }
.card-title { color: var(--cyan); font-size: 1rem; margin-bottom: .35rem; }
.card-status { font-size: .68rem; margin-bottom: .8rem; }
details { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
summary { color: var(--muted); cursor: pointer; font-size: .72rem; }
footer { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: .8rem; color: var(--muted); font-size: .68rem; }
body.has-run .run-state { color: var(--green); }
body { --accent: #70d7e5; }
body[data-project="jesse"] { --accent: #57e389; background: radial-gradient(ellipse at top right, #19352a, #090f12 55%); }
body[data-project="freqtrade"] { --accent: #ff9a6b; background: radial-gradient(ellipse at top right, #38251d, #0c1017 55%); }
body[data-project="vectorbt"] { --accent: #c896ff; background: radial-gradient(ellipse at top right, #2a1c45, #0b101b 55%); }
body[data-project="quantstats"] { --accent: #ff7373; background: radial-gradient(ellipse at top right, #38202e, #10131b 55%); }
body[data-project="qlib"] { --accent: #c896ff; }
body[data-project="lean"] { --accent: #78a8ff; }
body[data-project="nautilus"] { --accent: #57e389; }
.brand, .card-title, h2, .kpi strong { color: var(--accent, #70d7e5); }
.kpi { border-left-color: var(--accent, #70d7e5); }
.code { line-height: 1.8; white-space: normal; min-height: 150px; }
button, select, input { min-height: 44px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.heatmap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.heatmap span { min-height: 65px; padding: .4rem; text-align: center; }
.panel, .main-column, .kpi { min-width: 0; }
.kpi strong { overflow-wrap: anywhere; }
.stat-grid { margin: .7rem 0; }
.chips { margin: .6rem 0; }
.chart-grid, .grid { margin-top: 1rem; }
.chart-grid > .panel, .grid > .panel { margin-top: 0; }
@media (max-width: 440px) { .timeline { grid-template-columns: 75px minmax(0,1fr) 65px; } .timeline span { overflow-wrap: anywhere; } .toolbar input, .toolbar select { max-width: 100%; } .sidebar { padding: .5rem; } }
@media (max-width: 820px) { .workspace { grid-template-columns: 1fr; } .sidebar { position: static; display: flex; gap: .3rem; overflow-x: auto; } .sidebar-label { display: none; } .nav-item { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; } .nav-item.active, .nav-item:hover { border-bottom-color: var(--cyan); } .chart-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .shell { width: min(100% - 1rem, 1440px); } .topbar { align-items: flex-start; flex-direction: column; } .meta { grid-template-columns: 1fr; gap: .15rem; } }