@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";body{margin:0;font-family:-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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.brightness-container{position:relative;width:250px;height:125px;margin:20px auto 35px}.brightness-dial{position:absolute;top:2px;left:0;width:100%;height:100%;border-radius:125px 125px 0 0;background:conic-gradient(from 180deg at 50% 100%,#8b4513,#d2691e,#ff8c00,orange,gold,#ffff80,#fff);cursor:pointer}.brightness-background{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 10px);background:var(--card-background);border-radius:115px 115px 0 0}.brightness-indicator{position:absolute;top:100%;left:50%;width:125px;height:1px;transform-origin:left center}.brightness-handle{position:absolute;top:-10px;right:-10px;width:20px;height:20px;background:#fff;border:5px solid #f5a623;border-radius:50%}.brightness-readout{position:absolute;bottom:15px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.brightness-value{font-size:1.5rem;font-weight:700;line-height:1}.brightness-label{font-size:.9rem;color:var(--subtle-text-color)}.current-brightness-text{font-size:.8rem;color:var(--subtle-text-color);margin-top:5px}.brightness-labels{position:absolute;width:100%;bottom:-5px;left:0;display:flex;justify-content:space-between;padding:0 15px;box-sizing:border-box;font-size:.8rem;color:var(--subtle-text-color);pointer-events:none}.current-temp-display .current-temp-label{font-size:1rem;color:var(--text-color);margin-bottom:15px;font-family:Poppins,sans-serif;font-weight:400;margin-top:0;display:block!important;width:100%}.device-header{display:flex;align-items:center;margin-bottom:1.5rem;position:relative}.device-header span:first-of-type{font-weight:600;margin-left:1rem;flex-grow:1}.color-temp-container{text-align:center;margin-top:15px;padding:0 1.5rem}.color-temp-container p{font-size:1rem;color:var(--text-color);margin-bottom:15px;font-family:Poppins,sans-serif;font-weight:400;margin-top:0}.color-palette{display:flex;justify-content:center;gap:1rem;margin-top:0}.color-dot{width:26px;height:26px;border-radius:50%;cursor:pointer;border:4px solid transparent;transition:border-color .3s ease}.color-dot.warm{background-color:#ff8c42;border:2px solid transparent}.color-dot.warm-white{background-color:#fff2cc;border:2px solid #eee}.color-dot.cool-white{background-color:#cce7ff;border:2px solid transparent}.color-dot.cool{background-color:#42a5f5;border:2px solid transparent}.color-dot.selected{border-color:var(--primary-color)!important}.color-dot:hover{transform:scale(1.1)}.lock-status{padding:.3rem .8rem;border-radius:20px;font-size:.9rem;font-weight:500;position:absolute;right:0;top:50%;transform:translateY(-50%)}.lock-status.locked{color:var(--safe-color);background-color:var(--safe-color-bg)}.lock-status.unlocked{color:var(--danger-color);background-color:var(--danger-color-bg)}.lock-display{display:flex;justify-content:center;align-items:center;flex-grow:1;margin:5px 0 30px;min-height:120px}.lock-display svg{font-size:3.5rem;padding:2.8rem;border-radius:50%;transition:all .3s ease;width:auto;height:auto;display:block;overflow:visible;box-sizing:content-box}.lock-display.locked svg{color:#fff;background-color:var(--safe-color)}.lock-display.unlocked svg{color:#fff;background-color:var(--danger-color)}.unlock-btn,.lock-btn{width:100%;border:none;padding:1rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.unlock-btn{background-color:var(--safe-color);color:#fff}.unlock-btn:hover{background-color:#48c9b0}.lock-btn{background-color:var(--danger-color);color:#fff}.lock-btn:hover{background-color:#e65252}.thermostat-container{position:relative;width:250px;height:125px;margin:20px auto 35px}.thermostat-dial{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:125px 125px 0 0;background:conic-gradient(from 180deg at 50% 100%,#2196f3,#03a9f4,#ffeb3b,#ff9800,#f44336);cursor:pointer}.thermostat-background{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 10px);background:var(--card-background);border-radius:115px 115px 0 0}.thermostat-indicator{position:absolute;top:100%;left:50%;width:125px;height:1px;transform-origin:left center}.thermostat-handle{position:absolute;top:-10px;right:-10px;width:20px;height:20px;background:#fff;border:5px solid var(--primary-color);border-radius:50%;box-shadow:0 2px 8px #00000026}.thermostat-readout{position:absolute;bottom:15px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.temperature-value{font-size:1.5rem;font-weight:700;line-height:1}.temperature-label{font-size:.9rem;color:var(--subtle-text-color)}.temp-labels{position:absolute;width:100%;bottom:-5px;left:0;display:flex;justify-content:space-between;padding:0 15px;box-sizing:border-box;font-size:.8rem;color:var(--subtle-text-color);pointer-events:none}.current-temp-display{text-align:center;margin-top:15px;padding:0 1.5rem}.current-temp-display .current-temp-label{font-size:1rem;color:var(--text-color);margin-bottom:8px;display:block!important;width:100%;font-family:Poppins,sans-serif;font-weight:400}.current-temp-display .current-temp-value{font-size:1.8rem;font-weight:700;color:var(--text-color);line-height:1;display:block!important;width:100%}.login-container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;padding:1rem}.login-card{background:#fff;border-radius:16px;padding:2.5rem;box-shadow:0 20px 40px #0000001a;width:100%;max-width:400px}.login-header{text-align:center;margin-bottom:2rem}.login-logo{font-size:3rem;color:var(--primary-color);margin-bottom:1rem}.login-header h1{font-size:2rem;font-weight:700;margin:0;color:var(--text-color)}.login-header p{color:var(--subtle-text-color);margin:.5rem 0 0;font-size:1rem}.login-form{margin-bottom:1.5rem}.input-group{position:relative;margin-bottom:1.5rem}.input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--subtle-text-color);font-size:1.2rem}.input-group input{width:100%;padding:1rem 1rem 1rem 3rem;border:2px solid var(--border-color);border-radius:8px;font-size:1rem;transition:border-color .3s ease;box-sizing:border-box}.input-group input:focus{outline:none;border-color:var(--primary-color)}.error-message{background-color:var(--danger-color-bg);color:var(--danger-color);padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem;text-align:center}.login-btn{width:100%;background-color:var(--primary-color);color:#fff;border:none;padding:1rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease}.login-btn:hover{background-color:#357abd}.demo-section{text-align:center;padding-top:1.5rem;border-top:1px solid var(--border-color)}.demo-section p{margin:0 0 1rem;color:var(--subtle-text-color);font-size:.9rem}.demo-btn{background-color:var(--safe-color);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .3s ease;margin-bottom:.5rem}.demo-btn:hover{background-color:#48c9b0}.demo-section small{display:block;color:var(--subtle-text-color);font-size:.8rem;margin-top:.5rem}@media (max-width: 480px){.login-card{padding:2rem 1.5rem}.login-header h1{font-size:1.75rem}.login-logo{font-size:2.5rem}}:root{--primary-color: #2196F3;--secondary-color: #50e3c2;--background-color: #f7f9fc;--card-background: #ffffff;--text-color: #333333;--subtle-text-color: #888888;--border-color: #e0e0e0;--shadow-color: rgba(0, 0, 0, .05);--safe-color: #50e3c2;--danger-color: #ff6b6b;--safe-color-bg: #eefcf9;--danger-color-bg: #fff0f0}body{font-family:Poppins,sans-serif;background-color:var(--background-color);color:var(--text-color);margin:0}.container{max-width:100%;margin:0 auto;padding:0}header{position:fixed;top:0;left:0;right:0;z-index:1000;background-color:#fff;box-shadow:0 2px 8px #0000000f;padding:1rem 2rem;margin-bottom:0;display:flex;justify-content:space-between;align-items:center}main{margin-top:80px;padding:2rem}.logo{display:flex;align-items:center}.logo svg{font-size:2.5rem;color:var(--primary-color)}.logo-text{margin-left:1rem}.logo-text h1{font-size:1.5rem;font-weight:700;margin:0}.logo-text p{font-size:.9rem;color:var(--subtle-text-color);margin:0}.header-icons{display:flex;align-items:center;gap:1.5rem;font-size:1.5rem;color:var(--subtle-text-color)}.header-icons>svg{display:flex;align-items:center;justify-content:center}.user-profile{width:40px;height:40px;background-color:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s ease;flex-shrink:0}.user-profile:hover{background-color:#357abd}.profile-icon{color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.dashboard-header h2{font-size:2rem;font-weight:700;margin:0}.dashboard-header p{color:var(--subtle-text-color);margin-top:.1rem}.add-device-btn{background-color:var(--primary-color);color:#fff;border:none;padding:.8rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:background-color .3s ease}.add-device-btn:hover{background-color:#357abd}.status-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem;width:100%}.status-cards .card-icon.security-unlocked{color:var(--danger-color);background-color:var(--danger-color-bg)}.card{background-color:var(--card-background);border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 4px 12px var(--shadow-color)}.card-icon{font-size:2rem;padding:1rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.card-icon.lights{color:#f5a623;background-color:#fef6e8}.card-icon.climate{color:#2196f3;background-color:#eefcf9}.card-icon.security{color:var(--safe-color);background-color:var(--safe-color-bg)}.card-content h3{font-size:1rem;margin:0;color:var(--subtle-text-color)}.card-content p{font-size:1.2rem;font-weight:600;margin:.2rem 0 0}.room-filters{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.filter-btn{flex:1;min-width:120px;background-color:var(--card-background);border:1px solid var(--border-color);padding:.8rem 1rem;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.filter-btn.active,.filter-btn:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.devices h2{font-size:1.5rem;margin-bottom:1rem}.device-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;width:100%}.device-card{background-color:var(--card-background);border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px var(--shadow-color);display:flex;flex-direction:column}.device-header{display:flex;align-items:center;margin-bottom:1.5rem}.device-icon{font-size:1.5rem;margin-right:1rem;color:var(--primary-color)}.device-header span{font-weight:600;flex-grow:1}.toggle-switch{position:relative;display:inline-block;width:50px;height:28px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch label{position:absolute;cursor:pointer;inset:0;background-color:#ccc;border-radius:34px;transition:.4s}.toggle-switch label:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;border-radius:50%;transition:.4s}input:checked+label{background-color:var(--primary-color)}input:checked+label:before{transform:translate(22px)}.device-body{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}.color-temp-container{text-align:center}.color-palette{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.color-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .3s ease}.color-dot.warm{background-color:#ffca8a}.color-dot.warm-white{background-color:#fff4e6}.color-dot.white{background-color:#fff;border:2px solid #eee}.color-dot.cool-white{background-color:#e6f7ff}.color-dot.cool{background-color:#d1eaff}.color-dot.selected{border-color:var(--primary-color)}.device-footer{margin-top:1.5rem;display:flex;justify-content:center;align-items:center;color:var(--subtle-text-color);font-size:.9rem}@media (max-width: 768px){header{padding:1rem}main{margin-top:70px;padding:1rem}.status-cards,.device-cards{grid-template-columns:1fr}.room-filters{flex-direction:column}.filter-btn{flex:none}.dashboard-header{flex-direction:column;align-items:flex-start;gap:1rem}}@media (max-width: 480px){.header-icons{gap:1rem}.logo-text h1{font-size:1.3rem}.dashboard-header h2{font-size:1.5rem}main{margin-top:65px}}.user-menu{position:relative}.user-dropdown{position:absolute;top:50px;right:0;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:1rem;min-width:200px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease}.user-menu:hover .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.user-info{padding:.5rem 0;border-bottom:1px solid var(--border-color);margin-bottom:.5rem}.user-info span{font-size:.9rem;color:var(--text-color);font-weight:500}.logout-btn{width:100%;background:none;border:none;padding:.75rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;border-radius:6px;transition:background-color .3s ease;color:var(--danger-color);font-size:.9rem}.logout-btn:hover{background-color:var(--danger-color-bg)}.card-icon.security-unlocked{color:var(--danger-color);background-color:var(--danger-color-bg)}@media (max-width: 768px){main{margin-top:70px;padding:2.5rem 1rem 1rem}}@media (max-width: 480px){main{margin-top:65px;padding-top:2.7rem}}@media (max-width: 768px){.dashboard-header{flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:1rem}}