:root {
            --bg-pattern-light: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%239CA3AF' cx='10' cy='10' r='1' fill-opacity='0.3'/%3E%3C/svg%3E");
            --bg-pattern-dark: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%23E5E7EB' cx='10' cy='10' r='1' fill-opacity='0.05'/%3E%3C/svg%3E");
        }
        body {
            font-family: 'Inter', sans-serif;
            background-image: var(--bg-pattern-light);
        }
        .dark body {
            background-image: var(--bg-pattern-dark);
        }
        .theme-transition,
        .theme-transition * {
            transition: background-color 0.55s ease, color 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease, fill 0.55s ease, stroke 0.55s ease;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            height: 280px;
            max-height: 400px;
        }
        @media (min-width: 640px) {
            .chart-container {
                height: 350px;
            }
        }
        .active-device {
            transform: scale(1.1);
            border-color: #D97706; /* amber-600 */
        }
        .dark .active-device {
            border-color: #F59E0B; /* amber-500 */
        }
        #to-top-btn {
            transition: opacity 0.3s, visibility 0.3s;
        }