{} *{} /*endBaseStyles*/
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 @media (max-width: 639px) { .gp-component-id-r9brmQ7im1[data-gp-component] { text-align: center;z-index: auto;position: relative;min-height: 50px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-r9brmQ7im1[data-gp-component] { text-align: center;z-index: auto;position: relative;min-height: 50px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-r9brmQ7im1[data-gp-component] { text-align: center;z-index: auto;position: relative;min-height: 50px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-r9brmQ7im1[data-gp-component] { text-align: center;z-index: auto;position: relative;min-height: 50px; } } @media (min-width: 1200px) { .gp-component-id-r9brmQ7im1[data-gp-component] { text-align: center;z-index: auto;position: relative;min-height: 50px; } }

 @media (max-width: 639px) { [data-gp-text] .gp-component-id-QzGfKD06q { margin-top: 10px; } } @media (max-width: 767px) and (min-width: 640px) { [data-gp-text] .gp-component-id-QzGfKD06q { margin-top: 10px; } } @media (max-width: 991px) and (min-width: 768px) { [data-gp-text] .gp-component-id-QzGfKD06q { margin-top: 10px; } } @media (max-width: 1199px) and (min-width: 992px) { [data-gp-text] .gp-component-id-QzGfKD06q { margin-top: 10px; } } @media (min-width: 1200px) { [data-gp-text] .gp-component-id-QzGfKD06q { margin-top: 10px; } }

 .gp-component-id-QzGfKD06q { margin-left: 0px;margin-bottom: 0px;margin-right: 0px;margin-top: 0px; } @media (max-width: 639px) { .gp-component-id-QzGfKD06q { margin-left: 0px;margin-bottom: 0px;margin-right: 0px;margin-top: 0px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-QzGfKD06q { margin-left: 0px;margin-bottom: 0px;margin-right: 0px;margin-top: 0px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-QzGfKD06q { margin-left: 0px;margin-bottom: 0px;margin-right: 0px;margin-top: 0px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-QzGfKD06q { margin-left: 0px;margin-bottom: 0px;margin-right: 0px;margin-top: 0px; } } @media (min-width: 1200px) { .gp-component-id-QzGfKD06q { margin-left: 0px;margin-bottom: 0px;margin-right: 0px;margin-top: 0px; } }

 .gp-component-id-aTxdKpaJn { padding-right: 8px;width: 100%;padding-left: 8px; } @media (max-width: 639px) { .gp-component-id-aTxdKpaJn { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-aTxdKpaJn { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-aTxdKpaJn { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-aTxdKpaJn { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (min-width: 1200px) { .gp-component-id-aTxdKpaJn { padding-right: 8px;width: 100%;padding-left: 8px; } }

 .gp-component-id-ThvC1Bt2L { margin-right: -8px;margin-left: -8px; } @media (max-width: 639px) { .gp-component-id-ThvC1Bt2L { margin-right: -8px;margin-left: -8px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-ThvC1Bt2L { margin-right: -8px;margin-left: -8px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-ThvC1Bt2L { margin-right: -8px;margin-left: -8px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-ThvC1Bt2L { margin-right: -8px;margin-left: -8px; } } @media (min-width: 1200px) { .gp-component-id-ThvC1Bt2L { margin-right: -8px;margin-left: -8px; } }

 .gp-component-id-qqm3vM0j8u { padding-right: 8px;width: 100%;padding-left: 8px; } @media (max-width: 639px) { .gp-component-id-qqm3vM0j8u { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-qqm3vM0j8u { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-qqm3vM0j8u { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-qqm3vM0j8u { padding-right: 8px;width: 100%;padding-left: 8px; } } @media (min-width: 1200px) { .gp-component-id-qqm3vM0j8u { padding-right: 8px;width: 100%;padding-left: 8px; } }

 /* ========================================================================== CSS RESET & BASE STYLES ========================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-secondary); color: var(--text-primary); line-height: 1.5; } /* ========================================================================== CSS CUSTOM PROPERTIES (Design Tokens) ========================================================================== */ :root { /* Colors */ --color-primary: #1a73e8; --color-success: #4caf50; --color-danger: #f44336; --color-warning: #ff9800; --color-neutral: #888; /* Text Colors */ --text-primary: #333; --text-secondary: #666; --text-muted: #888; /* Background Colors */ --bg-primary: #fff; --bg-secondary: #f5f5f5; --bg-muted: #fafafa; /* Border Colors */ --border-color: #e0e0e0; --border-light: #eee; /* Spacing Scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; /* Border Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; /* Font Sizes */ --font-xs: 10px; --font-sm: 12px; --font-md: 14px; --font-lg: 16px; --font-xl: 20px; /* Transitions */ --transition-fast: 0.2s ease; } /* ========================================================================== LAYOUT COMPONENTS ========================================================================== */ .container { max-width: 1024px; margin: 0 auto; padding: 0 var(--space-lg); } .header { background: var(--bg-primary); border-bottom: 1px solid var(--border-color); padding: var(--space-md) 0; } .card { background: var(--bg-primary); border-radius: var(--radius-lg); padding: var(--space-md); border: 1px solid var(--border-color); margin-bottom: var(--space-md); } /* ========================================================================== TYPOGRAPHY ========================================================================== */ .title { font-size: var(--font-xl); font-weight: bold; color: var(--color-primary); } .subtitle { font-size: var(--font-sm); color: var(--text-secondary); } .text-xs { font-size: var(--font-xs); } .text-sm { font-size: var(--font-sm); } .text-muted { color: var(--text-muted); } .font-mono { font-family: monospace; } .font-bold { font-weight: 700; } /* ========================================================================== FLEXBOX & GRID UTILITIES ========================================================================== */ .flex { display: flex; align-items: center; } .flex-wrap { flex-wrap: wrap; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-sm); } .gap-4 { gap: var(--space-lg); } .gap-6 { gap: var(--space-xl); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } /* ========================================================================== BUTTON COMPONENTS ========================================================================== */ .btn { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-weight: 600; font-size: var(--font-md); border: 1px solid #ccc; cursor: pointer; transition: all var(--transition-fast); background: var(--bg-primary); color: var(--text-primary); } .btn:hover { background: #f0f0f0; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: var(--space-xs) 10px; font-size: var(--font-sm); } .btn-play { background: var(--color-success); color: white; border-color: var(--color-success); } .btn-pause { background: var(--color-danger); color: white; border-color: var(--color-danger); } .btn-active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .btn-on { background: var(--color-success); color: white; border-color: var(--color-success); } .btn-off { background: var(--border-light); color: var(--text-secondary); border-color: #ccc; } /* ========================================================================== COMPONENT STYLES ========================================================================== */ .divider { width: 1px; height: 20px; background: #ddd; margin: 0 var(--space-sm); } .stat-label { font-size: var(--font-xs); color: var(--text-muted); text-transform: uppercase; } .stat-value { font-size: var(--font-xl); font-family: monospace; font-weight: bold; color: var(--text-primary); } .badge { padding: 2px var(--space-sm); border-radius: var(--radius-sm); font-size: 11px; font-weight: bold; color: white; margin-left: var(--space-sm); } .badge-pos { background: var(--color-success); } .badge-neg { background: var(--color-danger); } .badge-zero { background: #9e9e9e; } .badge-off { background: #bdbdbd; } .inverter-card { background: var(--bg-primary); border-radius: var(--radius-lg); padding: var(--space-md); border: 1px solid var(--border-color); } .inverter-card.disabled { opacity: 0.5; } .slider { width: 80px; } .footer { text-align: center; font-size: var(--font-sm); color: var(--text-muted); padding: var(--space-lg) 0; } .mb-2 { margin-bottom: var(--space-sm); } .mb-3 { margin-bottom: var(--space-md); } svg { display: block; width: 100%; } /* Embed Button Styles */ .embed-btn-wrapper { position: relative; } .embed-tooltip { position: absolute; top: 100%; right: 0; margin-top: 8px; padding: 6px 12px; background: #333; color: #fff; font-size: 12px; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; white-space: nowrap; z-index: 100; } .embed-tooltip.show { opacity: 1; visibility: visible; } .embed-tooltip::before { content: ''; position: absolute; bottom: 100%; right: 12px; border: 6px solid transparent; border-bottom-color: #333; } #embedBtn svg { display: inline-block; width: 16px; } /* ========================================================================== RESPONSIVE STYLES ========================================================================== */ @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .hide-mobile { display: none; } .stat-value { font-size: var(--font-lg); } } 

 .gp-component-id-8KkxkkfOwz { width: 100%; } @media (max-width: 639px) { .gp-component-id-8KkxkkfOwz { width: 100%; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-8KkxkkfOwz { width: 100%; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-8KkxkkfOwz { width: 100%; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-8KkxkkfOwz { width: 100%; } } @media (min-width: 1200px) { .gp-component-id-8KkxkkfOwz { width: 100%; } }

 .gp-component-id-flstvjFUCs { width: 100%;padding-left: 8px;padding-right: 8px; } @media (max-width: 639px) { .gp-component-id-flstvjFUCs { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-flstvjFUCs { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-flstvjFUCs { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-flstvjFUCs { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (min-width: 1200px) { .gp-component-id-flstvjFUCs { width: 100%;padding-left: 8px;padding-right: 8px; } }

 .gp-component-id-VoF8EIDGf { margin-left: -8px;margin-right: -8px; } @media (max-width: 639px) { .gp-component-id-VoF8EIDGf { margin-left: -8px;margin-right: -8px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-VoF8EIDGf { margin-left: -8px;margin-right: -8px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-VoF8EIDGf { margin-left: -8px;margin-right: -8px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-VoF8EIDGf { margin-left: -8px;margin-right: -8px; } } @media (min-width: 1200px) { .gp-component-id-VoF8EIDGf { margin-left: -8px;margin-right: -8px; } }

 .gp-component-id-8DZGIFwWtm { width: 100%;padding-left: 8px;padding-right: 8px; } @media (max-width: 639px) { .gp-component-id-8DZGIFwWtm { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-8DZGIFwWtm { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-8DZGIFwWtm { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-8DZGIFwWtm { width: 100%;padding-left: 8px;padding-right: 8px; } } @media (min-width: 1200px) { .gp-component-id-8DZGIFwWtm { width: 100%;padding-left: 8px;padding-right: 8px; } }

 .gp-component-id-bimoY6Biio { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto; } @media (max-width: 639px) { .gp-component-id-bimoY6Biio { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto; } } @media (max-width: 767px) and (min-width: 640px) { .gp-component-id-bimoY6Biio { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 640px; } } @media (max-width: 991px) and (min-width: 768px) { .gp-component-id-bimoY6Biio { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 768px; } } @media (max-width: 1199px) and (min-width: 992px) { .gp-component-id-bimoY6Biio { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 992px; } } @media (min-width: 1200px) { .gp-component-id-bimoY6Biio { z-index: 15;position: relative;width: 100%;margin-right: auto;margin-left: auto;max-width: 1200px; } }