/* Header */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 14px;
            background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
            border-bottom: 1px solid var(--border-secondary);
            backdrop-filter: blur(8px);
            margin: 6px 0 10px 0;
        }
        .header h1 {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--accent-blue);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .header h1 .logo {
            font-size: 1.25rem;
        }

        .auth-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100dvh;
            flex-direction: column;
            gap: 16px;
        }
        .auth-loading .spinner {
            --spinner-size: 40px;
            --spinner-ring-width: 3px;
            --spinner-track: color-mix(in srgb, var(--accent-blue) 22%, transparent);
            --spinner-arc-primary: var(--accent-blue);
            --spinner-arc-secondary: #34d399;
        }

        /* Main Layout */
        .main-layout {
            display: flex;
            height: calc(100dvh - 65px);
        }
        .left-panel {
            flex: 1;
            padding: 14px;
            /* Allow child panels to manage their own scrolling. This prevents the
               left-panel's scrollbar from capturing scroll events intended for the
               automation panel's internal scroller (FAQ worked because it set its
               inner card-body to scroll). */
            overflow-y: visible;
            transition: margin-right 0.3s ease;
        }
        .left-panel.panel-open {
            margin-right: 0;
        }

        /* Priority Row - Weather, Prices, Inverter */
        .priority-row,
        .operations-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
            align-items: start;
        }
        @media (max-width: 900px) {
            .priority-row,
            .operations-row {
                grid-template-columns: 1fr;
            }
        }

        .dashboard-visibility-card {
            margin-bottom: 10px;
        }
        .dashboard-visibility-card .card-header {
            padding: 10px 14px;
            gap: 10px;
            flex-wrap: nowrap;
            justify-content: flex-start;
        }
        .dashboard-visibility-inline {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-left: 8px;
            flex: 1;
            justify-content: space-evenly;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: thin;
        }
        .card-visibility-toggle {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 12px;
            color: var(--text-primary);
            user-select: none;
            white-space: nowrap;
        }
        .card-visibility-toggle input {
            appearance: none;
            -webkit-appearance: none;
            width: 40px;
            height: 22px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: var(--bg-tertiary);
            position: relative;
            transition: background 0.2s ease, border-color 0.2s ease;
            cursor: pointer;
        }
        .card-visibility-toggle input::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--text-primary);
            transition: transform 0.2s ease;
        }
        .dashboard-visibility-collapse-btn {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
            color: var(--text-primary);
            font-size: 11px;
            cursor: pointer;
            margin-left: auto;
        }
        .card-visibility-toggle input:checked {
            background: var(--color-success-dark);
            border-color: var(--color-success);
        }
        .card-visibility-toggle input:checked::after {
            transform: translateX(18px);
        }
        @media (max-width: 900px) {
            .dashboard-visibility-card .card-header {
                padding: 8px 10px;
                gap: 8px;
                flex-direction: row;
                align-items: center;
                flex-wrap: nowrap;
            }
            .dashboard-visibility-collapse-btn {
                display: inline-flex;
            }
            .dashboard-visibility-inline {
                margin-left: 0;
                width: 100%;
                flex: 1 1 100%;
                flex-wrap: wrap;
                overflow: hidden;
                gap: 8px 10px;
                justify-content: space-between;
                display: none;
                padding-top: 8px;
            }
            .card-visibility-toggle {
                font-size: 11px;
                flex: 1 1 calc(50% - 8px);
            }
            .dashboard-visibility-card.mobile-expanded .card-header {
                flex-wrap: wrap;
                align-items: flex-start;
            }
            .dashboard-visibility-card.mobile-expanded .dashboard-visibility-inline {
                display: flex;
            }
        }
        .is-hidden-preference {
            display: none !important;
        }

        .overview-brief-card {
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
            background:
                radial-gradient(ellipse 120% 80% at 10% 20%, color-mix(in srgb, var(--accent-blue) 20%, transparent), transparent 50%),
                radial-gradient(ellipse 100% 80% at 90% 80%, color-mix(in srgb, var(--color-success-dark) 16%, transparent), transparent 45%),
                linear-gradient(160deg, color-mix(in srgb, var(--bg-secondary) 94%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent));
            border: 1px solid color-mix(in srgb, var(--accent-blue) 16%, transparent);
        }
        .overview-brief-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-blue), var(--color-success, #22c55e), var(--accent-blue));
            background-size: 200% 100%;
            animation: overviewAccentShift 6s ease-in-out infinite;
            opacity: 0.85;
        }
        .overview-brief-card::after {
            content: '';
            position: absolute;
            inset: auto -60px -100px auto;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
            filter: blur(40px);
            opacity: 0.6;
            pointer-events: none;
        }
        @keyframes overviewAccentShift {
            0%, 100% { background-position: 0% 0%; }
            50% { background-position: 100% 0%; }
        }
        .overview-brief-card .card-body {
            position: relative;
            z-index: 1;
        }
        .overview-brief-status {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .overview-brief-status-meta {
            font-size: 11px;
            line-height: 1.45;
            color: var(--text-secondary);
            opacity: 0.84;
        }
        .overview-summary-badge--live {
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-success-dark) 84%, transparent), color-mix(in srgb, var(--color-success) 60%, transparent));
            color: #fff;
            box-shadow: 0 0 8px color-mix(in srgb, var(--color-success) 30%, transparent);
        }
        .overview-summary-badge--partial {
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 32%, transparent), color-mix(in srgb, var(--color-warning) 20%, transparent));
            color: var(--text-primary);
        }
        .overview-summary-badge--waiting {
            background: color-mix(in srgb, var(--border-primary) 82%, transparent);
            color: var(--text-secondary);
        }
        /* Compact desktop layout: summary | now | coming up */
        .overview-brief-shell {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            align-items: start;
        }
        .overview-brief-shell.is-loading {
            opacity: 0.88;
        }
        .overview-brief-main {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
            grid-column: 1 / -1;
        }
        .overview-brief-left {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }
        .overview-brief-right {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .overview-brief-headline {
            max-width: none;
            font-size: clamp(1.05rem, 1.3vw, 1.35rem);
            line-height: 1.2;
            font-weight: 700;
            color: var(--text-primary);
            text-wrap: balance;
            letter-spacing: -0.01em;
        }
        .overview-brief-body {
            max-width: none;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .overview-brief-pulse {
            --overview-pulse-color: var(--accent-blue);
            --overview-pulse-soft: color-mix(in srgb, var(--accent-blue) 14%, transparent);
            --overview-pulse-band-opacity: 0.28;
            --overview-pulse-band-filled-opacity: 0.88;
            --overview-pulse-marker-border: color-mix(in srgb, white 84%, transparent);
            --overview-pulse-band-calm-start: color-mix(in srgb, #2dd4bf 36%, transparent);
            --overview-pulse-band-calm-end: #2dd4bf;
            --overview-pulse-band-watch-start: color-mix(in srgb, #fbbf24 36%, transparent);
            --overview-pulse-band-watch-end: #fbbf24;
            --overview-pulse-band-active-start: color-mix(in srgb, #38bdf8 36%, transparent);
            --overview-pulse-band-active-end: #38bdf8;
            --overview-pulse-band-elevated-start: color-mix(in srgb, #fb923c 36%, transparent);
            --overview-pulse-band-elevated-end: #fb923c;
            --overview-pulse-band-intervention-start: color-mix(in srgb, #f87171 36%, transparent);
            --overview-pulse-band-intervention-end: #f87171;
            --overview-pulse-tag-good-color: var(--text-secondary);
            --overview-pulse-tag-warning-color: var(--text-secondary);
            --overview-pulse-tag-alert-color: var(--text-secondary);
            position: relative;
            overflow: hidden;
            padding: 12px 14px;
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 58%, transparent);
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 92%, transparent), color-mix(in srgb, var(--bg-primary) 76%, transparent)),
                radial-gradient(circle at top left, var(--overview-pulse-soft), transparent 58%);
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
        }
        .overview-brief-pulse::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, white 7%, transparent), transparent);
            opacity: 0.5;
            pointer-events: none;
        }
        .overview-brief-pulse--calm {
            --overview-pulse-color: #34cbb7;
            --overview-pulse-soft: color-mix(in srgb, #34cbb7 14%, transparent);
        }
        .overview-brief-pulse--watch {
            --overview-pulse-color: #6cc6ff;
            --overview-pulse-soft: color-mix(in srgb, #6cc6ff 14%, transparent);
        }
        .overview-brief-pulse--active {
            --overview-pulse-color: #5ca9ff;
            --overview-pulse-soft: color-mix(in srgb, #5ca9ff 14%, transparent);
        }
        .overview-brief-pulse--elevated {
            --overview-pulse-color: #d9a85d;
            --overview-pulse-soft: color-mix(in srgb, #d9a85d 14%, transparent);
        }
        .overview-brief-pulse--intervention {
            --overview-pulse-color: #d58484;
            --overview-pulse-soft: color-mix(in srgb, #d58484 14%, transparent);
        }
        [data-theme="light"] .overview-brief-pulse {
            --overview-pulse-band-opacity: 0.4;
            --overview-pulse-band-filled-opacity: 0.96;
            --overview-pulse-marker-border: color-mix(in srgb, white 92%, var(--bg-primary));
            --overview-pulse-band-calm-start: color-mix(in srgb, var(--color-success) 58%, white);
            --overview-pulse-band-calm-end: var(--color-success);
            --overview-pulse-band-watch-start: color-mix(in srgb, var(--color-warning) 58%, white);
            --overview-pulse-band-watch-end: var(--color-warning);
            --overview-pulse-band-active-start: color-mix(in srgb, var(--accent-blue) 52%, white);
            --overview-pulse-band-active-end: var(--accent-blue);
            --overview-pulse-band-elevated-start: color-mix(in srgb, var(--color-orange) 56%, white);
            --overview-pulse-band-elevated-end: var(--color-orange);
            --overview-pulse-band-intervention-start: color-mix(in srgb, var(--color-danger) 54%, white);
            --overview-pulse-band-intervention-end: var(--color-danger);
            --overview-pulse-tag-good-color: var(--color-success);
            --overview-pulse-tag-warning-color: var(--color-warning);
            --overview-pulse-tag-alert-color: var(--color-danger);
        }
        [data-theme="light"] .overview-brief-pulse--calm {
            --overview-pulse-color: var(--color-success);
            --overview-pulse-soft: color-mix(in srgb, var(--color-success) 14%, transparent);
        }
        [data-theme="light"] .overview-brief-pulse--watch {
            --overview-pulse-color: var(--color-warning);
            --overview-pulse-soft: color-mix(in srgb, var(--color-warning) 14%, transparent);
        }
        [data-theme="light"] .overview-brief-pulse--active {
            --overview-pulse-color: var(--accent-blue);
            --overview-pulse-soft: color-mix(in srgb, var(--accent-blue) 14%, transparent);
        }
        [data-theme="light"] .overview-brief-pulse--elevated {
            --overview-pulse-color: var(--color-orange);
            --overview-pulse-soft: color-mix(in srgb, var(--color-orange) 14%, transparent);
        }
        [data-theme="light"] .overview-brief-pulse--intervention {
            --overview-pulse-color: var(--color-danger);
            --overview-pulse-soft: color-mix(in srgb, var(--color-danger) 14%, transparent);
        }
        .overview-brief-pulse-header {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .overview-brief-pulse-title {
            display: flex;
            align-items: baseline;
            gap: 8px;
            min-width: 0;
            flex-wrap: wrap;
        }
        .overview-brief-pulse-kicker {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-secondary);
            opacity: 0.82;
            white-space: nowrap;
        }
        .overview-brief-pulse-state {
            font-size: 13px;
            line-height: 1;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
        }
        .overview-brief-pulse-score {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: baseline;
            gap: 2px;
            white-space: nowrap;
            line-height: 1;
            color: var(--overview-pulse-color);
            opacity: 0.86;
        }
        .overview-brief-pulse-score span {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .overview-brief-pulse-score small {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .overview-brief-pulse-score .tooltip-icon {
            width: 13px;
            height: 13px;
            min-width: 13px;
            margin-left: 4px;
            align-self: center;
            font-size: 10px;
            border-color: color-mix(in srgb, var(--overview-pulse-color) 55%, transparent);
            color: var(--overview-pulse-color);
            background: color-mix(in srgb, var(--overview-pulse-color) 10%, transparent);
            opacity: 0.92;
            transform: translateY(-1px);
        }
        .overview-brief-pulse-meter {
            position: relative;
            z-index: 1;
            margin-top: 8px;
        }
        .overview-brief-pulse-track {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 6px;
            padding-top: 10px;
        }
        .overview-brief-pulse-band {
            height: 10px;
            border-radius: 999px;
            opacity: var(--overview-pulse-band-opacity);
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .overview-brief-pulse-band.is-filled {
            opacity: var(--overview-pulse-band-filled-opacity);
            transform: translateY(-1px);
        }
        .overview-brief-pulse-band--calm {
            background: linear-gradient(90deg, var(--overview-pulse-band-calm-start), var(--overview-pulse-band-calm-end));
        }
        .overview-brief-pulse-band--watch {
            background: linear-gradient(90deg, var(--overview-pulse-band-watch-start), var(--overview-pulse-band-watch-end));
        }
        .overview-brief-pulse-band--active {
            background: linear-gradient(90deg, var(--overview-pulse-band-active-start), var(--overview-pulse-band-active-end));
        }
        .overview-brief-pulse-band--elevated {
            background: linear-gradient(90deg, var(--overview-pulse-band-elevated-start), var(--overview-pulse-band-elevated-end));
        }
        .overview-brief-pulse-band--intervention {
            background: linear-gradient(90deg, var(--overview-pulse-band-intervention-start), var(--overview-pulse-band-intervention-end));
        }
        .overview-brief-pulse-marker {
            position: absolute;
            top: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid var(--overview-pulse-marker-border);
            background: var(--overview-pulse-color);
            box-shadow:
                0 0 0 3px color-mix(in srgb, var(--overview-pulse-color) 12%, transparent),
                0 0 10px color-mix(in srgb, var(--overview-pulse-color) 24%, transparent);
            transform: translateX(-50%);
        }
        .overview-brief-pulse-scale {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 6px;
            margin-top: 6px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-secondary);
            opacity: 0.72;
        }
        .overview-brief-pulse-scale span {
            text-align: center;
        }
        .overview-brief-pulse-drivers {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }
        .overview-brief-pulse-tag {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 76%, transparent);
            background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
            color: var(--text-secondary);
            font-size: 10.5px;
            line-height: 1;
        }
        .overview-brief-pulse-tag--good {
            color: var(--overview-pulse-tag-good-color);
            border-color: color-mix(in srgb, var(--color-success) 42%, transparent);
            background: color-mix(in srgb, var(--color-success) 10%, var(--bg-primary));
        }
        .overview-brief-pulse-tag--warning {
            color: var(--overview-pulse-tag-warning-color);
            border-color: color-mix(in srgb, var(--color-warning) 42%, transparent);
            background: color-mix(in srgb, var(--color-warning) 12%, var(--bg-primary));
        }
        .overview-brief-pulse-tag--alert {
            color: var(--overview-pulse-tag-alert-color);
            border-color: color-mix(in srgb, var(--color-danger) 44%, transparent);
            background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-primary));
        }
        .overview-brief-pulse-tag--muted {
            opacity: 0.94;
        }
        .overview-brief-insights {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            overflow-x: visible;
            padding-bottom: 2px;
        }
        .overview-brief-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 78%, transparent);
            background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
            color: var(--text-secondary);
            font-size: 10.5px;
            line-height: 1;
            white-space: nowrap;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            transition: border-color 0.2s ease, transform 0.15s ease;
        }
        .overview-brief-chip:hover {
            transform: translateY(-1px);
        }
        .overview-brief-chip strong {
            color: var(--text-primary);
            font-weight: 700;
        }
        .overview-brief-chip--good {
            border-color: color-mix(in srgb, var(--color-success) 44%, transparent);
            background: color-mix(in srgb, var(--color-success) 10%, var(--bg-primary));
        }
        .overview-brief-chip--warning {
            border-color: color-mix(in srgb, var(--color-warning) 42%, transparent);
            background: color-mix(in srgb, var(--color-warning) 12%, var(--bg-primary));
        }
        .overview-brief-chip--alert {
            border-color: color-mix(in srgb, var(--color-danger) 46%, transparent);
            background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-primary));
        }
        .overview-brief-chip--muted {
            opacity: 0.92;
        }
        .overview-brief-panel {
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 52%, transparent);
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 88%, transparent), color-mix(in srgb, var(--bg-primary) 68%, transparent)),
                radial-gradient(circle at top right, color-mix(in srgb, var(--accent-blue) 8%, transparent), transparent 50%);
            box-shadow:
                inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
                0 2px 8px color-mix(in srgb, black 6%, transparent);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            transition: border-color 0.3s ease;
            height: 100%;
        }
        .overview-brief-panel:hover {
            border-color: color-mix(in srgb, var(--accent-blue) 28%, transparent);
        }
        .overview-brief-panel--pulse {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .overview-brief-panel-label {
            margin-bottom: 8px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            color: var(--text-secondary);
            opacity: 0.78;
        }
        .overview-brief-panel-copy {
            font-size: 12px;
            line-height: 1.45;
            color: var(--text-primary);
        }
        .overview-brief-now-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .overview-brief-now-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-primary);
        }
        .overview-brief-now-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 5px;
            background: color-mix(in srgb, var(--text-secondary) 54%, transparent);
        }
        .overview-brief-now-dot--good    { background: var(--color-success, #22c55e); box-shadow: 0 0 6px color-mix(in srgb, var(--color-success, #22c55e) 50%, transparent); }
        .overview-brief-now-dot--warning  { background: var(--color-warning, #f59e0b); box-shadow: 0 0 6px color-mix(in srgb, var(--color-warning, #f59e0b) 50%, transparent); }
        .overview-brief-now-dot--alert    { background: var(--color-danger,  #ef4444); box-shadow: 0 0 6px color-mix(in srgb, var(--color-danger, #ef4444) 50%, transparent); animation: overviewDotPulse 2s ease-in-out infinite; }
        .overview-brief-now-dot--muted    { background: color-mix(in srgb, var(--text-secondary) 54%, transparent); }
        .overview-brief-next-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .overview-brief-next-item {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-primary);
        }
        .overview-brief-next-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 5px;
            background: color-mix(in srgb, var(--text-secondary) 54%, transparent);
        }
        .overview-brief-next-dot--good  { background: var(--color-success, #22c55e); box-shadow: 0 0 6px color-mix(in srgb, var(--color-success, #22c55e) 50%, transparent); }
        .overview-brief-next-dot--warning { background: var(--color-warning, #f59e0b); box-shadow: 0 0 6px color-mix(in srgb, var(--color-warning, #f59e0b) 50%, transparent); }
        .overview-brief-next-dot--alert   { background: var(--color-danger,  #ef4444); box-shadow: 0 0 6px color-mix(in srgb, var(--color-danger, #ef4444) 50%, transparent); animation: overviewDotPulse 2s ease-in-out infinite; }
        .overview-brief-next-dot--muted   { background: color-mix(in srgb, var(--text-secondary) 54%, transparent); }
        @keyframes overviewDotPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @media (max-width: 900px) {
            .overview-brief-card {
                margin-bottom: 16px;
            }
            .overview-brief-shell {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .overview-brief-main,
            .overview-brief-panel--pulse,
            .overview-brief-left {
                grid-column: 1 / -1;
            }
            .overview-brief-headline {
                max-width: none;
            }
        }
        @media (max-width: 720px) {
            .overview-brief-shell {
                grid-template-columns: 1fr;
            }
            .overview-brief-main,
            .overview-brief-panel--pulse,
            .overview-brief-left {
                grid-column: auto;
            }
        }
        @media (max-width: 640px) {
            .overview-brief-card .card-header {
                flex-direction: column;
            }
            .overview-brief-pulse {
                padding: 11px 12px;
            }
            .overview-brief-pulse-header {
                align-items: flex-start;
            }
            .overview-brief-pulse-title {
                gap: 6px;
            }
            .overview-brief-pulse-score span {
                font-size: 1.2rem;
            }
            .overview-brief-pulse-scale {
                display: none;
            }
            .overview-brief-chip {
                white-space: normal;
                line-height: 1.35;
            }
        }

        .ev-card-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .ev-card-icon {
            width: 24px;
            height: 24px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(circle at 30% 25%, rgba(248, 113, 113, 0.28), transparent 52%),
                linear-gradient(145deg, rgba(42, 15, 15, 0.98), rgba(17, 24, 39, 0.96));
            border: 1px solid rgba(239, 68, 68, 0.28);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px rgba(17, 24, 39, 0.24);
            color: #f87171;
            flex-shrink: 0;
        }
        .ev-card-icon svg {
            width: 14px;
            height: 14px;
            display: block;
        }
        .ev-card-heading {
            display: flex;
            flex-direction: column;
            gap: 1px;
            line-height: 1.1;
        }
        .ev-card-kicker {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .ev-card-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .ev-vehicle-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        .ev-vehicle-tab {
            border: 1px solid var(--border-primary);
            background: var(--bg-input);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 12px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .ev-vehicle-tab.active {
            border-color: color-mix(in srgb, var(--accent-blue) 70%, transparent);
            background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
        }
        .ev-summary-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 12px;
        }
        @media (max-width: 700px) {
            .ev-summary-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
        }
        .ev-summary-stat {
            background: var(--bg-input);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 10px 12px;
            min-width: 0;
            overflow: hidden;
        }
        .ev-summary-label {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ev-summary-value {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ev-summary-value.ev-summary-value--with-icon {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 26px;
            white-space: nowrap;
            overflow: visible;
        }
        .ev-summary-value-main {
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ev-summary-battery {
            width: 20px;
            height: 26px;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .ev-summary-battery svg {
            width: 20px;
            height: 26px;
            display: block;
        }
        .ev-summary-battery .level {
            transition: all 600ms cubic-bezier(.2,.9,.2,1);
        }
        .ev-summary-battery.charging {
            animation: batt-pulse 1.2s infinite ease-in-out;
        }
        .ev-summary-value-suffix {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
        }
        .ev-summary-subvalue {
            margin-top: 4px;
            font-size: 11px;
            line-height: 1.35;
            color: var(--text-secondary);
        }
        .ev-summary-footer {
            grid-column: 1 / -1;
            font-size: 11px;
            color: var(--text-secondary);
            opacity: 0.75;
            padding-top: 2px;
        }
        .ev-status-pill {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            padding: 4px 9px;
            font-size: 11px;
            color: var(--text-primary);
            background: var(--bg-input);
        }
        .ev-status-pill.ok {
            border-color: color-mix(in srgb, var(--color-success) 70%, transparent);
            background: color-mix(in srgb, var(--color-success) 14%, transparent);
            color: var(--color-success);
        }
        .ev-status-pill.warn {
            border-color: color-mix(in srgb, var(--color-warning) 70%, transparent);
            background: color-mix(in srgb, var(--color-warning) 16%, transparent);
            color: var(--color-warning);
        }
        .ev-status-pill.error {
            border-color: color-mix(in srgb, var(--color-danger) 70%, transparent);
            background: color-mix(in srgb, var(--color-danger) 16%, transparent);
            color: var(--color-danger);
        }
        .ev-controls-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .ev-session-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .ev-section-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--accent-blue);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .ev-session-btns {
            display: flex;
            gap: 10px;
        }
        .ev-session-btns .ev-action-btn {
            flex: 1;
            min-width: 0;
        }
        .ev-adjustments-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            padding-top: 12px;
            border-top: 1px solid color-mix(in srgb, var(--border-primary) 60%, transparent);
        }
        .ev-adjustment-card {
            padding: 12px;
            border-radius: 10px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .ev-adjustment-card .ev-apply-btn {
            min-width: 0;
            width: 100%;
            margin-top: auto;
            background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-input));
            border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent);
            color: var(--accent-blue);
            font-size: 12px;
            font-weight: 600;
        }
        .ev-adjustment-card .ev-apply-btn:hover:not(:disabled) {
            background: color-mix(in srgb, var(--accent-blue) 22%, var(--bg-input));
        }
        .ev-controls-panel {
            display: none;
            margin-top: 8px;
            padding: 14px;
            border: 1px solid var(--border-primary);
            border-radius: 14px;
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--bg-input) 92%, transparent), color-mix(in srgb, var(--bg-primary) 90%, transparent)),
                radial-gradient(circle at top left, color-mix(in srgb, var(--accent-blue) 10%, transparent), transparent 45%);
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
        }
        .ev-controls-panel.is-visible {
            display: block;
        }
        .ev-controls-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 14px;
        }
        .ev-controls-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .ev-controls-subtitle {
            font-size: 11px;
            color: var(--text-secondary);
        }
        .ev-wake-prompt {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 12px 14px;
            border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, var(--border-primary));
            border-radius: 12px;
            background: color-mix(in srgb, var(--accent-blue) 7%, var(--bg-primary));
        }
        .ev-wake-prompt-icon {
            font-size: 20px;
            line-height: 1;
            opacity: 0.75;
            flex: 0 0 auto;
            margin-top: 2px;
        }
        .ev-wake-prompt-copy {
            min-width: 0;
            flex: 1 1 auto;
        }
        .ev-wake-prompt-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        .ev-wake-prompt-desc {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        .ev-wake-prompt-note {
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.35;
            opacity: 0.72;
            margin-top: 4px;
        }
        .ev-wake-prompt .ev-action-btn--wake {
            width: auto;
            min-width: 132px;
            margin: 0;
            padding: 10px 16px;
            font-weight: 600;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 55%, transparent), color-mix(in srgb, var(--accent-blue) 30%, var(--bg-input)));
            border-color: color-mix(in srgb, var(--accent-blue) 55%, transparent);
            color: var(--text-primary);
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 4px 14px color-mix(in srgb, var(--accent-blue) 20%, transparent);
        }
        .ev-wake-prompt .ev-action-btn--wake:hover:not(:disabled) {
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 68%, transparent), color-mix(in srgb, var(--accent-blue) 42%, var(--bg-input)));
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 14%, transparent), 0 6px 18px color-mix(in srgb, var(--accent-blue) 28%, transparent);
        }
        @media (max-width: 720px) {
            .ev-wake-prompt {
                flex-wrap: wrap;
                align-items: flex-start;
            }
            .ev-wake-prompt .ev-action-btn--wake {
                width: 100%;
            }
        }
        .ev-control-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }
        .ev-control-group.is-hidden {
            display: none;
        }
        .ev-control-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .ev-control-heading {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }
        .ev-control-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
        }
        .ev-control-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .ev-control-slider-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .ev-control-slider-edge {
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .ev-control-slider {
            flex: 1;
            min-width: 0;
        }
        .ev-action-btn {
            position: relative;
            min-width: 140px;
            padding: 11px 14px;
            border-radius: 10px;
            border-width: 1px;
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 8px 20px color-mix(in srgb, black 16%, transparent);
            transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
        }
        .ev-action-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 12px 24px color-mix(in srgb, black 22%, transparent);
        }
        .ev-action-btn:disabled {
            opacity: 0.55;
            box-shadow: none;
            transform: none;
        }
        .ev-action-btn.ev-action-btn--start {
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 78%, black 6%), color-mix(in srgb, var(--color-success-dark) 92%, black 12%));
            border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
            color: white;
            font-weight: 600;
        }
        .ev-action-btn.ev-action-btn--stop {
            background: linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 78%, black 6%), color-mix(in srgb, #a01010 92%, black 12%));
            border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
            color: white;
            font-weight: 600;
        }
        .ev-action-btn--wake {
            min-width: 0;
            width: auto;
            padding: 9px 12px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 22%, transparent), color-mix(in srgb, var(--bg-primary) 82%, black 8%));
            border-color: color-mix(in srgb, var(--accent-blue) 36%, transparent);
            color: var(--text-primary);
        }
        .ev-control-row .btn,
        .ev-control-row .btn-secondary {
            width: auto;
            margin: 0;
            white-space: nowrap;
        }
        .ev-apply-btn {
            min-width: 118px;
        }
        .ev-summary-stat.is-charging {
            background: color-mix(in srgb, var(--color-success) 12%, var(--bg-input));
            border-color: color-mix(in srgb, var(--color-success) 50%, transparent);
        }
        .ev-summary-stat.is-charging .ev-summary-value {
            color: var(--color-success);
        }
        .ev-command-hint {
            display: none;
            margin-top: 8px;
        }
        .ev-command-hint.is-visible {
            display: block;
        }
        @media (max-width: 900px) {
            .ev-controls-header {
                align-items: flex-start;
                flex-direction: column;
            }
            .ev-action-btn {
                min-width: 0;
            }
            .ev-adjustments-grid {
                grid-template-columns: 1fr;
            }
        }
        .ev-message {
            display: none;
            margin-bottom: 10px;
            border-radius: 8px;
            border: 1px solid var(--border-primary);
            padding: 8px 10px;
            font-size: 12px;
        }
        .ev-message.info {
            display: block;
            color: var(--text-secondary);
            background: var(--bg-input);
        }
        .ev-message.success {
            display: block;
            color: var(--color-success);
            border-color: color-mix(in srgb, var(--color-success) 65%, transparent);
            background: color-mix(in srgb, var(--color-success) 14%, transparent);
        }
        .ev-message.warning {
            display: block;
            color: var(--color-warning);
            border-color: color-mix(in srgb, var(--color-warning) 65%, transparent);
            background: color-mix(in srgb, var(--color-warning) 16%, transparent);
        }
        .ev-message.error {
            display: block;
            color: var(--color-danger);
            border-color: color-mix(in srgb, var(--color-danger) 65%, transparent);
            background: color-mix(in srgb, var(--color-danger) 15%, transparent);
        }

        /* Priority Badge for Automation Rules */
        .priority-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            min-width: 24px;
        }

        /* Priority color scale: Red (P1) → Orange → Yellow → Green (P10) */
        .priority-badge.p1 { background: #ff4757; color: #fff; } /* P1: Critical Red */
        .priority-badge.p2 { background: #ff6b6b; color: #fff; } /* P2: Red */
        .priority-badge.p3 { background: #ff8c42; color: #fff; } /* P3: Red-Orange */
        .priority-badge.p4 { background: #ffa24d; color: #000; } /* P4: Orange-Red */
        .priority-badge.p5 { background: #ffb84d; color: #000; } /* P5: Orange */
        .priority-badge.p6 { background: #ffd43b; color: #000; } /* P6: Yellow-Orange */
        .priority-badge.p7 { background: #ffe066; color: #000; } /* P7: Yellow */
        .priority-badge.p8 { background: #a8d400; color: #000; } /* P8: Lime */
        .priority-badge.p9 { background: #69db4d; color: #000; } /* P9: Light Green */
        .priority-badge.p10 { background: #51cf66; color: #000; } /* P10: Green */
        .priority-badge.p-low { background: var(--bg-tertiary); color: var(--text-secondary); } /* P>10: Very low / Gray */

        /* Secondary Grid */
        .secondary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 16px;
        }

        /* Cards */
        .card {
            background: var(--gradient-card);
            border-radius: 12px;
            border: 1px solid var(--border-secondary);
            overflow: hidden;
            transition: all 0.2s ease;
        }
        .card:hover {
            border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent);
            box-shadow: 0 8px 32px var(--shadow-lg);
        }
        .dashboard-inline-loading {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        .dashboard-inline-loading .spinner {
            --spinner-size: 14px;
            --spinner-ring-width: 2px;
            --spinner-track: color-mix(in srgb, var(--accent-blue) 24%, transparent);
            --spinner-arc-primary: var(--accent-blue);
            --spinner-arc-secondary: color-mix(in srgb, var(--accent-blue) 68%, #34d399 32%);
        }
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            background: var(--bg-overlay);
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 40%, transparent);
        }
        .card-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .card-title .icon {
            font-size: 18px;
        }
        .preview-banner {
            display: grid;
            gap: 14px;
            margin: 0 0 16px 0;
            padding: 16px 18px;
            border-radius: 16px;
            border: 1px solid rgba(88, 166, 255, 0.24);
            background: linear-gradient(135deg, rgba(88, 166, 255, 0.16), rgba(255, 138, 61, 0.12));
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
        }
        .preview-banner__top {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 16px;
            flex-wrap: wrap;
        }
        .preview-banner__copy {
            display: grid;
            gap: 8px;
            min-width: 260px;
            flex: 1 1 520px;
        }
        .preview-banner__eyebrow {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--accent-blue);
        }
        .preview-banner__title {
            font-size: 20px;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1.2;
        }
        .preview-banner__description {
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-secondary);
            max-width: 760px;
        }
        .preview-banner__meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .preview-banner__pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(13, 17, 23, 0.26);
            font-size: 11px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .preview-banner__controls {
            display: flex;
            align-items: end;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            flex: 0 1 auto;
        }
        .preview-banner__field {
            display: grid;
            gap: 6px;
            min-width: 220px;
        }
        .preview-banner__field-label {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 600;
        }
        .preview-banner__select {
            min-width: 220px;
            height: 40px;
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid var(--border-primary);
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        .preview-banner__buttons {
            display: flex;
            align-items: end;
            gap: 8px;
            flex-wrap: wrap;
        }
        .preview-banner__btn {
            width: auto;
            min-height: 40px;
            padding: 0 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        .preview-banner__btn--primary {
            background: color-mix(in srgb, var(--accent-blue) 14%, var(--bg-primary));
            border-color: color-mix(in srgb, var(--accent-blue) 34%, transparent);
        }
        .preview-banner__btn--warning {
            border-color: var(--color-warning);
            color: var(--color-warning);
        }
        .preview-banner__hint {
            font-size: 12px;
            color: var(--text-muted);
        }
        @media (max-width: 900px) {
            .preview-banner__top {
                align-items: start;
            }
            .preview-banner__controls {
                width: 100%;
                justify-content: flex-start;
            }
        }
        @media (max-width: 640px) {
            .preview-banner {
                padding: 14px;
            }
            .preview-banner__copy,
            .preview-banner__field,
            .preview-banner__select {
                min-width: 0;
                width: 100%;
            }
            .preview-banner__buttons {
                width: 100%;
            }
            .preview-banner__btn {
                flex: 1 1 150px;
            }
        }
        .app-overview-icon {
            --icon-glyph: #9fcfff;
            width: 22px;
            height: 22px;
            border-radius: 7px;
            border: 1px solid rgba(180, 220, 255, 0.42);
            background:
                radial-gradient(circle at 24% 18%, rgba(255,255,255,.30), rgba(255,255,255,0) 44%),
                linear-gradient(165deg, #173661 0%, #10284a 56%, #0d203d 100%);
            color: var(--icon-glyph);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.2),
                0 8px 14px -10px rgba(9, 23, 45, 0.75);
        }
        .app-overview-icon svg {
            width: 13px;
            height: 13px;
            display: block;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .app-overview-icon--sm {
            width: 18px;
            height: 18px;
            border-radius: 6px;
        }
        .app-overview-icon--sm svg {
            width: 11px;
            height: 11px;
        }
        .app-overview-icon--tile {
            width: 34px;
            height: 34px;
            border-radius: 10px;
        }
        .app-overview-icon--tile svg {
            width: 20px;
            height: 20px;
        }
        .app-overview-icon--customize { --icon-glyph: #9be8ff; }
        .app-overview-icon--bolt { --icon-glyph: #ffc56d; }
        .app-overview-icon--money { --icon-glyph: #7af0b0; }
        .app-overview-icon--weather { --icon-glyph: #b4e4ff; }
        .app-overview-icon--ev { --icon-glyph: #ff99c9; }
        .app-overview-icon--quick { --icon-glyph: #b7c1ff; }
        .app-overview-icon--calendar { --icon-glyph: #a5d3ff; }
        .app-overview-icon--help { --icon-glyph: #ffd978; }
        .app-overview-icon--note { --icon-glyph: #9be8ff; }
        .app-overview-icon--target { --icon-glyph: #ff8db8; }
        .app-overview-icon--chart { --icon-glyph: #7af0b0; }
        .app-overview-icon--battery { --icon-glyph: #7af0b0; }
        .app-overview-icon--temp { --icon-glyph: #ffc56d; }
        .app-overview-icon--clock { --icon-glyph: #b6c4d6; }
        .app-overview-icon--solar { --icon-glyph: #ffc56d; }
        .app-overview-icon--home { --icon-glyph: #9be8ff; }
        .app-overview-icon--grid { --icon-glyph: #b7c1ff; }
        .app-overview-icon--refresh { --icon-glyph: #9fcfff; }
        .app-overview-icon--play { --icon-glyph: #7af0b0; }
        .app-overview-icon--stop { --icon-glyph: #ff8d85; }
        [data-theme="light"] .app-overview-icon {
            border-color: #b6c6d9;
            background:
                radial-gradient(circle at 24% 18%, rgba(255,255,255,.84), rgba(255,255,255,0) 45%),
                linear-gradient(165deg, #f2f8ff 0%, #e6f0fb 56%, #d9e7f6 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.86),
                0 8px 14px -10px rgba(23, 54, 97, 0.5);
        }
        [data-theme="light"] .app-overview-icon svg {
            stroke-width: 2.15;
        }
        [data-theme="light"] .app-overview-icon--customize { --icon-glyph: #0c7db0; }
        [data-theme="light"] .app-overview-icon--bolt { --icon-glyph: #a46200; }
        [data-theme="light"] .app-overview-icon--money { --icon-glyph: #1f7a3e; }
        [data-theme="light"] .app-overview-icon--weather { --icon-glyph: #14658f; }
        [data-theme="light"] .app-overview-icon--ev { --icon-glyph: #c13b73; }
        [data-theme="light"] .app-overview-icon--quick { --icon-glyph: #5a58c8; }
        [data-theme="light"] .app-overview-icon--calendar { --icon-glyph: #156f9d; }
        [data-theme="light"] .app-overview-icon--help { --icon-glyph: #9b6700; }
        [data-theme="light"] .app-overview-icon--note { --icon-glyph: #0c7db0; }
        [data-theme="light"] .app-overview-icon--target { --icon-glyph: #b4336a; }
        [data-theme="light"] .app-overview-icon--chart { --icon-glyph: #1f7a3e; }
        [data-theme="light"] .app-overview-icon--battery { --icon-glyph: #1f7a3e; }
        [data-theme="light"] .app-overview-icon--temp { --icon-glyph: #a46200; }
        [data-theme="light"] .app-overview-icon--clock { --icon-glyph: #5f6a78; }
        [data-theme="light"] .app-overview-icon--solar { --icon-glyph: #a46200; }
        [data-theme="light"] .app-overview-icon--home { --icon-glyph: #156f9d; }
        [data-theme="light"] .app-overview-icon--grid { --icon-glyph: #5a58c8; }
        [data-theme="light"] .app-overview-icon--refresh { --icon-glyph: #1869c6; }
        [data-theme="light"] .app-overview-icon--play { --icon-glyph: #1f7a3e; }
        [data-theme="light"] .app-overview-icon--stop { --icon-glyph: #c93d36; }
        .card-badge {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--accent-blue) 15%, transparent);
            color: var(--accent-blue);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .card-body {
            padding: 16px 18px;
        }

        /* Priority Card Variants */
        .card.priority {
            border-color: color-mix(in srgb, var(--accent-blue) 20%, transparent);
        }
        .card.priority .card-header {
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 8%, transparent), transparent);
        }
        .inverter-card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 12px 18px 10px;
            gap: 16px;
        }
        .inverter-card-header__title-block {
            display: grid;
            gap: 4px;
            min-width: 0;
            max-width: 420px;
        }
        .inverter-card-header__meta {
            display: grid;
            justify-items: center;
            gap: 8px;
            min-width: 0;
        }
        .inverter-card-header__status {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            flex-wrap: wrap;
            justify-content: center;
            justify-self: center;
        }
        .inverter-card-header__status .card-badge {
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, transparent);
            background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
        }
        .inverter-card-header__status .btn {
            margin-bottom: 0;
            flex: 0 0 auto;
        }
        .inverter-card-header__status .btn.btn-icon {
            width: 34px;
            height: 34px;
            min-width: 34px;
            border-radius: 12px;
        }
        #inverterLastUpdate,
        #inverterFetchLabel,
        .inverter-card-header__age,
        .inverter-card-header__fetch {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 32px;
            padding: 0 11px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-input) 76%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-primary) 76%, transparent);
            font-size: 11px;
            color: var(--text-secondary);
            line-height: 1.1;
            text-align: center;
            white-space: nowrap;
        }
        .inverter-card-header__fetch-row {
            display: flex;
            justify-content: center;
            justify-self: center;
            width: 100%;
            min-height: 32px;
            line-height: 1.1;
            text-align: center;
        }
        #inverterFetchLabel,
        .inverter-card-header__fetch {
            font-size: 10px;
            color: var(--text-muted);
        }
        #inverterFetchAgo {
            margin-left: 0.25ch;
            font-weight: 600;
            color: var(--text-secondary);
        }
        .inverter-card-header__fetch[hidden] {
            display: none !important;
        }
        [data-theme="light"] .card.priority[data-dashboard-card="inverter"] {
            border-color: rgba(196, 210, 224, 0.92);
            box-shadow: 0 18px 34px rgba(57, 84, 110, 0.08);
        }
        [data-theme="light"] .card.priority[data-dashboard-card="inverter"] .card-header {
            background: linear-gradient(180deg, rgba(252, 254, 255, 0.98), rgba(241, 247, 252, 0.98));
        }
        [data-theme="light"] .inverter-card-header__status .card-badge {
            color: #0e6b96;
            border-color: rgba(14, 107, 150, 0.18);
            background: linear-gradient(180deg, rgba(14, 107, 150, 0.14), rgba(14, 107, 150, 0.08));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
        }
        [data-theme="light"] #inverterLastUpdate,
        [data-theme="light"] #inverterFetchLabel {
            background: rgba(255,255,255,0.84);
            border-color: rgba(188, 204, 220, 0.92);
            box-shadow: 0 10px 20px rgba(55, 87, 117, 0.08);
        }
        @media (max-width: 700px) {
            .inverter-card-header {
                flex-wrap: wrap;
                gap: 10px;
                padding: 11px 16px 9px;
            }
            .inverter-card-header__title-block {
                max-width: none;
                gap: 2px;
            }
            .inverter-card-header__meta {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                justify-items: initial;
                gap: 6px 10px;
            }
            .inverter-card-header__status,
            .inverter-card-header__fetch-row {
                justify-content: center;
                text-align: center;
            }
            .inverter-card-header__status {
                min-height: 0;
                gap: 6px;
                flex: 0 1 auto;
            }
            .inverter-card-header__fetch-row {
                min-height: 0;
                flex: 0 0 100%;
            }
        }
        @media (max-width: 520px) {
            .inverter-card-header {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: start;
                gap: 8px 10px;
                padding: 10px 14px 8px;
            }
            .inverter-card-header__title-block {
                min-width: 0;
            }
            .inverter-card-header__meta {
                width: auto;
                display: grid;
                justify-items: center;
                align-content: start;
                gap: 4px;
            }
            .inverter-card-header__status {
                flex: initial;
                flex-wrap: nowrap;
                justify-content: center;
                gap: 5px;
            }
            .inverter-card-header__fetch-row {
                justify-content: center;
                text-align: center;
            }
            .inverter-card-header__status .card-badge {
                padding: 4px 8px;
                font-size: 9px;
            }
            #inverterLastUpdate,
            #inverterFetchLabel,
            .inverter-card-header__age,
            .inverter-card-header__fetch {
                min-height: 28px;
                padding: 0 9px;
                gap: 4px;
                font-size: 10px;
            }
            #inverterFetchLabel,
            .inverter-card-header__fetch {
                font-size: 9px;
            }
            .inverter-card-header__status .btn.btn-icon {
                width: 30px;
                height: 30px;
                min-width: 30px;
                border-radius: 10px;
            }
        }
        @media (max-width: 420px) {
            .inverter-card-header__meta {
                gap: 4px;
            }
            .inverter-card-header__status {
                gap: 4px;
                flex-wrap: wrap;
            }
        }

        /* Buttons */
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 14px;
            background: var(--bg-card);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            margin-bottom: 6px;
        }
        .btn:hover {
            background: var(--border-primary);
            border-color: color-mix(in srgb, var(--accent-blue) 40%, transparent);
            transform: translateY(-1px);
        }
        .btn:active {
            transform: translateY(0);
        }
        .btn-primary {
            background: var(--gradient-success);
            border-color: var(--color-success-dark);
        }
        .btn-primary:hover {
            background: var(--gradient-success);
            filter: brightness(1.1);
            border-color: var(--color-success);
        }
        .btn-sm {
            padding: 8px 12px;
            font-size: 12px;
        }
        .btn-icon {
            width: auto;
            padding: 8px 12px;
        }

        /* Inputs */
        .input {
            width: 100%;
            padding: 10px 12px;
            background: var(--bg-input);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 13px;
            transition: all 0.2s ease;
        }
        .input:focus {
            outline: none;
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 3px var(--accent-blue-bg);
        }
        
        /* Range Slider Styling */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            background: linear-gradient(to right, var(--color-success-dark) 0%, var(--accent-blue) 50%, var(--color-orange) 100%);
            border-radius: 4px;
            outline: none;
            cursor: pointer;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: var(--accent-blue);
            border: 2px solid var(--bg-primary);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 8px color-mix(in srgb, var(--accent-blue) 50%, transparent);
            transition: all 0.2s ease;
        }
        
        input[type="range"]::-webkit-slider-thumb:hover {
            background: color-mix(in srgb, var(--accent-blue) 80%, white);
            box-shadow: 0 0 12px color-mix(in srgb, var(--accent-blue) 80%, transparent);
            transform: scale(1.1);
        }
        
        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: var(--accent-blue);
            border: 2px solid var(--bg-primary);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 8px color-mix(in srgb, var(--accent-blue) 50%, transparent);
            transition: all 0.2s ease;
        }
        
        input[type="range"]::-moz-range-thumb:hover {
            background: color-mix(in srgb, var(--accent-blue) 80%, white);
            box-shadow: 0 0 12px color-mix(in srgb, var(--accent-blue) 80%, transparent);
            transform: scale(1.1);
        }
        .input::placeholder {
            color: var(--text-placeholder);
        }
        .input-row {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }
        .input-group {
            flex: 1;
        }
        .input-group label {
            display: block;
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        select.input {
            cursor: pointer;
        }

        /* Data Display Cards */
        .data-card {
            background: var(--bg-input);
            border-radius: 8px;
            padding: 12px;
            margin-top: 12px;
            min-height: 80px;
        }
        .data-card.success {
            border-left: 3px solid var(--color-success-dark);
        }
        .data-card.info {
            border-left: 3px solid var(--accent-blue);
        }

        #inverterCard {
            border-left: none !important;
            container-type: inline-size;
            container-name: inverter-card;
            width: min(100%, 920px);
            margin-inline: auto;
            --battery-shell-color: rgba(255, 255, 255, 0.32);
            --battery-shell-bg: rgba(255, 255, 255, 0.05);
            --energy-panel-surface: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 72%, transparent), color-mix(in srgb, var(--bg-input) 94%, transparent));
            --energy-cyan: #72dbff;
            --energy-solar: #72dbff;
            --energy-home: #7ee787;
            --energy-grid-import: #ffb86d;
            --energy-grid-export: #7ee787;
            --energy-battery-charge: #7ee787;
            --energy-battery-discharge: #ff8d85;
        }
        #amberCard {
            container-type: inline-size;
            container-name: pricing-card;
        }

        .energy-topology {
            display: grid;
            gap: 12px;
        }
        .energy-scene {
            position: relative;
            min-height: 470px;
            border-radius: 18px;
            overflow: hidden;
            padding: 18px;
            background:
                radial-gradient(circle at 18% 12%, rgba(88, 166, 255, 0.18), transparent 24%),
                radial-gradient(circle at 84% 10%, rgba(126, 231, 135, 0.10), transparent 18%),
                linear-gradient(180deg, #0a1221 0%, #0d1525 34%, #121a24 70%, #0b1117 100%);
            border: 1px solid color-mix(in srgb, var(--accent-blue) 28%, var(--border-primary));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 46px rgba(0,0,0,0.24);
            isolation: isolate;
        }
        .energy-scene::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.46;
            background-image:
                radial-gradient(circle at 10% 18%, rgba(255,255,255,0.95) 0 1px, transparent 1.6px),
                radial-gradient(circle at 21% 9%, rgba(255,255,255,0.65) 0 1px, transparent 1.7px),
                radial-gradient(circle at 35% 16%, rgba(255,255,255,0.72) 0 1.2px, transparent 1.8px),
                radial-gradient(circle at 48% 8%, rgba(255,255,255,0.6) 0 1px, transparent 1.6px),
                radial-gradient(circle at 61% 12%, rgba(255,255,255,0.75) 0 1.1px, transparent 1.7px),
                radial-gradient(circle at 74% 18%, rgba(255,255,255,0.58) 0 1px, transparent 1.6px),
                radial-gradient(circle at 88% 10%, rgba(255,255,255,0.88) 0 1.1px, transparent 1.7px),
                radial-gradient(circle at 92% 22%, rgba(255,255,255,0.48) 0 1px, transparent 1.6px);
        }
        .energy-scene__ground {
            position: absolute;
            left: -8%;
            right: -8%;
            bottom: -2%;
            height: 34%;
            border-radius: 50% 50% 0 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 50% 0%, rgba(114, 219, 255, 0.12), transparent 55%),
                linear-gradient(180deg, rgba(9, 18, 28, 0) 0%, rgba(12, 20, 28, 0.95) 42%, rgba(5, 11, 17, 1) 100%);
            z-index: 0;
        }
        .energy-scene__wiring {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        .energy-flow-track {
            fill: none;
            stroke: rgba(255, 255, 255, 0.08);
            stroke-width: 10;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .energy-flow-path {
            fill: none;
            stroke: var(--flow-color, var(--energy-cyan));
            stroke-width: 7;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: var(--flow-opacity, 0.24);
            filter: drop-shadow(0 0 8px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 48%, transparent));
        }
        .energy-flow-path.is-active {
            stroke-dasharray: 22 18;
            animation: energy-flow-dash var(--flow-speed, 3000ms) linear infinite;
        }
        .energy-flow-path.is-reverse {
            animation-direction: reverse;
        }
        .energy-flow-path.is-idle {
            opacity: 0.08;
            stroke-dasharray: none;
            filter: none;
        }
        @keyframes energy-flow-dash {
            from { stroke-dashoffset: 0; }
            to { stroke-dashoffset: -80; }
        }

        .energy-house {
            position: absolute;
            left: 50%;
            top: 17%;
            width: min(58%, 560px);
            aspect-ratio: 1.65 / 1;
            transform: translateX(-50%);
            z-index: 1;
            pointer-events: none;
        }
        .energy-house__roof {
            position: absolute;
            left: 13%;
            right: 4%;
            top: 0;
            height: 29%;
            clip-path: polygon(0 100%, 20% 10%, 100% 10%, 96% 100%);
            background: linear-gradient(180deg, rgba(13, 23, 34, 0.98), rgba(19, 31, 43, 0.96));
            border: 1px solid rgba(114, 219, 255, 0.18);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 16px 22px rgba(0,0,0,0.24);
        }
        .energy-house__roof-panels {
            position: absolute;
            left: 26%;
            right: 6%;
            top: 4%;
            height: 17%;
            border-radius: 6px;
            background:
                repeating-linear-gradient(90deg, rgba(114, 219, 255, 0.16) 0 2px, transparent 2px 30px),
                repeating-linear-gradient(180deg, rgba(114, 219, 255, 0.08) 0 2px, transparent 2px 18px),
                linear-gradient(180deg, rgba(16, 39, 58, 0.92), rgba(9, 24, 38, 0.95));
            border: 1px solid rgba(114, 219, 255, 0.22);
            box-shadow: 0 0 18px rgba(88, 166, 255, 0.08);
        }
        .energy-house__body {
            position: absolute;
            left: 7%;
            right: 11%;
            bottom: 12%;
            height: 49%;
            border-radius: 12px 12px 10px 10px;
            background: linear-gradient(180deg, rgba(21, 28, 35, 0.98), rgba(12, 19, 27, 0.98));
            border: 1px solid rgba(255, 255, 255, 0.07);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 28px rgba(0,0,0,0.25);
        }
        .energy-house__body::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 18%;
            height: 6px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
        }
        .energy-house__garage {
            position: absolute;
            left: -6%;
            bottom: 12%;
            width: 30%;
            height: 22%;
            border-radius: 10px 10px 0 0;
            background: linear-gradient(180deg, rgba(17, 24, 32, 0.96), rgba(10, 16, 23, 0.98));
            border: 1px solid rgba(255,255,255,0.06);
        }
        .energy-house__door {
            position: absolute;
            right: 10%;
            bottom: 0;
            width: 12%;
            height: 48%;
            border-radius: 10px 10px 0 0;
            background: linear-gradient(180deg, rgba(31, 38, 48, 0.95), rgba(15, 20, 28, 0.98));
            border: 1px solid rgba(255,255,255,0.08);
        }
        .energy-house__window {
            position: absolute;
            bottom: 24%;
            width: 13%;
            height: 28%;
            border-radius: 6px;
            background:
                linear-gradient(180deg, rgba(255, 226, 170, 0.92), rgba(255, 183, 103, 0.58));
            border: 1px solid rgba(255, 214, 153, 0.28);
            box-shadow: 0 0 18px rgba(255, 197, 109, 0.16);
        }
        .energy-house__window--a { left: 18%; }
        .energy-house__window--b { left: 37%; }
        .energy-house__window--c { left: 56%; }

        .energy-panel {
            --panel-accent: var(--accent-blue);
            position: absolute;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 14px 16px;
            border-radius: 16px;
            background: var(--energy-panel-surface);
            border: 1px solid color-mix(in srgb, var(--panel-accent) 40%, rgba(255,255,255,0.08));
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.03),
                0 18px 28px rgba(0,0,0,0.18),
                inset 0 0 22px color-mix(in srgb, var(--panel-accent) 10%, transparent);
            backdrop-filter: blur(12px);
        }
        .energy-panel__header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }
        .energy-panel__eyebrow {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--panel-accent) 72%, white 28%);
        }
        .energy-panel__eyebrow .app-overview-icon {
            width: 26px;
            height: 26px;
            min-width: 26px;
        }
        .energy-panel__pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: color-mix(in srgb, var(--panel-accent) 16%, transparent);
            border: 1px solid color-mix(in srgb, var(--panel-accent) 32%, transparent);
            color: color-mix(in srgb, var(--panel-accent) 74%, white 26%);
            white-space: nowrap;
        }
        .energy-panel__value {
            font-size: clamp(24px, 2.6vw, 38px);
            line-height: 1;
            font-weight: 700;
            color: var(--color-terminal-text);
        }
        .energy-panel__label {
            font-size: 13px;
            color: var(--text-primary);
            font-weight: 600;
        }
        .energy-panel__meta {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .energy-panel__subvalue {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .energy-panel__hero {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
        }
        .energy-panel__hero-copy {
            display: grid;
            gap: 6px;
            min-width: 0;
        }
        .energy-panel--solar {
            --panel-accent: var(--energy-solar);
            left: 4%;
            top: 6%;
            width: 28%;
            max-width: 290px;
        }
        .energy-panel--solar.is-curtailed {
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.03),
                0 18px 28px rgba(0,0,0,0.18),
                inset 0 0 22px rgba(255, 107, 53, 0.16),
                0 0 22px rgba(255, 107, 53, 0.12);
        }
        .energy-panel--solar.is-curtailed .energy-panel__pill {
            background: rgba(255, 107, 53, 0.16);
            border-color: rgba(255, 107, 53, 0.34);
            color: #ffb38f;
        }
        .energy-panel--home {
            --panel-accent: var(--energy-home);
            left: 6%;
            top: 58%;
            width: 22%;
            max-width: 235px;
        }
        .energy-panel--hub {
            --panel-accent: var(--energy-cyan);
            left: 50%;
            top: 52%;
            transform: translateX(-50%);
            width: 30%;
            min-height: 164px;
            max-width: 340px;
        }
        .energy-panel--grid {
            right: 4%;
            top: 36%;
            width: 18%;
            max-width: 180px;
        }
        .energy-panel--grid.is-export {
            --panel-accent: var(--energy-grid-export);
        }
        .energy-panel--grid.is-import {
            --panel-accent: var(--energy-grid-import);
        }
        .energy-panel--grid.is-idle {
            --panel-accent: var(--accent-blue);
        }
        .energy-panel--grid .energy-panel__value {
            font-size: clamp(21px, 2.2vw, 30px);
        }
        svg.tile-icon.battery {
            margin: 0;
            width: 56px;
            height: 62px;
            padding: 0;
            display: block;
            border-radius: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
        }
        .energy-hub__headline {
            display: grid;
            gap: 6px;
        }
        .energy-hub__level {
            font-size: clamp(34px, 4vw, 52px);
            line-height: 0.92;
            font-weight: 700;
            color: var(--accent-blue);
        }
        .energy-hub__storage {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .energy-hub__power {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .energy-hub__temps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 2px;
        }
        .energy-hub__temp {
            padding: 8px 10px;
            border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.05);
        }
        .energy-hub__temp-label {
            font-size: 10px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-secondary);
        }
        .energy-hub__temp-value {
            font-size: 15px;
            font-weight: 700;
            margin-top: 4px;
        }

        .energy-bank {
            --bank-color: var(--accent-blue);
            position: absolute;
            right: 22%;
            top: 62%;
            display: flex;
            gap: 10px;
            align-items: flex-end;
            z-index: 2;
        }
        .energy-bank.is-charging { --bank-color: var(--energy-battery-charge); }
        .energy-bank.is-discharging { --bank-color: var(--energy-battery-discharge); }
        .energy-bank.is-idle { --bank-color: var(--accent-blue); }
        .energy-bank__module {
            position: relative;
            width: 34px;
            height: 94px;
            border-radius: 12px 12px 10px 10px;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(15, 26, 40, 0.92), rgba(9, 14, 20, 0.98));
            border: 1px solid color-mix(in srgb, var(--bank-color) 32%, rgba(255,255,255,0.08));
            box-shadow: 0 14px 24px rgba(0,0,0,0.22);
        }
        .energy-bank__module::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 3px;
            border-radius: 999px;
            background: rgba(255,255,255,0.28);
        }
        .energy-bank__fill {
            position: absolute;
            left: 4px;
            right: 4px;
            bottom: 4px;
            height: calc(var(--bank-fill, 0) * 78px);
            border-radius: 10px;
            background: linear-gradient(180deg, color-mix(in srgb, var(--bank-color) 82%, white 18%), var(--bank-color));
            box-shadow: 0 0 12px color-mix(in srgb, var(--bank-color) 45%, transparent);
            transition: height 600ms cubic-bezier(.2,.9,.2,1), background 300ms ease;
        }
        @keyframes energy-bank-breathe {
            0%, 100% { transform: translateY(0); opacity: 0.92; }
            50% { transform: translateY(-2px); opacity: 1; }
        }
        .energy-bank.is-charging .energy-bank__fill,
        .energy-bank.is-discharging .energy-bank__fill {
            animation: energy-bank-breathe 1.6s ease-in-out infinite;
        }

        .energy-scene__legend {
            position: absolute;
            left: 18px;
            bottom: 16px;
            z-index: 2;
            max-width: calc(100% - 36px);
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(7, 12, 18, 0.45);
            border: 1px solid rgba(255,255,255,0.05);
            font-size: 11px;
            color: var(--text-secondary);
            backdrop-filter: blur(8px);
        }
        .energy-footer-block {
            display: grid;
            gap: 12px;
        }
        .energy-section-label {
            padding-left: 2px;
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .energy-footer-block .stat-row {
            gap: 12px;
        }
        .energy-footer-block .stat-item {
            background: linear-gradient(180deg, color-mix(in srgb, var(--bg-input) 88%, transparent), color-mix(in srgb, var(--bg-primary) 90%, transparent));
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 14px;
        }

        @media (max-width: 980px) {
            .energy-scene {
                min-height: 510px;
            }
            .energy-panel--solar {
                width: 31%;
            }
            .energy-panel--hub {
                width: 33%;
            }
            .energy-bank {
                right: 18%;
            }
        }
        @media (max-width: 720px) {
            .energy-scene {
                min-height: 710px;
                padding: 14px;
            }
            .energy-house {
                width: 82%;
                top: 18%;
            }
            .energy-panel--solar {
                left: 4%;
                top: 4%;
                width: 47%;
                max-width: none;
            }
            .energy-panel--grid {
                right: 4%;
                top: 14%;
                width: 38%;
                max-width: none;
            }
            .energy-panel--home {
                left: 4%;
                top: 56%;
                width: 42%;
                max-width: none;
            }
            .energy-panel--hub {
                left: 4%;
                right: 4%;
                top: 72%;
                width: auto;
                max-width: none;
                transform: none;
            }
            .energy-bank {
                right: 8%;
                top: 58%;
                transform: scale(0.92);
                transform-origin: top right;
            }
            .energy-scene__legend {
                display: none;
            }
        }
        @media (max-width: 560px) {
            .energy-scene {
                min-height: 760px;
            }
            .energy-house {
                width: 90%;
                top: 21%;
            }
            .energy-panel {
                padding: 12px 13px;
            }
            .energy-panel__value {
                font-size: 25px;
            }
            .energy-panel--grid {
                top: 12%;
                width: 40%;
            }
            .energy-panel--home {
                top: 57%;
                width: 44%;
            }
            .energy-bank {
                top: 55%;
                right: 6%;
                gap: 8px;
            }
            .energy-bank__module {
                width: 28px;
                height: 82px;
            }
            .energy-bank__fill {
                height: calc(var(--bank-fill, 0) * 66px);
            }
            .energy-hub__temps {
                grid-template-columns: 1fr;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .energy-flow-path.is-active,
            .energy-bank.is-charging .energy-bank__fill,
            .energy-bank.is-discharging .energy-bank__fill {
                animation: none;
            }
        }

        /* Live Data Display */
        .live-stat {
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding: 8px 0;
        }
        .live-stat .value {
            font-size: 28px;
            font-weight: 700;
            color: var(--accent-blue);
        }
        .live-stat .unit {
            font-size: 14px;
            color: var(--text-secondary);
        }
        .live-stat .label {
            font-size:12px;
            color: var(--text-secondary);
            margin-left: 6px;
        }
        .stat-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        .stat-item {
            flex: 1;
            min-width: 100px;
            padding: 12px;
            background: var(--bg-input);
            border-radius: 8px;
            text-align: center;
            position: relative;
        }
        .stat-item .value {
            font-size: 20px;
            font-weight: 600;
            color: var(--color-terminal-text);
        }
        /* Smaller inline status (e.g. "(discharging)") shown next to main value */
        .stat-item .value .substatus {
            font-size: 0.55em;
            font-weight: 400;
            color: var(--text-secondary);
            margin-left: 6px;
            vertical-align: baseline;
        }
        .stat-item .label {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .stat-item .tile-icon {
            font-size: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 6px auto;
            width: 54px;
            height: 54px;
            border-radius: 6px;
            color: inherit;
            background: rgba(255,255,255,0.02);
            position: relative;
        }
        .tile-icon.tile-icon--glyph {
            background: transparent;
        }
        /* Curtailment badge on solar tile */
        .stat-item.curtailed .tile-icon::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 14px;
            height: 14px;
            background: radial-gradient(circle, #ff6b35 0%, #f0883e 100%);
            border-radius: 50%;
            border: 2px solid rgba(13, 17, 23, 0.95);
            box-shadow: 0 0 8px rgba(255, 107, 53, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.3);
            animation: curtailment-pulse 2s ease-in-out infinite;
        }
        @keyframes curtailment-pulse {
            0%, 100% { 
                transform: scale(1);
                box-shadow: 0 0 8px rgba(255, 107, 53, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.3);
            }
            50% { 
                transform: scale(1.15);
                box-shadow: 0 0 12px rgba(255, 107, 53, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.4);
            }
        }
        /* Border glow effect when curtailed */
        .stat-item.curtailed {
            border: 1px solid rgba(255, 107, 53, 0.4);
            background: linear-gradient(135deg, rgba(13, 17, 23, 0.5), rgba(22, 27, 34, 0.6));
            box-shadow: inset 0 0 12px rgba(255, 107, 53, 0.08), 0 0 16px rgba(255, 107, 53, 0.12);
        }
        /* Thermometer variant: 50% size of default tile icons */
        .tile-icon.thermometer {
            width: 27px;
            height: 27px;
            padding: 2px 0 0 0;
            background: transparent;
        }
        .tile-icon.thermometer .therm-svg { width: 18px; height: 36px; display:block; }
        .therm-fill { transition: height 600ms cubic-bezier(.2,.9,.2,1), y 600ms cubic-bezier(.2,.9,.2,1), fill 300ms ease; }
        /* Battery SVG sizing and charging animation */
        /* Larger battery tile for improved alignment */
        .stat-item.battery-tile { min-width: 180px; padding: 12px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
        svg.tile-icon.battery { width: 36px; height: 52px; padding-top: 0; --battery-fill-current: 0; --battery-fill-target: 0; --battery-fill-duration: 0ms; display:block; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
        .tile-icon.battery .level {
            transform-box: fill-box;
            transform-origin: center bottom;
            transform: scaleY(var(--battery-fill-current));
            transition: transform 600ms cubic-bezier(.2,.9,.2,1), fill 300ms ease;
        }
        svg.tile-icon.battery.charging { box-shadow: none; filter: drop-shadow(0 4px 8px rgba(88,166,255,0.18)); }
        svg.tile-icon.battery.discharging { filter: drop-shadow(0 4px 8px rgba(255,107,107,0.14)); }
        @keyframes batt-pulse { 0% { opacity: 0.95 } 50% { opacity: 1 } 100% { opacity: 0.95 } }
        @keyframes battery-fill-level {
            from { transform: scaleY(var(--battery-fill-current)); }
            to { transform: scaleY(var(--battery-fill-target)); }
        }
        .tile-icon.battery.charging { animation: batt-pulse 1.2s infinite ease-in-out; }
        .tile-icon.battery.is-animating .level { animation: battery-fill-level var(--battery-fill-duration) linear infinite; }
        @media (prefers-reduced-motion: reduce) {
            .tile-icon.battery.charging { animation: none; }
            .tile-icon.battery.is-animating .level {
                animation: none;
                transform: scaleY(var(--battery-fill-current));
            }
        }
        .stat-item.warning .value { color: var(--color-warning); }
        .stat-item.danger .value { color: var(--color-danger); }

        /* Extreme daily forecast tiles (stronger amber tint for visibility) */
        .stat-item.extreme {
            border: 1px solid rgba(255,176,32,0.45);
            background: linear-gradient(180deg, rgba(255,176,32,0.14), rgba(22,27,34,0.60));
            box-shadow: 0 8px 28px rgba(255,176,32,0.12), inset 0 1px 0 rgba(255,255,255,0.02);
        }

        /* Weather days specific layout: override default .stat-item flex for day tiles */
        .weather-days {
            display:flex;
            gap:6px;
            flex-wrap:wrap;
            margin-top:10px;
        }
        .weather-days .stat-item {
            box-sizing: border-box;
            /* Allow forecast tiles to grow slightly so the last row doesn't leave
               a large empty gap when there are many items. Also restrict maximum
               width so items remain card-like on very wide screens. */
            flex: 1 1 140px;
            max-width: 180px;
            min-width: 0;
            padding: 8px;
            text-align: left;
            position: relative; /* allow icon overlay */
        }

        /* Money bag indicator for very large feed-in prices */
        .money-bag {
            display:inline-block;
            font-size:14px;
            margin-left:6px;
            filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6));
            line-height:1;
        }
        @media (max-width: 600px) {
            .weather-days .stat-item { flex: 0 0 120px; }
        }

        /* Price Colors */
        .price-low { color: #7ee787 !important; }
        .price-mid { color: #d29922 !important; }
        .price-high { color: #f85149 !important; }
        .price-neutral { color: #8b949e !important; }
        .price-darkgreen { color: #238636 !important; }

        .pricing-current-metrics {
            display: grid;
            grid-template-columns: repeat(var(--pricing-current-metric-columns, 2), minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 12px;
            align-items: start;
        }
        .pricing-current-metric {
            min-width: 0;
        }
        .pricing-current-metric__label {
            font-size: 11px;
            line-height: 1.35;
            color: var(--text-secondary);
        }
        .pricing-current-metric__value {
            margin-top: 4px;
            font-size: 28px;
            line-height: 1.05;
            font-weight: 700;
            letter-spacing: -0.02em;
            white-space: nowrap;
        }
        .pricing-current-metric__value--market {
            font-size: 24px;
        }
        .pricing-current-metric--demand .pricing-current-metric__value {
            color: var(--accent-blue);
        }
        .pricing-current-metric--generation .pricing-current-metric__value {
            color: var(--color-success);
        }
        @media (max-width: 760px) {
            .pricing-current-metrics {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .pricing-current-metric__value {
                font-size: 24px;
            }
            .pricing-current-metric__value--market {
                font-size: 20px;
            }
        }
        @media (max-width: 430px) {
            .pricing-current-metrics {
                gap: 10px 8px;
            }
            .pricing-current-metric__label {
                font-size: 10px;
            }
            .pricing-current-metric__value {
                font-size: 20px;
            }
            .pricing-current-metric__value--market {
                font-size: 17px;
            }
        }

        /* Feed-in highlight for very large export prices (bright green tile) */
        .stat-item.feedin-highlight {
            background: linear-gradient(180deg, #e6ffef, #bff6d4);
            border: 1px solid rgba(34,139,34,0.35);
            box-shadow: 0 8px 20px rgba(34,139,34,0.06);
            color: #053012;
        }
        .stat-item.feedin-highlight .value { color: #053012 !important; }

        .pricing-current-overview {
            margin-bottom: 8px;
        }
        .pricing-current-overview--market {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
            gap: 12px;
            align-items: start;
        }
        .pricing-current-metrics {
            display: grid;
            grid-template-columns: repeat(var(--pricing-current-metric-count, 1), minmax(0, 1fr));
            gap: 8px;
            align-items: start;
            min-width: 0;
        }
        .pricing-market-bars {
            display: grid;
            gap: 4px;
            min-width: 0;
            align-self: center;
        }
        .pricing-market-bar {
            display: grid;
            grid-template-columns: 84px minmax(0, 1fr) 76px;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .pricing-market-bar__label {
            font-size: 10px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            line-height: 1;
            white-space: nowrap;
            text-align: left;
        }
        .pricing-market-bar__value {
            font-size: 15px;
            font-weight: 700;
            white-space: nowrap;
            line-height: 1;
            color: #58a6ff;
            text-align: right;
        }
        .pricing-market-bar__track {
            position: relative;
            width: 100%;
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--border-primary) 88%, transparent);
            background: color-mix(in srgb, var(--bg-primary) 72%, var(--bg-input));
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
        }
        .pricing-market-bar__fill {
            display: block;
            height: 100%;
            min-width: 12px;
            border-radius: inherit;
        }
        .pricing-market-bar--demand .pricing-market-bar__value,
        .pricing-market-bar--generation .pricing-market-bar__value {
            color: #58a6ff;
        }
        .pricing-market-bar--demand .pricing-market-bar__fill {
            background: linear-gradient(90deg, rgba(56, 139, 253, 0.9), rgba(88, 166, 255, 0.95));
            box-shadow: 0 0 18px rgba(56, 139, 253, 0.22);
        }
        .pricing-market-bar--generation .pricing-market-bar__fill {
            background: linear-gradient(90deg, rgba(56, 139, 253, 0.9), rgba(88, 166, 255, 0.95));
            box-shadow: 0 0 18px rgba(56, 139, 253, 0.22);
        }
        @container pricing-card (max-width: 560px) {
            #amberCard .pricing-current-overview--market .pricing-current-metrics {
                grid-template-columns: 1fr;
                gap: 6px;
            }
            #amberCard .pricing-current-overview--market .pricing-current-metric__value {
                font-size: 24px;
            }
        }
        @container pricing-card (max-width: 360px) {
            #amberCard .pricing-current-overview--market {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            #amberCard .pricing-market-bars {
                gap: 4px;
                align-self: stretch;
            }
            #amberCard .pricing-market-bar__value {
                font-size: 14px;
            }
            #amberCard .pricing-market-bar__track {
                height: 7px;
            }
        }
        @media (max-width: 760px) {
            .pricing-current-overview--market {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            .pricing-market-bars {
                gap: 4px;
                align-self: stretch;
            }
            .pricing-market-bar__value {
                font-size: 14px;
            }
            .pricing-market-bar__track {
                height: 7px;
            }
        }
        @media (max-width: 430px) {
            .pricing-current-metrics {
                grid-template-columns: 1fr;
            }
            #amberCard .pricing-current-overview--market .pricing-current-metrics[data-pricing-metric-count="2"] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .pricing-current-metrics[data-pricing-metric-count="2"] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .pricing-current-metrics[data-pricing-metric-count="3"] {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px 6px;
            }
            .pricing-current-metrics[data-pricing-metric-count="3"] .pricing-current-metric__label {
                font-size: 9px;
                line-height: 1.25;
            }
            .pricing-current-metrics[data-pricing-metric-count="3"] .pricing-current-metric__value {
                font-size: 18px;
            }
            .pricing-market-bar {
                grid-template-columns: 72px minmax(0, 1fr) 68px;
                gap: 6px;
            }
            .pricing-market-bar__value {
                font-size: 13px;
            }
        }

        /* Button Grid */
        .btn-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }
        .btn-grid .btn {
            margin-bottom: 0;
        }

        /* Right Panel */
        .right-panel {
            width: 480px;
            min-width: 380px;
            max-width: 600px;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border-primary);
            display: flex;
            flex-direction: column;
            transition: width 0.3s ease, min-width 0.3s ease;
            position: relative;
            flex-shrink: 0;
        }
        /* Left panel split: main content + automation panel */
        .left-panel {
            display: flex;
            gap: 16px;
            /* Stretch children so the automation panel can fill available height
               and its internal scrollbar becomes reachable when content is long. */
            align-items: stretch;
        }
        .main-content {
            flex: 1 1 0;
            min-width: 320px;
        }
        .automation-panel {
            width: 520px;
            min-width: 280px;
            max-width: 900px;
            transition: width 0.12s ease;
            display: flex;
            flex-direction: column;
            gap: 12px;
            /* Fixed height panel that doesn't scroll itself; children scroll */
            position: -webkit-sticky;
            position: sticky;
            top: 80px;
            /* Increase the available vertical space by 55% (was 44%, now +11% more) */
            height: calc((100dvh - 100px) * 1.55);
            overflow: hidden; /* panel itself doesn't scroll */
            padding-bottom: 12px;
        }
        .automation-panel.collapsed {
            width: 0 !important;
            min-width: 0 !important;
            overflow: hidden;
            transform: translateX(100%);
        }
        /* Make the Active Automation card expand to fill available space and scroll internally */
        .automation-panel > .card:first-child {
            flex: 1 1 auto;
            min-height: 500px; /* Increased from default to make it taller */
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .automation-panel > .card:first-child > .card-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding-right: 6px;
        }
        /* Keep the FAQ card at fixed small size */
        .automation-panel > .card.faq-card {
            flex: 0 0 auto;
            margin-top: 56px; /* Increased from 32px to push FAQ further down */
        }

        /* FAQ card in automation panel - small default size and scrollable content */
        .automation-panel .faq-card {
            /* Reduced height to make FAQ card smaller */
            max-height: 480px; /* reduced from 728px */
            min-height: 200px; /* reduced from 280px */
            overflow: hidden; /* prevent the FAQ card from expanding the automation panel */
        }
        .automation-panel .faq-card .card-body {
            /* Allow only the inner FAQ area to scroll — height adjusted to match
               the smaller FAQ card container so content inside has more room */
            max-height: calc(480px - 50px); /* account for header height */
            overflow-y: auto;
            padding-right: 6px;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        /* Force Manual Scheduler into row 2 and span full width */
        .manual-scheduler-card {
            grid-column: 1 / -1 !important; /* take whole row */
            grid-row: 2; /* ensure it is placed on the second row */
        }
        .automation-toggle-btn {
            position: fixed;
            right: 0;
            top: calc(50% + 140px);
            margin: 0;
            width: 56px;
            height: 100px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 1px solid rgba(255,255,255,0.15);
            border-left: none;
            border-radius: 16px 0 0 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            font-size: 16px;
            transition: right 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
            z-index: 10001;
            box-shadow: 0 10px 40px rgba(102,126,234,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        @media (max-height: 900px) {
            .automation-toggle-btn { top: calc(50% + 100px); }
        }
        @media (max-height: 700px) {
            .automation-toggle-btn { top: calc(50% + 50px); }
        }
        @media (max-width: 900px) {
            .main-layout {
                display: block;
                height: auto;
            }
            .left-panel {
                display: block;
                padding: 12px;
            }
            .main-content {
                min-width: 0;
                padding-bottom: calc(132px + env(safe-area-inset-bottom));
            }
            .automation-panel {
                width: min(92vw, 460px);
                min-width: 0;
                max-width: 92vw;
                position: fixed;
                top: 118px;
                right: 0;
                height: calc(100dvh - 130px);
                max-height: calc(100dvh - 130px);
                background: var(--bg-secondary);
                border-left: 1px solid var(--border-primary);
                box-shadow: -16px 0 36px var(--shadow-lg);
                z-index: 10001;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                transform: translateX(0);
                transition: transform 0.2s ease;
            }
            .automation-panel > .card:first-child {
                flex: 0 0 auto;
                min-height: 0;
                overflow: visible;
            }
            .automation-panel > .card:first-child > .card-body {
                max-height: none;
                overflow-y: visible;
            }
            .automation-panel > .card.faq-card {
                margin-top: 0;
            }
            .automation-panel .faq-card {
                max-height: none;
                overflow: visible;
            }
            .automation-panel .faq-card .card-body {
                max-height: none;
                overflow-y: visible;
            }
            .right-panel {
                display: none !important;
            }
            .toggle-panel {
                display: none !important;
            }
            .panel-resizer {
                display: none !important;
            }
            .automation-toggle-btn {
                display: flex !important;
                position: fixed;
                right: 0;
                top: 52%;
                transform: translateY(-50%);
                margin: 0;
                width: 52px;
                height: 88px;
                border-radius: 14px 0 0 14px;
                z-index: 10002;
            }
            .automation-panel.collapsed {
                transform: translateX(100%);
            }
            .automation-toggle-btn:hover,
            .automation-toggle-btn {
                transform: translateY(-50%);
            }
        }
        .automation-toggle-btn:hover { transform: translateY(-8px); box-shadow: 0 16px 52px rgba(102,126,234,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
        .automation-toggle-btn:active { transform: translateY(-2px); }

        /* Inline icon & arrow inside the toggle */
        .automation-toggle-btn .automation-toggle-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .automation-toggle-btn .automation-toggle-icon svg { width:28px; height:28px; display:block; }
        .automation-toggle-btn .automation-toggle-arrow { font-size:20px; margin-left:6px; color: rgba(255,255,255,0.9); font-weight: 600; }
        .automation-toggle-btn:hover .automation-toggle-arrow { color: #fff; }
        .panel-resizer {
            width: 20px; /* larger hit area */
            cursor: col-resize;
            touch-action: none; /* allow pointer events to control dragging */
            background: transparent;
            transition: background 0.12s ease;
            align-self: stretch;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999; /* make sure it's on top */
            pointer-events: auto;
        }
        .panel-resizer:hover { background: rgba(88,166,255,0.06); }
        .panel-resizer::before {
            content: '';
            width: 2px;
            height: 48%;
            background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
            border-radius: 3px;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.01) inset;
            opacity: 0.9;
        }
        .right-panel.collapsed {
            width: 0;
            min-width: 0;
            border-left: none;
            overflow: hidden;
        }
        .right-panel.collapsed .result-container {
            display: none;
        }
        .toggle-panel {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 72px;
            background: var(--bg-card);
            border: 1px solid var(--border-primary);
            border-right: none;
            border-radius: 8px 0 0 8px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: right 0.3s ease;
            z-index: 1000;
        }
        .toggle-panel:hover {
            background: var(--border-primary);
            color: var(--text-primary);
        }
        .result-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }
        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 18px;
            background: var(--bg-overlay);
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 40%, transparent);
        }
        .result-header h2 {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .header-btns {
            display: flex;
            gap: 8px;
        }
        .header-btns button {
            padding: 6px 12px;
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .copy-btn {
            background: var(--accent-blue-bg);
            color: var(--accent-blue);
        }
        .copy-btn:hover {
            background: color-mix(in srgb, var(--accent-blue) 20%, transparent);
        }
        .clear-btn {
            background: color-mix(in srgb, var(--color-danger) 10%, transparent);
            color: var(--color-danger);
        }
        .clear-btn:hover {
            background: color-mix(in srgb, var(--color-danger) 20%, transparent);
        }
        .status-bar {
            display: flex;
            justify-content: space-between;
            padding: 8px 18px;
            background: var(--bg-overlay);
            font-size: 11px;
            border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 20%, transparent);
        }
        .status-bar .endpoint { color: var(--accent-blue); }
        .status-bar .time { color: var(--text-secondary); }
        .result-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px 18px;
        }
        #result {
            background: var(--bg-terminal);
            border-radius: 8px;
            padding: 14px;
            font-family: 'SF Mono', 'Consolas', monospace;
            font-size: 12px;
            line-height: 1.5;
            white-space: pre-wrap;
            word-wrap: break-word;
            min-height: 100%;
            color: var(--text-secondary);
        }
        .success { color: var(--color-success); }
        .error { color: var(--color-danger); }

        /* Resize Handle */
        .resize-handle {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            cursor: ew-resize;
            background: transparent;
        }
        .resize-handle:hover {
            background: color-mix(in srgb, var(--accent-blue) 30%, transparent);
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-overlay);
        }
        ::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--accent-blue) 30%, transparent);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: color-mix(in srgb, var(--accent-blue) 50%, transparent);
        }

        /* Settings Forms */
        .settings-form {
            background: var(--bg-input);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 12px;
            border: 1px solid var(--border-secondary);
            transition: all 0.2s ease;
        }
        .settings-form:hover {
            border-color: var(--border-primary);
        }
        .settings-form .form-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-secondary);
        }
        .settings-form .form-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .settings-form .endpoint-tag {
            font-size: 10px;
            color: var(--text-secondary);
            background: var(--bg-overlay);
            padding: 3px 8px;
            border-radius: 4px;
            font-family: 'SF Mono', monospace;
        }
        .settings-form .form-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .settings-form .form-group {
            flex: 1;
        }
        .settings-form .form-group.sm {
            flex: 0 0 70px;
        }
        .settings-form .form-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid color-mix(in srgb, var(--border-primary) 30%, transparent);
        }
        .settings-form .checkbox-row {
            display: flex;
            gap: 12px;
            margin-bottom: 10px;
        }
        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-overlay);
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
            transition: all 0.2s;
        }
        .checkbox-label:hover {
            background: color-mix(in srgb, var(--bg-overlay) 150%, transparent);
            color: var(--text-primary);
        }
        .checkbox-label input {
            accent-color: var(--accent-blue);
        }
        .time-input {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .time-input input {
            width: 50px;
            text-align: center;
        }
        .time-input .sep {
            color: var(--text-placeholder);
            font-weight: bold;
        }

        /* Section Titles */
        .section-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-secondary);
        }

        /* Automation Rules Styles */
        .automation-section {
            margin-top: 20px;
        }
        .automation-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .automation-header h2 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .automation-header h2 .icon {
            font-size: 22px;
        }
        .automation-status {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .automation-toggle {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 28px;
            padding: 0;
            appearance: none;
            -webkit-appearance: none;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1.5px solid rgba(255, 255, 255, 0.25);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        .automation-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.35);
        }
        .automation-toggle.active {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
            border-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5);
        }
        .automation-toggle.active:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.5);
        }
        .automation-toggle::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.35);
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        .automation-toggle.active::after {
            left: 24px;
            background: var(--accent-blue);
            box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-blue) 40%, transparent);
        }
        .automation-toggle.active::after:hover {
            box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-blue) 60%, transparent);
        }
        .automation-toggle:disabled {
            cursor: wait;
        }
        .automation-toggle.is-pending {
            pointer-events: none;
        }
        .automation-toggle.is-pending::after {
            opacity: 0.4;
        }
        .automation-toggle__spinner {
            --automation-spinner-size: 12px;
            --automation-spinner-ring-width: 1.8px;
            --automation-spinner-track: rgba(255, 255, 255, 0.25);
            --automation-spinner-primary: rgba(255, 255, 255, 0.96);
            --automation-spinner-secondary: #7dd3fc;
            position: relative;
            width: var(--automation-spinner-size);
            height: var(--automation-spinner-size);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.18s ease, transform 0.18s ease;
            z-index: 2;
        }

        .automation-toggle__spinner::before {
            content: "";
            width: calc(var(--automation-spinner-size) * 0.62);
            height: calc(var(--automation-spinner-size) * 0.62);
            border-radius: 50%;
            background-image: url("../icons/icon.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .automation-toggle__spinner::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: var(--automation-spinner-ring-width) solid var(--automation-spinner-track);
            border-top-color: var(--automation-spinner-primary);
            border-right-color: var(--automation-spinner-secondary);
            animation: socrates-spinner-spin 0.85s linear infinite;
            animation-play-state: paused;
        }

        .automation-toggle.is-pending .automation-toggle__spinner {
            opacity: 1;
            transform: scale(1);
        }

        .automation-toggle.is-pending .automation-toggle__spinner::after {
            animation-play-state: running;
        }
        @media (prefers-reduced-motion: reduce) {
            .automation-toggle__spinner::after {
                animation: none;
            }
        }
        .automation-status-text {
            font-size: 12px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .automation-status-text.active {
            color: var(--color-success);
        }
        .rules-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 16px;
        }
        .rule-card {
            background: var(--gradient-card);
            border-radius: 12px;
            border: 1px solid var(--border-secondary);
            overflow: hidden;
            transition: all 0.2s ease;
        }
        .rule-card:hover {
            border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent);
            box-shadow: 0 8px 32px var(--shadow-lg);
        }
        .rule-card.disabled {
            opacity: 0.6;
        }
        .rule-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: var(--bg-overlay);
            border-bottom: 1px solid var(--border-secondary);
        }
        .rule-card-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .rule-card-actions {
            display: flex;
            gap: 6px;
        }
        .rule-card-actions button {
            padding: 4px 8px;
            background: var(--bg-card);
            border: 1px solid var(--border-primary);
            border-radius: 4px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
        }
        .rule-card-actions button:hover {
            background: var(--border-primary);
            color: var(--text-primary);
        }
        .rule-card-actions button.delete:hover {
            background: color-mix(in srgb, var(--color-danger) 20%, transparent);
            border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
            color: var(--color-danger);
        }
        .rule-card-body {
            padding: 14px 16px;
        }
        .rule-conditions, .rule-actions-box {
            margin-bottom: 12px;
        }
        .rule-section-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .condition-tag, .action-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            margin: 3px;
        }
        .condition-tag {
            background: var(--accent-blue-bg);
            border: 1px solid color-mix(in srgb, var(--accent-blue) 20%, transparent);
            color: var(--accent-blue);
        }
        .condition-tag.price { border-color: color-mix(in srgb, var(--color-success) 30%, transparent); color: var(--color-success); }
        .condition-tag.soc { border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); color: var(--color-purple); }
        .condition-tag.temp { border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); color: var(--color-warning); }
        .condition-tag.weather { border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent); color: var(--accent-blue); }
        .action-tag {
            background: color-mix(in srgb, var(--color-success-dark) 15%, transparent);
            border: 1px solid color-mix(in srgb, var(--color-success-dark) 30%, transparent);
            color: var(--color-success);
        }
        .action-tag.charge { background: color-mix(in srgb, var(--accent-blue) 15%, transparent); border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent); color: var(--accent-blue); }
        .action-tag.discharge { background: color-mix(in srgb, var(--color-orange) 15%, transparent); border-color: color-mix(in srgb, var(--color-orange) 30%, transparent); color: var(--color-orange); }
        .action-tag.feedin { background: color-mix(in srgb, var(--color-warning) 15%, transparent); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); color: var(--color-warning); }

        .automation-debug-box {
            margin-top: 12px;
            padding: 12px;
            background: var(--bg-input);
            border: 1px solid var(--border-primary);
            border-radius: 10px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .automation-debug-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .automation-debug-label {
            color: var(--accent-blue);
            font-weight: 600;
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .automation-debug-timestamp {
            color: var(--text-muted);
            font-size: 11px;
            white-space: nowrap;
            background: var(--bg-primary);
            padding: 4px 8px;
            border-radius: 999px;
        }
        .automation-debug-content {
            color: var(--text-primary);
            font-size: 11px;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .automation-debug-empty {
            color: var(--text-muted);
            font-size: 10px;
        }
        .automation-cycle-summary {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            padding: 10px 12px;
            border-radius: 10px;
            border: 1px solid var(--border-secondary);
            background: var(--bg-primary);
        }
        .automation-cycle-summary--success {
            border-color: color-mix(in srgb, var(--color-success) 45%, var(--border-secondary));
            background: color-mix(in srgb, var(--color-success) 10%, var(--bg-primary));
        }
        .automation-cycle-summary--info {
            border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border-secondary));
            background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-primary));
        }
        .automation-cycle-summary--warning {
            border-color: color-mix(in srgb, var(--color-orange) 45%, var(--border-secondary));
            background: color-mix(in srgb, var(--color-orange) 10%, var(--bg-primary));
        }
        .automation-cycle-summary--danger {
            border-color: color-mix(in srgb, var(--color-danger) 45%, var(--border-secondary));
            background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-primary));
        }
        .automation-cycle-summary-copy {
            min-width: 0;
            flex: 1 1 220px;
        }
        .automation-cycle-summary-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.4;
        }
        .automation-cycle-summary-meta {
            margin-top: 4px;
            font-size: 10px;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .automation-cycle-summary-pill {
            padding: 4px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--bg-overlay) 82%, transparent);
            border: 1px solid var(--border-primary);
            color: var(--text-secondary);
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
        }
        .automation-cycle-alert {
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid var(--color-danger);
            background: rgba(248, 81, 73, 0.12);
            color: var(--color-danger);
            font-size: 10px;
            line-height: 1.5;
        }
        .automation-cycle-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 8px;
            align-items: stretch;
        }
        .automation-cycle-card {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid var(--border-secondary);
            background: var(--bg-primary);
        }
        .automation-cycle-card--success {
            border-color: color-mix(in srgb, var(--color-success) 40%, var(--border-secondary));
            background: color-mix(in srgb, var(--color-success) 8%, var(--bg-primary));
        }
        .automation-cycle-card--info {
            border-color: color-mix(in srgb, var(--accent-blue) 40%, var(--border-secondary));
            background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-primary));
        }
        .automation-cycle-card--warning {
            border-color: color-mix(in srgb, var(--color-orange) 40%, var(--border-secondary));
            background: color-mix(in srgb, var(--color-orange) 8%, var(--bg-primary));
        }
        .automation-cycle-card--danger {
            border-color: color-mix(in srgb, var(--color-danger) 40%, var(--border-secondary));
            background: color-mix(in srgb, var(--color-danger) 8%, var(--bg-primary));
        }
        .automation-cycle-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap;
        }
        .automation-cycle-card-title {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            min-width: 0;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.4;
        }
        .automation-cycle-card-title-text {
            min-width: 0;
            overflow-wrap: anywhere;
        }
        .automation-cycle-card-state {
            padding: 3px 6px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-overlay) 82%, transparent);
            color: var(--text-secondary);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .automation-cycle-facts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 6px;
        }
        .automation-cycle-fact {
            min-width: 0;
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid var(--border-primary);
            background: color-mix(in srgb, var(--bg-overlay) 75%, transparent);
        }
        .automation-cycle-fact--ok {
            border-color: color-mix(in srgb, var(--color-success) 30%, var(--border-primary));
        }
        .automation-cycle-fact--miss {
            border-color: color-mix(in srgb, var(--color-danger) 32%, var(--border-primary));
            background: color-mix(in srgb, var(--color-danger) 8%, var(--bg-primary));
        }
        .automation-cycle-fact-name {
            display: block;
            font-size: 9px;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .automation-cycle-fact-value {
            display: block;
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-primary);
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .automation-cycle-card-note {
            font-size: 10px;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .automation-cycle-footer {
            font-size: 10px;
            color: var(--text-muted);
        }
        
        /* Rule Builder Modal */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            z-index: 11000;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.show {
            display: flex;
        }
        .modal-content {
            background: var(--gradient-card);
            border: 1px solid var(--border-primary);
            border-radius: 16px;
            width: 90%;
            max-width: 840px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px var(--shadow-lg);
        }
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 24px;
            border-bottom: 1px solid var(--border-secondary);
            background: var(--bg-overlay);
        }
        .modal-header h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: color-mix(in srgb, var(--border-primary) 60%, transparent);
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .modal-close:hover {
            background: color-mix(in srgb, var(--color-danger) 20%, transparent);
            color: var(--color-danger);
        }
        .modal-body {
            padding: 24px;
        }
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 24px;
            border-top: 1px solid var(--border-secondary);
            background: var(--bg-overlay);
        }
        .form-section {
            margin-bottom: 24px;
        }
        .form-section-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .form-section-title .icon {
            font-size: 16px;
        }
        .condition-builder {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        @media (max-width: 600px) {
            .condition-builder {
                grid-template-columns: 1fr;
            }
        }
        .condition-item {
            background: var(--bg-input);
            border: 1px solid var(--border-secondary);
            border-radius: 10px;
            padding: 14px;
            transition: all 0.2s ease;
        }
        .condition-item:hover {
            border-color: color-mix(in srgb, var(--accent-blue) 30%, transparent);
        }
        .condition-item.active {
            border-color: color-mix(in srgb, var(--accent-blue) 50%, transparent);
            background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
        }
        .condition-item-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .condition-item-header input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--accent-blue);
        }
        .condition-item-header label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
        }
        .condition-item-header .icon {
            font-size: 16px;
        }
        .condition-fields {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-left: 28px;
        }
        .condition-field {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .condition-field label {
            font-size: 11px;
            color: var(--text-secondary);
            min-width: 60px;
        }
        .condition-field select,
        .condition-field input {
            flex: 1;
            padding: 6px 10px;
            background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 12px;
        }
        .condition-field select:focus,
        .condition-field input:focus {
            outline: none;
            border-color: var(--accent-blue);
        }
        .action-builder {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .action-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg-input);
            border: 1px solid var(--border-secondary);
            border-radius: 8px;
        }
        .action-item label {
            font-size: 13px;
            color: var(--text-secondary);
            min-width: 100px;
        }
        .action-item select,
        .action-item input {
            flex: 1;
            padding: 8px 12px;
            background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 13px;
        }
        .add-rule-card {
            background: color-mix(in srgb, var(--bg-card) 50%, transparent);
            border: 2px dashed var(--border-primary);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 180px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .add-rule-card:hover {
            border-color: color-mix(in srgb, var(--accent-blue) 40%, transparent);
            background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
        }
        .add-rule-card .icon {
            font-size: 36px;
            color: var(--accent-blue);
            margin-bottom: 10px;
        }
        .add-rule-card span {
            font-size: 14px;
            color: var(--text-secondary);
        }
        .empty-rules {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }
        .empty-rules .icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        .empty-rules p {
            font-size: 14px;
            margin-bottom: 8px;
        }
        .empty-rules .hint {
            font-size: 12px;
            color: var(--text-muted);
        }
        
        /* FAQ Section */
        .faq-section { margin-top: 16px; }
        .faq-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            margin-bottom: 6px;
            overflow: hidden;
        }
        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            cursor: pointer;
            font-weight: 500;
            font-size: 12px;
            color: var(--text-primary);
            transition: background 0.2s;
        }
        .faq-question:hover { background: var(--bg-tertiary); }
        .faq-question .icon {
            transition: transform 0.2s;
            font-size: 10px;
            color: var(--text-secondary);
        }
        .faq-item.open .faq-question .icon { transform: rotate(180deg); }
        .faq-answer {
            display: none;
            padding: 0 12px 12px;
            font-size: 11px;
            line-height: 1.5;
            color: var(--text-secondary);
        }
        .faq-item.open .faq-answer { display: block; }
        .faq-answer code {
            background: var(--bg-terminal);
            padding: 1px 4px;
            border-radius: 3px;
            font-family: 'Consolas', monospace;
            color: var(--accent-blue);
            font-size: 10px;
        }
        .faq-answer ul { margin: 6px 0; padding-left: 16px; }
        .faq-answer li { margin-bottom: 4px; }
        .faq-highlight {
            background: var(--color-success-bg);
            padding: 8px;
            border-radius: 4px;
            margin: 8px 0;
            border-left: 2px solid var(--color-success);
            font-size: 10px;
        }
        
        /* Tooltip styles for action field info */
        .field-label-with-tooltip {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .tooltip-icon {
            position: relative;
            width: 14px;
            height: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: help;
            color: var(--accent-blue);
            font-size: 11px;
            font-weight: bold;
            border-radius: 50%;
            border: 1px solid var(--accent-blue);
            margin-left: 2px;
        }

        /* Fallback tooltip (CSS-only) */
        .tooltip-icon:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-terminal);
            color: var(--text-primary);
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid var(--border-primary);
            white-space: normal;
            max-width: min(280px, calc(100vw - 24px));
            line-height: 1.35;
            overflow-wrap: anywhere;
            font-size: 11px;
            font-weight: normal;
            z-index: 10000;
            box-shadow: 0 2px 8px var(--shadow-lg);
        }
        .tooltip-icon:hover::before {
            content: '';
            position: absolute;
            bottom: 118%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: var(--bg-terminal);
            z-index: 10000;
        }

        /* JS-enhanced tooltip (viewport-aware) */
        .tooltip-popover {
            position: fixed;
            left: -9999px;
            top: -9999px;
            background: var(--bg-terminal);
            color: var(--text-primary);
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid var(--border-primary);
            font-size: 11px;
            font-weight: normal;
            line-height: 1.35;
            white-space: normal;
            overflow-wrap: anywhere;
            box-shadow: 0 2px 8px var(--shadow-lg);
            pointer-events: none;
            z-index: 12050;
            opacity: 0;
            transform: translateY(2px);
            transition: opacity 120ms ease, transform 120ms ease;
        }
        .tooltip-popover.show {
            opacity: 1;
            transform: translateY(0);
        }
        .tooltip-popover[data-placement="top"]::after,
        .tooltip-popover[data-placement="bottom"]::after {
            content: '';
            position: absolute;
            left: var(--tooltip-arrow-left, 50%);
            transform: translateX(-50%);
            border: 5px solid transparent;
        }
        .tooltip-popover[data-placement="top"]::after {
            top: 100%;
            border-top-color: var(--bg-terminal);
        }
        .tooltip-popover[data-placement="bottom"]::after {
            bottom: 100%;
            border-bottom-color: var(--bg-terminal);
        }

        /* Disable CSS-only hover tooltip when JS popover is active */
        body.tooltip-js .tooltip-icon:hover::after,
        body.tooltip-js .tooltip-icon:hover::before {
            content: none;
            display: none;
        }

        /* Small inline weather map */
        .weather-map {
            width: 100%;
            min-height: 120px;
            height: 120px !important;
            border-radius: 6px;
            margin-top: 12px;
            overflow: hidden;
            background: var(--bg-secondary) !important;
            border: 1px solid var(--border-secondary) !important;
            position: relative;
        }
        .weather-card-layout {
            display: grid;
            gap: 12px;
        }
        .weather-card-summary,
        .weather-card-forecast {
            min-width: 0;
        }
        .weather-card-layout--has-map {
            grid-template-columns: minmax(0, 1fr) clamp(132px, 22vw, 180px);
            grid-template-areas:
                "summary map"
                "details details"
                "forecast forecast";
            align-items: start;
        }
        .weather-card-layout--has-map .weather-card-summary {
            grid-area: summary;
        }
        .weather-card-layout--has-map .weather-card-forecast {
            grid-area: forecast;
        }
        .weather-card-layout--has-map .weather-card-details-row {
            grid-area: details;
            margin-top: -4px;
        }
        .weather-card-layout--has-map .weather-map--inline {
            grid-area: map;
            min-height: 112px;
            height: 112px !important;
            margin-top: 0;
        }
        .weather-card-details-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            margin-top: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow-x: auto;
            padding-bottom: 2px;
        }
        .weather-card-details-row strong {
            color: var(--text-primary);
        }
        .weather-card-details-sep {
            color: var(--text-muted);
            flex: 0 0 auto;
        }
        @media (max-width: 720px) {
            .weather-card-layout--has-map {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "summary"
                    "map"
                    "details"
                    "forecast";
            }
            .weather-card-layout--has-map .weather-map--inline {
                min-height: 120px;
                height: 120px !important;
            }
        }
        /* Simple modal for Amber history date selection */
        .modal-backdrop { position: fixed; inset: 0; background: rgba(3,6,9,0.6); display:none; align-items:center; justify-content:center; z-index:1200 }
        .modal-backdrop.show { display:flex }
        .modal { background: var(--bg-terminal); border:1px solid var(--border-secondary); padding:16px; border-radius:8px; width:360px; max-width:92%; box-shadow:0 10px 30px var(--shadow-lg) }
        .modal h3 { margin:0 0 8px 0; font-size:16px }
        .modal .row { display:flex; gap:8px; align-items:center; margin-bottom:8px }
        .modal .row input[data-date-input] { flex:1; padding:8px; background:transparent; border:1px solid var(--border-secondary); color:var(--text-primary) }
        .modal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px }
        .leaflet-container {
            min-height: 120px !important;
            background: var(--bg-secondary) !important;
        }
        /* Force tile images visible if leaflet.css is missing or some rules hide them */
        .leaflet-tile, .leaflet-tile-loaded { opacity: 1 !important; visibility: visible !important; filter: none !important; }
        /* Ensure tiles are stacked above any card overlays */
        .weather-map .leaflet-map-pane, .weather-map .leaflet-tile-pane { z-index: 1 !important; position: relative !important; }
        .weather-map .leaflet-overlay-pane, .weather-map .leaflet-shadow-pane { z-index: 2 !important; }
        /* Make Leaflet tiles blend with dark UI when tiles fail to load quickly */
        .leaflet-container { background: var(--bg-primary); }

        /* ── Light-theme overrides ── */
        [data-theme="light"] #inverterCard {
            background:
                radial-gradient(circle at top left, rgba(150, 203, 255, 0.18), transparent 32%),
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244, 248, 252, 0.97));
            border: 1px solid rgba(196, 210, 224, 0.92);
            border-radius: 20px;
            padding: 14px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 20px 38px rgba(57, 84, 110, 0.10);
            --battery-shell-color: rgba(87, 96, 106, 0.62);
            --battery-shell-bg: rgba(87, 96, 106, 0.12);
            --energy-panel-surface: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,248,250,0.94));
            --energy-cyan: #0e6b96;
            --energy-solar: #b07a17;
            --energy-home: #238257;
            --energy-grid-import: #b57418;
            --energy-grid-export: #238257;
            --energy-battery-charge: #238257;
            --energy-battery-discharge: #d04c3d;
        }
        [data-theme="light"] #inverterCard .energy-scene {
            background-color: #eef5ff;
            border-color: #d0d7de;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 32px rgba(27,31,36,0.10);
        }
        [data-theme="light"] #inverterCard .energy-scene::before {
            opacity: 0.34;
        }
        [data-theme="light"] #inverterCard .energy-scene__ground {
            background:
                radial-gradient(circle at 50% 0%, rgba(9, 105, 218, 0.07), transparent 55%),
                linear-gradient(180deg, rgba(219, 229, 240, 0) 0%, rgba(215, 226, 238, 0.88) 40%, rgba(232, 239, 246, 1) 100%);
        }
        [data-theme="light"] #inverterCard .energy-flow-track {
            stroke: rgba(31, 35, 40, 0.08);
        }
        [data-theme="light"] #inverterCard .energy-house__roof {
            background: linear-gradient(180deg, rgba(216, 225, 234, 0.96), rgba(201, 214, 227, 0.96));
            border-color: rgba(12, 125, 176, 0.16);
        }
        [data-theme="light"] #inverterCard .energy-house__roof-panels {
            background:
                repeating-linear-gradient(90deg, rgba(12, 125, 176, 0.12) 0 2px, transparent 2px 30px),
                repeating-linear-gradient(180deg, rgba(12, 125, 176, 0.07) 0 2px, transparent 2px 18px),
                linear-gradient(180deg, rgba(209, 226, 240, 0.94), rgba(192, 212, 228, 0.96));
            border-color: rgba(12, 125, 176, 0.2);
        }
        [data-theme="light"] #inverterCard .energy-house__body,
        [data-theme="light"] #inverterCard .energy-house__garage,
        [data-theme="light"] #inverterCard .energy-house__door {
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(229, 236, 243, 0.98));
            border-color: rgba(208, 215, 222, 0.95);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 24px rgba(27,31,36,0.08);
        }
        [data-theme="light"] #inverterCard .energy-house__window {
            background: linear-gradient(180deg, rgba(255, 227, 177, 0.95), rgba(255, 196, 124, 0.74));
            border-color: rgba(255, 196, 124, 0.34);
            box-shadow: 0 0 16px rgba(255, 196, 124, 0.16);
        }
        [data-theme="light"] #inverterCard .energy-panel {
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.85),
                0 10px 24px rgba(27,31,36,0.08),
                inset 0 0 18px color-mix(in srgb, var(--panel-accent) 9%, transparent);
        }
        [data-theme="light"] #inverterCard .energy-panel__label {
            color: #1f2328;
        }
        [data-theme="light"] #inverterCard .energy-panel__meta,
        [data-theme="light"] #inverterCard .energy-panel__subvalue,
        [data-theme="light"] #inverterCard .energy-hub__power,
        [data-theme="light"] #inverterCard .energy-hub__temp-label,
        [data-theme="light"] #inverterCard .energy-section-label,
        [data-theme="light"] #inverterCard .energy-scene__legend {
            color: #57606a;
        }
        [data-theme="light"] #inverterCard .energy-hub__temp {
            background: rgba(255,255,255,0.72);
            border-color: rgba(208,215,222,0.92);
        }
        [data-theme="light"] #inverterCard .energy-bank__module {
            background: linear-gradient(180deg, rgba(240, 245, 250, 0.96), rgba(221, 229, 238, 0.98));
            border-color: rgba(87, 96, 106, 0.24);
            box-shadow: 0 10px 20px rgba(27,31,36,0.08);
        }
        [data-theme="light"] #inverterCard .energy-footer-block .stat-item {
            background: #ffffff;
            border-color: #d0d7de;
            box-shadow: 0 1px 2px rgba(27,31,36,0.06);
        }
        [data-theme="light"] #inverterCard .stat-item {
            background: #ffffff;
            border: 1px solid #d0d7de;
            box-shadow: 0 1px 2px rgba(27, 31, 36, 0.06);
        }
        /* Reference-image based inverter scene refinements */
        #inverterCard .energy-topology {
            gap: 12px;
        }
        #inverterCard .energy-scene {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            align-self: start;
            width: 100%;
            min-height: 0;
            aspect-ratio: 4 / 3;
            padding: 0;
            background-color: #252528;
            background-image: url('/images/house-3d-iso.png');
            /* Tie house art directly to scene bounds so zoom/responsive changes scale both image and tiles together. */
            background-size: 100% 100%;
            background-position: center center;
            background-repeat: no-repeat;
            border: 1px solid rgba(88, 166, 255, 0.26);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 36px rgba(0,0,0,0.22);
        }
        /* Night sky overlay (default) */
        #inverterCard .energy-scene::before {
            opacity: 1;
            background:
                linear-gradient(180deg,
                    rgba(3, 9, 24, calc(var(--scene-night-top-opacity, 0.58) + 0.14)) 0%,
                    rgba(4, 11, 24, calc(var(--scene-night-top-opacity, 0.58) * 0.58)) 24%,
                    rgba(4, 9, 18, 0.10) 52%,
                    rgba(0, 0, 0, calc(var(--scene-night-bottom-opacity, 0.10) + 0.12)) 100%
                ),
                radial-gradient(circle at var(--scene-light-x, 82%) 10%, rgba(168, 194, 242, calc(var(--scene-night-glow-opacity, 0.08) * 1.08)) 0%, rgba(168, 194, 242, 0) 19%),
                radial-gradient(ellipse at 18% 5%, rgba(12, 28, 72, 0.24), transparent 22%);
        }
        /* Stars in night sky */
        #inverterCard .energy-scene::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 3;
            background:
                linear-gradient(180deg, rgba(1, 5, 14, 0.08) 0%, rgba(0,0,0,0.02) 18%, rgba(0,0,0, calc(var(--scene-night-bottom-opacity, 0.18) + 0.08)) 100%),
                radial-gradient(circle at 50% 100%, rgba(3, 9, 17, 0.34), transparent 44%),
                radial-gradient(circle at 14% 82%, rgba(1, 7, 18, 0.18), transparent 26%),
                radial-gradient(circle at 86% 78%, rgba(1, 7, 18, 0.16), transparent 24%);
        }
        /* Daylight sky — clear blue with warm sun glow */
        #inverterCard .energy-scene.is-daylight::before {
            background:
                linear-gradient(180deg,
                    rgba(90, 172, 255, var(--scene-day-sky-opacity, 0.16)) 0%,
                    rgba(140, 205, 255, calc(var(--scene-day-sky-opacity, 0.16) * 0.55)) 24%,
                    rgba(0, 0, 0, 0) 50%
                ),
                radial-gradient(circle at var(--scene-light-x, 50%) 10%, rgba(255, 215, 90, var(--scene-day-glow-opacity, 0.12)) 0%, rgba(255, 215, 90, 0) 22%),
                radial-gradient(ellipse at 28% 0%, rgba(135, 196, 255, 0.12), transparent 26%);
        }
        /* No stars by day; subtle vignette at bottom */
        #inverterCard .energy-scene.is-daylight::after {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0) 40%, rgba(0,0,0,0.16) 100%),
                radial-gradient(circle at 50% 100%, rgba(3, 9, 17, 0.20), transparent 44%);
        }
        #inverterCard .energy-scene__sky {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }
        #inverterCard .energy-scene__stars {
            position: absolute;
            inset: 0;
            opacity: calc(var(--scene-stars-opacity, 0) * 1.35);
            filter: drop-shadow(0 0 10px rgba(190, 219, 255, 0.22));
            transition: opacity 280ms ease, filter 280ms ease;
        }
        #inverterCard .energy-scene__stars span {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 999px;
            background: rgba(255,255,255,0.96);
            box-shadow: 0 0 10px rgba(196, 221, 255, 0.58), 0 0 18px rgba(196, 221, 255, 0.16);
        }
        #inverterCard .energy-scene__stars span:nth-child(1) { left: 13%; top: 12%; width: 2px; height: 2px; opacity: 0.92; }
        #inverterCard .energy-scene__stars span:nth-child(2) { left: 26%; top: 7%; opacity: 0.68; }
        #inverterCard .energy-scene__stars span:nth-child(3) { left: 41%; top: 14%; width: 2px; height: 2px; opacity: 0.82; }
        #inverterCard .energy-scene__stars span:nth-child(4) { left: 58%; top: 9%; opacity: 0.62; }
        #inverterCard .energy-scene__stars span:nth-child(5) { left: 72%; top: 15%; width: 2px; height: 2px; opacity: 0.88; }
        #inverterCard .energy-scene__stars span:nth-child(6) { left: 83%; top: 8%; opacity: 0.72; }
        #inverterCard .energy-scene__stars span:nth-child(7) { left: 91%; top: 18%; width: 2px; height: 2px; opacity: 0.56; }
        #inverterCard .energy-scene__orb {
            position: absolute;
            left: var(--scene-orb-x, 72%);
            top: var(--scene-orb-y, 18%);
            width: var(--scene-orb-size, 42px);
            height: var(--scene-orb-size, 42px);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            opacity: var(--scene-orb-opacity, 0.96);
            background: var(--scene-orb-core, radial-gradient(circle at 35% 35%, rgba(255, 249, 221, 1) 0%, rgba(255, 221, 116, 0.98) 40%, rgba(255, 179, 63, 0.92) 72%, rgba(255, 179, 63, 0.16) 100%));
            box-shadow: var(--scene-orb-glow, 0 0 22px rgba(255, 220, 107, 0.42), 0 0 54px rgba(255, 181, 63, 0.24));
            filter: blur(var(--scene-orb-blur, 0px));
            z-index: 1;
            transition: left 500ms linear, top 500ms linear, opacity 280ms ease, box-shadow 280ms ease, background 280ms ease, filter 280ms ease;
        }
        #inverterCard .energy-scene__orb::after {
            content: '';
            position: absolute;
            inset: 14% 10% 10% 38%;
            border-radius: 50%;
            background: rgba(5, 11, 20, 0.46);
            opacity: var(--scene-moon-mask-opacity, 0);
            transition: opacity 280ms ease;
        }
        #inverterCard .energy-scene__ground,
        #inverterCard .energy-house,
        #inverterCard .energy-bank,
        #inverterCard .energy-scene__legend {
            display: none;
        }
        #inverterCard .energy-scene__weather-chip {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 10px;
            z-index: 5;
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #9be8ff;
            background: rgba(5, 15, 28, 0.52);
            border: 1px solid rgba(114, 219, 255, 0.20);
            backdrop-filter: blur(8px);
        }
        #inverterCard .energy-scene__weather {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }
        #inverterCard .energy-scene__weather-layer {
            position: absolute;
            inset: -12%;
            opacity: 0;
            transition: opacity 360ms ease;
        }
        #inverterCard .energy-scene__weather-layer--cloud {
            background:
                radial-gradient(circle at 20% 24%, rgba(188, 212, 242, 0.16), transparent 22%),
                radial-gradient(circle at 68% 14%, rgba(188, 212, 242, 0.14), transparent 26%),
                radial-gradient(circle at 82% 26%, rgba(188, 212, 242, 0.12), transparent 20%);
            filter: blur(18px);
            animation: inverter-cloud-drift 28s linear infinite;
        }
        #inverterCard .energy-scene__weather-layer--mist {
            inset: auto -8% -4% -8%;
            height: 42%;
            background:
                radial-gradient(circle at 24% 55%, rgba(200, 216, 236, 0.16), transparent 26%),
                radial-gradient(circle at 72% 48%, rgba(200, 216, 236, 0.14), transparent 24%),
                linear-gradient(180deg, rgba(180, 202, 227, 0), rgba(180, 202, 227, 0.12));
            filter: blur(18px);
        }
        #inverterCard .energy-scene__weather-layer--rain {
            filter: drop-shadow(0 0 14px rgba(201, 225, 255, 0.38));
            --rain-far-duration: 2.5s;
            --rain-near-duration: 1.02s;
            --rain-base-blur: 0.35px;
            --rain-far-opacity: 0.48;
            --rain-near-opacity: 0.28;
            background-image:
                repeating-linear-gradient(102deg, rgba(157, 210, 255, 0) 0 18px, rgba(175, 223, 255, 0.12) 18px 19px, rgba(157, 210, 255, 0) 19px 44px),
                repeating-linear-gradient(103deg, rgba(157, 210, 255, 0) 0 38px, rgba(202, 236, 255, 0.14) 38px 40px, rgba(157, 210, 255, 0) 40px 92px);
            background-size: 210px 210px, 300px 300px;
            filter: blur(var(--rain-base-blur));
            mix-blend-mode: screen;
            will-change: transform, opacity;
            animation: inverter-rainfall var(--rain-base-duration) linear infinite;
        }
        #inverterCard .energy-scene__weather-layer--rain::before,
        #inverterCard .energy-scene__weather-layer--rain::after {
            content: "";
            position: absolute;
            inset: -6%;
            background-repeat: repeat;
            pointer-events: none;
        }
        #inverterCard .energy-scene__weather-layer--rain::before {
            opacity: var(--rain-far-opacity);
            background-image: repeating-linear-gradient(101deg, rgba(157, 210, 255, 0) 0 28px, rgba(190, 228, 255, 0.11) 28px 29px, rgba(157, 210, 255, 0) 29px 62px);
            background-size: 260px 260px;
            filter: blur(0.75px);
            animation: inverter-rainfall-far var(--rain-far-duration) linear infinite;
        }
        #inverterCard .energy-scene__weather-layer--rain::after {
            opacity: var(--rain-near-opacity);
            background-image: repeating-linear-gradient(104deg, rgba(157, 210, 255, 0) 0 23px, rgba(214, 242, 255, 0.22) 23px 25px, rgba(157, 210, 255, 0) 25px 54px);
            background-size: 170px 170px;
            filter: blur(0.18px);
            animation: inverter-rainfall-near var(--rain-near-duration) linear infinite;
        }
        #inverterCard .energy-scene__weather-layer--flash {
            --lightning-duration: 6.8s;
            background:
                radial-gradient(circle at 54% 18%, rgba(225, 244, 255, 0.34), transparent 14%),
                radial-gradient(circle at 60% 34%, rgba(174, 220, 255, 0.18), transparent 28%),
                radial-gradient(circle at 78% 16%, rgba(214, 236, 255, 0.18), transparent 18%),
                linear-gradient(180deg, rgba(196, 228, 255, 0.12), rgba(196, 228, 255, 0) 42%);
            mix-blend-mode: screen;
            will-change: opacity, filter;
        }
        #inverterCard .energy-scene__weather-layer--flash::before,
        #inverterCard .energy-scene__weather-layer--flash::after {
            content: "";
            position: absolute;
            pointer-events: none;
            opacity: 0;
            will-change: opacity, transform, filter;
        }
        #inverterCard .energy-scene__weather-layer--flash::before {
            top: 7%;
            left: 55%;
            width: 15%;
            height: 48%;
            background:
                linear-gradient(166deg, transparent 0 32%, rgba(246, 252, 255, 0.98) 32% 38%, transparent 38% 100%),
                linear-gradient(198deg, transparent 0 42%, rgba(193, 231, 255, 0.92) 42% 48%, transparent 48% 100%),
                linear-gradient(162deg, transparent 0 62%, rgba(240, 250, 255, 0.88) 62% 67%, transparent 67% 100%);
            filter: drop-shadow(0 0 8px rgba(214, 240, 255, 0.95)) drop-shadow(0 0 18px rgba(168, 214, 255, 0.55));
            transform: skewX(-8deg);
        }
        #inverterCard .energy-scene__weather-layer--flash::after {
            top: 20%;
            left: 60%;
            width: 11%;
            height: 24%;
            background:
                linear-gradient(152deg, transparent 0 38%, rgba(239, 249, 255, 0.92) 38% 44%, transparent 44% 100%),
                linear-gradient(212deg, transparent 0 50%, rgba(177, 223, 255, 0.82) 50% 56%, transparent 56% 100%);
            filter: drop-shadow(0 0 6px rgba(214, 240, 255, 0.85));
            transform: skewX(-18deg) rotate(-4deg);
        }
        @keyframes inverter-cloud-drift {
            from { transform: translateX(-2%); }
            to { transform: translateX(2%); }
        }
        @keyframes inverter-rainfall {
            from { transform: translate3d(1%, -10%, 0); }
            to { transform: translate3d(-3%, 12%, 0); }
        }
        @keyframes inverter-rainfall-far {
            from { transform: translate3d(2%, -14%, 0) scale(1); }
            to { transform: translate3d(-4%, 10%, 0) scale(1.02); }
        }
        @keyframes inverter-rainfall-near {
            from { transform: translate3d(0, -12%, 0) scale(1); }
            to { transform: translate3d(-6%, 16%, 0) scale(1.04); }
        }
        @keyframes inverter-snowfall {
            from { transform: translate3d(0, -8%, 0); }
            to { transform: translate3d(-1%, 10%, 0); }
        }
        @keyframes inverter-storm-flash {
            0%, 82%, 100% { opacity: 0; filter: brightness(1); }
            83% { opacity: 0.06; filter: brightness(1.02); }
            84% { opacity: 0.30; filter: brightness(1.18); }
            84.6% { opacity: 0.10; filter: brightness(1.04); }
            85.3% { opacity: 0.46; filter: brightness(1.32); }
            86.1% { opacity: 0.14; filter: brightness(1.06); }
            87.2% { opacity: 0.24; filter: brightness(1.14); }
            88.8% { opacity: 0.04; filter: brightness(1.01); }
        }
        @keyframes inverter-lightning-bolt {
            0%, 82%, 100% { opacity: 0; }
            84% { opacity: 0.86; }
            84.4% { opacity: 0.16; }
            85.3% { opacity: 1; }
            85.8% { opacity: 0.24; }
            87.1% { opacity: 0.52; }
            88% { opacity: 0; }
        }
        @keyframes inverter-lightning-branch {
            0%, 82.4%, 100% { opacity: 0; }
            84.1% { opacity: 0.26; }
            85.35% { opacity: 0.72; }
            85.9% { opacity: 0.14; }
            87.15% { opacity: 0.34; }
            88.1% { opacity: 0; }
        }
        #inverterCard .energy-scene.weather-cloudy .energy-scene__weather-layer--cloud {
            opacity: 0.28;
        }
        #inverterCard .energy-scene.weather-fog .energy-scene__weather-layer--cloud {
            opacity: 0.22;
        }
        #inverterCard .energy-scene.weather-fog .energy-scene__weather-layer--mist {
            opacity: 0.42;
        }
        #inverterCard .energy-scene.weather-drizzle .energy-scene__weather-layer--cloud {
            opacity: 0.24;
        }
        #inverterCard .energy-scene.weather-drizzle .energy-scene__weather-layer--mist {
            opacity: 0.22;
        }
        #inverterCard .energy-scene.weather-drizzle .energy-scene__weather-layer--rain {
            opacity: 0.15;
            --rain-base-duration: 2.8s;
            --rain-far-duration: 3.9s;
            --rain-near-duration: 2.15s;
            --rain-base-blur: 0.5px;
            --rain-far-opacity: 0.28;
            --rain-near-opacity: 0.14;
        }
        #inverterCard .energy-scene.weather-rain .energy-scene__weather-layer--cloud {
            opacity: 0.22;
        }
        #inverterCard .energy-scene.weather-rain .energy-scene__weather-layer--rain {
            opacity: 0.34;
            --rain-far-opacity: 0.54;
            --rain-near-opacity: 0.32;
        }
        #inverterCard .energy-scene.weather-storm .energy-scene__weather-layer--cloud {
            opacity: 0.26;
        }
        #inverterCard .energy-scene.weather-storm .energy-scene__weather-layer--rain {
            opacity: 0.32;
            --rain-base-duration: 1.12s;
            --rain-far-duration: 1.85s;
            --rain-near-duration: 0.82s;
            --rain-base-blur: 0.45px;
            --rain-far-opacity: 0.62;
            --rain-near-opacity: 0.38;
        }
        #inverterCard .energy-scene.weather-storm .energy-scene__weather-layer--flash {
            animation: inverter-storm-flash var(--lightning-duration) linear infinite;
        }
        #inverterCard .energy-scene.weather-storm .energy-scene__weather-layer--flash::before {
            animation: inverter-lightning-bolt var(--lightning-duration) linear infinite;
        }
        #inverterCard .energy-scene.weather-storm .energy-scene__weather-layer--flash::after {
            animation: inverter-lightning-branch var(--lightning-duration) linear infinite;
        }
        #inverterCard .energy-scene.weather-snow .energy-scene__weather-layer--cloud {
            opacity: 0.20;
        }
        #inverterCard .energy-scene.weather-snow .energy-scene__weather-layer--rain {
            opacity: 0.18;
            background-image:
                radial-gradient(circle at 18px 18px, rgba(236, 244, 255, 0.62) 0 2px, transparent 2.4px),
                radial-gradient(circle at 86px 78px, rgba(236, 244, 255, 0.48) 0 1.8px, transparent 2.3px);
            background-size: 120px 120px;
            animation: inverter-snowfall 8s linear infinite;
        }
        #inverterCard .energy-scene__wiring {
            z-index: 2;
            mix-blend-mode: normal;
            opacity: 1;
            --inverter-conduit-aura-width: 22;
            --inverter-conduit-shell-width: 13;
            --inverter-conduit-lane-width: 7;
            --inverter-flow-width: 4.2;
        }
        #inverterCard .energy-flow-track,
        #inverterCard .energy-flow-path {
            vector-effect: non-scaling-stroke;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        #inverterCard .energy-flow-track--aura {
            stroke-width: var(--inverter-conduit-aura-width);
            stroke: color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 54%, transparent);
            opacity: 0.16;
            filter: drop-shadow(0 0 18px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 62%, transparent));
            animation: inverter-flow-aura 4.25s ease-in-out infinite;
        }
        #inverterCard .energy-flow-track--jacket {
            stroke-width: var(--inverter-conduit-shell-width);
            stroke: color-mix(in srgb, rgba(6, 14, 26, 0.92) 76%, var(--flow-color, var(--energy-cyan)) 24%);
            opacity: 0.98;
            filter: drop-shadow(0 6px 12px rgba(4, 10, 20, 0.34));
        }
        #inverterCard .energy-flow-track--sheen {
            stroke-width: var(--inverter-conduit-lane-width);
            stroke: color-mix(in srgb, rgba(144, 214, 255, 0.22) 12%, var(--flow-color, var(--energy-cyan)) 88%);
            opacity: 0.34;
            filter: drop-shadow(0 0 10px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 44%, transparent));
        }
        #inverterCard .energy-flow-path {
            stroke-width: var(--inverter-flow-width);
            stroke: color-mix(in srgb, white 18%, var(--flow-color, var(--energy-cyan)) 82%);
            opacity: var(--flow-opacity, 0.24);
            filter:
                drop-shadow(0 0 6px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 80%, transparent))
                drop-shadow(0 0 18px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 62%, transparent));
        }
        #inverterCard .energy-flow-path.is-active {
            stroke-dasharray: 10 24 3 54;
            animation: inverter-flow-dash var(--flow-speed, 3125ms) linear infinite;
        }
        /* Keep reverse direction after the scoped animation shorthand above. */
        #inverterCard .energy-flow-path.is-active.is-reverse {
            animation-direction: reverse;
        }
        #inverterCard .energy-flow-path.is-idle {
            opacity: 0;
            pointer-events: none;
            filter: none;
        }
        #inverterCard .energy-flow-packet {
            pointer-events: none;
            opacity: 0;
        }
        #inverterCard .energy-flow-packet__halo {
            fill: color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 70%, transparent);
            opacity: calc(var(--flow-opacity, 0.8) * 0.28);
            filter: drop-shadow(0 0 8px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 92%, transparent));
        }
        #inverterCard .energy-flow-packet__core {
            fill: color-mix(in srgb, white 20%, var(--flow-color, var(--energy-cyan)) 80%);
            opacity: var(--flow-opacity, 0.8);
            filter:
                drop-shadow(0 0 4px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 94%, transparent))
                drop-shadow(0 0 10px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 76%, transparent));
        }
        [data-theme="light"] #inverterCard .energy-scene__wiring {
            --inverter-conduit-aura-width: 18;
            --inverter-conduit-shell-width: 11.5;
            --inverter-conduit-lane-width: 5.6;
            --inverter-flow-width: 3.4;
        }
        [data-theme="light"] #inverterCard .energy-flow-track--aura {
            stroke: color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 34%, rgba(181, 200, 216, 0.16) 66%);
            opacity: 0.08;
            filter: drop-shadow(0 0 12px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 28%, transparent));
            animation: inverter-flow-aura-light 4.25s ease-in-out infinite;
        }
        [data-theme="light"] #inverterCard .energy-flow-track--jacket {
            stroke: color-mix(in srgb, rgba(72, 89, 106, 0.96) 78%, var(--flow-color, var(--energy-cyan)) 22%);
            opacity: 0.92;
            filter: drop-shadow(0 4px 10px rgba(50, 66, 84, 0.14));
        }
        [data-theme="light"] #inverterCard .energy-flow-track--sheen {
            stroke: color-mix(in srgb, rgba(255, 255, 255, 0.92) 64%, var(--flow-color, var(--energy-cyan)) 36%);
            opacity: 0.26;
            filter: drop-shadow(0 0 4px rgba(255,255,255,0.18));
        }
        [data-theme="light"] #inverterCard .energy-flow-path {
            stroke: color-mix(in srgb, white 36%, var(--flow-color, var(--energy-cyan)) 64%);
            opacity: calc((var(--flow-opacity, 0.24) * 0.78) + 0.12);
            filter:
                drop-shadow(0 0 4px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 62%, transparent))
                drop-shadow(0 0 10px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 32%, transparent));
        }
        [data-theme="light"] #inverterCard .energy-flow-path.is-active {
            stroke-dasharray: 9 22 2 52;
        }
        [data-theme="light"] #inverterCard .energy-flow-packet__halo {
            fill: color-mix(in srgb, white 22%, var(--flow-color, var(--energy-cyan)) 78%);
            opacity: calc(var(--flow-opacity, 0.8) * 0.18);
            filter: drop-shadow(0 0 6px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 48%, transparent));
        }
        [data-theme="light"] #inverterCard .energy-flow-packet__core {
            fill: color-mix(in srgb, white 42%, var(--flow-color, var(--energy-cyan)) 58%);
            opacity: calc((var(--flow-opacity, 0.8) * 0.82) + 0.08);
            filter:
                drop-shadow(0 0 3px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 72%, transparent))
                drop-shadow(0 0 8px color-mix(in srgb, var(--flow-color, var(--energy-cyan)) 38%, transparent));
        }
        @keyframes inverter-flow-dash {
            from { stroke-dashoffset: 0; }
            to { stroke-dashoffset: -420; }
        }
        @keyframes inverter-flow-aura {
            0%, 100% { opacity: 0.12; }
            50% { opacity: 0.24; }
        }
        @keyframes inverter-flow-aura-light {
            0%, 100% { opacity: 0.05; }
            50% { opacity: 0.13; }
        }
        /* Anchor connector lines: thin dashes from node to physical element on house */
        #inverterCard .energy-anchor-line {
            stroke: rgba(214, 239, 255, 0.34);
            stroke-width: 1.6;
            stroke-dasharray: 4 7;
            fill: none;
            filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.18));
        }
        /* Anchor dots: glow dot at physical element location */
        #inverterCard .energy-anchor-dot {
            fill: rgba(198, 235, 255, 0.72);
            stroke: rgba(255, 255, 255, 0.94);
            stroke-width: 2.5;
            filter: drop-shadow(0 0 10px rgba(126, 219, 255, 0.55));
        }
        #inverterCard .energy-anchor-dot--solar {
            fill: color-mix(in srgb, var(--energy-solar) 60%, transparent);
            stroke: var(--energy-solar);
            filter: drop-shadow(0 0 8px color-mix(in srgb, var(--energy-solar) 90%, transparent));
        }
        #inverterCard .energy-anchor-dot--home {
            fill: color-mix(in srgb, var(--energy-home) 60%, transparent);
            stroke: var(--energy-home);
            filter: drop-shadow(0 0 8px color-mix(in srgb, var(--energy-home) 90%, transparent));
        }
        #inverterCard .energy-anchor-dot--hub {
            fill: color-mix(in srgb, var(--energy-cyan) 60%, transparent);
            stroke: var(--energy-cyan);
            filter: drop-shadow(0 0 8px color-mix(in srgb, var(--energy-cyan) 90%, transparent));
        }
        #inverterCard .energy-node,
        #inverterCard .energy-core {
            position: absolute;
            z-index: 6;
            color: var(--text-primary);
            backdrop-filter: blur(10px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.20);
            animation: inverter-node-rise 520ms cubic-bezier(.18,.9,.24,1) both;
        }
        #inverterCard .energy-node--home { animation-delay: 60ms; }
        #inverterCard .energy-core--hub { animation-delay: 90ms; }
        #inverterCard .energy-node--grid { animation-delay: 130ms; }
        @keyframes inverter-node-rise {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        #inverterCard .energy-node {
            display: grid;
            gap: 5px;
            min-width: 0;
            padding: 10px 12px 11px;
            border-radius: 14px;
            background: linear-gradient(180deg, rgba(4, 15, 28, 0.56), rgba(4, 12, 22, 0.80));
            border: 1px solid rgba(100, 205, 255, 0.18);
        }
        #inverterCard .energy-node__top {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
        }
        #inverterCard .energy-core__top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 6px 8px;
            flex-wrap: wrap;
        }
        #inverterCard .energy-node__title,
        #inverterCard .energy-core__title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #9be8ff;
        }
        #inverterCard .energy-node__state,
        #inverterCard .energy-core__state {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: rgba(126, 231, 135, 0.10);
            border: 1px solid rgba(126, 231, 135, 0.24);
            color: #8ff5aa;
            white-space: nowrap;
        }
        #inverterCard .energy-core__state.is-charging {
            background: rgba(126, 231, 135, 0.10);
            border-color: rgba(126, 231, 135, 0.24);
            color: #8ff5aa;
        }
        #inverterCard .energy-core__state.is-discharging {
            background: rgba(248, 81, 73, 0.14);
            border-color: rgba(248, 81, 73, 0.30);
            color: #ff938d;
        }
        #inverterCard .energy-core__state.is-standby {
            background: rgba(114, 219, 255, 0.10);
            border-color: rgba(114, 219, 255, 0.18);
            color: #9be8ff;
        }
        #inverterCard .energy-node__value {
            white-space: nowrap;
            font-size: clamp(22px, 2.9vw, 36px);
            font-size: clamp(22px, 5.4cqw, 34px);
            line-height: 0.92;
            font-weight: 700;
            letter-spacing: -0.04em;
            text-shadow: 0 0 12px rgba(126, 231, 135, 0.08);
        }
        #inverterCard .energy-node__label,
        #inverterCard .energy-core__label {
            font-size: 11px;
            color: rgba(255,255,255,0.90);
        }
        #inverterCard .energy-node__meta,
        #inverterCard .energy-core__storage,
        #inverterCard .energy-core__status,
        #inverterCard .energy-core__eta {
            font-size: 12px;
            color: rgba(214, 224, 236, 0.78);
        }
        /* Compact inline PV string display inside solar tile */
        #inverterCard .energy-node__pv-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3px;
            margin-top: 7px;
            padding-top: 7px;
            border-top: 1px solid rgba(114, 219, 255, 0.14);
        }
        #inverterCard .pv-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            padding: 3px 6px;
            border-radius: 6px;
            background: rgba(4, 15, 28, 0.40);
        }
        #inverterCard .pv-item__idx {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: var(--accent-blue);
            flex-shrink: 0;
        }
        #inverterCard .pv-item__val {
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.60);
            white-space: nowrap;
        }
        #inverterCard .pv-item--active .pv-item__val {
            color: var(--energy-solar);
        }
        #inverterCard .pv-item__volt {
            font-size: 9px;
            color: rgba(255,255,255,0.38);
            white-space: nowrap;
        }
        /* ---- Node positions: pure-% 4-corner, left column ≤46%, right column ≤47% ---- */
        /* Left+Right column widths never sum to >100% → guaranteed zero overlap at any scene width */
        #inverterCard .energy-node--solar {
            /* Top-left — solar panels on roof */
            left: 2%;
            top: 3%;
            width: 44%;
            overflow: hidden;
        }
        #inverterCard .energy-node--solar.is-curtailed {
            border-color: rgba(255, 107, 53, 0.36);
            box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 0 16px rgba(255, 107, 53, 0.08);
        }
        #inverterCard .energy-node--solar.is-curtailed .energy-node__state {
            background: rgba(255, 107, 53, 0.12);
            border-color: rgba(255, 107, 53, 0.24);
            color: #ffbf9f;
        }
        #inverterCard .energy-node--home {
            /* Bottom-left — glass-door living area */
            left: 2%;
            bottom: 5%;
            width: 40%;
        }
        #inverterCard .energy-core--hub {
            /* Bottom-right — wall-mounted battery storage unit */
            right: 2%;
            bottom: 5%;
            left: auto;
            transform: none;
            width: 46%;
            padding: 12px 14px;
            border-radius: 16px;
            background: linear-gradient(180deg, rgba(5, 15, 28, 0.64), rgba(4, 11, 21, 0.82));
            border: 1px solid rgba(114, 219, 255, 0.24);
        }
        #inverterCard .energy-core__main {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            justify-content: center;
            column-gap: 14px;
            margin-top: 8px;
        }
        #inverterCard .energy-core__visual {
            display: flex;
            align-items: center;
            justify-content: center;
            width: auto;
            flex-shrink: 0;
        }
        #inverterCard .energy-core__copy {
            display: grid;
            flex: 0 1 auto;
            gap: 4px;
            min-width: 0;
            justify-items: center;
            text-align: center;
        }
        #inverterCard .energy-core__soc {
            font-size: clamp(44px, 5.8vw, 78px);
            font-size: clamp(42px, 9.6cqw, 72px);
            line-height: 0.86;
            font-weight: 700;
            letter-spacing: -0.06em;
            color: var(--accent-blue);
            text-shadow: 0 0 18px rgba(88, 166, 255, 0.18);
        }
        #inverterCard .energy-core__visual {
            display: flex;
            align-items: center;
            justify-content: center;
            width: auto;
        }
        #inverterCard .energy-core .tile-icon.battery {
            width: 64px;
            height: 80px;
            margin: 0;
            flex-shrink: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
            display: block;
        }
        #inverterCard svg.tile-icon.battery {
            width: 46px;
            height: 72px;
        }
        #inverterCard .energy-core__temps {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }
        #inverterCard .energy-core__temp {
            display: inline-flex;
            align-items: center;
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(7, 16, 28, 0.54);
            border: 1px solid rgba(114, 219, 255, 0.08);
            font-size: 11px;
            color: rgba(214, 224, 236, 0.82);
        }
        #inverterCard .energy-node--grid {
            /* Top-right — utility grid */
            right: 2%;
            top: 3%;
            left: auto;
            width: 37%;
        }
        #inverterCard .energy-node--grid.is-import .energy-node__state {
            background: rgba(255, 184, 109, 0.12);
            border-color: rgba(255, 184, 109, 0.24);
            color: #ffc98c;
        }
        #inverterCard .energy-node--grid.is-idle .energy-node__state {
            background: rgba(114, 219, 255, 0.10);
            border-color: rgba(114, 219, 255, 0.18);
            color: #9be8ff;
        }
        @container inverter-card (min-width: 740px) {
            #inverterCard .energy-scene {
                /* On very wide cards, scale the near-square house art by height so it doesn't balloon edge-to-edge. */
                background-size: auto 92%;
                background-position: center 58%;
            }
        }
        @container inverter-card (min-width: 940px) {
            #inverterCard .energy-scene {
                background-size: auto 88%;
                background-position: center 60%;
            }
        }
        @container inverter-card (max-width: 760px) {
            #inverterCard .energy-scene {
                aspect-ratio: 5 / 4;
            }
            #inverterCard .energy-node,
            #inverterCard .energy-core {
                box-shadow: 0 10px 20px rgba(0,0,0,0.18);
            }
            #inverterCard .energy-node__top,
            #inverterCard .energy-core__top {
                gap: 6px;
            }
            #inverterCard .energy-node__state,
            #inverterCard .energy-core__state {
                font-size: 9px;
                padding: 3px 7px;
            }
            #inverterCard .energy-core--hub {
                width: 45%;
                bottom: 4%;
            }
            #inverterCard .energy-node--home {
                width: 39%;
                bottom: 4%;
            }
            #inverterCard .energy-core__main {
                grid-template-columns: minmax(0, 1fr) auto;
                column-gap: 12px;
            }
            #inverterCard .energy-core__visual {
                justify-content: center;
            }
            #inverterCard svg.tile-icon.battery {
                width: 56px;
                height: 70px;
            }
            #inverterCard svg.tile-icon.battery {
                width: 40px;
                height: 62px;
            }
            #inverterCard .energy-core__temps {
                gap: 5px;
            }
            #inverterCard .energy-core__temp {
                font-size: 10px;
                padding: 4px 7px;
            }
        }
        @container inverter-card (max-width: 640px) {
            #inverterCard .energy-scene {
                aspect-ratio: 21 / 19;
                background-size: auto 100%;
                background-position: center 58%;
            }
            #inverterCard .energy-node--solar,
            #inverterCard .energy-node--grid {
                top: 2.5%;
            }
            #inverterCard .energy-node--solar {
                width: 43%;
            }
            #inverterCard .energy-node--grid {
                width: 35%;
            }
            #inverterCard .energy-node--home {
                width: 37%;
                bottom: 3.5%;
            }
            #inverterCard .energy-core--hub {
                width: 44%;
                bottom: 3.5%;
            }
            #inverterCard .energy-node__pv-grid {
                gap: 2px;
                margin-top: 6px;
                padding-top: 6px;
            }
            #inverterCard .pv-item {
                padding: 3px 5px;
            }
            #inverterCard .pv-item__volt {
                display: none;
            }
        }
        @container inverter-card (max-width: 500px) {
            #inverterCard .energy-scene {
                aspect-ratio: 7 / 9;
                background-size: 100% auto;
                background-position: center 58%;
            }
            #inverterCard .energy-node,
            #inverterCard .energy-core {
                padding: 8px 10px 9px;
                border-radius: 12px;
                box-shadow: 0 9px 18px rgba(0,0,0,0.17);
            }
            #inverterCard .energy-node__top,
            #inverterCard .energy-core__top {
                gap: 5px;
            }
            #inverterCard .energy-node__title,
            #inverterCard .energy-core__title {
                font-size: 10px;
                letter-spacing: 0.14em;
            }
            #inverterCard .energy-node__state,
            #inverterCard .energy-core__state {
                font-size: 8px;
                padding: 2px 6px;
            }
            #inverterCard .energy-node__value {
                font-size: clamp(18px, 6.8cqw, 28px);
            }
            #inverterCard .energy-core__soc {
                font-size: clamp(34px, 11.8cqw, 56px);
            }
            #inverterCard .energy-node__label,
            #inverterCard .energy-core__label {
                font-size: 10px;
            }
            #inverterCard .energy-node__meta,
            #inverterCard .energy-core__storage,
            #inverterCard .energy-core__status,
            #inverterCard .energy-core__eta {
                font-size: 11px;
                line-height: 1.3;
            }
            #inverterCard .energy-node--solar {
                left: 3%;
                top: 3%;
                width: 42%;
            }
            #inverterCard .energy-node--grid {
                right: 3%;
                top: 3%;
                width: 34%;
            }
            #inverterCard .energy-node--home {
                left: 3%;
                bottom: 3%;
                width: 34%;
            }
            #inverterCard .energy-core--hub {
                right: 3%;
                bottom: 3%;
                width: 47%;
                padding: 10px 12px;
                text-align: center;
            }
            #inverterCard .energy-node__pv-grid { display: none; }
            #inverterCard .energy-core__top {
                justify-content: center;
            }
            #inverterCard .energy-core__main {
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-top: 6px;
            }
            #inverterCard .energy-core__copy {
                gap: 3px;
                justify-items: center;
            }
            #inverterCard .energy-core__visual {
                gap: 6px;
                align-items: center;
                justify-content: center;
            }
            #inverterCard svg.tile-icon.battery {
                width: 44px;
                height: 58px;
            }
            #inverterCard svg.tile-icon.battery {
                width: 32px;
                height: 48px;
            }
            #inverterCard .energy-core__temps {
                gap: 4px;
                margin-top: 6px;
                justify-content: center;
            }
            #inverterCard .energy-core__temp {
                font-size: 9px;
                padding: 3px 6px;
            }
            #inverterCard .energy-scene__wiring {
                --inverter-conduit-aura-width: 18;
                --inverter-conduit-shell-width: 11;
                --inverter-conduit-lane-width: 6;
                --inverter-flow-width: 3.75;
            }
        }
        @container inverter-card (max-width: 430px) {
            #inverterCard .energy-scene {
                aspect-ratio: 13 / 18;
                background-size: 100% auto;
            }
            #inverterCard .energy-scene__wiring {
                --inverter-conduit-aura-width: 16;
                --inverter-conduit-shell-width: 10;
                --inverter-conduit-lane-width: 5.4;
                --inverter-flow-width: 3.5;
            }
            #inverterCard .energy-node--solar {
                width: 43%;
            }
            #inverterCard .energy-node--grid {
                width: 35%;
            }
            #inverterCard .energy-node--home {
                width: 33%;
            }
            #inverterCard .energy-core--hub {
                width: 48%;
            }
            #inverterCard .energy-core__top {
                flex-direction: column;
                align-items: center;
                gap: 4px;
            }
            #inverterCard .energy-core__state {
                max-width: 100%;
            }
            #inverterCard .energy-core__main {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 7px;
            }
            #inverterCard .energy-core__visual {
                gap: 5px;
                align-items: center;
                justify-content: center;
            }
            #inverterCard .energy-core__soc {
                font-size: clamp(30px, 11cqw, 46px);
            }
            #inverterCard .energy-core__storage,
            #inverterCard .energy-core__status,
            #inverterCard .energy-core__eta {
                font-size: 10px;
            }
            #inverterCard .energy-core__temps {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 4px;
            }
            #inverterCard .energy-core__temp {
                min-width: 0;
                justify-content: center;
                text-align: center;
            }
            #inverterCard svg.tile-icon.battery {
                width: 40px;
                height: 54px;
            }
            #inverterCard svg.tile-icon.battery {
                width: 29px;
                height: 44px;
            }
        }
        @container inverter-card (max-width: 380px) {
            #inverterCard .energy-scene {
                aspect-ratio: 3 / 5;
            }
            #inverterCard .energy-node,
            #inverterCard .energy-core {
                padding: 7px 9px 8px;
            }
            #inverterCard .energy-node__state,
            #inverterCard .energy-core__state {
                font-size: 7px;
                padding: 2px 5px;
            }
            #inverterCard .energy-node__value {
                font-size: clamp(16px, 6.2cqw, 24px);
            }
            #inverterCard .energy-core__soc {
                font-size: clamp(27px, 10.2cqw, 40px);
            }
            #inverterCard .energy-node--solar {
                width: 44%;
            }
            #inverterCard .energy-node--grid {
                width: 36%;
            }
            #inverterCard .energy-node--home {
                width: 35%;
            }
            #inverterCard .energy-core--hub {
                width: 50%;
            }
            #inverterCard .energy-core__storage,
            #inverterCard .energy-core__status,
            #inverterCard .energy-core__eta {
                font-size: 9px;
            }
            #inverterCard .energy-core__temps {
                grid-template-columns: minmax(0, 1fr);
            }
            #inverterCard svg.tile-icon.battery {
                width: 36px;
                height: 48px;
            }
            #inverterCard svg.tile-icon.battery {
                width: 26px;
                height: 39px;
            }
        }
        @media (max-width: 640px) {
            #inverterCard .energy-anchor-line,
            #inverterCard .energy-anchor-dot {
                display: none;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #inverterCard .energy-scene__weather-layer--cloud,
            #inverterCard .energy-scene__weather-layer--rain,
            #inverterCard .energy-scene__weather-layer--flash,
            #inverterCard .energy-node,
            #inverterCard .energy-core {
                animation: none !important;
            }
        }
        #inverterCard .energy-scene {
            position: relative;
            overflow: hidden;
        }
        [data-theme="light"] #inverterCard .energy-scene {
            background-image: url('/images/house-3d-iso.png');
            background-color: #d6dde4;
            background-blend-mode: normal;
            border-color: rgba(14, 107, 150, 0.18);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 18px 30px rgba(57,84,110,0.14);
        }
        [data-theme="light"] #inverterCard .energy-scene::before {
            background:
                linear-gradient(180deg,
                    rgba(196, 227, 255, calc(0.10 + (var(--scene-day-sky-opacity, 0.16) * 0.75))) 0%,
                    rgba(196, 227, 255, calc(var(--scene-day-sky-opacity, 0.16) * 0.34)) 30%,
                    rgba(0,0,0,0) 55%),
                radial-gradient(circle at var(--scene-light-x, 78%) 10%, rgba(255, 220, 100, calc(var(--scene-day-glow-opacity, 0.12) * 0.72)) 0%, rgba(255, 220, 100, 0) 22%);
        }
        [data-theme="light"] #inverterCard .energy-scene::after {
            background:
                linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0) 42%, rgba(0,0,0,0.08) 100%),
                radial-gradient(circle at 50% 100%, rgba(0,0,0,0.10), transparent 46%);
        }
        [data-theme="light"] #inverterCard .energy-scene.is-daylight::before {
            background:
                linear-gradient(180deg,
                    rgba(126, 190, 255, calc(0.14 + (var(--scene-day-sky-opacity, 0.16) * 0.9))) 0%,
                    rgba(166, 216, 255, calc(var(--scene-day-sky-opacity, 0.16) * 0.42)) 30%,
                    rgba(0,0,0,0) 55%),
                radial-gradient(circle at var(--scene-light-x, 78%) 10%, rgba(255, 218, 100, calc(var(--scene-day-glow-opacity, 0.12) * 0.94)) 0%, rgba(255, 218, 100, 0) 24%);
        }
        [data-theme="light"] #inverterCard .energy-node,
        [data-theme="light"] #inverterCard .energy-core {
            background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,250,253,0.96));
            border-color: rgba(177, 191, 206, 0.92);
            box-shadow: 0 18px 30px rgba(57,84,110,0.12), inset 0 1px 0 rgba(255,255,255,0.96);
        }
        [data-theme="light"] #inverterCard .energy-scene__weather-chip {
            color: #0e6b96;
            background: rgba(255,255,255,0.82);
            border-color: rgba(14, 107, 150, 0.16);
        }
        /* Final night-scene overrides: keep these later in the file so they win over earlier scene rules. */
        #inverterCard .energy-scene {
            background-blend-mode: normal;
            transition: background-color 280ms ease, background-blend-mode 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
        }
        #inverterCard .energy-scene.is-night {
            background-color: #131379;
            background-blend-mode: multiply;
            border-color: rgba(86, 111, 142, 0.22);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 36px rgba(0,0,0,0.28);
        }
        #inverterCard .energy-scene::before {
            background:
                linear-gradient(180deg,
                    rgba(2, 7, 18, calc(var(--scene-night-top-opacity, 0.58) + 0.22)) 0%,
                    rgba(3, 9, 20, calc(var(--scene-night-top-opacity, 0.58) * 0.72)) 26%,
                    rgba(3, 8, 16, 0.20) 58%,
                    rgba(0, 0, 0, calc(var(--scene-night-bottom-opacity, 0.10) + 0.20)) 100%
                ),
                radial-gradient(circle at var(--scene-light-x, 82%) 10%, rgba(168, 194, 242, calc(var(--scene-night-glow-opacity, 0.08) * 1.12)) 0%, rgba(168, 194, 242, 0) 19%),
                radial-gradient(ellipse at 18% 5%, rgba(12, 28, 72, 0.28), transparent 22%);
        }
        #inverterCard .energy-scene::after {
            background:
                linear-gradient(180deg, rgba(1, 5, 14, 0.12) 0%, rgba(0,0,0,0.03) 18%, rgba(0,0,0, calc(var(--scene-night-bottom-opacity, 0.18) + 0.12)) 100%),
                radial-gradient(circle at 50% 100%, rgba(3, 9, 17, 0.42), transparent 44%),
                radial-gradient(circle at 14% 82%, rgba(1, 7, 18, 0.24), transparent 26%),
                radial-gradient(circle at 86% 78%, rgba(1, 7, 18, 0.22), transparent 24%);
        }
        #inverterCard .energy-scene__stars {
            opacity: calc(var(--scene-stars-opacity, 0) * 3.1);
            filter: drop-shadow(0 0 12px rgba(190, 219, 255, 0.32));
        }
        #inverterCard .energy-scene__stars span {
            box-shadow: 0 0 10px rgba(196, 221, 255, 0.72), 0 0 22px rgba(196, 221, 255, 0.22);
        }
        #inverterCard .energy-scene__stars span:nth-child(8) { left: 9%; top: 24%; width: 2px; height: 2px; opacity: 0.64; }
        #inverterCard .energy-scene__stars span:nth-child(9) { left: 22%; top: 18%; opacity: 0.74; }
        #inverterCard .energy-scene__stars span:nth-child(10) { left: 34%; top: 6%; width: 2px; height: 2px; opacity: 0.58; }
        #inverterCard .energy-scene__stars span:nth-child(11) { left: 47%; top: 19%; width: 2px; height: 2px; opacity: 0.76; }
        #inverterCard .energy-scene__stars span:nth-child(12) { left: 66%; top: 6%; opacity: 0.70; }
        #inverterCard .energy-scene__stars span:nth-child(13) { left: 78%; top: 22%; width: 2px; height: 2px; opacity: 0.62; }
        #inverterCard .energy-scene__stars span:nth-child(14) { left: 87%; top: 13%; opacity: 0.80; }
        [data-theme="light"] #inverterCard .energy-scene.is-night {
            background-color: #233d5f;
            background-blend-mode: multiply;
            border-color: rgba(56, 71, 88, 0.54);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 18px 30px rgba(23, 33, 43, 0.30);
        }
        [data-theme="light"] #inverterCard .energy-scene.is-night::before {
            background:
                linear-gradient(180deg,
                    rgba(6, 13, 28, calc(var(--scene-night-top-opacity, 0.58) + 0.18)) 0%,
                    rgba(7, 14, 28, calc(var(--scene-night-top-opacity, 0.58) * 0.72)) 28%,
                    rgba(0,0,0,0.10) 58%,
                    rgba(0,0,0, calc(var(--scene-night-bottom-opacity, 0.16) + 0.18)) 100%
                ),
                radial-gradient(circle at var(--scene-light-x, 78%) 10%, rgba(188, 210, 247, calc(var(--scene-night-glow-opacity, 0.08) * 1.14)) 0%, rgba(188, 210, 247, 0) 22%),
                radial-gradient(ellipse at 18% 6%, rgba(22, 38, 78, 0.20), transparent 24%);
        }
        [data-theme="light"] #inverterCard .energy-scene.is-night::after {
            background:
                linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02) 24%, rgba(0,0,0,0.22) 100%),
                radial-gradient(circle at 50% 100%, rgba(2, 8, 18, 0.24), transparent 46%),
                radial-gradient(circle at 14% 80%, rgba(2, 8, 18, 0.12), transparent 24%),
                radial-gradient(circle at 86% 76%, rgba(2, 8, 18, 0.10), transparent 22%);
        }
        [data-theme="light"] #inverterCard .energy-scene.is-night .energy-scene__weather-chip {
            color: #d9e8f8;
            background: rgba(14, 21, 33, 0.54);
            border-color: rgba(150, 173, 202, 0.22);
        }
        [data-theme="light"] #inverterCard .energy-scene.is-night .energy-scene__stars {
            filter: drop-shadow(0 0 14px rgba(201, 225, 255, 0.38));
        }
        [data-theme="light"] #inverterCard .energy-node--solar .energy-node__title {
            color: #9b6d16;
        }
        [data-theme="light"] #inverterCard .energy-node--home .energy-node__title {
            color: #1f6c45;
        }
        [data-theme="light"] #inverterCard .energy-node--grid .energy-node__title,
        [data-theme="light"] #inverterCard .energy-core__title {
            color: #145f87;
        }
        [data-theme="light"] #inverterCard .energy-node__label,
        [data-theme="light"] #inverterCard .energy-core__label {
            color: #1f2328;
        }
        [data-theme="light"] #inverterCard .energy-node__meta,
        [data-theme="light"] #inverterCard .energy-core__storage,
        [data-theme="light"] #inverterCard .energy-core__status,
        [data-theme="light"] #inverterCard .energy-core__eta,
        [data-theme="light"] #inverterCard .energy-core__temp {
            color: #5d6b79;
        }
        [data-theme="light"] #inverterCard .energy-node__value,
        [data-theme="light"] #inverterCard .energy-core__soc {
            text-shadow: none;
        }
        [data-theme="light"] #inverterCard .energy-core__state.is-charging {
            background: rgba(35, 130, 87, 0.12);
            border-color: rgba(35, 130, 87, 0.18);
            color: #1f6c45;
        }
        [data-theme="light"] #inverterCard .energy-core__state.is-discharging {
            background: rgba(208, 76, 61, 0.12);
            border-color: rgba(208, 76, 61, 0.18);
            color: #b64035;
        }
        [data-theme="light"] #inverterCard .energy-core__state.is-standby,
        [data-theme="light"] #inverterCard .energy-node--grid.is-idle .energy-node__state {
            background: rgba(20, 95, 135, 0.10);
            border-color: rgba(20, 95, 135, 0.16);
            color: #145f87;
        }
        [data-theme="light"] #inverterCard .energy-node--grid.is-import .energy-node__state {
            background: rgba(181, 116, 24, 0.12);
            border-color: rgba(181, 116, 24, 0.18);
            color: #9a600e;
        }
        [data-theme="light"] #inverterCard .energy-node--grid.is-export .energy-node__state {
            background: rgba(35, 130, 87, 0.12);
            border-color: rgba(35, 130, 87, 0.18);
            color: #1f6c45;
        }
        [data-theme="light"] #inverterCard .energy-core__temp {
            background: rgba(255,255,255,0.82);
            border-color: rgba(205,215,225,0.92);
        }
        [data-theme="light"] #inverterCard .energy-core .tile-icon.battery {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }
        [data-theme="light"] #inverterCard .energy-node__pv-grid {
            border-top-color: rgba(190, 202, 214, 0.88);
        }
        [data-theme="light"] #inverterCard .pv-item {
            background: rgba(243,247,250,0.92);
            border: 1px solid rgba(208, 217, 226, 0.84);
        }
        [data-theme="light"] #inverterCard .pv-item__idx {
            color: #145f87;
        }
        [data-theme="light"] #inverterCard .pv-item__val {
            color: #58697a;
        }
        [data-theme="light"] #inverterCard .pv-item--active .pv-item__val {
            color: #238257;
        }
        [data-theme="light"] #inverterCard .pv-item__volt {
            color: #7d8b98;
        }
        [data-theme="light"] #inverterCard .price-low {
            color: #238257 !important;
        }
        [data-theme="light"] #inverterCard .price-mid {
            color: #b57418 !important;
        }
        [data-theme="light"] #inverterCard .price-high {
            color: #d04c3d !important;
        }
        [data-theme="light"] #inverterCard .price-neutral {
            color: #5f6a78 !important;
        }
        [data-theme="light"] #inverterCard .stat-item .tile-icon {
            background: #f6f8fa;
            border: 1px solid #d8dee6;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        [data-theme="light"] #inverterCard .stat-item.feedin-highlight {
            border-color: rgba(34, 139, 34, 0.38);
            box-shadow: 0 4px 14px rgba(34, 139, 34, 0.09);
        }
        [data-theme="light"] #inverterCard .stat-item.curtailed {
            border-color: rgba(255, 107, 53, 0.42);
            box-shadow: 0 4px 14px rgba(255, 107, 53, 0.11);
        }
        [data-theme="light"] .stat-item.curtailed .tile-icon::after {
            border-color: #ffffff;
        }
        [data-theme="light"] .stat-item.curtailed {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(246, 248, 250, 0.8));
        }
        [data-theme="light"] .stat-item.extreme {
            background: linear-gradient(180deg, rgba(255,176,32,0.10), rgba(246,248,250,0.85));
        }
        [data-theme="light"] .automation-toggle {
            background: rgba(0, 0, 0, 0.08);
            border-color: rgba(0, 0, 0, 0.15);
        }
        [data-theme="light"] .automation-toggle:hover {
            background: rgba(0, 0, 0, 0.12);
            border-color: rgba(0, 0, 0, 0.2);
        }
        [data-theme="light"] .automation-toggle.active {
            background: linear-gradient(135deg, rgba(9, 105, 218, 0.15), rgba(9, 105, 218, 0.1));
            border-color: rgba(9, 105, 218, 0.4);
        }
        [data-theme="light"] .automation-toggle::after {
            background: rgba(0, 0, 0, 0.2);
        }
        [data-theme="light"] .automation-toggle.active::after {
            background: #0969da;
        }
        [data-theme="light"] .automation-toggle__spinner {
            --automation-spinner-track: rgba(9, 105, 218, 0.18);
            --automation-spinner-primary: #0969da;
            --automation-spinner-secondary: #10b981;
        }