*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}ul,ol{list-style:none}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}#app{width:1920px;height:1080px;background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%);display:flex;flex-direction:column;transform-origin:left top;position:absolute;left:0;top:0}.header{height:80px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;z-index:10}.main-content{flex:1;display:flex;gap:var(--gap-md);padding:0 var(--gap-lg) var(--gap-lg);min-height:0}.panel-left{width:440px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--gap-md);overflow-y:auto;overflow-x:hidden;padding-right:4px}.panel-center{flex:1;display:flex;flex-direction:column;gap:var(--gap-md);min-width:0}.panel-right{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--gap-md);overflow-y:auto;overflow-x:hidden;padding-left:4px}.panel-box{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--gap-md) var(--gap-lg);position:relative;box-shadow:0 0 20px var(--accent-glow)}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-md);font-size:var(--font-size-md);font-weight:700;position:relative;z-index:10}.panel-title .title-left{display:flex;align-items:center;gap:var(--gap-sm)}.panel-title .title-bar{width:3px;height:16px;background:var(--accent);border-radius:2px}.panel-title .more{font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer}.panel-title .more:hover{color:var(--accent)}.corner-decoration{position:absolute;width:16px;height:16px}.corner-decoration:before,.corner-decoration:after{content:"";position:absolute;background:var(--accent)}.corner-decoration.top-left{top:-1px;left:-1px}.corner-decoration.top-left:before{width:16px;height:2px;top:0;left:0}.corner-decoration.top-left:after{width:2px;height:16px;top:0;left:0}.corner-decoration.top-right{top:-1px;right:-1px}.corner-decoration.top-right:before{width:16px;height:2px;top:0;right:0}.corner-decoration.top-right:after{width:2px;height:16px;top:0;right:0}.corner-decoration.bottom-left{bottom:-1px;left:-1px}.corner-decoration.bottom-left:before{width:16px;height:2px;bottom:0;left:0}.corner-decoration.bottom-left:after{width:2px;height:16px;bottom:0;left:0}.corner-decoration.bottom-right{bottom:-1px;right:-1px}.corner-decoration.bottom-right:before{width:16px;height:2px;bottom:0;right:0}.corner-decoration.bottom-right:after{width:2px;height:16px;bottom:0;right:0}.refresh-icon{width:16px;height:16px;cursor:pointer;color:var(--text-secondary);transition:transform .3s}.refresh-icon:hover{transform:rotate(180deg);color:var(--accent)}.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:3px;font-size:var(--font-size-xs);background:var(--accent);color:var(--bg-primary);font-weight:700}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.3}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.panel-content-img{padding:10px;height:160px;display:flex;justify-content:center;align-items:center}.panel-content-img img{width:100%;height:100%;object-fit:cover;border-radius:4px;border:1px solid rgba(77,200,255,.3);box-shadow:0 0 10px #4dc8ff1a;transition:all .3s ease}.panel-content-img img:hover{border-color:#4dc8ffcc;box-shadow:0 0 15px #4dc8ff66}.section-divider{border-top:1px solid var(--border-light);margin:10px 0}.time-info{display:flex;align-items:center;gap:var(--gap-sm);font-size:var(--font-size-xs);color:var(--text-secondary)}.env-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.env-card{background:linear-gradient(135deg,#0f2847,#0a1e3a);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 12px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s;text-align:center}.env-card:hover{transform:translateY(-2px);border-color:var(--accent-dim)}.env-card-header{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}.env-card-icon{font-size:14px}.env-card-label{font-size:11px;color:var(--text-secondary)}.env-card-value{font-size:24px;font-weight:700;font-family:var(--font-mono);letter-spacing:.5px;line-height:1.2}.env-card-unit{font-size:11px;color:var(--text-secondary);margin-left:2px;font-weight:400}.env-card-range{font-size:10px;color:var(--text-muted);margin-top:4px;font-family:var(--font-mono)}.env-card-probes{font-size:9px;color:var(--text-muted);margin-top:2px;opacity:.7}.env-card-line{position:absolute;bottom:0;left:0;right:0;height:2px}.fluid-columns{display:flex;gap:0}.fluid-col{flex:1;padding:8px 12px}.fluid-divider{width:1px;background:var(--border-color);margin:8px 0}.fluid-col-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-primary);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border-light)}.fluid-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.fluid-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;gap:4px}.fluid-label{font-size:11px;color:var(--text-secondary);flex-shrink:0}.fluid-value{font-size:14px;font-weight:700;font-family:var(--font-mono)}.fluid-unit{font-size:9px;color:var(--text-muted);flex-shrink:0;min-width:30px;text-align:right}.fluid-loading{text-align:center;color:var(--text-muted);padding:20px;font-size:12px}.power-daily{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.power-row{display:flex;flex-direction:column;gap:4px}.power-label-row{display:flex;justify-content:space-between;align-items:center}.power-label{font-size:11px;color:var(--text-secondary)}.power-value{font-size:13px;font-weight:700;font-family:var(--font-mono)}.power-bar-track{height:6px;background:#0a1225;border-radius:3px;overflow:hidden;border:1px solid var(--border-light)}.power-bar-fill{height:100%;border-radius:3px;transition:width .6s ease;box-shadow:0 0 6px currentColor}.power-total{display:flex;gap:var(--gap-md);padding-top:8px;border-top:1px solid var(--border-light)}.power-total-item{flex:1;display:flex;flex-direction:column;gap:2px}.power-total-label{font-size:10px;color:var(--text-muted)}.power-total-value{font-size:13px;font-weight:700;font-family:var(--font-mono);color:var(--text-secondary)}.power-loading{text-align:center;color:var(--text-muted);padding:15px;font-size:12px}.trend-section{flex:1;display:flex;flex-direction:column;min-height:0}.trend-chart-container{flex:1;width:100%;min-height:0}.stats-row{display:flex;gap:var(--gap-md);align-items:stretch;margin-bottom:15px}.stat-card{flex:1;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 12px;text-align:center;position:relative;overflow:hidden}.stat-card .stat-label{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:4px}.stat-card .stat-value{font-size:var(--font-size-xl);font-weight:700;font-family:var(--font-mono)}.stat-card .stat-unit{font-size:var(--font-size-xs);color:var(--text-secondary)}.stat-card .stat-line{position:absolute;bottom:0;left:20%;right:20%;height:2px;border-radius:1px}.datetime-card{flex:1.5;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.datetime-card .date-text{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:4px}.datetime-card .time-display{display:flex;gap:2px;align-items:center}.datetime-card .time-digit{background:#0a1225;border:1px solid var(--border-color);border-radius:3px;padding:2px 5px;font-size:18px;font-family:var(--font-mono);font-weight:700;color:var(--accent);min-width:24px;text-align:center}.datetime-card .time-colon{font-size:18px;font-family:var(--font-mono);color:var(--accent);font-weight:700}.weather-bar{display:flex;align-items:center;justify-content:center;gap:var(--gap-xl);padding:8px var(--gap-lg);background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--text-secondary)}.weather-bar .weather-item{display:flex;align-items:center;gap:4px}.weather-bar .weather-divider{width:1px;height:14px;background:var(--border-color)}.weather-bar .weather-value{color:var(--text-primary)}.main-video{width:100%;flex:1;min-height:400px;background:#0a1225;border:1px solid var(--border-color);border-radius:var(--radius-lg);position:relative;overflow:hidden;margin-bottom:20px}.main-video .video-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#0d2a1a,#0a1628 40%,#0d1f3c);opacity:.9}.main-video .video-farm-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 30% 60%,#1a4a2a44 0%,transparent 60%),radial-gradient(ellipse at 70% 40%,#0d3a4a33 0%,transparent 50%),linear-gradient(180deg,#0a1628,#0d2a1a,#0a1225)}.main-video .play-btn{width:60px;height:60px;border:2px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:all .3s;background:#0000004d}.main-video .play-btn:hover{border-color:var(--accent);background:#4dc8ff26}.main-video .play-btn:after{content:"";width:0;height:0;border-left:18px solid rgba(255,255,255,.8);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px}.main-video .video-overlay{position:absolute;top:0;left:0;right:0;padding:10px 14px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}.main-video .hd-tag{background:var(--accent);color:#000;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:700}.main-video .rec-indicator{display:flex;align-items:center;gap:4px;font-size:11px;color:#f44;font-weight:700}.main-video .rec-dot{width:8px;height:8px;border-radius:50%;background:#f44;animation:breathe 1.5s ease-in-out infinite}.main-video .video-timestamp{position:absolute;bottom:10px;right:14px;font-size:11px;color:#ffffff80;font-family:var(--font-mono);z-index:2}.video-overlay .sound-toggle{cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#ffffffb3;transition:all .3s;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.video-overlay .sound-toggle:hover{color:#fff;background:#0009;border-color:#fff6}.video-overlay .sound-toggle svg{width:16px;height:16px}.bottom-control-bar{display:flex;flex-direction:column}.bottom-control-bar .panel-title{margin-bottom:var(--gap-sm)}.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap-sm)}.channel-card{background:#0a1225b3;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px 14px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden}.channel-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(77,200,255,.03) 0%,transparent 60%);transition:opacity .3s;opacity:0}.channel-card:hover{border-color:var(--accent-dim);background:#0d1f3ce6;transform:translateY(-1px);box-shadow:0 4px 12px #4dc8ff14}.channel-card:hover:before{opacity:1}.channel-card.active{border-color:var(--accent);background:#4dc8ff14;box-shadow:0 0 16px #4dc8ff26,inset 0 0 20px #4dc8ff0d}.channel-card.active:before{opacity:1;background:linear-gradient(135deg,rgba(77,200,255,.08) 0%,transparent 60%)}.channel-icon{width:32px;height:32px;border-radius:6px;background:#4dc8ff14;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}.channel-card.active .channel-icon{background:#4dc8ff26;border-color:var(--accent-dim)}.channel-icon svg{width:16px;height:16px;color:var(--text-secondary);transition:color .3s}.channel-card.active .channel-icon svg{color:var(--accent)}.channel-info{flex:1;min-width:0}.channel-name{font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s;line-height:1.3}.channel-card.active .channel-name{color:var(--accent);font-weight:700}.channel-status{display:flex;align-items:center;gap:4px;margin-top:2px}.channel-dot{width:6px;height:6px;border-radius:50%;background:#4caf50;flex-shrink:0}.channel-dot.online{background:#4caf50;box-shadow:0 0 6px #4caf5080;animation:breathe 2s ease-in-out infinite}.channel-dot.offline{background:#666;box-shadow:none;animation:none}.channel-status-text{font-size:10px;color:var(--text-muted)}.weather-strip{display:flex;gap:10px;margin-bottom:20px}.weather-block{flex:1;background:#2196f326;border:1px solid rgba(33,150,243,.3);border-radius:4px;height:36px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-primary);white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.weather-block.location{background:#2196f340;font-weight:700;color:#fff}.period-section{position:relative}.period-table{display:flex;flex-direction:column;gap:0}.period-header-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--border-color)}.period-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-light);transition:background .2s}.period-row:last-child{border-bottom:none}.period-row:hover{background:#4dc8ff08}.period-row.period-light{border-left:3px solid #FFD600;padding-left:8px}.period-row.period-dark{border-left:3px solid #5C6BC0;padding-left:8px}.period-row.period-all{border-left:3px solid #4dc8ff;padding-left:8px}.period-cell{display:flex;align-items:center}.period-label-cell{gap:10px;font-size:12px;color:var(--text-secondary)}.period-icon{font-size:14px}.period-head{font-size:11px;color:var(--text-muted);justify-content:center}.period-value{font-size:16px;font-weight:700;font-family:var(--font-mono);justify-content:center}.period-loading{text-align:center;color:var(--text-muted);padding:20px;font-size:12px}.irrigation-section{position:relative}.irrigation-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.irrigation-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#0f2847,#0a1e3a);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 12px;transition:transform .2s}.irrigation-card:hover{transform:translateY(-2px)}.irrigation-icon{font-size:20px}.irrigation-info{display:flex;flex-direction:column;gap:2px}.irrigation-label{font-size:11px;color:var(--text-secondary)}.irrigation-value{font-size:18px;font-weight:700;font-family:var(--font-mono)}.irrigation-unit{font-size:11px;font-weight:400;color:var(--text-muted);margin-left:2px}.drain-ratio-section{padding-top:8px;border-top:1px solid var(--border-light)}.drain-ratio-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.drain-ratio-label{font-size:11px;color:var(--text-secondary)}.drain-ratio-value{font-size:14px;font-weight:700;font-family:var(--font-mono)}.drain-ratio-track{height:8px;background:#0a1225;border-radius:4px;overflow:hidden;border:1px solid var(--border-light)}.drain-ratio-fill{height:100%;border-radius:4px;transition:width .6s ease;box-shadow:0 0 8px currentColor}.irrigation-loading{text-align:center;color:var(--text-muted);padding:15px;font-size:12px}.device-status-section{position:relative}.device-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.device-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(135deg,#0f2847,#0a1e3a);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all .2s}.device-item.device-on{border-color:#4caf5066;background:linear-gradient(135deg,#0f2847,#0a2a1a)}.device-item.device-off{opacity:.7}.device-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}.device-indicator.indicator-on{background:#4caf50;box-shadow:0 0 8px #4caf5088;animation:device-pulse 2s ease-in-out infinite}.device-indicator.indicator-off{background:#666}@keyframes device-pulse{0%,to{box-shadow:0 0 4px #4caf5066}50%{box-shadow:0 0 12px #4caf50aa}}.device-icon{font-size:14px}.device-name{font-size:11px;color:var(--text-secondary);flex:1}.device-state{font-size:10px;font-family:var(--font-mono);font-weight:700;padding:1px 6px;border-radius:2px}.device-on .device-state{color:#4caf50;background:#4caf5022}.device-off .device-state{color:#666;background:#3333}.device-loading{text-align:center;color:var(--text-muted);padding:15px;font-size:12px}.radar-section{flex:1;display:flex;flex-direction:column;min-height:0}.radar-section .radar-chart-container{flex:1;width:100%;min-height:0}.brand-section .panel-content-img img{object-position:center center}.brand-carousel{position:relative;overflow:hidden}.brand-carousel .brand-slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transform:scale(1.02);filter:saturate(.92);transition:opacity 1.6s cubic-bezier(.22,1,.36,1),transform 1.6s cubic-bezier(.22,1,.36,1),filter 1.6s cubic-bezier(.22,1,.36,1)}.brand-carousel .brand-slide.is-active{opacity:1;transform:scale(1);filter:saturate(1)}