.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:var(--spacing-lg);max-width:1200px;margin:0 auto;width:100%}.compatibility-error{display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg)}.error-container{text-align:center;max-width:600px;padding:var(--spacing-xxl);background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md)}.error-container h1{color:var(--error-color);margin-bottom:var(--spacing-lg);font-size:var(--font-size-xxl)}.error-message{color:var(--error-color);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-md)}.error-details{font-size:var(--font-size-base);margin-bottom:var(--spacing-sm);color:var(--text-primary)}.error-note{font-size:var(--font-size-sm);color:var(--text-secondary);font-style:italic}button{padding:var(--spacing-sm) var(--spacing-md);margin:var(--spacing-xs);cursor:pointer;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background-color:var(--bg-primary);font-size:var(--font-size-sm);transition:background-color var(--transition-fast)}button:hover:not(:disabled){background-color:var(--bg-secondary)}h1,h2,h3{margin-top:0}@media(max-width:768px){.main-content{padding:var(--spacing-sm)}.error-container{padding:var(--spacing-lg)}.error-container h1{font-size:var(--font-size-xl)}.error-message{font-size:var(--font-size-base)}}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background-color:var(--bg-primary);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:var(--z-index-sticky)}.hamburger-menu{background:none;border:none;padding:var(--spacing-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast);border-radius:var(--border-radius-sm);min-width:44px;min-height:44px}.hamburger-menu:hover{background-color:var(--bg-secondary)}.hamburger-icon{font-size:var(--font-size-xl);line-height:1;color:var(--text-primary)}.app-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0;flex:1;text-align:center}.header-right{display:flex;align-items:center;gap:var(--spacing-md)}.connection-status{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.connection-status.connected{background-color:var(--success-bg);color:var(--success-text)}.connection-status.disconnected{background-color:var(--error-bg);color:var(--error-text)}.status-indicator{width:8px;height:8px;border-radius:var(--border-radius-round);display:inline-block}.connection-status.connected .status-indicator{background-color:var(--success-color)}.connection-status.disconnected .status-indicator{background-color:var(--error-color)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.connect-button{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color var(--transition-fast);min-height:44px}.connect-button:hover{background-color:var(--primary-hover)}.connect-button.disconnect{background-color:var(--error-color)}.connect-button.disconnect:hover{background-color:#c0392b}@media(max-width:768px){.header{padding:var(--spacing-sm) var(--spacing-md)}.app-title{font-size:var(--font-size-base)}.connection-status{font-size:var(--font-size-xs);padding:var(--spacing-xs) var(--spacing-sm)}.status-text{display:none}.connect-button{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}.header-right{gap:var(--spacing-sm)}}@media(max-width:480px){.app-title{font-size:var(--font-size-sm)}.hamburger-icon{font-size:var(--font-size-lg)}}.sidebar-overlay{position:fixed;inset:0;background-color:#00000080;z-index:var(--z-index-overlay);animation:fadeIn var(--transition-normal)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar{position:fixed;top:0;left:-280px;width:280px;height:100vh;background-color:var(--bg-primary);box-shadow:var(--shadow-md);z-index:var(--z-index-sidebar);transition:left var(--transition-normal);overflow-y:auto;overflow-x:hidden}.sidebar.open{left:0;animation:slideIn var(--transition-normal)}@keyframes slideIn{0%{left:-280px}to{left:0}}.sidebar-nav{padding:var(--spacing-md) 0;margin-top:4rem}.menu-list{list-style:none;padding:0;margin:0}.menu-list li{margin:0}.menu-item{display:flex;align-items:center;gap:var(--spacing-md);width:100%;padding:var(--spacing-md) var(--spacing-lg);background:none;border:none;text-align:left;cursor:pointer;transition:background-color var(--transition-fast);color:var(--text-primary);font-size:var(--font-size-base);min-height:44px;border-left:4px solid transparent}.menu-item:hover{background-color:var(--bg-secondary)}.menu-item:active{background-color:var(--bg-tertiary)}.menu-item.active{background-color:var(--info-bg);color:var(--primary-color);font-weight:var(--font-weight-medium);border-left:4px solid var(--primary-color)}.menu-icon{font-size:var(--font-size-xl);line-height:1;flex-shrink:0}.menu-label{flex:1}@media(max-width:768px){.sidebar{width:250px;left:-250px}.sidebar.open{animation:slideInMobile var(--transition-normal)}@keyframes slideInMobile{0%{left:-250px}to{left:0}}.menu-item{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.menu-icon{font-size:var(--font-size-lg)}}@media(max-width:480px){.sidebar{width:220px;left:-220px}.sidebar.open{animation:slideInSmall var(--transition-normal)}@keyframes slideInSmall{0%{left:-220px}to{left:0}}}@media(min-width:1024px){.sidebar{width:300px;left:-300px}.sidebar.open{animation:slideInDesktop var(--transition-normal)}@keyframes slideInDesktop{0%{left:-300px}to{left:0}}}.temperature-display{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--border-radius-xl);padding:var(--spacing-xl);color:#fff;text-align:center;box-shadow:var(--shadow-lg);min-width:200px}.temperature-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px;opacity:.9;margin-bottom:var(--spacing-sm)}.temperature-value{display:flex;align-items:flex-start;justify-content:center;gap:var(--spacing-xs)}.temperature-number{font-size:3.5rem;font-weight:var(--font-weight-bold);line-height:1;letter-spacing:-.02em}.temperature-unit{font-size:var(--font-size-xl);font-weight:var(--font-weight-medium);margin-top:var(--spacing-sm);opacity:.9}@media(max-width:768px){.temperature-display{padding:var(--spacing-lg);min-width:160px}.temperature-label{font-size:var(--font-size-xs)}.temperature-number{font-size:2.5rem}.temperature-unit{font-size:var(--font-size-lg);margin-top:var(--spacing-xs)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.temperature-number{animation:pulse var(--transition-normal)}.relay-gauge{background-color:var(--bg-primary);border-radius:var(--border-radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);text-align:center;min-width:200px}.relay-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.relay-visual{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);transition:background-color var(--transition-normal)}.relay-visual.on{background-color:var(--success-bg)}.relay-visual.off{background-color:var(--bg-secondary)}.relay-indicator{width:80px;height:80px;border-radius:var(--border-radius-round);display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.relay-visual.on .relay-indicator{background-color:var(--success-color);box-shadow:0 0 20px #28a74580}.relay-visual.off .relay-indicator{background-color:var(--secondary-color)}.relay-indicator-inner{width:40px;height:40px;border-radius:var(--border-radius-round);background-color:var(--bg-primary);transition:transform var(--transition-normal)}.relay-visual.on .relay-indicator-inner{transform:scale(1.1)}.relay-status-text{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);letter-spacing:.05em;transition:color var(--transition-normal)}.relay-visual.on .relay-status-text{color:var(--success-color)}.relay-visual.off .relay-status-text{color:var(--secondary-color)}.relay-override-info{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--warning-bg);border-radius:var(--border-radius-md);border-left:3px solid var(--warning-color)}.override-label{font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:var(--font-weight-medium)}.override-time{font-size:var(--font-size-md);color:var(--warning-color);font-weight:var(--font-weight-bold);font-family:monospace}.relay-controls{display:flex;flex-direction:column;gap:var(--spacing-md)}.duration-selector{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.duration-selector label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:var(--font-weight-medium)}.duration-selector select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius-md);background-color:var(--bg-secondary);color:var(--text-primary);font-size:var(--font-size-sm);cursor:pointer;transition:border-color var(--transition-normal)}.duration-selector select:hover:not(:disabled){border-color:var(--primary-color)}.duration-selector select:disabled{opacity:.5;cursor:not-allowed}.relay-toggle-container{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md)}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:var(--transition-normal);border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:var(--bg-primary);transition:var(--transition-normal);border-radius:var(--border-radius-round)}input:checked+.toggle-slider{background-color:var(--success-color)}input:checked+.toggle-slider:before{transform:translate(26px)}input:disabled+.toggle-slider{opacity:.5;cursor:not-allowed}.toggle-label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:var(--font-weight-medium)}@media(max-width:768px){.relay-gauge{padding:var(--spacing-lg);min-width:160px}.relay-label{font-size:var(--font-size-xs);margin-bottom:var(--spacing-md)}.relay-visual{padding:var(--spacing-md);gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.relay-indicator{width:60px;height:60px}.relay-indicator-inner{width:30px;height:30px}.relay-status-text{font-size:var(--font-size-lg)}.toggle-switch{width:50px;height:28px}.toggle-slider:before{height:22px;width:22px;left:3px;bottom:3px}input:checked+.toggle-slider:before{transform:translate(22px)}.toggle-label{font-size:var(--font-size-xs)}}.battery-gauge{padding:1.5rem}.battery-container{display:flex;align-items:center;gap:2rem;padding:1rem}.battery-icon{display:flex;align-items:center;gap:2px}.battery-body{width:80px;height:40px;border:3px solid var(--text-primary);border-radius:4px;position:relative;overflow:hidden;background:var(--bg-secondary)}.battery-body.critical{border-color:#e74c3c}.battery-body.low{border-color:#f39c12}.battery-body.medium{border-color:#3498db}.battery-body.good{border-color:#2ecc71}.battery-fill{height:100%;transition:width .3s ease,background-color .3s ease;background:linear-gradient(90deg,#2ecc71,#27ae60)}.battery-body.critical .battery-fill{background:linear-gradient(90deg,#e74c3c,#c0392b)}.battery-body.low .battery-fill{background:linear-gradient(90deg,#f39c12,#e67e22)}.battery-body.medium .battery-fill{background:linear-gradient(90deg,#3498db,#2980b9)}.battery-terminal{width:6px;height:20px;background:var(--text-primary);border-radius:0 2px 2px 0}.battery-info{display:flex;flex-direction:column;gap:.5rem}.battery-percentage{font-size:2rem;font-weight:700;color:var(--text-primary)}.battery-voltage{font-size:1rem;color:var(--text-secondary);font-weight:500}.battery-status{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.battery-status.unknown{color:var(--text-secondary)}.battery-status.critical{color:#e74c3c}.battery-status.low{color:#f39c12}.battery-status.medium{color:#3498db}.battery-status.good{color:#2ecc71}@media(max-width:768px){.battery-container{gap:1rem}.battery-body{width:60px;height:30px}.battery-terminal{width:4px;height:15px}.battery-percentage{font-size:1.5rem}.battery-voltage{font-size:.875rem}}.notification{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-lg);font-size:var(--font-size-sm);min-width:300px;max-width:500px;animation:slideIn var(--transition-normal);position:relative}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.notification.visible{animation:slideIn var(--transition-normal)}.notification.hiding{animation:fadeOut var(--transition-normal)}.notification-icon{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:1;flex-shrink:0}.notification-message{flex:1;line-height:1.4}.notification-close{background:none;border:none;font-size:var(--font-size-xl);line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-round);transition:background-color var(--transition-fast);flex-shrink:0}.notification-close:hover{background-color:#0000001a}.notification-success{background-color:var(--success-bg);color:var(--success-text);border-left:4px solid var(--success-color)}.notification-success .notification-icon{color:var(--success-color)}.notification-error{background-color:var(--error-bg);color:var(--error-text);border-left:4px solid var(--error-color)}.notification-error .notification-icon{color:var(--error-color)}.notification-info{background-color:var(--info-bg);color:var(--info-text);border-left:4px solid var(--info-color)}.notification-info .notification-icon{color:var(--info-color)}.notification-loading{background-color:#e2e3e5;color:#383d41;border-left:4px solid var(--secondary-color)}.notification-loading .notification-icon{color:var(--secondary-color);animation:spin 1s linear infinite}.notification-container{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:var(--z-index-tooltip);display:flex;flex-direction:column;gap:var(--spacing-sm);pointer-events:none}.notification-container .notification{pointer-events:all}.notification-container-bottom{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);z-index:var(--z-index-tooltip);display:flex;flex-direction:column;gap:var(--spacing-sm);pointer-events:none}.notification-container-bottom .notification{pointer-events:all;animation:slideInBottom var(--transition-normal)}@keyframes slideInBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:768px){.notification{min-width:250px;max-width:calc(100vw - 2rem);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-xs)}.notification-icon{font-size:var(--font-size-base)}.notification-container{top:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm)}.notification-container-bottom{bottom:var(--spacing-sm);left:var(--spacing-sm);right:var(--spacing-sm);transform:none}}@media(max-width:480px){.notification{min-width:auto;width:100%}}.dashboard{padding:var(--spacing-lg);max-width:1200px;margin:0 auto}.dashboard-header{display:flex;justify-content:flex-end;margin-bottom:var(--spacing-md)}.reload-button{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.reload-button:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.reload-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.reload-button:disabled{background:var(--bg-tertiary);color:var(--text-tertiary);cursor:not-allowed;opacity:.6}.reload-icon{width:18px;height:18px;transition:transform var(--transition-fast)}.reload-button.reloading .reload-icon{animation:spin 1s linear infinite}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.dashboard-section{background:var(--bg-primary);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast)}.dashboard-section:hover{box-shadow:var(--shadow-md)}.section-title{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.temperature-section,.relay-section,.battery-section,.thresholds-section{grid-column:span 1}.thresholds-display{display:flex;flex-direction:column;gap:var(--spacing-md)}.threshold-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-radius:var(--border-radius-md);font-size:var(--font-size-lg);transition:transform var(--transition-fast)}.threshold-item:hover{transform:translate(4px)}.threshold-item.high{background:#ffebee;border-left:4px solid var(--error-color)}.threshold-item.low{background:var(--warning-bg);border-left:4px solid var(--warning-color)}.threshold-label{font-weight:var(--font-weight-semibold);color:var(--text-secondary)}.threshold-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--text-primary)}.schedule-section{grid-column:span 2}.schedule-display{display:flex;flex-direction:column;gap:var(--spacing-md)}.schedule-grid-today{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.schedule-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--font-size-xs);cursor:default;transition:all var(--transition-fast);border:2px solid transparent}.schedule-cell.current-hour{border:2px solid var(--primary-color);box-shadow:0 0 8px #2196f380;transform:scale(1.05);z-index:1}.hour-label{font-size:.7rem;font-weight:var(--font-weight-semibold)}.mode-label{font-size:.9rem;font-weight:var(--font-weight-bold)}.schedule-legend{display:flex;gap:var(--spacing-lg);justify-content:center;padding:var(--spacing-sm);background:var(--bg-secondary);border-radius:var(--border-radius-md)}.legend-color{width:20px;height:20px;border-radius:var(--border-radius-sm)}.legend-color.h{background:#ffcdd2;border:1px solid #c62828}.legend-color.l{background:#ffe082;border:1px solid #f57c00}.legend-color.o{background:var(--bg-tertiary);border:1px solid #616161}.no-data{text-align:center;padding:var(--spacing-xxl) var(--spacing-lg);color:var(--text-tertiary);font-style:italic}@media(max-width:1024px){.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media(max-width:768px){.dashboard{padding:var(--spacing-sm)}.dashboard-header{margin-bottom:var(--spacing-sm)}.reload-button{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.reload-icon{width:16px;height:16px}.dashboard-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.dashboard-section{padding:var(--spacing-md)}.schedule-section{grid-column:span 1}.schedule-grid-today{grid-template-columns:repeat(8,1fr)}.schedule-cell{font-size:.65rem}.hour-label{font-size:.6rem}.mode-label{font-size:.8rem}.schedule-legend{flex-direction:column;gap:var(--spacing-sm)}.threshold-item{font-size:var(--font-size-base)}.threshold-value{font-size:var(--font-size-lg)}}@media(max-width:480px){.dashboard{padding:var(--spacing-xs)}.schedule-grid-today{grid-template-columns:repeat(6,1fr)}.threshold-item{font-size:var(--font-size-sm);padding:var(--spacing-sm)}.threshold-value,.section-title{font-size:var(--font-size-base)}}.schedule-grid-container{display:flex;flex-direction:column;gap:var(--spacing-lg)}.schedule-grid{display:flex;flex-direction:column;gap:2px;overflow-x:auto;background:var(--bg-secondary);padding:var(--spacing-sm);border-radius:var(--border-radius-lg)}.schedule-header{display:grid;grid-template-columns:120px repeat(24,40px);gap:2px;margin-bottom:2px}.schedule-corner{background:var(--bg-tertiary);padding:var(--spacing-sm);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm)}.schedule-hour-label{background:var(--bg-tertiary);padding:var(--spacing-sm) var(--spacing-xs);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm)}.schedule-row{display:grid;grid-template-columns:120px repeat(24,40px);gap:2px}.schedule-day-label{background:var(--bg-tertiary);padding:var(--spacing-sm);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:flex-start;border-radius:var(--border-radius-sm)}.schedule-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);cursor:pointer;transition:all var(--transition-fast);border:2px solid transparent;-webkit-user-select:none;user-select:none}.schedule-cell:hover{transform:scale(1.1);box-shadow:var(--shadow-md);z-index:10}.schedule-cell.h{background:#ffcdd2;color:#c62828}.schedule-cell.h:hover{background:#ef9a9a}.schedule-cell.l{background:#ffe082;color:#f57c00}.schedule-cell.l:hover{background:#ffd54f}.schedule-cell.o{background:var(--bg-tertiary);color:#616161}.schedule-cell.o:hover{background:#bdbdbd}.schedule-cell.current-hour{border:2px solid var(--primary-color);box-shadow:0 0 8px #2196f380}@keyframes pulseGlow{0%,to{box-shadow:0 0 8px #2196f380}50%{box-shadow:0 0 16px #2196f3cc}}.schedule-legend{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--border-radius-md)}.legend-item{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--text-secondary)}.legend-color{width:24px;height:24px;border-radius:var(--border-radius-sm);flex-shrink:0}.legend-color.h{background:#ffcdd2;border:2px solid #c62828}.legend-color.l{background:#ffe082;border:2px solid #f57c00}.legend-color.o{background:var(--bg-tertiary);border:2px solid #616161}@media(max-width:1024px){.schedule-header,.schedule-row{grid-template-columns:100px repeat(24,35px)}.schedule-cell{font-size:var(--font-size-xs)}}@media(max-width:768px){.schedule-grid{padding:var(--spacing-xs);overflow-x:scroll;-webkit-overflow-scrolling:touch}.schedule-header,.schedule-row{grid-template-columns:80px repeat(24,30px)}.schedule-corner,.schedule-day-label{font-size:var(--font-size-xs);padding:var(--spacing-xs)}.schedule-hour-label{font-size:.65rem;padding:var(--spacing-xs) 2px}.schedule-cell,.legend-item{font-size:var(--font-size-xs)}}@media(max-width:480px){.schedule-header,.schedule-row{grid-template-columns:60px repeat(24,25px)}.schedule-corner,.schedule-day-label{font-size:.7rem;padding:var(--spacing-xs)}.schedule-hour-label{font-size:.6rem;padding:var(--spacing-xs) 2px}.schedule-cell{font-size:.7rem}.legend-color{width:20px;height:20px}.legend-item{font-size:.8rem}}.timer-programming{padding:var(--spacing-lg);max-width:1400px;margin:0 auto}.timer-programming-header{margin-bottom:var(--spacing-lg)}.timer-programming-header h2{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-xxl);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.instructions{margin:0;font-size:var(--font-size-base);color:var(--text-secondary);font-style:italic}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xxl) var(--spacing-lg);gap:var(--spacing-lg)}.loading-spinner{width:50px;height:50px;border:4px solid var(--bg-tertiary);border-top:4px solid var(--primary-color);border-radius:var(--border-radius-round);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container p{font-size:var(--font-size-lg);color:var(--text-secondary)}.not-connected,.no-data{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xxl) var(--spacing-lg);text-align:center}.not-connected p,.no-data p{font-size:var(--font-size-lg);color:var(--text-tertiary);max-width:500px}.save-section{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:var(--warning-bg);border-left:4px solid var(--warning-color);border-radius:var(--border-radius-md);display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}.save-button{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:#fff;background:var(--primary-color);border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);min-height:44px}.save-button:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 8px #2196f34d}.save-button:active{transform:translateY(0)}.save-button:disabled{background:var(--secondary-color);cursor:not-allowed;transform:none;box-shadow:none}.save-hint{margin:0;font-size:var(--font-size-sm);color:var(--warning-text);font-weight:var(--font-weight-medium)}@media(max-width:768px){.timer-programming{padding:var(--spacing-sm)}.timer-programming-header h2{font-size:var(--font-size-xl)}.instructions{font-size:var(--font-size-sm)}.save-section{padding:var(--spacing-md)}.save-button{width:100%;padding:var(--spacing-md) var(--spacing-lg)}.loading-container{padding:var(--spacing-xl) var(--spacing-md)}}@media(max-width:480px){.timer-programming{padding:var(--spacing-xs)}.timer-programming-header h2{font-size:var(--font-size-lg)}.instructions{font-size:var(--font-size-xs)}.loading-container{padding:var(--spacing-lg) var(--spacing-sm)}.loading-spinner{width:40px;height:40px}.loading-container p{font-size:var(--font-size-base)}}.temperature-settings{padding:var(--spacing-lg);max-width:800px;margin:0 auto}.page-title{font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--spacing-xl)}.settings-container{display:flex;flex-direction:column;gap:var(--spacing-xl)}.settings-section{background:var(--bg-primary);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast)}.settings-section:hover{box-shadow:var(--shadow-md)}.section-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:var(--spacing-sm)}.section-description{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-lg);line-height:1.5}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{display:block;font-weight:var(--font-weight-semibold);color:var(--text-secondary);margin-bottom:var(--spacing-sm);font-size:var(--font-size-base)}.form-group input{width:100%;padding:var(--spacing-md);font-size:var(--font-size-base);border:2px solid var(--border-color);border-radius:var(--border-radius-md);transition:border-color var(--transition-fast);min-height:44px}.form-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #007bff1a}.form-group input:disabled{background-color:var(--bg-secondary);cursor:not-allowed;color:var(--text-tertiary)}.form-hint{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--text-tertiary);font-style:italic}.btn{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);border-radius:var(--border-radius-md);transition:all var(--transition-fast);cursor:pointer;border:none;min-height:44px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 8px #007bff4d}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover:not(:disabled){background-color:var(--secondary-hover);transform:translateY(-1px);box-shadow:0 4px 8px #6c757d4d}.button-group{display:flex;gap:var(--spacing-md);flex-wrap:wrap}@media(max-width:1024px){.temperature-settings{max-width:700px}}@media(max-width:768px){.temperature-settings{padding:var(--spacing-md)}.page-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg)}.settings-section{padding:var(--spacing-lg)}.section-title{font-size:var(--font-size-lg)}.button-group{flex-direction:column}.btn{width:100%}}@media(max-width:480px){.temperature-settings{padding:var(--spacing-sm)}.page-title{font-size:var(--font-size-lg)}.settings-section{padding:var(--spacing-md)}.form-group input{padding:var(--spacing-sm)}.btn{padding:var(--spacing-sm) var(--spacing-lg)}}.settings{padding:20px;max-width:800px;margin:0 auto}.settings h2{margin-bottom:30px;color:#333;font-size:24px}.settings-disconnected{text-align:center;padding:60px 20px;color:#666;font-size:18px}.settings-notification{padding:12px 16px;margin-bottom:20px;border-radius:4px;font-size:14px;animation:slideIn .3s ease-out}.settings-notification.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.settings-notification.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-section{background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px;margin-bottom:24px;box-shadow:0 2px 4px #0000000d}.settings-section h3{margin-top:0;margin-bottom:12px;color:#333;font-size:20px}.settings-description{color:#666;font-size:14px;margin-bottom:20px;line-height:1.5}.settings-field{margin-bottom:20px}.settings-field:last-of-type{margin-bottom:0}.settings-field label{display:block;margin-bottom:8px;font-weight:500;color:#333;font-size:14px}.settings-input-group{display:flex;gap:8px;align-items:center}.settings-field input{flex:1;padding:10px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;font-family:inherit;transition:border-color .2s}.settings-field input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.settings-field input::placeholder{color:#999}.settings-button{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s;white-space:nowrap}.settings-button:hover:not(:disabled){background-color:#0056b3}.settings-button:disabled{background-color:#ccc;cursor:not-allowed}.settings-button-icon{padding:10px 12px;background-color:#f8f9fa;border:1px solid #ccc;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .2s;line-height:1}.settings-button-icon:hover{background-color:#e9ecef}.settings-hint{display:block;margin-top:6px;font-size:12px;color:#666;font-style:italic}.settings-warning{margin-top:16px;padding:12px;background-color:#fff3cd;border:1px solid #ffc107;border-radius:4px;color:#856404;font-size:14px;display:flex;align-items:center;gap:8px}.settings-info{background-color:#e7f3ff;border:1px solid #b3d9ff;border-radius:8px;padding:20px}.settings-info h4{margin-top:0;margin-bottom:12px;color:#004085;font-size:16px;display:flex;align-items:center;gap:8px}.settings-info ul{margin:0;padding-left:20px;color:#004085;font-size:14px;line-height:1.8}.settings-info li{margin-bottom:6px}@media(max-width:768px){.settings{padding:16px}.settings h2{font-size:20px;margin-bottom:20px}.settings-section{padding:16px}.settings-section h3{font-size:18px}.settings-input-group{flex-wrap:wrap}.settings-field input{width:100%;min-width:0}.settings-button{width:100%}.settings-button-icon{width:auto}}.pwa-install-prompt{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:1000;max-width:90%;width:400px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translate(-50%) translateY(100px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.pwa-install-content{background:#fff;border-radius:12px;padding:16px;box-shadow:0 4px 20px #00000026;display:flex;align-items:center;gap:12px}.pwa-install-icon{font-size:32px;flex-shrink:0}.pwa-install-text{flex:1}.pwa-install-text h3{margin:0 0 4px;font-size:16px;font-weight:600;color:#333}.pwa-install-text p{margin:0;font-size:13px;color:#666;line-height:1.4}.pwa-install-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.pwa-install-btn,.pwa-dismiss-btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.pwa-install-btn{background:#646cff;color:#fff}.pwa-install-btn:hover{background:#4a5fd8}.pwa-dismiss-btn{background:transparent;color:#666}.pwa-dismiss-btn:hover{background:#f0f0f0}@media(max-width:600px){.pwa-install-prompt{bottom:10px;width:calc(100% - 20px)}.pwa-install-content{flex-wrap:wrap}.pwa-install-actions{flex-direction:row;width:100%}.pwa-install-btn,.pwa-dismiss-btn{flex:1}}:root{--primary-color: #007bff;--primary-hover: #0056b3;--secondary-color: #6c757d;--secondary-hover: #545b62;--success-color: #28a745;--success-bg: #d4edda;--success-text: #155724;--error-color: #dc3545;--error-bg: #f8d7da;--error-text: #721c24;--warning-color: #ffc107;--warning-bg: #fff3e0;--warning-text: #f57c00;--info-color: #17a2b8;--info-bg: #d1ecf1;--info-text: #0c5460;--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e0e0e0;--text-primary: #333333;--text-secondary: #666666;--text-tertiary: #999999;--border-color: #dddddd;--border-color-light: #e0e0e0;--border-color-dark: #cccccc;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--border-radius-xl: 12px;--border-radius-round: 50%;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--z-index-dropdown: 100;--z-index-sticky: 100;--z-index-sidebar: 999;--z-index-overlay: 998;--z-index-modal: 1000;--z-index-tooltip: 1001}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:1.5;color:var(--text-primary);background-color:var(--bg-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}h1,h2,h3,h4,h5,h6{margin:0 0 var(--spacing-md) 0;font-weight:var(--font-weight-semibold);line-height:1.2;color:var(--text-primary)}h1{font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin:0 0 var(--spacing-md) 0}button{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;border:none;outline:none;background-color:var(--bg-primary);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);transition:all var(--transition-fast);min-height:44px}button:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}input,textarea,select{font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--border-radius-sm);background-color:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition-fast);min-height:44px}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-color)}input:disabled,textarea:disabled,select:disabled{background-color:var(--bg-secondary);cursor:not-allowed;color:var(--text-tertiary)}*:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}html{scroll-behavior:smooth}@media(max-width:768px){button,input,select,textarea{min-height:44px;min-width:44px}html{-webkit-text-size-adjust:100%}*{-webkit-tap-highlight-color:rgba(0,123,255,.1)}}