/* AURELIA · control-surface hardware styles — ported from the original villamockup3d.html
   (wall panel, rotary thermostat, glass dimmer, LoraTap curtain key, LCD thermostat, 3-gang rocker). */
:root { --hairline: var(--hair); --hairline-2: var(--hair-2); --led-blue:#4da3ff; --led-green:#32d583; --led-amber:#ffb547; }
.device{
  position:relative; border-radius:22px; padding:16px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--hairline);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
}
.device-label{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.device-label .name{ white-space:nowrap; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); font-weight:600; }
.device-label .sku{ font-size:9px; letter-spacing:.14em; color:var(--txt-faint); }


/* ── Wide dark-glass central control panel ── */
.wallpanel{
  position:relative; border-radius:14px; overflow:hidden;
  display:grid; grid-template-columns:44px 1fr;
  background:linear-gradient(160deg,#2b2f36 0%,#14171c 30%,#0b0d11 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.20),
    0 26px 50px -22px rgba(0,0,0,1);
  aspect-ratio:2.35/1; min-height:210px;
  container-type:inline-size;
}
.wallpanel::after{                       /* glass sheen */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(128deg, rgba(255,255,255,.09) 0%, transparent 30%, transparent 78%, rgba(255,255,255,.04) 100%);
}
.wp-rail{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 0;
  background:linear-gradient(180deg,#111419,#0a0c10);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}
.wp-rail button{
  width:32px; height:34px; border:0; border-radius:8px; cursor:pointer;
  display:grid; place-items:center; gap:2px; background:transparent;
  color:rgba(255,255,255,.34); font-size:6px; letter-spacing:.06em;
  transition:color .25s, background .25s;
}
.wp-rail button:hover{ color:rgba(255,255,255,.7); }
.wp-rail button.on{ color:#8fd0ff; background:rgba(84,168,255,.14); box-shadow:inset 0 0 0 1px rgba(84,168,255,.3); }
.wp-body{ display:flex; flex-direction:column; min-width:0; padding:7px 9px 8px; }
.wp-status{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:clamp(6px,1.05cqw,10px); color:rgba(255,255,255,.62); padding-bottom:6px;
}
.wp-status .t{ font-weight:600; color:#fff; letter-spacing:.02em; }
.wp-status .sep{ flex:1; }
.wp-tabs{ display:flex; gap:2px; padding-bottom:6px; overflow-x:auto; scrollbar-width:none; }
.wp-tabs::-webkit-scrollbar{ display:none; }
.wp-tab{
  border:0; cursor:pointer; white-space:nowrap; flex:none;
  padding:4px 10px; border-radius:7px; background:transparent;
  font-size:clamp(6px,1.02cqw,10px); font-weight:500; color:rgba(255,255,255,.42);
  transition:color .25s, background .25s;
}
.wp-tab:hover{ color:#fff; }
.wp-tab.on{ color:#fff; background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); }
.wp-grid{
  flex:1; display:grid; gap:5px; min-height:0;
  grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(2, 1fr);
}
.wp-card{
  position:relative; border:0; cursor:pointer; text-align:left; overflow:hidden;
  border-radius:9px; padding:6px 7px; color:#fff;
  background:linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075), inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .3s, box-shadow .3s, transform .12s var(--ease-soft);
  display:flex; flex-direction:column; justify-content:space-between; min-height:0;
}
.wp-card:active{ transform:scale(.975); }
.wp-card .cn{ font-size:clamp(6px,1.02cqw,10px); font-weight:600; letter-spacing:.01em; position:relative; z-index:2; }
.wp-card .cs{ font-size:clamp(5.5px,.92cqw,9px); font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.34); position:relative; z-index:2; }
.wp-card .ci{ position:absolute; right:6px; top:6px; z-index:2; color:rgba(255,255,255,.5); transition:color .3s; }
.wp-card .ci svg{ width:13px; height:13px; }
.wp-card .fill{                          /* vertical level fill, like the reference */
  position:absolute; left:0; right:0; bottom:0; z-index:1; height:var(--lvl,0%);
  background:linear-gradient(180deg, rgba(90,170,255,.55), rgba(60,130,230,.30));
  transition:height .45s var(--ease-soft), background .35s;
}
.wp-card.warm .fill{ background:linear-gradient(180deg, rgba(255,186,96,.60), rgba(230,140,50,.30)); }
.wp-card.on{ box-shadow:inset 0 0 0 1px rgba(120,190,255,.42), 0 0 20px -8px rgba(90,170,255,.9); }
.wp-card.on .cs{ color:#8fd0ff; }
.wp-card.on .ci{ color:#cfe8ff; }
.wp-card.warm.on{ box-shadow:inset 0 0 0 1px rgba(255,190,110,.45), 0 0 20px -8px rgba(255,170,80,.9); }
.wp-card.warm.on .cs, .wp-card.warm.on .ci{ color:#ffcf94; }
.wp-voice{
  margin-top:6px; display:flex; align-items:center; gap:8px;
  padding:4px 9px; border-radius:99px;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-size:clamp(5.5px,.95cqw,9.5px); color:rgba(255,255,255,.46);
}
.wp-wave{ margin-left:auto; display:flex; align-items:center; gap:2px; height:11px; }
.wp-wave i{ width:2px; border-radius:2px; background:linear-gradient(180deg,#7fc4ff,#3f7fd8); animation:wv 1.1s ease-in-out infinite; }
@keyframes wv{ 0%,100%{ height:3px } 50%{ height:11px } }

/* ── Round rotary thermostat (dark glass, glowing ring) ── */
.rotary{
  position:relative; width:min(190px,54vw); aspect-ratio:1; margin-inline:auto;
  border-radius:50%; cursor:ns-resize; touch-action:none;
  background:radial-gradient(circle at 42% 34%, #22262d 0%, #0e1116 58%, #070a0d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 34px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.07), 0 22px 40px -18px rgba(0,0,0,1);
  display:grid; place-items:center;
}
.rotary svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.rotary .track{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:3.2; }
.rotary .arc{
  fill:none; stroke:#5fd8ff; stroke-width:3.2; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(95,216,255,.9));
  transition:stroke-dasharray .4s var(--ease-soft), stroke .4s;
}
.rotary.heat .arc{ stroke:#ffab5c; filter:drop-shadow(0 0 5px rgba(255,171,92,.9)); }
.rotary .face{ position:relative; z-index:2; text-align:center; color:#fff; }
.rotary .rt{ font-size:clamp(26px,7.4vw,40px); font-weight:300; letter-spacing:-.02em; line-height:1; }
.rotary .rt sup{ font-size:.36em; font-weight:500; margin-left:2px; vertical-align:super; color:#9fd8ef; }
.rotary .rmode{ margin-top:5px; font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,.4); }
.rotary .rsun{ position:absolute; top:16%; left:50%; transform:translateX(-50%); z-index:2;
  width:17px; height:17px; color:#ffd08a; display:block; }
.rotary .rsun svg{ width:100%; height:100%; }
.rotary.heat .rsun{ color:#ff9d4d; }
.rotary .rfan{ position:absolute; bottom:16%; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:4px; font-size:8px; color:rgba(255,255,255,.42); }
.rotary .bars{ display:flex; align-items:flex-end; gap:1.5px; height:8px; }
.rotary .bars i{ width:2px; background:#5fd8ff; border-radius:1px; opacity:.4; }
.rotary .bars i.on{ opacity:1; }

/* ── White tempered-glass touch plate (chamfered edge) ── */
.gplate{
  position:relative; aspect-ratio:1; border-radius:6px; padding:11px;
  background:conic-gradient(from 45deg at 50% 50%,
    #f4f4f1 0deg 90deg, #dedeD9 90deg 180deg, #f0f0ed 180deg 270deg, #ffffff 270deg 360deg);
  box-shadow:0 20px 38px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.10);
}
.gplate .face{
  position:relative; height:100%; border-radius:3px;
  background:linear-gradient(158deg,#ffffff 0%,#fbfbfa 46%,#f1f1ef 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.045), inset 0 1px 0 rgba(255,255,255,1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12%;
}
.gplate .face::after{
  content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:linear-gradient(146deg, rgba(255,255,255,.85) 0%, transparent 32%);
}
.gplate.row .face{ flex-direction:row; gap:9%; }
.gkey{
  position:relative; z-index:2; border:0; cursor:pointer; flex:none;
  width:clamp(34px,22%,54px); aspect-ratio:1; border-radius:50%;
  background:transparent; color:#8d8d90;
  box-shadow:inset 0 0 0 1.4px rgba(0,0,0,.20);
  display:grid; place-items:center;
  transition:box-shadow .2s, color .2s, background .2s, transform .09s var(--ease-soft);
}
.gkey svg{ width:46%; height:46%; }
.gkey:hover{ color:#5b5b5e; box-shadow:inset 0 0 0 1.4px rgba(0,0,0,.34); }
.gkey:active{ transform:scale(.93); }
.gkey:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.gkey.lit{
  color:#2e2e30; background:rgba(90,175,255,.12);
  box-shadow:inset 0 0 0 1.4px rgba(60,150,250,.75), 0 0 14px -2px rgba(70,160,255,.7);
}
.gkey.lit.warm{
  background:rgba(255,178,90,.14);
  box-shadow:inset 0 0 0 1.4px rgba(240,160,60,.8), 0 0 14px -2px rgba(255,170,70,.75);
}
.gbrand{
  position:absolute; bottom:7%; left:50%; transform:translateX(-50%); z-index:3;
  font-size:8px; font-weight:700; letter-spacing:.02em; color:rgba(0,0,0,.30);
}

/* ── LCD room thermostat ── */
.lcd{
  position:relative; aspect-ratio:1; border-radius:7px; padding:12px;
  background:linear-gradient(158deg,#ffffff 0%,#f7f7f5 55%,#eaeae7 100%);
  box-shadow:0 20px 38px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 0 #fff;
  display:flex; flex-direction:column;
  color:#9a9a9d;
}
.lcd .icons{ display:flex; align-items:center; justify-content:space-between; padding:2px 4px 0; }
.lcd .icons svg{ width:13px; height:13px; opacity:.22; transition:opacity .25s, color .25s; }
.lcd .icons svg.on{ opacity:1; color:#4b90d8; }
.lcd .icons svg.on.warm{ color:#e08a3c; }
.lcd .mid{ flex:1; display:flex; align-items:center; justify-content:center; gap:5px; }
.lcd .unit{ align-self:flex-start; margin-top:16%; font-size:11px; font-weight:600; color:#8e8e91; }
.lcd .clockrow{ display:flex; align-items:center; justify-content:center; gap:4px; padding-bottom:8px; }
.lcd .keys{
  display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
  border-top:1px solid rgba(0,0,0,.07); padding-top:8px;
}
.lcd .keys button{
  border:0; background:transparent; cursor:pointer; padding:5px 0; border-radius:6px;
  color:#8e8e91; display:grid; place-items:center;
  transition:color .2s, background .2s, transform .09s var(--ease-soft);
}
.lcd .keys button svg{ width:15px; height:15px; }
.lcd .keys button:hover{ color:#2f2f31; background:rgba(0,0,0,.035); }
.lcd .keys button:active{ transform:scale(.9); }
.lcd .keys button.on{ color:#4b90d8; background:rgba(75,144,216,.10); }

/* Seven-segment digits — drawn from spans, no font needed */
.seg{ position:relative; display:inline-block; color:#6f7175; }
.seg.big{ width:34px; height:62px; }
.seg.sm{ width:15px; height:26px; }
.seg i{ position:absolute; background:currentColor; border-radius:1px; opacity:.10; transition:opacity .18s; }
.seg i.on{ opacity:1; }
.seg.big .a{ left:6px; top:0; width:22px; height:5px }
.seg.big .b{ right:0; top:5px; width:5px; height:23px }
.seg.big .c{ right:0; bottom:5px; width:5px; height:23px }
.seg.big .d{ left:6px; bottom:0; width:22px; height:5px }
.seg.big .e{ left:0; bottom:5px; width:5px; height:23px }
.seg.big .f{ left:0; top:5px; width:5px; height:23px }
.seg.big .g{ left:6px; top:28.5px; width:22px; height:5px }
.seg.sm .a{ left:3px; top:0; width:9px; height:2.6px }
.seg.sm .b{ right:0; top:2.6px; width:2.6px; height:9.4px }
.seg.sm .c{ right:0; bottom:2.6px; width:2.6px; height:9.4px }
.seg.sm .d{ left:3px; bottom:0; width:9px; height:2.6px }
.seg.sm .e{ left:0; bottom:2.6px; width:2.6px; height:9.4px }
.seg.sm .f{ left:0; top:2.6px; width:2.6px; height:9.4px }
.seg.sm .g{ left:3px; top:11.7px; width:9px; height:2.6px }
.segdot{ width:5px; height:5px; border-radius:1px; background:#6f7175; align-self:flex-end; margin-bottom:6px; }
.segcol{ display:flex; flex-direction:column; gap:5px; }
.segcol i{ width:3px; height:3px; border-radius:50%; background:#6f7175; }

/* ── 3-gang rocker plate ── */
.rocker3{
  position:relative; aspect-ratio:1.06/1; border-radius:6px; padding:7px;
  background:linear-gradient(158deg,#f3f3f0,#e2e2de);
  box-shadow:0 20px 38px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.10);
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
}
.rock{
  position:relative; border:0; cursor:pointer; border-radius:3px;
  background:linear-gradient(168deg,#ffffff 0%,#fbfbfa 55%,#f0f0ee 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.05),
             0 3px 0 -1px rgba(0,0,0,.09), 0 9px 16px -9px rgba(0,0,0,.55);
  transition:transform .1s var(--ease-soft), box-shadow .14s var(--ease-soft), background .3s;
}
.rock::after{                            /* the specular streak down the face */
  content:''; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.9) 0%, transparent 34%);
}
.rock:hover{ background:linear-gradient(168deg,#fff,#fdfdfc 55%,#f6f6f4); }
.rock:active{ transform:translateY(2px) rotateX(4deg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.07), 0 2px 5px -3px rgba(0,0,0,.55); }
.rock:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.rock .led{
  position:absolute; top:12%; left:50%; transform:translateX(-50%); z-index:2;
  width:4px; height:4px; border-radius:50%; background:#c6c6c8;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);
  transition:background .25s, box-shadow .25s;
}
.rock[aria-pressed="true"] .led{ background:#3fd486; box-shadow:0 0 7px 1.5px rgba(63,212,134,.85); }
.rock .rl{
  position:absolute; bottom:9%; left:0; right:0; z-index:2; text-align:center;
  font-size:7.5px; font-weight:600; letter-spacing:.06em; color:#a4a4a7; text-transform:uppercase;
  transition:color .25s;
}
.rock[aria-pressed="true"] .rl{ color:#3f9a6c; }

.devnote{
  margin-top:9px; display:flex; align-items:center; justify-content:space-between;
  font-size:9.5px; letter-spacing:.06em; color:var(--txt-faint);
}
@media (max-width:640px){
  .wallpanel{ aspect-ratio:1.7/1; grid-template-columns:36px 1fr; }
  .rotary{ width:min(160px,54vw); }
}

/* ── additions for the townhouse demo ── */
.hw-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; padding: 14px; }
.hw-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 14px 14px; }
.hw-room { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; flex-wrap: wrap; }
.hw-room .note { font-size: 11px; color: var(--txt-faint); }
.wp-card[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.wp-call { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(8,12,20,.88); color: #fff; font-size: 12px; text-align: center; }
.wp-call .acts { display: flex; gap: 8px; }
.gkey[aria-disabled="true"] { opacity: .35; }
.devnote .sim { color: var(--gold-soft); letter-spacing: .1em; }
@media (max-width: 860px) { .hw-grid { grid-template-columns: 1fr; } .hw-keys { grid-template-columns: 1fr 1fr; } }
/* phone preview */
.phonewrap { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 14px; align-items: start; }
.phone { width: 300px; height: 620px; border-radius: 44px; padding: 10px; background: linear-gradient(155deg,#494d55 0%,#25282e 22%,#101318 60%,#0a0c0f 100%);
  box-shadow: 0 40px 80px -34px #000, inset 0 1px 0 rgba(255,255,255,.28); }
.phone-screen { height: 100%; border-radius: 35px; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, #171b24 0%, #0b0d12 55%, #07080b 100%); display: flex; flex-direction: column; position: relative; }
.phone-screen .island { width: 84px; height: 24px; border-radius: 99px; background: #000; margin: 9px auto 0; flex: none; }
.phone-app { flex: 1; overflow-y: auto; padding: 10px 12px 18px; scrollbar-width: none; }
.phone-app::-webkit-scrollbar { display: none; }
.phone-app .pcard { border-radius: 16px; padding: 11px; margin-bottom: 9px; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.075); }
.phone-app .ptitle { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-faint); margin-bottom: 8px; }
.phone-app .prow { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12px; }
.phone-app .prow + .prow { border-top: 1px solid rgba(255,255,255,.055); }
.phone-note { font-size: 12px; color: var(--txt-dim); max-width: 520px; }
@media (max-width: 860px) { .phonewrap { grid-template-columns: 1fr; } .phone { margin: 0 auto; } }