:root{
    --bg1:#05070e; --bg2:#0b1020; --ink:#e5e7eb; --muted:#9aa3b2;
    --blue1:#2563eb;   
    --blue2:#38bdf8;   
    --ok:#22c55e; --okB:rgba(34,197,94,.55);
    --panelB:rgba(148,163,184,.16); --cardB:rgba(148,163,184,.18);
    
  }
  
  
  /* Reset/basics */
  *{box-sizing:border-box}
  html, body { min-height: 100%; }

  body{
    margin:0; color:var(--ink);
    font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  
    /* TOP glow (warm) + BOTTOM glow (koel) + base dark gradient + subtle pattern */
    background:
      radial-gradient(200% 220% at 50% -10%, rgba(249,115,22,.08), transparent 92%) fixed,
      radial-gradient(180% 200% at 50% 120%, rgba(56,189,248,.08), transparent 90%) fixed,
      linear-gradient(180deg, var(--bg1), var(--bg2)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 12px, rgba(0,0,0,0) 12px 24px);
    background-repeat: no-repeat;
    background-attachment: scroll, scroll, scroll, scroll; 
    min-height:100dvh;
    padding:16px;
  }
  
  
  .card{
    width:min(1200px,96vw);
    margin:0 auto;
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
    border:1px solid var(--cardB);
    border-radius:18px; padding:18px;
    box-shadow:
      0 18px 42px rgba(0,0,0,.45),
      0 1px 0 rgba(255,255,255,.06) inset;
  }
  
  .header{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:6px; padding:0; margin:0 0 6px 0;
  }
  .logo{
    width:200px; max-width:60vw; height:auto; object-fit:contain; display:block;
    filter:drop-shadow(0 6px 12px rgba(56,189,248,.25));
    margin:0 auto 4px auto;
  }
  h1{
    margin:0 0 2px 0; text-align:center;
    font-size:clamp(22px,4.2vw,30px); line-height:1.15
  }
  .lead{
    margin:2px 0 6px; text-align:center; color:var(--muted);
    font-size:clamp(14px,2.1vw,16px)
  }
  .pill{
    display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
    background:rgba(37,99,235,.10);border:1px solid rgba(148,163,184,.30);color:#cbd5e1;font-size:13px
  }
  .status{margin:4px 0;background:rgba(255,255,255,.05);border:1px solid var(--panelB)}
  .status.ok{border-color:var(--okB);box-shadow:0 0 0 2px rgba(34,197,94,.12)}
  
  /* Tiles (system) */
  .stats{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;margin-top:8px
  }
  .stat{
    background:linear-gradient(180deg, rgba(2,6,23,.62), rgba(2,6,23,.42));
    border-radius:12px;padding:10px;text-align:center;
    border:1px solid rgba(56,189,248,.22);
    box-shadow:
      0 8px 24px rgba(0,0,0,.35),
      0 0 0 1px rgba(56,189,248,.12) inset,
      0 0 18px rgba(56,189,248,.10);
  }
  .stat .v{font-size:18px;font-weight:700}
  
  /* Node tiles */
  .node{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;margin-top:10px
  }
  .node .tile{
    background:linear-gradient(180deg, rgba(2,6,23,.62), rgba(2,6,23,.42));
    border-radius:12px;padding:10px;text-align:center;
    border:1px solid rgba(56,189,248,.22);
    box-shadow:
      0 8px 24px rgba(0,0,0,.35),
      0 0 0 1px rgba(56,189,248,.12) inset,
      0 0 18px rgba(56,189,248,.10);
  }
  
  /* Panels */
  .row{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;margin-top:12px
  }
  .panel{
    background: linear-gradient(180deg, rgba(10,16,32,.75), rgba(8,12,26,.55));
    border-radius: 14px;
    border: 1px solid rgba(56,189,248,.22);
    box-shadow:
      0 10px 30px rgba(0,0,0,.45),
      0 0 0 1px rgba(56,189,248,.20) inset,
      0 0 24px rgba(56,189,248,.14);
    padding:12px;
  }
  .panel h3{
    margin:0 0 6px;font-size:14px;color:#e9edf7;
    position:relative;
  }
  .panel h3::after{
    content:""; position:absolute; left:0; bottom:-6px; height:2px; width:60px;
    border-radius:2px; opacity:.9;
  }
  
  /* Canvas: */
  .panel canvas{
    display:block;
    width:100%; height:190px;
    border: 2px solid transparent;          /* dunne rand */
    border-radius: 10px;
    padding: 5px;
    background-clip: padding-box;
    background:
      radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,.10), transparent 60%),
      linear-gradient(180deg, #2f394f, #222b3c);  /* lichter dan kaart */
    box-shadow:
      inset 0 5px 14px rgba(0,0,0,.75),
      inset 0 -4px 10px rgba(255,255,255,.05);
    border-image: linear-gradient(45deg, var(--blue1), var(--blue2)) 1;
  }
  
  /* CTA & footer */
  .cta{display:flex;justify-content:center;gap:10px;margin-top:12px}
  .btn{
    display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
    text-decoration:none;color:#fff;
    background:linear-gradient(180deg, var(--blue1), var(--blue2));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 8px 22px rgba(56,189,248,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
    font-weight:600; transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn:hover{ transform: translateY(-1px); box-shadow:0 12px 28px rgba(56,189,248,.36); }
  .btn.ghost{background:transparent;color:#cbd5e1;border-color:rgba(148,163,184,.35)}
  footer{margin-top:10px;text-align:center;color:#7a8596;font-size:12px}
  
  /* Responsive */
  @media (max-width:1100px){
    .row{grid-template-columns:1fr}
    .stats,.node{grid-template-columns:1fr 1fr}
  }