#ACRemoteThermostatModal {
       --primary-color: #00A1FF;
       --primary-dark: #0077CC;
       --secondary-color: #FF4081;
       --background-dark: #0D0D0D;
       --surface-dark: #1A1A1A;
       --surface-light: #262626;
       --text-primary: #FFFFFF;
       --text-secondary: rgba(255, 255, 255, 0.7);
       --success-color: #4CAF50;
       --success-dark: #3D8B40;
       --warning-color: #FF9800;
       --error-color: #F44336;
       --error-dark: #C3352B;
       --glass-gradient-start: rgba(0, 229, 255, 0.2);
       --glass-gradient-end: rgba(0, 119, 204, 0.2);
       --glass-error-start: rgba(244, 67, 54, 0.2);
       --glass-error-end: rgba(195, 53, 43, 0.2);
       --glow-color: rgba(0, 229, 255, 0.4);
       --success-glow: rgba(76, 175, 80, 0.4);
       --error-glow: rgba(244, 67, 54, 0.4);
       --metallic-gradient-start: #D3D3D3;
       --metallic-gradient-end: #4A4A4A;

   }

   .ACRemoteThermostat {
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
       position: relative;
       background: radial-gradient(circle at 50% 20%, rgba(30, 30, 30, 0.9) 0%, rgba(13, 13, 13, 1) 70%);
       box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
       overflow-y: auto;
       padding: 10px 0;
       border-radius: 50px;
   }

   .ACRemoteMode-selector {
       display: flex;
       flex-direction: row;
       justify-content: center;
       gap: 40px;
       margin-bottom: 20px;
   }

   .ACRemoteMode-btn {
       position: relative;
       width: 50px;
       height: 50px;
       border: none;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(8px);
       cursor: pointer;
       transition: all 0.3s ease;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .ACRemoteMode-btn:hover {
       transform: scale(1.1);
       background: rgba(255, 255, 255, 0.2);
   }

   .ACRemoteMode-btn.active {
       background: rgb(0, 0, 0);
       box-shadow: 0 0 5px 5px rgba(8, 29, 153, 0.6);
       background: rgba(1, 5, 241, 0.2);
   }

   .ACRemoteMode-icon {
       width: 30px;
       height: 30px;
       mask-size: cover;
       -webkit-mask-size: cover;
       background-color: white;
   }

   .ACRemoteCool-icon {
       mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/snowflake.png');
       -webkit-mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/snowflake.png');
   }

   .ACRemoteHeat-icon {
       mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/fire-element.png');
       -webkit-mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/fire-element.png');
   }

   .ACRemoteFan-icon {
       mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/fan.png');
       -webkit-mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/fan.png');
   }

   .ACRemoteSwing-icon {
       mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/air-conditioner.png');
       -webkit-mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/air-conditioner.png');
   }

   .ACRemoteAuto-icon {
       -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2L4,5V6.09C6.84,6.57 9,9.03 9,12C9,15.03 6.84,17.5 4,17.91V20L12,17L20,20V17.91C17.16,17.43 15,14.97 15,12C15,9.03 17.16,6.57 20,6.09V5L12,2M11,12C11,12.56 11.24,13.07 11.59,13.42L14.09,15.92L15.5,14.5L13,12L15.5,9.5L14.09,8.09L11.59,10.59C11.24,10.93 11,11.44 11,12Z'/%3E%3C/svg%3E");
       mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2L4,5V6.09C6.84,6.57 9,9.03 9,12C9,15.03 6.84,17.5 4,17.91V20L12,17L20,20V17.91C17.16,17.43 15,14.97 15,12C15,9.03 17.16,6.57 20,6.09V5L12,2M11,12C11,12.56 11.24,13.07 11.59,13.42L14.09,15.92L15.5,14.5L13,12L15.5,9.5L14.09,8.09L11.59,10.59C11.24,10.93 11,11.44 11,12Z'/%3E%3C/svg%3E");
   }

   /* Sleep icon style */
   .ACRemoteSleep-icon {
       mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/sleeping-in-bed.png');
       -webkit-mask-image: url('https://img.icons8.com/ios-filled/50/ffffff/sleeping-in-bed.png');
   }


   .ACRemoteMode-btn::after {
       /* content: attr(data-tooltip); */
       position: absolute;
       bottom: -35px;
       background: rgba(0, 0, 0, 0.7);
       color: white;
       font-size: 14px;
       padding: 5px 10px;
       border-radius: 8px;
       opacity: 0;
       transform: translateY(10px);
       transition: opacity 0.3s, transform 0.3s;
       white-space: nowrap;
       pointer-events: none;
   }

   .ACRemoteMode-btn:hover::after {
       opacity: 1;
       transform: translateY(0);
   }

   .ACRemoteTemperature-container {
       margin-top: 20px;
       position: relative;
       width: 200px;
       height: 200px;
   }

   .ACRemoteTemperature-circle {
       width: 100%;
       height: 100%;
       background: linear-gradient(145deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 1)),
           radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
           var(--temp-gradient, linear-gradient(90deg, #00A1FF, #FF4081));
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       box-shadow:
           inset 0 5px 20px rgba(0, 0, 0, 0.5);
       transition: all 0.3s ease;
       /* border: 2px solid rgba(0, 161, 255, 0.2); */
       background-blend-mode: overlay;
       animation: shimmer 6s infinite ease-in-out;
   }

   .ACRemoteTemperature-circle::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       background: radial-gradient(circle, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%);
       background-size: 200% 200%;
       opacity: 0.5;
       border-radius: 50%;
   }

   .ACRemoteTemperature-circle-border {
       position: absolute;
       top: -8px;
       left: -8px;
       width: calc(100% + 16px);
       height: calc(100% + 16px);
       border-radius: 50%;
       background: conic-gradient(var(--primary-color) 0deg, var(--primary-color) var(--arc-angle), transparent var(--arc-angle), transparent 360deg);
       -webkit-mask: radial-gradient(circle, transparent 88px, black 89px);
       mask: radial-gradient(circle, transparent 88px, black 89px);
       transition: background 0.5s ease;
   }

   .ACRemoteTemperature-circle-glow {
       position: absolute;
       top: -12px;
       left: -12px;
       width: calc(100% + 24px);
       height: calc(100% + 24px);
       border-radius: 50%;
       box-shadow: 0 0 15px rgba(0, 161, 255, 0.3), 0 0 30px rgba(0, 161, 255, 0.1);
       opacity: 0;
       animation: glowPulse 3s infinite ease-in-out;
       transition: opacity 0.3s ease;
   }

   .ACRemoteThermostat:not(.off) .ACRemoteTemperature-circle-glow {
       opacity: 1;
   }

   .ACRemoteTemperature-display {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .ACRemoteTemperature {
       font-size: 48px;
       font-weight: 300;
       color: var(--text-primary);
       position: relative;
       line-height: 1;
   }

   .ACRemoteTemperature-unit {
       font-size: 18px;
       font-weight: 300;
       color: var(--text-secondary);
       position: absolute;
       top: 8px;
       right: -20px;
   }

   .ACRemoteTemperature-label {
       font-size: 12px;
       font-weight: 400;
       color: var(--text-secondary);
       margin-top: 5px;
       text-transform: uppercase;
       letter-spacing: 1px;
   }


   .ACRemoteTemp-controls {
       position: relative;
       top: 25px;
       display: flex;
       background-color: black;
       border-radius: 24px;
       width: 60px;
       flex-direction: column;
       gap: 10px;
       justify-content: center;
       align-items: center;
       /* margin-top: 15px; */
       padding: 5px;
       right: 90px;
   }

   .ACRemoteTemp-controls p {
       color: white;
       margin: 0px;
       padding: 0px;
   }

   .ACRemoteTemp-controls-Fan {
       position: absolute;
       top: 254px;
       display: flex;
       background-color: black;
       border-radius: 24px;
       width: 60px;
       flex-direction: column;
       gap: 10px;
       justify-content: center;
       align-items: center;
       /* margin-top: 15px; */
       padding: 5px;
       left: 240px;
   }

   .ACRemoteTemp-controls-Fan p {
       color: white;
       margin: 0px;
       padding: 0px;
   }

   .ACRemoteControl-btn {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       transition: all 0.3s ease;
       backdrop-filter: blur(5px);
       -webkit-backdrop-filter: blur(5px);
       box-shadow:
           0 3px 10px rgba(0, 0, 0, 0.2),
           inset 0 1px 2px rgba(255, 255, 255, 0.3),
           inset 0 -1px 2px rgba(0, 0, 0, 0.2);
       border: 1px solid var(--glow-color);
       color: var(--text-primary);
       font-size: 20px;
       font-weight: 500;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   }

   .ACRemoteControl-btn:hover {
       transform: scale(1.05);
       box-shadow:
           0 5px 15px rgba(0, 0, 0, 0.3),
           0 0 8px var(--glow-color),
           inset 0 1px 2px rgba(255, 255, 255, 0.3),
           inset 0 -1px 2px rgba(0, 0, 0, 0.2);
   }

   .ACRemoteControl-btn:active {
       transform: scale(0.98);
   }

   .ACRemoteIncrease-btn {
       background: linear-gradient(145deg, var(--glass-gradient-start), var(--glass-gradient-end));
       border: 1px solid var(--glow-color);
   }

   .ACRemoteIncrease-btn:hover {
       box-shadow: 0px -1px 16px 10px rgb(109 139 227 / 30%),
           0 0 8px var(--glow-color),
           inset 0 1px 2px rgba(255, 255, 255, 0.3),
           inset 0 -1px 2px rgba(0, 0, 0, 0.2);

   }

   .ACRemoteDecrease-btn {
       background: linear-gradient(145deg, var(--glass-error-start), var(--glass-error-end));
       border: 1px solid var(--error-glow);
   }

   .ACRemoteDecrease-btn:hover {
       box-shadow: 0px -1px 16px 10px rgb(249 53 53 / 30%),
           0 0 8px var(--glow-color),
           inset 0 1px 2px rgba(255, 255, 255, 0.3),
           inset 0 -1px 2px rgba(0, 0, 0, 0.2);
   }

   .ACRemotePower-btn {
       position: relative;
       top: -110px;
       width: 60px;
       height: 60px;
       background: linear-gradient(145deg, var(--metallic-gradient-start), var(--metallic-gradient-end));
       backdrop-filter: blur(5px);
       -webkit-backdrop-filter: blur(5px);
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       transition: all 0.3s ease;
       box-shadow:
           0 6px 20px rgba(0, 0, 0, 0.4),
           inset 0 3px 3px rgba(255, 255, 255, 0.05),
           inset 0 -3px 3px rgba(0, 0, 0, 0.2);
       border: 1px solid var(--glow-color);
       /* margin-top: 15px; */
   }

   .ACRemotePower-btn.on {
       background: linear-gradient(145deg, var(--success-color), var(--success-dark));
       border: 1px solid var(--success-glow);
       animation: powerGlow 2s infinite ease-in-out;
   }

   .ACRemotePower-btn.off {
       background: linear-gradient(145deg, var(--metallic-gradient-start), var(--metallic-gradient-end));
       border: 1px solid var(--glow-color);
   }

   .ACRemotePower-btn:hover {
       transform: scale(1.05);
       box-shadow:
           0 8px 25px rgba(0, 0, 0, 0.5),
           0 0 8px var(--glow-color),
           inset 0 3px 3px rgba(255, 255, 255, 0.05),
           inset 0 -3px 3px rgba(0, 0, 0, 0.2);
   }

   .ACRemotePower-btn.on:hover {
       box-shadow:
           0 8px 25px rgba(0, 0, 0, 0.5),
           0 0 8px var(--success-glow),
           inset 0 3px 3px rgba(255, 255, 255, 0.05),
           inset 0 -3px 3px rgba(0, 0, 0, 0.2);
   }


   .ACRemotePower-icon {
       width: 32px;
       height: 32px;
       background: var(--primary-color);
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13,3H11V13H13M17.83,5.17L16.41,6.59C17.99,7.86 19,9.81 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12C5,9.81 6.01,7.86 7.58,6.58L6.17,5.17C4.23,6.82 3,9.26 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12C21,9.26 19.77,6.82 17.83,5.17Z'/%3E%3C/svg%3E") no-repeat center;
       mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13,3H11V13H13M17.83,5.17L16.41,6.59C17.99,7.86 19,9.81 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12C5,9.81 6.01,7.86 7.58,6.58L6.17,5.17C4.23,6.82 3,9.26 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12C21,9.26 19.77,6.82 17.83,5.17Z'/%3E%3C/svg%3E") no-repeat center;
       transition: all 0.3s ease;
   }

   .ACRemoteGlow-effect {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       background: radial-gradient(circle at 50% 20%, rgba(0, 161, 255, 0.1) 0%, transparent 70%);
       pointer-events: none;
       z-index: -1;
   }

   @keyframes glowPulse {
       0% {
           box-shadow: 0 0 15px rgba(0, 161, 255, 0.3), 0 0 30px rgba(0, 161, 255, 0.1);
       }

       50% {
           box-shadow: 0 0 25px rgba(0, 161, 255, 0.5), 0 0 50px rgba(0, 161, 255, 0.2);
       }

       100% {
           box-shadow: 0 0 15px rgba(0, 161, 255, 0.3), 0 0 30px rgba(0, 161, 255, 0.1);
       }
   }

   @keyframes powerGlow {
       0% {
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 8px var(--success-glow), inset 0 3px 3px rgba(255, 255, 255, 0.05), inset 0 -3px 3px rgba(0, 0, 0, 0.2);
       }

       50% {
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px var(--success-glow), inset 0 3px 3px rgba(255, 255, 255, 0.05), inset 0 -3px 3px rgba(0, 0, 0, 0.2);
       }

       100% {
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 8px var(--success-glow), inset 0 3px 3px rgba(255, 255, 255, 0.05), inset 0 -3px 3px rgba(0, 0, 0, 0.2);
       }
   }

   @keyframes shimmer {
       0% {
           background-position: 0% 50%;
       }

       50% {
           background-position: 100% 50%;
       }

       100% {
           background-position: 0% 50%;
       }
   }

   @keyframes pulse {
       0% {
           opacity: 0.6;
       }

       50% {
           opacity: 1;
       }

       100% {
           opacity: 0.6;
       }
   }

   .ACRemotemodal-close {
       /* position: absolute; */
       /* bottom: 25px; */
       /* right: 20px; */
       background: var(--primary-color);
       color: white;
       border: none;
       border-radius: 50%;
       width: 30px;
       height: 30px;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       font-size: 16px;
       transition: var(--transition);
   }

   .ACRemotemodal-close:hover {
       background: #e91e63;
   }