.ha-region-panel { border: 1px solid #22d3ee; border-radius: 10px; padding: 12px; margin-bottom: 20px; }
.ha-region-panel[hidden], .ha-region-overlay[hidden], .ha-region-overlay [hidden] { display: none !important; }
.ha-region-workspace #prepared-ha-cheek-pilot { display: none !important; }
.ha-region-workspace .anatomy-animation-card > .panel-title,
.ha-region-workspace .anatomy-animation-card > .panel-subtitle,
.ha-region-workspace .anatomy-animation-card > .simulation-evidence-notice { display: none; }
.ha-region-panel h3 { font-size: .9rem; margin-bottom: 10px; }
.ha-region-panel p { font-size: .72rem; line-height: 1.5; color: var(--color-text-secondary); margin: 10px 0; }
.ha-region-panel label { display: block; font-size: .75rem; margin: 10px 0; }
.ha-region-panel select { display: block; width: 100%; padding: 8px; margin-top: 5px; background: var(--color-bg-panel, #101827); color: var(--color-text-primary); border: 1px solid var(--border-glass-active, #475569); border-radius: 6px; }
.ha-region-panel .ha-region-check { display: flex; gap: 8px; align-items: center; }
.ha-region-panel input[type=range] { width: 100%; display: block; margin-top: 7px; accent-color: #06b6d4; }
.ha-region-panel output { float: right; color: var(--color-filler); }
.ha-region-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ha-region-actions button { padding: 8px; min-height: 36px; border-radius: 6px; border: 1px solid #475569; background: transparent; color: var(--color-text-primary); font-size: .72rem; cursor: pointer; }
.ha-region-actions button:disabled { opacity: .4; cursor: default; }
.ha-region-actions [data-region-action=save] { border-color: #22d3ee; }
.ha-region-panel :is(button,input,select):focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.ha-region-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 56; }
.ha-region-workspace #canvas-holder { position: relative; min-height: 0; }
/* Keep the plan card above a sticky viewer when the two overlap on scroll. */
.ha-region-workspace #planned-injections { position: relative; z-index: 4; }
.ha-assessment { margin-top: 16px; padding-top: 12px; border-top: 1px solid #475569; }
.ha-assessment textarea, .ha-assessment input[type=text] { box-sizing: border-box; width: 100%; margin-top: 5px; padding: 8px; border: 1px solid #475569; border-radius: 5px; color: var(--color-text-primary); background: var(--color-bg-panel, #101827); font: inherit; }
.ha-assessment textarea { min-height: 65px; resize: vertical; }
.ha-reference { margin: 12px 0; font-size: .8rem; }
.ha-reference summary { cursor: pointer; }
.ha-reference img { width: 100%; height: auto; margin-top: 8px; border-radius: 6px; }
.ha-capture-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ha-capture-gallery figure { margin: 8px 0; min-width: 0; }
.ha-capture-gallery img { display: block; width: 100%; border: 1px solid #22d3ee; border-radius: 6px; }
.ha-capture-gallery figcaption { font-size: .68rem; overflow-wrap: anywhere; color: var(--color-text-secondary); }
.ha-region-handle[data-region-handle=boundary] { width: 23px; height: 23px; border-radius: 5px; }
.ha-region-identity { position: sticky; top: 0; z-index: 3; background: var(--color-bg-panel, #101827); border: 1px solid #22d3ee; padding: 9px; font-size: .78rem; font-weight: 700; border-radius: 6px; }
.ha-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ha-summary-grid button { min-height: 64px; white-space: pre-line; text-align: left; padding: 7px; color: var(--color-text-primary); background: var(--color-bg-panel, #101827); border: 1px solid #475569; border-radius: 6px; font-size: .7rem; cursor: pointer; }
.ha-summary-grid button[aria-pressed=true] { border-color: #22d3ee; }
.ha-region-handle { position: absolute; transform: translate(-50%,-50%); width: 29px; height: 29px; border-radius: 50%; border: 2px solid #22d3ee; background: #102331; color: white; font-size: 10px; font-weight: bold; pointer-events: auto; touch-action: none; cursor: grab; }
.ha-region-handle[data-region-handle=width], .ha-region-handle[data-region-handle=height] { border-radius: 5px; width: 24px; height: 24px; font-size: 15px; }
.ha-region-handle[aria-pressed=true] { box-shadow: 0 0 0 3px #ffffff55; }
.ha-region-handle[data-region-handle=center][data-active-region=false] { width: 14px; height: 14px; padding: 0; font-size: 7px; border-width: 1px; }
.ha-region-leader { position: absolute; height: 1px; background: #e2e8f0; transform-origin: 0 0; pointer-events: none; }
.ha-region-handle:focus-visible { outline: 3px solid white; outline-offset: 3px; }
@media (min-width:1025px) {
  .ha-region-workspace .visualizer-container { position: sticky; top: 77px; height: calc(100dvh - 93px); min-height: 0; align-self: start; z-index: 2; }
}
@media (max-width:1024px) {
  .ha-region-workspace .ha-region-compact-shell { display: flex; flex-direction: column; gap: 20px; position: sticky; top: var(--ha-region-header-offset, 125px); z-index: 2; scroll-margin-top: var(--ha-region-header-offset, 125px); }
  .ha-region-workspace .visualizer-container { position: relative; top: auto; height: 40dvh; min-height: 260px; flex-shrink: 0; z-index: 2; }
  .ha-region-workspace .ha-region-compact-shell > .ha-region-panel { background: var(--color-bg-panel, #101827); padding: 16px; margin: 0; height: 35dvh; min-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
  .ha-region-panel .ha-region-actions { grid-template-columns: 1fr 1fr; }
}