/* HeatPilot HP-011 Premium Device Control Surface */

.hp010-dialog{
  width:min(820px,calc(100vw - 24px));
  border:1px solid rgba(88,214,208,.28);
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0%,rgba(88,214,208,.11),transparent 34%),
    radial-gradient(circle at 100% 15%,rgba(92,208,154,.06),transparent 30%),
    linear-gradient(160deg,#121c25 0%,#091017 58%,#060a0e 100%);
  box-shadow:
    0 45px 130px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.hp010-dialog::before{
  width:0;
}

.hp010-header{
  padding:21px 24px 18px;
  background:rgba(7,12,17,.82);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.hp010-type{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:25px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(88,214,208,.25);
  background:rgba(88,214,208,.06);
}

.hp010-title{
  margin-top:8px;
  font-size:1.42rem;
  font-weight:850;
}

.hp010-close{
  border-radius:12px;
  background:rgba(255,255,255,.035);
}

.hp010-body{
  padding:20px 24px 25px;
}

.hp011-hero{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:20px;
  margin-bottom:18px;
}

.hp011-dial{
  position:relative;
  width:220px;
  height:220px;
  margin:auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle,#0d171f 51%,transparent 52%),
    conic-gradient(
      from 210deg,
      rgba(88,214,208,.95) 0deg,
      rgba(92,208,154,.9) 185deg,
      rgba(255,255,255,.08) 185deg,
      rgba(255,255,255,.08) 300deg,
      transparent 300deg
    );
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.045);
}

.hp011-dial::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.045);
}

.hp011-dial-value{
  position:relative;
  text-align:center;
}

.hp011-dial-value strong{
  display:block;
  font-size:3.25rem;
  letter-spacing:-.06em;
  line-height:.9;
}

.hp011-dial-value strong small{
  font-size:1.15rem;
  color:var(--muted);
  letter-spacing:0;
}

.hp011-dial-value span{
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.12em;
}

.hp011-summary{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

.hp011-status-pill{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:7px 11px;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.06em;
  border:1px solid var(--line);
}

.hp011-status-pill.on{
  color:var(--green);
  border-color:rgba(92,208,154,.35);
  background:rgba(92,208,154,.07);
}

.hp011-status-pill.off{
  color:#9daab4;
  background:rgba(255,255,255,.025);
}

.hp011-large-reading{
  display:flex;
  align-items:baseline;
  gap:9px;
}

.hp011-large-reading strong{
  font-size:2.15rem;
}

.hp011-large-reading span{
  color:var(--muted);
  font-size:.7rem;
}

.hp011-control-card{
  margin-top:13px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.025);
}

.hp011-control-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
}

.hp011-control-title strong{
  color:var(--text);
  font-size:.9rem;
  letter-spacing:0;
}

.hp011-temp-control{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  gap:12px;
  align-items:center;
}

.hp011-round-button{
  width:52px;
  height:52px;
  border:1px solid rgba(88,214,208,.3);
  border-radius:50%;
  background:rgba(88,214,208,.06);
  color:white;
  font-size:1.55rem;
  cursor:pointer;
  transition:.15s ease;
}

.hp011-round-button:hover{
  background:rgba(88,214,208,.14);
  transform:translateY(-1px);
}

.hp011-range{
  width:100%;
  accent-color:var(--cyan);
  cursor:pointer;
}

.hp011-segments{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.hp011-segment{
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  color:#aeb9c2;
  font-size:.68rem;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}

.hp011-segment:hover{
  border-color:rgba(88,214,208,.35);
}

.hp011-segment.active{
  border-color:rgba(88,214,208,.55);
  background:rgba(88,214,208,.12);
  color:var(--cyan);
  box-shadow:0 0 22px rgba(88,214,208,.07);
}

.hp011-power{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:17px;
  padding:14px 16px;
  background:rgba(255,255,255,.025);
}

.hp011-power-copy strong,
.hp011-power-copy span{
  display:block;
}

.hp011-power-copy span{
  margin-top:4px;
  color:var(--muted);
  font-size:.65rem;
}

.hp011-switch{
  position:relative;
  width:66px;
  height:36px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#26313b;
  cursor:pointer;
  transition:.2s ease;
}

.hp011-switch::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  left:4px;
  top:4px;
  border-radius:50%;
  background:white;
  transition:.2s ease;
  box-shadow:0 3px 9px rgba(0,0,0,.4);
}

.hp011-switch.active{
  background:var(--green);
}

.hp011-switch.active::after{
  transform:translateX(30px);
}

.hp011-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-top:13px;
}

.hp011-metric{
  min-height:85px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:13px;
  background:rgba(255,255,255,.022);
}

.hp011-metric span{
  color:var(--muted);
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.09em;
}

.hp011-metric strong{
  display:block;
  margin-top:12px;
  font-size:1.3rem;
}

.hp011-battery{
  height:8px;
  margin-top:9px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.hp011-battery i{
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--green);
}

.hp011-battery.low i{
  background:var(--red);
}

.hp011-command{
  margin-top:16px;
  border-radius:16px;
  padding:12px 14px;
  border:1px solid rgba(242,189,99,.28);
  background:rgba(242,189,99,.055);
}

.hp011-command strong{
  color:var(--amber);
  font-size:.68rem;
  letter-spacing:.08em;
}

.hp011-command span{
  display:block;
  margin-top:5px;
  color:#c1b59e;
  font-size:.67rem;
  line-height:1.45;
}

.hp011-hidden-debug{
  margin-top:16px;
}

.hp011-hidden-debug summary{
  cursor:pointer;
  color:var(--muted);
  font-size:.64rem;
}

.hp011-hidden-debug .hp010-raw{
  margin-top:8px;
}

@media(max-width:700px){
  .hp011-hero{
    grid-template-columns:1fr;
  }

  .hp011-dial{
    width:190px;
    height:190px;
  }

  .hp011-dial-value strong{
    font-size:2.8rem;
  }

  .hp011-metrics{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:450px){
  .hp011-metrics{
    grid-template-columns:1fr;
  }

  .hp011-temp-control{
    grid-template-columns:46px 1fr 46px;
  }

  .hp011-round-button{
    width:46px;
    height:46px;
  }
}