*{box-sizing:border-box}:root{--ink:#14212b;--muted:#60717e;--line:#dce4e8;--surface:#fff;--background:#f4f7f8;--brand:#175e6b;--brand-dark:#104954;--danger-bg:#fff0f0;--danger:#8b2020}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--background)}a{color:var(--brand)}.topbar{min-height:70px;padding:12px 28px;display:flex;align-items:center;gap:28px;background:var(--surface);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;text-decoration:none;color:var(--ink)}.brand-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:700;background:var(--brand);color:#fff}.brand-mark.small{width:36px;height:36px;font-size:17px}.topbar nav{display:flex;gap:20px;flex:1}.topbar nav a{text-decoration:none;font-weight:600}.signed-in,.muted{color:var(--muted)}.page{width:min(1180px,calc(100% - 36px));margin:30px auto 60px}.page-heading,.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.page-heading{margin-bottom:24px}h1,h2{margin:0}h1{font-size:30px}h2{font-size:20px}.small-text{font-size:12px}.button,button,.secondary-button{display:inline-block;border-radius:7px;padding:11px 18px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.button,button{background:var(--brand);color:#fff;border:1px solid var(--brand)}.button:hover,button:hover{background:var(--brand-dark)}.secondary-button{color:var(--ink);background:#fff;border:1px solid var(--line)}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.metric-card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px}.metric-card{padding:20px}.metric-label{color:var(--muted);font-weight:600}.metric-value{font-size:34px;font-weight:700;margin-top:8px}.panel{padding:22px;margin-bottom:22px}.panel-heading{margin-bottom:18px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}.reading-value{font-size:18px;font-weight:700}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.detail-list{display:grid;grid-template-columns:130px 1fr;gap:10px}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0}.device-card{padding:12px 0;border-bottom:1px solid var(--line)}.form-panel{max-width:850px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:flex;flex-direction:column;gap:7px;font-weight:700}input{min-height:44px;padding:9px 11px;border:1px solid #b8c4ca;border-radius:7px;font:inherit}.form-actions{grid-column:1/-1;display:flex;gap:10px}.alert{padding:12px 14px;border-radius:7px;margin-bottom:18px}.alert.error{background:var(--danger-bg);color:var(--danger)}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);background:#fff;padding:34px;border-radius:14px;border:1px solid var(--line);box-shadow:0 10px 35px rgba(0,0,0,.08)}.login-card .brand-mark{margin:0 auto 15px}.login-card h1,.login-card>p{text-align:center}.login-card form{display:grid;gap:16px;margin-top:25px}.login-card button{width:100%}.footer-note,.site-footer{text-align:center;color:var(--muted);font-size:12px}.site-footer{padding:22px}@media(max-width:800px){.metric-grid{grid-template-columns:1fr 1fr}.detail-grid,.form-grid{grid-template-columns:1fr}.topbar{flex-wrap:wrap}.topbar nav{order:3;flex-basis:100%}}@media(max-width:520px){.metric-grid{grid-template-columns:1fr}.page{width:min(100% - 20px,1180px)}}


select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #b8c4ca;
    border-radius: 7px;
    font: inherit;
    background: white;
}

.alert.success {
    background: #edf8f0;
    color: #235c31;
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 850px;
}

.admin-action-card {
    display: block;
    min-height: 170px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
}

.admin-action-card:hover {
    border-color: var(--brand);
}

.admin-action-card h2 {
    color: var(--brand);
    margin-bottom: 12px;
}

.admin-action-card p {
    color: var(--muted);
    line-height: 1.5;
}

@media (max-width: 650px) {
    .admin-action-grid {
        grid-template-columns: 1fr;
    }
}