/* A calm architectural model, with Hager blue reserved for interaction. */
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-toolbar { gap: 12px; flex-wrap: wrap; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-toolbar .bsx-plan-tabs { flex: 1; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-view-switch { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #ffffff38; border-radius: 10px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-view-switch > * { padding: 7px 12px; border: 0; border-radius: 7px; font: inherit; font-size: 12px; color: inherit; background: transparent; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-view-switch button { cursor: pointer; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-view-switch .is-active { background: #fff; color: #003c71; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-open { margin-left: auto; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin { --twin-ink: #264957; position: relative; color: var(--twin-ink); background: #f6f8f7; border: 1px solid #dce5e7; border-radius: 16px; overflow: clip; text-align: left; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin button, .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin select { font-family: inherit; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin button:focus-visible, .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin select:focus-visible, .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin canvas:focus-visible { outline: 3px solid #0078c4; outline-offset: 3px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-headline { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px 18px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-headline small { display: block; color: #6e858d; font-size: 9px; letter-spacing: .18em; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-headline h3 { margin: 7px 0 0; color: #244656; font-size: clamp(18px, 2vw, 27px); font-weight: 400; letter-spacing: -.04em; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-live { display: flex; align-items: center; gap: 7px; flex-shrink: 0; color: #537b70; font-size: 10px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-live::before { content: ""; width: 6px; height: 6px; background: #42a987; border-radius: 50%; box-shadow: 0 0 0 4px #42a98712; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 24px; border: 1px solid #e0e7e6; border-radius: 11px; background: #ffffffc9; overflow: hidden; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; padding: 15px 18px; border: 0; border-right: 1px solid #e4eae7; color: var(--twin-ink); background: transparent; text-align: left; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat:last-child { border-right: 0; }
button.bsx-twin-stat { cursor: pointer; transition: background .2s; }
button.bsx-twin-stat:hover { background: #edf6f3; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat-title { display: flex; gap: 6px; align-items: center; color: #637b84; font-size: 11px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat-title::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #459ac2; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat.is-solar .bsx-twin-stat-title::before { background: #d9a139; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat.is-battery .bsx-twin-stat-title::before { background: #33b694; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat strong { font-size: clamp(20px, 2.3vw, 29px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; color: #244656; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat small { font-size: 9px; color: #6c8288; line-height: 1.5; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stage { position: relative; height: clamp(420px, 52vh, 660px); min-height: 420px; background: radial-gradient(ellipse at 50% 45%, #fdfefe 0%, #eef3f0 65%, #e7eeeb 100%); isolation: isolate; overflow: hidden; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stage > canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stage > canvas:active, .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stage > canvas.is-panning { cursor: grabbing; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-labels > * { position: absolute; top: 0; left: 0; will-change: transform; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-labels > [hidden] { display: none; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-room-label { color: #455d60; font-size: 9px; font-weight: 400; white-space: nowrap; background: #f9fcf6c9; border: 1px solid #ffffff80; border-radius: 4px; padding: 3px 7px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-marker { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #d5e1e3; border-radius: 7px; color: #345563; background: #ffffffed; box-shadow: 0 3px 10px #254e6012; pointer-events: auto; cursor: pointer; white-space: nowrap; max-width: 145px; font-size: 9px; transition: background .2s, box-shadow .2s; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-marker-name { overflow: hidden; text-overflow: ellipsis; color: inherit; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-marker-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #9aa9ac; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-marker.is-on .bsx-twin-marker-dot { background: #31b18c; box-shadow: 0 0 0 2px #31b18c18; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-marker:hover, .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-marker.is-selected { z-index: 5; background: #003c71; color: white; border-color: #003c71; box-shadow: 0 3px 12px #003c7133; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-grid-label { padding: 5px 9px; border-radius: 7px; font-size: 10px; color: #40658e; white-space: nowrap; background: #f7fbffed; border: 1px solid #cee0ee; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-tools { position: absolute; right: 15px; top: 16px; z-index: 3; display: flex; flex-direction: column; padding: 5px; gap: 2px; border: 1px solid #dce6e5; border-radius: 10px; background: #ffffffed; box-shadow: 0 4px 15px #254e6009; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-tools button { display: grid; place-items: center; width: 31px; height: 31px; border: 0; border-radius: 6px; background: transparent; color: #456571; font: 400 21px/1 Arial, sans-serif; cursor: pointer; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-tools button:hover { background: #eaf3f3; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-tools button[aria-pressed="true"] { background: #dceefa; color: #0078c4; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-room-select { position: absolute; left: 18px; top: 16px; z-index: 3; max-width: 185px; padding: 9px 27px 9px 11px; border: 1px solid #dce6e5; border-radius: 8px; background: #fffffff2; color: #43616e; font-size: 11px; cursor: pointer; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-flow-legend { position: absolute; left: 18px; bottom: 15px; display: flex; gap: 13px; padding: 6px 9px; border: 1px solid #ffffff80; border-radius: 6px; background: #f7faf7d9; color: #657e83; font-size: 9px; pointer-events: none; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-flow-legend span { display: flex; align-items: center; gap: 5px; color: inherit; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-flow-legend span::before { content: ""; width: 12px; height: 2px; background: #57a9cb; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-flow-legend .is-solar::before { background: #d9a139; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-flow-legend .is-battery::before { background: #33b694; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); max-height: 160px; overflow-y: auto; padding: 14px 20px; gap: 8px; border-top: 1px solid #e0e7e4; background: #fafcfb; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device { display: flex; align-items: center; gap: 9px; padding: 10px 11px; min-width: 0; border: 1px solid #e2e9e7; border-radius: 9px; background: #fff; color: #45616a; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device:hover { border-color: #94bfd1; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device.is-selected { border-color: #0078c4; background: #edf6fc; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device > span:nth-child(2) { flex: 1; min-width: 0; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #345564; font-size: 10px; font-weight: 400; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device small { display: block; margin-top: 3px; color: #73888e; font-size: 9px; line-height: 1.4; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device-icon { color: #6493a3; flex: 0 0 22px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device i { width: 5px; height: 5px; border-radius: 50%; background: #9aa9ac; flex: 0 0 5px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device.is-on i { background: #31b18c; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 11px 22px; border-top: 1px solid #e5ebe8; color: #7a8c90; background: #fafcfb; font-size: 9px; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-footer span { color: inherit; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-inspector { position: absolute; right: 62px; top: 15px; bottom: 15px; z-index: 6; pointer-events: none; max-width: calc(100% - 80px); }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin .bsx-twin-inspector .bsx-living-appliance-popover { position: relative; top: 0; left: 0; transform: none; width: 290px; max-width: 100%; max-height: 100%; margin: 0; pointer-events: auto; border-color: #cadcdf; background: #fffffff5; box-shadow: 0 12px 40px #244e6126; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin .bsx-twin-inspector .bsx-living-popover-head small { color: #69838b; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin .bsx-twin-inspector :is(h3, strong, label, dt, dd, .bsx-living-brightness-value) { color: #003c71; }
.bsx-shell.is-hager-theme .bsx-context-card .bsx-twin .bsx-twin-inspector :is(.bsx-living-popover-note, .bsx-lifecycle-note, .bsx-living-brightness-head, .bsx-living-battery-grid) { color: #56727f; }
.bsx-shell.is-hager-theme .bsx-context-card.is-expanded .bsx-twin { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bsx-shell.is-hager-theme .bsx-context-card.is-expanded .bsx-twin .bsx-twin-stage { flex: 1; min-height: 200px; }
.bsx-shell.is-hager-theme .bsx-context-card.is-expanded .bsx-twin .bsx-twin-devices { max-height: 130px; flex-shrink: 0; }
@media (max-width: 700px) {
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-headline { padding: 12px 16px; align-items: center; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-headline h3 { display: none; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-live { max-width: 100px; line-height: 1.6; font-size: 9px; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stats { margin: 0 12px; grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat { padding: 8px 12px; gap: 4px; border-bottom: 1px solid #e4eae7; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat strong { font-size: 24px; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stat small { font-size: 9px; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-stage { min-height: 380px; height: 430px; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-devices { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; max-height: 170px; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-device { padding: 8px; gap: 6px; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-footer { padding: 10px 12px; line-height: 1.6; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-inspector { right: 10px; left: 10px; top: auto !important; bottom: 10px !important; height: min(480px, calc(100% - 20px)); max-width: none; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin .bsx-twin-inspector .bsx-living-appliance-popover { width: 100%; }
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin-footer span:last-child { display: none; }
  .bsx-shell.is-hager-theme .bsx-context-card.is-expanded .bsx-twin { min-height: 0; }
  .bsx-shell.is-hager-theme .bsx-context-card.is-expanded .bsx-twin .bsx-twin-stage { min-height: 200px; }
  .bsx-shell.is-hager-theme .bsx-context-card.is-expanded .bsx-twin .bsx-twin-devices { max-height: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  .bsx-shell.is-hager-theme .bsx-context-card .bsx-twin * { transition: none !important; }
}

.bsx-shell.is-hager-theme .bsx-context-card.is-expanded .bsx-twin :is(.bsx-twin-headline, .bsx-twin-stats, .bsx-twin-footer) { flex-shrink: 0; }