:root{
  --bg:#fafafa;
  --card:#ffffff;
  --muted:#6b7280;
  --accent: #6c5ce7; /* colorful but minimal */
  --accent-2:#00b894;
  --shadow: 0 6px 18px rgba(22,22,33,0.06);
  --radius:14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#111}
.container{max-width:1100px;margin:28px auto;padding:18px}
.center{text-align:center}
.brand h1{margin:0;font-size:28px}
.lead{color:var(--muted);margin-top:6px}

.topbar{background:linear-gradient(90deg,#fff, #fbfdff);border-bottom:1px solid #eee}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.mini-nav a{margin-left:12px;color:var(--muted);text-decoration:none}

.nav-row{display:flex;gap:10px;justify-content:center;margin-top:16px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid #eee}
.btn.primary{background:var(--accent-2)}

.card{background:var(--card);padding:14px;border-radius:12px;box-shadow:var(--shadow);margin-top:14px}
.muted{color:var(--muted)}

/* Dashboard layout */
.dashboard{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
.panel{padding:14px}
.devices{min-height:420px}
.results{position:sticky;top:20px}
.device-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.device-item{display:flex;gap:10px;align-items:center;background:#fff;padding:8px;border-radius:10px;border:1px solid #f1f3f4}
.device-item label{font-size:12px;color:var(--muted)}
.device-item input[type="number"]{width:100px;padding:6px;border-radius:8px;border:1px solid #eee}
.device-item .name{flex:1}

.controls{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.controls label{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}

.summary-cards{display:grid;gap:8px;margin-bottom:12px}
.totals{background:#fff;padding:12px;border-radius:10px}
.card h3{margin-top:0}

/* Responsive */
@media (max-width:880px){
  .dashboard{grid-template-columns:1fr;}
  .results{position:relative}
}