.sidebar-toggle{display:none;position:fixed;top:10px;left:20px;z-index:1001;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-sm);cursor:pointer;transition:all .3s ease;color:var(--text-primary)}.sidebar-toggle:hover{background:var(--bg-tertiary);transform:scale(1.05)}.sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;background:var(--bg-primary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:all .3s ease;z-index:1000}.sidebar-header{padding:var(--spacing-xl) var(--spacing-lg);border-bottom:1px solid var(--border-color)}.logo{display:flex;align-items:center;gap:var(--spacing-md)}.logo-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,#10b9811a,#0ea5e91a);border-radius:var(--radius-lg)}.logo-text h2{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin:0;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-text span{font-size:var(--font-size-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.sidebar-nav{flex:1;padding:var(--spacing-lg) 0}.sidebar-nav ul{list-style:none;padding:0;margin:0}.sidebar-nav li{margin-bottom:var(--spacing-xs)}.nav-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);color:var(--text-secondary);text-decoration:none;transition:all .3s ease;position:relative;margin:0 var(--spacing-sm);border-radius:var(--radius-md)}.nav-item:hover{background:var(--bg-tertiary);color:var(--text-primary);transform:translate(4px)}.nav-item.active{background:linear-gradient(135deg,#10b9811a,#0ea5e91a);color:var(--text-primary);font-weight:600}.active-indicator{position:absolute;right:var(--spacing-md);width:4px;height:20px;border-radius:2px;background:var(--primary)}.sidebar-footer{padding:var(--spacing-lg);border-top:1px solid var(--border-color)}.status-card{background:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--border-color)}.sidebar-overlay{display:none}@media (max-width: 1024px){.sidebar-toggle{display:block}.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}@media (max-width: 768px){.sidebar{width:100vw;max-width:320px}}.navbar{background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:0 var(--spacing-xl);height:80px;display:flex;align-items:center;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.navbar.sidebar-open{margin-left:280px}.navbar-content{display:flex;align-items:center;justify-content:space-between;width:100%}.navbar-title h1{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin:0}.subtitle{font-size:var(--font-size-sm);color:var(--text-secondary)}.navbar-actions{display:flex;align-items:center;gap:var(--spacing-md)}.export-buttons{display:flex;gap:var(--spacing-sm)}.language-selector select{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary);cursor:pointer}.theme-toggle,.notifications-container,.notifications-btn{position:relative}.notification-badge{position:absolute;top:-8px;right:-8px;background:var(--error);color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}.notifications-dropdown{position:absolute;top:calc(100% + var(--spacing-sm));right:0;width:350px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;overflow:hidden}.notifications-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--border-color)}.notifications-header h3{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0}.notifications-list{max-height:300px;overflow-y:auto}.notification-item{display:flex;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-color);transition:background-color .2s ease}.notification-item:hover{background:var(--bg-secondary)}.notification-item:last-child{border-bottom:none}.notification-content{flex:1}.notification-content p{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-sm);color:var(--text-primary)}.notification-time{font-size:var(--font-size-xs);color:var(--text-tertiary)}.notification-indicator{width:8px;height:8px;border-radius:50%;margin-left:var(--spacing-sm)}.notification-indicator.warning{background:var(--warning)}.notification-indicator.success{background:var(--success)}.notification-indicator.info{background:var(--secondary)}.notifications-footer{padding:var(--spacing-md);text-align:center;border-top:1px solid var(--border-color)}.user-avatar{margin-left:var(--spacing-md)}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;cursor:pointer;transition:transform .2s ease}.avatar:hover{transform:scale(1.1)}@media (max-width: 768px){.navbar{padding:0 var(--spacing-lg);height:70px;margin-left:0}.navbar.sidebar-open{margin-left:0}.navbar-title h1{font-size:var(--font-size-2xl)}.export-buttons,.language-selector{display:none}.notifications-dropdown{width:300px;right:-50px}}@media (max-width: 480px){.navbar{padding:0 var(--spacing-md)}.navbar-title h1,.subtitle{display:none}.notifications-dropdown{width:280px;right:-80px}}.overview-header{margin-bottom:var(--spacing-2xl)}.overview-header h2{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.overview-header p{color:var(--text-secondary);font-size:var(--font-size-lg)}.summary-card{transition:all .3s ease}.summary-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.summary-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.summary-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.summary-trend{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:600}.summary-content h3{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.summary-label{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}.progress-container{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xl)}.progress-details{flex:1}.progress-item{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);font-size:var(--font-size-sm);color:var(--text-secondary)}.progress-dot{width:12px;height:12px;border-radius:50%}.alerts-list{space:var(--spacing-md) 0}.alert-item{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-lg);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:var(--spacing-md);transition:all .3s ease;background:var(--bg-secondary)}.alert-item:hover{transform:translate(4px);box-shadow:var(--shadow)}.alert-item:last-child{margin-bottom:0}.alert-item.warning{border-left:4px solid var(--warning)}.alert-item.info{border-left:4px solid var(--secondary)}.alert-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.alert-item.warning .alert-icon{background:#f59e0b1a;color:var(--warning)}.alert-item.info .alert-icon{background:#0ea5e91a;color:var(--secondary)}.alert-content{flex:1}.alert-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.alert-message{color:var(--text-secondary);margin-bottom:var(--spacing-sm);line-height:1.6}.alert-time{font-size:var(--font-size-xs);color:var(--text-tertiary)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}@media (max-width: 768px){.progress-container{flex-direction:column;gap:var(--spacing-lg);text-align:center}.alert-item{flex-direction:column;text-align:center}.alert-icon{margin:0 auto}}.smart-home-header{margin-bottom:var(--spacing-2xl)}.smart-home-header h2{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.smart-home-header p{color:var(--text-secondary);font-size:var(--font-size-lg)}.stat-card{transition:all .3s ease}.stat-card:hover{transform:translateY(-4px)}.stat-content{display:flex;align-items:center;gap:var(--spacing-md)}.stat-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-info h3{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.stat-info p{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}.devices-grid{display:grid;gap:var(--spacing-md)}.device-card{padding:var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-secondary);transition:all .3s ease;position:relative}.device-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.device-card.active{border-color:var(--primary);background:#10b9810d}.device-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.device-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-primary);display:flex;align-items:center;justify-content:center;border:2px solid var(--border-color)}.toggle-switch{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0}.toggle-input{display:none}.toggle-slider{width:52px;height:28px;background:var(--text-tertiary);border-radius:14px;position:relative;transition:all .3s ease;box-shadow:inset 0 2px 4px #0000001a}.toggle-slider.active{background:var(--primary);box-shadow:inset 0 2px 4px #10b98133}.toggle-slider.active .toggle-knob{transform:translate(24px)}.toggle-switch:hover .toggle-slider{transform:scale(1.05)}.toggle-switch:active .toggle-slider{transform:scale(.95)}.device-info h4{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.device-room{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.device-stats{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.consumption{font-weight:600;color:var(--accent);font-size:var(--font-size-sm)}.last-used{font-size:var(--font-size-xs);color:var(--text-tertiary)}.ai-suggestion{display:flex;align-items:center;gap:var(--spacing-xs);background:#f59e0b1a;padding:var(--spacing-sm);border-radius:var(--radius-md);border:1px solid var(--warning);font-size:var(--font-size-xs);color:var(--warning)}.suggestion-icon{font-size:14px}.energy-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.energy-stat{text-align:center}.energy-label{display:block;font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.energy-value{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary)}@media (max-width: 768px){.devices-grid{grid-template-columns:1fr}.energy-summary{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.device-stats{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}}@media (max-width: 480px){.energy-summary{grid-template-columns:1fr}.stat-content{flex-direction:column;text-align:center;gap:var(--spacing-sm)}}.agriculture-header{margin-bottom:var(--spacing-2xl)}.agriculture-header h2{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.agriculture-header p{color:var(--text-secondary);font-size:var(--font-size-lg)}.sensor-card{transition:all .3s ease}.sensor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.sensor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.sensor-icon{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.sensor-status{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.sensor-reading h3{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.sensor-name{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-xs)}.sensor-update{font-size:var(--font-size-xs);color:var(--text-tertiary)}.weather-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-md)}.weather-card{text-align:center;padding:var(--spacing-md);border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--border-color);transition:all .3s ease}.weather-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.weather-day{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.weather-icon{margin-bottom:var(--spacing-sm)}.weather-temp{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.weather-precipitation{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--text-secondary)}.irrigation-controls{display:flex;flex-direction:column;gap:var(--spacing-lg)}.mode-selector label{display:block;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.mode-buttons{display:flex;gap:var(--spacing-sm)}.irrigation-status{background:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.status-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) 0}.status-item:not(:last-child){border-bottom:1px solid var(--border-color)}.status-label{font-size:var(--font-size-sm);color:var(--text-secondary)}.status-value{font-weight:600;color:var(--text-primary)}.manual-controls{display:flex;gap:var(--spacing-sm)}.toggle-switch{position:relative;width:52px;height:28px;background:var(--text-tertiary);border-radius:14px;cursor:pointer;transition:all .3s ease;-webkit-user-select:none;user-select:none;box-shadow:inset 0 2px 4px #0000001a;flex-shrink:0}.ai-recommendation{background:linear-gradient(135deg,#10b9811a,#0ea5e91a);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--primary)}.recommendation-header{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.recommendation-icon{font-size:20px}.ai-recommendation p{margin:0;color:var(--text-secondary);line-height:1.6}.agriculture-devices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg)}.agriculture-device-card{padding:var(--spacing-lg);border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-secondary);transition:all .3s ease;position:relative}.agriculture-device-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.agriculture-device-card.active{border-color:var(--primary);background:#10b9810d}.agriculture-device-card .device-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.agriculture-device-card .device-icon{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--bg-primary);display:flex;align-items:center;justify-content:center;border:2px solid var(--border-color)}.device-toggle{display:flex;align-items:center}.agriculture-device-card .device-info h4{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.device-location{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.device-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.device-stat{display:flex;flex-direction:column;gap:var(--spacing-xs)}.stat-label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.stat-value{font-weight:600;color:var(--text-primary);font-size:var(--font-size-sm)}.device-maintenance{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-sm);border-top:1px solid var(--border-color)}.maintenance-label{font-size:var(--font-size-xs);color:var(--text-secondary)}.maintenance-value{font-size:var(--font-size-xs);color:var(--text-tertiary)}.chart-container{margin-bottom:var(--spacing-lg)}.usage-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.usage-stat{text-align:center}.usage-label{display:block;font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.usage-value{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary)}@media (max-width: 768px){.weather-grid{grid-template-columns:repeat(3,1fr)}.usage-summary{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.agriculture-devices-grid,.device-stats{grid-template-columns:1fr}.manual-controls,.mode-buttons{flex-direction:column}}@media (max-width: 480px){.weather-grid{grid-template-columns:repeat(2,1fr)}.usage-summary{grid-template-columns:1fr}.irrigation-status{padding:var(--spacing-md)}.status-item,.device-maintenance{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}}.ai-insights-header{margin-bottom:var(--spacing-2xl)}.header-content{display:flex;align-items:center;gap:var(--spacing-lg)}.header-icon{width:64px;height:64px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#10b9811a,#0ea5e91a);display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-text h2{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.header-text p{color:var(--text-secondary);font-size:var(--font-size-lg)}.prediction-card{position:relative;overflow:hidden;transition:all .3s ease}.prediction-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,var(--primary),var(--secondary))}.prediction-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}.prediction-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.prediction-icon{width:56px;height:56px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.prediction-content{text-align:left}.prediction-value{font-size:var(--font-size-3xl);font-weight:800;color:var(--text-primary);margin-bottom:var(--spacing-xs);background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.prediction-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.prediction-subtitle{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.prediction-description{background:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);border-left:4px solid var(--primary)}.prediction-description p{margin:0;font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.6}.ai-recommendation-inline{display:flex;align-items:flex-start;gap:var(--spacing-sm);background:linear-gradient(135deg,#10b9810d,#0ea5e90d);padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--border-color)}.ai-icon{font-size:18px;flex-shrink:0}.ai-recommendation-inline p{margin:0;font-size:var(--font-size-sm);color:var(--text-primary);font-weight:500;line-height:1.5}.efficiency-container{display:flex;align-items:center;gap:var(--spacing-xl)}.efficiency-legend{flex:1;display:flex;flex-direction:column;gap:var(--spacing-md)}.legend-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-md);background:var(--bg-secondary)}.legend-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.legend-label{flex:1;font-size:var(--font-size-sm);color:var(--text-secondary)}.legend-value{font-weight:600;color:var(--text-primary)}.recommendations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg)}.recommendation-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all .3s ease}.recommendation-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.recommendation-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--spacing-md)}.recommendation-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-primary);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}.recommendation-meta{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:flex-end}.priority-badge{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.category-badge{background:var(--bg-primary);color:var(--text-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:500}.recommendation-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.recommendation-description{color:var(--text-secondary);margin-bottom:var(--spacing-md);line-height:1.6}.recommendation-metrics{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.metric{display:flex;flex-direction:column;gap:var(--spacing-xs)}.metric-label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.metric-value{font-weight:600;font-size:var(--font-size-sm)}.metric-value.impact{color:var(--success)}.metric-value.effort{color:var(--warning)}.recommendation-action{width:100%}@media (max-width: 768px){.header-content{flex-direction:column;text-align:center;gap:var(--spacing-md)}.recommendations-grid{grid-template-columns:1fr}.efficiency-container{flex-direction:column;gap:var(--spacing-lg)}.recommendation-header{flex-direction:column;gap:var(--spacing-md)}.recommendation-meta{align-items:flex-start;flex-direction:row;gap:var(--spacing-sm)}}@media (max-width: 480px){.prediction-description,.ai-recommendation-inline{padding:var(--spacing-sm)}.recommendation-card{padding:var(--spacing-md)}.recommendation-metrics{flex-direction:column;gap:var(--spacing-sm)}}.settings-header{margin-bottom:var(--spacing-2xl)}.settings-header h2{font-size:var(--font-size-3xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.settings-header p{color:var(--text-secondary);font-size:var(--font-size-lg)}.settings-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--spacing-2xl)}.settings-sidebar{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);height:fit-content;position:sticky;top:var(--spacing-lg)}.settings-tabs{display:flex;flex-direction:column;gap:var(--spacing-xs)}.settings-tab{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.settings-tab:hover{background:var(--bg-secondary);color:var(--text-primary)}.settings-tab.active{background:linear-gradient(135deg,#10b9811a,#0ea5e91a);color:var(--primary);font-weight:600}.settings-content{min-height:600px}.settings-section{animation:fadeIn .3s ease-out}.section-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-xl)}.section-header h3{font-size:var(--font-size-2xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.section-header p{color:var(--text-secondary);margin:0}.profile-avatar{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--border-color)}.avatar-large{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-2xl);font-weight:700}.profile-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label{font-weight:600;color:var(--text-primary);font-size:var(--font-size-sm)}.form-input{padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--text-primary);font-size:var(--font-size-sm);transition:all .3s ease}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #10b9811a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}.form-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end;padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.devices-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.device-item .card-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.device-info{flex:1}.device-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.device-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;color:var(--primary)}.device-details h4{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.device-details p{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}.device-status{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}.status-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.status-label{font-size:var(--font-size-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.status-value{display:flex;align-items:center;gap:var(--spacing-xs);font-weight:600;font-size:var(--font-size-sm)}.status-value.online{color:var(--success)}.status-value.offline{color:var(--error)}.battery-indicator{display:flex;align-items:center;gap:var(--spacing-sm);width:100%}.battery-level{height:8px;border-radius:4px;transition:all .3s ease}.device-actions{display:flex;gap:var(--spacing-sm)}.btn.danger{color:var(--error);border-color:var(--error)}.btn.danger:hover{background:#ef44441a}.cloud-status{margin-bottom:var(--spacing-lg)}.cloud-info{color:var(--text-secondary);font-size:var(--font-size-sm);margin:var(--spacing-xs) 0 0 0}.cloud-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-md)}.stat{text-align:center}.stat-label{display:block;font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.stat-value{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary)}.sync-options,.notification-options{display:flex;flex-direction:column;gap:var(--spacing-lg)}.sync-option,.notification-option{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.option-info h5{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.option-info p{color:var(--text-secondary);margin:0;line-height:1.6}.toggle-switch{position:relative;width:52px;height:28px;background:var(--text-tertiary);border-radius:14px;cursor:pointer;transition:all .3s ease;flex-shrink:0;-webkit-user-select:none;user-select:none;box-shadow:inset 0 2px 4px #0000001a}.toggle-slider{width:100%;height:100%;position:relative;border-radius:14px}.radio-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.radio-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:background-color .2s ease}.radio-label:hover{background:var(--bg-secondary)}.radio-label input[type=radio]{display:none}.radio-custom{width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;position:relative;transition:all .3s ease}.radio-label input[type=radio]:checked+.radio-custom{border-color:var(--primary)}.radio-label input[type=radio]:checked+.radio-custom:after{content:"";width:8px;height:8px;background:var(--primary);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width: 1024px){.settings-layout{grid-template-columns:1fr;gap:var(--spacing-lg)}.settings-sidebar{position:static}.settings-tabs{flex-direction:row;overflow-x:auto;gap:var(--spacing-sm)}.settings-tab{white-space:nowrap;flex-shrink:0}}@media (max-width: 768px){.section-header{flex-direction:column;gap:var(--spacing-md);align-items:flex-start}.form-row{grid-template-columns:1fr}.device-item .card-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.device-status{grid-template-columns:repeat(2,1fr);width:100%}.device-actions{width:100%;justify-content:flex-end}.cloud-stats{grid-template-columns:1fr}.form-actions{justify-content:stretch}.form-actions .btn{flex:1}}@media (max-width: 480px){.settings-tabs{flex-direction:column}.device-status{grid-template-columns:1fr}.device-actions{flex-direction:column}.sync-option,.notification-option{flex-direction:column;gap:var(--spacing-md)}}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--text-primary: #1e293b;--text-secondary: #64748b;--text-tertiary: #94a3b8;--border-color: #e2e8f0;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--primary: #10b981;--primary-hover: #059669;--secondary: #0ea5e9;--secondary-hover: #0284c7;--accent: #f59e0b;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-tertiary: #64748b;--border-color: #334155;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .2)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.5;transition:background-color .3s ease,color .3s ease}.app{display:flex;min-height:100vh}.main-content{flex:1;display:flex;flex-direction:column;margin-left:280px;transition:margin-left .3s ease}.page-content{flex:1;padding:var(--spacing-lg);overflow-y:auto}.card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:all .3s ease}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.card-content{padding:var(--spacing-lg)}.card-title{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.card-subtitle{font-size:var(--font-size-sm);color:var(--text-secondary)}.grid{display:grid;gap:var(--spacing-lg)}.grid-cols-1{grid-template-columns:repeat(1,1fr)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-weight:500;font-size:var(--font-size-sm);border:none;cursor:pointer;transition:all .2s ease;text-decoration:none;gap:var(--spacing-xs)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background:var(--secondary);color:#fff}.btn-secondary:hover{background:var(--secondary-hover);transform:translateY(-1px)}.btn-outline{background:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.btn-outline:hover{background:var(--bg-tertiary)}.toggle-switch{position:relative;width:52px;height:28px;background:var(--text-tertiary);border-radius:14px;cursor:pointer;transition:background .3s ease;-webkit-user-select:none;user-select:none;box-shadow:inset 0 2px 4px #0000001a;flex-shrink:0}.toggle-switch.active{background:var(--primary);box-shadow:inset 0 2px 4px #10b98133}.toggle-slider{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:14px}.toggle-knob{width:24px;height:24px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 6px #00000026}.toggle-switch.active .toggle-knob{transform:translate(24px)}.toggle-switch:hover{transform:scale(1.05)}.toggle-switch:active{transform:scale(.95)}.progress-circle{position:relative;width:120px;height:120px}.progress-circle svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-circle .background{stroke:var(--border-color);stroke-width:8;fill:none}.progress-circle .progress{stroke:var(--primary);stroke-width:8;fill:none;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.progress-value{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary)}.progress-label{font-size:var(--font-size-xs);color:var(--text-secondary)}.alert{padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);border:1px solid}.alert-warning{background:#f59e0b1a;border-color:var(--warning);color:#92400e}.alert-error{background:#ef44441a;border-color:var(--error);color:#dc2626}.alert-success{background:#10b9811a;border-color:var(--success);color:#059669}.status-indicator{display:inline-flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm)}.status-dot{width:8px;height:8px;border-radius:50%}.status-online{background:var(--success)}.status-offline{background:var(--text-tertiary)}.status-warning{background:var(--warning)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fade-in{animation:fadeIn .5s ease-out}.animate-pulse{animation:pulse 2s infinite}@media (max-width: 1024px){.main-content{margin-left:0}.grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.page-content{padding:var(--spacing-md)}.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(1,1fr)}.card-content,.card-header{padding:var(--spacing-md)}}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:var(--spacing-sm)}.gap-4{gap:var(--spacing-md)}.gap-6{gap:var(--spacing-lg)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-4{margin-bottom:var(--spacing-md)}.mb-6{margin-bottom:var(--spacing-lg)}.p-4{padding:var(--spacing-md)}.p-6{padding:var(--spacing-lg)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.shadow{box-shadow:var(--shadow)}.shadow-lg{box-shadow:var(--shadow-lg)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}