body {
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    color: #fff;
    min-height: 100vh;
    background: radial-gradient(ellipse at 100% 0%, #e2f8dc 0%, transparent 45%),
                linear-gradient(120deg, #1d3a55 0%, #3d7f80 40%, #62b58e 70%, #bfe6c8 100%) fixed;
}

/* ---------- top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px 10px 20px;
    background: #4f5b6b;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.topbar .brand { color: #d6dbe0; font-size: 22px; text-decoration: none; }
.topbar .role { font-size: 15px; padding: 4px 7px; border-radius: 0; background: #5bc0de; }
.topbar .btn-logout { margin-left: auto; border-radius: 0; padding: 10px 14px; font-size: 18px; }

.page { padding: 50px 16px 80px; }

/* ---------- dark panels ---------- */
.dash-panel {
    max-width: 1310px; margin: 0 auto 50px;
    background: rgba(45, 55, 58, .92);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    padding: 0 12px 20px;
}
.dash-panel > .head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 12px 0; margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.dash-panel > .head h2 { margin: 0; font-size: 28px; flex: 1; }
.dash-panel > .head .btn { border-radius: 0; font-size: 18px; padding: 8px 16px; }
.dash-panel h4.sub { text-align: center; font-size: 22px; margin: 25px 0 12px; }
.dash-panel hr { border-color: rgba(255,255,255,.07); }

.btn-success { background: #74b866; border-color: #74b866; }
.btn-success:hover, .btn-success:focus { background: #62a654; border-color: #62a654; }
.btn-danger { background: #d9534f; }
.form-control { border-radius: 0; height: 42px; font-size: 17px; }
.dash-panel .btn-block { border-radius: 0; font-size: 18px; padding: 9px; }

/* ---------- sensor cards ---------- */
.cards { display: flex; flex-wrap: wrap; gap: 24px; padding: 0 12px; }
.sensor-card {
    width: 236px; min-height: 82px; padding: 12px 14px;
    border-radius: 3px;
    background: linear-gradient(20deg, #12304f 0%, #2f7b86 55%, #dff5a6 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,.4);
    transition: background .3s;
}
.sensor-card .name { font-weight: 700; font-size: 18px; line-height: 1.2; }
.sensor-card .value { font-size: 19px; margin-top: 4px; }
.sensor-card.alert-on { background: linear-gradient(20deg, #5a1010 0%, #b83a3a 60%, #ffcf9e 100%); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 18px rgba(255,80,80,.9); } }

.status-line { padding: 16px 12px 0; color: #b8c4c8; font-size: 14px; }
.status-line .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #888; margin-right: 6px; }
.status-line .dot.on { background: #6fe36f; box-shadow: 0 0 6px #6fe36f; }

/* ---------- switches ---------- */
.switch-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 12px 0; }
.switch-row .btn { border-radius: 0; min-width: 140px; }

/* ---------- alarms ---------- */
.alarm-grid { display: flex; flex-wrap: wrap; gap: 24px; padding: 0 12px; }
.alarm-card { flex: 1; min-width: 260px; padding: 14px; background: rgba(255,255,255,.06); border-left: 4px solid #7f8a94; }
.alarm-card.on { border-left-color: #74b866; }
.alarm-card .name { font-size: 19px; font-weight: 700; }
.alarm-card .name small { color: #b8c4c8; font-weight: 400; }
.alarm-card .status { margin: 6px 0 12px; color: #dce4e6; min-height: 20px; }
.alarm-card .pending { color: #ffd36f; }
.alarm-card .set { display: flex; gap: 6px; }
.alarm-card .set .form-control { height: 38px; font-size: 16px; }
.alarm-card .set .btn { border-radius: 0; }
.ring-banner { margin: 0 12px 18px; padding: 12px 16px; font-size: 19px; font-weight: 700; background: #d9534f; animation: pulse 1s infinite alternate; }

/* ---------- records ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 0 12px 16px; }
.filter-bar label { display: block; font-weight: 400; color: #c8d2d6; margin-bottom: 4px; }
.filter-bar .btn { border-radius: 0; height: 42px; font-size: 16px; }
.chart-box { background: rgba(255,255,255,.04); margin: 0 12px 18px; padding: 12px; height: 300px; }
.table-wrap { margin: 0 12px; max-height: 520px; overflow: auto; }
.table-dark { color: #e8eef0; margin: 0; }
.table-dark thead th { position: sticky; top: 0; background: #26302f; border-bottom: 1px solid #4b5a5b !important; }
.table-dark > tbody > tr > td { border-top: 1px solid rgba(255,255,255,.06); }
.table-dark > tbody > tr:nth-child(odd) { background: rgba(255,255,255,.03); }
.table-dark .warn { color: #ff9a8a; font-weight: 700; }
.empty { text-align: center; padding: 30px; color: #b8c4c8; }

/* ---------- settings lists ---------- */
.item-list { background: #b0b8c2; }
.item-list .row-item { display: flex; align-items: center; padding: 14px; border-bottom: 1px solid #9ca5af; color: #f2f4f6; font-weight: 700; }
.item-list .row-item > span { flex: 1; text-align: center; }
.item-list .row-item .btn { border-radius: 0; padding: 8px 14px; font-size: 18px; }
.form-row { display: flex; flex-wrap: wrap; gap: 36px; margin-bottom: 16px; }
.form-row > * { flex: 1; min-width: 200px; }
.map-frame { width: 100%; height: 380px; border: 0; margin-top: 16px; }

.fab {
    position: fixed; right: 12px; bottom: 12px;
    width: 50px; height: 50px; border-radius: 50%;
    background: #9aa4ad; color: #fff; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.fab:hover { color: #fff; background: #7f8a94; }

/* ---------- modal ---------- */
.modal-content { background: #2d3739; color: #fff; border-radius: 0; }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.08); }
.modal .close { color: #fff; opacity: .8; }
.modal .radio label { font-size: 16px; }

/* ---------- login ---------- */
.login-box { max-width: 380px; margin: 12vh auto 0; }
.login-box h2 { margin-top: 0; text-align: center; }

@media (max-width: 600px) {
    .page { padding-top: 24px; }
    .topbar .brand { font-size: 17px; }
    .dash-panel > .head h2 { font-size: 22px; flex-basis: 100%; }
    .sensor-card { width: 100%; }
    .form-row { gap: 12px; }
}