@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-dark: #09090b;--bg-surface: #18181b;--bg-surface-elevated: rgba(39, 39, 42, .6);--border-color: rgba(255, 255, 255, .08);--accent-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);--accent-color: #f59e0b;--accent-glow: rgba(245, 158, 11, .3);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--safe-area-bottom: env(safe-area-inset-bottom, 20px)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#121214cc;border-radius:4px}::-webkit-scrollbar-thumb{background:#f59e0b59;border-radius:4px;border:1px solid rgba(245,158,11,.15);transition:background .2s ease}::-webkit-scrollbar-thumb:hover{background:#f59e0ba6}*{scrollbar-width:thin;scrollbar-color:rgba(245,158,11,.35) rgba(18,18,20,.8)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}a,button{outline:none}a:focus,button:focus{outline:none}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.page-container{width:100%!important;max-width:100%!important;margin:0;min-height:calc(100vh - 40px);min-height:calc(100dvh - 40px);animation:pageFadeIn .35s cubic-bezier(.2,.8,.2,1) forwards}.glass-panel{background:#1e1e28b3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.05);border-radius:16px;box-shadow:0 8px 32px #0000004d}.page-transition-wrapper{animation:pageFadeIn .3s cubic-bezier(.16,1,.3,1) forwards;min-height:100%;width:100%;display:flex;flex-direction:column;align-items:stretch}@media (max-width: 768px){.page-transition-wrapper{padding-bottom:0!important}}.glass-icon-btn{width:44px;height:44px;border-radius:16px;background:#1e1e28b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006;flex-shrink:0;aspect-ratio:1;display:flex;justify-content:center;align-items:center;color:var(--text-secondary);transition:all .2s;cursor:pointer}.glass-icon-btn:hover,.glass-icon-btn.active{background:#ffffff26;color:var(--text-primary)}.gradient-text{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.desktop-only{display:none!important}.mobile-only{display:flex!important}@media (min-width: 768px){.desktop-only{display:flex!important}.mobile-only{display:none!important}}.page-header{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-radius:16px;background:#1e1e28b3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.05);box-shadow:0 8px 32px #0000004d;width:100%;box-sizing:border-box;flex-shrink:0}.page-header .header-title-box{display:flex;align-items:center;gap:16px}.page-header .header-icon{color:var(--accent-color, #f59e0b);flex-shrink:0}.page-header .header-title-box h2{font-size:1.4rem;font-weight:700;margin:0 0 4px;color:#f8fafc;line-height:1.2}.page-header .header-title-box .subtitle{font-size:.85rem;color:#94a3b8;margin:0;line-height:1.2}.page-header .header-controls{display:flex;align-items:center;gap:12px}.conn-dot,.status-dot,.live-dot,.status-indicator-dot,.dot{width:10px!important;height:10px!important;min-width:10px!important;min-height:10px!important;max-width:10px!important;max-height:10px!important;border-radius:50%!important;flex-shrink:0!important;aspect-ratio:1 / 1!important;display:inline-block!important;box-sizing:border-box!important}.conn-dot.online,.status-dot.online{background:#10b981!important;box-shadow:0 0 10px #10b981!important}.conn-dot.offline,.status-dot.offline{background:#f59e0b!important;box-shadow:0 0 10px #f59e0b!important}.conn-dot.error,.status-dot.error{background:#ef4444!important;box-shadow:0 0 10px #ef4444!important}.app-container{display:flex;height:100vh;height:100dvh;width:100vw;background-color:var(--bg-dark)}.main-wrapper{flex:1;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;position:relative;width:100%}.main-content{flex:1;overflow-y:auto;padding:24px;width:100%}.sidebar-wrapper{position:relative;transition:width .3s cubic-bezier(.4,0,.2,1);z-index:100}.sidebar-wrapper.pinned{width:276px}.sidebar-wrapper.unpinned{width:32px}.sidebar{display:flex;position:absolute;top:16px;left:16px;width:260px;height:calc(100vh - 32px);flex-direction:column;padding:24px 16px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;overflow:hidden}.sidebar-wrapper.unpinned:not(:hover) .sidebar{transform:translate(calc(-100% - 32px));opacity:0;pointer-events:none}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px;padding:0 4px}.sidebar-header .title{font-size:24px;font-weight:700;white-space:nowrap}.pin-btn{background:#ffffff0d;border:none;color:var(--text-secondary);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}.pin-btn:hover{background:#ffffff26;color:var(--text-primary)}.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:8px}.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}.sidebar-status-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:#ffffff08;border:1px solid rgba(255,255,255,.06)}.sidebar-status-text{font-size:.85rem;font-weight:600;color:var(--text-secondary);white-space:nowrap}.nav-item{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:12px;color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all .2s ease;white-space:nowrap}.sidebar .nav-item:hover{background-color:#ffffff0d;color:var(--text-primary)}.sidebar .nav-item.active{position:relative;background:#f59e0b1a;color:var(--text-primary);font-weight:600}.sidebar .nav-item.active .lucide{color:var(--accent-color);filter:drop-shadow(0 0 6px rgba(245,158,11,.6))}.sidebar .nav-item.active:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--accent-gradient);border-radius:4px;box-shadow:0 0 12px 2px var(--accent-color)}.bottom-nav{height:64px;margin:0 16px 20px;flex-direction:row;justify-content:space-evenly;align-items:center;border-radius:32px;background:#18181bd9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 32px #0009;z-index:50;position:absolute;bottom:0;left:0;right:0}.bottom-nav .nav-item{position:relative;display:flex;justify-content:center;align-items:center;width:48px;height:48px;color:var(--text-muted);border-radius:50%;transition:all .3s ease;padding:0;background:none;border:none;cursor:pointer}.bottom-nav .nav-item.active{color:var(--accent-color)}.bottom-nav .nav-item.active .lucide{filter:drop-shadow(0 0 8px rgba(245,158,11,.8));transform:scale(1.15) translateY(-2px)}.bottom-nav .nav-item.active:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:16px;height:3px;border-radius:3px;background:var(--accent-gradient);box-shadow:0 0 10px var(--accent-color)}.mobile-scroll-spacer{display:none}.mobile-more-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:45;display:flex;flex-direction:column;justify-content:flex-end;animation:fadeIn .2s ease-out}.mobile-more-menu{margin:0 16px 90px;padding:8px 0;border-radius:24px;display:flex;flex-direction:column;gap:4px;animation:slideUp .3s cubic-bezier(.2,.8,.2,1)}.more-menu-header{padding:12px 24px 8px;font-size:.9rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.more-menu-item{display:flex;align-items:center;gap:16px;padding:16px 24px;color:var(--text-primary);text-decoration:none;font-weight:500;font-size:1.1rem}.more-menu-item.active{color:var(--accent-color);background:#f59e0b1a}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 767px){.main-content{padding:16px}.main-content.dashboard-active{overflow:hidden}.mobile-top-bar{margin:16px 16px 0;padding:0 16px;height:64px;min-height:64px;border-radius:16px;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;overflow:visible}.mobile-top-right-wrapper{display:flex;align-items:center;gap:10px;flex-shrink:0}#mobile-header-slot{display:flex;align-items:center;gap:8px}}.energy-flow-card{padding:20px;display:flex;flex-direction:column;gap:16px}.energy-flow-header{display:flex;justify-content:space-between;align-items:center}.header-icon{color:var(--accent-color)}.status-pill{display:flex;align-items:center;gap:6px;background:#f59e0b1f;color:#fbbf24;padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:700;border:1px solid rgba(245,158,11,.3);letter-spacing:.5px}.live-dot{width:6px;height:6px;border-radius:50%;background:#fbbf24;box-shadow:0 0 8px #fbbf24;animation:pulseDot 1.5s infinite alternate}@keyframes pulseDot{0%{opacity:.4}to{opacity:1}}.svg-canvas-wrapper{width:100%;height:auto;display:flex;justify-content:center;align-items:center;overflow:hidden}.energy-svg-canvas{width:100%;height:auto;max-width:100%;overflow:visible}.cable-base{stroke:#ffffff14;stroke-width:4;stroke-linecap:round}.cable-active{stroke-width:4;stroke-linecap:round}.solar-cable{stroke:#fbbf24}.grid-cable{stroke:#ef4444}.export-cable{stroke:#10b981}.battery-cable{stroke:#a855f7}.home-cable{stroke:#60a5fa}.hub-outer-ring{fill:#18181bf2;stroke:var(--accent-color);stroke-width:2.5;filter:drop-shadow(0 0 12px rgba(245,158,11,.5))}.hub-inner-core{fill:#f59e0b1a;stroke:#f59e0b4d;stroke-dasharray:4 2}.glow-amber{border-color:#f59e0b80;box-shadow:0 0 16px #f59e0b40}.glow-red{border-color:#ef444480;box-shadow:0 0 16px #ef444440}.glow-battery{border-color:#a855f780;box-shadow:0 0 16px #a855f740}.glow-blue{border-color:#3b82f680;box-shadow:0 0 16px #3b82f640}@media (max-width: 768px){.energy-flow-card{padding:14px 10px}.svg-canvas-wrapper{overflow:hidden}.energy-svg-canvas{transform:scale(1)}}.unified-glass-dropdown{position:relative;display:inline-block;width:100%;box-sizing:border-box;font-family:inherit}.unified-glass-dropdown-trigger{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#0006;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:5px 12px;min-height:44px;box-sizing:border-box;position:relative;cursor:pointer;transition:all .2s ease}.unified-glass-dropdown-trigger:hover:not(:disabled){border-color:#f59e0b}.embedded-field-label{font-size:.65rem;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;line-height:1}.dropdown-trigger-body{display:flex;align-items:center;gap:6px;width:100%;padding-right:18px;min-width:0}.dropdown-selected-label{font-size:.85rem;font-weight:600;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-chevron-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#94a3b8;transition:transform .2s ease}.dropdown-chevron-icon.rotate{transform:translateY(-50%) rotate(180deg);color:#f59e0b}.unified-glass-dropdown-portal-menu{z-index:999999!important;background:#121620fa!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:12px;padding:6px;box-shadow:0 20px 50px #000000d9,0 0 0 1px #f59e0b40!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;max-height:260px;overflow-y:auto;list-style:none;margin:0;box-sizing:border-box}.unified-glass-dropdown-portal-menu::-webkit-scrollbar{width:5px}.unified-glass-dropdown-portal-menu::-webkit-scrollbar-track{background:transparent}.unified-glass-dropdown-portal-menu::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}.dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;color:#e2e8f0;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .15s ease;margin-bottom:2px}.dropdown-item:last-child{margin-bottom:0}.dropdown-item-left{display:flex;align-items:center;gap:10px}.dropdown-item-icon{color:#94a3b8;flex-shrink:0}.dropdown-item:hover{background:#f59e0b26;color:#f59e0b}.dropdown-item:hover .dropdown-item-icon{color:#f59e0b}.dropdown-item.selected{background:#f59e0b33;color:#f59e0b;font-weight:700}.dropdown-item.selected .dropdown-item-icon{color:#f59e0b}.item-check-icon{color:#f59e0b;flex-shrink:0}.dashboard-main-container{display:flex;flex-direction:column;width:100%;gap:12px;height:calc(100vh - 48px);overflow:hidden}.dashboard-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-radius:16px;background:var(--glass-bg, rgba(30, 30, 40, .7));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08));flex-shrink:0}.header-title-box{display:flex;align-items:center;gap:14px}.header-title-box h2{font-size:1.3rem;font-weight:700;color:#f8fafc;margin:0}.header-title-box .subtitle{font-size:.82rem;color:#94a3b8;margin:2px 0 0}.status-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:var(--text-secondary);font-weight:600;font-size:.85rem}.conn-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.conn-dot.online{background:#10b981;box-shadow:0 0 10px #10b981}.conn-dot.offline{background:#f59e0b;box-shadow:0 0 10px #f59e0b}.matrix-canvas-wrapper{flex:1;min-height:0;width:100%;display:flex;align-items:stretch;justify-content:center}.matrix-canvas-wrapper .energy-flow-card{width:100%;margin:0;padding:16px 20px;display:flex;flex-direction:column;height:100%}.matrix-canvas-wrapper .energy-flow-header{flex-shrink:0}.matrix-canvas-wrapper .svg-canvas-wrapper{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}.matrix-canvas-wrapper .energy-svg-canvas{width:100%;height:100%}@media (max-width: 767px){.dashboard-main-container{height:calc(100dvh - 192px);gap:0;overflow:hidden}.matrix-canvas-wrapper .energy-flow-card{padding:8px 6px}.matrix-canvas-wrapper .energy-flow-header{padding:0 6px}}.battery-page{display:flex;flex-direction:column;gap:32px;padding:10px;animation:fadeIn .4s ease-out;min-height:calc(100vh - 40px);max-width:100%;overflow-x:hidden;box-sizing:border-box}.battery-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-radius:16px;flex-wrap:wrap;gap:16px}.status-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:600;background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.status-badge.active .status-dot{background-color:#10b981;box-shadow:0 0 8px #10b981}.status-badge.error .status-dot{background-color:#ef4444;box-shadow:0 0 8px #ef4444}.battery-page{display:flex;flex-direction:column;gap:24px;width:100%;max-width:100%;box-sizing:border-box}.battery-dashboard{display:grid;grid-template-columns:minmax(430px,480px) minmax(0,1fr);gap:20px;width:100%;min-width:0}.soc-widget{padding:24px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.widget-title{font-size:1.1rem;color:var(--text-muted);margin-bottom:16px;font-weight:600}.progress-ring-container{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center}.progress-ring{position:absolute;top:0;left:0;transform:rotate(-90deg)}.progress-ring__circle-bg{stroke:#ffffff0d}.progress-ring__circle{transition:stroke-dashoffset 1s ease-in-out}.soc-text-container{display:flex;flex-direction:column;align-items:center;z-index:10}.soc-value{font-size:2.8rem;font-weight:800;color:var(--text-color);line-height:1;text-shadow:0 4px 12px rgba(0,0,0,.2)}.soc-content{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.soc-horizontal-wrapper{display:flex;flex-direction:column;width:100%;gap:12px}.soc-header-mobile{display:flex;justify-content:space-between;align-items:flex-end}.soc-mobile-title{font-size:1.1rem;font-weight:600;color:var(--text-muted)}.soc-mobile-value{font-size:2.2rem;font-weight:800;line-height:1}.soc-progress-track{width:100%;height:24px;background:#ffffff0d;border-radius:12px;overflow:hidden}.soc-progress-fill{height:100%;border-radius:12px;transition:width 1s cubic-bezier(.4,0,.2,1)}.soc-footer-mobile{display:flex;justify-content:space-between;font-size:.95rem;font-weight:500;color:var(--text-muted)}.soc-details{display:flex;flex-direction:column;gap:20px;flex:1;padding-left:16px;min-width:0}.detail-item{display:flex;flex-direction:column;gap:4px}.detail-label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:600}.detail-value{font-size:1.8rem;font-weight:800;line-height:1}.detail-unit{font-size:1.1rem;font-weight:600;color:var(--text-muted)}.battery-page .metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}.battery-page .analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}@media (max-width: 1250px){.battery-dashboard{grid-template-columns:1fr;gap:16px}}@media (max-width: 900px){.battery-page{gap:16px}.battery-page .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.battery-page .analytics-grid{grid-template-columns:1fr;gap:8px}.soc-widget{padding:20px}.battery-history-section{padding:20px;margin-bottom:80px}}.battery-history-section{padding:32px;display:flex;flex-direction:column;gap:16px;flex:1}.battery-page .metric-card{padding:20px 24px;border-radius:20px;display:flex;align-items:center;gap:16px;min-width:0;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.battery-page .metric-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.battery-page .metric-icon{width:52px;height:52px;border-radius:14px;flex-shrink:0}.battery-page .metric-info{display:flex;flex-direction:column;min-width:0;overflow:hidden}.battery-page .metric-label{font-size:.85rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;white-space:nowrap}.battery-page .metric-value{font-size:1.8rem;font-weight:800;color:var(--text-color);line-height:1;white-space:nowrap}.battery-page .unit{font-size:1.5rem;font-weight:600;color:var(--text-muted);margin-left:8px}@media (max-width: 900px){.battery-page .metric-card{padding:12px;gap:8px;border-radius:12px;flex-direction:column;justify-content:center}.battery-page .metric-info{align-items:center}.battery-page .metric-icon{width:36px;height:36px;border-radius:10px}.battery-page .metric-label{font-size:.75rem;margin-bottom:2px;letter-spacing:.5px;text-align:center}.battery-page .metric-value{font-size:1.4rem}.battery-page .unit{font-size:.85rem;margin-left:2px}.battery-page .analytics-grid .metric-card{padding:12px 16px;flex-direction:row;justify-content:space-between}.battery-page .analytics-grid .metric-icon{width:36px;height:36px}}.nav-arrow-btn.disabled{opacity:.3;cursor:not-allowed}.date-display-box{display:flex;align-items:center;gap:12px;color:var(--text-color);font-weight:600;font-size:1.1rem}.grid-page{display:flex;flex-direction:column;gap:24px;padding:10px;animation:fadeIn .4s ease-out;flex:1}.grid-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-radius:16px;flex-wrap:wrap;gap:16px}.title-wrapper{display:flex;align-items:center;gap:16px}.page-title{margin:0;font-size:1.5rem;font-weight:700;color:var(--text-color)}.subtitle{margin:0;font-size:.9rem;color:var(--text-muted)}.status-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:600;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.status-badge.online{color:#10b981;background:#10b9811a;border-color:#10b98133}.status-badge.offline{color:#ef4444;background:#ef44441a;border-color:#ef444433}.status-dot{width:8px;height:8px;border-radius:50%;background-color:#f59e0b}.status-badge.online .status-dot{background-color:#10b981;box-shadow:0 0 8px #10b981}.status-badge.offline .status-dot{background-color:#ef4444;box-shadow:0 0 8px #ef4444}.grid-dashboard{display:flex;flex-direction:column;flex:1;gap:24px}.grid-page .metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 768px){.grid-page .metrics-grid{grid-template-columns:1fr}}.metric-card{padding:40px 32px;border-radius:20px;display:flex;align-items:center;gap:24px;transition:transform .2s ease,box-shadow .2s ease}.metric-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.metric-icon{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center}.metric-info{display:flex;flex-direction:column}.metric-label{font-size:1.3rem;color:var(--text-muted);margin-bottom:8px}.metric-value{font-size:3.2rem;font-weight:700;color:var(--text-color)}.unit{font-size:1.5rem;font-weight:500;color:var(--text-muted);margin-left:6px}.timeline-section{padding:40px;border-radius:24px;display:flex;flex-direction:column;flex:1;gap:40px}.widget-title{font-size:1.1rem;color:var(--text-muted);margin:0;font-weight:600}.timeline-container{width:100%;position:relative;display:flex;flex-direction:column;justify-content:center}.timeline-track{width:100%;height:32px;background:#ffffff0d;border-radius:16px;position:relative;overflow:hidden}.timeline-segment{position:absolute;height:100%;top:0;transition:all .3s ease}.timeline-segment.active,.timeline-segment.online{background:#10b981}.timeline-segment.inactive,.timeline-segment.offline{background:#ef4444}.timeline-segment.nodata{background:#ffffff14}.timeline-labels{display:flex;justify-content:space-between;margin-top:16px;color:var(--text-secondary);font-size:1rem}.timeline-pills-row{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap}.timeline-pills-sub-row{display:flex;gap:24px;flex:2}.timeline-pill{flex:1;min-width:200px;display:flex;align-items:center;gap:20px;padding:24px 32px;border-radius:20px}.timeline-pill.shedding{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:#ef4444}.timeline-pill.import{background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);color:#f59e0b}.timeline-pill.export{background:#10b9811a;border:1px solid rgba(16,185,129,.2);color:#10b981}.pill-info{display:flex;flex-direction:column}.pill-label{font-size:1rem;color:var(--text-muted);font-weight:500;margin-bottom:4px}.pill-val{font-size:2rem;font-weight:700;color:inherit}.pill-unit{font-size:1.1rem;font-weight:500;opacity:.8;margin-left:4px}.mobile-grid-status{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;font-size:1rem;font-weight:700;letter-spacing:.5px}.mobile-grid-status.online{color:#10b981;background:#10b98114;border:1px solid rgba(16,185,129,.2)}.mobile-grid-status.online .status-dot{background-color:#10b981;box-shadow:0 0 8px #10b981}.mobile-grid-status.offline{color:#ef4444;background:#ef444414;border:1px solid rgba(239,68,68,.2)}.mobile-grid-status.offline .status-dot{background-color:#ef4444;box-shadow:0 0 8px #ef4444}@media (max-width: 900px){.grid-page{gap:10px;max-width:100%;overflow-x:hidden;box-sizing:border-box}.grid-dashboard{gap:10px}.timeline-section{padding:20px;gap:20px;margin-bottom:80px}.grid-page .metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}.grid-page .metric-card{padding:12px 8px;border-radius:12px;flex-direction:column;gap:6px;text-align:center}.grid-page .metric-card:hover{transform:none}.grid-page .metric-icon{width:36px;height:36px;border-radius:10px}.grid-page .metric-label{font-size:.65rem;margin-bottom:2px;white-space:nowrap}.grid-page .metric-value{font-size:1.3rem}.grid-page .unit{font-size:.8rem;margin-left:2px}.timeline-section{padding:20px;gap:20px}.timeline-track{height:20px;border-radius:10px}.timeline-labels{font-size:.75rem;margin-top:8px}.timeline-pills-row{flex-direction:column;gap:10px;margin-top:8px}.timeline-pill{min-width:0;padding:14px 16px;border-radius:14px;gap:12px}.timeline-pill.shedding{flex:1 1 100%}.timeline-pills-sub-row{display:flex;flex-direction:column;gap:10px}.pill-label{font-size:.8rem;margin-bottom:2px}.pill-val{font-size:1.3rem}.pill-unit{font-size:.85rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.timeline-tooltip{position:absolute;top:-65px;transform:translate(-50%);padding:10px 14px;border-radius:12px;background:#141419f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;gap:6px;z-index:100;min-width:120px;pointer-events:none;animation:tooltipFade .2s ease-out}.timeline-tooltip:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0;border-style:solid;border-color:rgba(255,255,255,.1) transparent transparent transparent}.tooltip-status{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--text-color)}.tooltip-time{font-size:.85rem;color:var(--text-muted);font-family:monospace}@keyframes tooltipFade{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.graphs-page-container{display:flex;flex-direction:column;gap:20px;width:100%}.graphs-header-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.page-title{font-size:1.5rem;font-weight:800;margin:0;color:#fff}.page-subtitle{font-size:.85rem;color:var(--text-secondary);margin:4px 0 0}.timeframe-pill-selector{display:flex;background:#18181bcc;border:1px solid rgba(255,255,255,.1);padding:4px;border-radius:12px;gap:4px}.timeframe-btn{background:transparent;border:none;color:var(--text-secondary);padding:8px 18px;border-radius:99px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s ease}.timeframe-btn:hover{color:#fff}.timeframe-btn.active{background:var(--accent-gradient);color:#000;box-shadow:0 4px 14px #f59e0b59}.date-navigator-card{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-radius:16px}.nav-arrow-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#fff;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.nav-arrow-btn:hover:not(.disabled){background:#f59e0b26;border-color:#f59e0b4d;color:var(--accent-color)}.nav-arrow-btn.disabled{opacity:.3;cursor:not-allowed;border-color:transparent}.date-display-box{display:flex;align-items:center;gap:10px}.calendar-icon{color:var(--accent-color)}.date-label-text{font-size:1rem;font-weight:700;color:#fff}.metric-toggles-bar{display:flex;flex-wrap:wrap;gap:10px}.metric-toggle-chip{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1px solid;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .2s ease}.metric-toggle-chip.inactive{opacity:.55;filter:grayscale(.5)}.metric-toggle-chip:hover{transform:translateY(-1px);opacity:1}.chip-status-dot{width:6px;height:6px;border-radius:50%}.chart-wrapper-card{padding:20px;display:flex;flex-direction:column;gap:16px}.chart-header-info{display:flex;justify-content:flex-end;align-items:center}.chart-type-badge{font-size:.82rem;font-weight:700;color:var(--text-secondary);background:#ffffff0a;padding:4px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.06)}.chart-canvas-container{width:100%;height:450px}.graphs-tooltip{background:#18181bf2;border:1px solid rgba(255,255,255,.12);padding:12px 16px;border-radius:14px;box-shadow:0 10px 30px #000000b3}.tooltip-header{font-size:12px;font-weight:700;color:var(--text-secondary);margin:0 0 8px}.tooltip-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:4px}.tooltip-row:last-child{margin-bottom:0}.tooltip-dot{width:8px;height:8px;border-radius:50%}.tooltip-lbl{color:var(--text-secondary)}.tooltip-val{font-weight:700;color:#fff;margin-left:auto}.totals-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}.total-stat-card{padding:16px;display:flex;flex-direction:column;gap:10px}.total-card-header{display:flex;align-items:center;gap:10px}.total-icon-box{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center}.total-lbl{font-size:.8rem;color:var(--text-secondary);font-weight:600}.total-val{font-size:1.25rem;font-weight:800}.graphs-bottom-spacer{display:none}@media (max-width: 840px){.graphs-header-row{flex-direction:column;align-items:flex-start}.timeframe-wrapper{width:100%}.timeframe-pill-selector{width:100%;justify-content:space-between}.timeframe-btn{flex:1;text-align:center}.chart-canvas-container{height:240px}.graphs-bottom-spacer{display:none}.metric-toggles-bar{gap:6px}.metric-toggle-chip{padding:8px 10px;border-radius:10px;gap:0}.toggle-chip-label,.chip-status-dot{display:none}.totals-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:80px}.total-stat-card{padding:10px 6px;border-radius:12px;align-items:center;text-align:center;gap:4px}.total-card-header{flex-direction:column;align-items:center;gap:4px}.total-icon-box{width:32px;height:32px;border-radius:8px}.total-lbl{font-size:.65rem;white-space:nowrap}.total-val{font-size:1.05rem}}.fullscreen-toggle-btn{display:flex;align-items:center;gap:6px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text-secondary);padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.fullscreen-toggle-btn:hover{background:#f59e0b26;color:var(--accent-color);border-color:#f59e0b4d}.chart-fullscreen-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:999999;background:#09090b;display:flex;flex-direction:column;padding:16px;gap:12px;animation:fadeIn .25s ease-out;box-sizing:border-box;overflow:hidden}.fullscreen-modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.modal-title-group{display:flex;align-items:center;gap:10px}.modal-date-badge{font-size:1.1rem;font-weight:700;color:#fff}.modal-view-badge{font-size:.75rem;font-weight:800;color:var(--accent-color);background:#f59e0b1f;padding:4px 8px;border-radius:6px}.fullscreen-close-btn{display:flex;align-items:center;gap:6px;background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:8px 16px;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer}.fullscreen-chart-body{flex:1;width:100%;min-height:0;overflow:hidden}.stats-page-container{display:flex;flex-direction:column;gap:20px;width:100%}.stats-header-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.table-search-box{display:flex;align-items:center;gap:10px;background:#18181bcc;border:1px solid rgba(255,255,255,.1);padding:8px 16px;border-radius:12px;flex:1;min-width:200px}.search-icon{color:var(--text-secondary)}.table-search-input{background:transparent;border:none;color:#fff;font-size:.9rem;width:100%;outline:none}.table-search-input::placeholder{color:var(--text-muted)}.csv-export-btn{display:flex;align-items:center;gap:8px;background:#f59e0b1f;border:1px solid rgba(245,158,11,.3);color:#fbbf24;padding:8px 18px;border-radius:12px;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s ease}.csv-export-btn:hover{background:#f59e0b40;transform:translateY(-1px);box-shadow:0 4px 14px #f59e0b4d}.table-card{padding:0;overflow:hidden;border-radius:16px}.table-scroll-wrapper{overflow-x:auto;width:100%;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(245,158,11,.4) rgba(24,24,27,.8)}.table-scroll-wrapper::-webkit-scrollbar{height:6px}.table-scroll-wrapper::-webkit-scrollbar-track{background:#18181bcc;border-radius:6px;margin:0 12px}.table-scroll-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#f59e0b80,#ef444480);border-radius:6px;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 8px #f59e0b66}.table-scroll-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#f59e0bcc,#ef4444cc)}.telemetry-table{width:100%;border-collapse:collapse;text-align:left;font-size:.88rem}.telemetry-table th{background:#ffffff08;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--text-secondary);font-weight:600;-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap}.telemetry-table th:hover{background:#ffffff0f;color:#fff}.header-cell-content{display:flex;align-items:center;gap:8px}.sort-icon{opacity:.3;margin-left:auto;transition:opacity .2s}.sort-icon.active{opacity:1;color:var(--accent-color)}.telemetry-table td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.04);white-space:nowrap}.telemetry-table tr.data-row:hover{background:#ffffff08}.totals-row{background:#f59e0b0f!important;border-bottom:2px solid rgba(245,158,11,.2)!important;font-weight:700}.period-cell{color:#fff;font-weight:600}.metric-cell{font-weight:600}.val-amber{color:#fbbf24}.val-blue{color:#60a5fa}.val-red{color:#ef4444}.val-green{color:#10b981}.val-purple{color:#a855f7}.val-light-purple{color:#c084fc}.empty-table-cell{text-align:center;padding:40px!important;color:var(--text-muted);font-style:italic}.data-bottom-spacer{display:none}@media (max-width: 840px){.data-bottom-spacer{display:block!important;height:94px!important;width:100%;flex-shrink:0;pointer-events:none}}.inverter-settings-container{display:flex;flex-direction:column;gap:20px;max-width:1400px;margin:0 auto;padding:20px;position:relative}@media (max-width: 768px){.inverter-settings-container{padding:12px 0 100px}}.pull-to-refresh-indicator{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--accent-color, #f59e0b);font-size:.85rem;font-weight:600;overflow:hidden;transition:height .1s ease,opacity .1s ease}.settings-page-header{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-radius:16px;background:var(--glass-bg, rgba(30, 30, 40, .7));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08))}.refresh-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#f1f5f9;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.refresh-btn:hover:not(:disabled){background:#f59e0b26;border-color:#f59e0b66;color:#f59e0b}.settings-toast{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;font-size:.9rem;font-weight:600}.settings-toast.success{background:#22c55e26;border:1px solid rgba(34,197,94,.4);color:#4ade80}.settings-toast.error{background:#ef444426;border:1px solid rgba(239,68,68,.4);color:#f87171}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:16px;color:#94a3b8;border-radius:16px}.settings-layout-sections{display:flex;flex-direction:column;gap:20px}.cards-row.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width: 900px){.cards-row.two-columns{grid-template-columns:1fr}}.settings-card{padding:24px;border-radius:16px;background:var(--glass-bg, rgba(30, 30, 40, .7));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08));display:flex;flex-direction:column;gap:14px;width:100%;box-sizing:border-box}.settings-card.full-width{width:100%}.card-header{display:flex;align-items:center;gap:10px}.card-header h3{font-size:1.1rem;font-weight:700;color:#f1f5f9;margin:0}.card-icon,.card-icon.export{color:#f59e0b}.card-icon.output{color:#3b82f6}.card-icon.charger{color:#10b981}.card-icon.ac2{color:#a855f7}.card-icon.battery-v{color:#ec4899}.card-desc{font-size:.85rem;color:#94a3b8;margin:0;line-height:1.4}.info-list{display:flex;flex-direction:column;gap:10px}.info-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#ffffff08;border-radius:10px;font-size:.9rem}.info-label{color:#94a3b8}.info-value.badge{background:#f59e0b33;color:#f59e0b;padding:4px 10px;border-radius:6px;font-weight:700}.info-value.code{font-family:monospace;color:#cbd5e1}.info-value.highlight{color:#f8fafc;font-weight:600}.setting-control-row{display:flex;flex-direction:column;gap:12px;margin-top:4px}.status-pill{padding:6px 14px;border-radius:8px;font-size:.85rem;font-weight:600;display:inline-block}.status-pill.enabled{background:#22c55e33;color:#4ade80;border:1px solid rgba(34,197,94,.3)}.status-pill.disabled{background:#ef444433;color:#f87171;border:1px solid rgba(239,68,68,.3)}.toggle-btn-group{display:flex;gap:10px}.action-btn{flex:1;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#94a3b8;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.action-btn.active{background:#f59e0b33;border-color:#f59e0b;color:#f59e0b}.action-btn.danger.active{background:#ef444433;border-color:#ef4444;color:#f87171}.action-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.current-badge{font-size:.85rem;color:#e2e8f0;background:#ffffff08;padding:8px 12px;border-radius:8px}.priority-container-desktop{display:flex;flex-direction:column;gap:12px;width:100%}.mobile-dropdown-container{margin-top:8px}.unified-glass-select-wrapper{position:relative;display:flex;align-items:center;background:#18181bd9;border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:10px 14px;gap:10px;transition:all .2s ease;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.unified-glass-select-wrapper:hover{border-color:#f59e0b;box-shadow:0 4px 16px #f59e0b33}.select-prefix-icon{color:#f59e0b;flex-shrink:0}.unified-glass-select{width:100%;background:transparent;border:none;color:#f8fafc;font-size:.9rem;font-weight:700;cursor:pointer;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;font-family:inherit;padding-right:24px}.dark-option{background:#18181b;color:#f8fafc;font-weight:600;padding:10px}.select-chevron-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#f59e0b;pointer-events:none}.options-grid.three-single-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.options-grid.three-single-row .option-btn.tall-btn{min-height:98px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px}.option-btn{border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:#94a3b8;font-size:.85rem;cursor:pointer;transition:all .2s ease}.option-btn.selected{border-color:#f59e0b;background:#f59e0b26;color:#f59e0b;font-weight:600}.option-btn:hover:not(:disabled){border-color:#f59e0b80}.cmd-tag{font-size:.7rem;opacity:.7;margin-top:4px}.voltage-thresholds-grid.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}@media (max-width: 768px){.voltage-thresholds-grid.two-cols.ac2-rows-mobile{grid-template-columns:1fr}}.voltage-thresholds-grid.three-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:6px}.voltage-input-card{display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;gap:12px}.vol-title-box{display:flex;flex-direction:column;gap:2px}.vol-title{font-size:.95rem;font-weight:600;color:#f1f5f9}.vol-sub{font-size:.75rem;color:#94a3b8}.vol-input-group{display:flex;align-items:center;gap:8px}.vol-input{width:85px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#0000004d;color:#f59e0b;font-size:1rem;font-weight:700;text-align:center}.vol-unit{font-weight:600;color:#94a3b8}.apply-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid rgba(245,158,11,.3);background:#f59e0b26;color:#f59e0b;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.apply-btn:hover:not(:disabled){background:#f59e0b;color:#0f172a}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.automations-container{display:flex;flex-direction:column;gap:20px;max-width:1400px;margin:0 auto;padding:20px}.automations-header{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-radius:16px;background:var(--glass-bg, rgba(30, 30, 40, .7));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08))}.header-title-box{display:flex;align-items:center;gap:16px}.header-icon{color:var(--accent-color, #f59e0b)}.header-title-box h2{font-size:1.4rem;font-weight:700;margin:0 0 4px;color:#f8fafc}.header-title-box .subtitle{font-size:.85rem;color:#94a3b8;margin:0}.header-controls{display:flex;align-items:center;gap:12px}.add-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;background:#f59e0b26;border:1px solid rgba(245,158,11,.4);color:#f59e0b;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#f59e0b;color:#0f172a}.mobile-portal-add-btn{padding:6px 12px;font-size:.8rem;border-radius:8px}.empty-state,.empty-automations{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:24px;gap:12px;text-align:left;border-radius:16px;background:#1e1e28b3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #0000004d;width:100%;box-sizing:border-box}.empty-icon{color:#f59e0b;width:36px;height:36px}.empty-state h3,.empty-automations h3{color:#f8fafc;font-size:1.15rem;font-weight:700;margin:0}.empty-state p,.empty-automations p{color:#94a3b8;font-size:.88rem;line-height:1.4;margin:0}.automations-list,.automations-grid{display:flex;flex-direction:column;gap:14px;width:100%;box-sizing:border-box}@media (min-width: 769px){.automations-grid{display:flex;flex-direction:column;gap:14px}.automation-card{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:14px 28px;border-radius:16px;background:var(--glass-bg, rgba(30, 30, 40, .7));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08));gap:24px;transition:all .2s ease}.automation-card:hover{border-color:#f59e0b4d;box-shadow:0 8px 24px #0000004d}.card-left-section{display:flex;align-items:center;gap:16px;min-width:260px}.auto-name{font-size:1rem;font-weight:700;color:#f8fafc;margin:0;white-space:nowrap}.actions-pills-list{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;flex:1}.action-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:10px;font-size:.82rem;white-space:nowrap}.card-right-section{display:flex;align-items:center;gap:12px;flex-shrink:0}}@media (max-width: 768px){.automations-container,.automations-page{padding:16px 16px 100px!important;width:100%;box-sizing:border-box}.automations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.automation-card{padding:20px;border-radius:16px;background:var(--glass-bg, rgba(30, 30, 40, .7));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border, rgba(255, 255, 255, .08));display:flex;flex-direction:column;gap:14px;transition:all .2s ease}.card-left-section{display:flex;align-items:center;width:100%}.auto-name{font-size:1.1rem;font-weight:700;color:#f8fafc;margin:0}.actions-pills-list{display:flex;flex-direction:column;gap:8px;width:100%}.action-pill{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#ffffff08;border-radius:8px;font-size:.85rem}.card-right-section{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:4px}.card-right-section .time-badge{margin-right:auto}}.automation-card.disabled{opacity:.55;border-color:#ffffff0a}.time-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:#f59e0b26;border:1px solid rgba(245,158,11,.3);color:#f59e0b;font-size:.95rem;font-weight:700;white-space:nowrap}.inverter-tag{font-size:.75rem;font-weight:700;background:#ffffff0f;color:#cbd5e1;padding:4px 8px;border-radius:6px}.toggle-switch{width:44px;height:24px;border-radius:12px;background:#ffffff26;border:1px solid rgba(255,255,255,.1);padding:2px;cursor:pointer;transition:all .2s ease}.toggle-switch.active{background:#10b981;border-color:#10b981}.switch-thumb{width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s ease}.toggle-switch.active .switch-thumb{transform:translate(20px)}.icon-action-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#94a3b8;padding:6px;border-radius:8px;cursor:pointer;transition:all .2s ease}.icon-action-btn:hover{background:#f59e0b33;color:#f59e0b}.icon-action-btn.danger:hover{background:#ef444433;color:#f87171}.pill-label{color:#94a3b8}.pill-value{color:#f59e0b;font-weight:600}.modal-overlay{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:#000000c7!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important;overflow:hidden!important;touch-action:none!important}.automation-modal{width:100%;max-width:500px;max-height:90vh;overflow:hidden;background:#121620fa;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:20px;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px;padding:20px;box-shadow:0 24px 60px #000000e6;box-sizing:border-box;margin:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}.modal-header h3{font-size:1.15rem;font-weight:700;color:#f8fafc;margin:0}.close-btn{background:transparent;border:none;color:#94a3b8;cursor:pointer;padding:4px;border-radius:6px;transition:all .2s ease}.close-btn:hover{color:#f8fafc;background:#ffffff14}.modal-body{display:flex;flex-direction:column;gap:12px}.form-group{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.form-row{display:flex;gap:10px;width:100%;box-sizing:border-box}.embedded-field-box{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#0006;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:5px 12px;min-height:44px;box-sizing:border-box;position:relative;transition:border-color .2s ease}.embedded-field-box:focus-within{border-color:#f59e0b}.embedded-field-input{width:100%;background:transparent;border:none;color:#f8fafc;font-size:.85rem;font-weight:600;outline:none;padding:0;margin:0;box-sizing:border-box}.embedded-field-input::placeholder{color:#64748b}.splits-carousel-viewport{overflow:hidden;width:100%;position:relative;box-sizing:border-box;touch-action:pan-y}.splits-carousel-track{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform;width:100%}.split-card{flex:0 0 100%;min-width:100%;max-width:100%;box-sizing:border-box;padding:0 2px}.action-card-box{background:#00000059;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;box-sizing:border-box;width:100%}.action-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.action-card-title{font-size:.8rem;font-weight:700;color:#cbd5e1}.delete-action-btn{background:transparent;border:none;color:#f87171;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.delete-action-btn:hover{background:#ef444433}.splits-pagination{display:flex;align-items:center;gap:12px;margin-top:8px;width:100%}.splits-dots{display:flex;gap:6px;align-items:center}.split-dot{width:8px;height:8px;border-radius:50%;background:#fff3;transition:all .3s ease;cursor:pointer}.split-dot.active{background:#f59e0b;transform:scale(1.25);box-shadow:0 0 8px #f59e0b99}.pagination-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#f8fafc;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.pagination-btn:hover:not(:disabled){background:#f59e0b33;border-color:#f59e0b;color:#f59e0b}.pagination-btn:disabled{opacity:.3;cursor:not-allowed}.add-split-btn-pagination{background:#f59e0b26;color:#f59e0b;border:1px solid rgba(245,158,11,.3);padding:6px 12px;border-radius:20px;cursor:pointer;font-weight:700;font-size:.8rem;display:flex;align-items:center;gap:4px;margin-left:auto;transition:all .2s ease}.add-split-btn-pagination:hover{background:#f59e0b40;border-color:#f59e0b}.modal-input:focus{border-color:#f59e0b}.popup-time-picker-wrapper{position:relative;width:100%}.time-display-field{display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left;transition:all .2s ease}.time-display-field:hover,.time-display-field.active-open{border-color:#f59e0b;background:#f59e0b1a}.field-clock-icon{color:#f59e0b;margin-right:8px}.field-time-text{font-weight:700;color:#f8fafc;font-size:.95rem;flex:1}.field-chevron{color:#94a3b8;transition:transform .2s ease}.field-chevron.rotate{transform:rotate(180deg);color:#f59e0b}.time-picker-popup{position:absolute;top:calc(100% + 8px);right:0;z-index:200;width:280px;background:#1e1e28b3!important;border:1px solid rgba(245,158,11,.3)!important;border-radius:16px;padding:16px;box-shadow:0 16px 36px #000000b3;display:flex;flex-direction:column;gap:14px}.picker-main-display{display:flex;align-items:center;justify-content:center;gap:12px}.time-column{display:flex;flex-direction:column;align-items:center;gap:4px}.step-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#f59e0b;width:36px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.step-btn:hover{background:#f59e0b40;border-color:#f59e0b}.time-digit-box{background:#00000080;border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:6px 12px;font-size:1.6rem;font-weight:800;color:#f8fafc;font-family:monospace;min-width:52px;text-align:center}.time-colon{font-size:1.8rem;font-weight:800;color:#f59e0b;margin-bottom:16px}.column-label{font-size:.68rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.period-column{margin-left:4px}.period-toggle-btn{height:54px;width:56px;border-radius:10px;font-size:1.1rem;font-weight:800;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15)}.period-toggle-btn.active-am{background:#f59e0b40;border-color:#f59e0b;color:#fbbf24}.period-toggle-btn.active-pm{background:#a855f740;border-color:#a855f7;color:#c084fc}.popup-set-btn{width:100%;padding:8px;border-radius:8px;background:#f59e0b;color:#0f172a;font-size:.85rem;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease}.popup-set-btn:hover{background:#d97706;color:#fff}.builder-header{display:flex;justify-content:space-between;align-items:center}.add-action-btn{display:inline-flex;align-items:center;gap:4px;background:#f59e0b26;border:1px solid rgba(245,158,11,.3);color:#f59e0b;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer}.builder-actions-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}.builder-row{display:flex;align-items:center;gap:10px}.action-type-select{flex:1.2}.action-val-select{flex:1}.num-input-wrapper{flex:1;display:flex;align-items:center;gap:6px}.num-input{width:80px!important;text-align:center;font-weight:700;color:#f59e0b}.num-unit{font-size:.85rem;color:#94a3b8;font-weight:600}.remove-action-btn{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#f87171;padding:8px;border-radius:8px;cursor:pointer}.remove-action-btn:disabled{opacity:.3;cursor:not-allowed}.add-automation-btn,.add-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;background:#f59e0b2e;border:1px solid rgba(245,158,11,.4);color:#f59e0b;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s ease;white-space:nowrap}.add-automation-btn:hover,.add-btn:hover{background:#f59e0b;color:#0f172a;box-shadow:0 4px 16px #f59e0b4d}.add-automation-btn.mini-btn{padding:6px 12px;font-size:.8rem}.save-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;background:#f59e0b;color:#0f172a;font-size:.9rem;font-weight:700;border:none;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#fbbf24;box-shadow:0 4px 16px #f59e0b66}.cancel-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#94a3b8;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.cancel-btn:hover{background:#ffffff1a;color:#f8fafc}.form-group{display:flex;flex-direction:column;gap:4px;flex:1 1 50%;min-width:0}.form-row{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;box-sizing:border-box}.modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}