body{font-family:Arial,sans-serif;margin:0;background:#f3f4f6;color:#111827}
.wrap{max-width:1250px;margin:auto;padding:20px}
h1{margin:0 0 6px}
.sub{color:#4b5563;margin-bottom:18px}
nav{background:#111827;margin-bottom:20px}
nav .wrap{display:flex;align-items:center;gap:6px;padding:10px 20px}
nav a{color:#e5e7eb;text-decoration:none;font-weight:bold;font-size:14px;padding:8px 14px;border-radius:8px}
nav a:hover{background:#374151}
nav a.active{background:#374151;color:white}
.card{background:white;border-radius:12px;padding:16px;box-shadow:0 2px 8px #0001;margin-top:14px}
.card h2{margin-top:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{font-size:13px;color:#374151}
.row{display:flex;align-items:center;gap:8px}
input[type=range]{width:100%;flex:1}
output{width:80px;text-align:right;font-weight:bold;flex-shrink:0}
button{border:0;border-radius:8px;padding:10px 16px;cursor:pointer;font-weight:bold}
.btn-dark{background:#111827;color:white}
.btn-light{background:#e5e7eb}
canvas{width:100%;background:white;border-radius:12px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.metric{background:#f9fafb;padding:10px;border-radius:8px}
.metric b{display:block;font-size:18px;margin-top:4px}
.small{font-size:12px;color:#6b7280;margin-top:8px}
.status{font-size:18px;font-weight:bold;margin:8px 0}
select{padding:8px;border-radius:8px;border:1px solid #d1d5db;font-weight:bold}
/* home page */
.tiled{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:white;border-radius:12px;padding:20px;text-decoration:none;color:#111827;box-shadow:0 2px 8px #0001}
.tile:hover{transform:translateY(-3px);box-shadow:0 6px 16px #0002}
.tile h2{margin:0 0 8px}
.tile p{margin:0;color:#4b5563;font-size:14px}
@media(max-width:800px){.grid,.controls,.metrics,.grid3,.tiled{grid-template-columns:1fr}}