/* Generated by scripts/generate-theme-overrides.cjs; change semantic tokens in design-system.css. Administrative shell only. */
html[data-theme] .service-desk-shell { color: var(--text)
}
html[data-theme] .service-desk-loading { color: var(--muted)
}
html[data-theme] .service-desk-loading span { border: 3px solid var(--border); border-top-color: var(--accent-border)
}
html[data-theme] .service-desk-loading strong { color: var(--text)
}
html[data-theme] .service-desk-loading small { font-size: var(--text-xs)
}
html[data-theme] .service-page-header h1 { color: var(--text)
}
html[data-theme] .service-page-header p { color: var(--muted)
}
html[data-theme] .service-kpi { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .service-kpi:hover { border-color: var(--accent-border)
}
html[data-theme] .service-kpi span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-kpi strong { color: var(--text)
}
html[data-theme] .service-kpi small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-section-head { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-section-head span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-section-head h2 { color: var(--text)
}
html[data-theme] .service-section-head > b { color: var(--text)
}
html[data-theme] .service-performance-grid > div { border-right: 1px solid var(--border)
}
html[data-theme] .service-performance-grid span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-performance-grid strong { color: var(--text)
}
html[data-theme] .service-panel-copy { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-ticket-table th { border-bottom: 1px solid var(--border); color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-ticket-table td { border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-ticket-table tbody tr:hover { background: var(--surface)
}
html[data-theme] .service-ticket-table td strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-ticket-table td > span:not(.service-status):not(.service-priority) { color: var(--muted)
}
html[data-theme] .service-status { font-size: var(--text-xs)
}
html[data-theme] .service-priority { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-empty { color: var(--muted)
}
html[data-theme] .service-empty strong { color: var(--text)
}
html[data-theme] .service-empty span { font-size: var(--text-xs)
}
html[data-theme] .service-ticket-filters { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-ticket-filters label > span,
html[data-theme] .service-new-form label > span,
html[data-theme] .service-sidebar-form label > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-ticket-filters input,
html[data-theme] .service-ticket-filters select,
html[data-theme] .service-new-form input,
html[data-theme] .service-new-form select,
html[data-theme] .service-new-form textarea,
html[data-theme] .service-sidebar-form select,
html[data-theme] .service-compose textarea { border: 1px solid var(--border); background: var(--bg); color: var(--text)
}
html[data-theme] .service-ticket-filters input:focus,
html[data-theme] .service-ticket-filters select:focus,
html[data-theme] .service-new-form input:focus,
html[data-theme] .service-new-form select:focus,
html[data-theme] .service-new-form textarea:focus,
html[data-theme] .service-sidebar-form select:focus,
html[data-theme] .service-compose textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .service-queue-card { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .service-queue-card:hover { border-color: var(--accent-border)
}
html[data-theme] .service-queue-card span { color: var(--text)
}
html[data-theme] .service-queue-card strong { color: var(--accent-text)
}
html[data-theme] .service-queue-card p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-queue-card small { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-form-section { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-form-section:not(:first-child) { border-top: 1px solid var(--border)
}
html[data-theme] .service-form-section > span { background: var(--surface-raised); color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-form-section h2 { color: var(--text)
}
html[data-theme] .service-form-section p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-form-actions { border-top: 1px solid var(--border)
}
html[data-theme] .service-back { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-ticket-header { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .service-ticket-title-line > span:first-child { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-ticket-header h1 { color: var(--text)
}
html[data-theme] .service-ticket-header p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-timeline-item { border-left: 1px solid var(--border)
}
html[data-theme] .service-timeline-dot { border: 2px solid var(--border); background: var(--accent-solid); box-shadow: 0 0 0 2px var(--shadow-color)
}
html[data-theme] .service-timeline-item.internal_note .service-timeline-dot { background: var(--warning-solid); box-shadow: 0 0 0 2px var(--shadow-color)
}
html[data-theme] .service-timeline-item.response .service-timeline-dot,
html[data-theme] .service-timeline-item.resolution .service-timeline-dot { background: var(--success-solid); box-shadow: 0 0 0 2px var(--shadow-color)
}
html[data-theme] .service-timeline-meta strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-timeline-meta time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-timeline-body { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-timeline-body blockquote { border-left: 3px solid var(--accent-border); background: var(--surface); color: var(--text)
}
html[data-theme] .service-timeline-body code { background: var(--bg); color: var(--text)
}
html[data-theme] .service-timeline-body a { color: var(--accent-text)
}
html[data-theme] .service-timeline-item small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-compose-pro { border-color: var(--border); background: linear-gradient(155deg, var(--surface), var(--surface))
}
html[data-theme] .service-compose-tabs { border-bottom: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .service-compose-tabs button { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-compose-tabs button.active { border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: inset 0 2px var(--shadow-color)
}
html[data-theme] .service-compose label > span,
html[data-theme] .service-compose-recipient > span,
html[data-theme] .service-compose-controls legend { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-compose select { border: 1px solid var(--border); background: var(--bg); color: var(--text)
}
html[data-theme] .service-compose select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .service-compose-recipient { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .service-compose-recipient::before { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-compose-recipient strong,
html[data-theme] .service-compose-recipient small { font-size: var(--text-xs)
}
html[data-theme] .service-compose-recipient strong { color: var(--text)
}
html[data-theme] .service-compose-recipient small { color: var(--accent-text)
}
html[data-theme] .service-rich-editor { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .service-rich-editor:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .service-editor-toolbar { border-bottom: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .service-editor-toolbar button { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-editor-toolbar button:hover { background: var(--surface-raised); color: var(--text)
}
html[data-theme] .service-editor-toolbar > span { background: var(--surface-raised)
}
html[data-theme] .service-rich-editor textarea { background: var(--bg); color: var(--text)
}
html[data-theme] .service-compose-dropzone { border: 1px dashed var(--accent-border); background: var(--surface); color: var(--muted)
}
html[data-theme] .service-compose-dropzone:hover { border-color: var(--accent-border); background: var(--surface)
}
html[data-theme] .service-compose-dropzone span { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-compose-dropzone small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-compose-controls fieldset label { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-compose-controls input[type="radio"] { accent-color: var(--accent-text)
}
html[data-theme] .service-compose-footer { border-top: 1px solid var(--border)
}
html[data-theme] .service-compose-footer small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-compose-pro:has(form.is-internal) { border-color: var(--warning-border)
}
html[data-theme] .service-sla-data > div,
html[data-theme] .service-device-data > div { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-sla-data dt,
html[data-theme] .service-device-data dt { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-sla-data dd,
html[data-theme] .service-device-data dd { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-attachment-list a { border: 1px solid var(--border); color: var(--text); background: var(--surface-tint)
}
html[data-theme] .service-attachment-list a:hover { border-color: var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .service-attachment-list small { color: var(--muted)
}
html[data-theme] .service-sla-data dd.breached { color: var(--danger-text)
}
html[data-theme] .service-device-icon { border: 1px solid var(--accent-border); background: var(--surface-raised); color: var(--accent-text)
}
html[data-theme] .service-device-identity strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-device-identity small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-snapshot-note { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .service-snapshot-note strong { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-snapshot-note span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-no-device { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-no-device strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-create form strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-create input,
html[data-theme] .service-settings-create select { border: 1px solid var(--border); background: var(--bg); color: var(--text)
}
html[data-theme] .service-settings-list > div { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-settings-list strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-list small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-list em { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-feature-ready > span { border: 1px solid var(--accent-border); background: var(--surface-raised); color: var(--accent-text)
}
html[data-theme] .service-feature-ready strong { color: var(--text)
}
html[data-theme] .service-feature-ready p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-overview { background: linear-gradient(135deg,var(--surface),var(--surface))
}
html[data-theme] .service-settings-overview > div:first-child > span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-overview h2 { color: var(--text)
}
html[data-theme] .service-settings-overview p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-health { border: 1px solid var(--warning-border); background: var(--surface-raised)
}
html[data-theme] .service-settings-health.ok { border-color: var(--success-border); background: var(--surface-raised)
}
html[data-theme] .service-settings-health strong { color: var(--warning-text)
}
html[data-theme] .service-settings-health.ok strong { color: var(--success-text)
}
html[data-theme] .service-settings-health small { color: var(--warning-text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-issues button { border: 1px solid var(--warning-border); background: var(--surface)
}
html[data-theme] .service-settings-issues button:hover { border-color: var(--warning-border)
}
html[data-theme] .service-settings-issues button > span { background: var(--surface-raised); color: var(--warning-text)
}
html[data-theme] .service-settings-issues strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-issues small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-issues b { color: var(--warning-text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-hub-card header { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-settings-hub-card header > span { border: 1px solid var(--accent-border); background: var(--surface-raised); color: var(--accent-text)
}
html[data-theme] .service-settings-hub-card small { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-hub-card h2 { color: var(--text)
}
html[data-theme] .service-settings-hub-card header > strong { color: var(--accent-text)
}
html[data-theme] .service-settings-counts { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-counts b { color: var(--text)
}
html[data-theme] .service-settings-toolbar { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-settings-search span { color: var(--muted)
}
html[data-theme] .service-settings-search input,
html[data-theme] .service-settings-toolbar select { border: 1px solid var(--border); background: var(--bg); color: var(--text)
}
html[data-theme] .service-settings-search input:focus,
html[data-theme] .service-settings-toolbar select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .service-settings-filter-tabs { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .service-settings-filter-tabs button { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-filter-tabs button.active { background: var(--surface-raised); color: var(--text)
}
html[data-theme] .service-settings-bulk { border-bottom: 1px solid var(--border); background: var(--surface-raised)
}
html[data-theme] .service-settings-bulk strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-bulk button { border: 1px solid var(--accent-border); background: var(--surface-raised); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-bulk button.danger { border-color: var(--danger-border); background: var(--surface); color: var(--text)
}
html[data-theme] .service-settings-table th,
html[data-theme] .service-settings-table td { border-bottom: 1px solid var(--border); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-table th { background: var(--surface); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-table tbody tr:hover { background: var(--surface)
}
html[data-theme] .service-settings-table input[type="checkbox"] { accent-color: var(--accent-text)
}
html[data-theme] .service-setting-tree-branch { color: var(--muted)
}
html[data-theme] .service-setting-name strong { color: var(--text)
}
html[data-theme] .service-setting-status { font-size: var(--text-xs)
}
html[data-theme] .service-setting-status.active { border: 1px solid var(--success-border); background: var(--surface-raised); color: var(--success-text)
}
html[data-theme] .service-setting-status.inactive { border: 1px solid var(--border); background: var(--surface-raised); color: var(--muted)
}
html[data-theme] .service-settings-actions summary { border: 1px solid var(--border); color: var(--muted)
}
html[data-theme] .service-settings-actions > div { border: 1px solid var(--border); background: var(--surface); box-shadow: 0 14px 35px var(--shadow-color)
}
html[data-theme] .service-settings-actions button { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-actions button:hover { background: var(--surface-raised); color: var(--text)
}
html[data-theme] .service-settings-actions button.danger { color: var(--muted)
}
html[data-theme] .service-settings-pagination { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-pagination button { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-pagination strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-overlay { background: var(--bg)
}
html[data-theme] .service-settings-drawer { border-left: 1px solid var(--border); background: var(--surface); box-shadow: -20px 0 55px var(--shadow-color)
}
html[data-theme] .service-settings-drawer > header { border-bottom: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .service-settings-drawer > header small { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-drawer > header h2 { color: var(--text)
}
html[data-theme] .service-settings-drawer > header button { border: 1px solid var(--border); background: var(--surface-raised); color: var(--text)
}
html[data-theme] .service-settings-drawer form > footer { border-top: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .service-settings-field > span,
html[data-theme] .service-settings-permissions legend { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-field input,
html[data-theme] .service-settings-field select,
html[data-theme] .service-settings-field textarea { border: 1px solid var(--border); background: var(--bg); color: var(--text)
}
html[data-theme] .service-settings-field input:focus,
html[data-theme] .service-settings-field select:focus,
html[data-theme] .service-settings-field textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .service-settings-toggle { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .service-settings-toggle > span { background: var(--surface-raised)
}
html[data-theme] .service-settings-toggle > span::after { background: var(--surface-raised)
}
html[data-theme] .service-settings-toggle input:checked + span { background: var(--success-soft)
}
html[data-theme] .service-settings-toggle input:checked + span::after { background: var(--surface-hover)
}
html[data-theme] .service-settings-toggle b { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-permissions { border: 1px solid var(--border)
}
html[data-theme] .service-settings-permissions label { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-permissions input { accent-color: var(--accent-text)
}
html[data-theme] .service-settings-relations { border-top: 1px solid var(--border)
}
html[data-theme] .service-settings-relations h3 { color: var(--text)
}
html[data-theme] .service-settings-context { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-dependencies > div { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .service-settings-dependencies strong { color: var(--warning-text)
}
html[data-theme] .service-settings-dependencies span { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-audit article { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .service-settings-audit span,
html[data-theme] .service-settings-audit small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-settings-audit strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-audit summary { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .service-settings-audit pre { background: var(--bg); color: var(--text)
}
@media (max-width: 680px) {
 html[data-theme] .service-performance-grid > div { border-bottom: 1px solid var(--border)
 }
}
html[data-theme] .sidebar { border-right: 1px solid var(--border)
}
html[data-theme] .brand {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--bg))
}
html[data-theme] .brand-mark { background: var(--surface)
}
html[data-theme] .brand-mark span { background: var(--surface)
}
html[data-theme] .brand small {
  font-size: var(--text-xs)
}
html[data-theme] .main-nav {
  scrollbar-color: var(--surface-raised) transparent
}
html[data-theme] .start-menu-title {
  color: var(--muted);
  font-size: var(--text-xs)
}
html[data-theme] .nav-menu-trigger {
  color: var(--muted)
}
html[data-theme] .nav-menu-trigger:hover,
html[data-theme] .nav-menu-trigger:focus-visible,
html[data-theme] .nav-menu-group.open > .nav-menu-trigger,
html[data-theme] .nav-menu-group:has(.nav-item.active) > .nav-menu-trigger {
  border-color: var(--border);
  background: linear-gradient(135deg, var(--surface-raised), var(--surface));
  color: var(--text)
}
html[data-theme] .nav-menu-group.open > .nav-menu-trigger { box-shadow: inset 3px 0 var(--shadow-color), 0 8px 20px var(--shadow-color)
}
html[data-theme] .nav-menu-icon {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-text)
}
html[data-theme] .nav-menu-trigger strong { font-size: var(--text-xs)
}
html[data-theme] .nav-menu-trigger small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .nav-menu-arrow { color: var(--muted)
}
html[data-theme] .nav-submenu {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: inset 2px 0 var(--shadow-color)
}
html[data-theme] .nav-submenu-head { border-bottom: 1px solid var(--border)
}
html[data-theme] .nav-submenu-head small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .nav-submenu .nav-item { color: var(--muted)
}
html[data-theme] .nav-submenu .nav-item.active { color: var(--text); background: var(--surface-raised)
}
html[data-theme] .main-nav :is(a, button):focus-visible { outline: 2px solid var(--accent-border)
}
html[data-theme] .nav-label { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .nav-item {
  color: var(--muted)
}
html[data-theme] .nav-item:hover { background: var(--surface); color: var(--text)
}
html[data-theme] .nav-item.active { color: var(--text); background: var(--surface-raised)
}
html[data-theme] .nav-count { background: var(--surface-raised); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .nav-count.alert-count { color: var(--warning-text); background: var(--surface-raised)
}
html[data-theme] .sidebar-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 -12px 24px var(--shadow-color)
}
html[data-theme] .system-status { border-bottom: 1px solid var(--border)
}
html[data-theme] .system-status strong,
html[data-theme] .user-card strong { font-size: var(--text-xs)
}
html[data-theme] .system-status small,
html[data-theme] .user-card small { font-size: var(--text-xs)
}
html[data-theme] .pulse-dot { box-shadow: 0 0 0 5px var(--shadow-color)
}
html[data-theme] .avatar { background: linear-gradient(135deg, var(--surface-raised), var(--surface-raised)); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .user-card button { color: var(--muted)
}
html[data-theme] .brand-mark.has-client-logo { background: var(--surface); border: 1px solid var(--border)
}
html[data-theme] .logo-needs-contrast {
  background:
    radial-gradient(circle at 18% 18%, var(--surface), transparent 46%),
    linear-gradient(145deg, var(--surface), var(--surface)) !important;
  border-color: var(--border) !important;
  box-shadow: inset 0 0 0 1px var(--shadow-color), 0 8px 22px var(--shadow-color)
}
html[data-theme] .topbar { background: var(--bg);
  border-bottom: 1px solid var(--border)
}
html[data-theme] .search-box > span { color: var(--muted)
}
html[data-theme] .search-box input { color: var(--text); background: var(--surface); border: 1px solid var(--border)
}
html[data-theme] .search-box input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .search-box input::placeholder { color: var(--muted)
}
html[data-theme] .search-box kbd { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .central-context label { font-size: var(--text-xs)
}
html[data-theme] .central-context select { border: 1px solid var(--border); color: var(--text); background: var(--surface)
}
html[data-theme] .icon-button,
html[data-theme] .refresh-button { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .icon-button { color: var(--muted)
}
html[data-theme] .zoom-button.active { color: var(--accent-text); border-color: var(--accent-border); background: var(--surface-raised)
}
html[data-theme] .zoom-menu {
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 14px 35px var(--shadow-color)
}
html[data-theme] .zoom-menu button { color: var(--text)
}
html[data-theme] .zoom-menu button:hover { color: var(--text); background: var(--surface-raised)
}
html[data-theme] #zoomResetButton { font-size: var(--text-xs)
}
html[data-theme] .notification-button i { border: 1px solid var(--border)
}
html[data-theme] .refresh-button { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .refresh-button:hover,
html[data-theme] .icon-button:hover { background: var(--surface-raised); border-color: var(--border)
}
html[data-theme] .eyebrow { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .page-heading p { font-size: var(--text-xs)
}
html[data-theme] .heading-meta { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .live-status { border: 1px solid var(--border); color: var(--text); background: var(--surface)
}
html[data-theme] .live-status.paused { border-color: var(--border); color: var(--warning-text); background: var(--surface)
}
html[data-theme] .live-status.paused i { background: var(--warning-solid); box-shadow: 0 0 8px var(--shadow-color)
}
html[data-theme] .metric-card,
html[data-theme] .panel { background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .metric-card::before { background: radial-gradient(circle at 90% 5%, var(--accent-soft), transparent 38%)
}
html[data-theme] .warning-card { border-color: var(--border)
}
html[data-theme] .metric-top { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .metric-icon.green { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .metric-icon.blue { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .metric-icon.amber { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .metric-icon.purple { color: var(--purple-text); background: var(--purple-soft)
}
html[data-theme] .metric-value small { color: var(--muted)
}
html[data-theme] .metric-footer { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .metric-footer .positive { color: var(--success-text)
}
html[data-theme] .metric-footer .critical { color: var(--danger-text)
}
html[data-theme] .text-action { color: var(--warning-text); font-size: var(--text-xs)
}
html[data-theme] .uptime-track { background: var(--surface-raised)
}
html[data-theme] .uptime-track span { background: linear-gradient(90deg, var(--purple-soft), var(--purple-solid))
}
html[data-theme] .panel-header p { font-size: var(--text-xs)
}
html[data-theme] .period-switcher { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .period-switcher button { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .period-switcher button.active { color: var(--text); background: var(--surface-raised)
}
html[data-theme] .chart-legend { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .chart-legend strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .y-axis { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .grid-lines line { stroke: var(--faint)
}
html[data-theme] .x-axis { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .more-button { color: var(--muted)
}
html[data-theme] .donut { box-shadow: 0 0 28px var(--shadow-color)
}
html[data-theme] .donut::before { background: var(--surface)
}
html[data-theme] .donut span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .status-list > div { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .status-list strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .status-list small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .status-dot.online { box-shadow: 0 0 6px var(--shadow-color)
}
html[data-theme] .filter-group { background: var(--bg); border: 1px solid var(--border)
}
html[data-theme] .filter-button { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .filter-button span { color: var(--muted)
}
html[data-theme] .filter-button.active { color: var(--text); background: var(--surface-raised)
}
html[data-theme] .filter-button.active span { color: var(--muted)
}
html[data-theme] .outline-button { border: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .outline-button:hover { color: var(--text); background: var(--surface-raised)
}
html[data-theme] th { color: var(--muted); background: var(--bg); font-size: var(--text-xs)
}
html[data-theme] td { border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] tbody tr:hover { background: var(--surface)
}
html[data-theme] .device-icon { border: 1px solid var(--border); color: var(--muted); background: var(--surface)
}
html[data-theme] .device-cell strong,
html[data-theme] .ip-cell strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .device-cell small,
html[data-theme] .ip-cell small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .equipment-detail-link { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .equipment-detail-link:hover,
html[data-theme] .equipment-detail-link:focus-visible { color: var(--accent-text)
}
html[data-theme] .status-badge { font-size: var(--text-xs)
}
html[data-theme] .status-badge.online { color: var(--success-text); background: var(--success-soft); border: 1px solid var(--success-border)
}
html[data-theme] .status-badge.warning { color: var(--warning-text); background: var(--warning-soft); border: 1px solid var(--warning-border)
}
html[data-theme] .status-badge.offline { color: var(--danger-text); background: var(--danger-soft); border: 1px solid var(--danger-border)
}
html[data-theme] .usage-bar { background: var(--surface-raised)
}
html[data-theme] .usage-bar i { background: var(--accent-soft)
}
html[data-theme] .usage.off .usage-bar i { background: var(--surface-raised)
}
html[data-theme] .traffic-values strong,
html[data-theme] .traffic-values small { font-size: var(--text-xs)
}
html[data-theme] .traffic-values strong { color: var(--accent-text)
}
html[data-theme] .traffic-values small { color: var(--purple-text)
}
html[data-theme] .row-menu { color: var(--muted)
}
html[data-theme] .empty-state { color: var(--muted)
}
html[data-theme] .empty-state span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-item { border-top: 1px solid var(--border)
}
html[data-theme] .alert-symbol { font-size: var(--text-xs)
}
html[data-theme] .critical-alert .alert-symbol { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .warning-alert .alert-symbol { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .alert-item strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .alert-item p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-item time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .availability-score { color: var(--success-text)
}
html[data-theme] .availability-bars i { background: var(--success-soft)
}
html[data-theme] .availability-bars i.warning { background: var(--warning-soft)
}
html[data-theme] .availability-bars i.offline { background: var(--surface-raised)
}
html[data-theme] .availability-bars i.no-data { background: var(--surface-raised)
}
html[data-theme] .availability-legend,
html[data-theme] .availability-footer { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .availability-footer { border-top: 1px solid var(--border); color: var(--muted)
}
html[data-theme] body.wallboard-mode { background: var(--bg)
}
html[data-theme] .primary-button,
html[data-theme] .secondary-button,
html[data-theme] .test-button { font-size: var(--text-xs)
}
html[data-theme] .primary-button { border: 1px solid var(--accent-border); background: linear-gradient(180deg, var(--accent-solid), var(--accent-soft)); color: var(--on-accent); box-shadow: 0 7px 20px var(--shadow-color)
}
html[data-theme] .primary-button:hover { background: linear-gradient(180deg, var(--accent-solid), var(--accent-soft))
}
html[data-theme] .secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--muted)
}
html[data-theme] .test-button { border: 1px solid var(--accent-border); background: var(--surface); color: var(--accent-text)
}
html[data-theme] .device-summary-card { background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .device-summary-card span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .device-toolbar p { font-size: var(--text-xs)
}
html[data-theme] .device-search span { color: var(--muted)
}
html[data-theme] .device-search input { color: var(--text); background: var(--bg); border: 1px solid var(--border); font-size: var(--text-xs)
}
html[data-theme] .device-search input:focus { border-color: var(--accent-border)
}
html[data-theme] .connection-badge { background: var(--surface-raised); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .connection-badge i { background: var(--accent-solid)
}
html[data-theme] .enabled-badge,
html[data-theme] .disabled-badge { font-size: var(--text-xs)
}
html[data-theme] .enabled-badge { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .disabled-badge { color: var(--muted); background: var(--surface-tint)
}
html[data-theme] .device-interval { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .action-button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .action-button:hover { color: var(--text); border-color: var(--border)
}
html[data-theme] .action-button.delete:hover { color: var(--danger-text); border-color: var(--danger-border); background: var(--surface)
}
html[data-theme] .device-register-table tbody tr:focus { outline: 1px solid var(--accent-border); background: var(--surface)
}
html[data-theme] .device-filter-panel > div:first-child span { font-size: var(--text-xs)
}
html[data-theme] .checkbox-filter-group label span { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .checkbox-filter-group input:checked + span { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--shadow-color)
}
html[data-theme] .probe-management-filters label > span,
html[data-theme] .probe-form-grid label > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .probe-management-filters input,
html[data-theme] .probe-management-filters select,
html[data-theme] .probe-form-grid input,
html[data-theme] .probe-form-grid select,
html[data-theme] .probe-form-grid textarea { border: 1px solid var(--border); background: var(--bg); color: var(--text)
}
html[data-theme] .probe-table-primary { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .probe-table-secondary { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .probe-action-group button { border: 1px solid var(--border); background: var(--surface-raised); color: var(--text)
}
html[data-theme] .probe-action-group button:hover { border-color: var(--accent-border); color: var(--text)
}
html[data-theme] .probe-empty-row td { color: var(--muted)
}
html[data-theme] .probe-relations-summary { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .probe-relations-summary strong { color: var(--text)
}
html[data-theme] .probe-relations-summary span { color: var(--muted)
}
html[data-theme] .probe-token-result { border: 1px solid var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .probe-token-result div span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .probe-token-result code { background: var(--bg); color: var(--text)
}
html[data-theme] .collector-printer-preview { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .collector-status { font-size: var(--text-xs)
}
html[data-theme] .collector-status.pending { color: var(--warning-text); background: var(--warning-soft); border: 1px solid var(--warning-border)
}
html[data-theme] .collector-status.approved { color: var(--success-text); background: var(--success-soft); border: 1px solid var(--success-border)
}
html[data-theme] .collector-status.denied { color: var(--text); background: var(--danger-soft); border: 1px solid var(--danger-border)
}
html[data-theme] .type-badge { border: 1px solid color-mix(in srgb, var(--type-color) 40%, var(--border)); color: color-mix(in srgb, var(--type-color) 75%, var(--text)); background: color-mix(in srgb, var(--type-color) 10%, var(--surface)); font-size: var(--text-xs)
}
html[data-theme] .device-type-card { background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .device-type-icon { border: 1px solid color-mix(in srgb, var(--type-color) 42%, var(--border)); background: color-mix(in srgb, var(--type-color) 10%, var(--surface))
}
html[data-theme] .device-type-card > p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .device-type-meta div { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .device-type-meta span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .device-type-meta strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .device-type-count { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .category-bar-row > span { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .category-bar-row > strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .category-bar { background: var(--surface-raised)
}
html[data-theme] .asset-row { border-bottom: 1px solid var(--border)
}
html[data-theme] .asset-row strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .asset-row small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vmware-vm-grid { border: 1px solid var(--border); background: var(--surface-tint)
}
html[data-theme] .vmware-vm-head { color: var(--accent-text); background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: var(--text-xs)
}
html[data-theme] .vmware-vm-sort span { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .vmware-vm-sort:hover,
html[data-theme] .vmware-vm-sort.active { color: var(--text)
}
html[data-theme] .vmware-vm-sort.active span { color: var(--accent-text)
}
html[data-theme] .vmware-vm-row { border-bottom: 1px solid var(--border)
}
html[data-theme] .vmware-vm-row strong { color: var(--text)
}
html[data-theme] .vmware-vm-row span { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .vmware-vm-row small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vmware-vm-row mark { border: 1px solid var(--border); background: var(--surface-tint); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .vmware-vm-row mark.online { border-color: var(--success-border); background: var(--success-soft); color: var(--success-text)
}
html[data-theme] .vmware-vm-row mark.offline { border-color: var(--danger-border); background: var(--danger-soft); color: var(--text)
}
html[data-theme] .vmware-vm-row mark.warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-text)
}
html[data-theme] .vmware-vm-meter strong { font-size: var(--text-xs); color: var(--text)
}
html[data-theme] .vmware-vm-meter small { font-size: var(--text-xs); color: var(--muted)
}
html[data-theme] .vmware-vm-meter > span { background: var(--surface-raised)
}
html[data-theme] .vmware-vm-meter i { background: var(--accent-soft)
}
html[data-theme] .vmware-vm-meter.healthy i,
html[data-theme] .vmware-vm-meter.cpu.healthy i,
html[data-theme] .vmware-vm-meter.memory.healthy i,
html[data-theme] .vmware-vm-meter.storage.healthy i { background: var(--accent-soft)
}
html[data-theme] .vmware-vm-meter.unknown i,
html[data-theme] .vmware-vm-meter.storage.unknown i { background: var(--surface-raised)
}
html[data-theme] .vmware-vm-meter.warning strong { color: var(--warning-text)
}
html[data-theme] .vmware-vm-meter.critical strong { color: var(--text)
}
html[data-theme] .vmware-vm-meter.unknown strong { color: var(--text)
}
html[data-theme] .vmware-vm-open strong { color: var(--text)
}
html[data-theme] .vmware-vm-open small { color: var(--muted)
}
html[data-theme] .vmware-vm-open:hover strong { color: var(--accent-text)
}
html[data-theme] .vmware-vm-open:focus-visible { outline: 2px solid var(--accent-border)
}
html[data-theme] .vm-observability-heading { border: 1px solid var(--border); background: linear-gradient(135deg, var(--accent-soft), var(--purple-soft))
}
html[data-theme] .vm-observability-heading span,
html[data-theme] .vm-section-title span,
html[data-theme] .vm-card-title > div > span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .vm-observability-heading h2 { color: var(--text)
}
html[data-theme] .vm-observability-heading p { color: var(--muted)
}
html[data-theme] .vm-period-switcher { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .vm-period-switcher button { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-period-switcher button.active { color: var(--text); background: var(--surface-raised)
}
html[data-theme] .vm-operational-loading,
html[data-theme] .vm-operational-error { border: 1px solid var(--border); color: var(--accent-text); background: var(--surface)
}
html[data-theme] .vm-operational-error { color: var(--text)
}
html[data-theme] .vm-operational-error span { color: var(--muted)
}
html[data-theme] .vm-card-title h3,
html[data-theme] .vm-section-title h3 { color: var(--text)
}
html[data-theme] .vm-card-title mark { color: var(--accent-text); background: var(--accent-soft); font-size: var(--text-xs)
}
html[data-theme] .vm-health-card.excellent { border-color: var(--success-border)
}
html[data-theme] .vm-health-card.excellent .vm-card-title mark { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .vm-health-card.light-warning { border-color: var(--accent-border)
}
html[data-theme] .vm-health-card.warning { border-color: var(--warning-border)
}
html[data-theme] .vm-health-card.warning .vm-card-title mark { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .vm-health-card.critical { border-color: var(--danger-border)
}
html[data-theme] .vm-health-card.critical .vm-card-title mark,
html[data-theme] .vm-card-title mark.critical { color: var(--text); background: var(--danger-soft)
}
html[data-theme] .vm-health-score > strong { color: var(--text)
}
html[data-theme] .vm-health-ring { background: conic-gradient(var(--success-solid) var(--score), var(--surface-raised) 0)
}
html[data-theme] .vm-health-ring::after { background: var(--surface)
}
html[data-theme] .vm-health-factors span { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .vm-stale-note { color: var(--warning-text); font-size: var(--text-xs)
}
html[data-theme] .vm-forecast-grid > div,
html[data-theme] .vm-backup-grid > div { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .vm-forecast-grid span,
html[data-theme] .vm-backup-grid span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-forecast-grid strong,
html[data-theme] .vm-backup-grid strong { color: var(--text)
}
html[data-theme] .vm-forecast-result { border: 1px solid var(--border); background: var(--accent-soft)
}
html[data-theme] .vm-forecast-result strong { color: var(--text)
}
html[data-theme] .vm-forecast-result span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-backup-card > small { color: var(--muted)
}
html[data-theme] .vm-alert-counts > div { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .vm-alert-counts span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-alert-counts strong { color: var(--text)
}
html[data-theme] .vm-alert-counts .critical strong { color: var(--danger-text)
}
html[data-theme] .vm-alert-counts .warning strong { color: var(--warning-text)
}
html[data-theme] .vm-alert-counts .info strong { color: var(--accent-text)
}
html[data-theme] .vm-alert-counts .ignored strong { color: var(--purple-text)
}
html[data-theme] .vm-alert-counts .resolved strong { color: var(--success-text)
}
html[data-theme] .vm-alert-actions button { border: 1px solid var(--border); color: var(--text); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .vm-section-title small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-history-section,
html[data-theme] .vm-timeline-card { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .vm-chart-header span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-chart-header strong { color: var(--text)
}
html[data-theme] .vm-chart-header small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-history-chart svg line { stroke: var(--faint)
}
html[data-theme] .vm-chart-area { fill: var(--accent-text)
}
html[data-theme] .vm-chart-line { stroke: var(--accent-text)
}
html[data-theme] .vm-no-history { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-no-data-inline { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-timeline article { border-left: 1px solid var(--border)
}
html[data-theme] .vm-timeline article > i { border: 2px solid var(--border); background: var(--accent-solid); box-shadow: 0 0 0 2px var(--shadow-color)
}
html[data-theme] .vm-timeline article.critical > i { background: var(--danger-soft)
}
html[data-theme] .vm-timeline article.warning > i { background: var(--warning-solid)
}
html[data-theme] .vm-timeline article.success > i { background: var(--success-solid)
}
html[data-theme] .vm-timeline time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-timeline strong { color: var(--text)
}
html[data-theme] .vm-timeline p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .vm-timeline small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .empty-state { color: var(--muted)
}
html[data-theme] .user-identity strong { color: var(--text)
}
html[data-theme] .user-identity small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .role-badge { border: 1px solid var(--border); color: var(--text); background: var(--accent-soft); font-size: var(--text-xs)
}
html[data-theme] .role-badge.admin { color: var(--muted); border-color: var(--purple-border); background: var(--purple-soft)
}
html[data-theme] .role-badge.viewer { color: var(--muted); border-color: var(--border); background: var(--surface)
}
html[data-theme] .login-screen { background: radial-gradient(circle at 12% 8%, var(--accent-soft), transparent 32%), radial-gradient(circle at 88% 92%, var(--success-soft), transparent 28%), linear-gradient(145deg, var(--bg), var(--bg) 55%, var(--bg))
}
html[data-theme] .login-card { border: 1px solid var(--border); background: linear-gradient(150deg, var(--surface), var(--bg)); box-shadow: 0 35px 100px var(--shadow-color), 0 0 0 1px var(--shadow-color) inset
}
html[data-theme] .login-card::before { background: linear-gradient(90deg, var(--accent-soft), var(--accent-solid) 52%, var(--success-solid))
}
html[data-theme] .login-brand { border-bottom: 1px solid var(--border)
}
html[data-theme] .login-brand small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .login-heading > span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .login-heading p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .login-environment { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .login-environment-dot { background: var(--success-solid); box-shadow: 0 0 0 5px var(--shadow-color), 0 0 14px var(--shadow-color)
}
html[data-theme] .login-environment strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .login-environment small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .login-field > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .login-field input { border: 1px solid var(--border); color: var(--text); background: var(--bg)
}
html[data-theme] .login-field input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .login-password button { color: var(--muted); background: var(--surface-raised); font-size: var(--text-xs)
}
html[data-theme] .login-error { color: var(--danger-text); font-size: var(--text-xs)
}
html[data-theme] .login-submit { border: 1px solid var(--accent-border); color: var(--text); background: linear-gradient(180deg, var(--accent-solid), var(--accent-soft)); box-shadow: 0 10px 28px var(--shadow-color)
}
html[data-theme] .login-support { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .login-service-portal {border:1px solid var(--success-border);background:var(--surface);color:var(--text)
}
html[data-theme] .login-service-portal>span,
html[data-theme] .login-service-portal>b {color:var(--success-text)
}
html[data-theme] .login-service-portal strong {font-size:var(--text-xs)
}
html[data-theme] .login-service-portal small {color:var(--muted);font-size:var(--text-xs)
}
html[data-theme] .login-collector-download { border: 1px solid var(--border); color: var(--text); background: linear-gradient(135deg, var(--surface-raised), var(--surface))
}
html[data-theme] .login-collector-download:hover { border-color: var(--accent-border); background: linear-gradient(135deg, var(--surface-raised), var(--surface))
}
html[data-theme] .login-collector-download:focus-visible { outline: 3px solid var(--accent-border)
}
html[data-theme] .login-collector-download img { box-shadow: 0 7px 20px var(--shadow-color)
}
html[data-theme] .login-collector-download strong { font-size: var(--text-xs)
}
html[data-theme] .login-collector-download small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .login-collector-download b { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .danger-outline-button { border: 1px solid var(--danger-border); color: var(--danger-text); background: var(--danger-soft); font-size: var(--text-xs)
}
html[data-theme] .danger-outline-button:hover { border-color: var(--danger-border); background: var(--danger-soft)
}
html[data-theme] .alert-summary-card { background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .alert-summary-card:hover { border-color: var(--border)
}
html[data-theme] .alert-summary-card:focus-visible { outline: 2px solid var(--accent-border)
}
html[data-theme] .alert-summary-card.active { box-shadow: inset 0 0 0 1px currentColor, 0 10px 28px var(--shadow-color)
}
html[data-theme] .alert-summary-card.critical.active { border-color: var(--danger-border); background: linear-gradient(145deg, var(--danger-soft), var(--surface))
}
html[data-theme] .alert-summary-card.warning.active { border-color: var(--warning-border); background: linear-gradient(145deg, var(--warning-soft), var(--surface))
}
html[data-theme] .alert-summary-card.info.active { border-color: var(--accent-border); background: linear-gradient(145deg, var(--accent-soft), var(--surface))
}
html[data-theme] .alert-summary-card.total.active { border-color: var(--purple-border); background: linear-gradient(145deg, var(--purple-soft), var(--surface))
}
html[data-theme] .alert-summary-card span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-summary-card small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-summary-card.critical strong { color: var(--danger-text)
}
html[data-theme] .alert-summary-card.warning strong { color: var(--warning-text)
}
html[data-theme] .alert-summary-card.info strong { color: var(--accent-text)
}
html[data-theme] .alert-summary-card.total strong { color: var(--muted)
}
html[data-theme] .alert-center-toolbar { border-bottom: 1px solid var(--border)
}
html[data-theme] .alert-center-toolbar p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-center-controls select { border: 1px solid var(--border); color: var(--muted); background: var(--bg); font-size: var(--text-xs)
}
html[data-theme] .alert-center-row { border-bottom: 1px solid var(--border)
}
html[data-theme] .alert-center-row:hover { background: var(--accent-soft)
}
html[data-theme] .alert-center-row.selected { background: var(--accent-soft); box-shadow: inset 3px 0 var(--shadow-color)
}
html[data-theme] .alert-center-row:focus-visible { outline: 2px solid var(--accent-border)
}
html[data-theme] .alert-center-row.critical .alert-severity-icon { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .alert-center-row.warning .alert-severity-icon { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .alert-center-row.info .alert-severity-icon { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .alert-center-message strong { color: var(--text)
}
html[data-theme] .alert-center-message span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-metric-line { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .alert-device-data strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .alert-item[data-alert-id]:hover { background: var(--accent-soft)
}
html[data-theme] .alert-device-data span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .delete-alert-button { border: 1px solid var(--border); color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .delete-alert-button:hover { border-color: var(--danger-border); color: var(--text); background: var(--danger-soft)
}
html[data-theme] .alert-center-row.suppressed.active-suppression { box-shadow: inset 3px 0 var(--shadow-color); background: var(--purple-soft)
}
html[data-theme] .alert-suppression-state { color: var(--text); background: var(--purple-soft)
}
html[data-theme] .reactivate-alert-button { border: 1px solid var(--success-border); color: var(--success-text); background: var(--success-soft); font-size: var(--text-xs)
}
html[data-theme] .reactivate-alert-button:hover { border-color: var(--success-border); background: var(--success-soft)
}
html[data-theme] .alert-select-control span { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .alert-select-control input:checked + span { border-color: var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .alert-select-control input:checked + span::after { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .alert-select-control input:focus-visible + span { outline: 2px solid var(--accent-border)
}
html[data-theme] .alerts-empty-state div { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .alerts-empty-state span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .client-panel-header { border-bottom: 1px solid var(--border)
}
html[data-theme] .client-panel-header p { font-size: var(--text-xs)
}
html[data-theme] .client-logo-field > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .logo-dropzone { border: 1px dashed var(--border); background: var(--bg)
}
html[data-theme] .logo-dropzone:hover { border-color: var(--accent-border); background: var(--surface)
}
html[data-theme] .logo-upload-icon { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .logo-dropzone small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .client-form-actions { border-top: 1px solid var(--border)
}
html[data-theme] .client-preview { background: radial-gradient(circle at 50% 20%, var(--accent-soft), transparent 45%)
}
html[data-theme] .client-logo-preview { border: 1px solid var(--border); color: var(--accent-text); background: var(--surface)
}
html[data-theme] .client-logo-preview.logo-needs-contrast { color: var(--faint)
}
html[data-theme] .client-preview > small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .client-preview-status { border: 1px solid var(--border); color: var(--success-text); background: var(--success-soft); font-size: var(--text-xs)
}
html[data-theme] .detail-back { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detail-back:hover { color: var(--text)
}
html[data-theme] .detail-hero { background: radial-gradient(circle at 85% 0, var(--accent-soft), transparent 35%), linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .detail-device-icon { border: 1px solid var(--border); color: var(--accent-text); background: var(--surface-raised)
}
html[data-theme] .detail-identity p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detail-tag { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .detail-updated { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detail-kpi { background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .detail-kpi > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detail-kpi small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .layout-windows-server .detail-hero { border-top-color: var(--accent-border) !important
}
html[data-theme] .layout-windows-workstation .detail-hero { border-top-color: var(--accent-border) !important
}
html[data-theme] .layout-windows-server .detail-device-icon,
html[data-theme] .layout-windows-workstation .detail-device-icon { background: var(--accent-soft)
}
html[data-theme] .windows-diagnostic { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .windows-diagnostic-header div span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .windows-diagnostic-header > span { background: var(--surface-raised); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .windows-diagnostic-steps article i { background: var(--surface-raised)
}
html[data-theme] .windows-diagnostic-steps article small { color: var(--muted)
}
html[data-theme] .windows-diagnostic-steps article > span { font-size: var(--text-xs); color: var(--muted)
}
html[data-theme] .windows-diagnostic-steps article.success { border-color: var(--success-border)
}
html[data-theme] .windows-diagnostic-steps article.success i,
html[data-theme] .windows-diagnostic-steps article.success > span { color: var(--success-text)
}
html[data-theme] .windows-diagnostic-steps article.failed { border-color: var(--danger-border); background: var(--surface-tint)
}
html[data-theme] .windows-diagnostic-steps article.failed i,
html[data-theme] .windows-diagnostic-steps article.failed > span { color: var(--danger-text)
}
html[data-theme] .windows-diagnostic-summary ul { color: var(--muted)
}
html[data-theme] .windows-diagnostic-summary p { color: var(--text)
}
html[data-theme] .windows-diagnostic-commands { background: var(--bg)
}
html[data-theme] .windows-diagnostic-commands code { color: var(--text)
}
html[data-theme] .detail-progress { background: var(--surface-raised)
}
html[data-theme] .detail-panel-header { border-bottom: 1px solid var(--border)
}
html[data-theme] .detail-panel-header h2 { font-size: var(--text-xs)
}
html[data-theme] .detail-panel-header p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detail-panel-header > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-inline-alert { border: 1px solid var(--warning-border); background: var(--warning-soft)
}
html[data-theme] .router-update-inline-alert strong { color: var(--warning-text)
}
html[data-theme] .router-update-inline-alert span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .info-item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border)
}
html[data-theme] .info-item span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .info-item strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .info-item small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .interface-toolbar { border-bottom: 1px solid var(--border)
}
html[data-theme] .interface-search { border: 1px solid var(--border); background: var(--surface); color: var(--muted)
}
html[data-theme] .interface-search input { color: var(--text)
}
html[data-theme] .interface-status-filters button { border: 1px solid var(--border); color: var(--muted); background: var(--surface)
}
html[data-theme] .interface-status-filters button.active { color: var(--text); border-color: var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .interface-status-filters button span { color: var(--muted)
}
html[data-theme] .interface-sort span { color: var(--muted)
}
html[data-theme] .interface-sort.active { color: var(--accent-text)
}
html[data-theme] .status-badge.disabled { color: var(--muted); background: var(--surface-tint)
}
html[data-theme] .status-dot.disabled { background: var(--surface-raised)
}
html[data-theme] .interfaces-empty strong { color: var(--text)
}
html[data-theme] .interfaces-empty span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .interface-icon { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .interface-name strong { color: var(--text)
}
html[data-theme] .interface-name small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .interface-address strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .interface-address small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .auth-badge { border: 1px solid var(--border); color: var(--muted); background: var(--surface-raised); font-size: var(--text-xs)
}
html[data-theme] .auth-badge.dhcp { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .auth-badge.ip-fixo { color: var(--success-text); border-color: var(--success-border); background: var(--success-soft)
}
html[data-theme] .auth-badge.pppoe { color: var(--muted); border-color: var(--purple-border); background: var(--purple-soft)
}
html[data-theme] .auth-badge.sem-endereco { color: var(--muted); border-color: var(--border); background: var(--surface)
}
html[data-theme] .link-speed { color: var(--muted)
}
html[data-theme] .mini-meter { background: var(--surface-raised)
}
html[data-theme] .mini-meter i { background: var(--accent-soft)
}
html[data-theme] .service-row,
html[data-theme] .sensor-row,
html[data-theme] .event-row,
html[data-theme] .config-row { border-bottom: 1px solid var(--border)
}
html[data-theme] .service-row strong,
html[data-theme] .sensor-row strong,
html[data-theme] .event-row strong,
html[data-theme] .config-row strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .service-row small,
html[data-theme] .sensor-row small,
html[data-theme] .event-row small,
html[data-theme] .config-row small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .service-state { color: var(--success-text); background: var(--success-soft); font-size: var(--text-xs)
}
html[data-theme] .service-state.off { color: var(--muted); background: var(--surface-tint)
}
html[data-theme] .sensor-value { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .event-row time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .config-value { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detail-chart-labels { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detail-chart-legend { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .modal-backdrop { background: var(--bg)
}
html[data-theme] .device-modal { border: 1px solid var(--border); background: var(--surface); box-shadow: 0 28px 90px var(--shadow-color)
}
html[data-theme] .modal-header { border-bottom: 1px solid var(--border)
}
html[data-theme] .modal-header p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .modal-kicker { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .modal-close { border: 1px solid var(--border); background: var(--surface); color: var(--muted)
}
html[data-theme] .collector-update-release { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .collector-update-release span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .collector-update-release strong { color: var(--text)
}
html[data-theme] .collector-update-explanation { border: 1px solid var(--success-border); color: var(--text); background: var(--success-soft); font-size: var(--text-xs)
}
html[data-theme] .collector-update-targets { border: 1px solid var(--border)
}
html[data-theme] .collector-update-targets th,
html[data-theme] .collector-update-targets td { border-bottom: 1px solid var(--border); font-size: var(--text-xs)
}
html[data-theme] .collector-update-targets th { color: var(--muted); font-size: var(--text-xs); background: var(--surface)
}
html[data-theme] .collector-update-targets small { color: var(--muted)
}
html[data-theme] .collector-update-state { color: var(--text); background: var(--surface-raised); font-size: var(--text-xs)
}
html[data-theme] .collector-update-state.completed { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .collector-update-state.acknowledged { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .collector-update-state.failed { color: var(--text); background: var(--danger-soft)
}
html[data-theme] .device-history-list::before { background: linear-gradient(var(--accent-soft), var(--surface-raised))
}
html[data-theme] .device-history-empty { border: 1px dashed var(--border); color: var(--muted); background: var(--surface)
}
html[data-theme] .device-history-empty span { font-size: var(--text-xs)
}
html[data-theme] .device-history-empty.error { border-color: var(--danger-border); color: var(--muted); background: var(--danger-soft)
}
html[data-theme] .device-history-event { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .device-history-event::before { border: 2px solid var(--accent-border); background: var(--surface); box-shadow: 0 0 0 4px var(--shadow-color)
}
html[data-theme] .device-history-event.critical,
html[data-theme] .device-history-event.failed { border-color: var(--danger-border); background: var(--danger-soft)
}
html[data-theme] .device-history-event.critical::before,
html[data-theme] .device-history-event.failed::before { border-color: var(--danger-border)
}
html[data-theme] .device-history-event.warning { border-color: var(--warning-border); background: var(--warning-soft)
}
html[data-theme] .device-history-event.warning::before { border-color: var(--warning-border)
}
html[data-theme] .device-history-event.info,
html[data-theme] .device-history-event.completed { border-color: var(--success-border); background: var(--success-soft)
}
html[data-theme] .device-history-event.info::before,
html[data-theme] .device-history-event.completed::before { border-color: var(--success-border)
}
html[data-theme] .device-history-event-head { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .device-history-event h3 { color: var(--text)
}
html[data-theme] .device-history-event p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .device-history-meta span,
html[data-theme] .device-history-versions span { border: 1px solid var(--border); color: var(--muted); background: var(--bg); font-size: var(--text-xs)
}
html[data-theme] .device-history-meta b,
html[data-theme] .device-history-versions b { color: var(--text)
}
html[data-theme] .device-history-logs { border: 1px solid var(--border)
}
html[data-theme] .device-history-logs summary { color: var(--accent-text); font-size: var(--text-xs); background: var(--surface)
}
html[data-theme] .device-history-logs p { border-top: 1px solid var(--border); font-size: var(--text-xs)
}
html[data-theme] .device-history-logs time { color: var(--muted)
}
html[data-theme] .device-history-logs strong { color: var(--text)
}
html[data-theme] .device-history-logs .error span { color: var(--muted)
}
html[data-theme] .device-history-logs .success span { color: var(--success-text)
}
html[data-theme] .alert-detail-header { background: var(--surface)
}
html[data-theme] .alert-detail-status { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .alert-detail-status span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-severity-pill { font-size: var(--text-xs)
}
html[data-theme] .alert-severity-pill.critical { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .alert-severity-pill.warning { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .alert-severity-pill.info { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .alert-detail-section h3 { color: var(--text)
}
html[data-theme] .alert-detail-grid { border: 1px solid var(--border)
}
html[data-theme] .alert-detail-field { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .alert-detail-field span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-detail-field strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .alert-detail-card { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .alert-detail-card h4 { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .alert-detail-card p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-detail-card.risk { border-color: var(--border); background: var(--danger-soft)
}
html[data-theme] .remediation-list li { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .remediation-list li::before { color: var(--accent-text); background: var(--accent-soft); font-size: var(--text-xs)
}
html[data-theme] .alert-source-link { border: 1px solid var(--border); color: var(--accent-text); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .alert-source-link:hover { border-color: var(--accent-border); background: var(--surface-raised)
}
html[data-theme] .alert-source-link small { color: var(--muted)
}
html[data-theme] .alert-evidence-list p { border: 1px solid var(--border); color: var(--text); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .reports-intro h2 { color: var(--text)
}
html[data-theme] .reports-intro p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .reports-status { border: 1px solid var(--accent-border); color: var(--accent-text); background: var(--accent-soft); font-size: var(--text-xs)
}
html[data-theme] .report-catalog-card { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .report-catalog-card > span { color: var(--muted); background: var(--surface-raised)
}
html[data-theme] .report-catalog-card strong { color: var(--text)
}
html[data-theme] .report-catalog-card small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .report-catalog-card b { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .report-catalog-card.available { border-color: var(--success-border)
}
html[data-theme] .report-catalog-card.available > span { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .report-catalog-card.available b { color: var(--success-text)
}
html[data-theme] .reports-grid button.report-catalog-card:hover { border-color: var(--accent-border)
}
html[data-theme] .printer-counter-report { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-counter-report-heading { border-bottom: 1px solid var(--border)
}
html[data-theme] .printer-counter-report-heading p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-filters { border-bottom: 1px solid var(--border)
}
html[data-theme] .printer-counter-filters label span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-filters input,
html[data-theme] .printer-counter-filters select { border: 1px solid var(--border); color: var(--text); background: var(--bg)
}
html[data-theme] .printer-counter-summary article { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-counter-summary span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-summary small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-result-head { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-counter-result-head span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-result-head strong { color: var(--text)
}
html[data-theme] .printer-counter-result-head small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-pagination { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-table { border: 1px solid var(--border)
}
html[data-theme] .printer-counter-table table { font-size: var(--text-xs)
}
html[data-theme] .printer-counter-table th,
html[data-theme] .printer-counter-table td { border-bottom: 1px solid var(--border)
}
html[data-theme] .printer-counter-table th { color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-table td strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-table td strong.invalid { color: var(--warning-text)
}
html[data-theme] .printer-counter-table td small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-counter-table td.observation { color: var(--muted)
}
html[data-theme] .printer-counter-table tr.replacement td { background: var(--warning-soft)
}
html[data-theme] .printer-counter-events article { border: 1px solid var(--warning-border); background: var(--warning-soft)
}
html[data-theme] .printer-counter-events small,
html[data-theme] .printer-counter-events time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .customer-summary-card { background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .customer-summary-card span { font-size: var(--text-xs)
}
html[data-theme] .customer-summary-card strong { color: var(--text)
}
html[data-theme] .customer-summary-card small { color: var(--muted)
}
html[data-theme] .customer-management-tabs button { background: var(--surface); color: var(--text)
}
html[data-theme] .customer-management-tabs button.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--text)
}
html[data-theme] .customer-form-grid label span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .customer-form-grid input,
html[data-theme] .customer-form-grid select,
html[data-theme] .customer-form-grid textarea { border: 1px solid var(--border); background: var(--bg); color: var(--text)
}
html[data-theme] .customer-form-grid input:focus,
html[data-theme] .customer-form-grid select:focus,
html[data-theme] .customer-form-grid textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .customer-table th { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .customer-table td { border-bottom: 1px solid var(--border); color: var(--text)
}
html[data-theme] .customer-table td strong { color: var(--text)
}
html[data-theme] .customer-table td small { color: var(--muted)
}
html[data-theme] .customer-inline-action { border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--text)
}
html[data-theme] .customer-inline-action:hover { border-color: var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .customer-inline-action.warning { border-color: var(--warning-border); background: var(--surface-tint); color: var(--warning-text)
}
html[data-theme] .customer-inline-action.warning:hover { border-color: var(--warning-border); background: var(--surface-tint)
}
html[data-theme] .customer-inline-action.danger { border-color: var(--danger-border); background: var(--surface-tint); color: var(--text)
}
html[data-theme] .customer-inline-action.danger:hover { border-color: var(--danger-border); background: var(--surface-tint)
}
html[data-theme] .customer-status { font-size: var(--text-xs); background: var(--surface-tint); color: var(--text); border: 1px solid var(--border)
}
html[data-theme] .customer-status.active { background: var(--success-soft); color: var(--success-text); border-color: var(--success-border)
}
html[data-theme] .customer-status.draft { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border)
}
html[data-theme] .customer-status.suspended,
html[data-theme] .customer-status.expired { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning-border)
}
html[data-theme] .customer-status.inactive,
html[data-theme] .customer-status.closed,
html[data-theme] .customer-status.canceled { background: var(--surface-tint); color: var(--text)
}
html[data-theme] .customer-pending-list div { background: var(--bg)
}
html[data-theme] .customer-pending-list span { background: var(--warning-soft); color: var(--warning-text)
}
@media (max-width:720px) {
 html[data-theme] .customer-table td::before {color:var(--muted);font-size:var(--text-xs)
 }
}
html[data-theme] .printer-analytics-heading { border-bottom: 1px solid var(--border)
}
html[data-theme] .printer-analytics-heading p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-analytics-filters { border-bottom: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-analytics-filters label { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-analytics-filters select,
html[data-theme] .printer-analytics-filters input { border: 1px solid var(--border); color: var(--text); background: var(--bg)
}
html[data-theme] .printer-period-summary article { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .printer-period-summary span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-period-summary strong { color: var(--text)
}
html[data-theme] .printer-history-notice { border: 1px solid var(--success-border); color: var(--success-text); background: var(--success-soft); font-size: var(--text-xs)
}
html[data-theme] .printer-history-notice span { color: var(--muted)
}
html[data-theme] .printer-history-notice.warning { border-color: var(--warning-border); color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .printer-history-chart { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-history-chart h3 { color: var(--text)
}
html[data-theme] .printer-history-chart h3 small { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .printer-history-chart svg line { stroke: var(--faint)
}
html[data-theme] .printer-chart-line { stroke: var(--accent-text)
}
html[data-theme] .printer-chart-area { fill: var(--accent-text)
}
html[data-theme] .printer-history-bars i { background: linear-gradient(var(--accent-solid), var(--accent-soft))
}
html[data-theme] .printer-history-bars strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .printer-history-bars span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-history-empty { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-consumption-summary { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-consumption-summary h3,
html[data-theme] .printer-event-strip h3 { color: var(--text)
}
html[data-theme] .printer-consumption-summary span { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .printer-consumption-summary small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-consumption-summary strong { color: var(--text)
}
html[data-theme] .printer-event-strip { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-event-strip article { border-left: 3px solid var(--accent-border); color: var(--muted); background: var(--bg); font-size: var(--text-xs)
}
html[data-theme] .printer-event-strip article.replacement { border-color: var(--success-border)
}
html[data-theme] .printer-event-strip article.invalid_reading { border-color: var(--danger-border)
}
html[data-theme] .printer-event-strip time { color: var(--muted)
}
html[data-theme] .printer-report-block { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-report-title { border-bottom: 1px solid var(--border)
}
html[data-theme] .printer-report-title span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .printer-report-title strong { color: var(--text)
}
html[data-theme] .printer-report-title small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-report-table th { color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .printer-report-table td { border-top: 1px solid var(--border); color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .printer-report-table td small { color: var(--muted)
}
html[data-theme] .printer-report-table tr.invalid td { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .printer-synthetic-grid > div { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .printer-synthetic-grid span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-synthetic-grid strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .printer-audit-grid { border: 1px solid var(--border)
}
html[data-theme] .printer-audit-note { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .alert-suppression-section { border: 1px solid var(--purple-border); background: var(--purple-soft)
}
html[data-theme] .alert-suppression-heading p { color: var(--muted)
}
html[data-theme] .alert-confirm-check { border: 1px solid var(--border); color: var(--text); background: var(--surface)
}
html[data-theme] .alert-confirm-check.critical { border-color: var(--danger-border); color: var(--text); background: var(--danger-soft)
}
html[data-theme] .alert-confirm-check input { accent-color: var(--accent-text)
}
html[data-theme] .brand-copy span,
html[data-theme] .nav-label { font-size: var(--text-xs)
}
html[data-theme] .nav-count { font-size: var(--text-xs)
}
html[data-theme] .system-status small,
html[data-theme] .user-card small { font-size: var(--text-xs)
}
html[data-theme] .y-axis,
html[data-theme] .x-axis { font-size: var(--text-xs)
}
html[data-theme] .status-badge,
html[data-theme] .connection-badge,
html[data-theme] .enabled-badge,
html[data-theme] .disabled-badge,
html[data-theme] .device-interval { font-size: var(--text-xs)
}
html[data-theme] .device-type-meta span,
html[data-theme] .asset-row small { font-size: var(--text-xs)
}
html[data-theme] .alert-severity-pill { font-size: var(--text-xs)
}
html[data-theme] .alert-detail-field span { font-size: var(--text-xs)
}
html[data-theme] .remediation-list li::before { font-size: var(--text-xs)
}
html[data-theme] .form-section-title > span { color: var(--accent-text); background: var(--accent-soft); font-size: var(--text-xs)
}
html[data-theme] .form-section-title strong { font-size: var(--text-xs)
}
html[data-theme] .form-section-title small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .form-field > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .form-field input,
html[data-theme] .form-field select { border: 1px solid var(--border); color: var(--text); background: var(--bg); font-size: var(--text-xs)
}
html[data-theme] .form-field select { background-image: linear-gradient(45deg, transparent 50%, var(--surface-raised) 50%), linear-gradient(135deg, var(--surface-raised) 50%, transparent 50%)
}
html[data-theme] .form-field input:focus,
html[data-theme] .form-field select:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .form-field.invalid input,
html[data-theme] .form-field.invalid select { border-color: var(--danger-border)
}
html[data-theme] .field-error { color: var(--danger-text); font-size: var(--text-xs)
}
html[data-theme] .field-hint { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .password-field button { background: var(--surface-raised); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .detected-field input { color: var(--muted); background: var(--surface)
}
html[data-theme] .detected-field > span { color: var(--muted); background: var(--surface-raised); font-size: var(--text-xs)
}
html[data-theme] .detected-field > span.detected { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .monitor-switch { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .switch-track { background: var(--surface-raised)
}
html[data-theme] .switch-track i { background: var(--surface-raised)
}
html[data-theme] .monitor-switch input:checked + .switch-track { background: var(--success-soft)
}
html[data-theme] .monitor-switch input:checked + .switch-track i { background: var(--surface-hover)
}
html[data-theme] .monitor-switch strong { font-size: var(--text-xs)
}
html[data-theme] .monitor-switch small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .local-collector-editor { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .local-collector-editor-header { border-bottom: 1px solid var(--border)
}
html[data-theme] .local-collector-editor-header div > span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .local-collector-editor-header small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .local-collector-health { border: 1px solid var(--success-border); color: var(--success-text); background: var(--success-soft); font-size: var(--text-xs)
}
html[data-theme] .local-collector-health.warning { border-color: var(--warning-border); color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .local-collector-identity-grid article { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border)
}
html[data-theme] .local-collector-identity-grid span,
html[data-theme] .local-collector-metrics span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .local-collector-identity-grid strong { color: var(--text)
}
html[data-theme] .local-collector-identity-grid small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .local-collector-metrics article { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .local-collector-metrics strong { color: var(--text)
}
html[data-theme] .local-collector-editor-note { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .realtime-checkbox { border: 1px solid var(--border); color: var(--text); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .realtime-checkbox:hover { border-color: var(--accent-border); background: linear-gradient(145deg, var(--surface-raised), var(--surface))
}
html[data-theme] .realtime-checkbox:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .realtime-toggle { border: 1px solid var(--border); background: var(--surface-raised)
}
html[data-theme] .realtime-toggle i { background: var(--surface-raised); box-shadow: 0 1px 3px var(--shadow-color)
}
html[data-theme] .realtime-toggle-copy strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .realtime-toggle-copy small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .realtime-checkbox:has(input:checked) { border-color: var(--success-border); background: linear-gradient(145deg, var(--success-soft), var(--success-soft)); box-shadow: inset 0 0 0 1px var(--shadow-color)
}
html[data-theme] .realtime-checkbox input:checked + .realtime-toggle { border-color: var(--success-border); background: var(--success-soft)
}
html[data-theme] .realtime-checkbox input:checked + .realtime-toggle i { background: var(--surface-hover)
}
html[data-theme] .realtime-checkbox:has(input:checked) .realtime-toggle-copy strong { color: var(--text)
}
html[data-theme] .realtime-checkbox:has(input:checked) .realtime-toggle-copy small { color: var(--success-text)
}
html[data-theme] .device-test-feedback { border: 1px solid var(--border); color: var(--muted); background: var(--surface)
}
html[data-theme] .device-test-feedback-icon { color: var(--accent-text); background: var(--accent-soft); font-size: var(--text-xs)
}
html[data-theme] .device-test-feedback strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .device-test-feedback small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .device-test-feedback.testing { border-color: var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .device-test-feedback.success { border-color: var(--success-border); background: var(--success-soft)
}
html[data-theme] .device-test-feedback.success .device-test-feedback-icon { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .device-test-feedback.error { border-color: var(--danger-border); background: var(--danger-soft)
}
html[data-theme] .device-test-feedback.error .device-test-feedback-icon { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .modal-footer { border-top: 1px solid var(--border)
}
html[data-theme] .save-without-test-button { border-color: var(--accent-border); color: var(--text)
}
html[data-theme] .save-without-test-button:hover { border-color: var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .alert-maintenance-action { border: 1px solid var(--warning-border); background: var(--warning-soft)
}
html[data-theme] .alert-maintenance-action h3 { color: var(--text)
}
html[data-theme] .alert-maintenance-action p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-loading { color: var(--muted)
}
html[data-theme] .router-update-loading > span { color: var(--accent-text)
}
html[data-theme] .router-update-summary { border: 1px solid var(--border)
}
html[data-theme] .router-update-summary > div { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border)
}
html[data-theme] .router-update-summary span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-summary strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .router-update-messages { border: 1px solid var(--border)
}
html[data-theme] .router-update-messages strong { font-size: var(--text-xs)
}
html[data-theme] .router-update-messages p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-messages.blockers { border-color: var(--danger-border); background: var(--danger-soft)
}
html[data-theme] .router-update-messages.blockers strong { color: var(--danger-text)
}
html[data-theme] .router-update-messages.warnings { border-color: var(--warning-border); background: var(--warning-soft)
}
html[data-theme] .router-update-messages.warnings strong { color: var(--warning-text)
}
html[data-theme] .router-update-confirmation > label:not(.router-update-name) { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .router-update-confirmation input[type="checkbox"] { accent-color: var(--accent-text)
}
html[data-theme] .router-update-captcha { border: 1px solid var(--accent-border); background: var(--accent-soft)
}
html[data-theme] .router-update-captcha > div > span,
html[data-theme] .router-update-captcha label > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-captcha strong { border: 1px dashed var(--accent-border); color: var(--text); background: repeating-linear-gradient(135deg, var(--accent-soft) 0 5px, var(--surface-tint) 5px 10px)
}
html[data-theme] .router-update-captcha small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-captcha input { border: 1px solid var(--border); color: var(--text); background: var(--bg)
}
html[data-theme] .router-update-captcha input:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--shadow-color)
}
html[data-theme] .danger-action:not(:disabled) { border-color: var(--danger-border); background: linear-gradient(180deg, var(--danger-soft), var(--danger-soft))
}
html[data-theme] .router-update-progress { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .router-update-progress-icon { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .router-update-progress.completed { border-color: var(--success-border)
}
html[data-theme] .router-update-progress.completed .router-update-progress-icon { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .router-update-progress.failed { border-color: var(--danger-border)
}
html[data-theme] .router-update-progress.failed .router-update-progress-icon { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .router-update-progress p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-log { border: 1px solid var(--border)
}
html[data-theme] .router-update-log > div { border-bottom: 1px solid var(--border)
}
html[data-theme] .router-update-log time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-log span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .router-update-log span strong { color: var(--text)
}
html[data-theme] .router-update-log .error span { color: var(--danger-text)
}
html[data-theme] .router-update-log .success span { color: var(--success-text)
}
html[data-theme] .wallboard-view {
  background:
    radial-gradient(circle at 18% 0%, var(--accent-soft), transparent 31%),
    radial-gradient(circle at 94% 32%, var(--purple-soft), transparent 25%),
    var(--bg)
}
html[data-theme] .wallboard-header { border-bottom: 1px solid var(--border)
}
html[data-theme] .wallboard-brand small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-live { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-live i { box-shadow: 0 0 12px var(--shadow-color)
}
html[data-theme] .wallboard-live small { border-left: 1px solid var(--border); color: var(--muted)
}
html[data-theme] .wallboard-clock small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-clock button { border: 1px solid var(--border); color: var(--muted); background: var(--surface)
}
html[data-theme] .wallboard-clock .wallboard-clear-data { border-color: var(--danger-border); color: var(--danger-text); background: var(--danger-soft); font-size: var(--text-xs)
}
html[data-theme] .wallboard-clock .wallboard-clear-data:hover { border-color: var(--danger-border); color: var(--text); background: var(--danger-soft)
}
html[data-theme] .wallboard-kpi { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--bg))
}
html[data-theme] .wallboard-kpi::after { background: var(--accent-soft)
}
html[data-theme] .wallboard-kpi.healthy::after { background: var(--success-soft)
}
html[data-theme] .wallboard-kpi.warning::after { background: var(--warning-soft)
}
html[data-theme] .wallboard-kpi.critical::after { background: var(--danger-soft)
}
html[data-theme] .wallboard-kpi > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-kpi small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-kpi.warning strong { color: var(--warning-text)
}
html[data-theme] .wallboard-kpi.latency.healthy strong { color: var(--success-text)
}
html[data-theme] .wallboard-kpi.latency.warning strong { color: var(--warning-text)
}
html[data-theme] .wallboard-kpi.latency.elevated strong { color: var(--warning-text)
}
html[data-theme] .wallboard-kpi.latency.critical strong { color: var(--danger-text)
}
html[data-theme] .wallboard-kpi.latency.unavailable strong { color: var(--muted)
}
html[data-theme] .wallboard-latency-causes { border-top: 1px solid var(--border)
}
html[data-theme] .wallboard-latency-causes > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-latency-causes > strong { color: var(--warning-text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-latency-causes i.elevated { background: var(--warning-solid)
}
html[data-theme] .wallboard-latency-causes b { color: var(--muted)
}
html[data-theme] .detail-kpi.internet-quality.healthy strong { color: var(--success-text)
}
html[data-theme] .detail-kpi.internet-quality.warning strong { color: var(--warning-text)
}
html[data-theme] .detail-kpi.internet-quality.elevated strong { color: var(--warning-text)
}
html[data-theme] .detail-kpi.internet-quality.critical strong { color: var(--danger-text)
}
html[data-theme] .internet-quality-badge { font-size: var(--text-xs)
}
html[data-theme] .internet-quality-badge.healthy { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .internet-quality-badge.warning { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .internet-quality-badge.elevated { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .internet-quality-badge.critical { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .internet-quality-badge.unavailable { color: var(--muted); background: var(--surface-tint)
}
html[data-theme] .internet-target-list { border-bottom: 1px solid var(--border)
}
html[data-theme] .internet-target-list span strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .internet-target-list span small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .internet-target-list b { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .internet-target-empty { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-kpi.traffic strong { color: var(--accent-text)
}
html[data-theme] .wallboard-card { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--bg))
}
html[data-theme] .wallboard-card-header { border-bottom: 1px solid var(--border)
}
html[data-theme] .wallboard-card-kicker { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-legend { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-grid-lines line { stroke: var(--faint)
}
html[data-theme] .wallboard-y-axis { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-x-axis { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-health-badge { font-size: var(--text-xs)
}
html[data-theme] .wallboard-health-badge.healthy { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .wallboard-health-badge.warning { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .wallboard-health-badge.critical { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .wallboard-donut-row { border-bottom: 1px solid var(--border)
}
html[data-theme] .wallboard-donut { box-shadow: 0 0 28px var(--shadow-color)
}
html[data-theme] .wallboard-donut::before { background: var(--surface); box-shadow: inset 0 0 0 1px var(--shadow-color)
}
html[data-theme] .wallboard-donut span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-status-list > div { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .wallboard-status-list strong { color: var(--text)
}
html[data-theme] .wallboard-uptime { background: var(--surface-tint)
}
html[data-theme] .wallboard-uptime-heading { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-uptime-heading small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-uptime-item { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .wallboard-uptime-item b { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-uptime-item strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-uptime-empty { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-meter { background: var(--surface-raised)
}
html[data-theme] .wallboard-alert-total { color: var(--warning-text); background: var(--warning-soft); font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert-summary { border-bottom: 1px solid var(--border); background: var(--surface-tint)
}
html[data-theme] .wallboard-alert-donut { background: var(--surface-raised); box-shadow: 0 0 28px var(--shadow-color)
}
html[data-theme] .wallboard-alert-donut::before { background: var(--surface); box-shadow: inset 0 0 0 1px var(--shadow-color)
}
html[data-theme] .wallboard-alert-donut strong { color: var(--text)
}
html[data-theme] .wallboard-alert-donut span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert-priorities > div { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert-priorities strong { color: var(--text)
}
html[data-theme] .wallboard-alert { border-bottom: 1px solid var(--border)
}
html[data-theme] .wallboard-alert:hover,
html[data-theme] .wallboard-alert:focus-visible { background: var(--accent-soft)
}
html[data-theme] .wallboard-alert > span { font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert.critical > span { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .wallboard-alert.warning > span { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .wallboard-alert.info > span { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .wallboard-alert strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert-empty { color: var(--muted)
}
html[data-theme] .wallboard-alert-empty > span { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .wallboard-alert-empty small { color: var(--muted)
}
html[data-theme] .wallboard-devices-card .wallboard-card-header > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--bg))
}
html[data-theme] .wallboard-device-title > i.online { box-shadow: 0 0 7px var(--shadow-color)
}
html[data-theme] .wallboard-device-title > i.paused { background: var(--surface-raised)
}
html[data-theme] .wallboard-device strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-state { color: var(--muted); background: var(--surface-raised); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-state.online { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .wallboard-device-state.warning { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .wallboard-device-state.offline { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .wallboard-device-address { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-metrics > div { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-metrics strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-metrics i { background: var(--surface-raised)
}
html[data-theme] .wallboard-device-footer { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-footer span:first-child { color: var(--muted)
}
html[data-theme] .wallboard-device-grid.is-multirow .wallboard-device-address { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-grid.is-multirow .wallboard-device-metrics > div { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-grid.is-multirow .wallboard-device-metrics strong { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-grid.is-multirow .wallboard-device-footer { font-size: var(--text-xs)
}
html[data-theme] .wallboard-footer { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-kpi.printer-accent strong { color: var(--warning-text)
}
html[data-theme] .wallboard-kpi.computer-accent strong { color: var(--accent-text)
}
html[data-theme] .wallboard-card-header > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-ranking-row { border-bottom: 1px solid var(--border)
}
html[data-theme] .wallboard-ranking-row strong,
html[data-theme] .computer-resource-row > div > strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-ranking-row small,
html[data-theme] .computer-resource-row > div > small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-ranking-row > span { font-size: var(--text-xs)
}
html[data-theme] .wallboard-ranking-row > span.warning { color: var(--warning-text)
}
html[data-theme] .wallboard-ranking-row > span.critical { color: var(--danger-text)
}
html[data-theme] .wallboard-ranking-row > i { background: var(--surface-raised)
}
html[data-theme] .wallboard-specialized-donut::before { background: var(--surface); box-shadow: inset 0 0 0 1px var(--shadow-color)
}
html[data-theme] .wallboard-specialized-donut span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-fleet-summary p { border: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] .wallboard-fleet-summary p strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-alerts button { border-bottom: 1px solid var(--border)
}
html[data-theme] .wallboard-specialized-alerts button > i { font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-alerts button > i.critical { color: var(--danger-text); background: var(--danger-soft)
}
html[data-theme] .wallboard-specialized-alerts button > i.warning { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .wallboard-specialized-alerts button > i.info { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .wallboard-specialized-alerts button strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-alerts button small,
html[data-theme] .wallboard-specialized-alerts button time { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-device { border: 1px solid var(--border); border-left: 3px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--bg))
}
html[data-theme] .wallboard-specialized-device header i { background: var(--surface-raised)
}
html[data-theme] .wallboard-specialized-device header strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-device header > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-device > p { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-wallboard-counter span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-wallboard-counter strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .printer-wallboard-supplies > div { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .printer-wallboard-supplies > div strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .printer-wallboard-supplies i { background: var(--surface-raised)
}
html[data-theme] .printer-wallboard-supplies > small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-device footer { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-empty { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-specialized-empty > span { background: var(--surface-raised)
}
html[data-theme] .computer-resource-row { border-bottom: 1px solid var(--border)
}
html[data-theme] .computer-resource-row > span small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .computer-resource-row > span strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .computer-resource-row > span i { background: var(--surface-raised)
}
html[data-theme] .computer-device-metrics > div { border: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .computer-device-metrics strong { color: var(--text); font-size: var(--text-xs)
}
html[data-theme] .computer-device-metrics i { background: var(--surface-raised)
}
html[data-theme] .wallboard-selector-card { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .wallboard-selector-card:hover,
html[data-theme] .wallboard-selector-card:focus-visible { border-color: var(--accent-border); box-shadow: 0 18px 40px var(--shadow-color)
}
html[data-theme] .wallboard-selector-card.printer:hover { border-color: var(--warning-border)
}
html[data-theme] .wallboard-selector-card.computer:hover { border-color: var(--accent-border)
}
html[data-theme] .wallboard-selector-icon { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .wallboard-selector-card.printer .wallboard-selector-icon { color: var(--warning-text); background: var(--warning-soft)
}
html[data-theme] .wallboard-selector-card.computer .wallboard-selector-icon { color: var(--accent-text); background: var(--accent-soft)
}
html[data-theme] .wallboard-selector-copy small { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] .wallboard-selector-copy strong { color: var(--text)
}
html[data-theme] .wallboard-selector-copy em { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .wallboard-selector-count { color: var(--muted); background: var(--surface-raised); font-size: var(--text-xs)
}
html[data-theme] .wallboard-selector-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-xs)
}
@media (max-width: 1500px) {
 html[data-theme] .wallboard-live { border-top: 1px solid var(--border)
 }
}
html[data-theme] .toast { border: 1px solid var(--success-border); background: var(--surface); box-shadow: 0 18px 55px var(--shadow-color)
}
html[data-theme] .toast > span { color: var(--success-text); background: var(--success-soft)
}
html[data-theme] .toast strong { font-size: var(--text-xs)
}
html[data-theme] .toast small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] .search-box kbd { font-size: var(--text-xs)
}
html[data-theme] .eyebrow { font-size: var(--text-xs)
}
html[data-theme] .metric-footer { font-size: var(--text-xs)
}
html[data-theme] .panel-header p,
html[data-theme] .device-toolbar p { font-size: var(--text-xs)
}
html[data-theme] .period-switcher button,
html[data-theme] .filter-button,
html[data-theme] .outline-button { font-size: var(--text-xs)
}
html[data-theme] .chart-legend { font-size: var(--text-xs)
}
html[data-theme] .y-axis,
html[data-theme] .x-axis { font-size: var(--text-xs)
}
html[data-theme] .donut span { font-size: var(--text-xs)
}
html[data-theme] .status-list small { font-size: var(--text-xs)
}
html[data-theme] th { font-size: var(--text-xs)
}
html[data-theme] td { font-size: var(--text-xs)
}
html[data-theme] .device-cell small,
html[data-theme] .ip-cell small { font-size: var(--text-xs)
}
html[data-theme] .status-badge,
html[data-theme] .connection-badge,
html[data-theme] .enabled-badge,
html[data-theme] .disabled-badge { font-size: var(--text-xs)
}
html[data-theme] .traffic-values strong,
html[data-theme] .traffic-values small { font-size: var(--text-xs)
}
html[data-theme] .alert-item p,
html[data-theme] .alert-item time { font-size: var(--text-xs)
}
html[data-theme] .availability-legend,
html[data-theme] .availability-footer { font-size: var(--text-xs)
}
html[data-theme] .device-interval { font-size: var(--text-xs)
}
html[data-theme] .detail-tag,
html[data-theme] .detail-updated { font-size: var(--text-xs)
}
html[data-theme] .detail-kpi > span { font-size: var(--text-xs)
}
html[data-theme] .detail-kpi small { font-size: var(--text-xs)
}
html[data-theme] .detail-panel-header p,
html[data-theme] .detail-panel-header > span { font-size: var(--text-xs)
}
html[data-theme] .info-item span { font-size: var(--text-xs)
}
html[data-theme] .info-item small { font-size: var(--text-xs)
}
html[data-theme] .service-row strong,
html[data-theme] .sensor-row strong,
html[data-theme] .event-row strong,
html[data-theme] .config-row strong { font-size: var(--text-xs)
}
html[data-theme] .service-row small,
html[data-theme] .sensor-row small,
html[data-theme] .event-row small,
html[data-theme] .config-row small { font-size: var(--text-xs)
}
html[data-theme] .service-state,
html[data-theme] .event-row time { font-size: var(--text-xs)
}
html[data-theme] .detail-chart-labels,
html[data-theme] .detail-chart-legend { font-size: var(--text-xs)
}
html[data-theme] .modal-kicker { font-size: var(--text-xs)
}
html[data-theme] .form-section-title > span { font-size: var(--text-xs)
}
html[data-theme] .form-section-title small { font-size: var(--text-xs)
}
html[data-theme] .form-field > span { font-size: var(--text-xs)
}
html[data-theme] .field-error,
html[data-theme] .field-hint { font-size: var(--text-xs)
}
html[data-theme] .password-field button,
html[data-theme] .detected-field > span { font-size: var(--text-xs)
}
html[data-theme] .monitor-switch strong { font-size: var(--text-xs)
}
html[data-theme] .monitor-switch small { font-size: var(--text-xs)
}
html[data-theme] .device-test-feedback small { font-size: var(--text-xs)
}
html[data-theme] .toast small { font-size: var(--text-xs)
}
html[data-theme] .wallboard-brand small { font-size: var(--text-xs)
}
html[data-theme] .wallboard-clock small { font-size: var(--text-xs)
}
html[data-theme] .wallboard-kpi > span { font-size: var(--text-xs)
}
html[data-theme] .wallboard-kpi small { font-size: var(--text-xs)
}
html[data-theme] .wallboard-card-kicker { font-size: var(--text-xs)
}
html[data-theme] .wallboard-legend { font-size: var(--text-xs)
}
html[data-theme] .wallboard-y-axis,
html[data-theme] .wallboard-x-axis { font-size: var(--text-xs)
}
html[data-theme] .wallboard-donut span { font-size: var(--text-xs)
}
html[data-theme] .wallboard-status-list > div { font-size: var(--text-xs)
}
html[data-theme] .wallboard-capacity > div:not(.wallboard-meter) { font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert-total { font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert strong { font-size: var(--text-xs)
}
html[data-theme] .wallboard-alert small,
html[data-theme] .wallboard-alert time { font-size: var(--text-xs)
}
html[data-theme] .wallboard-devices-card .wallboard-card-header > span { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device strong { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device small { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-state,
html[data-theme] .wallboard-device-address { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-metrics > div,
html[data-theme] .wallboard-device-footer { font-size: var(--text-xs)
}
html[data-theme] .wallboard-device-metrics strong { font-size: var(--text-xs)
}
html[data-theme] .wallboard-footer { font-size: var(--text-xs)
}
@media (max-width: 760px) {
 html[data-theme] .sidebar { box-shadow: 15px 0 40px var(--shadow-color)
 }
 html[data-theme] .router-update-summary > div,
html[data-theme] .router-update-summary > div:nth-child(3n) { border-bottom: 1px solid var(--border)
 }
 html[data-theme] .info-item:nth-child(3n) { border-right: 1px solid var(--border)
 }
}
@media (max-width: 1000px) {
 html[data-theme] .vmware-vm-row {
    border: 1px solid var(--border);
    background: var(--surface)
 }
 html[data-theme] .vmware-vm-row:last-child { border-bottom: 1px solid var(--border)
 }
}
@media (max-width: 900px) {
 html[data-theme] .sidebar {
    box-shadow: 15px 0 40px var(--shadow-color)
 }
 html[data-theme] .main-nav {
    scrollbar-color: var(--surface-raised) transparent
 }
 html[data-theme] .nav-submenu {
    box-shadow: inset 2px 0 var(--shadow-color)
 }
 html[data-theme] .sidebar-close { border: 1px solid var(--border); background: var(--surface)
 }
 html[data-theme] body.sidebar-open::before {
    background: var(--bg)
 }
 html[data-theme] .info-item:nth-child(3n) { border-right: 1px solid var(--border)
 }
 html[data-theme] .routers-panel tbody tr,
html[data-theme] .device-register-table tbody tr,
html[data-theme] .user-register-table tbody tr {
    border: 1px solid var(--border);
    background: var(--surface)
 }
 html[data-theme] .routers-panel tbody td,
html[data-theme] .device-register-table tbody td,
html[data-theme] .user-register-table tbody td {
    border-top: 1px solid var(--border)
 }
 html[data-theme] .routers-panel tbody td::before,
html[data-theme] .device-register-table tbody td::before,
html[data-theme] .user-register-table tbody td::before {
    color: var(--muted);
    font-size: var(--text-xs)
 }
}
@media (max-width: 640px) {
 html[data-theme] .modal-header {
    background: var(--surface)
 }
}
html[data-theme] .network-switch-layout { --sw-bg:var(--bg); --sw-card:var(--surface); --sw-border:var(--border); --sw-muted:var(--muted); --sw-blue:var(--accent-text); --sw-green:var(--success-text); color:var(--text)
}
html[data-theme] .network-switch-layout .switch-back { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-hero { background:radial-gradient(circle at 85% 0,var(--accent-soft),transparent 32%),linear-gradient(145deg,var(--surface),var(--surface))
}
html[data-theme] .network-switch-layout .switch-icon { border:1px solid var(--border); color:var(--success-text); background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-title p { color:var(--text)
}
html[data-theme] .network-switch-layout .switch-badges span { border:1px solid var(--border); color:var(--text); background:var(--surface); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-actions small { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-more { border:1px solid var(--border); color:var(--text); background:var(--surface)
}
html[data-theme] .network-switch-layout .switch-summary article { background:linear-gradient(145deg,var(--surface),var(--surface))
}
html[data-theme] .network-switch-layout .switch-summary span,
html[data-theme] .network-switch-layout .switch-panel header span { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-summary small { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-panel header select { border:1px solid var(--border); color:var(--text); background:var(--surface); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-port-counts { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-port-counts b { color:var(--success-text)
}
html[data-theme] .network-switch-layout .switch-port-counts em { color:var(--danger-text)
}
html[data-theme] .network-switch-layout .switch-port-grid { background:radial-gradient(circle at 50% 40%,var(--accent-soft),transparent 58%)
}
html[data-theme] .network-switch-layout .switch-port { border:1px solid var(--border); color:var(--text); background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-port strong { font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-port small { color:var(--text); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-port i { background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-port:hover { box-shadow:0 8px 18px var(--shadow-color)
}
html[data-theme] .network-switch-layout .switch-port.up,
html[data-theme] .network-switch-layout .switch-port.speed-1g { border-color:var(--success-border); background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-port.up i,
html[data-theme] .network-switch-layout .switch-port.speed-1g i { background:var(--success-solid)
}
html[data-theme] .network-switch-layout .switch-port.speed-100 { border-color:var(--warning-border); background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-port.speed-100 i { background:var(--surface-hover)
}
html[data-theme] .network-switch-layout .switch-port.speed-25g { border-color:var(--purple-border); background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-port.speed-25g i { background:var(--purple-soft)
}
html[data-theme] .network-switch-layout .switch-port.error { border-color:var(--danger-border); background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-port.error i { background:var(--danger-soft)
}
html[data-theme] .network-switch-layout .switch-port.disabled { border-color:var(--warning-border)
}
html[data-theme] .network-switch-layout .switch-port-map footer { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-port-map footer span::before { background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-port-map footer .up::before {background:var(--success-solid)
}
html[data-theme] .network-switch-layout .switch-port-map footer .speed-100::before {background:var(--surface-hover)
}
html[data-theme] .network-switch-layout .switch-port-map footer .speed-1g::before {background:var(--accent-soft)
}
html[data-theme] .network-switch-layout .switch-port-map footer .speed-25g::before {background:var(--purple-soft)
}
html[data-theme] .network-switch-layout .switch-port-map footer .disabled::before {background:var(--warning-solid)
}
html[data-theme] .network-switch-layout .switch-port-map footer .error::before {background:var(--danger-soft)
}
html[data-theme] .network-switch-layout .switch-traffic-chart { color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-grid-line {stroke:var(--faint)
}
html[data-theme] .network-switch-layout .switch-rx-line,
html[data-theme] .network-switch-layout .switch-tx-line {stroke:var(--accent-text)
}
html[data-theme] .network-switch-layout .switch-tx-line {stroke:var(--purple-text)
}
html[data-theme] .network-switch-layout .switch-chart-legend { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-chart-legend span:first-child {color:var(--accent-text)
}
html[data-theme] .network-switch-layout .switch-chart-legend span:nth-child(2) {color:var(--purple-text)
}
html[data-theme] .network-switch-layout .switch-empty-state strong {color:var(--text)
}
html[data-theme] .network-switch-layout .switch-empty-state span {color:var(--muted);font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout table {font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout th,
html[data-theme] .network-switch-layout td { border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout th { color:var(--muted); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-table-port {color:var(--accent-text)
}
html[data-theme] .network-switch-layout .switch-table-empty {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-danger {color:var(--danger-text)
}
html[data-theme] .network-switch-layout .switch-state { color:var(--muted); background:var(--surface-raised); font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-state.up,
html[data-theme] .network-switch-layout .switch-state.speed-1g {color:var(--success-text);background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-state.error {color:var(--danger-text);background:var(--surface-raised)
}
html[data-theme] .network-switch-layout .switch-table-more { border:1px solid var(--border); color:var(--text); background:var(--surface)
}
html[data-theme] .network-switch-layout .switch-capabilities p { border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout .switch-capabilities b { font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-capabilities .available {color:var(--success-text)
}
html[data-theme] .network-switch-layout .switch-capabilities .unsupported {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-panel header>b {color:var(--accent-text);background:var(--surface-raised);font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-compact-discovery p {border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout .switch-empty {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-mac-total span {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-mac-total small {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-mac-total button {border:1px solid var(--border);color:var(--text);background:var(--surface)
}
html[data-theme] .network-switch-layout .switch-poe-badge {color:var(--muted);background:var(--surface-raised);font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-inventory p {border-right:1px solid var(--border);border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout .switch-inventory p span {color:var(--muted);font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-inventory p strong {font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-events p {border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout .switch-events p>i {background:var(--accent-soft)
}
html[data-theme] .network-switch-layout .switch-events p>i.success {background:var(--success-solid)
}
html[data-theme] .network-switch-layout .switch-events p>i.warning {background:var(--warning-solid)
}
html[data-theme] .network-switch-layout .switch-events p small,
html[data-theme] .network-switch-layout .switch-events time {color:var(--muted);font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-drawer-backdrop {background:var(--bg)
}
html[data-theme] .network-switch-layout .switch-port-drawer-panel {border-left:1px solid var(--border);background:var(--surface);box-shadow:-24px 0 60px var(--shadow-color)
}
html[data-theme] .network-switch-layout .switch-port-drawer-panel header {border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout .switch-port-drawer-panel header span {color:var(--accent-text);font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-port-drawer-panel header p {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-port-drawer-panel header button {border:1px solid var(--border);color:var(--text);background:var(--surface)
}
html[data-theme] .network-switch-layout .switch-drawer-status {border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout .switch-drawer-status b {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-drawer-status b.up,
html[data-theme] .network-switch-layout .switch-drawer-status b.speed-1g {color:var(--success-text)
}
html[data-theme] .network-switch-layout .switch-drawer-status b.error {color:var(--danger-text)
}
html[data-theme] .network-switch-layout .switch-port-rate div {border:1px solid var(--border);background:var(--surface)
}
html[data-theme] .network-switch-layout .switch-port-rate span {color:var(--muted);font-size:var(--text-xs)
}
html[data-theme] .network-switch-layout .switch-port-drawer-panel dt,
html[data-theme] .network-switch-layout .switch-port-drawer-panel dd {border-bottom:1px solid var(--border)
}
html[data-theme] .network-switch-layout .switch-port-drawer-panel dt {color:var(--muted)
}
html[data-theme] .network-switch-layout .switch-port-mini-chart {border:1px dashed var(--border);color:var(--muted)
}
html[data-theme] :focus-visible { outline: 2px solid var(--accent-border)
}
html[data-theme] .app-shell :where(
  .table-wrap,
  .service-table-wrap,
  .central-table-wrap,
  .switch-table-wrap,
  .printer-counter-table,
  .printer-report-table,
  .collector-update-targets
) {
  scrollbar-color: var(--accent-soft) transparent
}
html[data-theme] .central-context {
  border: 1px solid var(--border);
  background: var(--surface)
}
html[data-theme] .central-context-badge > span { background: var(--accent-soft); color: var(--accent-text)
}
html[data-theme] .central-context-badge strong { color: var(--text)
}
html[data-theme] .central-context-badge small { color: var(--muted)
}
html[data-theme] .central-dashboard-view { color: var(--text)
}
html[data-theme] .central-dashboard-loading,
html[data-theme] .central-empty,
html[data-theme] .central-error {
  border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .central-dashboard-loading span,
html[data-theme] .central-empty span,
html[data-theme] .central-error span { color: var(--muted)
}
html[data-theme] .central-breadcrumb { color: var(--muted)
}
html[data-theme] .central-breadcrumb b { color: var(--text)
}
html[data-theme] .central-hero p { color: var(--muted)
}
html[data-theme] .central-generated-at { color: var(--muted)
}
html[data-theme] .central-generated-at strong { color: var(--text)
}
html[data-theme] .central-stat-card { border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--surface))
}
html[data-theme] .central-stat-card > span { color: var(--muted)
}
html[data-theme] .central-stat-card strong { color: var(--text)
}
html[data-theme] .central-stat-card small { color: var(--muted)
}
html[data-theme] .central-stat-card.good { border-color: var(--success-border)
}
html[data-theme] .central-stat-card.warning { border-color: var(--warning-border)
}
html[data-theme] .central-stat-card.critical { border-color: var(--danger-border)
}
html[data-theme] .central-section-head p { color: var(--muted)
}
html[data-theme] .central-project-card { border: 1px solid var(--border); background: linear-gradient(150deg, var(--surface) 0%, var(--surface) 72%);
  box-shadow: 0 1rem 2.5rem var(--shadow-color)
}
html[data-theme] .central-project-card[data-health="CRITICAL"],
html[data-theme] .central-project-card[data-health="NO_COMMUNICATION"],
html[data-theme] .central-project-card[data-health="COMMUNICATION_LOST"] { border-color: var(--danger-border)
}
html[data-theme] .central-project-card[data-health="ATTENTION"] { border-color: var(--warning-border)
}
html[data-theme] .central-project-logo { border: 1px solid var(--border); background: var(--surface); color: var(--faint)
}
html[data-theme] .central-project-identity h3 { color: var(--text)
}
html[data-theme] .central-project-identity p { color: var(--muted)
}
html[data-theme] .central-health { background: var(--success-soft); color: var(--success-text)
}
html[data-theme] .central-health.attention { background: var(--warning-soft); color: var(--warning-text)
}
html[data-theme] .central-health.critical,
html[data-theme] .central-health.no-communication { background: var(--danger-soft); color: var(--danger-text)
}
html[data-theme] .central-project-metrics div { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] .central-project-metrics span { color: var(--muted)
}
html[data-theme] .central-project-footer small { color: var(--muted)
}
html[data-theme] .central-panel { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .central-panel > header { border-bottom: 1px solid var(--border)
}
html[data-theme] .central-panel > header span { color: var(--muted)
}
html[data-theme] .central-table th { color: var(--muted)
}
html[data-theme] .central-table td { border-top: 1px solid var(--border); color: var(--text)
}
html[data-theme] .central-table td strong { color: var(--text)
}
html[data-theme] .central-problem { border-bottom: 1px solid var(--border)
}
html[data-theme] .central-problem > i { background: var(--surface-hover)
}
html[data-theme] .central-problem.critical > i { background: var(--danger-solid)
}
html[data-theme] .central-problem span,
html[data-theme] .central-problem small { color: var(--muted)
}
html[data-theme] .central-project-header-card { border: 1px solid var(--border); background: linear-gradient(145deg,var(--surface),var(--surface))
}
html[data-theme] .central-project-header-card p { color: var(--muted)
}
html[data-theme] .central-project-tabs button { border: 1px solid var(--border); background: var(--surface); color: var(--text)
}
html[data-theme] .central-project-tabs button.active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text)
}
html[data-theme] .central-detail-card { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .central-detail-card span { color: var(--muted)
}
html[data-theme] .central-detail-card strong { color: var(--text)
}
html[data-theme] .central-family-card { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .central-family-card span { color: var(--muted)
}
html[data-theme] .central-family-card small { color: var(--muted)
}
html[data-theme] .central-stats-grid article { border: 1px solid var(--border); background: linear-gradient(145deg,var(--surface),var(--surface))
}
html[data-theme] .central-stats-grid span,
html[data-theme] .central-stats-grid small { color: var(--muted)
}
html[data-theme] .central-stats-grid strong { color: var(--text)
}
html[data-theme] .central-section > header > div > span { color: var(--accent-text)
}
html[data-theme] .central-section > header > small { color: var(--muted)
}
html[data-theme] .central-health-line small { color: var(--muted)
}
html[data-theme] .central-two-column > .central-section { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .central-list > div { border-top: 1px solid var(--border)
}
html[data-theme] .central-list > div > i { background: var(--surface-hover)
}
html[data-theme] .central-list > div > i.degraded,
html[data-theme] .central-list > div > i.warning { background: var(--surface-hover)
}
html[data-theme] .central-list > div > i.offline,
html[data-theme] .central-list > div > i.critical,
html[data-theme] .central-list > div > i.revoked { background: var(--danger-solid)
}
html[data-theme] .central-list strong { color: var(--text)
}
html[data-theme] .central-list small,
html[data-theme] .central-list p { color: var(--muted)
}
html[data-theme] .central-list b { color: var(--text)
}
html[data-theme] .central-detail-grid article,
html[data-theme] .central-family-grid article { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .central-detail-grid article > span,
html[data-theme] .central-family-grid article > span { color: var(--muted)
}
html[data-theme] .central-detail-grid article > strong,
html[data-theme] .central-family-grid article > strong { color: var(--text)
}
html[data-theme] .central-detail-grid article > small,
html[data-theme] .central-family-grid article > small { color: var(--muted)
}
html[data-theme] .central-family-grid article button { color: var(--accent-text)
}
html[data-theme] .central-route-card { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .central-route-card span { color: var(--muted)
}
html[data-theme] .central-project-header-card > div:last-child small { color: var(--muted)
}
html[data-theme] body.central-platform {
  --central-border: var(--border)
}
html[data-theme] body.central-platform .brand {
  border-bottom: 1px solid var(--accent-border);
  background: radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 62%)
}
html[data-theme] body.central-platform .brand-mark:not(.has-client-logo) {
  border: 1px solid var(--accent-border);
  background: linear-gradient(145deg,var(--surface-raised),var(--surface))
}
html[data-theme] body.central-platform .brand-mark:not(.has-client-logo) span { background: var(--accent-solid)
}
html[data-theme] body.central-platform .brand-copy strong { color: var(--text)
}
html[data-theme] body.central-platform .brand-copy strong::before { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-main-nav .start-menu-title { color: var(--muted)
}
html[data-theme] body.central-platform .central-main-nav .nav-menu-trigger:hover,
html[data-theme] body.central-platform .central-main-nav .nav-menu-group.open > .nav-menu-trigger { border-color: var(--border); background: var(--surface-raised)
}
html[data-theme] body.central-platform .topbar { border-bottom-color: var(--border); background: var(--bg)
}
html[data-theme] body.central-platform .central-context {
  border-color: var(--border);
  background: linear-gradient(145deg,var(--surface),var(--surface));
  box-shadow: inset 0 1px var(--shadow-color)
}
html[data-theme] body.central-platform .central-context-title { border-right: 1px solid var(--border)
}
html[data-theme] body.central-platform .central-context-title span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] body.central-platform .central-context-title small { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] body.central-platform .central-context label > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] body.central-platform .central-context select { border-color: var(--border); background-color: var(--surface); color: var(--text)
}
html[data-theme] .identity-site-scope,
html[data-theme] .identity-permission-catalog { border: 1px solid var(--border)
}
html[data-theme] .identity-site-scope legend,
html[data-theme] .identity-permission-catalog legend { color: var(--muted)
}
html[data-theme] .identity-site-scope > label { color: var(--text)
}
html[data-theme] .identity-site-options > label { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .identity-site-options small { color: var(--muted)
}
html[data-theme] .identity-roles-layout > aside { border-right: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .identity-role-item { border: 1px solid var(--border); color: var(--text); background: var(--surface)
}
html[data-theme] .identity-role-item:hover,
html[data-theme] .identity-role-item.active { border-color: var(--accent-border); background: var(--surface-raised)
}
html[data-theme] .identity-role-item small { color: var(--muted)
}
html[data-theme] .identity-role-item em { color: var(--text); background: var(--surface-raised)
}
html[data-theme] .identity-role-impact { border: 1px solid var(--border); color: var(--text); background: var(--surface)
}
html[data-theme] .identity-permission-catalog section { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] .identity-permission-catalog section > strong { color: var(--accent-text)
}
html[data-theme] .identity-permission-catalog label { color: var(--text)
}
@media (max-width: 900px) {
 html[data-theme] .identity-roles-layout > aside { border-bottom: 1px solid var(--border)
 }
}
html[data-theme] body.central-platform .central-breadcrumb span { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-breadcrumb b:first-child { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-hero > div:first-child > span { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-generated-at { border-left: 2px solid var(--accent-border)
}
html[data-theme] body.central-platform .central-primary-grid .central-stat-card {
  background: linear-gradient(155deg,var(--surface-raised) 0%,var(--surface) 78%)
}
html[data-theme] body.central-platform .central-primary-grid .central-stat-card::after { background: var(--accent-soft)
}
html[data-theme] body.central-platform .central-primary-grid .central-stat-card.good::after { background: var(--success-solid)
}
html[data-theme] body.central-platform .central-primary-grid .central-stat-card.warning::after { background: var(--warning-solid)
}
html[data-theme] body.central-platform .central-primary-grid .central-stat-card.critical::after { background: var(--danger-soft)
}
html[data-theme] body.central-platform .central-primary-grid .central-stat-card > span { color: var(--muted); font-size: var(--text-xs)
}
html[data-theme] body.central-platform .central-primary-grid .central-stat-card small { color: var(--muted)
}
html[data-theme] body.central-platform .central-section-head > small { color: var(--muted)
}
html[data-theme] body.central-platform .central-health-overview { background: var(--surface)
}
html[data-theme] body.central-platform .central-health-overview article { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] body.central-platform .central-health-overview span { color: var(--text)
}
html[data-theme] body.central-platform .central-project-card { border-color: var(--border); background: radial-gradient(circle at 100% 0%,var(--accent-soft),transparent 38%),linear-gradient(150deg,var(--surface),var(--surface) 72%)
}
html[data-theme] body.central-platform .central-project-metrics div.attention { border-color: var(--warning-border)
}
html[data-theme] body.central-platform .central-project-metrics div.critical { border-color: var(--danger-border)
}
html[data-theme] body.central-platform .central-project-footer b { color: var(--text)
}
html[data-theme] body.central-platform .central-panel > header > div > span { color: var(--accent-text); font-size: var(--text-xs)
}
html[data-theme] body.central-platform .central-panel > header a { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-problem time { color: var(--muted)
}
html[data-theme] body.central-platform .central-list-empty strong { color: var(--text)
}
html[data-theme] body.central-platform .central-table th { background: var(--surface); font-size: var(--text-xs)
}
html[data-theme] body.central-platform .central-table td small { color: var(--muted)
}
html[data-theme] body.central-platform .central-table .central-health { font-size: var(--text-xs)
}
html[data-theme] body.central-platform .central-collection-state { background: var(--surface-tint); color: var(--text)
}
html[data-theme] body.central-platform .central-collection-state.current { background: var(--success-soft)
}
html[data-theme] body.central-platform .central-collection-state.stale { background: var(--warning-soft)
}
html[data-theme] body.central-platform .central-collection-state.unreachable_by_probe { background: var(--danger-soft)
}
html[data-theme] body.central-platform .central-alert-scope { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-state-list > div { border-bottom: 1px solid var(--border)
}
html[data-theme] body.central-platform .central-state-list span { color: var(--text)
}
html[data-theme] body.central-platform .central-state-list i { background: var(--surface-raised)
}
html[data-theme] body.central-platform .central-callout-number { color: var(--text)
}
html[data-theme] body.central-platform .central-callout-number span { color: var(--muted)
}
html[data-theme] body.central-platform .central-mini-metrics span { color: var(--muted)
}
html[data-theme] body.central-platform .central-mini-metrics b { color: var(--text)
}
html[data-theme] body.central-platform .central-project-header-card { background: radial-gradient(circle at 85% 0%,var(--accent-soft),transparent 42%),linear-gradient(145deg,var(--surface),var(--surface))
}
html[data-theme] body.central-platform .central-project-tabs { border: 1px solid var(--border); background: var(--bg)
}
html[data-theme] body.central-platform .central-family-grid article em { color: var(--warning-text)
}
html[data-theme] body.central-platform .central-catalog-identity span { color: var(--muted)
}
html[data-theme] body.central-platform .central-catalog-identity > div:not(:first-child) { border-left: 1px solid var(--border)
}
@media (max-width: 760px) {
 html[data-theme] body.central-platform .central-catalog-identity > div:not(:first-child) { border-top: 1px solid var(--border)
 }
}
html[data-theme] body.central-platform .central-stat-card[role="button"]:hover,
html[data-theme] body.central-platform .central-stat-card[role="button"]:focus-visible { border-color: var(--accent-border); background: var(--surface-raised)
}
html[data-theme] body.central-platform .central-project-rank { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-project-reasons span { color: var(--text)
}
html[data-theme] body.central-platform .central-project-reasons span::before { color: var(--warning-text)
}
html[data-theme] body.central-platform .central-project-card[data-health="HEALTHY"] .central-project-reasons span::before { color: var(--success-text)
}
html[data-theme] body.central-platform .central-problem em { color: var(--muted)
}
html[data-theme] body.central-platform .central-project-health-panel { border: 1px solid var(--border); border-left: 4px solid var(--success-border); background: linear-gradient(135deg,var(--surface),var(--surface))
}
html[data-theme] body.central-platform .central-project-health-panel[data-health="ATTENTION"] { border-left-color: var(--warning-border)
}
html[data-theme] body.central-platform .central-project-health-panel[data-health="CRITICAL"],
html[data-theme] body.central-platform .central-project-health-panel[data-health="COMMUNICATION_LOST"] { border-left-color: var(--danger-border)
}
html[data-theme] body.central-platform .central-project-health-panel > div > span { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-project-health-panel > div > strong { color: var(--text)
}
html[data-theme] body.central-platform .central-project-health-panel > div > small { color: var(--muted)
}
html[data-theme] body.central-platform .central-project-health-panel > div > em { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-project-health-panel details { border-left: 1px solid var(--border)
}
html[data-theme] body.central-platform .central-project-health-panel summary { color: var(--accent-text)
}
html[data-theme] body.central-platform .central-project-health-panel p { border: 1px solid var(--border); background: var(--surface)
}
html[data-theme] body.central-platform .central-project-health-panel p b { color: var(--text)
}
html[data-theme] body.central-platform .central-project-health-panel p span { color: var(--muted)
}
html[data-theme] body.central-platform .central-analysis-list > div { border-top: 1px solid var(--border)
}
html[data-theme] body.central-platform .central-analysis-list strong { color: var(--text)
}
html[data-theme] body.central-platform .central-analysis-list small { color: var(--muted)
}
html[data-theme] body.central-platform .central-analysis-list time,
html[data-theme] body.central-platform .central-analysis-list > div > b { color: var(--accent-text)
}
@media (max-width: 900px) {
 html[data-theme] body.central-platform .central-project-health-panel details { border-top: 1px solid var(--border)
 }
}