:root {
  




  color-scheme: light;
  
  --bg:          #f2f5f8;
  







  --panel:       #ffffff;
  --panel-2:     #e9eef4;
  










  --ink-on-light:  #16202c;
  --ink3-on-light: #5e6b7f;
  --ink-on-dark:   #dde5ef;
  --ink3-on-dark:  #8b9ab2;
  --ink:         #16202c;
  --ink-2:       #4a5a6e;
  












  --ink-3:       #5e6b7f;
  --rule:        #d7dfe9;
  --rule-soft:   #e7edf3;

  







  --accent:      #0b7f96;
  --accent-text: #0a7185;
  







  --accent-ink:  #ffffff;
  --accent-soft: #d6ecf1;

  










  --on-fill:     #4caf6a;
  --on-ink:      #16202c;

  













  --ok:          #2a764c;
  --warn:        #8e6206;
  --crit:        #ad422e;
  --ok-soft:     #dcefe4;
  --warn-soft:   #f7ecd2;
  --crit-soft:   #f6e0da;

  






  --cool:        #3a6f9c;
  --heat:        #b07908;
  --haux:        #b0432f;
  --hh:          #8d2f22;
  --auto:        #6b4bab;
  --fan:         #7787a0;
  --dry:         #2c7a8f;
  --off:         #7787a0;

  







  --console:      #161b22;
  --console-ink:  #c9d4e2;

  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  
  --r-card:  18px;
  --r-tile:  20px;
  --r-field: 12px;
  --r-pill:  999px;

  --shadow-card: 0 1px 2px rgb(22 32 44 / .05), 0 6px 20px rgb(22 32 44 / .06);
  --shadow-lift: 0 2px 6px rgb(22 32 44 / .08), 0 14px 34px rgb(22 32 44 / .12);
  --shadow-bar:  0 -1px 0 var(--rule), 0 -12px 28px rgb(22 32 44 / .05);

  









  --tile-bg:     var(--panel);
  --tile-ink:    var(--ink);
  --tile-ink-3:  var(--ink-3);
  --tile-plate:  var(--panel-2);

  --gap: 12px;
  --pad: 16px;
  --tabs-h: 58px;
  --top-h: 60px;
  

  --top-real: 72px;

  
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0d1117;
  
  --panel:     #151b23;
  --panel-2:   #1c232d;
  --ink:       #dde5ef;
  --ink-2:     #a2b0c2;
  

  --ink-3:     #8b9ab2;
  --rule:      #29323e;
  --rule-soft: #212934;

  --accent:      #3aa8c0;
  



  --accent-text: #3aa8c0;
  --accent-ink:  #06222a;
  --accent-soft: #14313a;

  --ok:        #58a97a;
  --warn:      #d0a144;
  --crit:      #d4785f;
  --ok-soft:   #16301f;
  --warn-soft: #33280f;
  --crit-soft: #331a14;

  --cool:      #6d9cc6;
  --heat:      #d0a144;
  --haux:      #d4785f;
  --hh:        #c96a58;
  --auto:      #9c82d6;
  --fan:       #74839a;
  --dry:       #4fa3b8;
  --off:       #74839a;

  --shadow-card: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .3);
  --shadow-lift: 0 2px 8px rgb(0 0 0 / .5), 0 16px 40px rgb(0 0 0 / .45);
  --shadow-bar:  0 -1px 0 var(--rule), 0 -12px 28px rgb(0 0 0 / .3);
}



* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 17px; }            
html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: .82rem; }

















.lead { margin: 2px 2px 14px; }
.panel + .lead,
.panel + .panel { margin-top: 12px; }





[data-live="unit-hold"] > .panel { margin-bottom: 12px; }


.mono { font-family: var(--mono); }







.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}



.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabs-h) + var(--sa-bottom));
}

.top {
  position: sticky;
  

  top: var(--beta-h, 0px);
  z-index: 20;
  
















  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--top-h);
  padding: calc(var(--sa-top) + 10px) calc(var(--pad) + var(--sa-right)) 10px
           calc(var(--pad) + var(--sa-left));
}









:root[data-beta="on"] .top {
  padding-top: 10px;
}



.home-switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1;
  min-width: 0;
  padding: 4px 8px 4px 0;
  background: none;
  border: 0;
  text-align: left;
}
.home-name {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.02em;
}















.home-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-name::after {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 2px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
}
.home-sub {
  font-size: .76rem;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}








.top-acts { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }







.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  color: var(--ink-2);
}
.icon-btn::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.spinning svg { animation: spin 900ms linear infinite; }








.top-back {
  
  --chev: 9px;
  

  position: relative;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}















.top-back::before {
  content: "";
  width: var(--chev); height: var(--chev);
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: translateX(calc(var(--chev) * 0.3536)) rotate(45deg);
}

.top-back::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
}
.top-back:active { transform: scale(.94); }

.view {
  flex: 1;
  padding: 4px calc(var(--pad) + var(--sa-right)) 24px calc(var(--pad) + var(--sa-left));
}
.view:focus { outline: none; }


.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  padding-bottom: var(--sa-bottom);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-bar);
}
.tabs button {
  flex: 1;
  min-height: var(--tabs-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--ink-3);
  padding: 6px 2px;
}
.tabs button.on { color: var(--accent-text); }
.tabs .tab-ico { display: block; height: 23px; }
.tabs .tab-ico svg { width: 23px; height: 23px; }
.tabs .tab-lbl { font-size: .66rem; font-weight: 600; letter-spacing: .01em; }
.tabs button:active .tab-ico { transform: scale(.9); }








:root.gate .tabs,
:root.gate .top-acts { display: none; }
:root.gate .app { padding-bottom: var(--sa-bottom); }
:root.gate .view { padding-bottom: 24px; }


:root.gate .home-switch { pointer-events: none; }
:root.gate .home-sub { display: none; }



.netbar {
  position: sticky;
  top: var(--top-real);
  z-index: 19;
  margin: 0 calc(var(--pad) + var(--sa-left)) 8px;
  padding: 9px 13px;
  border-radius: var(--r-field);
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.netbar.bad  { background: var(--crit-soft); color: var(--crit); }
.netbar.warn { background: var(--warn-soft); color: var(--warn); }
.netbar.ok   { background: var(--ok-soft);   color: var(--ok); }
.netbar svg { width: 16px; height: 16px; flex: 0 0 auto; }



















#beta-strip {
  position: sticky;
  top: 0;
  
  z-index: 21;
  






  background: var(--accent);
}
#beta-strip:empty { display: none; }

.betabar {
  






  padding: calc(var(--sa-top) + 1.5px) calc(var(--pad) + var(--sa-right)) 1.5px
           calc(var(--pad) + var(--sa-left));
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  
  overflow-wrap: anywhere;
}






#install-strip:empty { display: none; }

.installbar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 10px calc(var(--pad) + var(--sa-right)) 0 calc(var(--pad) + var(--sa-left));
  border: 1px solid var(--accent-soft);
  background: var(--accent-soft);
  border-radius: var(--r-field);
  overflow: hidden;
}






.installbar-go {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  

  padding: 7px 4px 7px 11px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--accent-text);
  text-align: left;
}

.installbar-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
}

.installbar-txt { min-width: 0; display: grid; font-size: .78rem; line-height: 1.25; }









.installbar-sub { color: var(--ink-2); font-size: .7rem; font-weight: 400; }

.installbar-x {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--accent-soft);
  background: none;
  
  color: var(--ink-2);
}









.ins-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.ins-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 11px;
  align-items: start;
}

.ins-n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .8rem;
  font-weight: 700;
}

.ins-t { font-size: .86rem; line-height: 1.5; padding-top: 2px; }




.ins-glyph {
  vertical-align: -5px;
  margin: 0 1px;
  color: var(--accent-text);
}

.ins-url {
  margin: 0;
  padding: 9px 11px;
  background: var(--panel-2);
  border-radius: var(--r-field);
  font-size: .74rem;
  
  overflow-wrap: anywhere;
}

.ins-all summary {
  cursor: pointer;
  





  padding: 12px 0;
  margin: -12px 0;
}
.ins-all[open] summary { margin-bottom: 0; }






.ins-all .kv { margin-top: 11px; }





.alert-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: var(--ok);
}
.alert-dot.ok   { background: var(--ok); }
.alert-dot.warn { background: var(--warn); }


.alert-dot.bad  { background: var(--crit); animation: alert-pulse 1.8s ease-in-out infinite; }
@keyframes alert-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: .72; }
}

.alert-list { display: grid; gap: 10px; }



.alert-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 12px 13px;
  border-radius: var(--r-field);
  background: var(--panel-2);
  border-left: 3px solid transparent;
}
.alert-row.ok   { border-left-color: var(--ok); }
.alert-row.warn { border-left-color: var(--warn); }
.alert-row.bad  { border-left-color: var(--crit); }
.alert-row.ok   .alert-ico { color: var(--ok); }
.alert-row.warn .alert-ico { color: var(--warn); }
.alert-row.bad  .alert-ico { color: var(--crit); }

.alert-row.acked { opacity: .5; }

.alert-ico { flex: 0 0 auto; line-height: 0; padding-top: 1px; }
.alert-txt { display: grid; gap: 3px; min-width: 0; }
.alert-txt b { font-size: .88rem; }
.alert-txt span { font-size: .8rem; color: var(--ink-2); line-height: 1.45; }
.alert-acts {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.alert-ack {
  


  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: .78rem;
  font-weight: 650;
}
.alert-ack:active { transform: scale(.96); }















.btn.sm { min-height: 44px; padding: 0 13px; font-size: .8rem; }



.env {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 4px 0 var(--gap);
  padding: 13px 6px;
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}
.env-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 6px;
  text-align: center;
}
.env-cell + .env-cell { border-left: 1px solid var(--rule-soft); }
.env-v {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.env-v.dim { color: var(--ink-3); font-weight: 600; }
.env-k {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.env-v .u { font-size: .7em; font-weight: 600; color: var(--ink-3); }











.env { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 460px) {
  
  .env-tight .env-cell { flex: 1 1 42%; }
  

  .env-tight .env-cell:nth-child(odd) { border-left: 0; }
}

.env-tight .env-k {
  white-space: normal;
  overflow: visible;
  letter-spacing: .03em;
  line-height: 1.15;
}











.chip-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 0;
  flex-wrap: wrap;
}
.chip-block { margin-bottom: 14px; }








.tiles + .sec-head { margin-top: 6px; }




.tools[hidden] { display: none; }






.unit-sec { position: relative; }
.unit-sec + .sec-head { margin-top: 6px; }







.pick-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }












.pick-main {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  padding: 0;
}





.star-btn {
  flex: 0 0 auto;
  position: relative;
  width: 44px; height: 44px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--ink-3);
}
.star-btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
}
.star-btn svg { position: relative; }
.star-btn.on { color: var(--accent-text); }
.star-btn.on::before { border-color: var(--accent-text); background: var(--accent-soft); }
.star-btn:active { transform: scale(.9); }






.chip-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 600;
  max-width: 62%;
}
.chip-select span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-select svg:last-child { transform: rotate(90deg); opacity: .7; flex: 0 0 auto; }
.chip-select svg:first-child { flex: 0 0 auto; opacity: .8; }

.sel-count {
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  opacity: .75;
}
.chip-select.on {
  border-color: var(--accent-text);
  color: var(--accent-text);
  background: var(--accent-soft);
}












.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: .84rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  white-space: nowrap;
}
.chip.on {
  background: var(--accent);
  border-color: var(--accent-text);
  color: var(--accent-ink);
}
.chip .count {
  font-size: .74rem;
  font-weight: 700;
  opacity: .68;
}
.chip:active { transform: scale(.96); }



.sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 2px 9px;
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.sec-head .count {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-3);
}










.sec-head .link {
  position: relative;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: .8rem;
  font-weight: 650;
  padding: 4px 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.sec-head .link::after {
  content: "";
  position: absolute;
  inset: -8px -4px;          
}

.sec-head .link:first-of-type { margin-left: auto; }
.sec-head .link + .link { margin-left: 12px; }
.sec-head .link svg { width: 14px; height: 14px; }




.sec-fold-btn {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
}
.sec-fold-btn .row-caret { margin-left: auto; }
.sec-fold.folded .row-caret svg { transform: rotate(0deg); }
.sec-fold-btn:active .sec-fold-title { opacity: .7; }










.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  







  gap: calc(var(--gap) / 2);
}














.tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-tile);
  
  background: var(--tile-bg);
  box-shadow: var(--shadow-card);
  text-align: left;
  color: var(--tile-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:active { transform: scale(.975); }
.tile.on { border-color: color-mix(in srgb, var(--mode, var(--accent)) 34%, transparent); }
.tile.gone { opacity: .72; }










.tile-ico {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--tile-plate);
  color: var(--tile-ink-3);
  

  flex: 0 0 auto;
}
.tile.on .tile-ico {
  background: color-mix(in srgb, var(--mode, var(--accent)) 15%, var(--tile-bg));
  color: var(--mode, var(--accent));
}
.tile-ico svg { width: 22px; height: 22px; }












.tile-ico.art, .tile.on .tile-ico.art { background: none; border-radius: 0; }
.tile-ico.art img.mode-art { width: 32px; height: 32px; object-fit: contain; }
.tile:not(.on) .tile-ico.art img.mode-art { filter: grayscale(1); opacity: .45; }





















.tile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
}









.tile-name {
  flex: 1;
  min-width: 0;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}








































.tile-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  
  gap: 1px 6px;
}







.tt-h {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tile-ink-3);
  white-space: nowrap;
}











.tt-v {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}





.tt-v .u { font-weight: 600; color: var(--tile-ink-3); margin-left: 1px; }



.tt-v.bad { color: var(--crit); }


.tt-v.warn { color: var(--warn); }

.tt-v.limit { color: var(--warn); }





.tt-v.word { font-variant-numeric: normal; }

.tile-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; min-height: 19px; }






.tile-flags .badge { white-space: normal; text-align: left; }





.tile-open {
  position: absolute; inset: 0; z-index: 0;
  padding: 0; border: 0; background: transparent;
  border-radius: inherit;
  cursor: pointer;
}















.tile-pwr {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  







  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-3);
}
.tile-pwr::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; }

.tile-pwr svg { width: 20px; height: 20px; }



.tile-pwr.on {
  background: var(--on-fill);
  border-color: var(--on-fill);
  color: var(--on-ink);
}
.tile-pwr:active { transform: scale(.9); }
.tile-pwr.busy { animation: pulse 1.1s ease-in-out infinite; }
.tile-pwr[aria-disabled="true"] { opacity: .45; }











.tile.dragging, .unit-sec.dragging {
  position: relative;
  z-index: 30;
  transition: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
}
.tile.dragging { opacity: .97; }


.unit-sec.dragging { background: var(--bg); border-radius: var(--r-tile); }




body.dragging-on { cursor: grabbing; }
body.dragging-on, body.dragging-on * { user-select: none; -webkit-user-select: none; }
.tile, .unit-head { -webkit-touch-callout: none; }































.unit-pwr {
  flex: 0 0 auto;
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  
  margin: 0 2px;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}


.unit-pwr::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rule);
  background: var(--panel);
  z-index: -1;
}



.unit-pwr svg { width: 17px; height: 17px; }



.unit-pwr.on { color: var(--on-ink); }
.unit-pwr.on::before {
  background: var(--on-fill);
  border-color: var(--on-fill);
}
.unit-pwr:active { transform: scale(.9); }



.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  




  max-width: 100%;
  min-width: 0;
}
.badge svg { width: 11px; height: 11px; }
.badge img.mode-art { width: 11px; height: 11px; object-fit: contain; }
.b-info { background: var(--accent-soft); color: var(--accent-text); }
.b-ok   { background: var(--ok-soft);     color: var(--ok); }
.b-warn { background: var(--warn-soft);   color: var(--warn); }
.b-crit { background: var(--crit-soft);   color: var(--crit); }
.b-flat { background: var(--panel-2);     color: var(--ink-3); }
.badge.pulse { animation: pulse 1.1s ease-in-out infinite; }



.panel {
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.panel.pad { padding: 14px; }

.rowset > * + * { border-top: 1px solid var(--rule-soft); }

.row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 54px;
  padding: 11px 14px;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
}
button.row:active { background: var(--panel-2); }










.row-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
}




.row-open:active { background: var(--panel-2); }
.row:has(> .row-open):active { background: var(--panel-2); }
.row-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--ink-2);
}
.row-ico svg { width: 18px; height: 18px; }







.row-ico img.mode-art { width: 18px; height: 18px; object-fit: contain; }













.row-ico.art { background: none; border-radius: 0; }
.row-ico.art img.mode-art { width: 34px; height: 34px; }
.row-main { flex: 1; min-width: 0; }
.row-title {
  font-size: .92rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-sub { font-size: .76rem; color: var(--ink-3); }
.row-sub.wrap { white-space: normal; }











.row.stack { flex-wrap: wrap; }
.row.stack > .row-sub-full {
  flex: 1 0 100%;
  margin-top: 4px;
}
.row-val { font-size: .84rem; color: var(--ink-2); font-weight: 600; flex: 0 0 auto; }
.row-go {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
  opacity: .8;
}







.empty {
  padding: 26px 20px;
  text-align: left;
  color: var(--ink-3);
  font-size: .84rem;
  line-height: 1.5;
}
















.empty > b:first-child {
  display: block;
  text-align: center;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: .95rem;
}




.empty p:last-child { margin-bottom: 0; }

.boot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--ink-3);
  font-size: .88rem;
}
.spin {
  width: 17px; height: 17px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .42; } }



.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--panel);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 650;
  


  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--accent); border-color: var(--accent-text); color: var(--accent-ink); }
.btn.danger  { background: var(--crit);   border-color: var(--crit);   color: var(--accent-ink); }
.btn.ghost   { background: var(--panel-2); border-color: transparent; color: var(--ink-2); }
.btn.wide    { width: 100%; }
.btn:disabled { opacity: .45; }
.btn:disabled:active { transform: none; }




.allbar { display: flex; gap: var(--gap); margin-bottom: 4px; }
.allbar .btn { flex: 1; }
.allbar .btn.all-on svg { color: var(--ok); }
.allbar .btn.all-off svg { color: var(--ink-3); }



.search {
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--gap);
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  font-size: 1rem;                 
}
.search::placeholder { color: var(--ink-3); }

.field { display: block; margin-bottom: 13px; }
.field > span {
  display: block;
  margin-bottom: 5px;
  font-size: .76rem;
  font-weight: 650;
  color: var(--ink-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--bg);
  font-size: 1rem;
}
.field textarea { min-height: 76px; resize: vertical; }





select {
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  max-width: 100%;
}









.field-label {
  display: block;
  margin: 11px 2px 5px;
  font-size: .76rem;
  font-weight: 650;
  color: var(--ink-2);
}



.field-error {
  margin: -4px 0 12px;
  padding: 9px 12px;
  border-radius: var(--r-field);
  background: var(--crit-soft);
  color: var(--crit);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}




.field-reveal { position: relative; }


.field-reveal input { padding-right: 46px; }
.reveal {
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  border-radius: 0 var(--r-field) var(--r-field) 0;
}
.reveal:hover { color: var(--ink-1); }
.reveal[aria-pressed="true"] { color: var(--accent-text); }

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px; height: 29px;
  border-radius: var(--r-pill);
  background: var(--rule);
  transition: background .18s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .28);
  transition: transform .18s ease;
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(19px); }

















.switch[role="switch"] {
  height: 44px;
  background: none;                     
}
.switch[role="switch"]::before {
  content: "";
  position: absolute;
  inset: 7.5px 0;                       
  border-radius: var(--r-pill);
  background: var(--rule);
  transition: background .18s ease;
}
.switch[role="switch"].on { background: none; }
.switch[role="switch"].on::before { background: var(--accent); }


.switch[role="switch"]::after { top: 10px; }


.seg {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: var(--r-field);
  background: var(--panel-2);
}
.seg.wrap { flex-wrap: wrap; }


.seg.days { flex-wrap: nowrap; gap: 3px; padding: 3px; }
.seg.days button { min-width: 0; flex: 1 1 0; padding: 0 2px; font-size: .78rem; }
.seg button {
  flex: 1 1 auto;
  min-width: 56px;
  


  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 650;
}
.seg button.on {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.seg button:disabled { opacity: .4; }
.seg button svg { width: 16px; height: 16px; }

.ctl-label {
  margin: 17px 2px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}






dl.kv { display: grid; grid-template-columns: fit-content(52%) 1fr; gap: 8px 14px; margin: 0; }
dl.kv dt { font-size: .8rem; color: var(--ink-3); }
dl.kv dd { margin: 0; font-size: .84rem; font-weight: 600; text-align: right; }








dl.kv .kv-note {
  grid-column: 1 / -1;
  margin-top: -4px;
  text-align: left;
  font-size: .74rem; font-weight: 400; color: var(--ink-3);
  line-height: 1.5;
}






dl.kv.prose { grid-template-columns: 1fr; gap: 0; }
dl.kv.prose dt {
  margin-top: 13px;
  font-size: .84rem; font-weight: 650; color: var(--ink-2);
}
dl.kv.prose dt:first-child { margin-top: 0; }
dl.kv.prose dd {
  margin-top: 2px;
  text-align: left;
  font-size: .8rem; font-weight: 400; color: var(--ink-3);
  line-height: 1.5;
}





.hero {
  position: relative;
  margin: 0 calc(-1 * (var(--pad) + var(--sa-left))) 0 calc(-1 * (var(--pad) + var(--sa-right)));
  padding: 6px calc(var(--pad) + var(--sa-left)) 22px;
  background:
    radial-gradient(120% 78% at 50% -12%,
      color-mix(in srgb, var(--mode, var(--accent)) 26%, transparent) 0%,
      transparent 72%);
}
.hero.off { --mode: var(--off); }

.dial-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }





.dial-col { --dial-w: min(272px, 74vw); width: var(--dial-w); }

.dial {
  position: relative;
  width: var(--dial-w);
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
}
.dial svg { width: 100%; height: 100%; display: block; transform: rotate(0deg); }
.dial-track {
  fill: none;
  stroke: color-mix(in srgb, var(--ink-3) 22%, transparent);
  stroke-width: 15;
  stroke-linecap: round;
}
.dial-fill {
  fill: none;
  stroke: var(--mode, var(--accent));
  stroke-width: 15;
  stroke-linecap: round;
  transition: stroke-dasharray .16s ease;
}
.dial-knob {
  fill: var(--panel);
  stroke: var(--mode, var(--accent));
  stroke-width: 4;
}
.dial.dial-off .dial-fill,
.dial.dial-off .dial-knob { stroke: var(--off); }

.dial-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  




  padding-top: 12px;
  pointer-events: none;
  text-align: center;
}
.dial-set {
  position: relative;
  display: flex;
  align-items: flex-start;
  


  font-size: clamp(2.9rem, 12vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}



.dial-set sup {
  position: absolute;
  left: 100%;
  top: .16em;
  margin-left: .06em;
  font-size: .3em;
  font-weight: 650;
  color: var(--ink-3);
}
.dial-cap {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}


.dial-reads {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  

  flex-direction: column;
  gap: 1px;
  max-width: 84%;
  


  font-size: clamp(.68rem, 2.9vw, .82rem);
  font-weight: 600;
  color: var(--ink-2);
}
.dial-floor { color: var(--ink-3); }

.dial-floor.no-read { color: var(--warn); }


.dial-floor.limit {
  color: var(--crit);
  font-weight: 750;
  animation: floor-limit 2.4s ease-in-out infinite;
}
.dial-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mode, var(--accent)) 16%, var(--panel));
  







  color: color-mix(in srgb, var(--mode, var(--accent)) 70%, var(--ink));
  font-size: .72rem;
  font-weight: 700;
}
.dial-mode svg { width: 13px; height: 13px; }







.dial-art { display: grid; place-items: center; }
.dial-art img.mode-art { width: 44px; height: 44px; object-fit: contain; display: block; }
.dial-art.off img.mode-art { filter: grayscale(1); opacity: .45; }




.floor-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  


  width: fit-content;
  


  max-width: 100%;
  flex-wrap: wrap;
  




  margin: calc(10px - 18.7%) auto 10px;
  padding: 7px 15px;
  border: 1px solid var(--crit);
  border-radius: var(--r-pill);
  background: var(--crit-soft);
  color: var(--crit);
  font-size: .8rem;
  font-weight: 750;
  

  animation: floor-limit 2.4s ease-in-out infinite;
}
.floor-alert svg { width: 15px; height: 15px; flex: 0 0 auto; }
.floor-alert .fa-temp { font-variant-numeric: tabular-nums; }

.floor-alert .fa-none { font-style: normal; font-weight: 600; font-size: .92em; opacity: .72; }


@keyframes floor-limit {
  0%, 100% { opacity: 1; }
  50%      { opacity: .38; }
}




.dial-btns { display: flex; align-items: center; justify-content: center; gap: 16px; }
.dial-step {
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.dial-step:active { transform: scale(.92); }
.dial-step:disabled { opacity: .4; }
.dial-limits { font-size: .74rem; color: var(--ink-3); }

.floor-val { min-width: 88px; text-align: center; font-size: 1.1rem; color: var(--ink-2); }
.floor-val b { font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--ink); }

.timer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.timer-grid .dial-btns { gap: 6px; }
.timer-grid .dial-step { width: 46px; height: 46px; font-size: 1.25rem; }
.timer-grid .floor-val { min-width: 44px; }
.timer-cap {
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.row.row-on .row-title { color: var(--accent-text); }
.row.row-on .row-val { color: var(--accent-text); }
.row:disabled { opacity: .45; }

.row-toggle { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; }
.row-toggle:active { background: var(--panel-2); }




.row-device { background: var(--panel-2); padding: 0 14px 0 0; }




.row-device .switch[role="switch"] { align-self: stretch; height: auto; min-height: 44px; }
.row-device .switch[role="switch"]::before {
  inset: auto 0;
  top: 50%;
  height: 29px;
  transform: translateY(-50%);
}
.row-device .switch[role="switch"]::after { top: 50%; margin-top: -12px; }
.row-device .row-title { font-weight: 700; }
.row-zone { padding-left: 26px; }



.row-fold {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0 11px 14px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
}
.row-fold:active { background: var(--panel-2); }


.row-caret { flex: 0 0 auto; line-height: 0; opacity: .55; }
.row-caret svg { transform: rotate(90deg); transition: transform 140ms ease; }
.row-device.folded .row-caret svg { transform: rotate(0deg); }



.scene-del, .row-del {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
}
.scene-del:active, .row-del:active { background: var(--crit-soft); color: var(--crit); }




.scene-del {
  position: absolute; right: 8px; bottom: 8px;
  



  box-sizing: content-box;
  padding: 6px; margin: -6px;
}












.row-del { width: 44px; height: 44px; }
.scene { position: relative; }
.inert-note { margin-top: 10px; }


.pwr-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  width: 100%;
  margin: 4px 0 2px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-field);
  background: var(--panel);
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.pwr-big svg { width: 19px; height: 19px; }












.pwr-big.on {
  background: var(--on-fill);
  border-color: var(--on-fill);
  color: var(--on-ink);
}















:root[data-on="mode"] .tile-pwr.on {
  background: var(--mode, var(--accent));
  border-color: var(--mode, var(--accent));
  color: var(--accent-ink);
}
:root[data-on="mode"] .unit-pwr.on { color: var(--accent-ink); }
:root[data-on="mode"] .unit-pwr.on::before {
  background: var(--accent);
  border-color: var(--accent-text);
}
:root[data-on="mode"] .pwr-big.on {
  background: color-mix(in srgb, var(--mode, var(--accent)) 80%, var(--ink));
  border-color: color-mix(in srgb, var(--mode, var(--accent)) 80%, var(--ink));
  color: var(--accent-ink);
}
.pwr-big:active { transform: scale(.985); }
.pwr-big:disabled { opacity: .5; }



















.band2 { position: relative; height: 44px; touch-action: none; }
.band2-track, .band2-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: var(--r-pill); pointer-events: none;
}
.band2-track { left: 0; right: 0; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--rule); }
.band2-fill  { left: var(--lo-pct); right: calc(100% - var(--hi-pct)); background: var(--on-fill); }
.band2 input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 44px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; border: 0;
}
.band2 input[type="range"]:focus { outline: none; }



.band2 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
}
.band2 input[type="range"]::-moz-range-thumb {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
}
.band2-lo { clip-path: inset(0 calc(100% - var(--mid-pct)) 0 0); }
.band2-hi { clip-path: inset(0 0 0 var(--mid-pct)); }
.band2-thumb {
  position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--on-fill);
  box-shadow: 0 0 0 2px var(--panel), 0 1px 3px rgb(0 0 0 / .28);
  pointer-events: none;
}
.band2-thumb.lo { left: var(--lo-pct); }
.band2-thumb.hi { left: var(--hi-pct); }

.band2-lo:focus-visible ~ .band2-thumb.lo,
.band2-hi:focus-visible ~ .band2-thumb.hi {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 5px var(--accent-soft), 0 1px 3px rgb(0 0 0 / .28);
}
.band2-ends {
  display: flex; justify-content: space-between;
  font-size: .62rem; color: var(--ink-3); margin: -2px 2px 0;
  font-variant-numeric: tabular-nums;
}
.band-mode + .band-mode { margin-top: 14px; }
.band-mode-head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.band-mode-ico { display: inline-flex; flex: 0 0 auto; }
.band-mode-ico img.mode-art { width: 20px; height: 20px; }
.band-mode-name { font-size: .82rem; font-weight: 650; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band-mode-val { font-size: .82rem; font-weight: 700; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; }
.band-off .band-mode-val, .band-off .band-mode-name { color: var(--ink-3); }
.band-off .band2-fill, .band-off .band2-thumb { background: var(--ink-3); }









.is-quiet { opacity: .45; filter: grayscale(1); pointer-events: none; }





.name-stale {
  font-size: .62em;
  vertical-align: super;
  line-height: 0;
  margin-left: .12em;
  color: var(--ink-3);
  font-weight: 600;
}








.aps { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.apr { position: relative; }
.apr-btn {
  width: 100%;
  padding: 9px 8px 10px;
  border-radius: var(--r-field);
  border: 1.5px solid var(--rule);
  background: var(--bg);
  display: block;
  text-align: left;
}


.apr-btn.on { border-color: var(--on-fill); border-width: 2.5px; padding: 8px 7px 9px; }
.apr-btn:active { transform: scale(.98); }
.apr-mini {
  background: var(--tile-bg);
  border-radius: 10px;
  padding: 6px 7px 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.apr-col { flex: 1 1 auto; min-width: 0; }
.apr-top { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.apr-plate { width: 15px; height: 15px; border-radius: 4px; background: var(--tile-plate); flex: 0 0 auto; }
.apr-name {
  font-size: .6rem; font-weight: 650; color: var(--tile-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apr-tbl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5px; }
.apr-h { font-size: .44rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tile-ink-3); }
.apr-v { font-size: .54rem; font-weight: 600; color: var(--tile-ink); }
.apr-pwr {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--on-fill); color: var(--on-ink);
  display: grid; place-items: center; flex: 0 0 auto;
}
.apr-pwr svg { width: 10px; height: 10px; }
.apr-lbl {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; min-height: 28px;
}
.apr-ttl { font-size: .8rem; font-weight: 600; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.apr-x {
  width: 28px; height: 28px; flex: 0 0 auto; position: relative;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-3);
  border-radius: var(--r-pill);
}
.apr-x::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; }
.apr-x:active { transform: scale(.9); }



.chart-card { padding: 14px 12px 10px; }
.chart-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 10px;
}
.chart-title { font-size: .88rem; font-weight: 700; }
.chart-legend {
  display: flex;
  gap: 12px;
  margin: 8px 2px 0;
  font-size: .72rem;
  color: var(--ink-3);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i {
  width: 13px; height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.chart-legend .room { color: var(--accent-text); }
.chart-legend .set  { color: var(--haux); }
.chart-box { position: relative; width: 100%; }

.chart-box svg { display: block; max-width: 100%; }
.chart-grid { stroke: var(--rule-soft); stroke-width: 1; }
.chart-axis { fill: var(--ink-3); font-size: 9px; font-family: var(--sans); }
.chart-room { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart-room-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.chart-set  { fill: none; stroke: var(--haux); stroke-width: 1.8; stroke-dasharray: 5 4; }
.chart-on   { fill: color-mix(in srgb, var(--ok) 20%, transparent); stroke: none; }

.chart-range   { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: none; }
.chart-extreme { fill: var(--crit); stroke: var(--panel); stroke-width: 1; }




.chart-zone { fill: none; stroke-width: 1.8; stroke-linejoin: round; }


.chart-legend.zones { flex-wrap: wrap; row-gap: 4px; }
.chart-legend.zones span { color: var(--ink-3); }



.scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }
.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px;
  border-radius: var(--r-tile);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--mode, var(--accent)) 20%, var(--panel)),
      var(--panel) 78%);
  box-shadow: var(--shadow-card);
  text-align: left;
  color: inherit;
}
.scene.off { --mode: var(--off); opacity: .78; }
.scene-when {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.scene-what { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.scene-days { font-size: .72rem; color: var(--ink-3); }
.scene-sw { position: absolute; top: 14px; right: 14px; }



.scene-open {
  position: absolute; inset: 0; z-index: 0;
  padding: 0; border: 0; background: transparent;
  border-radius: inherit;
  cursor: pointer;
}
.scene-sw, .scene-del { z-index: 1; }



.sheet-host {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(8 12 18 / .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: var(--bg);
  box-shadow: var(--shadow-lift);
  animation: rise .22s cubic-bezier(.22, 1, .36, 1);
  padding-bottom: var(--sa-bottom);
}
@keyframes rise { from { transform: translateY(14%); opacity: .4; } }

.sheet-grip {
  width: 38px; height: 4px;
  margin: 9px auto 0;
  border-radius: 2px;
  background: var(--rule);
  flex: 0 0 auto;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px 9px;
  flex: 0 0 auto;
}
.sheet-head .h { flex: 1; min-width: 0; }
.sheet-head b {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.sheet-head span { font-size: .78rem; color: var(--ink-3); }






.sheet-back {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  color: var(--ink-2);
}
.sheet-back svg { transform: rotate(180deg); }
.sheet-back:active { transform: scale(.92); }










.sheet-act {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
}
.sheet-act:active { transform: scale(.94); }
.sheet-x {
  




  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 1.2rem;
  line-height: 1;
}
.sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 16px 18px;
}
.sheet-foot {
  flex: 0 0 auto;
  display: flex;
  padding: 11px 16px calc(11px + var(--sa-bottom));
  border-top: 1px solid var(--rule);
  background: var(--panel);
}



.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabs-h) + var(--sa-bottom) + 14px);
  z-index: 70;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: min(440px, calc(100vw - 28px));
  pointer-events: none;
}
.toast {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--r-field);
  background: var(--console);
  color: var(--console-ink);
  font-size: .84rem;
  font-weight: 550;
  line-height: 1.4;
  box-shadow: var(--shadow-lift);
  transition: opacity .22s ease, transform .22s ease;
  animation: rise .2s ease;
}
.toast svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.toast.ok   svg { color: #6fce9a; }
.toast.warn svg { color: #e4b95c; }
.toast.err  svg { color: #e88f75; }
.toast b { font-weight: 700; }




#sheet-host:not([hidden]) ~ .toasts {
  top: calc(var(--top-real) + 10px);
  bottom: auto;
}


.chart-sub { margin: -6px 2px 10px; }









.gate { padding: 8px 2px 20px; }
.gate h2 { text-align: center; font-size: 1.3rem; }
.gate p.lead {
  margin: 6px 0 22px;
  text-align: center;
  font-size: .84rem;
  color: var(--ink-3);
  line-height: 1.5;
}













@media (max-width: 759px) {
  :root[data-text="lg"] .tiles { grid-template-columns: 1fr; }
  :root[data-text="lg"] .env-k { white-space: normal; overflow: visible; letter-spacing: .03em; line-height: 1.15; }
  :root[data-text="lg"] .env { padding: 11px 2px; gap: 2px; }
  :root[data-text="lg"] .home-sub { white-space: normal; }
  :root[data-text="lg"] .chip-select { max-width: 100%; }
}

@media (min-width: 760px) {
  :root { --pad: 22px; }

  





  .top, .view, .netbar, #install-strip { max-width: 1080px; margin-inline: auto; width: 100%; }
  .view { padding-bottom: 40px; }
  






  .hero { margin-inline: 0; border-radius: var(--r-card); }
  .app { padding-bottom: calc(var(--tabs-h) + var(--sa-bottom) + 22px); }

  .tabs {
    left: 50%;
    right: auto;
    bottom: calc(var(--sa-bottom) + 16px);
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 44px));
    border-radius: var(--r-pill);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
  }
  .toasts { bottom: calc(var(--tabs-h) + var(--sa-bottom) + 34px); }

  .sheet-host { align-items: center; padding: 22px; }
  .sheet { border-radius: 22px; max-height: 86vh; }
  .sheet-foot { padding-bottom: 11px; }

  

  .allbar .btn[data-all] { flex: 0 1 220px; }
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .badge.pulse, .tile-pwr.busy { opacity: .6; }
}




.hero.inert .dial-set,
.hero.inert .dial-fill,
.hero.inert .dial-knob { opacity: .45; }
.hero.inert .dial-cap { color: var(--warn); }




.dial-outside .dial-knob,
.dial-outside .dial-fill { opacity: .45; }
.dial-outside .dial { cursor: default; }





.grp-val {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.grp-val b { font-size: 3.6rem; font-weight: 700; letter-spacing: -.02em; }
.grp-val .gu {
  font-size: 1.05rem; font-weight: 650; color: var(--ink-3);
  margin: .34em 0 0 .1em;
}




.grp-val.mixed b { font-size: 2rem; font-weight: 650; color: var(--ink-2); }
.grp-spread { margin-top: 7px; }






.dial-gauge { cursor: default; }


.grp-arc { transition: stroke-dasharray .16s ease, stroke-dashoffset .16s ease; }




.dial-mid .grp-val b { font-size: clamp(2.9rem, 12vw, 3.5rem); letter-spacing: -.045em; }
.dial-mid .grp-val .gu { font-size: 1.02rem; margin-top: .3em; }


.dial-mid .grp-val.mixed b { font-size: clamp(1.6rem, 6.6vw, 2rem); letter-spacing: -.02em; }










.unit-head {
  position: sticky;
  top: var(--top-real);
  z-index: 12;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 18px 0 9px;
  padding: 0 4px 0 0;
  border-radius: var(--r-field);
  








  background: var(--bg);
  color: inherit;
  text-align: left;
}




.unit-fold {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  







  align-self: stretch;
  gap: 9px;
  padding: 6px 4px 6px 9px;
  border: 0;
  border-radius: var(--r-field);
  background: transparent;
  color: inherit;
  text-align: left;
}
.unit-fold:active { background: var(--panel-2); }

















.unit-open {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}
.unit-open:active { background: var(--panel-2); }


.unit-star {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .4;
}
.unit-star.on { opacity: 1; color: var(--accent-text); }








.unit-star:active { background: var(--panel-2); }


.unit-caret { flex: 0 0 auto; line-height: 0; opacity: .55; }
.unit-caret svg { transform: rotate(90deg); transition: transform 140ms ease; }
.unit-head.folded .unit-caret svg { transform: rotate(0deg); }
.unit-ico {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--ink-2);
}


















.unit-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.unit-name {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  

  max-width: 100%;
}



.unit-text .unit-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.2;
}
.unit-meta {
  min-width: 0;
  font-size: .74rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-head .row-go { opacity: .55; }






.swatch {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
  cursor: pointer;
}

.swatch::-webkit-color-swatch-wrapper { padding: 0; }
.swatch::-webkit-color-swatch { border: 0; border-radius: var(--r-pill); }
.swatch::-moz-color-swatch { border: 0; border-radius: var(--r-pill); }



.chip-add {
  border: 1px dashed var(--rule);
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
  gap: 4px;
}
.chip-add svg { width: 14px; height: 14px; }



.tile-pwr.held {
  border-style: dashed;
  border-color: var(--warn);
  color: var(--warn);
  background: var(--panel);
}




.row.held .row-val { color: var(--warn); }
.row.held .row-ico { color: var(--warn); }











.m-no {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-weight: 700;
  font-size: .95em;
  letter-spacing: .01em;
}


.m-no.guess {
  border-bottom: 1px dashed var(--warn);
  color: var(--warn);
}
.unit-name .m-no { margin-right: 6px; font-size: .82em; vertical-align: 1px; }


.act-unit { display: flex; align-items: center; gap: 6px; margin: 2px 0 1px; min-width: 0; }
.act-unit .u-mac { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }





.act-who {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  margin: 2px 0 1px; font-size: .79rem; color: var(--ink-2);
}
.act-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-who .dim { color: var(--ink-3); font-style: italic; }
.act-who svg { flex: none; color: var(--ink-3); }









.row-log .row-title {
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
}
.unit-meta .u-mac { font-family: var(--mono); }





.chart-box { position: relative; touch-action: pan-y; }

.chart-hover { position: absolute; inset: 0; pointer-events: none; }

.ch-line {
  position: absolute;
  width: 1px;
  background: var(--ink-3);
  opacity: .55;
}
.ch-dot {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--panel);
}
.ch-tip {
  position: absolute;
  top: 6px;
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-lift);
  font-size: .74rem;
  line-height: 1.45;
  white-space: nowrap;
}
.ch-tip > b { display: block; font-size: .92rem; letter-spacing: -.01em; }
.ch-tip .ch-date { display: block; color: var(--ink-3); font-size: .68rem; margin-bottom: 5px; }
.ch-tip .ch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
}
.ch-tip .ch-row b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.ch-tip .ch-row i {
  width: 9px; height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.ch-tip .ch-row i.room { background: var(--accent); }
.ch-tip .ch-row i.set  { background: var(--haux); }
.ch-tip .ch-row i.range { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.ch-tip .ch-row i.floor { background: var(--warn); }
.ch-tip .ch-row i.on   { background: var(--ok); height: 8px; border-radius: 50%; width: 8px; }
.ch-tip .ch-row i.off  { background: var(--ink-3); height: 8px; border-radius: 50%; width: 8px; opacity: .5; }





.grp-head { background: var(--panel-2); }
.grp-head .unit-name { font-weight: 700; }






























.grp-head .unit-fold { padding-right: 0; }





.grp-head .unit-meta { flex-shrink: 2; }




.zone-notes { margin: 8px 2px 0; display: grid; gap: 6px; }
.zone-note {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink-2);
  border-left: 2px solid var(--rule);
  padding-left: 9px;
}



.hold-box {
  background: var(--warn-soft);
  border-color: var(--warn);
}
.hold-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--warn);
}




.search-wrap { position: relative; margin: 0 0 12px; }
.search-wrap .search-ico {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink-3);
  pointer-events: none;
}
.search-wrap .search { padding-left: 34px; margin: 0; }



.reach-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: .8rem;
  line-height: 1.45;
}
.reach-note svg { flex: 0 0 auto; margin-top: 2px; }



.home-switch.plain { pointer-events: none; cursor: default; }
.home-switch.plain .home-name::after { display: none; }



.home-switch.plain .home-name-text {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 1.12rem;
  line-height: 1.15;
}
































.eye-btn {
  flex: 0 0 auto;
  position: relative;
  width: 60px; height: 44px;
  padding: 0; margin: 0;
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: row;
  align-content: center;
  justify-items: center;
  row-gap: 1px;
  border: 0;
  background: none;
  color: var(--ink-3);
}
.eye-word {
  position: relative;            
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}
.eye-btn::before {
  content: "";
  position: absolute;
  inset: 5px;                     
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--panel);
}
.eye-btn svg { position: relative; }        
.eye-btn.away { color: var(--warn); }
.eye-btn.away::before { border-color: var(--warn); background: var(--warn-soft); }
.eye-btn:active { transform: scale(.9); }

.eye-btn:disabled { opacity: .55; cursor: default; }
.eye-btn:disabled:active { transform: none; }

.pick-row.away .pick-main { opacity: .55; }















.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  












  grid-auto-rows: 1fr;
}




.opt-panel { margin-top: 10px; }







.band-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.band-row + .band-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }







.band-name { font-weight: 600; min-width: 0; }
.band-steps { margin: 0; flex: 0 0 auto; }
.band-off .band-row { opacity: .55; }





.dial-band {
  fill: none;
  stroke: var(--accent);
  stroke-width: 15;
  stroke-linecap: round;
  opacity: .26;
}
.opt {
  --opt: var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  


  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--panel);
  color: var(--ink-3);
  opacity: .55;
}


.opt.on { opacity: 1; border-color: var(--opt); color: color-mix(in srgb, var(--opt) 70%, var(--ink)); }
.opt:active { transform: scale(.94); }
.opt-ico { display: grid; place-items: center; }
.opt-ico img.mode-art { width: 18px; height: 18px; object-fit: contain; }
.opt-txt { font-size: .74rem; font-weight: 600; letter-spacing: .01em; }






.claim-code {
  font-family: var(--mono);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-align: center;
  padding: 16px 8px 16px .22em;
  border-radius: 14px;
  background: var(--tile-bg);
  color: var(--tile-ink);
  user-select: all;
  -webkit-user-select: all;
}

.b-muted { background: var(--panel-2, var(--panel)); color: var(--ink-3); }

.rooms-pick { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 12px; }
.rooms-pick button {
  min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: .82rem; font-weight: 600;
  border: 1.5px solid var(--rule); background: var(--panel); color: var(--ink-2);
}
.rooms-pick button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }


.tz-list { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 13px; }
.tz-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  min-height: 44px; padding: 8px 12px; text-align: left; font: inherit; cursor: pointer;
  border: 1.5px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--ink);
}
.tz-row.rec { border-color: var(--accent); }
.tz-row .tz-meta { font-size: .78rem; color: var(--ink-3); }





.ds-zones button { position: relative; }
.ds-count {
  display: inline-block;
  min-width: 1.2em;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: text-top;
}
.ds-warn { color: var(--warn); }
.ds-problem { color: var(--crit); font-weight: 600; }
.ds-off {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 4px;
}
.ds-budget { float: right; font-weight: 600; color: var(--ink-3); }
.ds-name input::placeholder { color: var(--ink-3); }


.ds-picks select {
  font: inherit;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
}
.ds-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ds-step .btn { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.1rem; }
.ds-step .ds-sp-val { min-width: 4.6em; text-align: center; font-variant-numeric: tabular-nums; }
.ds-quick .btn { min-height: 36px; padding: 6px 12px; font-size: .84rem; }



.ds-grp { padding: 10px 14px 2px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; opacity: .7; }
.ds-land { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--line, rgba(127, 127, 127, .18)); font-size: .68rem; font-weight: 700; line-height: 1.6; vertical-align: text-top; opacity: .85; }
.ds-land.unit { background: var(--accent-soft); color: var(--accent-text); opacity: 1; }
.ds-progress li { margin: 6px 0; line-height: 1.35; }









.tile-sched {
  position: relative; z-index: 1; flex: 0 0 auto; margin-left: auto; margin-right: calc(25% - 32.5px);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-text);
  cursor: pointer;
}
.tile-sched::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; }
.tile-sched svg { width: 16px; height: 16px; }
.tile-sched[hidden] { display: none; }
.tile-sched:active { transform: scale(.9); }



.betabar.face-beta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.betabar-link { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.betabar-link::after { content: ""; position: absolute; inset: -12px -10px -16px -10px; }