:root{
    --bg1:#06080d; --bg2:#10141d; --ink:#edf2f7; --muted:#9aa6b7;
    --blue1:#2563eb;
    --blue2:#38bdf8;
    --amber:#f59e0b;
    --ok:#22c55e; --okB:rgba(34,197,94,.55);
    --panelB:rgba(148,163,184,.18); --cardB:rgba(148,163,184,.20);
    
  }
  
  
  /* 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;

    background:
      linear-gradient(180deg, rgba(245,158,11,.08), transparent 34%),
      linear-gradient(180deg, var(--bg1), var(--bg2) 58%, #090c12),
      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,.045),rgba(255,255,255,.02));
    border:1px solid var(--cardB);
    border-radius:8px; padding:18px;
    box-shadow:
      0 18px 42px rgba(0,0,0,.38),
      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(245,158,11,.20));
    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(245,158,11,.10);border:1px solid rgba(245,158,11,.28);color:#dbe4ef;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(14,19,28,.88), rgba(12,16,24,.68));
    border-radius:8px;padding:11px 10px;text-align:left;
    border:1px solid rgba(148,163,184,.20);
    box-shadow:
      0 8px 20px rgba(0,0,0,.22),
      0 1px 0 rgba(255,255,255,.05) inset;
  }
  .stat > div:first-child,
  .node .tile > div:first-child{
    color:var(--muted);
    font-size:12px;
    letter-spacing:0;
    margin-bottom:4px;
  }
  .stat .v{font-size:18px;font-weight:750}
  
  /* Node tiles */
  .node{
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
    gap:10px;margin-top:10px
  }
  .node .tile{
    background:linear-gradient(180deg, rgba(14,19,28,.88), rgba(12,16,24,.68));
    border-radius:8px;padding:11px 10px;text-align:left;
    border:1px solid rgba(148,163,184,.20);
    box-shadow:
      0 8px 20px rgba(0,0,0,.22),
      0 1px 0 rgba(255,255,255,.05) inset;
  }
  .node .tile:nth-child(3),
  .node .tile:nth-child(5){
    border-color:rgba(245,158,11,.35);
  }
  .node .tile .v{font-size:18px;font-weight:750}
  
  /* Panels */
  .row{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;margin-top:12px
  }
  .panel{
    background: linear-gradient(180deg, rgba(14,19,28,.90), rgba(11,15,22,.72));
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,.20);
    box-shadow:
      0 10px 26px rgba(0,0,0,.32),
      0 1px 0 rgba(255,255,255,.05) inset;
    padding:12px;
    min-height:0;
  }
  .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% !important;
    height:150px !important;
    max-height:150px;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 8px;
    padding: 5px;
    background-clip: padding-box;
    background:
      linear-gradient(180deg, rgba(30,41,59,.84), rgba(15,23,42,.92));
    box-shadow:
      inset 0 5px 14px rgba(0,0,0,.38),
      inset 0 -4px 10px rgba(255,255,255,.05);
  }
  
  /* 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:8px;
    text-decoration:none;color:#fff;
    background:linear-gradient(180deg, #2563eb, #0891b2);
    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{grid-template-columns:1fr 1fr}
    .node{grid-template-columns:repeat(2,minmax(0,1fr))}
    .panel canvas{height:130px !important; max-height:130px}
  }