:root { color-scheme: light; font-family: "Segoe UI", Arial, sans-serif; color: #172330; background: #f4f7f9; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; min-height: 44px; }
button { cursor: pointer; border: 1px solid #aebbc5; background: #fff; padding: 0 16px; }
button:hover, button:focus-visible { border-color: #176b52; outline: 2px solid #b9dfd2; }
.primary { color: #fff; background: #08774d; border-color: #08774d; font-weight: 700; }
.secondary { color: #fff; background: transparent; border-color: #73808b; }
.topbar { min-height: 72px; padding: 12px clamp(16px, 3vw, 48px); display: flex; align-items: center; justify-content: space-between; background: #16222d; color: #fff; }
.topbar strong { display: block; font-size: 22px; }
.topbar span { color: #cdd7df; }
.session { display: flex; gap: 16px; align-items: center; }
main { max-width: 1500px; margin: auto; padding: clamp(16px, 3vw, 40px); }
.hidden { display: none !important; }
.login-panel { display: grid; place-items: center; min-height: calc(100vh - 150px); }
form { width: min(430px, 100%); background: #fff; border: 1px solid #d4dde4; padding: 28px; }
form h1 { margin-top: 0; }
form label { display: block; margin: 16px 0 6px; font-weight: 600; }
form input { width: 100%; border: 1px solid #9dacb8; padding: 9px 11px; }
form button { width: 100%; margin-top: 22px; }
.message { min-height: 24px; margin-top: 10px; color: #a11c2f; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.range-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.range-buttons .active { background: #243c52; color: #fff; }
.status { margin-left: auto; display: grid; grid-template-columns: 12px auto; column-gap: 8px; align-items: center; }
.status span { width: 10px; height: 10px; border-radius: 50%; background: #c88a00; }
.status small { grid-column: 2; color: #687785; }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 10px; margin-bottom: 16px; }
.metrics article, .panel { background: #fff; border: 1px solid #d4dde4; }
.metrics article { padding: 16px; }
.metrics span { display: block; color: #5c6d79; }
.metrics strong { display: block; margin-top: 6px; font-size: clamp(22px, 2vw, 32px); }
.metrics article:first-child { border-top: 4px solid #08774d; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.panel { padding: 16px; min-height: 230px; }
.panel .secondary { color:#243c52; background:#fff; }
.panel h2 { font-size: 18px; margin: 0 0 12px; }
.panel.wide { grid-column: span 3; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e5eaee; }
.row small { display: block; color: #687785; }
.user-management-row { grid-template-columns: minmax(180px,1fr) repeat(5,auto); align-items:center; }
.password-reset { min-width:160px; }
.password-reset summary { cursor:pointer; font-weight:600; }
.password-reset input { display:block; width:220px; margin-top:.5rem; padding:.5rem; }
.password-reset button { width:220px; margin-top:.4rem; }
.device-row { grid-template-columns:minmax(240px,1fr) auto auto; align-items:center; }
.one-time-secret { margin:1rem 0; padding:1rem; border:2px solid #c88a00; background:#fff8df; overflow-wrap:anywhere; }
.one-time-secret code { user-select:all; }
.empty { color: #687785; padding: 20px 0; }
footer { color: #687785; padding-top: 14px; font-size: 13px; }
@media (max-width: 1050px) { .metrics { grid-template-columns: repeat(3, 1fr); } .grid { grid-template-columns: 1fr 1fr; } .panel.wide { grid-column: span 2; } }
@media (max-width: 650px) { .topbar strong { font-size: 18px; } .metrics { grid-template-columns: 1fr 1fr; } .grid { grid-template-columns: 1fr; } .panel.wide { grid-column: auto; } .status { margin-left: 0; } .toolbar > button { width: 100%; } }
.user-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom:1rem; }
.user-form input,.user-form select,.row select { min-height:2.5rem; padding:.5rem; }
@media (max-width: 900px) { .user-management-row,.device-row { grid-template-columns:1fr; } }