.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-5);background:radial-gradient(circle at 20% 20%,var(--primary-soft),transparent 40%),var(--bg)}.login-card{background:var(--surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-10) var(--space-8);width:100%;max-width:400px;box-shadow:var(--shadow-lg);animation:rise .4s var(--ease-out)}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.login-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}.login-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}.login-card h1{font-size:22px}.subtitle{color:var(--text-secondary);margin-bottom:var(--space-8);font-size:14px}.login-card form{display:flex;flex-direction:column;gap:var(--space-4)}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:14px;color:var(--text-tertiary);pointer-events:none}.input-group input{padding-left:42px;margin:0}.submit-btn{width:100%;margin-top:var(--space-2);font-size:15px;font-weight:600}.spin{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toggle{text-align:center;margin-top:var(--space-6);font-size:14px;color:var(--text-secondary)}.toggle button.link{background:none;border:none;color:var(--primary);cursor:pointer;padding:0;min-height:auto;font-weight:600}.toggle button.link:hover{color:var(--primary-hover)}.toggle button.link:disabled{opacity:.5;cursor:not-allowed}.add-sensor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.add-sensor-modal{background:var(--surface);border-radius:var(--radius-lg);max-width:500px;width:90%;box-shadow:var(--shadow-xl)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-6);border-bottom:1px solid var(--border)}.modal-header h3{margin:0;font-size:18px}.close-btn{background:none;border:none;padding:0;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center}.close-btn:hover{color:var(--text)}.sensor-form{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.form-group input,.form-group select{padding:var(--space-3);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;transition:all var(--duration-base)}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.form-group small{font-size:12px;color:var(--warning)}.error-message{padding:var(--space-3);background:var(--error-soft);color:var(--error);border-radius:var(--radius-md);font-size:14px}.form-actions{display:flex;gap:var(--space-3);padding-top:var(--space-4);margin-top:var(--space-2);border-top:1px solid var(--border)}.btn-cancel,.btn-submit{flex:1;padding:var(--space-3);border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--duration-base);font-size:14px}.btn-cancel:hover:not(:disabled){border-color:var(--text-secondary)}.btn-submit{background:var(--primary);color:#fff}.btn-submit:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-submit:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 600px){.add-sensor-modal{width:95%}.sensor-form{padding:var(--space-4)}}.activity-log{width:100%}.activity-list{display:flex;flex-direction:column;gap:var(--space-3)}.activity-item{display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--bg);border-radius:var(--radius-md);border-left:3px solid var(--border);transition:all var(--duration-fast) var(--ease-in-out)}.activity-item:hover{box-shadow:var(--shadow-sm);border-left-color:var(--primary)}.activity-icon{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary);flex-shrink:0}.activity-icon .icon-on{color:var(--success)}.activity-icon .icon-off{color:var(--danger)}.activity-icon .icon-success{color:var(--success);background:var(--success-soft)}.activity-icon .icon-danger{color:var(--danger);background:var(--danger-soft)}.activity-details{flex:1;min-width:0}.activity-action{font-weight:600;color:var(--text);font-size:14px;margin-bottom:4px}.activity-meta{display:flex;gap:var(--space-3);font-size:12px;color:var(--text-tertiary)}.activity-triggered{background:var(--primary-soft);color:var(--primary);padding:2px 8px;border-radius:3px;font-weight:500}.activity-time{color:var(--text-tertiary)}.activity-loading,.activity-empty{text-align:center;padding:var(--space-8) var(--space-4);color:var(--text-tertiary);font-size:14px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4);animation:fadeIn var(--duration-base) var(--ease-out)}.modal-content{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:700px;width:100%;max-height:90vh;display:flex;flex-direction:column;animation:slideUp var(--duration-base) var(--ease-out)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-6);border-bottom:1px solid var(--border-light)}.modal-title{display:flex;align-items:center;gap:var(--space-3)}.modal-title h2{font-size:20px;margin:0}.modal-title svg{color:var(--primary)}.modal-close{min-height:36px;min-width:36px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.modal-close:hover{color:var(--text);background:var(--bg)}.modal-tabs{display:flex;gap:0;padding:0 var(--space-6);border-bottom:1px solid var(--border-light);background:var(--bg)}.tab-btn{flex:1;padding:var(--space-4);border:none;background:transparent;color:var(--text-secondary);font-weight:500;font-size:14px;cursor:pointer;border-bottom:2px solid transparent;transition:all var(--duration-fast) var(--ease-in-out);min-height:auto}.tab-btn:hover{color:var(--text);background:transparent}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.modal-body{flex:1;overflow-y:auto;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6)}.spec-section{display:flex;flex-direction:column;gap:var(--space-4)}.spec-section h3{font-size:14px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin:0}.spec-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--border-light);gap:var(--space-4)}.spec-row:last-child{border-bottom:none}.spec-label{color:var(--text-secondary);font-weight:500;font-size:14px}.spec-value{color:var(--text);font-weight:600;font-size:14px;text-align:right;display:inline-flex;align-items:center;gap:6px}.spec-value.highlight{color:var(--primary);font-weight:700;font-size:16px}.spec-code{background:var(--bg);border:1px solid var(--border);padding:4px 10px;border-radius:4px;font-family:SF Mono,monospace;font-size:12px;color:var(--primary);word-break:break-all}.spec-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600}.spec-badge.online{background:var(--success-soft);color:var(--success)}.spec-badge.offline{background:var(--danger-soft);color:var(--danger)}.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}.spec-badge.offline .badge-dot{animation:none}.spec-connection{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:500}.hardware-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4)}.hw-spec{display:flex;gap:var(--space-3);padding:var(--space-4);background:var(--bg);border-radius:var(--radius-md);border:1px solid var(--border-light)}.hw-spec svg{color:var(--primary);flex-shrink:0}.hw-label{font-size:12px;color:var(--text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.hw-value{font-size:13px;color:var(--text);font-weight:500;margin-top:2px}.relays-management{display:flex;flex-direction:column;gap:var(--space-4)}.relays-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.summary-item{padding:var(--space-4);background:var(--bg);border-radius:var(--radius-md);border:1px solid var(--border-light);display:flex;flex-direction:column;gap:4px}.summary-label{font-size:12px;color:var(--text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.summary-value{font-size:18px;font-weight:700;color:var(--primary)}.add-relay-form{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--bg);border-radius:var(--radius-md);border:1px solid var(--primary)}.add-relay-form input{margin:0}.warning-box{padding:var(--space-4);background:var(--warning-soft);color:var(--warning);border-radius:var(--radius-md);border-left:3px solid var(--warning);font-size:14px;font-weight:500}.relay-list{margin-top:var(--space-2)}.relay-items{display:flex;flex-direction:column;gap:var(--space-3)}.relay-item-detailed{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--bg);border-radius:var(--radius-md);border:1px solid var(--border-light);transition:all var(--duration-fast) var(--ease-in-out)}.relay-item-detailed:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}.relay-info{flex:1;display:flex;align-items:center;gap:var(--space-3);min-width:0}.relay-channel{font-weight:700;color:var(--primary);font-size:12px;text-transform:uppercase;min-width:40px}.relay-name{font-weight:500;color:var(--text);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.relay-state-badge{flex-shrink:0}.relay-status{padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.relay-status.on{background:var(--success-soft);color:var(--success)}.relay-status.off{background:var(--danger-soft);color:var(--danger)}.no-relays-text{color:var(--text-tertiary);font-size:14px;text-align:center;padding:var(--space-6) 0;margin:0}.modal-footer{padding:var(--space-6);border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:var(--space-3)}@media (max-width: 640px){.modal-content{max-height:95vh;border-radius:var(--radius-lg)}.modal-body{padding:var(--space-4)}.spec-row{flex-direction:column;align-items:flex-start}.spec-value{text-align:left}.relays-summary{grid-template-columns:1fr}}.device-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--duration-base) var(--ease-in-out);display:flex;flex-direction:column;gap:var(--space-5)}.device-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--border)}.device-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}.device-info{flex:1;min-width:0}.device-actions{display:flex;gap:4px;flex-shrink:0}.device-info h3{margin:0 0 var(--space-3) 0;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rename-input{font-size:18px;font-weight:600;padding:8px 12px;margin:0 0 var(--space-3) 0;min-height:40px;border:2px solid var(--primary);border-radius:var(--radius-md);background:var(--primary-soft)}.rename-actions{display:flex;gap:6px}.icon-btn{min-height:36px;min-width:36px;padding:0;display:flex;align-items:center;justify-content:center}.add-btn{padding:var(--space-2);background:var(--primary-soft);border:1.5px solid var(--primary);color:var(--primary);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-base);font-weight:600}.add-btn:hover{background:var(--primary);color:#fff;transform:scale(1.05)}.device-meta{background:var(--bg);border-radius:var(--radius-md);padding:var(--space-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-4);font-size:13px}.meta-row{display:flex;flex-direction:column;gap:4px}.meta-label{color:var(--text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px}.meta-value{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:500;text-transform:capitalize}.add-sensor-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--primary-soft);border:1.5px solid var(--primary);color:var(--primary);border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-size:13px;transition:all var(--duration-base)}.add-sensor-btn:hover{background:var(--primary);color:#fff;transform:scale(1.05)}.device-meta code{background:var(--surface);border:1px solid var(--border);padding:4px 8px;border-radius:4px;font-family:SF Mono,monospace;font-size:12px;color:var(--primary);word-break:break-all}.relays-section h4{margin:0 0 var(--space-4) 0;font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.sensors-section{margin-top:var(--space-6)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.section-header h4{margin:0;font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.sensors-section h4{margin:0 0 var(--space-4) 0;font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.sensors-grid,.relays-grid{display:flex;flex-wrap:wrap;gap:var(--space-3)}.relay-wrapper,.sensor-wrapper{position:relative}.sensor-button{width:100%;padding:var(--space-3);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:500;min-height:70px;transition:all var(--duration-base) var(--ease-in-out);cursor:default;-webkit-user-select:none;user-select:none}.sensor-button:hover{border-color:var(--primary-light);background:var(--primary-soft)}.sensor-label{font-weight:600;color:var(--text);text-align:center;word-wrap:break-word}.sensor-value{font-size:12px;font-weight:600;color:var(--primary)}.relay-button{width:100%;padding:var(--space-4);border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:500;min-height:100px;transition:all var(--duration-base) var(--ease-in-out);position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.relay-button:hover:not(:disabled){border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);transform:translateY(-2px)}.relay-button:active:not(:disabled){transform:translateY(0)}.relay-button.on{background:var(--success-soft);border-color:var(--success)}.relay-button.on:hover:not(:disabled){border-color:var(--success-dark);box-shadow:0 0 0 3px #10b98126}.relay-button.off{opacity:.7}.relay-button.off:hover:not(:disabled){opacity:1}.relay-button:disabled{opacity:.5;cursor:not-allowed;color:var(--text-tertiary)}.relay-button:disabled .relay-indicator{background:var(--text-tertiary)!important}.relay-button.is-new{animation:highlightPulse 2s ease-out forwards;border-color:var(--success)!important;background:var(--success-soft)!important}@keyframes highlightPulse{0%{box-shadow:0 0 0 6px #10b98166;border-color:var(--success);background:var(--success-soft)}50%{box-shadow:0 0 0 3px #10b98133}to{box-shadow:none;border-color:var(--border);background:var(--bg)}}.relay-button:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--shadow-md)}.relay-button.on{border-color:var(--success);background:var(--success-soft);color:var(--success)}.relay-button.on:hover:not(:disabled){box-shadow:0 0 12px #10b9814d}.relay-indicator{width:12px;height:12px;border-radius:50%;background:var(--text-tertiary);transition:all var(--duration-base) var(--ease-in-out));box-shadow:0 0 8px #0000001a}.relay-button.on .relay-indicator{background:var(--success);box-shadow:0 0 12px #10b98180}.relay-label{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center;color:var(--text-secondary);font-weight:500}.relay-button.on .relay-label{color:var(--success);font-weight:600}.relay-state{font-size:11px;font-weight:700;letter-spacing:.1em;opacity:.8;text-transform:uppercase}.relay-button:disabled{opacity:.5;cursor:not-allowed}.relay-edit{display:flex;flex-direction:column;gap:6px}.relay-name-input{font-size:12px;padding:6px 8px;border:1.5px solid var(--primary);border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--text);min-height:32px}.relay-edit-actions{display:flex;gap:4px;justify-content:center}.relay-edit-btn{position:absolute;top:4px;right:4px;min-height:28px;min-width:28px;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--duration-fast) var(--ease-in-out);background:var(--primary);color:#fff;border-radius:var(--radius-sm)}.relay-wrapper:hover .relay-edit-btn{opacity:1}.no-relays,.no-sensors{grid-column:1 / -1;text-align:center;color:var(--text-tertiary);font-size:13px;padding:var(--space-6) var(--space-4)}@media (max-width: 600px){.device-card{padding:var(--space-4)}.relays-grid,.sensors-grid{gap:var(--space-2)}.relay-button{min-height:80px;padding:var(--space-3)}}.add-device-form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);max-width:520px;margin:0 0 var(--space-6) 0;box-shadow:var(--shadow-sm)}.form-header{display:flex;gap:var(--space-3);margin-bottom:var(--space-5)}.form-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.form-header h3{font-size:15px;margin-bottom:2px}.form-header p{color:var(--text-secondary);font-size:13px}.add-device-form-card form div{margin-bottom:var(--space-4)}.add-device-form-card label{display:block;font-weight:500;margin-bottom:var(--space-2);font-size:13px;color:var(--text)}.optional{color:var(--text-tertiary);font-weight:400;font-size:12px}.form-actions{display:flex;gap:var(--space-3);margin-top:var(--space-5)}.form-actions button{flex:1}@media (max-width: 600px){.add-device-form-card{padding:var(--space-4)}.form-actions{flex-direction:column}}.admin-panel{min-height:100vh;background:var(--bg);padding:var(--space-6)}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:2px solid var(--border)}.admin-title{display:flex;align-items:center;gap:var(--space-4)}.admin-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--primary-soft);border-radius:var(--radius-lg);color:var(--primary)}.admin-title h1{margin:0;font-size:28px;font-weight:700}.admin-title p{margin:var(--space-1) 0 0;color:var(--text-secondary);font-size:14px}.btn-secondary,.btn-primary{padding:var(--space-3) var(--space-4);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--duration-base);display:flex;align-items:center;gap:var(--space-2)}.btn-secondary{background:var(--bg-hover);color:var(--text);border:1.5px solid var(--border)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.alert{padding:var(--space-4);border-radius:var(--radius-lg);display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4);animation:slideDown .3s ease-out}.alert-error{background:var(--error-soft);border:1.5px solid var(--error);color:var(--error)}.alert-success{background:var(--success-soft);border:1.5px solid var(--success);color:var(--success)}.admin-tabs{display:flex;gap:var(--space-3);margin-bottom:var(--space-6);border-bottom:2px solid var(--border);overflow-x:auto}.tab{padding:var(--space-3) var(--space-4);background:none;border:none;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:var(--space-2);border-bottom:3px solid transparent;transition:all var(--duration-base);white-space:nowrap}.tab:hover{color:var(--text)}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.admin-content{max-width:1200px}.admin-section{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6)}.section-header h2{margin:0;font-size:24px}.section-header p{margin:var(--space-1) 0 0;color:var(--text-secondary);font-size:14px}.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6);transition:all var(--duration-base)}.card:hover{border-color:var(--primary-light);box-shadow:0 0 0 3px var(--primary-soft)}.card h3{margin:0 0 var(--space-4) 0;font-size:16px;font-weight:700}.generate-form{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-4);align-items:flex-end;margin-bottom:var(--space-6)}.form-group label{font-size:14px;font-weight:600;color:var(--text)}.form-group small{font-size:12px;color:var(--text-tertiary)}.generated-result{background:var(--success-soft);border-color:var(--success)}.result-header{margin-bottom:var(--space-4)}.result-header h4{margin:0;color:var(--success);font-size:16px}.result-id{margin:var(--space-1) 0 0;font-family:monospace;color:var(--success);font-weight:600;font-size:14px}.credential-box{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}.credential-item{display:flex;flex-direction:column;gap:var(--space-2)}.credential-item label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.credential-row{display:flex;gap:var(--space-2);align-items:center}.credential-row code{flex:1;padding:var(--space-3);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);font-family:Courier New,monospace;font-size:13px;color:var(--text);word-break:break-all}.copy-btn,.toggle-btn,.secret-btn{padding:var(--space-2);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--duration-base);display:flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}.copy-btn:hover,.toggle-btn:hover,.secret-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}.warning-box{display:flex;gap:var(--space-3);padding:var(--space-4);background:var(--warning-soft);border:1px solid var(--warning-light);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:13px;color:var(--warning-dark)}.warning-box svg{flex-shrink:0;color:var(--warning)}.warning-box strong{color:var(--warning)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}.stat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center}.stat-value{font-size:32px;font-weight:700;color:var(--primary);margin-bottom:var(--space-2)}.stat-label{font-size:13px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.device-section{margin-bottom:var(--space-6)}.device-section h3{margin-bottom:var(--space-4);font-size:15px;color:var(--text)}.devices-list{display:flex;flex-direction:column;gap:var(--space-3)}.device-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all var(--duration-base)}.device-row:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.device-id{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)}.device-id code{font-family:monospace;font-size:12px;color:var(--primary);font-weight:600}.device-name{font-size:13px;color:var(--text-secondary);background:var(--primary-soft);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.device-meta{display:flex;gap:var(--space-2);flex-wrap:wrap;font-size:12px;color:var(--text-secondary)}.device-relays,.device-owner{background:var(--bg-hover);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.device-status{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-weight:600}.device-status.status-online{color:var(--success)}.device-status.status-offline{color:var(--warning)}.device-secret{display:flex;gap:var(--space-2);align-items:center}.device-secret code{font-family:monospace;font-size:12px;color:var(--text-secondary);min-width:120px;text-align:right}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);text-align:center;color:var(--text-tertiary)}.empty-state svg{margin-bottom:var(--space-3);opacity:.5}.empty-state p{margin:0;font-size:16px;font-weight:600}.empty-state small{display:block;margin-top:var(--space-2);font-size:13px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-secondary)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:var(--space-3)}@keyframes spin{to{transform:rotate(360deg)}}@media print{body{background:#fff}.admin-panel{padding:0}.admin-header,.admin-tabs,.no-print,.btn-primary,.btn-secondary{display:none!important}.generated-result{page-break-inside:avoid;border:none;background:#fff;box-shadow:none}.credential-box{grid-template-columns:1fr}}@media (max-width: 768px){.admin-panel{padding:var(--space-4)}.admin-header{flex-direction:column;gap:var(--space-4);align-items:flex-start}.generate-form,.credential-box{grid-template-columns:1fr}.device-row{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.device-secret{width:100%}.device-secret code{text-align:left}.stats-grid{grid-template-columns:repeat(2,1fr)}.section-header{flex-direction:column;align-items:flex-start;gap:var(--space-3)}}.dashboard-builder{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);display:flex;flex-direction:column;z-index:2000}.builder-header{padding:var(--space-6);border-bottom:1px solid var(--border-light);background:var(--surface);display:flex;justify-content:space-between;align-items:flex-start}.builder-header h2{margin:0 0 var(--space-1) 0;font-size:24px}.builder-subtitle{margin:0;color:var(--text-secondary);font-size:13px}.builder-layout{display:flex;flex:1;overflow:hidden}.builder-sidebar{width:280px;background:var(--surface);border-right:1px solid var(--border-light);overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-6)}.sidebar-section h4{margin:0 0 var(--space-3) 0;font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;font-weight:600}.dashboard-list{display:flex;flex-direction:column;gap:var(--space-2)}.dashboard-item{padding:var(--space-3) var(--space-4);background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;font-weight:500;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--duration-fast) var(--ease-in-out);text-align:left}.dashboard-item:hover{border-color:var(--primary);background:var(--surface);color:var(--text)}.dashboard-item.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:600}.widget-count{background:var(--text-tertiary);color:#fff;font-size:11px;padding:2px 6px;border-radius:3px;font-weight:600}.dashboard-item.active .widget-count{background:var(--primary)}.create-dashboard-form{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md)}.create-dashboard-form input{margin:0;min-height:36px}.builder-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.dashboard-header{padding:var(--space-6);border-bottom:1px solid var(--border-light);background:var(--surface);display:flex;justify-content:space-between;align-items:center}.dashboard-header h3{margin:0;font-size:18px}.header-actions{display:flex;gap:var(--space-3)}.add-widget-bar{padding:var(--space-4) var(--space-6);background:var(--bg);border-bottom:1px solid var(--border-light);position:relative}.widget-menu{position:absolute;top:100%;left:var(--space-6);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-4);width:320px;display:flex;flex-direction:column;gap:var(--space-4);z-index:10}.menu-section h5{margin:0 0 var(--space-3) 0;font-size:12px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;font-weight:600}.widget-types{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.widget-type{padding:var(--space-3);background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--duration-fast) var(--ease-in-out))}.widget-type:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}.widget-type.selected{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}.menu-section select{margin:0;min-height:36px}.widgets-grid{flex:1;overflow-y:auto;padding:var(--space-6);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-5)}.empty-dashboard,.empty-state{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-tertiary);text-align:center}.empty-dashboard h4,.empty-state h3{margin:var(--space-4) 0 var(--space-2);color:var(--text-secondary)}.empty-dashboard p,.empty-state p{margin:0;font-size:14px}.dashboard-widget{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);position:relative;min-height:300px;transition:all var(--duration-base) var(--ease-in-out));box-shadow:var(--shadow-sm)}.dashboard-widget:hover{box-shadow:var(--shadow-md)}.widget-remove{position:absolute;top:var(--space-3);right:var(--space-3);min-height:32px;min-width:32px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--danger);color:#fff;border-radius:var(--radius-md);opacity:0;transition:opacity var(--duration-fast) var(--ease-in-out))}.dashboard-widget:hover .widget-remove{opacity:1}.widget-header h5{margin:0;font-size:14px;font-weight:600}.widget-content{flex:1;display:flex;align-items:center;justify-content:center}.relay-widget-content{width:100%;display:flex;align-items:center;justify-content:center}.relay-toggle{width:140px;height:140px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);font-size:16px;font-weight:600;border:3px solid var(--border);background:var(--bg);cursor:pointer;transition:all var(--duration-base) var(--ease-in-out))}.relay-toggle:hover:not(:disabled){transform:scale(1.05)}.relay-toggle.on{border-color:var(--success);background:var(--success-soft);color:var(--success);box-shadow:0 0 20px #10b9814d}.relay-toggle.off{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.gauge-widget-content{width:100%;display:flex;align-items:center;justify-content:center}.gauge-display{text-align:center}.gauge-value{font-size:48px;font-weight:700;color:var(--primary);margin-bottom:var(--space-2)}.gauge-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.chart-widget-content,.chart-placeholder{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);color:var(--text-tertiary)}.chart-placeholder{min-height:200px}.stats-widget-content{width:100%;display:flex;flex-direction:column;gap:var(--space-3)}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3);background:var(--bg);border-radius:var(--radius-md);border-left:3px solid var(--primary)}.stat-label{font-size:12px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:14px;font-weight:600;color:var(--text)}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-size:14px}@media (max-width: 1024px){.builder-sidebar{width:240px}.widgets-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media (max-width: 768px){.builder-layout{flex-direction:column}.builder-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-light);max-height:200px;flex-direction:row;gap:var(--space-4);overflow-x:auto}.dashboard-list{flex-direction:row}.widgets-grid{grid-template-columns:1fr}.widget-menu{width:calc(100vw - 32px)}}.onboarding{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);padding:var(--space-4)}.onboarding-container{background:var(--surface);border-radius:var(--radius-xl);padding:var(--space-12);max-width:600px;width:100%;box-shadow:var(--shadow-xl);text-align:center}.onboarding-hero{margin-bottom:var(--space-12)}.onboarding-icon{display:flex;align-items:center;justify-content:center;width:100px;height:100px;background:linear-gradient(135deg,var(--primary-soft),var(--primary));border-radius:50%;margin:0 auto var(--space-6);color:var(--primary)}.onboarding-hero h1{font-size:32px;margin-bottom:var(--space-3)}.onboarding-hero p{font-size:18px;color:var(--text-secondary)}.onboarding-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-6);margin-bottom:var(--space-12)}.step{padding:var(--space-6);background:var(--bg);border-radius:var(--radius-lg);border:2px solid var(--border-light)}.step-number{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:50%;font-weight:700;font-size:24px;margin:0 auto var(--space-4)}.step h3{font-size:16px;margin-bottom:var(--space-2)}.step p{font-size:13px;margin:0}.onboarding-cta{width:100%;margin-bottom:var(--space-8);min-height:48px;font-size:16px}.onboarding-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-4)}.feature{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:var(--text-secondary)}.feature svg{color:var(--primary)}.feature span{font-size:12px;font-weight:500}@media (max-width: 768px){.onboarding-container{padding:var(--space-6)}.onboarding-hero h1{font-size:24px}.onboarding-hero p{font-size:16px}.onboarding-steps{grid-template-columns:1fr}}.room-manager{display:flex;flex-direction:column;height:100%}.room-list-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border)}.room-list-header h3{margin:0;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.room-list{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-3);overflow-y:auto;flex:1}.room-btn{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1.5px solid transparent;border-radius:var(--radius-lg);background:var(--bg);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--duration-base) var(--ease-in-out);white-space:nowrap}.room-btn:hover{background:var(--bg-hover);border-color:var(--border)}.room-btn.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}.room-btn svg{flex-shrink:0}.room-icon{font-size:18px;display:flex;align-items:center;justify-content:center}.room-btn.add-room{background:var(--success-soft);border-color:var(--success);color:var(--success)}.room-btn.add-room:hover{background:var(--success);color:#fff}.add-room-form{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--bg);border-radius:var(--radius-lg);border:1.5px dashed var(--primary)}.add-room-form input{padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text);font-size:13px}.add-room-form input::placeholder{color:var(--text-tertiary)}.room-form-controls{display:flex;gap:var(--space-2)}.confirm-btn,.cancel-btn{flex:1;padding:var(--space-2) var(--space-3);border:none;border-radius:var(--radius-md);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--duration-base)}.confirm-btn{background:var(--primary);color:#fff}.confirm-btn:hover:not(:disabled){background:var(--primary-dark)}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}.cancel-btn{background:var(--bg-hover);color:var(--text);display:flex;align-items:center;justify-content:center;padding:var(--space-2);flex:0}.cancel-btn:hover{background:var(--border)}@media (max-width: 768px){.room-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:var(--space-2);padding:var(--space-3);-webkit-overflow-scrolling:touch}.room-btn{flex-shrink:0}.room-btn span:last-child{display:none}.room-btn:hover,.room-btn.active{transform:scale(1.1)}}.wifi-settings{padding:var(--space-6);min-height:100vh;background:var(--bg)}.wifi-settings-container{max-width:1200px;margin:0 auto}.wifi-settings-loading{display:flex;align-items:center;justify-content:center;min-height:400px;font-size:16px;color:var(--text-secondary)}.wifi-settings-header{display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:2px solid var(--border)}.wifi-icon{color:var(--primary);flex-shrink:0}.wifi-settings-header h1{margin:0;font-size:28px}.wifi-settings-header p{margin:var(--space-1) 0 0;color:var(--text-secondary)}.alert{padding:var(--space-4);border-radius:var(--radius-lg);display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-4);animation:slideDown .3s ease-out}.alert.error{background:var(--error-soft);border:1.5px solid var(--error);color:var(--error)}.alert.success{background:var(--success-soft);border:1.5px solid var(--success);color:var(--success)}.alert svg{flex-shrink:0;margin-top:2px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.wifi-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}.settings-section{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--duration-base) var(--ease-in-out)}.settings-section:hover{border-color:var(--primary-light);box-shadow:0 0 0 3px var(--primary-soft)}.settings-section h2{font-size:18px;margin:0 0 var(--space-2) 0;display:flex;align-items:center;gap:var(--space-2)}.settings-section h3{font-size:16px;margin:var(--space-4) 0 var(--space-3) 0}.section-description{color:var(--text-secondary);font-size:14px;margin:0 0 var(--space-4) 0}.wifi-form{display:flex;flex-direction:column;gap:var(--space-4)}.form-group label{font-weight:600;font-size:14px;color:var(--text)}.form-group input{padding:var(--space-3) var(--space-4);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:14px;transition:all var(--duration-base)}.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.form-group input:disabled{opacity:.6;cursor:not-allowed}.password-input-group{position:relative;display:flex}.password-input-group input{flex:1}.toggle-password{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:var(--space-2);display:flex;align-items:center;justify-content:center;transition:color var(--duration-base)}.toggle-password:hover:not(:disabled){color:var(--primary)}.toggle-password:disabled{opacity:.5;cursor:not-allowed}.last-updated{font-size:12px;color:var(--text-tertiary);padding:var(--space-3);background:var(--bg);border-radius:var(--radius-md);border:1px solid var(--border-light)}.form-actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)}.form-actions button{flex:1;padding:var(--space-3) var(--space-4);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--duration-base);display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:40px}.form-actions .primary{background:var(--primary);color:#fff}.form-actions .primary:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.form-actions .secondary{background:var(--bg-hover);color:var(--text);border:1.5px solid var(--border)}.form-actions .secondary:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.form-actions button:disabled{opacity:.5;cursor:not-allowed}.devices-list{display:flex;flex-direction:column;gap:var(--space-4)}.device-group{border-top:1px solid var(--border);padding-top:var(--space-4)}.device-group:first-child{border-top:none;padding-top:0}.group-title{display:flex;align-items:center;gap:var(--space-2);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0 0 var(--space-3) 0}.group-title svg{color:var(--primary)}.device-card{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all var(--duration-base)}.device-card:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.device-info{flex:1}.device-info h4{margin:0 0 var(--space-1) 0;font-size:14px;font-weight:600}.device-id{margin:0;font-size:12px;color:var(--text-secondary);font-family:monospace}.device-ip,.device-last-seen{margin:var(--space-1) 0 0 0;font-size:12px;color:var(--text-tertiary)}.device-status{display:flex;align-items:center;gap:var(--space-2);font-size:12px;font-weight:600;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);white-space:nowrap}.device-status.online{background:var(--success-soft);color:var(--success)}.device-status.offline{background:var(--warning-soft);color:var(--warning)}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.no-devices{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);color:var(--text-tertiary)}.no-devices svg{margin-bottom:var(--space-3);opacity:.5}.no-devices p{margin:0;font-size:14px}.offline{border-color:var(--warning-light);background:var(--warning-soft)}.offline-info{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg);border:1px solid var(--warning-light);border-radius:var(--radius-md);margin-top:var(--space-4);font-size:13px;color:var(--text-secondary)}.offline-info svg{flex-shrink:0;color:var(--warning);margin-top:2px}.offline-info p{margin:0}.info-box{grid-column:1 / -1;background:var(--primary-soft);border-color:var(--primary)}.info-box h3{color:var(--primary);margin-top:0}.info-box ul{margin:0;padding-left:var(--space-4);list-style:none}.info-box li{margin:var(--space-2) 0;font-size:14px;color:var(--text-secondary);position:relative;padding-left:var(--space-3)}.info-box li:before{content:"✓";position:absolute;left:0;color:var(--primary);font-weight:700}@media (max-width: 1024px){.wifi-settings-grid{grid-template-columns:1fr}.info-box{grid-column:1}}@media (max-width: 768px){.wifi-settings{padding:var(--space-3)}.wifi-settings-header{flex-direction:column;text-align:center;align-items:flex-start}.settings-section{padding:var(--space-4)}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}.device-card{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.device-status{align-self:flex-start}}.automation-builder-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.automation-builder{background:var(--surface);border-radius:var(--radius-xl);max-width:600px;width:90%;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)}.builder-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-6);border-bottom:1px solid var(--border)}.builder-header h2{margin:0;font-size:20px}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary);padding:0}.builder-content{overflow-y:auto;padding:var(--space-6);flex:1;display:flex;flex-direction:column;gap:var(--space-6)}.form-section{display:flex;flex-direction:column;gap:var(--space-2)}.form-section label{font-weight:600;font-size:14px;color:var(--text)}.form-section input,.form-section select{padding:var(--space-3);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:14px;transition:all var(--duration-base)}.form-section input:focus,.form-section select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.builder-section{border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);background:var(--bg-hover)}.builder-section h3{margin:0 0 var(--space-4) 0;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-group label{font-weight:600;font-size:13px;color:var(--text)}.form-group input,.form-group select{padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font-size:13px}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}.days-selector{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-2)}.day-btn{padding:var(--space-2);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all var(--duration-base)}.day-btn:hover{border-color:var(--primary)}.day-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.conditions-list,.actions-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3)}.condition-row,.action-row{display:grid;grid-template-columns:1fr auto auto auto;gap:var(--space-2);align-items:center}.condition-row select,.condition-row input,.action-row select,.action-row input{padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font-size:12px}.condition-row button,.action-row button{padding:var(--space-2);background:var(--error-soft);border:1px solid var(--error);color:var(--error);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-base)}.condition-row button:hover,.action-row button:hover{background:var(--error);color:#fff}.add-condition-btn,.add-action-btn{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-3);border:1.5px dashed var(--primary);border-radius:var(--radius-md);background:transparent;color:var(--primary);font-weight:600;cursor:pointer;transition:all var(--duration-base)}.add-condition-btn:hover,.add-action-btn:hover{background:var(--primary-soft);border-style:solid}.empty-state{text-align:center;padding:var(--space-4);color:var(--text-tertiary)}.builder-actions{display:flex;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--border);margin-top:auto}.btn-cancel,.btn-create{flex:1;padding:var(--space-3);border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--duration-base)}.btn-cancel{background:var(--bg-hover);color:var(--text);border:1.5px solid var(--border)}.btn-cancel:hover{border-color:var(--text-secondary)}.btn-create{background:var(--primary);color:#fff}.btn-create:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media (max-width: 600px){.automation-builder{width:95%;max-height:95vh}.builder-content{padding:var(--space-4);gap:var(--space-4)}.form-row,.condition-row,.action-row{grid-template-columns:1fr}}.automation-list{width:100%}.automations{display:flex;flex-direction:column;gap:var(--space-4)}.automation-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--duration-base)}.automation-item:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.automation-item.disabled{opacity:.6;background:var(--bg-hover)}.automation-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4)}.automation-info{display:flex;align-items:flex-start;gap:var(--space-3);flex:1;min-width:0}.expand-btn{background:none;border:none;padding:var(--space-2);cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--duration-base)}.expand-btn:hover{color:var(--primary)}.expand-btn svg{transition:transform var(--duration-base)}.expand-btn.open svg{transform:rotate(180deg)}.automation-title{flex:1;min-width:0}.automation-title h4{margin:0 0 var(--space-2) 0;font-size:16px;font-weight:700;color:var(--text)}.automation-summary{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;font-size:12px}.trigger{background:var(--primary-soft);color:var(--primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-weight:500}.arrow{color:var(--text-tertiary);font-weight:700}.action{background:var(--success-soft);color:var(--success);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-weight:500}.automation-controls{display:flex;gap:var(--space-2);flex-shrink:0}.status-btn,.play-btn,.edit-btn,.delete-btn{padding:var(--space-3);border:none;border-radius:var(--radius-md);background:var(--bg-hover);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-base)}.status-btn:hover,.play-btn:hover,.edit-btn:hover,.delete-btn:hover{color:var(--text);background:var(--border)}.status-btn.enabled{color:var(--success);background:var(--success-soft)}.status-btn.enabled:hover{color:#fff;background:var(--success)}.status-btn.disabled{color:var(--warning);background:var(--warning-soft)}.play-btn:hover,.edit-btn:hover{color:var(--primary);background:var(--primary-soft)}.delete-btn:hover{color:var(--error);background:var(--error-soft)}.automation-details{background:var(--bg);border-top:1px solid var(--border);padding:var(--space-4);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}.detail-section h5{margin:0 0 var(--space-3) 0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}.detail-section p{margin:var(--space-2) 0;font-size:13px;color:var(--text-secondary)}.detail-section strong{color:var(--text)}.empty-state{text-align:center;padding:var(--space-8) var(--space-4);background:var(--bg-hover);border-radius:var(--radius-lg);border:1.5px dashed var(--border)}.empty-state p{margin:0;font-size:16px;font-weight:600;color:var(--text-secondary)}.empty-state small{display:block;margin-top:var(--space-2);font-size:13px;color:var(--text-tertiary)}@media (max-width: 768px){.automation-header{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.automation-controls{width:100%;justify-content:space-around}.automation-details{grid-template-columns:1fr}.automation-summary{flex-direction:column;gap:var(--space-2)}.arrow{display:none}}.dashboard{min-height:100vh;background:var(--bg)}.dashboard-header{background:var(--surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:var(--space-4) var(--space-6);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}.header-left{display:flex;align-items:center;gap:var(--space-3)}.brand-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm)}.header-left h1{font-size:16px;line-height:1.2}.user-info{font-size:12px;color:var(--text-secondary)}.header-actions{display:flex;gap:var(--space-2)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6);gap:var(--space-4);flex-wrap:wrap}.view-switch{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;gap:4px}.view-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--text-secondary);border:none;min-height:36px;padding:6px 14px;font-size:13px;font-weight:500;border-radius:8px}.view-btn.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm)}.no-devices{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;padding:var(--space-12) var(--space-5);color:var(--text-secondary);border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}.no-devices svg{color:var(--text-tertiary)}.no-devices p{font-size:14px}@media (max-width: 768px){.dashboard-header{padding:var(--space-3) var(--space-4)}.btn-label{display:none}.header-actions button{padding:10px}.toolbar{flex-direction:column;align-items:stretch}.view-switch{justify-content:center}}@media (max-width: 1024px){.dashboard-header{padding:var(--space-3) var(--space-4)}.header-left h1{font-size:14px}.header-actions{gap:var(--space-1)}.header-actions button{min-width:40px}.device-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}@media (max-width: 768px){.dashboard{display:flex;flex-direction:column}.dashboard-header{padding:var(--space-3) var(--space-3);flex-wrap:wrap}.header-left h1{font-size:16px}.header-actions{gap:var(--space-1);margin-top:var(--space-2);width:100%;order:3}.header-actions button{flex:1;min-height:36px;font-size:12px}.toolbar{margin-left:var(--space-4);margin-right:var(--space-4);margin-bottom:var(--space-4);gap:var(--space-3);flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.view-switch{flex-shrink:0}.device-grid{grid-template-columns:1fr;padding:var(--space-4);gap:var(--space-4)}.no-devices{margin:var(--space-4)}}@media (max-width: 480px){.dashboard-header{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.brand-icon{width:32px;height:32px}.header-actions{width:100%;gap:var(--space-1)}.toolbar{margin-left:var(--space-3);margin-right:var(--space-3)}.device-grid{padding:var(--space-3);gap:var(--space-3)}}.dashboard-layout{display:flex;gap:var(--space-6);min-height:calc(100vh - 70px)}.dashboard-sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);flex-shrink:0;overflow-y:auto;-webkit-overflow-scrolling:touch}.dashboard-main{flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (max-width: 1024px){.dashboard-layout{gap:var(--space-4)}.dashboard-sidebar{width:200px}}@media (max-width: 768px){.dashboard-layout{flex-direction:column;gap:0;min-height:auto}.dashboard-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border)}.dashboard-main{min-height:auto}}.back-button{display:flex;align-items:center;gap:var(--space-2);font-size:14px;font-weight:600;padding:var(--space-2) var(--space-4);border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);cursor:pointer;transition:all var(--duration-base)}.back-button:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}:root{--primary: #5e7ce2;--primary-dark: #4a63c4;--primary-light: #7d9eff;--primary-soft: rgba(94, 124, 226, .1);--secondary: #00d4ff;--bg: #f8f9fc;--bg-elevated: #ffffff;--surface: #ffffff;--surface-hover: #f8f9fc;--surface-active: #f0f2f8;--border: #e5e9f2;--border-light: #eef1f8;--border-strong: #d4dae6;--text: #1a202c;--text-secondary: #4a5568;--text-tertiary: #718096;--text-muted: #a0aec0;--success: #10b981;--success-soft: #d1fae5;--danger: #ef4444;--danger-soft: #fee2e2;--warning: #f59e0b;--warning-soft: #fef3c7;--info: #3b82f6;--info-soft: #dbeafe;--online: #10b981;--offline: #6b7280;--idle: #f59e0b;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px 0 rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px 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);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-focus: 0 0 0 3px rgba(94, 124, 226, .1);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-full: 999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--duration-fast: .15s;--duration-base: .22s;--duration-slow: .35s}@media (prefers-color-scheme: dark){:root{--bg: #0f1419;--bg-elevated: #1a1f2e;--surface: #1f2937;--surface-hover: #2d3748;--surface-active: #374151;--border: #374151;--border-light: #4b5563;--border-strong: #2d3748;--text: #f9fafb;--text-secondary: #e5e7eb;--text-tertiary: #9ca3af;--text-muted: #6b7280;--success-soft: rgba(16, 185, 129, .12);--danger-soft: rgba(239, 68, 68, .12);--warning-soft: rgba(245, 158, 11, .12);--info-soft: rgba(59, 130, 246, .12);--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .25);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-focus: 0 0 0 3px rgba(94, 124, 226, .2)}}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--duration-base) var(--ease-in-out)}h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.3}h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}h4{font-size:16px}p{color:var(--text-secondary);line-height:1.6}button{cursor:pointer;border:none;border-radius:var(--radius-md);padding:10px 16px;font-size:14px;font-weight:500;font-family:inherit;transition:all var(--duration-fast) var(--ease-in-out);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:40px;white-space:nowrap;-webkit-user-select:none;user-select:none}button:active:not(:disabled){transform:scale(.98)}button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}button.primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-sm);border:1px solid transparent}button.primary:hover:not(:disabled){box-shadow:var(--shadow-md);transform:translateY(-1px)}button.secondary{background:var(--surface);color:var(--text);border:1.5px solid var(--border)}button.secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}button.ghost{background:transparent;color:var(--text-secondary);min-height:36px;padding:6px 12px}button.ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}button.danger{background:var(--danger);color:#fff;box-shadow:var(--shadow-sm)}button.danger:hover:not(:disabled){opacity:.9;box-shadow:var(--shadow-md)}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{width:100%;min-height:40px;padding:10px 12px;margin:var(--space-2) 0;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;transition:all var(--duration-fast) var(--ease-in-out)}input::placeholder{color:var(--text-muted)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus)}.container{max-width:1400px;margin:0 auto;padding:var(--space-6)}.card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6);box-shadow:var(--shadow-sm);transition:all var(--duration-base) var(--ease-in-out)}.card:hover{box-shadow:var(--shadow-md)}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;text-transform:capitalize}.badge.online{background:var(--success-soft);color:var(--success)}.badge.offline{background:#f3f4f6;color:var(--offline)}.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.badge.offline .badge-dot{animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.loading{text-align:center;padding:var(--space-12) var(--space-6);color:var(--text-secondary);font-size:14px}.error{background:var(--danger-soft);color:var(--danger);padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-size:14px;display:flex;align-items:center;gap:var(--space-3);border-left:4px solid var(--danger);animation:slideIn var(--duration-base) var(--ease-out)}.success{background:var(--success-soft);color:var(--success);padding:var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-size:14px;border-left:4px solid var(--success)}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}::selection{background:#5e7ce233;color:var(--text)}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}