:root {
  --bg: #f4f7fb;
  --card: #fff;
  --text: #172033;
  --muted: #6f7b90;
  --line: #e5eaf2;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #dbeafe;
  --green: #16a36a;
  --red: #d94a4a;
  --shadow: 0 10px 30px rgba(31, 50, 85, .07);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { height: 70px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1220px)/2)); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 17px; }
.brand-mark { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(145deg, #60a5fa, #1d4ed8); box-shadow: inset 0 0 0 5px rgba(255,255,255,.2); }
nav { display: flex; align-items: center; gap: 24px; color: #45516a; } nav form { margin: 0; }
.link-button, .danger-text { border: 0; background: none; color: inherit; padding: 0; }
.danger-text { color: var(--red); }
.container { max-width: 1220px; margin: 0 auto; padding: 40px 24px 70px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 25px; }
h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.035em; } h2 { font-size: 20px; margin-bottom: 8px; } h3 { font-size: 16px; }
.eyebrow { color: var(--blue); font-size: 12px; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; margin-bottom: 5px; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.button, button.primary, button.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 17px; border-radius: 11px; font-weight: 700; border: 1px solid transparent; }
.primary { background: var(--blue); color: white; border-color: var(--blue) !important; } .primary:hover { background: var(--blue-dark); }
.secondary { background: white; color: #344054; border-color: #d8deea !important; }
.statusline { background: #eef3fa; color: #59657a; padding: 10px 14px; border-radius: 10px; margin-bottom: 22px; font-size: 13px; }
.statusline.error { color: #a73535; background: #fff0f0; }.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--green); }.error .status-dot { background: var(--red); }
.user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 18px; }
.user-card { padding: 22px; transition: .18s ease; } .user-card:hover { transform: translateY(-2px); border-color: #cbd7e9; box-shadow: 0 15px 35px rgba(31,50,85,.11); }
.user-card-top, .title-line, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--blue-soft); color: var(--blue-dark); font-size: 20px; font-weight: 800; }
.user-card h2 { margin: 17px 0 2px; font-size: 23px; }.user-card p { min-height: 23px; }
.presence { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 750; padding: 6px 9px; border-radius: 20px; background: #f0f2f6; color: #667085; }.presence span { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; }.presence.online { background: #e8f8f1; color: #087b50; }.presence.online span { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,106,.13); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.metrics > div { display: flex; flex-direction: column; }.metrics strong { font-size: 17px; }.metrics span, .metrics small { color: var(--muted); font-size: 12px; }.metrics.compact { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 18px; }
.empty { text-align: center; padding: 65px 25px; }.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--blue-soft); color: var(--blue); font-size: 28px; margin: 0 auto 16px; }
.login-card { width: min(430px, 100%); margin: 9vh auto 0; padding: 34px; }.login-card h1 { font-size: 32px; }.stack { display: grid; gap: 18px; }.stack label, .device-row label { display: grid; gap: 6px; color: #4b566c; font-size: 13px; font-weight: 650; }
input, select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d8deea; border-radius: 10px; background: white; color: var(--text); } input:focus, select:focus { outline: 3px solid rgba(37,99,235,.12); border-color: #7ca4ef; }.alert { color: #a73535; background: #fff0f0; border-radius: 9px; padding: 10px 12px; margin-bottom: 16px; }
.manage-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(550px, 1.5fr); gap: 18px; align-items: start; }.panel { padding: 23px; }.wide { min-width: 0; }.inline-form { display: flex; gap: 8px; align-items: center; }.inline-form.grow { flex: 1; }.add-form { padding-bottom: 18px; border-bottom: 1px solid var(--line); }.edit-row { display: flex; align-items: center; gap: 13px; padding-top: 13px; }.device-list { display: grid; gap: 12px; }.device-row { display: grid; grid-template-columns: minmax(200px, 1fr) 170px 185px auto; gap: 13px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }.device-identity { display: grid; grid-template-columns: 8px 1fr; gap: 0 10px; align-items: center; }.device-identity label { grid-column: 2; }.device-identity code { grid-column: 2; color: var(--muted); font-size: 11px; }.device-dot { grid-row: 1/3; width: 8px; height: 8px; background: var(--blue); border-radius: 50%; }.check { display: flex !important; flex-direction: row; align-items: center; min-height: 42px; }.check input { width: 17px; min-height: 17px; }.empty-inline { padding: 30px; text-align: center; border: 1px dashed #cdd5e2; border-radius: 13px; }.empty-inline p { margin-bottom: 5px; }
.back { display: inline-block; color: var(--muted); margin-bottom: 6px; }.title-line { justify-content: flex-start; }.hero-metrics { margin: 26px 0 18px; }.hero-metrics > div { padding: 20px; }.hero-metrics strong { font-size: 24px; margin-top: 5px; }.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.span-2 { grid-column: span 2; }.section-head { align-items: flex-start; }.section-head p { margin-bottom: 12px; }
.bar-chart { height: 250px; display: flex; align-items: end; gap: 10px; border-bottom: 1px solid var(--line); padding-top: 35px; }.bar-column { height: 100%; min-width: 0; flex: 1; display: grid; grid-template-rows: 20px 1fr 28px; text-align: center; color: var(--muted); font-size: 10px; }.bar-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.bar-track { display: flex; align-items: end; justify-content: center; }.bar { width: min(30px, 75%); min-height: 3px; border-radius: 7px 7px 2px 2px; background: linear-gradient(#60a5fa, #2563eb); }.bar-column > span { padding-top: 7px; }
.horizontal-bars { display: grid; gap: 14px; margin-top: 19px; }.hbar-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }.hbar-label strong { font-size: 12px; }.hbar-track { height: 8px; border-radius: 8px; background: #edf1f6; overflow: hidden; }.hbar-track div { height: 100%; border-radius: inherit; background: var(--blue); }.window-list { display: grid; gap: 8px; margin-top: 18px; }.window-list > div { display: grid; grid-template-columns: 1fr auto 50px; align-items: center; gap: 10px; padding: 10px 12px; background: #f7f9fc; border-radius: 10px; }.window-list span { color: #4f5c73; }.window-list em { font-style: normal; color: var(--blue); font-weight: 750; text-align: right; }
.legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; }.legend i { width: 13px; height: 13px; border-radius: 3px; background: rgba(37,99,235,.2); }.legend i:nth-of-type(2) { background: rgba(37,99,235,.4); }.legend i:nth-of-type(3) { background: rgba(37,99,235,.65); }.legend i:nth-of-type(4) { background: rgba(37,99,235,1); }.heatmap-wrap { overflow-x: auto; padding-top: 10px; }.heatmap-hours { min-width: 800px; padding-left: 36px; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-bottom: 5px; }.heatmap-row { min-width: 800px; display: grid; grid-template-columns: 30px 1fr; align-items: center; margin-bottom: 4px; }.heatmap-row > strong { font-size: 11px; color: var(--muted); }.heatmap-cells { display: grid; grid-template-columns: repeat(48, 1fr); gap: 2px; }.heatmap-cells i { aspect-ratio: 1; min-height: 10px; border-radius: 2px; background: rgba(37,99,235, calc(.06 + var(--heat) * .94)); }
.calendar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.mini-calendar h3 { text-align: center; margin: 5px 0 10px; }.calendar-weekdays, .calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }.calendar-weekdays span { text-align: center; color: var(--muted); font-size: 10px; }.calendar-week span { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #edf0f5; border-radius: 7px; font-size: 11px; background: white; }.calendar-week span.present { color: white; background: var(--blue); border-color: var(--blue); font-weight: 750; }.calendar-week span.future { color: #c4cad4; background: #fafbfc; }.calendar-week span.blank { visibility: hidden; }
@media (max-width: 850px) { .manage-grid, .content-grid { grid-template-columns: 1fr; }.span-2 { grid-column: span 1; }.device-row { grid-template-columns: 1fr 1fr; }.calendar-grid { grid-template-columns: 1fr; }.hero-metrics { grid-template-columns: 1fr; }.topbar nav a { display: none; }.page-head { align-items: flex-start; flex-direction: column; }.weekly-bars { overflow-x: auto; }.bar-column { min-width: 54px; } }
@media (max-width: 520px) { .container { padding: 28px 15px 50px; }.topbar { padding: 0 15px; }.device-row { grid-template-columns: 1fr; }.metrics.compact { grid-template-columns: 1fr 1fr; }.login-card { padding: 25px; }.legend { display: none; } }