:root{
  --bg:#071014;
  --panel:#08131a;
  --accent:#66ff99;   /* tactical green */
  --accent-2:#3fe1b5;
  --muted:#93a1a1;
  --glass: rgba(255,255,255,0.03);
  --border: rgba(102,255,153,0.08);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#dff7ea;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* App layout */
.app {display:flex;min-height:100vh;gap:24px}
.sidebar {
  width:260px;
  background:linear-gradient(180deg, rgba(5,10,7,0.6), rgba(7,10,16,0.5));
  border-right:1px solid var(--border);
  padding:20px;
  display:flex;flex-direction:column;gap:18px;
  backdrop-filter: blur(6px);
  position:fixed;left:0;top:0;bottom:0;
}
.brand {display:flex;align-items:center;gap:12px}
.brand .logo {width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg, rgba(102,255,153,0.18), rgba(8,180,120,0.05));display:flex;align-items:center;justify-content:center;border:1px solid rgba(102,255,153,0.08)}
.brand h1{font-size:14px;margin:0;color:var(--accent);letter-spacing:0.6px}
.brand p{margin:0;font-size:11px;color:var(--muted)}
.menu {display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-right:6px}
.menu a {
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:#cfeede;font-size:14px;border:1px solid transparent;transition:all .12s;
}
.menu a svg{width:18px;height:18px;opacity:0.9}
.menu a.active, .menu a:hover {
  background:linear-gradient(90deg, rgba(102,255,153,0.05), rgba(102,255,153,0.02));
  border-color:var(--border);
  color:var(--accent);
  transform: translateX(4px);
}
.meta {margin-top:auto; font-size:12px;color:var(--muted)}

/* Main area */
.main {flex:1;margin-left:300px;padding:28px 36px;position:relative;overflow:auto}

/* Top */
.topbar {display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.topbar .title {font-family:var(--mono);font-weight:700;color:var(--accent);font-size:18px}
.topbar .controls {display:flex;gap:10px;align-items:center}
.btn {padding:8px 12px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--accent);}

/* Grid */
.grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.card {background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:var(--radius);border:1px solid var(--border);min-height:100px}
.card h3{margin:0;color:var(--muted);font-size:13px}
.card .big{font-family:var(--mono);font-size:28px;margin-top:6px;color:#e6ffe9}
.charts {display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:18px}
.chart-card {padding:12px;border-radius:12px;background:rgba(0,0,0,0.22);border:1px solid var(--border)}

/* Alerts */
.alerts {margin-top:18px}
.alert {display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:8px;background:rgba(255,0,0,0.04);border-left:4px solid rgba(255,0,0,0.35);font-size:13px}

/* Page container for static pages */
.page-container {max-width:1000px;margin:6px auto;padding:28px;background:linear-gradient(180deg, rgba(10,14,12,0.6), rgba(8,12,15,0.45));border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.page-container h1{margin-top:0;color:var(--accent)}
.legal-section {margin-bottom:20px}
.legal-section h2{color:#dff7ea}

/* responsive */
@media (max-width:980px){
  .sidebar{display:none}
  .main{margin-left:0;padding:16px}
  .grid{grid-template-columns:repeat(1,1fr)}
  .charts{grid-template-columns:1fr}
}

/* radar canvas */
canvas#radar {position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none}