/* Calibration modal: fit a normal browser viewport without vertical scroll. */
.modal-card.calibration-modal{
  width:min(1440px,calc(100vw - 24px));
  height:calc(100dvh - 24px);
  max-height:calc(100dvh - 24px);
}
.calibration-modal>header{
  flex:0 0 auto;
  padding:8px 14px;
  gap:10px;
}
.calibration-modal>header>div{min-width:0}
.calibration-modal>header .eyebrow{font-size:9px;letter-spacing:.08em}
.calibration-modal>header h2{
  margin:2px 0 0;
  font-size:16px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calibration-modal>header .icon-button{
  flex:0 0 auto;
  margin-left:auto;
  width:34px;
  height:34px;
  font-size:22px;
  line-height:1;
}
.calibration-modal>footer{
  flex:0 0 auto;
  position:relative;
  z-index:5;
  padding:10px 14px;
}
.calibration-modal .modal-body{
  flex:1 1 auto;
  min-height:0;
  padding:10px;
  overflow:hidden;
}
.calibration-layout{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,300px);
  gap:10px;
  align-items:stretch;
}
.calibration-workspace,
.calibration-sidebar{
  min-height:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(8,16,31,.86);
}
.calibration-workspace{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.calibration-toolbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.calibration-toolbar>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.calibration-toolbar strong,
.calibration-toolbar small{display:block}
.calibration-toolbar strong{font-size:12px}
.calibration-toolbar small{color:var(--muted);font-size:9px}
.calibration-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#637187;box-shadow:0 0 0 4px rgba(99,113,135,.12);
}
.calibration-live-dot.active{
  background:var(--green);
  box-shadow:0 0 0 4px rgba(119,231,165,.12),0 0 14px rgba(119,231,165,.65);
}
.calibration-stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  aspect-ratio:auto;
  overflow:hidden;
  border:0;
  background:#010407;
  touch-action:none;
}
.calibration-viewport{
  position:absolute;inset:0;
  width:100%;height:100%;
  transform-origin:center center;
  will-change:transform;
  touch-action:none;
}
.calibration-stage img,
.calibration-viewport img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}
.analytics-overlay{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:2;
  touch-action:none;
}
.analytics-zone{
  fill:rgba(136,95,238,.14);stroke:#9f7aff;stroke-width:3;
  stroke-dasharray:9 7;vector-effect:non-scaling-stroke;transition:.15s;
}
.analytics-zone.active{fill:rgba(119,231,165,.14);stroke:var(--green)}
.analytics-line{
  stroke:#45bff0;stroke-width:4;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(69,191,240,.55));transition:.15s;
}
.analytics-line.active{
  stroke:var(--green);stroke-width:7;
  filter:drop-shadow(0 0 12px rgba(119,231,165,.9));
}
.calibration-handle{cursor:grab;stroke:#07101d;stroke-width:3;vector-effect:non-scaling-stroke}
.calibration-handle:active{cursor:grabbing}
.zone-handle{fill:#a783ff}
.line-handle{fill:#62d8ff}
.overlay-label{
  paint-order:stroke;stroke:#06101c;stroke-width:6;stroke-linejoin:round;
  fill:#fff;font-size:16px;font-weight:900;pointer-events:none;
}
.analytics-track rect{
  fill:rgba(255,197,89,.07);stroke:#ffc65d;stroke-width:3;vector-effect:non-scaling-stroke;
}
.analytics-track text{
  paint-order:stroke;stroke:#06101c;stroke-width:5;fill:#ffc65d;font-size:17px;font-weight:900;
}
.analytics-track.confirmed rect{fill:rgba(119,231,165,.08);stroke:var(--green)}
.analytics-track.confirmed text{fill:var(--green)}
.calibration-legend{
  flex:0 0 auto;
  display:flex;flex-wrap:wrap;gap:12px;
  padding:6px 10px;
  border-top:1px solid var(--line);
  color:var(--muted);font-size:9px;
}
.calibration-legend span{display:flex;align-items:center;gap:6px}
.calibration-legend i,.calibration-item>i{width:10px;height:10px;border-radius:3px}
.calibration-legend .track{border:2px solid var(--green);background:rgba(119,231,165,.12)}
.calibration-legend .demographic{border:2px solid #62d8ff;background:rgba(98,216,255,.12)}
.calibration-legend .zone,.calibration-item>.zone{border:2px dashed #a783ff;background:rgba(167,131,255,.14)}
.calibration-legend .line,.calibration-item>.line{height:3px;background:#62d8ff}
.calibration-legend .trigger{background:var(--green);box-shadow:0 0 8px var(--green)}
.calibration-workspace .snapshot-progress{padding:0 10px 8px}
.calibration-sidebar{padding:10px;overflow:auto}
.calibration-live-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.calibration-live-metrics div,
.calibration-status-card{
  padding:9px;border:1px solid var(--line);border-radius:10px;background:#101d31;
}
.calibration-live-metrics span,
.calibration-status-card span,
.calibration-status-card small{display:block;color:var(--muted);font-size:8px}
.calibration-live-metrics strong{display:block;margin-top:5px;font-size:17px}
.calibration-status-card{margin-top:8px}
.calibration-status-card strong{display:block;margin:5px 0 3px;font-size:12px}
.calibration-status-card small{line-height:1.4}
.calibration-controls{margin:10px 0}
.calibration-list-head{
  display:flex;align-items:center;justify-content:space-between;margin:10px 2px 6px;
}
.calibration-list-head strong{font-size:11px}
.calibration-items{display:grid;gap:6px}
.calibration-item{
  display:grid;grid-template-columns:13px minmax(0,1fr) auto auto;
  align-items:center;gap:6px;padding:6px;
  border:1px solid var(--line-soft);border-radius:9px;background:#0e1a2c;
}
.calibration-item input,.calibration-item select{height:30px;padding:0 7px;font-size:9px}
.calibration-item button{
  width:28px;height:28px;border:1px solid var(--line);border-radius:7px;
  background:#17132b;color:#c7b8df;cursor:pointer;
}
.calibration-item button:disabled{opacity:.3}
.calibration-help{margin:10px 2px 2px;color:var(--muted);font-size:9px;line-height:1.5}
.calibration-view-controls{display:flex!important;gap:4px!important}
.calibration-view-controls .button{min-width:32px;padding:6px 8px}

.calibration-workspace:fullscreen{
  width:100vw;height:100vh;padding:12px;background:#050a12;
}
.calibration-workspace:fullscreen .calibration-stage,
.calibration-fullscreen-fallback .calibration-stage{min-height:calc(100vh - 120px)}
.calibration-fullscreen-fallback{
  position:fixed!important;inset:0!important;z-index:10000!important;
  width:100vw!important;height:100vh!important;padding:12px!important;background:#050a12!important;
}

@media(max-width:1050px){
  .modal-card.calibration-modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .calibration-modal .modal-body{overflow:auto}
  .calibration-layout{height:auto;min-height:0;grid-template-columns:1fr}
  .calibration-stage{min-height:42vh}
  .calibration-sidebar{overflow:visible;max-height:none}
}
@media(max-width:620px){
  .calibration-modal .modal-body{padding:8px}
  .calibration-layout{gap:8px}
  .calibration-stage{min-height:38vh}
  .calibration-toolbar{align-items:flex-start;flex-direction:column}
  .calibration-live-metrics{grid-template-columns:repeat(3,1fr)}
  .calibration-item{grid-template-columns:12px minmax(0,1fr) auto}
  .calibration-item select{grid-column:2}
  .calibration-modal>footer{flex-wrap:wrap}
  .calibration-modal>footer .button{flex:1}
}