:root{

      --bg:#0b0f14; --panel:#101826; --panel2:#0f1724; --text:#e8eef6; --muted:#9fb0c3; --border:#22314a;

      --accent:#4da3ff; --danger:#ff5c5c; --ok:#52d18d; --warn:#ffcc66;

      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

    }



    *{box-sizing:border-box}

    body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden}

    a{color:inherit;text-decoration:none}

    button,input,select,textarea{font:inherit;color:inherit}

    input,select,textarea{background:#0c1422;border:1px solid var(--border);padding:10px 12px;border-radius:10px;width:100%}

    textarea{min-height:90px;resize:vertical}

    .btn{background:var(--accent);border:none;padding:10px 12px;border-radius:10px;color:#06101b;font-weight:800;cursor:pointer}

    .btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:650}

    .btn.danger{background:var(--danger);color:#1a0606}

    .btn:disabled{opacity:.6;cursor:not-allowed}

    .card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}

    .container{max-width:1500px;margin:0 auto;padding:18px}



    .grid{display:grid;gap:12px}

    .cols-2{grid-template-columns:1fr 1fr}

    .cols-3{grid-template-columns:1fr 1fr 1fr}

    .cols-4{grid-template-columns:1fr 1fr 1fr 1fr}

    @media(max-width:980px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

    .topbar{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(12,18,28,.8);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;height:56px;padding:0 18px;align-items:center;}

    .brand{line-height:1;display:flex;gap:10px;font-weight:900;align-items:center;}

    .badge{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:4px 8px;border-radius:999px}

    .shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 56px)}

    .sidebar{border-right:1px solid var(--border);padding:14px;background:rgba(8,12,18,.9);position:sticky;top:56px;align-self:start;max-height:calc(100vh - 56px);overflow:auto}

    .nav{display:grid;gap:6px}

    .nav a{display:flex;gap:10px;padding:10px 12px;border-radius:12px;color:var(--muted)}

    .nav a.active{background:#0e1b2f;border:1px solid var(--border);color:var(--text)}

    .main{padding:18px;overflow-x:auto;overflow-y:visible}



    .h1{font-size:26px;font-weight:900;margin:0 0 12px}

    .h2{font-size:18px;font-weight:850;margin:0 0 10px}

    .muted{color:var(--muted)}

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

    .row.space{justify-content:space-between}

    .row.wrap{flex-wrap:wrap}

    .table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden;border:1px solid var(--border)}

    .table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}

    .table th{color:var(--muted);font-weight:750;font-size:12px;letter-spacing:.4px;text-transform:uppercase}

    .table tr:hover td{background:rgba(255,255,255,.02)}

    .table tr.project-sep td{padding:0;border-bottom:none;background:transparent}

    .table tr.project-sep td::before{content:"";display:block;height:12px}

    hr.sep{border:none;border-top:1px solid var(--border);margin:14px 0}

    .notice{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,.02)}

    .pill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px;white-space:nowrap}

    .dot{width:8px;height:8px;border-radius:999px;display:inline-block}

    .right{text-align:right}

    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

    .setup-col{display:flex;flex-direction:column;gap:12px}

    .setup-col > .card:not(.setup-new){flex:1}

    .setup-new{height:184px;min-height:184px;flex:0 0 184px;display:flex;flex-direction:column}

    .setup-new > .grid{margin-top:auto}

    /* Modal */

    .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);overflow:auto;display:grid;place-items:start center;padding:14px;z-index:50}

    .modal{width:min(1400px,100%);max-height:calc(100vh - 28px);overflow-y:auto;overflow-x:hidden}

    .chart{width:100%;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,0.15)}

    .appframe{min-height:100vh;display:flex;flex-direction:column}

    .shell{flex:1}

    .footer{border-top:1px solid var(--border);padding:14px 18px;text-align:center;color:var(--muted);font-size:12px;background:rgba(12,18,28,.7);backdrop-filter:blur(6px)}

    .brand .logoimg{height:52px;transform:none;margin-right:14px;width:auto;display:block;}



  .chart-wrap{position:relative}

.chart-tooltip{

  position:absolute;

  top:10px; left:10px;

  background:rgba(8,12,18,.95);

  border:1px solid var(--border);

  border-radius:12px;

  padding:10px 12px;

  color:var(--text);

  font-size:12px;

  pointer-events:none;

  display:none;

  max-width:260px;

  box-shadow:0 10px 28px rgba(0,0,0,.35);

}

.legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}

.legend .item{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;cursor:pointer;user-select:none}

.legend .item.off{opacity:.35}

.legend .sw{width:10px;height:10px;border-radius:999px;display:inline-block}