@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg0:#0A0A14;
  --bg1:#0D0D1A;
  --card:#111128cc;
  --card2:#111128f2;
  --stroke:#1A1A3E;
  --stroke2:#2D2D6B;

  --text:#E8E8F0;
  --muted:#8888AA;
  --dim:#555577;

  --accent:#00CCFF;
  --accent2:#00FF88;
  --danger:#FF3366;
  --warn:#FFB800;
  --good:#00FF88;
  --purple:#8B5CF6;
  --cyan:#22D3EE;
  --red:#FF4444;

  --shadow: 0 14px 50px rgba(0,0,0,.55);
  --radius:18px;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  position:relative;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
}
/* Hero glow — anchored to the top of the DOCUMENT so it scrolls away with
   the content. These radials used to live on the body background, which
   propagates to the canvas and stays fixed to the viewport: when you
   scrolled down, the haze followed and bled through translucent panels. */
body::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1000px;
  background: radial-gradient(1000px 600px at 12% 0%, rgba(0,204,255,.12), transparent 55%),
              radial-gradient(900px 500px at 90% 12%, rgba(0,255,136,.08), transparent 60%);
  pointer-events:none;
  z-index:-1;
}

.bg-grid{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity:.25;
  mask-image: radial-gradient(600px 420px at 50% 18%, rgba(0,0,0,1), rgba(0,0,0,0));
}

.topbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 26px;
  background: linear-gradient(180deg, rgba(10,10,20,.92), rgba(10,10,20,.50));
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.5px;
  background: linear-gradient(135deg, rgba(0,204,255,.25), rgba(0,255,136,.15));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 40px rgba(0,204,255,.12);
}

.brand-title{
  font-weight:850;
  font-size:16px;
}
.brand-sub{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
}
.nav-btn,.nav-link{
  border:1px solid var(--stroke);
  background: rgba(17,17,40,.35);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.nav-btn:hover,.nav-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,204,255,.35);
}
.nav-btn.active{
  border-color: rgba(0,204,255,.55);
  background: rgba(0,204,255,.12);
  box-shadow: 0 0 0 3px rgba(0,204,255,.08) inset;
}

.page{
  padding:22px 26px 70px;
}

.hero-card{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

.hero-left,.hero-right{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17,17,40,.75), rgba(17,17,40,.40));
  box-shadow: var(--shadow);
}

.hero-left{
  padding:18px 18px 20px;
}
.hero-right{
  padding:18px 18px 20px;
}

.hero-title{
  margin:0;
  font-size:30px;
  letter-spacing:-.4px;
}
.hero-desc{
  margin:10px 0 16px;
  color:var(--muted);
  line-height:1.45;
}
code{
  font-family:var(--mono);
  font-size:12px;
  padding:2px 6px;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,204,255,.5);
  background: linear-gradient(135deg, rgba(0,204,255,.20), rgba(0,255,136,.12));
  color:var(--text);
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-shadow: 0 12px 40px rgba(0,204,255,.09);
}
.cta-ghost{
  border-color: var(--stroke);
  background: rgba(17,17,40,.25);
  color: var(--muted);
  font-weight:800;
  box-shadow:none;
}
.cta:hover{
  transform: translateY(-1px);
}

.status-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.status-card{
  border:1px solid var(--stroke);
  border-radius: 16px;
  padding:12px 12px;
  background: rgba(0,0,0,.10);
}
.status-label{
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
}
.status-value{
  margin-top:6px;
  font-weight:950;
  font-size:18px;
}
.status-sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-family:var(--mono);
}

.mini-console{
  margin-top:14px;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px 12px;
  background: rgba(0,0,0,.10);
}
.mini-console-title{
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
  margin-bottom:10px;
}
.mini-console-body{
  font-family:var(--mono);
  font-size:12px;
  color: rgba(232,232,240,.86);
  max-height: 120px;
  overflow:auto;
}

.feature-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:18px;
}
.feature{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:14px;
  background: rgba(17,17,40,.38);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.feature-ico{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(232,232,240,.85);
  font-weight:900;
  background: rgba(0,0,0,.15);
}
.feature-title{
  font-weight:950;
  letter-spacing:-.2px;
}
.feature-desc{
  margin-top:6px;
  color:var(--muted);
  line-height:1.35;
  font-size:13px;
}

.panel-grid,.panel-grid-2{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.panel-grid-2{ grid-template-columns: 1.05fr .95fr; }

.card{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17,17,40,.74), rgba(17,17,40,.38));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--stroke);
}
.card-title{
  font-weight:1000;
  letter-spacing:-.2px;
}
.card-body{
  padding:14px;
}

.card-title-row .pill{
  font-family:var(--mono);
}

.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.12);
  color: rgba(232,232,240,.85);
  font-size:12px;
  font-weight:900;
}
.pill-warn{
  border-color: rgba(255,184,0,.35);
  background: rgba(255,184,0,.10);
}
.divider{
  height:1px;
  background: var(--stroke);
  margin:14px 0;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.graph-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.graph-card{
  border:1px dashed var(--stroke2);
  border-radius:16px;
  padding:16px;
  color:var(--muted);
  text-align:center;
  min-height: 92px;
  background: rgba(0,0,0,.06);
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field-label{
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
}
.input, select.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.15);
  color:var(--text);
  outline:none;
}
.input option, select.input option{
  background:#1a1a2e;
  color:var(--text);
}
.input:focus{
  border-color: rgba(0,204,255,.45);
  box-shadow: 0 0 0 3px rgba(0,204,255,.12);
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  border-radius:14px;
  border:1px solid var(--stroke);
  padding:10px 14px;
  background: rgba(0,0,0,.12);
  color:var(--text);
  cursor:pointer;
  font-weight:950;
}
.btn-primary{
  border-color: rgba(0,204,255,.55);
  background: rgba(0,204,255,.14);
}
.btn-secondary{
  border-color: rgba(0,255,136,.35);
  background: rgba(0,255,136,.10);
}
.btn-danger{
  border-color: rgba(255,51,102,.45);
  background: rgba(255,51,102,.12);
}
.btn-success{
  border-color: rgba(0,255,136,.45);
  background: rgba(0,255,136,.10);
}
.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.muted{ color:var(--muted); }
.small{ font-size:12px; }

.k{ color: var(--muted); font-family:var(--mono); font-size:12px; }
.v{ font-weight:950; }

.kv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
}
.kv{
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:10px 10px;
  background: rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.reasoning{
  font-family:var(--mono);
  border:1px solid var(--stroke);
  border-radius:16px;
  background: rgba(0,0,0,.08);
  padding:12px;
  min-height: 56px;
}

.footer{
  position:fixed;
  left:18px;
  bottom:14px;
  z-index:3;
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:9px 12px;
  background: rgba(10,10,20,.65);
  backdrop-filter: blur(10px);
  display:flex;
  gap:10px;
  align-items:center;
  color: rgba(232,232,240,.85);
  font-family:var(--mono);
  font-size:12px;
}
.footer .dot{
  color: var(--accent);
}

.layout-live{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap:14px;
  align-items:start;
}

.chart-placeholder{
  border:1px dashed var(--stroke2);
  border-radius:16px;
  padding:14px;
  background: rgba(0,0,0,.05);
}
.chart-placeholder-title{ font-weight:1000; }
.chart-placeholder-sub{ margin-top:8px; color:var(--muted); font-size:13px; }

.chart-mini-kpi-row{ display:flex; gap:12px; }
.mini-kpi{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px;
  min-width: 120px;
  background: rgba(0,0,0,.06);
}
.mini-kpi-label{
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
}
.mini-kpi-value{
  margin-top:6px;
  font-weight:1000;
  font-size:15px;
}

.bars-canvas{
  width:100%;
  height:160px;
  margin-top:12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
}

.log-line{
  font-family:var(--mono);
  margin:2px 0;
  color: rgba(232,232,240,.86);
  font-size:12px;
}

.health-pre{
  max-height: 320px;
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,.12);
  font-family:var(--mono);
  font-size:12px;
}