/**
 * Modern UI refresh — VISUAL-ONLY polish, loaded last. Self-contained (no CSS
 * variables) so it behaves identically on every page including login. Only
 * touches appearance (color/shadow/transform/transition/scrollbars/focus/text).
 * No layout, sizing, display, or border-radius overrides — cannot break behavior.
 */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a, button, .btn, .nav-item, .device-item, .device-channel-btn, .action-menu-item, .stat-card, .card, input, select, textarea {
  transition: background-color 160ms cubic-bezier(0.4,0,0.2,1), border-color 160ms cubic-bezier(0.4,0,0.2,1), color 160ms cubic-bezier(0.4,0,0.2,1), box-shadow 160ms cubic-bezier(0.4,0,0.2,1), transform 160ms cubic-bezier(0.4,0,0.2,1);
}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
}
::selection { background: rgba(59,130,246,0.18); }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.stat-card:hover, .card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(15 23 42 / 0.10), 0 2px 8px rgb(15 23 42 / 0.05); }