.card, .panel, .filter-panel, .safe-actions-banner, .device-health-banner, .network-health-banner,
.service-health-banner, .update-warning-banner, .device-action-guard {
    min-width: 0;
    background: var(--surface-gradient);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card, .panel { padding: 15px; }
.panel-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.panel-heading { min-width: 0; }
.panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.panel-title, .section-title { margin: 0; color: var(--text); font-size: 18px; line-height: 1.2; letter-spacing: -.012em; }
.panel-subtitle, .section-subtitle, .field-hint { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.compact-panel-header { margin-bottom: 10px; }

.button { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; color: var(--text); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border: 1px solid var(--border-strong); border-radius: 9px; font-weight: 800; font-size: 12px; white-space: nowrap; transition: border-color var(--motion-fast), filter var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); }
.button:hover, .button:focus-visible { border-color: var(--blue); filter: brightness(1.07); box-shadow: var(--shadow-focus); }
.button:active { transform: translateY(1px); }
.button-primary { color: #fff; background: var(--primary-gradient); border-color: #5fc6c3; }
.button-secondary { background: linear-gradient(180deg, #245f96, #1b4b78); border-color: #41759e; }

.button-outline { background: transparent; border-color: var(--border); }
.button-danger { color: #fff; background: linear-gradient(180deg, #c24458, #8a2e41); border-color: #e16477; }
.button-amber { color: #251500; background: linear-gradient(180deg, #ffc15b, #ed9a12); border-color: #ffd88e; }
.button-purple { color: #fff; background: linear-gradient(180deg, #7358c9, #523a9d); border-color: #a58dff; }
.button-small { min-height: var(--control-height-sm); padding-inline: 11px; font-size: 11px; }
.button-full { width: 100%; }
.button.is-disabled, .button:disabled, .pagination-link.is-disabled { opacity: .45; pointer-events: none; }
.button .button-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.status { min-height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: 10px; font-weight: 850; line-height: 1; white-space: nowrap; }
.status::before { width: 6px; height: 6px; flex: 0 0 6px; background: currentColor; border-radius: 50%; content: ""; }
.status-online { color: #82edc4; background: rgba(37, 151, 107, .18); border-color: rgba(78, 218, 170, .40); }
.status-offline { color: #ff9fb0; background: rgba(170, 49, 67, .20); border-color: rgba(255, 113, 136, .46); }
.status-warning { color: #ffd17e; background: rgba(160, 104, 10, .20); border-color: rgba(255, 186, 74, .44); }
.status-running { color: #a3d1ff; background: rgba(43, 103, 166, .24); border-color: rgba(88, 168, 255, .40); }
.status-muted { color: #b2bfcb; background: rgba(102, 120, 137, .18); border-color: rgba(166, 180, 195, .34); }
.status-success { color: #82edc4; background: rgba(37, 151, 107, .18); border-color: rgba(78, 218, 170, .40); }
.status-failed, .status-error { color: #ff9fb0; background: rgba(170, 49, 67, .20); border-color: rgba(255, 113, 136, .46); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-card { position: relative; min-width: 0; min-height: 115px; display: grid; align-content: center; padding: 14px 15px; overflow: hidden; background: var(--surface-gradient); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), filter var(--motion-fast); }
.kpi-card::before { position: absolute; width: 110px; height: 110px; right: -28px; top: -35px; border-radius: 50%; background: radial-gradient(circle, rgba(84, 168, 255, .20), transparent 67%); content: ""; pointer-events: none; }
.kpi-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); content: ""; }
.kpi-online::after { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.kpi-warning::after { background: linear-gradient(90deg, var(--amber), #ff824d); }
.kpi-offline::after { background: linear-gradient(90deg, var(--red), #cf3d69); }
.kpi-agent::after { background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.kpi-link:hover, .kpi-link:focus-visible { border-color: var(--blue); box-shadow: var(--shadow); filter: brightness(1.04); }
.kpi-label { position: relative; z-index: 1; color: #9fc0da; font-size: 10px; font-weight: 850; letter-spacing: .08em; }

.kpi-value { position: relative; z-index: 1; margin: 4px 0 2px; color: var(--text); font-size: clamp(26px, 2vw, 31px); font-weight: 900; line-height: 1.1; }
.kpi-card small { position: relative; z-index: 1; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-action { position: absolute; right: 14px; bottom: 12px; z-index: 1; color: var(--muted); font-size: 16px; }

.tone-green { color: var(--green); }
.tone-amber { color: var(--amber); }
.tone-blue { color: var(--blue); }
.tone-red { color: var(--red); }
.tone-purple { color: var(--purple); }
.tone-cyan { color: var(--cyan); }
.tone-dot { width: 9px; height: 9px; display: inline-block; flex: 0 0 9px; border-radius: 50%; background: currentColor; }
.count-pill { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; padding-inline: 8px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); font-weight: 850; }

progress { width: 100%; height: 8px; overflow: hidden; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--surface-inset); }
progress::-webkit-progress-bar { background: var(--surface-inset); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: var(--radius-pill); transition: width var(--motion); }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: var(--radius-pill); }
progress[data-tone="warning"]::-webkit-progress-value { background: linear-gradient(90deg, var(--amber), #ff824d); }
progress[data-tone="danger"]::-webkit-progress-value { background: linear-gradient(90deg, var(--red), #cf3d69); }
progress[data-tone="success"]::-webkit-progress-value { background: linear-gradient(90deg, var(--green), var(--cyan)); }
progress[data-tone="warning"]::-moz-progress-bar { background: linear-gradient(90deg, var(--amber), #ff824d); }
progress[data-tone="danger"]::-moz-progress-bar { background: linear-gradient(90deg, var(--red), #cf3d69); }
progress[data-tone="success"]::-moz-progress-bar { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.metric-progress { min-width: 92px; display: grid; gap: 5px; }
.metric-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.metric-progress-head strong { color: var(--text); }
.metric-progress-head small { color: var(--muted); }

.tabs, .device-tabs { min-width: 0; display: flex; gap: 5px; padding: 5px; overflow-x: auto; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 12px; scrollbar-width: thin; }
.tab, .device-tabs a { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; color: var(--muted); border: 1px solid transparent; border-radius: 8px; font-size: 11px; font-weight: 800; white-space: nowrap; transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast); }
.tab:hover, .device-tabs a:hover { color: var(--text); background: var(--surface-2); }
.tab.is-active, .tab.on, .device-tabs a.is-active { color: #fff; background: linear-gradient(90deg, #2e72b9, #218f9a); border-color: #5ec5c2; box-shadow: inset 0 0 0 1px rgba(94, 197, 194, .20); }

.detail-list, .preview-list, .alert-detail-list { margin: 0; }
.detail-list div, .preview-list div, .alert-detail-list div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.detail-list div:last-child, .preview-list div:last-child, .alert-detail-list div:last-child { border-bottom: 0; }
.detail-list dt, .preview-list dt, .alert-detail-list dt { color: var(--muted); }
.detail-list dd, .preview-list dd, .alert-detail-list dd { margin: 0; color: var(--text); text-align: right; overflow-wrap: anywhere; }

.empty-state, .empty-timeline { min-height: 150px; display: grid; place-items: center; padding: 26px; color: var(--muted); text-align: center; border: 1px dashed var(--border); border-radius: 11px; background: color-mix(in srgb, var(--surface-inset) 68%, transparent); }
.empty-state p, .empty-timeline p { margin: 0; }
.loading-state { min-height: 130px; display: grid; place-items: center; gap: 12px; color: var(--muted); }
.loading-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--cyan); border-radius: 50%; animation: svit-spin .8s linear infinite; }
@keyframes svit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.button-success { color: #fff; background: linear-gradient(180deg, #22aa79, #14885f); border-color: #54ddb0; }
.button-blue { color: #fff; background: linear-gradient(180deg, #4b8bd7, #3265b2); border-color: #73a9ec; }