:root{
  --bg: #0b0f14;
  --bg-elev: #11161d;
  --text: #e6edf3;
  --muted: #9aa7b2;
  --brand: #5dd6ff;
  --brand-2:#7C4DFF;
  --border:#1b2230;
  --ok:#25d366; --warn:#ffb020; --bad:#ff5470;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fa; --bg-elev:#ffffff; --text:#0a0f14; --muted:#4b5563; --border:#e5e7eb;
    --brand:#0078ff; --brand-2:#6D28D9;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,var(--bg),#0b0f1400 120%), var(--bg);
  color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.container{max-width:1100px; margin-inline:auto; padding:24px}
.header{
  position:sticky; top:0; z-index:20; backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand svg{width:26px; height:26px}
.brand span{font-weight:700; letter-spacing:.2px}

.buttons{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg,var(--bg-elev), color-mix(in srgb, var(--bg-elev) 70%, black));
  color:var(--text); text-decoration:none; cursor:pointer; transition:.15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn.primary{border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 18%, var(--bg-elev)), var(--bg-elev));}
.btn.ghost{background:transparent}

.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center; padding:48px 24px;
}
@media (max-width: 860px){ .hero{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg,var(--bg-elev), color-mix(in srgb, var(--bg-elev) 85%, black));
  border:1px solid var(--border); border-radius:16px; padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.kpis{display:grid; grid-template-columns: repeat(3,1fr); gap:14px}
@media (max-width: 780px){ .kpis{grid-template-columns:1fr 1fr} }
.kpi{padding:16px; border:1px dashed var(--border); border-radius:12px}
.kpi .label{color:var(--muted); font-size:12px}
.kpi .value{font-size:22px; font-weight:700; margin-top:6px}

.table{width:100%; border-collapse:separate; border-spacing:0 10px; margin-top:12px}
.tr{display:grid; grid-template-columns: minmax(220px,1fr) 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg-elev)}
.th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.status{display:inline-flex; align-items:center; gap:8px; font-size:14px}
.dot{width:9px; height:9px; border-radius:999px; background:var(--warn)}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}

.form-row{display:flex; align-items:center; gap:14px; margin:10px 0}
.switch{appearance:none; width:48px; height:28px; background: #7b8693; border-radius:999px; position:relative; outline:none; cursor:pointer; transition:.18s}
.switch::after{content:""; position:absolute; width:22px; height:22px; background:#fff; top:3px; left:3px; border-radius:999px; transition:.18s}
.switch:checked{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.switch:checked::after{left:23px}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.center{display:grid; place-items:center; min-height:60vh}
.notice{color:var(--muted)}
.footer{border-top:1px solid var(--border); padding:18px 24px; color:var(--muted); text-align:center}