.v2-perimeter-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.v2-perimeter-overlay * { pointer-events: none; }
.v2-perimeter-overlay__shape {
  fill: rgb(56 189 248 / 8%);
  stroke: #38bdf8;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* A crisp dark outline keeps the same hue visible on bright and dark video. */
  filter: drop-shadow(1px 0 0 #020617) drop-shadow(-1px 0 0 #020617) drop-shadow(0 1px 0 #020617) drop-shadow(0 -1px 0 #020617);
}
polyline.v2-perimeter-overlay__shape { fill: none; }
.v2-perimeter-overlay__shape--draft { stroke: #fbbf24; fill: rgb(251 191 36 / 6%); stroke-dasharray: 7 5; }
.v2-perimeter-overlay__shape--shadow { stroke: #c4b5fd; fill: rgb(196 181 253 / 6%); }
/* Operational state belongs to the label and pattern, not a flashing hue. */
.v2-perimeter-overlay__shape--inactive { stroke: #38bdf8; fill: rgb(56 189 248 / 4%); stroke-dasharray: 3 4; stroke-opacity: .85; }
.v2-perimeter-overlay__label { fill: #e0f2fe; stroke: #020617; stroke-width: 3px; paint-order: stroke; font: 600 11px/1.2 sans-serif; }
.v2-perimeter-overlay__label--draft { fill: #fde68a; }
.v2-perimeter-overlay__label--shadow { fill: #ddd6fe; }
.v2-perimeter-overlay__label--inactive { fill: #bae6fd; }
.v2-perimeter-monitoring-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  min-width: 0;
  padding: .7rem 1rem;
  color: var(--v2-text, #e5e7eb);
  background: var(--v2-surface, #172033);
  border-bottom: 1px solid var(--v2-border, #334155);
  font-size: .78rem;
}
.v2-perimeter-monitoring-controls button { min-height: 40px; max-width: 100%; white-space: normal; }
.v2-perimeter-monitoring-controls [hidden] { display: none !important; }
.v2-perimeter-monitoring-controls [aria-pressed="false"] { opacity: .75; }
.v2-perimeter-monitoring-status { flex: 1 1 18rem; overflow-wrap: anywhere; }
/* The region owns positioning. Shared toast rules can leave a relative inline
   offset on its children, shifting a full-width alert outside mobile screens. */
body.v2-body .portal-toast[data-perimeter-monitoring-toast] {
  inset: auto;
  inset-inline: auto;
}
.v2-perimeter-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.v2-perimeter-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.v2-perimeter-legend i { width: 1.4rem; border-top: 2px solid #38bdf8; }
.v2-perimeter-legend i.is-draft { border-top-style: dashed; border-color: #fbbf24; }
.v2-perimeter-legend i.is-shadow { border-color: #c4b5fd; }
.v2-perimeter-legend i.is-inactive { border-color: #38bdf8; border-top-style: dashed; opacity: .85; }
.v2-perimeter-overlay-status { flex-basis: 100%; margin: 0; font-size: .75rem; }
.v2-perimeter-inline-toggle { display: none; position: absolute; z-index: 5; bottom: 1rem; right: 1rem; min-height: 40px; padding: .5rem .8rem; color: #fff; background: #020617d9; border: 1px solid #64748b; border-radius: .5rem; cursor: pointer; }
:is(.recorder-panel-stream-shell:fullscreen, .recorder-panel-stream-shell--pseudo-fullscreen) .v2-perimeter-inline-toggle { display: block; }
.v2-perimeter-inline-toggle[aria-pressed="false"] { color: #94a3b8; }
.v2-monitoring-player .v2-perimeter-monitoring-controls { position: relative; z-index: 6; flex: 0 0 auto; }
.v2-perimeter-player-menu { position: absolute; z-index: 8; top: 12px; right: 12px; width: min(32rem, calc(100% - 24px)); color: #e5e7eb; font-size: .8rem; }
.v2-perimeter-player-menu > summary { width: fit-content; margin-left: auto; padding: .6rem .8rem; border: 1px solid #475569; border-radius: .5rem; background: rgb(2 6 23 / 88%); cursor: pointer; }
.v2-perimeter-player-menu[open] > summary { margin-bottom: .35rem; }
.v2-perimeter-player-menu .v2-perimeter-monitoring-controls { max-height: 50vh; overflow-y: auto; border-radius: .5rem; box-shadow: 0 .5rem 2rem #0008; }
@media (max-width: 720px) {
  /* The existing fullscreen player keeps 56px top padding beneath its 88px
     mobile header. Clear that header without resizing or cropping the video. */
  .v2-tile-player:not(.v2-tile-player--embed):is(:fullscreen, .is-pseudo-fullscreen) .v2-perimeter-player-menu { top: 32px; }
}
.v2-tile-player--embed .v2-perimeter-monitoring-controls { padding: .35rem .6rem; font-size: .7rem; }
.v2-tile-player--embed .v2-perimeter-monitoring-controls button { min-height: 32px; padding: .2rem .6rem; }
.v2-perimeter-capture__main { width: min(100%, 1280px); margin: 0 auto; padding: clamp(.75rem, 3vw, 1.5rem); }
.v2-perimeter-capture__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.v2-perimeter-capture__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem 1rem; overflow-wrap: anywhere; }
.v2-perimeter-capture__meta > div { display: grid; align-content: start; gap: .25rem; }
.v2-perimeter-capture__meta dd { margin: 0; }
.v2-perimeter-capture__image { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #020617; }
.v2-perimeter-capture__image[hidden] { display: none; }
.v2-perimeter-capture__history { margin-top: 1rem; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .v2-perimeter-monitoring-controls { gap: .4rem .6rem; padding: .5rem .65rem; }
  .v2-perimeter-monitoring-status { flex-basis: 100%; }
  .v2-perimeter-legend { font-size: .7rem; }
  .v2-perimeter-capture__meta { grid-template-columns: 1fr; }
}