:root{
  --bg:#0a0a0a; --card:#141414; --fg:#eaeaea; --muted:#9aa0a6; --accent:#00b3b3;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:system-ui, Segoe UI, Roboto, sans-serif;
  background:var(--bg); color:var(--fg);
}

/* particles behind everything */
#particles{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; filter:blur(0.2px) contrast(110%) brightness(110%);
}

/* content sits above particles */
header, .controls, .chart, .tables, footer, #status{ position:relative; z-index:1; }

header{ padding:16px 20px; border-bottom:1px solid #1b1b1b; }
h1{ margin:0 0 6px; font-weight:650; letter-spacing:0.2px; }

.controls{ padding:12px 20px; border-bottom:1px solid #1b1b1b; }
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:10px; }
label{ color:var(--muted); font-size:14px; }
input, select, button{
  background:#0f0f0f; border:1px solid #2a2a2a; color:var(--fg);
  padding:6px 8px; border-radius:10px;
}
button{
  background:linear-gradient(135deg, var(--accent), #0aa);
  border-color:transparent; cursor:pointer; font-weight:650;
  box-shadow:0 4px 14px rgba(0,179,179,0.18);
}
button:hover{ filter:brightness(1.07); }
.toggle{ display:flex; align-items:center; gap:6px; margin-left:8px; }

.plot{ width:100%; height:760px; }
.chart{ padding:10px 20px; }

.tables{
  padding:10px 20px; display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.card{
  background:var(--card); border:1px solid #1b1b1b; border-radius:14px; padding:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}
#gapsTable{ width:100%; border-collapse:collapse; }
#gapsTable th, #gapsTable td{
  padding:6px 8px; border-bottom:1px solid #1b1b1b; font-size:13px;
}
footer{ padding:16px 20px; color:var(--muted); border-top:1px solid #1b1b1b; }
:root{
  --bg:#000000;                /* true black so pixels pop */
  --fg:#e9ecf1;
  --muted:#a9b0bb;
  --glass: rgba(20,20,20,0.32); /* translucent surfaces */
  --stroke: rgba(255,255,255,0.12);
  --neon:#00e5ff;
  --accent:#26A69A;            /* TradingView green accent */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* particle canvas sits behind everything */
#particles{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  filter: contrast(110%) brightness(110%);
}

/* content sits above particles */
header, .controls, .chart, .tables, footer, #status{ position:relative; z-index:1; }

/* GLASS HEADER */
header{
  padding:18px 20px;
  border-bottom:1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(8px) saturate(120%);
}
h1{ margin:0 0 6px; font-weight:700; letter-spacing:0.3px; }
header p{ margin:0; color:var(--muted); }

/* CONTROLS BAR (glass pills) */
.controls{
  padding:12px 20px;
  border-bottom:1px solid var(--stroke);
  background: linear-gradient( to bottom, rgba(10,10,10,0.0), rgba(10,10,10,0.25) );
  backdrop-filter: blur(6px);
}
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:10px; }
label{ color:var(--muted); font-size:14px; }
input, select{
  background: rgba(15,15,15,0.35);
  border:1px solid var(--stroke);
  color: var(--fg);
  padding:8px 10px;
  border-radius: 999px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus{
  border-color: rgba(0,229,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
}
button{
  background: radial-gradient(120px 60px at 50% 0%, rgba(0,229,255,0.18), rgba(0,229,255,0.08) 40%, rgba(0,229,255,0.02) 70%);
  border:1px solid rgba(0,229,255,0.45);
  color:#c9fcff;
  padding:9px 16px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.3px;
  box-shadow: 0 8px 24px rgba(0,229,255,0.10);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover{ filter:brightness(1.06); box-shadow:0 10px 28px rgba(0,229,255,0.14); }
button:active{ transform: translateY(1px) scale(0.99); }

.toggle{ display:flex; align-items:center; gap:8px; margin-left:4px; }
.toggle input[type="checkbox"]{
  appearance:none; width:44px; height:24px; border-radius:999px;
  background: rgba(255,255,255,0.08);
  border:1px solid var(--stroke);
  position:relative; outline:none; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.toggle input[type="checkbox"]::after{
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(180deg, #ffffff, #b9c1c9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: left .18s ease;
}
.toggle input[type="checkbox"]:checked{
  background: rgba(0,229,255,0.18); border-color: rgba(0,229,255,0.55);
}
.toggle input[type="checkbox"]:checked::after{ left:22px; }

#status{
  margin:10px 20px 0;
  padding:8px 12px;
  border-radius:10px;
  background: rgba(20,20,20,0.35);
  border:1px solid var(--stroke);
}
#status.ok{ color:#9cffc8; border-color:rgba(0,255,170,0.25); }
#status.err{ color:#ffb3b3; border-color:rgba(255,0,0,0.25); }

/* CHART: let Plotly be fully transparent so particle pixels show */
.chart{ padding:10px 20px; }
.plot{ width:100%; height:760px; background: transparent !important; }

/* TABLE CARDS — glass */
.tables{
  padding:12px 20px;
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.card{
  background: var(--glass);
  backdrop-filter: blur(10px) saturate(140%);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  box-shadow: 0 12px 38px rgba(0,0,0,0.35);
}
.card h3{ margin:4px 0 10px; }

#gapsTable{ width:100%; border-collapse:collapse; }
#gapsTable th, #gapsTable td{
  padding:6px 8px; border-bottom:1px solid var(--stroke); font-size:13px;
}

footer{
  padding:16px 20px;
  color:var(--muted);
  border-top:1px solid var(--stroke);
  background: rgba(10,10,10,0.18);
  backdrop-filter: blur(6px);
}