*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(160deg,#e0b8f6,#a2a4ff);display:flex;font-family:Inter,sans-serif;justify-content:center;min-height:100vh;transition:all .4s ease}.container{background:#1d1e33;border-radius:30px;color:#fff;margin:20px;overflow:hidden;padding:40px 40px 60px;position:relative;width:1024px}header{align-items:center;display:flex;justify-content:space-between}.menu-icon{color:#fff;font-size:24px}.profile-pic img{border-radius:50%;box-shadow:0 0 12px rgba(255,110,140,.4);height:40px;object-fit:cover;width:40px}.greeting{margin:20px 0}.greeting h1{font-size:24px;font-weight:600}.greeting p{color:#ccc;font-size:14px}.weather-card{background:#2b2c4d;border-radius:20px;box-shadow:2px 2px 2px rgba(255,110,140,.6);color:#fff;margin-bottom:20px;padding:20px}.width-100-center{display:flex;justify-content:center;width:100%}.weather-main{align-items:center;display:flex;gap:10px}.weather-main img{width:40px}.temperature{font-size:48px;font-weight:700;margin:10px 0}.weather-info{color:#aaa;display:flex;flex-wrap:wrap;font-size:12px;gap:10px}.rooms-header{align-items:center;display:flex;justify-content:space-between;margin:10px 0}.add-room{background:#ff6e8c;border:none;border-radius:20px;color:#fff;cursor:pointer;font-weight:700;padding:6px 14px}.room-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}.room-card{background:#2c2c4a;border-radius:16px;color:#fff;justify-content:center;min-height:180px;padding:20px;text-align:center;transition:.3s;width:100%}.card-top,.room-card{align-items:center;display:flex;flex-direction:column;gap:12px}.card-top{height:fit-content}.card-top.itmes{align-items:center;display:flex;gap:8px}.card-top.itmes img{border-radius:8px;height:30px;object-fit:cover;width:30px}.card-top.itmes p{font-size:12px}.texts{align-items:center;display:flex;flex:1;flex-direction:column;gap:4px;justify-content:center}.room-card:hover{background:#3a3a5c;transform:translateY(-5px)}.room-card.selected{border:2px solid #ff6e8c}.room-card img{border-radius:50px;height:50px;margin-bottom:10px;object-fit:cover;width:50px}.room-name{font-size:14px;font-weight:600}.device-count{color:#bbb;font-size:12px}.add-btn{background:linear-gradient(90deg,#ff6e8c,#ff9472);border-radius:50%;bottom:20px;box-shadow:0 8px 15px rgba(255,110,140,.4);color:#fff;cursor:pointer;font-size:36px;height:60px;left:50%;line-height:60px;position:absolute;text-align:center;transform:translateX(-50%);width:60px}.devices-section{background:#1d1e33;border-radius:30px;margin-top:30px}.devices-header{align-items:center;display:flex;gap:12px;margin-bottom:20px}.devices-header h2{color:#fff;font-size:20px;font-weight:700}.back-btn{color:#fff;cursor:pointer;display:flex;font-size:20px;height:fit-content}.devices-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}.device-card{align-items:center;background:#2b2c4d;border-radius:18px;color:#fff;display:flex;flex-direction:column;padding:20px 20px 50px;position:relative;text-align:center}.lamp_off,.lamp_on{scale:1.3}.device-card .lamp_on{display:none}.device-card.active .lamp_on{display:flex}.device-card.active .lamp_off{display:none}.device-card img{margin-bottom:10px;width:36px}.device-title{font-size:14px;font-weight:700}.device-status{color:#aaa;font-size:12px;margin:4px 0}.device-card.active{box-shadow:0 2px 4px rgba(255,110,140,.3)}.device-card.active .device-status{color:#fff}.device-toggle{align-items:center;bottom:15px;display:flex;flex-direction:row-reverse;gap:12px;justify-content:center;position:absolute;right:15px}.device-toggle input{display:none}.device-toggle span{background:#3c3c5a;border-radius:10px;display:inline-block;height:20px;position:relative;transition:background .3s;width:40px}.device-toggle span:before{background:#3da8ff;border-radius:50%;content:"";height:16px;left:2px;position:absolute;top:2px;transition:all .3s ease;width:16px}.device-toggle input:checked+span{background:#ff6e8c}.device-toggle input:checked+span:before{background:#fff;transform:translateX(20px)}.greeting.hidden,.weather-card.hidden{display:none}.devices-section{display:none;opacity:0;transform:translateX(100%);transition:transform .5s ease,opacity .5s ease}.devices-section.active{display:block;opacity:1;transform:translateX(0)}.rooms.hidden .room-grid{display:flex;flex-wrap:wrap}.rooms.hidden .room-card{height:auto;min-height:auto;padding:10px;width:fit-content}.room-card.active{box-shadow:2px 3px 6px rgba(255,110,140,.3)}.rooms.hidden .room-card img{height:30px;margin-bottom:0;width:30px}.rooms.hidden .texts{align-items:flex-start;justify-content:flex-start}.rooms.hidden .texts .room-name{font-size:12px}.rooms.hidden .card-top{display:flex;flex-direction:row;height:fit-content}.sidebar-nav{background:#1d1e33;box-shadow:4px 0 10px rgba(0,0,0,.2);height:100%;left:0;overflow:hidden;position:absolute;top:0;transition:width .4s ease;width:0;z-index:1000}.sidebar-nav.active{width:350px}.sidebar-nav .sidebar-content{color:#fff;display:flex;flex-direction:column;height:100%;padding:30px 24px}.sidebar-nav .close-btn{align-self:flex-end;background:none;border:none;color:#ff6e8c;cursor:pointer;font-size:26px;transition:transform .2s}.sidebar-nav .close-btn:hover{transform:rotate(90deg)}.nav-links{display:flex;flex-direction:column;gap:18px;list-style:none;margin-top:40px}.nav-links li a{border-radius:10px;color:#fff;font-size:18px;padding:10px 16px;text-decoration:none;transition:background .3s}.nav-links li a:hover{background-color:rgba(255,110,140,.2)}.overlay{background-color:rgba(0,0,0,.45);height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;visibility:hidden;width:100vw;z-index:999}.overlay.active{opacity:1;visibility:visible}.room-weather{display:flex;flex-direction:row-reverse;gap:12px;justify-content:space-between;margin:0 auto;max-width:450px;overflow:hidden;padding:20px}.room-weather span{background-color:#000;bottom:0;left:0;opacity:.7;position:absolute;right:0;top:0;z-index:2}.font-size-20-bold{color:#fff;font-size:32px;font-weight:700;text-shadow:0 4px 8px rgba(255,110,140,.6)}.temerature-container span{background-color:#bdb4b4;bottom:0;left:0;opacity:.4;position:absolute;right:0;top:0;z-index:2}.temerature-container{align-items:center;border-radius:18px;box-shadow:0 2px 8px rgba(255,110,140,.4);display:flex;flex-direction:column;gap:8px;min-width:fit-content;overflow:hidden;padding:12px;width:fit-content}.location{font-weight:700}.padding-0{overflow:hidden;padding:0;position:relative}.z-index-10{margin:0;position:relative;z-index:10}.room-weather img{height:100%;left:0;object-fit:cover;position:absolute;right:0;top:0;width:100%;z-index:1}@media (max-width:620px){.sidebar-nav.active{width:100%}.font-size-20-bold{font-size:26px}.sidebar-nav .sidebar-content{padding:30px 24px;width:100%}.container{border-radius:0;margin:0;padding:20px 20px 60px}.devices-grid{grid-template-columns:repeat(2,1fr)}}