:root{
    --bg:#f4f6f8; --fg:#0b0b0c; --muted:#6b7280; --border:#e6e8eb; --accent:#2563eb;
    --card:#ffffff; --shadow:0 8px 24px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --radius:16px;
  }
  @media (prefers-color-scheme: dark){
    :root{ --bg:#0c0f14; --fg:#e5e7eb; --muted:#9aa3ad; --border:#1b2330; --accent:#60a5fa; --card:#0f1319; --shadow:none; }
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
  .wrap{max-width:960px;margin:5vh auto;padding:0 1rem}
  .heading{display:flex;align-items:center;gap:.75rem;justify-content:space-between;margin-bottom:1rem}
  .leftHead{display:flex;align-items:center;gap:.75rem}
  .badge{padding:.2rem .6rem;border-radius:999px;font-size:.8rem;border:1px solid var(--border);color:var(--muted)}
  .badge.ok{color:#10b981;border-color:rgba(16,185,129,.35)}
  .badge.err{color:#ef4444;border-color:rgba(239,68,68,.35)}
  h1{font-size:1.4rem;margin:.1rem 0 0}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem;margin-bottom:1rem}

  .adminWrap{display:flex;align-items:center;gap:.6rem}
  .adminBtn{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.5rem .9rem; cursor:pointer; box-shadow:var(--shadow); font-weight:600; }
  .adminBtn:hover{border-color:var(--accent); color:var(--accent)}

  .modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50;}
  .modal.open{opacity:1; pointer-events:auto;}
  .modal-overlay{position:absolute; inset:0; background:rgba(12,18,28,.45); backdrop-filter:blur(2px);}
  .modal-dialog{position:relative; background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:1.6rem; width:min(380px,90vw); z-index:1; display:flex; flex-direction:column; gap:.75rem;}
  .modal-close{position:absolute; top:.65rem; right:.65rem; border:none; background:transparent; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--muted);}
  .modal-close:hover{color:var(--accent);} 
  .modal-sub{margin:0; color:var(--muted); font-size:.92rem;}
  .modal-form{display:flex; flex-direction:column; gap:.75rem;}
  .modal-label{font-size:.88rem; color:var(--muted);} 
  .modal-label.optional::after{content:' (optional)'; font-style:italic;}
  .modal-form input{border:1px solid var(--border); border-radius:12px; padding:.6rem .8rem; background:transparent; color:var(--fg);}
  .modal-form button{border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:12px; padding:.7rem .9rem; font-weight:600; cursor:pointer;}
  .modal-form button:hover{filter:brightness(1.05);} 
  .modal-status{min-height:1.1rem; font-size:.9rem; color:var(--muted);} 
  .mini{font-size:.88rem;color:var(--muted);margin-left:.25rem}
  .mini.error{color:#ef4444;font-weight:600}
  .mini.success{color:#10b981;font-weight:600}

  .adminPanel{margin-bottom:1rem}
  .adminForm{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
  .adminForm input{border:1px solid var(--border);border-radius:10px;padding:.45rem .7rem;background:transparent;color:var(--fg);min-width:180px}
  .adminForm button{cursor:pointer}
  #adminNote{color:var(--muted)}

  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
  @media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .grid{grid-template-columns:1fr;} }
  @media (max-width:600px){
    .heading{flex-direction:column;align-items:flex-start;gap:.5rem}
    h1{font-size:1.15rem}
    .value{font-size:1.5rem}
    .meta{flex-direction:column;align-items:flex-start;gap:.4rem}
    .controls{flex-wrap:wrap}
  }

  .metric{padding:1rem;border:1px solid var(--border);border-radius:12px}
  .label{color:var(--muted);font-size:.9rem;margin-bottom:.2rem}
  .value{font-size:2rem;font-weight:700;letter-spacing:.2px;transition:transform .15s ease,opacity .15s ease}
  .units{font-size:.95rem;color:var(--muted);margin-left:.25rem;font-weight:600}
  .meta{display:flex;justify-content:space-between;align-items:center;margin-top:.85rem;color:var(--muted);font-size:.9rem;gap:.5rem;flex-wrap:wrap}
  .controls{display:flex;gap:.5rem;align-items:center}
  select,button{background:transparent;color:var(--fg);border:1px solid var(--border);padding:.45rem .6rem;border-radius:10px}
  button:hover,select:hover{border-color:var(--accent)}
  .preset-group{display:flex;gap:.4rem;flex-wrap:wrap}
  .preset-group button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
  #windowInfo{margin-left:auto;font-size:.85rem;color:var(--muted)}
  .blink{animation:blink .5s ease}
  @keyframes blink{from{opacity:.35;transform:translateY(2px)}to{opacity:1;transform:none}}

  #chartWrap{padding:1rem;border:1px solid var(--border);border-radius:12px;height:380px;position:relative}
  @media (max-width:600px){ #chartWrap{height:280px;padding:.6rem} }
  @media (max-width:400px){ #chartWrap{height:220px} }
  #chart{display:block;width:100%;height:100%; cursor:grab; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; }
  #chart.dragging{cursor:grabbing}
  .help{font-size:.85rem;color:var(--muted)}
  .controls button:focus, .controls select:focus, .adminBtn:focus, a:focus{
    outline:2px solid currentColor;
    outline-offset:2px;
  }