:root {
  --navy-950: #07111f;
  --navy-900: #0b1728;
  --navy-800: #13243a;
  --navy-700: #223854;
  --ink: #182434;
  --muted: #6d7b8f;
  --line: #e3e9f0;
  --surface: #ffffff;
  --canvas: #f3f6f9;
  --teal: #17a990;
  --teal-dark: #0c806f;
  --blue: #377cf6;
  --amber: #e99a22;
  --red: #db4b58;
  --violet: #7b62d5;
  --radius: 16px;
  --shadow: 0 8px 25px rgba(22, 38, 60, .07);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
small { display: block; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  color: #dbe6f3;
  background: var(--navy-950);
  border-right: 1px solid rgba(255,255,255,.06);
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 24px; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto;
  color: #fff; background: var(--teal); border-radius: 11px; font-weight: 850; font-size: 21px;
  box-shadow: 0 8px 18px rgba(23,169,144,.25);
}
.brand strong { display: block; color: #fff; letter-spacing: .07em; font-size: 14px; }
.brand span { color: #7890aa; font-size: 12px; }
.nav-list { display: grid; gap: 5px; }
.nav-item {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; border: 0;
  padding: 9px 11px; color: #9db0c5; background: transparent; border-radius: 10px;
  cursor: pointer; text-align: left; transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-item.is-active { color: #fff; background: rgba(23,169,144,.17); box-shadow: inset 3px 0 var(--teal); }
.nav-symbol { width: 22px; height: 22px; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 20px; text-align: center; color: #b7c7d9; background: rgba(255,255,255,.08); font-size: 11px; }
.nav-count--danger { color: #ffdce0; background: rgba(219,75,88,.3); }
.sidebar-footer { margin-top: auto; }
.monitoring-status { display: flex; align-items: center; gap: 10px; margin: 14px 5px 0; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.045); }
.monitoring-status strong { display: block; color: #dbe8f4; font-size: 12px; }
.monitoring-status small { color: #7188a0; font-size: 10px; margin-top: 2px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ed3a9; box-shadow: 0 0 0 5px rgba(46,211,169,.12); }

.app-main { min-height: 100vh; margin-left: 248px; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 72px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; padding: 0 30px; background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
}
.search-wrap { width: min(440px, 42vw); height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; color: #8391a3; }
.search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.search-wrap input::placeholder { color: #98a5b4; }
kbd { padding: 2px 6px; border: 1px solid #d7dee6; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: #7f8b9b; font-size: 10px; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.sync-button, .icon-button { border: 1px solid var(--line); background: #fff; cursor: pointer; }
.sync-button { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 9px; color: #4e6075; font-size: 12px; font-weight: 700; }
.sync-button:hover { border-color: #becad7; color: var(--ink); }
.icon-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; }
.notification-button b { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-size: 9px; }
.user-chip { display: flex; align-items: center; gap: 9px; margin-left: 3px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--navy-800); color: #fff; font-size: 11px; font-weight: 800; }
.user-chip strong { display: block; font-size: 12px; }
.user-chip small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.mobile-menu { display: none; }

.content { padding: 30px; }
.page { display: none; animation: pageIn .22s ease; }
.page.is-active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 5px; font-size: clamp(25px, 3vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.page-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow { margin: 0; color: var(--teal-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.heading-actions { display: flex; align-items: center; gap: 12px; }
.freshness { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.freshness i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(23,169,144,.11); }
.button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 750; }
.button--primary { color: #fff; background: var(--teal); box-shadow: 0 5px 12px rgba(23,169,144,.17); }
.button--primary:hover { background: var(--teal-dark); }
.button--secondary { color: #405268; background: #fff; border-color: var(--line); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--teal-dark); font-size: 11px; font-weight: 750; cursor: pointer; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { display: flex; align-items: center; gap: 13px; min-height: 110px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.kpi-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; font-weight: 800; }
.kpi-icon--blue { color: var(--blue); background: #edf4ff; }.kpi-icon--teal { color: var(--teal-dark); background: #e8f8f4; }.kpi-icon--amber { color: #b5710e; background: #fff5e4; }.kpi-icon--violet { color: var(--violet); background: #f2effd; }
.kpi-card span { color: var(--muted); font-size: 11px; font-weight: 650; }
.kpi-card strong { display: block; margin: 2px 0 3px; font-size: 26px; line-height: 1; }
.kpi-card small { color: #8996a5; font-size: 10px; }
.kpi-card small b { font-weight: 700; }
.text-success { color: var(--teal-dark)!important; }.text-danger { color: var(--red)!important; }

.dashboard-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.dashboard-grid--main { grid-template-columns: minmax(0, 1.65fr) minmax(310px, .85fr); }
.dashboard-grid--lower { grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 12px; }
.panel-heading h2, .settings-card h2 { margin: 0 0 3px; font-size: 14px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }.legend i { width: 7px; height: 7px; border-radius: 50%; }.legend-ok { background: var(--teal); }.legend-warn { background: var(--amber); }
.health-chart { padding: 0 16px; }
.health-chart svg { display: block; width: 100%; max-height: 250px; }
.chart-grid-lines line { stroke: #e9eef4; stroke-width: 1; }
.chart-area { fill: url(#areaGradient); }.chart-line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; }.chart-points circle { fill: #fff; stroke: var(--teal); stroke-width: 2.5; }.chart-labels text { fill: #8a97a6; font-size: 10px; text-anchor: middle; }
.availability-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.availability-strip div { padding: 13px 18px; border-right: 1px solid var(--line); }.availability-strip div:last-child { border-right: 0; }.availability-strip span { display: block; color: var(--muted); font-size: 9px; }.availability-strip strong { display: block; margin-top: 3px; font-size: 15px; }

.risk-list { padding: 0 14px; }.risk-row { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 12px 5px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }.risk-row:hover { background: #f8fafc; }.device-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #4e657e; background: #edf2f7; font-size: 9px; font-weight: 800; }.risk-row strong { display: block; font-size: 11px; }.risk-row small { color: var(--muted); font-size: 9px; margin: 2px 0 6px; }.risk-row em { font-style: normal; font-size: 9px; font-weight: 750; }.danger { color: var(--red); }.warning { color: #b6781b; }
.progress { height: 5px; display: block; overflow: hidden; border-radius: 8px; background: #edf1f5; }.progress b { height: 100%; display: block; border-radius: inherit; background: var(--amber); }.risk-row:first-child .progress b { background: var(--red); }.progress--ok b { background: var(--teal); }
.risk-footer { display: flex; justify-content: space-between; padding: 14px 18px; color: var(--muted); font-size: 10px; }.risk-footer strong { color: var(--ink); }

.table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; }.data-table th { padding: 11px 14px; color: #8a97a6; background: #fafbfd; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }.data-table td { padding: 13px 14px; border-bottom: 1px solid #edf1f5; color: #526176; font-size: 10px; vertical-align: middle; }.data-table tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: #fbfcfd; }.data-table td strong { display: block; color: var(--ink); font-size: 10px; }.data-table td small { color: #8a97a6; font-size: 9px; margin-top: 2px; }.compact-table th:first-child, .compact-table td:first-child { padding-left: 20px; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; padding: 4px 8px; border-radius: 20px; font-size: 8px; font-weight: 800; letter-spacing: .02em; }.status-badge--online { color: #087561; background: #e5f7f2; }.status-badge--warning { color: #9b6110; background: #fff2dc; }.status-badge--critical { color: #b32c3a; background: #fee8ea; }.status-badge--offline { color: #607086; background: #e9eef3; }

.donut-layout { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 8px 20px 18px; }.donut { width: 124px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) 0 92%, var(--red) 92% 98%, #dce3eb 98%); position: relative; }.donut::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #fff; }.donut span { position: relative; z-index: 1; text-align: center; }.donut strong { display: block; font-size: 22px; }.donut small { color: var(--muted); font-size: 9px; }.backup-legend { display: grid; gap: 10px; min-width: 120px; }.backup-legend div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; font-size: 9px; }.backup-legend span { color: var(--muted); }.dot { width: 7px; height: 7px; border-radius: 50%; }.dot--success { background: var(--teal); }.dot--danger { background: var(--red); }.dot--warning { background: var(--amber); }.dot--muted { background: #b7c2cf; }.product-pills { display: flex; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); }.product-pills span { flex: 1; padding: 7px; border-radius: 8px; color: var(--muted); background: #f5f7f9; font-size: 8px; text-align: center; }.product-pills b { color: var(--ink); }

.customer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.customer-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.customer-head { display: flex; align-items: center; gap: 11px; }.customer-logo { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: var(--navy-800); color: #fff; font-weight: 800; }.customer-head h2 { margin: 0; font-size: 13px; }.customer-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.customer-head .status-badge { margin-left: auto; }.customer-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; }.customer-stats div { padding: 10px; border-right: 1px solid var(--line); }.customer-stats div:last-child { border-right: 0; }.customer-stats span { display: block; color: var(--muted); font-size: 8px; }.customer-stats strong { display: block; margin-top: 2px; font-size: 13px; }.customer-card footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }.customer-card footer button { color: var(--teal-dark); }

.filter-bar { display: grid; grid-template-columns: 210px 170px minmax(220px, 1fr); gap: 12px; margin-bottom: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }.filter-bar label, .settings-card label { display: grid; gap: 5px; }.filter-bar label span, .settings-card label > span:first-child { color: var(--muted); font-size: 9px; font-weight: 700; }.filter-bar select, .filter-bar input, .settings-card select, .settings-card input { height: 37px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); outline: none; font-size: 10px; }.filter-bar select:focus, .filter-bar input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,169,144,.1); }.table-panel { overflow: hidden; }.device-health { display: flex; align-items: center; gap: 6px; }.device-health i { width: 7px; height: 7px; border-radius: 50%; }.device-health--ok i { background: var(--teal); }.device-health--warn i { background: var(--amber); }.device-health--off i { background: #aab6c4; }.row-action { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #516277; font-size: 9px; cursor: pointer; }

.nas-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.nas-card { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.nas-card-head { display: flex; align-items: center; gap: 11px; }.nas-illustration { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 10px; background: #e8eef5; color: #435972; font-size: 9px; font-weight: 900; box-shadow: inset 0 -5px #d8e1ea; }.nas-card-head h2 { margin: 0; font-size: 13px; }.nas-card-head p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.nas-card-head .status-badge { margin-left: auto; }.nas-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }.nas-metrics div { padding: 10px; border-radius: 9px; background: #f7f9fb; }.nas-metrics span { display: block; color: var(--muted); font-size: 8px; }.nas-metrics strong { display: block; margin-top: 3px; font-size: 9px; }.volume div { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 9px; }.disk-bays { display: flex; gap: 7px; margin-top: 14px; }.bay { width: 34px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid; border-radius: 7px; font-size: 9px; font-weight: 800; }.bay small { margin-top: 2px; font-size: 7px; }.bay--ok { color: var(--teal-dark); border-color: #7bd6c6; background: #ecfaf7; }.bay--warn { color: #a0660d; border-color: #f2bf70; background: #fff6e8; }.nas-card--offline { opacity: .78; }.offline-message { margin-top: 24px; padding: 18px; border-radius: 10px; background: #f2f5f8; text-align: center; }.offline-message strong { display: block; font-size: 11px; }.offline-message span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }

.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }.mini-kpis > div { display: flex; align-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }.metric-dot { width: 10px; height: 36px; border-radius: 8px; }.metric-dot--success { background: var(--teal); }.metric-dot--danger { background: var(--red); }.metric-dot--warning { background: var(--amber); }.metric-dot--muted { background: #aab5c2; }.mini-kpis strong { display: block; font-size: 18px; }.mini-kpis small { color: var(--muted); font-size: 9px; }.product-tag { display: inline-flex; padding: 4px 7px; border-radius: 5px; font-size: 8px; font-weight: 800; }.product-tag--veeam { color: #137943; background: #e5f5eb; }.product-tag--aomei { color: #1c5ca8; background: #e9f2ff; }.product-tag--acronis { color: #6c43a7; background: #f1eafb; }.product-tag--synology { color: #815f08; background: #fff4ce; }

.incident-list { display: grid; gap: 12px; }.incident { display: flex; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--line); border-left: 4px solid; border-radius: 12px; box-shadow: var(--shadow); }.incident--critical { border-left-color: var(--red); }.incident--warning { border-left-color: var(--amber); }.incident-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #f3f5f7; font-weight: 900; }.incident-body { flex: 1; }.incident-body > div:first-child { display: flex; justify-content: space-between; align-items: center; }.incident-body > div:first-child small { color: var(--muted); font-size: 9px; }.incident-body h2 { margin: 9px 0 3px; font-size: 13px; }.incident-body p { margin: 0; color: var(--muted); font-size: 10px; }.incident-body footer { display: flex; justify-content: space-between; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }

.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.report-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.report-preview { height: 112px; display: grid; place-items: center; position: relative; overflow: hidden; color: #fff; }.report-preview::before, .report-preview::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); }.report-preview::before { width: 150px; height: 150px; top: -80px; right: -20px; }.report-preview::after { width: 90px; height: 90px; left: -20px; bottom: -50px; }.report-preview span { font-size: 32px; font-weight: 900; opacity: .88; }.report-preview--health { background: #176d65; }.report-preview--backup { background: #3b5fa5; }.report-preview--storage { background: #7a5d30; }.report-card > div:last-child { padding: 15px; }.report-card h2 { margin: 0 0 5px; font-size: 12px; }.report-card p { min-height: 32px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.report-card footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }.report-card footer a { color: var(--teal-dark); font-weight: 750; }.schedule-panel { margin-top: 18px; padding: 18px; }.schedule-panel > div:first-child h2 { margin: 0; font-size: 13px; }.schedule-panel > div:first-child p { margin: 3px 0 12px; color: var(--muted); font-size: 9px; }.schedule-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }.schedule-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #eef3f7; font-size: 9px; font-weight: 800; }.schedule-row strong { display: block; font-size: 10px; }.schedule-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }

.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.settings-card { display: grid; align-content: start; gap: 13px; padding: 18px; }.toggle-row { grid-template-columns: 1fr auto; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }.toggle-row strong { display: block; font-size: 10px; }.toggle-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }.toggle-row input { accent-color: var(--teal); }

.device-dialog { width: min(620px, calc(100vw - 30px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 28px 80px rgba(7,17,31,.28); }.device-dialog::backdrop { background: rgba(7,17,31,.52); backdrop-filter: blur(3px); }.dialog-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 19px; }.dialog-content { padding: 24px; }.dialog-content h2 { margin: 0 0 3px; }.dialog-content > p { margin: 0 0 18px; color: var(--muted); font-size: 10px; }.dialog-device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.dialog-device-grid div { padding: 12px; border-radius: 10px; background: #f5f7f9; }.dialog-device-grid span { display: block; color: var(--muted); font-size: 8px; }.dialog-device-grid strong { display: block; margin-top: 3px; font-size: 10px; }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 80; max-width: 320px; padding: 12px 16px; border-radius: 10px; background: var(--navy-900); color: #fff; box-shadow: 0 12px 30px rgba(7,17,31,.25); font-size: 10px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .2s ease; }.toast.is-visible { opacity: 1; transform: none; }

/* Printable report */
.report-body { background: #dfe5eb; }.report-toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 12px max(20px, calc((100vw - 960px) / 2)); color: #dbe7f2; background: var(--navy-950); }.report-toolbar a { font-size: 11px; }.report-toolbar > div { display: flex; align-items: center; gap: 12px; }.report-toolbar span { color: #8397ad; font-size: 10px; }.print-report { width: min(960px, calc(100vw - 30px)); margin: 24px auto; background: #fff; box-shadow: 0 20px 60px rgba(17,31,49,.14); }.report-cover { min-height: 520px; display: grid; grid-template-columns: 1fr auto; align-content: space-between; gap: 40px; padding: 54px 60px; color: #fff; background: var(--navy-950); position: relative; overflow: hidden; }.report-cover::after { content: ""; position: absolute; width: 520px; height: 520px; right: -220px; bottom: -280px; border: 100px solid rgba(23,169,144,.16); border-radius: 50%; }.report-brand { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }.report-brand strong { display: block; letter-spacing: .08em; }.report-brand span { display: block; margin-top: 2px; color: #8fa4ba; font-size: 10px; }.report-meta { text-align: right; position: relative; z-index: 1; }.report-meta span { display: block; color: #6f869f; font-size: 9px; letter-spacing: .13em; }.report-meta strong { display: block; margin-top: 5px; font-size: 13px; }.report-title-block { grid-column: 1 / -1; align-self: center; position: relative; z-index: 1; }.report-title-block p { margin: 0 0 6px; color: var(--teal); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }.report-title-block h1 { margin: 0 0 12px; font-size: 43px; letter-spacing: -.045em; }.report-title-block span { display: block; max-width: 520px; color: #a7b7c8; font-size: 13px; line-height: 1.55; }.report-cover-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }.report-cover-stats div { padding: 16px; border-right: 1px solid rgba(255,255,255,.12); }.report-cover-stats div:last-child { border-right: 0; }.report-cover-stats span { display: block; color: #8096ad; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }.report-cover-stats strong { display: block; margin-top: 5px; font-size: 19px; }
.report-section { padding: 48px 60px 10px; }.report-section-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }.report-section-heading > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--navy-900); color: #fff; font-size: 9px; font-weight: 800; }.report-section-heading h2 { margin: 0; font-size: 19px; }.report-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }.summary-callout { display: grid; grid-template-columns: 62px 1fr; gap: 16px; padding: 19px; border: 1px solid #cfe9e3; border-radius: 12px; background: #f2fbf8; }.summary-score { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--teal); font-size: 20px; font-weight: 900; }.summary-callout strong { font-size: 12px; }.summary-callout p { margin: 4px 0 0; color: #637487; font-size: 9px; line-height: 1.6; }.report-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; }.report-kpi-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }.report-kpi-grid span { color: var(--muted); font-size: 8px; }.report-kpi-grid strong { display: block; margin: 5px 0; font-size: 17px; }.report-kpi-grid small { color: #8795a5; font-size: 7px; line-height: 1.4; }.report-table { width: 100%; border-collapse: collapse; }.report-table th { padding: 10px; color: var(--muted); background: #f6f8fa; border-bottom: 1px solid var(--line); font-size: 8px; text-align: left; text-transform: uppercase; }.report-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 9px; }.report-note { margin-top: 12px; padding: 11px; border-left: 3px solid var(--blue); background: #f2f6fd; color: #5f6e80; font-size: 8px; }.storage-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.storage-report-grid article { padding: 15px; border: 1px solid var(--line); border-radius: 11px; }.storage-report-grid header, .capacity-line, .storage-report-grid footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.storage-report-grid header strong { display: block; font-size: 10px; }.storage-report-grid header div span { color: var(--muted); font-size: 8px; }.capacity-line { margin: 14px 0 6px; font-size: 8px; }.storage-report-grid footer { margin-top: 10px; color: var(--muted); font-size: 8px; }.backup-report-summary { display: flex; align-items: center; justify-content: center; gap: 34px; margin-bottom: 20px; }.donut--report { width: 116px; background: conic-gradient(var(--teal) 0 96%, var(--amber) 96%); }.backup-report-summary h3 { margin: 0 0 9px; font-size: 12px; }.backup-report-summary ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 9px; }.backup-report-summary li { display: flex; align-items: center; gap: 7px; }.recommendations { display: grid; gap: 9px; }.recommendations article { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }.recommendations article > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--navy-800); font-size: 8px; font-weight: 800; }.recommendations strong { font-size: 9px; }.recommendations p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }.recommendations em { padding: 4px 7px; border-radius: 20px; color: #a62f3a; background: #fde8ea; font-size: 7px; font-style: normal; font-weight: 800; }.recommendations em.medium { color: #965e0b; background: #fff2dc; }.recommendations em.low { color: #19745f; background: #e7f7f3; }.report-footer { display: flex; justify-content: space-between; margin-top: 46px; padding: 22px 60px; color: #8da0b4; background: var(--navy-950); }.report-footer strong { color: #fff; font-size: 9px; }.report-footer span { display: block; margin-top: 3px; font-size: 7px; }.report-footer > div:last-child { text-align: right; }

@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid--main, .dashboard-grid--lower { grid-template-columns: 1fr; }.customer-grid, .report-grid, .settings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 36px rgba(7,17,31,.25); }.sidebar.is-open { transform: none; }.app-main { margin-left: 0; }.mobile-menu { display: grid; }.topbar { padding: 0 15px; }.search-wrap { flex: 1; width: auto; }.search-wrap kbd, .sync-button, .user-chip > div:last-child { display: none; }.content { padding: 20px 15px; }.page-heading { align-items: flex-start; flex-direction: column; }.heading-actions { width: 100%; justify-content: space-between; }.nas-grid { grid-template-columns: 1fr; }.filter-bar { grid-template-columns: 1fr 1fr; }.filter-search { grid-column: 1 / -1; }.report-cover { padding: 40px 34px; }.report-section { padding: 38px 34px 8px; }.report-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .kpi-grid, .customer-grid, .report-grid, .settings-grid, .mini-kpis { grid-template-columns: 1fr; }.topbar-actions .notification-button { display: none; }.availability-strip { grid-template-columns: 1fr; }.availability-strip div { border-right: 0; border-bottom: 1px solid var(--line); }.filter-bar { grid-template-columns: 1fr; }.filter-search { grid-column: auto; }.nas-metrics { grid-template-columns: 1fr; }.report-cover { grid-template-columns: 1fr; min-height: auto; }.report-meta { text-align: left; }.report-cover-stats { grid-template-columns: repeat(2, 1fr); }.storage-report-grid { grid-template-columns: 1fr; }.report-kpi-grid { grid-template-columns: 1fr 1fr; }.backup-report-summary { flex-direction: column; }.report-toolbar span { display: none; } }

@media print {
  @page { size: A4; margin: 0; }
  body.report-body { background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .no-print { display: none!important; }
  .print-report { width: 100%; margin: 0; box-shadow: none; }
  .report-cover { min-height: 297mm; padding: 24mm 18mm; break-after: page; }
  .report-section { padding: 15mm 18mm 4mm; }
  .page-break-before { break-before: page; }
  .report-footer { margin-top: 12mm; padding: 7mm 18mm; }
  .report-table tr, .storage-report-grid article, .recommendations article { break-inside: avoid; }
}

/* COMTECH brand refresh — metallic navy, electric blue and glass panels */
body:not(.report-body) {
  --ink: #edf8ff;
  --muted: #87a2ba;
  --line: rgba(73, 181, 242, .22);
  --surface: rgba(7, 26, 43, .86);
  --canvas: #061321;
  --teal: #00bfff;
  --teal-dark: #5bdcff;
  --blue: #25bfff;
  --amber: #ffb54a;
  --red: #ff6171;
  --violet: #9b8cff;
  --shadow: 0 18px 46px rgba(0, 6, 16, .34), inset 0 1px 0 rgba(185, 228, 255, .05);
  min-height: 100vh;
  color: var(--ink);
  background-color: #061321;
  background-image:
    linear-gradient(120deg, rgba(2, 11, 22, .88), rgba(5, 29, 51, .72) 48%, rgba(2, 18, 35, .84)),
    url("comtech-background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body:not(.report-body) .app-shell { background: linear-gradient(135deg, rgba(3, 13, 25, .18), rgba(0, 137, 204, .035)); }
body:not(.report-body) .sidebar {
  width: 270px;
  padding: 18px 14px 16px;
  color: #dcefff;
  background: linear-gradient(180deg, rgba(2, 13, 25, .97), rgba(3, 22, 38, .95));
  border-right-color: rgba(41, 184, 255, .2);
  box-shadow: 12px 0 42px rgba(0, 5, 14, .38), inset -1px 0 rgba(255, 255, 255, .025);
  backdrop-filter: blur(18px);
}
body:not(.report-body) .brand { display: grid; gap: 8px; padding: 0 5px 18px; }
body:not(.report-body) .brand-logo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .34));
}
body:not(.report-body) .brand-portal-label {
  padding: 0 7px;
  color: #68d7ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-align: right;
  text-transform: uppercase;
}
body:not(.report-body) .nav-list { gap: 6px; }
body:not(.report-body) .nav-item { color: #93aec5; border: 1px solid transparent; }
body:not(.report-body) .nav-item:hover { color: #fff; background: rgba(17, 153, 220, .11); border-color: rgba(58, 195, 255, .12); }
body:not(.report-body) .nav-item.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 177, 240, .25), rgba(0, 126, 192, .09));
  border-color: rgba(79, 207, 255, .22);
  box-shadow: inset 3px 0 #17c8ff, 0 8px 24px rgba(0, 129, 200, .09);
}
body:not(.report-body) .nav-symbol { color: #62d8ff; text-shadow: 0 0 14px rgba(52, 204, 255, .45); }
body:not(.report-body) .nav-count { color: #c7eaff; background: rgba(46, 180, 239, .13); border: 1px solid rgba(83, 204, 255, .12); }
body:not(.report-body) .nav-count--danger { color: #ffdce2; background: rgba(255, 74, 99, .24); border-color: rgba(255, 112, 132, .18); }
body:not(.report-body) .monitoring-status { background: rgba(10, 51, 79, .48); border: 1px solid rgba(74, 191, 244, .12); }
body:not(.report-body) .monitoring-status strong { color: #e7f7ff; }
body:not(.report-body) .monitoring-status small { color: #718fa8; }
body:not(.report-body) .live-dot { background: #33e6ad; box-shadow: 0 0 0 5px rgba(51, 230, 173, .1), 0 0 15px rgba(51, 230, 173, .45); }

body:not(.report-body) .app-main { margin-left: 270px; background: rgba(3, 16, 29, .38); }
body:not(.report-body) .topbar {
  background: rgba(4, 19, 34, .88);
  border-bottom-color: rgba(74, 185, 240, .18);
  box-shadow: 0 10px 32px rgba(0, 4, 12, .22);
  backdrop-filter: blur(20px);
}
body:not(.report-body) .search-wrap,
body:not(.report-body) .sync-button,
body:not(.report-body) .icon-button,
body:not(.report-body) .button--secondary,
body:not(.report-body) .row-action {
  color: #b5cfe3;
  background: rgba(10, 37, 59, .82);
  border-color: rgba(78, 184, 235, .2);
}
body:not(.report-body) .search-wrap:focus-within { border-color: rgba(50, 203, 255, .7); box-shadow: 0 0 0 3px rgba(0, 185, 255, .08); }
body:not(.report-body) .search-wrap input { color: #ecf8ff; }
body:not(.report-body) .search-wrap input::placeholder { color: #6f8ca5; }
body:not(.report-body) kbd { color: #93b5cd; background: rgba(1, 13, 25, .8); border-color: rgba(80, 173, 221, .2); }
body:not(.report-body) .sync-button:hover,
body:not(.report-body) .icon-button:hover,
body:not(.report-body) .button--secondary:hover,
body:not(.report-body) .row-action:hover { color: #fff; border-color: rgba(66, 208, 255, .58); background: rgba(11, 63, 94, .86); }
body:not(.report-body) .avatar { color: #e8f9ff; background: linear-gradient(145deg, #005e91, #0abaf0); box-shadow: 0 0 20px rgba(0, 182, 242, .2); }
body:not(.report-body) .user-chip small { color: #7794ab; }

body:not(.report-body) .content { position: relative; }
body:not(.report-body) .page-heading h1 { color: #f5fbff; text-shadow: 0 3px 22px rgba(0, 0, 0, .28); }
body:not(.report-body) .eyebrow { color: #52d8ff; }
body:not(.report-body) .freshness i { background: #2de1ad; box-shadow: 0 0 0 4px rgba(45, 225, 173, .09), 0 0 14px rgba(45, 225, 173, .42); }
body:not(.report-body) .button--primary {
  color: #fff;
  background: linear-gradient(135deg, #007bb8, #00bdf2);
  border-color: rgba(132, 228, 255, .22);
  box-shadow: 0 8px 24px rgba(0, 169, 232, .22), inset 0 1px rgba(255, 255, 255, .2);
}
body:not(.report-body) .button--primary:hover { background: linear-gradient(135deg, #008dca, #24d0ff); }
body:not(.report-body) .text-button { color: #61d9ff; }

body:not(.report-body) .kpi-card,
body:not(.report-body) .panel,
body:not(.report-body) .customer-card,
body:not(.report-body) .filter-bar,
body:not(.report-body) .nas-card,
body:not(.report-body) .mini-kpis > div,
body:not(.report-body) .incident,
body:not(.report-body) .report-card,
body:not(.report-body) .settings-card {
  color: var(--ink);
  background: linear-gradient(145deg, rgba(11, 36, 57, .91), rgba(4, 22, 39, .88));
  border-color: rgba(77, 190, 242, .2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
body:not(.report-body) .kpi-card { position: relative; overflow: hidden; }
body:not(.report-body) .kpi-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -52px;
  bottom: -62px;
  border: 1px solid rgba(52, 200, 255, .11);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(0, 180, 255, .05);
}
body:not(.report-body) .kpi-icon { border: 1px solid rgba(105, 214, 255, .16); box-shadow: inset 0 1px rgba(255, 255, 255, .05); }
body:not(.report-body) .kpi-icon--blue { color: #60d8ff; background: rgba(0, 135, 210, .14); }
body:not(.report-body) .kpi-icon--teal { color: #3de6c2; background: rgba(24, 188, 151, .12); }
body:not(.report-body) .kpi-icon--amber { color: #ffc363; background: rgba(236, 155, 35, .12); }
body:not(.report-body) .kpi-icon--violet { color: #b0a5ff; background: rgba(128, 103, 221, .14); }
body:not(.report-body) .kpi-card small,
body:not(.report-body) .panel-heading p,
body:not(.report-body) .customer-head p { color: #7f9bb2; }
body:not(.report-body) .text-success { color: #3be4b5 !important; }
body:not(.report-body) .text-danger { color: #ff7a88 !important; }

body:not(.report-body) .chart-grid-lines line { stroke: rgba(114, 178, 218, .14); }
body:not(.report-body) .chart-line { stroke: #16c8ff; filter: drop-shadow(0 0 5px rgba(0, 190, 255, .28)); }
body:not(.report-body) .chart-points circle { fill: #0a263d; stroke: #37d2ff; }
body:not(.report-body) .chart-labels text { fill: #7896ad; }
body:not(.report-body) .availability-strip,
body:not(.report-body) .availability-strip div,
body:not(.report-body) .risk-row,
body:not(.report-body) .product-pills,
body:not(.report-body) .schedule-row { border-color: rgba(74, 173, 222, .16); }
body:not(.report-body) .risk-row:hover,
body:not(.report-body) .data-table tbody tr:hover { background: rgba(23, 142, 202, .08); }
body:not(.report-body) .device-avatar,
body:not(.report-body) .incident-mark,
body:not(.report-body) .schedule-icon { color: #84dcff; background: rgba(24, 108, 153, .2); border: 1px solid rgba(84, 196, 246, .12); }
body:not(.report-body) .progress { background: rgba(125, 170, 199, .15); }
body:not(.report-body) .progress b { background: #ffb143; box-shadow: 0 0 10px rgba(255, 177, 67, .25); }
body:not(.report-body) .risk-row:first-child .progress b { background: #ff6071; }
body:not(.report-body) .progress--ok b { background: #28d8a5; }
body:not(.report-body) .donut::after { background: #09243a; }
body:not(.report-body) .product-pills span { color: #7f9bb3; background: rgba(104, 166, 204, .08); }

body:not(.report-body) .data-table th { color: #7899b2; background: rgba(2, 17, 31, .66); border-color: rgba(71, 165, 214, .15); }
body:not(.report-body) .data-table td { color: #a9c0d1; border-bottom-color: rgba(71, 165, 214, .12); }
body:not(.report-body) .data-table td strong { color: #eaf7ff; }
body:not(.report-body) .data-table td small { color: #7590a6; }
body:not(.report-body) .customer-stats { border-color: rgba(73, 177, 229, .18); }
body:not(.report-body) .customer-stats div { border-color: rgba(73, 177, 229, .14); }
body:not(.report-body) .customer-logo { background: linear-gradient(145deg, #075b88, #08a8dd); box-shadow: 0 6px 20px rgba(0, 162, 220, .14); }
body:not(.report-body) .filter-bar select,
body:not(.report-body) .filter-bar input,
body:not(.report-body) .settings-card select,
body:not(.report-body) .settings-card input {
  color: #e6f5ff;
  background: rgba(1, 17, 31, .72);
  border-color: rgba(78, 184, 235, .2);
}
body:not(.report-body) .filter-bar option,
body:not(.report-body) .settings-card option { color: #eaf7ff; background: #09243a; }
body:not(.report-body) .filter-bar select:focus,
body:not(.report-body) .filter-bar input:focus { border-color: #20c9ff; box-shadow: 0 0 0 3px rgba(32, 201, 255, .08); }
body:not(.report-body) .nas-illustration { color: #8fe1ff; background: linear-gradient(#193e58, #0c293f); box-shadow: inset 0 -5px rgba(0, 7, 14, .25); }
body:not(.report-body) .nas-metrics div { background: rgba(91, 164, 204, .07); border: 1px solid rgba(75, 177, 225, .1); }
body:not(.report-body) .offline-message { background: rgba(76, 113, 138, .11); }
body:not(.report-body) .report-card footer { border-color: rgba(74, 173, 222, .16); }
body:not(.report-body) .report-card p { color: #83a0b7; }
body:not(.report-body) .toggle-row { border-color: rgba(74, 173, 222, .14); }

body:not(.report-body) .device-dialog { color: #eaf7ff; background: #082238; border: 1px solid rgba(73, 193, 245, .25); }
body:not(.report-body) .device-dialog::backdrop { background: rgba(0, 7, 16, .72); }
body:not(.report-body) .dialog-close { color: #dff5ff; background: #0b304c; border-color: rgba(75, 192, 243, .22); }
body:not(.report-body) .dialog-device-grid div { background: rgba(88, 162, 201, .08); border: 1px solid rgba(76, 179, 226, .1); }
body:not(.report-body) .toast { color: #fff; background: linear-gradient(135deg, #07537d, #009fd5); border: 1px solid rgba(134, 225, 255, .25); }

.report-body {
  background-color: #061321;
  background-image: linear-gradient(rgba(2, 12, 23, .82), rgba(4, 26, 45, .76)), url("comtech-background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.report-toolbar { background: rgba(2, 14, 27, .94); border-bottom: 1px solid rgba(51, 186, 244, .22); backdrop-filter: blur(18px); }
.print-report { box-shadow: 0 26px 80px rgba(0, 4, 12, .48); }
.report-cover {
  background-color: #061321;
  background-image: linear-gradient(115deg, rgba(2, 12, 24, .94), rgba(4, 33, 58, .77) 56%, rgba(1, 20, 38, .88)), url("comtech-background.jpg");
  background-size: cover;
  background-position: center;
  border-top: 3px solid #16c8ff;
}
.report-cover::after { border-color: rgba(0, 191, 255, .16); box-shadow: 0 0 80px rgba(0, 181, 255, .1); }
.report-brand { display: grid; justify-items: start; gap: 7px; }
.report-brand img { display: block; width: 250px; max-width: 36vw; height: auto; border-radius: 8px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.report-brand > span { color: #5edbff; font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.report-title-block p { color: #4ed8ff; }
.report-section-heading > span { background: linear-gradient(145deg, #075d8c, #08b8ee); box-shadow: 0 6px 20px rgba(0, 164, 220, .16); }
.summary-score { background: linear-gradient(145deg, #007eaf, #0fc4ee); }
.report-footer { background: linear-gradient(120deg, #061321, #0a2b47); border-top: 2px solid #0daee4; }

@media (max-width: 820px) {
  body:not(.report-body) .app-main { margin-left: 0; }
  body:not(.report-body) .sidebar { width: 270px; }
  body:not(.report-body) .content { padding: 20px 15px 30px; }
  body:not(.report-body) .app-main,
  body:not(.report-body) .content,
  body:not(.report-body) .page,
  body:not(.report-body) .dashboard-grid,
  body:not(.report-body) .panel { min-width: 0; max-width: 100%; }
  .report-brand img { max-width: 220px; }
}

@media (max-width: 580px) {
  html, body { overflow-x: hidden; }
  body:not(.report-body) .topbar { gap: 8px; padding: 0 10px; }
  body:not(.report-body) .search-wrap { min-width: 0; }
  body:not(.report-body) .search-wrap input { min-width: 0; }
  body:not(.report-body) .topbar-actions { display: none; }
  body:not(.report-body) .app-main,
  body:not(.report-body) .content,
  body:not(.report-body) .page,
  body:not(.report-body) .kpi-grid { width: 100%; min-width: 0; max-width: 100%; }
  body:not(.report-body) .page-heading,
  body:not(.report-body) .heading-actions { width: 100%; min-width: 0; }
  body:not(.report-body) .page-heading > div:first-child { width: 100%; min-width: 0; }
  body:not(.report-body) .page-heading h1 { font-size: 27px; overflow-wrap: anywhere; }
  body:not(.report-body) .page-heading p:not(.eyebrow) { max-width: 100%; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
  body:not(.report-body) .heading-actions { flex-wrap: wrap; justify-content: flex-start; }
  body:not(.report-body) .health-chart { overflow: hidden; }
  .report-brand img { width: 210px; max-width: 72vw; }
  .report-cover { background-position: 58% center; }
}

@media print {
  .report-body { background: #fff; }
  .report-cover { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Version 1 application screens */
.health-bars { height: 245px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 14px; padding: 20px 34px 12px; border-top: 1px solid rgba(74, 173, 222, .1); }
.health-bars > div { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 4px; }
.health-bar { width: min(46px, 70%); height: 100%; display: flex; align-items: end; overflow: hidden; border-radius: 10px 10px 4px 4px; background: rgba(80, 161, 204, .08); border: 1px solid rgba(74, 184, 235, .1); }
.health-bar i { width: 100%; min-height: 3px; display: block; border-radius: inherit; background: linear-gradient(180deg, #1dd2ff, #057ebc); box-shadow: 0 0 18px rgba(0, 190, 255, .26); }
.health-bars strong { color: #8ba6bb; font-size: 9px; }.health-bars small { color: #5edaff; font-size: 8px; }
.dynamic-donut { background: conic-gradient(var(--teal) 0 var(--backup-percent), var(--red) var(--backup-percent) 100%); }
.empty-state { padding: 24px; color: var(--muted); text-align: center; }
.settings-copy { margin: 2px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.device-row[hidden] { display: none; }

.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.auth-card { width: min(440px, 100%); padding: 30px; color: #edf8ff; background: linear-gradient(145deg, rgba(10, 35, 56, .96), rgba(3, 19, 34, .95)); border: 1px solid rgba(67, 192, 247, .25); border-radius: 18px; box-shadow: 0 32px 90px rgba(0, 4, 12, .5); backdrop-filter: blur(20px); }
.auth-card > img { width: 100%; height: auto; border-radius: 10px; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .28)); }
.auth-kicker { margin: 17px 0 4px !important; color: #58d9ff !important; font-size: 9px !important; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.auth-card h1 { margin: 6px 0 8px; font-size: 25px; }.auth-card > p { color: #91aabe; font-size: 11px; line-height: 1.65; }.auth-card footer { margin-top: 22px; color: #5f7d95; font-size: 9px; text-align: center; }
.auth-form { display: grid; gap: 13px; margin-top: 20px; }.auth-form label, .manage-form label, .api-key-panel label { display: grid; gap: 6px; color: #9db5c8; font-size: 9px; font-weight: 700; }.auth-form input, .manage-form input, .manage-form select, .api-key-panel input { width: 100%; height: 42px; padding: 0 11px; color: #eef9ff; background: rgba(1, 15, 28, .75); border: 1px solid rgba(75, 184, 235, .22); border-radius: 9px; outline: none; }.auth-form input:focus, .manage-form input:focus, .manage-form select:focus { border-color: #25c9ff; box-shadow: 0 0 0 3px rgba(37, 201, 255, .08); }.auth-form .button { margin-top: 4px; }
.auth-message { margin: 16px 0; padding: 12px; color: #b9d3e6; background: rgba(33, 112, 155, .14); border: 1px solid rgba(67, 181, 234, .19); border-radius: 9px; font-size: 10px; line-height: 1.5; }.auth-message a { color: #5edcff; font-weight: 700; }.auth-message--error { color: #ffd7dc; background: rgba(209, 54, 75, .14); border-color: rgba(255, 96, 116, .25); }.auth-message--success { color: #c7faeb; background: rgba(34, 190, 146, .13); border-color: rgba(56, 226, 179, .22); }
.install-card { width: min(520px, 100%); }.check-label { grid-template-columns: auto 1fr !important; align-items: center; justify-content: start; }.check-label input { width: 16px; height: 16px; accent-color: #0dc7f7; }

.manage-body { min-height: 100vh; }.manage-topbar { position: sticky; top: 0; z-index: 10; min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(22px, calc((100vw - 1180px) / 2)); color: #c7deee; background: rgba(2, 15, 28, .94); border-bottom: 1px solid rgba(71, 185, 238, .2); backdrop-filter: blur(18px); }.manage-topbar > div { display: flex; align-items: center; gap: 16px; }.manage-topbar a { color: #62d9ff; font-size: 10px; }
.manage-shell { width: min(1180px, calc(100% - 32px)); margin: 28px auto 50px; }.manage-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.manage-heading h1 { margin: 4px 0; font-size: 30px; }.manage-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; }.manage-heading code { max-width: 48%; padding: 10px 12px; overflow: auto; color: #73dcff; background: rgba(2, 17, 30, .74); border: 1px solid rgba(78, 188, 237, .2); border-radius: 8px; font-size: 9px; white-space: nowrap; }
.manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.manage-grid .settings-card { padding: 22px; }.manage-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.manage-form label:first-of-type, .manage-form .button { grid-column: 1 / -1; }.manage-form select option { color: #edf8ff; background: #09243a; }.manage-notice, .api-key-panel { margin-bottom: 18px; padding: 14px 16px; border-radius: 11px; font-size: 10px; }.manage-notice--success { color: #c8f9ea; background: rgba(39, 197, 151, .13); border: 1px solid rgba(55, 225, 178, .22); }.manage-notice--error { color: #ffd9de; background: rgba(222, 66, 87, .14); border: 1px solid rgba(255, 104, 125, .22); }.api-key-panel { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; color: #dff6ff; background: linear-gradient(145deg, rgba(7, 59, 88, .88), rgba(4, 31, 52, .9)); border: 1px solid rgba(69, 200, 250, .3); }.api-key-panel p { grid-column: 1 / -1; margin: 0; }.manage-table { margin-top: 18px; overflow: hidden; }
.device-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: max-content; }
.device-actions form { flex: 0 0 auto; margin: 0; }
.button--small { min-height: 24px; padding: 4px 7px; border-radius: 6px; font-size: 7px; line-height: 1.1; white-space: nowrap; }
.windows-device-table th:nth-child(5), .windows-device-table td:nth-child(5) { min-width: 370px; }
.windows-disk-cell { padding-top: 10px !important; padding-bottom: 10px !important; }
.disk-capacity-summary { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.disk-capacity-summary strong { font-size: 10px; }
.disk-capacity-summary small, .disk-awaiting { color: var(--muted); font-size: 7px; }
.physical-disk-list { display: grid; gap: 4px; }
.physical-disk { min-width: 0; display: grid; grid-template-columns: 24px minmax(130px, 1fr) 46px; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid rgba(83, 176, 220, .14); border-radius: 6px; background: rgba(82, 160, 201, .06); }
.physical-disk > b { color: #69dfff; font-size: 7px; }
.physical-disk > span { overflow: hidden; color: #c8ddea; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.physical-disk > em { justify-self: end; padding: 2px 5px; border-radius: 20px; font-size: 7px; font-style: normal; font-weight: 800; }
.physical-disk--ok > em { color: #83f1d2; background: rgba(31, 190, 145, .15); }
.physical-disk--warning > em { color: #ffd18b; background: rgba(237, 162, 52, .16); }
.physical-disk--danger > em { color: #ff9dac; background: rgba(228, 70, 92, .18); }
.physical-disk--unknown > em { color: #a9bdcc; background: rgba(144, 166, 182, .14); }
.report-physical-disks { display: grid; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.report-physical-disks div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 7px; }
.report-physical-disks span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-physical-disks strong { color: var(--ink); font-size: 8px; white-space: nowrap; }
body:not(.report-body) .button--danger { color: #ffdfe4; background: rgba(222, 66, 87, .18); border-color: rgba(255, 104, 125, .34); box-shadow: none; }
body:not(.report-body) .button--danger:hover { color: #fff; background: rgba(222, 66, 87, .38); }
.device-row--archived { opacity: .58; }
.auth-cancel { color: #69dcff; font-size: 9px; text-align: center; }
.user-create-card { padding: 22px; }
.security-shell { width: min(820px, calc(100% - 32px)); }
.mfa-card { padding: 26px; }
.mfa-card h2 { margin-top: 0; }
.mfa-card ol { display: grid; gap: 10px; padding-left: 20px; color: #a9c0d1; font-size: 10px; line-height: 1.7; }
.mfa-card a { color: #61d9ff; }
.mfa-secret { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; padding: 14px; background: rgba(1, 15, 28, .75); border: 1px solid rgba(75, 184, 235, .22); border-radius: 10px; }
.mfa-secret code { color: #75e0ff; font-size: 14px; font-weight: 800; letter-spacing: .12em; overflow-wrap: anywhere; }
.mfa-verify-form { max-width: 460px; }
.inline-reset-form { margin-top: 14px; }
.danger-zone { margin-top: 22px; padding: 14px; border: 1px solid rgba(255, 104, 125, .24); border-radius: 10px; }
.danger-zone summary { color: #ff9aa8; cursor: pointer; font-size: 10px; font-weight: 750; }
.danger-zone .auth-form { max-width: 480px; }

@media (max-width: 760px) { .health-bars { height: 190px; gap: 7px; padding: 15px 14px 10px; }.manage-grid { grid-template-columns: 1fr; }.manage-heading { align-items: flex-start; flex-direction: column; }.manage-heading code { max-width: 100%; }.manage-form { grid-template-columns: 1fr; }.manage-form label, .manage-form label:first-of-type, .manage-form .button { grid-column: auto; }.api-key-panel { grid-template-columns: 1fr; }.manage-topbar { padding: 0 16px; } }