:root {
    color-scheme: dark;
    --bg: #07111f;
    --sidebar: #081b34;
    --surface: #102137;
    --surface-2: #132940;
    --surface-3: #182f49;
    --border: #294563;
    --border-strong: #3b638d;
    --text: #f4f8ff;
    --body: #c4d2e5;
    --muted: #88a3c3;
    --blue: #4b95ff;
    --cyan: #18d3da;
    --green: #48dfa0;
    --amber: #ffb83f;
    --red: #ff6d79;
    --purple: #9b8cff;
    --sidebar-width: 220px;
    --control-height: 38px;
    --radius: 14px;
    --radius-sm: 9px;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #edf3fa;
    --sidebar: #f7faff;
    --surface: #ffffff;
    --surface-2: #f1f6fc;
    --surface-3: #e7f0fa;
    --border: #c9d8e8;
    --border-strong: #9eb8d3;
    --text: #10243a;
    --body: #334e68;
    --muted: #66829f;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--body); background: var(--bg); font: 12px/1.4 "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
svg { fill: currentColor; }
h1, h2, h3, p, dl, dd, ol, ul { margin-top: 0; }
h1, h2, h3 { color: var(--text); }
code { color: var(--body); font: 10px/1.4 Consolas, "Courier New", monospace; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* App shell */
.app-shell { min-height: 100vh; }
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar-width); min-height: 100vh;
    display: flex; flex-direction: column; padding: 18px 12px 12px; overflow-y: auto;
    background: var(--sidebar); border-right: 1px solid rgba(41,69,99,.65); scrollbar-width: thin;
}
.brand { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.brand-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; }
.brand-copy { min-width: 0; display: grid; gap: 2px; }
.brand-copy strong { overflow: hidden; color: var(--text); font-size: 18px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small, .nav-group-label, .sidebar-user-label { color: #8faaca; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.sidebar-nav { display: grid; gap: 4px; padding-top: 18px; }
.nav-group-label { margin: 9px 7px 3px; }
.nav-item { min-height: 39px; display: flex; align-items: center; gap: 11px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px; color: #d6e4f6; font-weight: 700; }
.nav-item:hover { color: var(--text); background: rgba(24,47,73,.75); }
.nav-item.is-active { color: #fff; background: #1c4576; border-color: #5a9af3; box-shadow: inset 3px 0 #6aa8ff; }
.nav-icon { width: 15px; height: 15px; flex: 0 0 15px; color: #7896b8; }
.nav-icon svg { width: 100%; height: 100%; }
.nav-item.is-active .nav-icon { color: #bcdcff; }
.nav-badge { margin-left: auto; min-width: 26px; height: 24px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; font-size: 10px; }
.nav-badge-blue { color: #b9d7ff; background: #183b64; }
.sidebar-footer { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--border); }
.sidebar-user-name { display: block; overflow: hidden; margin: 6px 0 10px; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.app-main { min-width: 0; min-height: 100vh; margin-left: var(--sidebar-width); }
.page-container { width: 100%; min-height: 100vh; padding: 22px 28px 26px; }
.page-header { min-height: 94px; display: flex; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.page-heading { min-width: 0; }
.eyebrow { margin: 0 0 3px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.page-heading h1 { margin: 0 0 3px; color: var(--text); font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.page-subtitle { max-width: 850px; margin: 0; color: #a8c3df; font-size: 12px; }
.page-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.page-content, .page-content > *, .panel-header > * { min-width: 0; }
.page-content { display: grid; gap: 14px; }
.icon-button, .mobile-menu-button { width: 48px; height: var(--control-height); display: grid; place-items: center; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.mobile-menu-button, .mobile-bottom-nav { display: none; }
.theme-icon-dark { display: none; }
html[data-theme="light"] .theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark { display: inline; }

/* Controls */
.button { height: var(--control-height); min-width: 80px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 750; line-height: 1; white-space: nowrap; cursor: pointer; }
.button:hover:not(:disabled) { filter: brightness(1.08); }
.button:disabled { opacity: .52; cursor: not-allowed; }
.button-primary { color: #fff; background: var(--blue); }
.button-secondary { color: #d7e8ff; background: #183b63; border-color: #38618f; }
.button-outline { color: var(--body); background: transparent; border-color: var(--border); }
.button-danger { color: #ffb8be; background: #4b2028; border-color: #7f3540; }
.button-amber { color: #182033; background: var(--amber); }
.button-full { width: 100%; }
.button-small { height: 31px; min-width: 68px; padding: 0 11px; border-radius: 7px; font-size: 10px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-width: 0; height: var(--control-height); padding: 0 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; }
textarea { min-height: 78px; padding-block: 10px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(75,149,255,.13); }
input[readonly] { color: var(--muted); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
label > span:first-child:not(.sr-only), .field-label { display: block; margin-bottom: 5px; color: #a7c2df; font-size: 10px; font-weight: 700; }
.field-error, .validation-summary { color: #ff9fa7; font-size: 10px; }

/* Panels, status and tables */
.panel, .card, .filter-panel, .reports-intro, .report-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel { padding: 16px 18px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.compact-panel-header { margin-bottom: 9px; }
.panel-title { margin: 0 0 2px; color: var(--text); font-size: 18px; line-height: 1.25; }
.panel-subtitle, .section-subtitle, .subtle { color: var(--muted); }
.panel-subtitle, .section-subtitle { margin: 0; font-size: 10.5px; }
.section-title { margin: 0 0 3px; font-size: 18px; }
.alert { padding: 11px 14px; border: 1px solid; border-radius: 9px; font-weight: 650; }
.alert-success { color: #9cf5cb; background: #123b31; border-color: #246650; }
.alert-error { color: #ffb7bd; background: #4b2028; border-color: #833a45; }
.alert-warning { color: #ffd892; background: #3d2e19; border-color: #805e1d; }
.status { min-width: 62px; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; color: #a7b9cd; background: #1d3047; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status::before { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; content: ""; }
.status-online, .status-success { color: var(--green); background: #123b31; }
.status-offline, .status-error { color: #ff969f; background: #4b2028; }
.status-warning { color: var(--amber); background: #4b3716; }
.status-muted { color: #a7b9cd; background: #1d3047; }
.status-running { color: #a9ccff; background: #183b64; }
.table-container { min-width: 0; overflow: auto; border-radius: 10px; scrollbar-color: #5d7896 var(--surface-2); scrollbar-width: thin; }
.admin-table, .data-table, .config-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.admin-table th, .data-table th, .config-table th { position: sticky; top: 0; z-index: 2; height: 38px; padding: 0 14px; color: #8faaca; background: #182f49; border-bottom: 1px solid var(--border); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-table td, .data-table td, .config-table td { height: 58px; padding: 8px 14px; color: var(--body); border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tbody tr:last-child td, .data-table tbody tr:last-child td, .config-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover, .data-table tbody tr:hover { background: rgba(27,57,88,.5); }
.admin-table td strong { color: var(--text); }
.admin-table td small { display: block; margin-top: 3px; color: var(--muted); }
.clickable-row { cursor: pointer; }
.clickable-row:focus, .device-row.is-selected { background: #173b65 !important; }
.table-link, .hub-link { color: var(--blue); font-weight: 750; }
.empty-cell { height: 118px !important; color: var(--muted) !important; text-align: center; }
.table-scroll-lg { max-height: 510px; }
.table-scroll-md { max-height: 390px; }
.hash, .correlation-id, .details-json { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hash-full { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.empty-state { min-height: 150px; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; border: 1px dashed var(--border); border-radius: 10px; }
.empty-state p { margin: 0; }

/* KPI and dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-card { position: relative; height: 105px; padding: 14px 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.kpi-card::after { position: absolute; inset: auto 0 0; height: 3px; background: var(--border-strong); content: ""; }
.kpi-online::after { background: var(--green); }
.kpi-offline::after { background: var(--red); }
.kpi-warning::after { background: var(--amber); }
.kpi-agent::after { background: var(--purple); }
.kpi-label { display: block; overflow: hidden; color: #9fb8d4; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.kpi-value { display: block; overflow: hidden; margin: 5px 0 6px; color: var(--text); font-size: 27px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.kpi-card small { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-state-grid { display: grid; grid-template-columns: minmax(0, 1.78fr) minmax(340px, 1fr); gap: 14px; }
.system-state-card { min-height: 222px; display: flex; align-items: center; gap: 36px; padding: 26px 34px; }
.health-ring { width: 126px; height: 126px; flex: 0 0 126px; display: grid; place-content: center; border: 12px solid var(--green); border-left-color: var(--border); border-radius: 50%; color: var(--text); text-align: center; }
.health-ring strong { font-size: 27px; line-height: 1; }
.health-ring small { color: var(--muted); }
.system-state-copy h2 { margin: 4px 0 14px; font-size: 25px; }
.state-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.state-list li::before { width: 7px; height: 7px; display: inline-block; margin-right: 10px; border-radius: 50%; background: currentColor; content: ""; }
.tone-green { color: var(--green); }.tone-amber { color: var(--amber); }.tone-blue { color: var(--blue); }.tone-purple { color: var(--purple); }.tone-cyan { color: var(--cyan); }
.tone-dot { width: 8px; height: 8px; display: inline-block; flex: 0 0 8px; border-radius: 50%; background: currentColor; }
.priorities-card { min-height: 222px; padding: 22px; }
.priorities-card header h2 { margin-bottom: 2px; font-size: 18px; }.priorities-card header small { color: var(--muted); }
.priority-row { min-height: 60px; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.priority-row-warning { background: #3b2e1b; border: 1px solid #76551d; }
.priority-row div { min-width: 0; flex: 1; }.priority-row strong, .priority-row small { display: block; }.priority-row small { color: var(--muted); }
.dashboard-devices-panel { min-height: 330px; }
.dashboard-table-wrap { max-height: 280px; }
.compact-table td { height: 52px; }

/* Shared filter bars */
.filter-panel { min-height: 66px; padding: 13px 16px; }
.computers-filter { display: grid; grid-template-columns: minmax(220px, 1.65fr) minmax(142px, 1fr) minmax(124px, .85fr) minmax(105px, .72fr) minmax(116px, .78fr) 92px 74px 169px; gap: 10px; align-items: center; }
.monitoring-filter { display: grid; grid-template-columns: repeat(4, minmax(145px, 180px)) 100px 80px; gap: 12px; align-items: center; }
.filter-search, .filter-select { min-width: 0; }
.filter-search input[type="search"] { appearance: textfield; }
.filter-search input[type="search"]::-webkit-search-decoration, .filter-search input[type="search"]::-webkit-search-cancel-button { appearance: none; }

/* Computers */
.computers-layout { min-height: 636px; display: grid; grid-template-columns: minmax(0, 2.34fr) minmax(320px, 1fr); gap: 14px; }
.computers-list-panel, .computer-preview { min-height: 636px; }
.compact-sort-form { width: 170px; }
.computers-table-wrap { max-height: 552px; }
.computers-table th:nth-child(1) { width: 22%; }.computers-table th:nth-child(2) { width: 24%; }.computers-table th:nth-child(3) { width: 13%; }.computers-table th:nth-child(4) { width: 17%; }.computers-table th:nth-child(5) { width: 16%; }
.computer-name { color: var(--text); font-size: 14px; }
.resource-summary { color: var(--muted); white-space: nowrap; }
.computer-preview { display: flex; flex-direction: column; padding: 20px; }
.preview-eyebrow { color: #8faaca; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.preview-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.preview-title { margin: 0; overflow: hidden; font-size: 25px; text-overflow: ellipsis; white-space: nowrap; }
.preview-subtitle { margin: 3px 0 15px; color: var(--muted); }
.preview-warning { min-height: 68px; margin-bottom: 20px; padding: 12px 14px; color: #ffd995; background: #3c2e1b; border: 1px solid #805e1d; border-radius: 10px; }
.preview-warning strong, .preview-warning small { display: block; }.preview-warning small { margin-top: 3px; color: var(--muted); }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 0 17px; border-bottom: 1px solid var(--border); }
.preview-metrics strong, .preview-metrics small { display: block; }.preview-metrics strong { color: var(--text); font-size: 20px; }.preview-metrics small { color: var(--muted); }
.preview-section-label { margin-top: 18px; }
.preview-list { margin: 7px 0 18px; }
.preview-list div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.preview-list dt { color: var(--muted); }.preview-list dd { margin: 0; color: var(--body); font-weight: 650; text-align: right; }
.computer-preview .button { margin-top: auto; }

/* Device navigation and summary */
.device-tabs { position: sticky; top: 0; z-index: 15; height: 43px; display: flex; gap: 5px; padding: 6px 10px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; scrollbar-width: thin; }
.device-tab { min-width: max-content; height: 31px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; color: var(--body); border-radius: 8px; font-weight: 750; }
.device-tab:hover { background: var(--surface-2); }.device-tab.is-active { color: #fff; background: #285b94; }
.device-health-banner { min-height: 112px; display: grid; grid-template-columns: 72px minmax(0, 1.35fr) minmax(360px, 1fr); align-items: center; gap: 20px; padding: 16px 20px; background: linear-gradient(105deg,#123a31,var(--surface-2)); border: 1px solid var(--border); border-radius: 14px; }
.device-health-banner.has-warning { background: linear-gradient(105deg,#123a31,var(--surface-2)); }.device-health-banner.is-offline { background: linear-gradient(105deg,#3b2027,var(--surface-2)); }
.device-health-icon { width: 72px; height: 72px; display: grid; place-items: center; color: var(--green); border: 3px solid currentColor; border-radius: 50%; font-size: 42px; line-height: 1; }.device-health-banner.is-offline .device-health-icon { color: var(--red); }
.device-health-copy h2 { margin: 3px 0 2px; font-size: 25px; }.device-health-copy p:last-child { margin: 0; color: var(--body); }
.device-health-now { min-height: 80px; padding: 10px 0 10px 26px; border-left: 1px solid var(--border); }
.device-health-now strong { display: block; margin: 8px 0 9px; color: var(--text); font-size: 18px; white-space: nowrap; }.device-health-now div { display: flex; align-items: center; gap: 8px; color: var(--body); }
.hub-heading h2 { margin: 0 0 2px; font-size: 18px; }.hub-heading p { margin: 0; color: var(--muted); font-size: 10.5px; }
.device-hub-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.device-hub-card { position: relative; min-height: 190px; display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto 1fr auto; gap: 0 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.device-hub-card:hover { border-color: currentColor; }.device-hub-card.tone-amber { background: #201f25; border-color: #8b6828; }
.hub-icon { width: 46px; height: 46px; display: grid; place-items: center; color: inherit; background: rgba(75,149,255,.16); border-radius: 11px; }.hub-icon::after { width: 23px; height: 23px; border: 3px solid currentColor; border-radius: 50%; content: ""; }
.device-hub-card h3 { margin: 1px 0 3px; font-size: 18px; }.device-hub-card small { color: var(--muted); }.device-hub-card > strong { grid-column: 1/-1; align-self: center; color: var(--text); font-size: 13px; }.hub-link { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; }

/* Device subpages */
.metric-grid, .operation-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.metric-card, .operation-stat { height: 105px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.metric-label, .operation-stat span { color: #9fb8d4; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.metric-value, .operation-stat strong { display: block; overflow: hidden; margin: 6px 0 3px; color: var(--text); font-size: 24px; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }.metric-card small { color: var(--muted); }
progress { width: 100%; height: 7px; margin: 10px 0 0; overflow: hidden; appearance: none; border: 0; border-radius: 999px; background: #243b57; }
progress::-webkit-progress-bar { background: #243b57; border-radius: 999px; } progress::-webkit-progress-value { background: linear-gradient(90deg,var(--blue),var(--cyan)); border-radius: 999px; } progress::-moz-progress-bar { background: linear-gradient(90deg,var(--blue),var(--cyan)); }
.two-column, .network-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.detail-card, .network-card { padding: 18px 20px; }.detail-card h2, .network-card h2 { margin-bottom: 2px; font-size: 18px; }.detail-card > p, .network-card > p { color: var(--muted); }
.detail-list { margin: 0; }.detail-list div, .path-list div { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }.detail-list dt, .path-list dt { color: var(--muted); }.detail-list dd, .path-list dd { margin: 0; color: var(--body); font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.network-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.restart-banner { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 16px; color: #ffd991; background: linear-gradient(90deg,#3d2e19,var(--surface)); border: 1px solid #8a641e; border-radius: 10px; }.restart-banner strong { color: var(--amber); }.restart-banner span { text-align: right; }
.facts-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }.fact { min-height: 66px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }.fact-span-2 { grid-column: span 2; }.fact-span-4 { grid-column: 1/-1; }.fact dt { margin-bottom: 5px; color: #9bb7d5; font-size: 9px; font-weight: 700; }.fact dd { margin: 0; overflow: hidden; color: var(--text); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.fact dd.wrap { white-space: normal; }
.planned-banner, .warning-note { padding: 12px 14px; color: #ffd995; background: #3b2e1b; border: 1px solid #80601f; border-radius: 9px; }.planned-banner { display: flex; align-items: flex-start; gap: 10px; }.planned-banner p { margin: 2px 0 0; color: var(--muted); }.planned-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; background: var(--amber); border-radius: 50%; }
.report-actions { display: flex; gap: 9px; margin-top: 12px; }

/* Configuration */
.config-summary { display: grid; grid-template-columns: minmax(260px,1fr) auto auto minmax(200px,auto); align-items: center; gap: 14px; }.config-summary-path p { margin-bottom: 4px; }.config-summary-path strong { color: var(--text); }.config-meta { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.config-shell { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 14px; }.config-sidebar { padding: 16px 12px; }.config-sidebar h2 { margin: 0 8px 10px; font-size: 18px; }.config-section-link { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; color: var(--body); background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; cursor: pointer; }.config-section-link.is-active { color: var(--text); background: #1d4777; border-color: #4e8fd5; }.config-section-count { min-width: 30px; height: 24px; display: grid; place-items: center; background: #1d3047; border-radius: 99px; font-size: 10px; }.config-rules { display: grid; gap: 7px; margin: 18px 8px 0; padding-top: 15px; color: var(--muted); border-top: 1px solid var(--border); }.config-rules span::before { margin-right: 7px; color: var(--green); content: "●"; }.config-content { min-width: 0; padding: 16px; }.config-section-panel { display: none; }.config-section-panel.is-active { display: block; }.config-table-wrap { max-height: 350px; }.config-value-cell { min-width: 250px; }.config-value { display: block; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.config-inline-input { height: 32px !important; }.config-inline-form, .config-inline-actions, .rollback-inline-form, .rollback-inline-actions { display: flex; align-items: center; gap: 7px; }.sensitive-badge { margin-left: 8px; color: var(--amber); font-size: 9px; font-weight: 800; }.config-action-state { color: var(--muted); font-size: 10px; }.phase3-history-time small, .phase3-result-cell small, .phase3-hash-cell code { display: block; }.history-table-wrap { max-height: 380px; }

/* Monitoring */
.monitoring-table-panel { min-height: 496px; }.monitoring-table-wrap { max-height: 425px; }.monitoring-table td { height: 70px; }.table-meter { display: inline-flex; align-items: center; gap: 8px; min-width: 145px; }.table-meter progress { width: 120px; margin: 0; }.table-meter b { font-size: 10px; font-weight: 500; }.meter-amber progress::-webkit-progress-value { background: var(--amber); }.meter-amber progress::-moz-progress-bar { background: var(--amber); }

/* Reports */
.reports-intro { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; }.reports-intro h2 { margin: 4px 0 0; font-size: 18px; }.reports-intro > span { color: var(--body); }
.reports-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.report-card { min-height: 166px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 20px; }.report-card h2 { margin: 0 0 4px; font-size: 18px; }.report-card p { margin: 0; color: var(--muted); }.report-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.report-card-footer > div { display: flex; gap: 9px; }.count-pill { min-width: 100px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; color: #cfe2ff; background: #183b64; border-radius: 999px; font-size: 10px; font-weight: 750; }.reports-history-panel { min-height: 200px; }.reports-table-wrap { max-height: 135px; }

/* Applications */
.software-panel { min-height: 585px; }.software-header { align-items: flex-end; }.software-add-button { width: 212px; }.software-filter { display: grid; grid-template-columns: minmax(240px,1.45fr) 158px 168px 100px 100px; gap: 10px; max-width: 900px; margin-bottom: 14px; }.software-layout { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(320px,1fr); gap: 14px; }.software-table-wrap { min-height: 438px; background: var(--surface-2); }.software-selected-panel { min-height: 438px; display: flex; flex-direction: column; padding: 18px 20px; background: var(--surface-2); border-radius: 11px; }.software-selected-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.software-selected-title h2 { margin: 7px 0 10px; font-size: 18px; }.software-package-list { margin: 0; }.software-package-list div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }.software-package-list dt { color: var(--muted); }.software-package-list dd { max-width: 65%; margin: 0; text-align: right; overflow-wrap: anywhere; }.software-safe-note { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; color: #bdf3da; background: #12332f; border: 1px solid #275c4d; border-radius: 8px; }.software-safe-note strong, .software-safe-note small { display: block; }.software-safe-note small { color: var(--muted); }.software-selected-actions { display: grid; grid-template-columns: 1fr 1.22fr; gap: 10px; margin-top: 12px; }

/* Rollout */
.wizard-steps { height: 62px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; margin: 0; padding: 0 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; list-style: none; }.wizard-steps li { position: relative; display: flex; align-items: center; gap: 10px; color: var(--body); }.wizard-steps li:not(:last-child)::after { position: absolute; left: 92px; right: 24px; top: 50%; height: 2px; background: var(--border); content: ""; }.wizard-steps span { width: 28px; height: 28px; display: grid; place-items: center; z-index: 1; color: var(--body); background: #243b56; border-radius: 50%; font-weight: 800; }.wizard-steps .is-active { color: var(--text); font-weight: 750; }.wizard-steps .is-active span { color: #fff; background: var(--blue); }
.wizard-layout { min-height: 627px; display: grid; grid-template-columns: minmax(0,2.22fr) 400px; gap: 14px; }.wizard-main-panel, .wizard-summary { min-height: 627px; }.wizard-filter { display: grid; grid-template-columns: minmax(190px,1fr) 164px 146px 160px 94px; gap: 10px; }.select-all-strip { min-height: 45px; display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 0 14px; background: #173b63; border-radius: 9px; }.select-all-strip span { margin-left: auto; color: var(--text); font-weight: 750; }.wizard-table-wrap { max-height: 440px; }.wizard-summary { display: flex; flex-direction: column; padding: 20px; }.wizard-summary h2 { margin: 0 0 2px; font-size: 18px; }.wizard-summary > p:not(.eyebrow) { color: var(--muted); }.wizard-summary dl { margin: 0 0 18px; }.wizard-summary dl div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); }.wizard-summary dt { color: var(--muted); }.wizard-summary dd { margin: 0; color: var(--body); font-weight: 700; text-align: right; }.safe-check-list { display: grid; gap: 8px; margin: 8px 0 18px; padding: 0; list-style: none; }.safe-check-list li::before { margin-right: 8px; color: var(--green); content: "●"; }.wizard-actions { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px; margin-top: auto; }

/* Registration, audit and operational pages */
.enrollment-create { min-height: 174px; }.enrollment-create-form { display: grid; grid-template-columns: 1.15fr .9fr 1.3fr .55fr 150px; gap: 12px; align-items: end; }.enrollment-create-form .validation-summary { grid-column: 1/-1; }.enrollment-create-action .button { width: 100%; }.token-result { grid-column: 1/-1; display: grid; grid-template-columns: 1fr minmax(280px,2fr) auto; align-items: center; gap: 12px; padding: 10px 12px; background: #123b31; border-radius: 9px; }.token-result strong, .token-result small { display: block; }.enrollment-content { display: grid; grid-template-columns: minmax(0,2.34fr) minmax(320px,1fr); gap: 14px; }.enrollment-content > .panel, .enrollment-process { min-height: 520px; }.enrollment-process { padding: 18px 20px; }.registration-steps { display: grid; gap: 12px; margin: 20px 0; padding: 0; list-style: none; }.registration-steps li { display: flex; gap: 12px; }.registration-steps li > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: #bcdcff; background: #173b65; border: 1px solid #36699e; border-radius: 8px; font-weight: 800; }.registration-steps strong, .registration-steps small { display: block; }.registration-steps small { color: var(--muted); }.path-list dd code { font-size: 9px; }
.audit-panel { min-height: 700px; }.audit-toolbar { min-width: 660px; display: grid; grid-template-columns: minmax(260px,1fr) 176px 100px 80px; gap: 10px; }.audit-meta { display: flex; justify-content: space-between; margin: 3px 0 10px; color: var(--muted); }.audit-table-wrap { max-height: 590px; }.audit-action { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; align-items: center; gap: 9px; }.toolbar-select { min-width: 140px; }.toolbar-search { min-width: 240px; }.toolbar-search .search-icon { display: none; }
.operation-stat { display: flex; flex-direction: column; justify-content: center; }.operation-stat strong { font-size: 24px; }
.module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.module-card { min-height: 146px; display: flex; flex-direction: column; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }.module-card h3 { margin: 0 0 5px; font-size: 16px; }.module-card p { margin: 0; color: var(--muted); }.module-card > span, .module-card > button { margin-top: auto; align-self: flex-start; }
.workflow-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }.workflow-step { min-height: 96px; padding: 12px; background: var(--surface-2); border-radius: 9px; }.workflow-step > span { width: 25px; height: 25px; display: grid; place-items: center; margin-bottom: 7px; color: #bcdcff; background: #173b65; border-radius: 7px; }.workflow-step strong, .workflow-step small { display: block; }.workflow-step small { margin-top: 3px; color: var(--muted); }
.software-catalog, .report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.software-detail, .report-card { padding: 18px; }.software-file { display: flex; gap: 10px; align-items: center; margin: 14px 0; padding: 12px; background: var(--surface-2); border-radius: 9px; }.software-file code { overflow-wrap: anywhere; }.fleet-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.fleet-card { padding: 15px; }.fleet-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.fleet-card-header h3 { margin: 0; }.fleet-meta { color: var(--muted); }.fleet-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.fleet-metrics strong, .fleet-metrics small { display: block; }.fleet-metrics small { color: var(--muted); }

/* Blueprint device detail screens */
.performance-upper-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(320px,1fr); gap: 14px; }.performance-chart-panel, .disk-summary-panel { min-height: 274px; }.performance-chart { height: 178px; margin-top: 4px; color: var(--muted); }.performance-chart > p, .heartbeat-chart > p { height: 100%; display: grid; place-items: center; margin: 0; }.performance-chart svg, .heartbeat-chart svg { width: 100%; height: 100%; overflow: visible; }.chart-grid line { stroke: #203954; stroke-width: .55; vector-effect: non-scaling-stroke; }.chart-cpu, .chart-ram, .chart-online { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }.chart-cpu { stroke: var(--blue); }.chart-ram { stroke: var(--amber); }.chart-online { stroke: var(--green); stroke-width: 3; }.chart-legend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }.chart-legend .tone-dot + .tone-dot { margin-left: 14px; }.disk-summary-row { padding: 12px 0; border-bottom: 1px solid var(--border); }.disk-summary-row:last-child { border-bottom: 0; }.disk-summary-row > div { display: flex; justify-content: space-between; gap: 12px; }.disk-summary-row strong { color: var(--text); }.disk-summary-row span, .disk-summary-row small { color: var(--muted); }.disk-summary-row small { display: block; margin-top: 5px; }.performance-lower-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.performance-lower-grid > .panel { min-height: 205px; }.large-inline-value { display: block; margin: 12px 0 6px; color: var(--text); font-size: 20px; }.registration-identity summary, .configuration-history-details summary { color: var(--text); font-size: 14px; font-weight: 750; cursor: pointer; }.registration-identity[open] summary, .configuration-history-details[open] summary { margin-bottom: 14px; }
.network-health-banner, .service-health-banner, .device-action-guard, .safe-actions-banner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; background: linear-gradient(105deg,#123a31,var(--surface-2)); border: 1px solid var(--border); border-radius: 12px; }.network-health-banner > div > strong, .service-health-banner strong { margin-left: 9px; color: var(--text); font-size: 18px; }.network-health-banner p { margin: 7px 0 0 17px; color: var(--body); }.network-overview-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr); gap: 14px; }.network-overview-grid > .panel { min-height: 268px; }.network-route { height: 180px; display: grid; grid-template-columns: 1fr 80px 1fr 80px 1fr; align-items: center; }.network-route > div { display: grid; place-items: center; text-align: center; }.network-route > div > span { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 12px; color: var(--blue); background: #173c63; border: 3px solid currentColor; border-radius: 50%; font-weight: 800; }.network-route > div:last-child > span { color: var(--green); background: #123b31; }.network-route strong, .network-route small { display: block; }.network-route small { margin-top: 4px; color: var(--muted); }.network-route i { height: 3px; background: #3a668f; }.service-health-banner small { color: var(--muted); }.service-list-panel, .process-list-panel { min-height: 577px; }.services-table-wrap { max-height: 342px; }.security-rule { min-height: 100px; margin-top: 14px; padding: 14px 16px; background: var(--surface-2); border-radius: 10px; }.security-rule strong, .security-rule small { display: block; }.security-rule small { margin-top: 5px; color: var(--muted); }
.update-warning-banner { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; background: linear-gradient(105deg,#3c2d19,var(--surface-2)); border: 1px solid #8b641e; border-radius: 14px; }.update-warning-banner.is-ok { background: linear-gradient(105deg,#123a31,var(--surface-2)); border-color: var(--border); }.update-warning-banner > div { display: flex; align-items: center; gap: 16px; }.update-warning-icon { width: 30px; height: 30px; display: grid; place-items: center; color: #182033; background: var(--amber); border-radius: 50%; font-weight: 900; }.update-warning-banner.is-ok .update-warning-icon { background: var(--green); }.update-warning-banner h2 { margin: 0 0 3px; font-size: 20px; }.update-warning-banner p { margin: 0; color: var(--body); }.update-layout { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(340px,1fr); gap: 14px; }.update-layout > * { min-height: 390px; }.controlled-action-panel { display: flex; flex-direction: column; }.action-description { padding: 14px 16px; background: var(--surface-2); border-radius: 10px; }.action-description h3 { margin: 0 0 4px; }.action-description p { margin: 0; color: var(--muted); }.controlled-action-panel > .eyebrow { margin-top: 24px; }.action-checks { display: grid; gap: 12px; margin: 8px 0 20px; padding: 0; list-style: none; }.action-checks li::before { width: 12px; height: 12px; display: inline-grid; place-items: center; margin-right: 10px; color: var(--muted); border: 1px solid currentColor; border-radius: 50%; content: ""; }.action-checks .is-ready::before { color: var(--green); background: var(--green); }.controlled-action-panel > .button { margin-top: auto; }
.history-filter { display: flex; align-items: center; justify-content: space-between; }.history-filter > div { display: flex; gap: 12px; }.history-filter > div span { min-width: 170px; height: var(--control-height); display: inline-flex; align-items: center; padding: 0 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }.history-filter small { color: var(--muted); }.history-overview-grid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(350px,1fr); gap: 14px; }.history-overview-grid > .panel { min-height: 252px; }.heartbeat-chart { height: 160px; }.device-alert-summary { display: grid; gap: 10px; }.device-alert-item { min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: #3b2e1b; border: 1px solid #80601f; border-radius: 10px; }.device-alert-item.is-ok { background: var(--surface-2); border-color: transparent; }.device-alert-item div { min-width: 0; }.device-alert-item strong, .device-alert-item small { display: block; }.device-alert-item small { margin-top: 3px; color: var(--muted); }.tone-red { color: var(--red); }.timeline-panel { min-height: 300px; }.event-timeline { position: relative; display: grid; gap: 0; margin: 12px 0 0; padding: 0 0 0 28px; list-style: none; }.event-timeline::before { position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: #31506f; content: ""; }.event-timeline li { position: relative; min-height: 42px; display: grid; grid-template-columns: 155px 280px minmax(0,1fr); align-items: start; gap: 15px; }.timeline-dot { position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }.event-timeline time { color: var(--body); font-weight: 700; }.event-timeline strong { color: var(--text); }.event-timeline small { color: var(--muted); }.empty-timeline { display: block !important; color: var(--muted); }.configuration-history-details { padding: 14px 18px; }
.device-action-guard { min-height: 78px; }.device-action-guard h2, .safe-actions-banner h2 { margin: 4px 0 0; font-size: 18px; }.device-actions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.device-action-card { min-height: 146px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; color: var(--blue); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }.action-card-icon { width: 48px; height: 48px; display: grid; place-items: center; background: #173b62; border-radius: 12px; }.action-card-icon::after { width: 24px; height: 24px; border: 3px solid currentColor; border-radius: 50%; content: ""; }.device-action-card h2 { margin: 0 0 3px; font-size: 18px; }.device-action-card p { margin: 0 0 12px; color: var(--muted); }.device-action-history { min-height: 230px; }
/* Alerts and global actions */
.alerts-filter, .actions-filter { display: flex; align-items: center; gap: 10px; }.alerts-filter select, .actions-filter select { width: 180px; }.alerts-center-panel { min-height: 584px; }.alerts-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(360px,1fr); gap: 14px; }.alerts-list, .alerts-detail { min-height: 495px; padding: 16px 18px; background: var(--surface-2); border-radius: 12px; }.alert-list-item { min-height: 86px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }.alert-list-item.is-selected { background: #3c2e1b; border-color: #80601f; }.alert-list-item strong, .alert-list-item small { display: block; }.alert-list-item small { margin-top: 5px; color: var(--muted); }.alerts-detail h2 { margin: 8px 0 10px; font-size: 18px; }.alert-detail-list { margin: 18px 0; }.alert-detail-list div { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }.alert-detail-list dt { color: var(--muted); }.alert-detail-list dd { margin: 0; text-align: right; }.alerts-detail-actions { display: grid; grid-template-columns: 1fr 1.12fr; gap: 10px; margin-top: 14px; }.safe-actions-banner { min-height: 78px; }.safe-actions-banner > span { color: var(--body); }.actions-queue-panel { min-height: 521px; }.actions-table-wrap { max-height: 355px; }.new-action-strip { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 12px 18px; background: var(--surface-2); border-radius: 10px; }.new-action-strip p { margin-bottom: 4px; }

/* Login */
.login-body, .login-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 15% 15%,#12365c 0,transparent 30%),radial-gradient(circle at 90% 90%,#0d4850 0,transparent 28%),var(--bg); }.login-shell { width: min(1030px,100%); display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }.login-intro, .login-form-panel { padding: 52px; }.login-intro { display: flex; flex-direction: column; }.login-intro > small { margin-top: auto; color: var(--muted); }.login-brand { display: flex; align-items: center; gap: 18px; }.login-brand img { width: 90px; height: 90px; border-radius: 22px; }.login-brand h1 { margin: 0; font-size: 30px; }.login-brand p { margin: 3px 0 0; color: var(--muted); }.login-message { margin-top: 34px; color: var(--muted); }.login-message h2 { font-size: 25px; }.login-points { display: grid; gap: 14px; padding: 0; }.login-points span::before { margin-right: 8px; color: var(--green); content: "●"; }.login-form-panel { background: rgba(7,17,31,.25); }.login-form-panel > h2 { margin: 4px 0 2px; font-size: 25px; }.login-form-panel > p:not(.eyebrow) { color: var(--muted); }.form-stack, .login-form { display: grid; gap: 18px; margin-top: 28px; }.checkbox-row { display: flex; align-items: center; gap: 9px; }.checkbox-row > span:first-child { margin: 0; }.login-security, .login-status { margin-top: 28px; color: var(--muted); }

/* Responsive */
@media (max-width: 1320px) {
    .computers-filter { grid-template-columns: minmax(210px,1.4fr) repeat(4,minmax(110px,.75fr)) 90px 70px; }.register-device-button { grid-column: 1/-1; justify-self: end; }
    .device-tab { padding-inline: 14px; }.device-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .kpi-grid-5 { grid-template-columns: repeat(5,minmax(150px,1fr)); overflow-x: auto; padding-bottom: 4px; }
}

@media (max-width: 1080px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; }.app-sidebar.is-open { transform: translateX(0); }.app-main { margin-left: 0; }
    .mobile-menu-button { display: flex; flex-direction: column; justify-content: center; gap: 4px; }.mobile-menu-button span { width: 18px; height: 2px; background: currentColor; }.sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(1,6,13,.72); border: 0; }.sidebar-open { overflow: hidden; }
    .page-container { padding: 18px 20px 82px; }.page-header { min-height: 82px; }
    .computers-layout, .wizard-layout, .software-layout, .enrollment-content { grid-template-columns: 1fr; }.computer-preview { min-height: 420px; }.computers-list-panel { min-height: auto; }
    .dashboard-state-grid { grid-template-columns: 1fr; }.system-state-card, .priorities-card { min-height: auto; }.device-health-banner { grid-template-columns: 62px 1fr; }.device-health-now { grid-column: 1/-1; border: 0; border-top: 1px solid var(--border); padding: 12px 0 0; }
    .config-shell { grid-template-columns: 210px minmax(0,1fr); }.audit-toolbar { min-width: 0; grid-template-columns: 1fr 160px 90px 70px; }
    .performance-upper-grid, .update-layout, .history-overview-grid, .alerts-layout { grid-template-columns: 1fr; }.network-route { grid-template-columns: 1fr 54px 1fr 54px 1fr; }.device-actions-grid { grid-template-columns: 1fr; }
    .mobile-bottom-nav { position: fixed; z-index: 40; inset: auto 0 0; height: 66px; display: grid; grid-template-columns: repeat(4,1fr); padding: 6px 8px; background: rgba(8,27,52,.96); border-top: 1px solid var(--border); }.mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 0; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; }.mobile-bottom-nav .is-active { color: #fff; background: #1c4576; }.mobile-bottom-nav span { font-size: 17px; }.mobile-bottom-nav small { font-size: 9px; }
}

@media (max-width: 760px) {
    .page-container { padding: 14px 14px 80px; }.page-header { min-height: 96px; gap: 10px; margin-bottom: 10px; }.page-heading h1 { font-size: 23px; }.page-subtitle { font-size: 10px; }.page-actions { gap: 6px; }.install-app-button { display: none; }.icon-button, .mobile-menu-button { width: 40px; }
    .page-content { gap: 10px; }.panel { padding: 13px; }.panel-header { flex-direction: column; gap: 8px; }
    .kpi-grid, .kpi-grid-5, .metric-grid, .operation-stats { grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }.kpi-card, .metric-card, .operation-stat { height: 86px; padding: 11px 12px; }.kpi-value { font-size: 22px; }.metric-value, .operation-stat strong { font-size: 19px; }
    .system-state-card { display: grid; grid-template-columns: 70px 1fr; padding: 16px; gap: 16px; }.health-ring { width: 66px; height: 66px; border-width: 6px; }.system-state-copy h2 { font-size: 18px; }.state-list { gap: 5px; }.priorities-card { padding: 15px; }
    .filter-panel { padding: 10px; }.computers-filter, .monitoring-filter, .wizard-filter, .software-filter { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.filter-search, .computers-filter .filter-search, .software-filter input:first-child { grid-column: 1/-1; }.register-device-button { grid-column: 1/-1; width: 100%; }.computers-filter .button, .monitoring-filter .button { width: 100%; }
    .computers-layout { min-height: 0; }.computers-list-panel { padding: 0; border: 0; background: transparent; }.computers-list-panel .panel-header { padding: 12px; margin: 0; }.compact-sort-form { width: 100%; }.computers-table-wrap { max-height: none; overflow: visible; }.computers-table thead { display: none; }.computers-table, .computers-table tbody { display: block; }.computers-table tr { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin-bottom: 10px; padding: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }.computers-table td { height: auto; display: block; padding: 0; border: 0; }.computers-table td::before { display: block; color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; content: attr(data-label); }.computers-table td:nth-child(2), .computers-table td:nth-child(4), .computers-table td:nth-child(5) { grid-column: 1/-1; }.computer-preview { display: none; }
    .device-tabs { margin-inline: -14px; border-inline: 0; border-radius: 0; }.device-health-banner { display: grid; grid-template-columns: 56px 1fr; padding: 14px; }.device-health-icon { width: 54px; height: 54px; font-size: 30px; }.device-health-copy h2 { font-size: 17px; }.device-health-now strong { font-size: 14px; white-space: normal; }.device-health-now div { flex-wrap: wrap; }.device-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.device-hub-card { min-height: 142px; grid-template-columns: 34px 1fr; gap: 0 9px; padding: 12px; }.hub-icon { width: 34px; height: 34px; }.hub-icon::after { width: 18px; height: 18px; border-width: 2px; }.device-hub-card h3 { font-size: 14px; }.device-hub-card small { font-size: 9px; }.device-hub-card > strong { font-size: 11px; }.two-column, .network-grid, .reports-grid, .software-catalog, .report-grid { grid-template-columns: 1fr; }
    .performance-upper-grid, .performance-lower-grid, .network-overview-grid, .update-layout, .history-overview-grid, .device-actions-grid, .alerts-layout { grid-template-columns: 1fr; }.performance-chart-panel, .disk-summary-panel, .history-overview-grid > .panel { min-height: auto; }.performance-chart, .heartbeat-chart { height: 150px; }.network-route { height: auto; grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }.network-route i { width: 3px; height: 28px; justify-self: center; }.network-route > div > span { width: 46px; height: 46px; }.network-health-banner, .service-health-banner, .device-action-guard, .safe-actions-banner, .update-warning-banner { align-items: flex-start; flex-direction: column; }.update-warning-banner > .button { width: 100%; }.device-action-card { grid-template-columns: 42px minmax(0,1fr); }.device-action-card > .button { grid-column: 1/-1; width: 100%; }.event-timeline li { grid-template-columns: 110px 1fr; gap: 8px; }.event-timeline li small { grid-column: 2; }.history-filter { align-items: stretch; flex-direction: column; }.history-filter > div { display: grid; grid-template-columns: 1fr 1fr; }.history-filter > div span { min-width: 0; }.alerts-list, .alerts-detail { min-height: auto; padding: 12px; }.alert-list-item { grid-template-columns: 8px minmax(0,1fr); }.alert-list-item > .status { grid-column: 2; justify-self: start; }.alerts-filter, .actions-filter { display: grid; grid-template-columns: 1fr 1fr; }.alerts-filter select, .actions-filter select { width: 100%; }.new-action-strip { align-items: stretch; flex-direction: column; }.new-action-strip .button { width: 100%; }
    .config-summary { grid-template-columns: 1fr auto; }.config-meta { grid-column: 1/-1; text-align: left; }.config-shell { grid-template-columns: 1fr; }.config-sidebar { display: flex; gap: 6px; overflow-x: auto; }.config-sidebar h2, .config-rules { display: none; }.config-section-link { min-width: max-content; }.config-content { padding: 10px; }
    .monitoring-table-wrap, .audit-table-wrap, .wizard-table-wrap, .software-table-wrap { overflow-x: auto; }.monitoring-table, .audit-panel table, .wizard-main-panel table, .software-panel table { min-width: 820px; }
    .reports-intro { min-height: 90px; padding: 14px; }.reports-intro h2 { font-size: 15px; }.report-card { min-height: 145px; padding: 14px; }.report-card-footer { align-items: flex-end; }.report-card-footer > div { display: grid; }.count-pill { min-width: 86px; }
    .software-header { flex-direction: column; align-items: stretch; }.software-add-button { width: 100%; }.software-selected-panel { min-height: 390px; }
    .wizard-steps { overflow-x: auto; padding: 0 12px; }.wizard-steps li { min-width: 130px; }.wizard-steps li:not(:last-child)::after { display: none; }.wizard-summary { min-height: 500px; }.wizard-main-panel { min-height: 520px; }
    .enrollment-create-form { grid-template-columns: 1fr 1fr; }.enrollment-create-action { grid-column: 1/-1; }.token-result { grid-template-columns: 1fr; }.audit-toolbar { width: 100%; grid-template-columns: 1fr 1fr; }.audit-toolbar .toolbar-search { grid-column: 1/-1; }.workflow-steps, .module-grid, .fleet-grid { grid-template-columns: 1fr; }.toolbar { width: 100%; flex-wrap: wrap; }
    .login-body { padding: 12px; }.login-shell { grid-template-columns: 1fr; }.login-intro { padding: 24px; }.login-message, .login-points { display: none; }.login-form-panel { padding: 24px; }
}

@media (max-width: 430px) {
    .kpi-grid, .kpi-grid-5 { grid-template-columns: repeat(2,minmax(0,1fr)); }.page-actions .icon-button { width: 36px; }.device-hub-grid { grid-template-columns: 1fr; }.device-hub-card { min-height: 126px; }.facts-grid { grid-template-columns: 1fr; }.fact-span-2, .fact-span-4 { grid-column: 1; }.preview-metrics { grid-template-columns: 1fr; }.enrollment-create-form { grid-template-columns: 1fr; }.report-card-footer { flex-direction: column; align-items: stretch; }.report-card-footer > div { grid-template-columns: 1fr 1fr; }.count-pill { align-self: flex-start; }
}

@media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }.install-app-button { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }