.ha-cheek-pilot {
  margin: 0 0 1.25rem;
  padding: 0.85rem;
  border: 1px solid var(--color-filler, #06b6d4);
  border-radius: 10px;
  background: rgba(6, 182, 212, 0.045);
}
.ha-cheek-pilot[hidden] { display: none; }
.ha-cheek-pilot h3 { font-size: 0.85rem; color: var(--color-text-primary); margin: 0 0 0.4rem; }
.ha-cheek-pilot .panel-subtitle { margin: 0.5rem 0; line-height: 1.45; }
.ha-cheek-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0.6rem 0; }
.ha-cheek-pilot button {
  min-height: 36px; border: 1px solid var(--border-glass-active);
  border-radius: 7px; background: transparent; color: var(--color-text-primary);
  font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.ha-cheek-pilot button[aria-pressed="true"] {
  border-color: var(--color-filler); background: rgba(6, 182, 212, 0.14);
}
.ha-cheek-pilot button:disabled { opacity: 0.45; cursor: default; }
.ha-cheek-pilot :is(button, input, summary):focus-visible { outline: 2px solid var(--color-filler); outline-offset: 3px; }
.ha-cheek-linked { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; margin: 0.8rem 0; cursor: pointer; }
.ha-cheek-pilot input { accent-color: var(--color-filler, #06b6d4); }
.ha-cheek-pilot input[type="range"] { width: 100%; min-height: 24px; margin: 0 0 0.6rem; }
.ha-cheek-slider { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.72rem; color: var(--color-text-secondary); }
.ha-cheek-slider output { font-variant-numeric: tabular-nums; color: var(--color-filler); }
.ha-cheek-boundaries { border-block: 1px solid var(--border-glass); margin-block: 0.4rem 0.75rem; padding-block: 0.65rem; }
.ha-cheek-boundaries summary { cursor: pointer; font-size: 0.72rem; color: var(--color-text-secondary); }
.ha-cheek-boundaries[open] summary { margin-bottom: 0.85rem; }
.ha-cheek-reset { width: 100%; }
.ha-cheek-status { font-size: 0.72rem; line-height: 1.45; color: var(--color-text-primary); margin-block: 0.65rem; }

/* Scoped to the optional HA workspace; toxin layout and owner panels stay intact. */
@media (min-width: 1025px) {
  .ha-cheek-workspace .visualizer-container {
    position: sticky; top: 77px; height: calc(100dvh - 93px); min-height: 0;
    align-self: start; z-index: 2;
  }
  .ha-cheek-workspace .main-content > .sidebar,
  .ha-cheek-workspace .main-content > .planner-panel { overflow-anchor: none; }
}
.ha-cheek-direct { position: absolute; inset: 0; pointer-events: none; z-index: 55; }
.ha-cheek-direct[hidden], .ha-cheek-direct [hidden] { display: none !important; }
.ha-cheek-compare {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px; border-radius: 9px;
  background: var(--color-bg-panel, #101827); border: 1px solid var(--color-filler, #06b6d4);
  pointer-events: auto; white-space: nowrap;
}
.ha-cheek-compare button {
  min-height: 34px; padding: 5px 9px; font: inherit; font-size: 0.73rem;
  border-radius: 6px; border: 1px solid var(--border-glass-active, #374151);
  color: var(--color-text-primary, #fff); background: var(--color-bg-panel, #101827); cursor: pointer;
}
.ha-cheek-compare button[aria-pressed="true"] { border-color: #06b6d4; background: rgba(6,182,212,.18); }
.ha-cheek-drag-hint {
  position: absolute; bottom: 6px; left: 15%; right: 3%; margin: 0; text-align: right;
  color: #a5f3fc; font-size: 0.65rem; text-shadow: 0 1px 3px #000;
}
.ha-cheek-center {
  position: absolute; transform: translate(-50%,-50%); width: 32px; height: 32px;
  border: 2px solid #cffafe; border-radius: 50%; color: #fff; background: #087e96;
  box-shadow: 0 0 0 4px rgba(6,182,212,.18); font-weight: 800;
  cursor: grab; touch-action: none; pointer-events: auto;
}
.ha-cheek-center:active { cursor: grabbing; }
.ha-cheek-center:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
@media (max-width: 700px) {
  .ha-cheek-compare { bottom: 47px; }
  .ha-cheek-compare button { font-size: .65rem; padding: 4px 6px; }
  .ha-cheek-drag-hint { left: 3%; font-size: .6rem; }
}