/* Demo 2 only. No changes to device controls or the approved demo. */
#roomsGrid:not(.sections-mode) .room-group { align-items: start; }
.room-card.mi-card { height: 124px; min-height: 124px; max-height: none; padding: 10px; gap: 4px; border-radius: 20px; justify-content: flex-start; container-type: inline-size; }
.room-card.mi-card:has(.mi-extra:not([hidden])) { height: auto; }
.room-card.mi-card:active { transform: none; }
#roomsGrid .room-card.mi-card { cursor: pointer; }
.mi-head { display: grid; grid-template-columns: minmax(0,1fr) auto 16px; align-items: center; gap: 4px; width: 100%; height: 34px; flex: 0 0 34px; }
.mi-room-open,.mi-room-arrow { min-width: 0; height: 34px; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; display: flex; align-items: center; }
.mi-room-arrow { grid-column: 3; justify-content: flex-end; }
.room-card.mi-card h3 { font-size: min(var(--room-name-size),clamp(11px,9cqw,16px)); font-weight: 760; line-height: 1.12; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.mi-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 7px; width: 100%; }
.mi-main { grid-template-rows: repeat(2,24px); gap: 4px 7px; height: 52px; flex: 0 0 52px; align-content: start; }
.mi-reading { display: flex; gap: 4px; align-items: center; min-width: 0; min-height: 26px; color: #eef9fa; font-size: clamp(11px,9cqw,var(--mi-size,14px)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-reading.mi-inactive { color: #adc1c8; }
.mi-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 25px; color: #9cddf7; }
.mi-icon svg { width: 100%; height: 25px; flex: 0 0 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mi-reading .mi-icon { width: clamp(17px,14cqw,22px); flex-basis: clamp(17px,14cqw,22px); }
.mi-humidity .mi-icon,.mi-ventilation .mi-icon,.mi-humidifier .mi-icon { color: #83dfd6; }
.mi-light .mi-icon,.mi-heating .mi-icon,.mi-floor .mi-icon { color: #ffd05b; }
.mi-inactive .mi-icon { color: #879fa9; }
.mi-icon sub { position: absolute; right: -2px; bottom: -2px; font: 700 9px/12px var(--room-name-font); padding: 0 2px; background: #103340; border-radius: 4px; color: #d3f2f7; }
.mi-reading small { font-size: 8px; margin-left: 1px; font-weight: 650; color: var(--muted); }
.mi-co2 small { display: block; margin: 0; font-size: 7px; line-height: 1; }
.mi-value { min-width: 0; }
.mi-extra { padding-top: 9px; margin-top: 5px; border-top: 1px solid rgba(109,216,229,.15); }
.mi-extra[hidden] { display: none; }
.mi-more { min-width: 32px; height: 30px; min-height: 30px; padding: 2px 6px; border-radius: 18px; font-size: 12px; font-weight: 750; background: rgba(7,67,79,.36); border: 1px solid rgba(81,200,218,.42); color: #56efbc; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
.mi-more svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.mi-card:has(.mi-more[aria-expanded="true"]) { border-color: var(--room-card-border); }
.mi-card button:focus-visible,.mi-config button:focus-visible,.mi-config select:focus-visible { outline: 2px solid #62ecc6; outline-offset: 3px; }
.room-card.mi-card > .mi-alert { position: absolute; left: 10px; right: 10px; bottom: 3px; display: flex; align-items: center; gap: 4px; height: 15px; font-size: 9px; font-weight: 750; color: #ffb5be; }
.mi-alert .mi-icon { color: #ff9ba9; width: 13px; height: 13px; flex-basis: 13px; }
.mi-alert .mi-icon svg { height: 13px; }
.room-card.mi-card:has(.mi-extra:not([hidden])):has(.mi-alert) { padding-bottom: 24px; }
.mi-empty { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--muted); white-space: normal; }
.mi-config { display: grid; gap: 14px; }
.mi-config p { margin: 0; }
.mi-tabs { display: flex; gap: 6px; }
.mi-tabs button { flex: 1; min-height: 40px; border-radius: 13px; padding: 8px; font-size: 12px; }
.mi-tabs button.active { background: rgba(51,214,163,.24); border-color: #50cda4; }
.mi-config label.mi-field { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.mi-config select { min-width: 0; width: 100%; min-height: 38px; border: 1px solid rgba(176,214,215,.2); background: #122d32; color: #effafb; border-radius: 10px; padding: 7px; font: 12px var(--room-name-font),sans-serif; }
.mi-config select option { background: #122d32; color: #effafb; }
.mi-preview-wrap { display: flex; justify-content: center; padding: 6px 0; }
.mi-preview-wrap .mi-card { width: var(--mi-preview-width,184px); }
.mi-config-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.mi-save-status { font-size: 10px; color: #82d5b5; }
.mi-config-list { display: grid; gap: 8px; }
.mi-config-row { display: grid; grid-template-columns: 22px minmax(0,1fr) 108px; align-items: center; gap: 8px; padding: 10px 8px; border: 1px solid rgba(124,180,196,.19); border-radius: 14px; background: rgba(13,59,70,.3); }
.mi-config-row[draggable="true"] { cursor: grab; }
.mi-config-row.mi-dragging { opacity: .5; }
.mi-config-row.mi-drop { border-color: #54dbb1; }
.mi-row-copy { min-width: 0; }
.mi-row-copy strong { display: block; font-size: 12px; line-height: 1.3; }
.mi-row-copy small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.mi-row-tools { grid-column: 2 / -1; display: flex; gap: 6px; align-items: center; }
.mi-order-button { min-height: 32px; min-width: 38px; border-radius: 9px; padding: 4px; background: rgba(255,255,255,.04); box-shadow: none; }
.mi-order-button:disabled { opacity: .25; cursor: default; }
.mi-order-note { color: var(--muted-2); font-size: 10px; margin-left: 2px; }
.mi-link { color: #b4dcd5; border: 0; box-shadow: none; background: transparent; padding: 6px; font-size: 12px; text-decoration: underline; }
.mi-reset { min-height: 40px; border-radius: 12px; font-size: 12px; padding: 8px; }
.mi-quick-settings svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.mi-size-control { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.mi-size-control input { width: 100%; }
.mi-help { color: var(--muted); font-size: 11px !important; line-height: 1.5; }
.mi-notice { border: 1px solid rgba(86,239,188,.25); border-radius: 12px; padding: 10px; background: rgba(31,122,103,.14); color: #a1f4d7; font-size: 11px !important; line-height: 1.5; }
@media (max-width:374px) {
  .room-card.mi-card { padding: 10px; }
  .mi-reading { gap: 3px; }
  .mi-grid { column-gap: 4px; }
  .mi-config-row { grid-template-columns: 20px minmax(0,1fr); }
  .mi-config-row select { grid-column: 2; }
}
@media (prefers-reduced-motion:no-preference) {
  .mi-extra:not([hidden]) { animation: mi-reveal .18s ease-out; }
  @keyframes mi-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
}