/* Phase 3 video monitoring */
.phase3-video-page { gap: var(--space-md); }
.phase3-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); flex: 0 0 104px; }
.phase3-summary-card { position: relative; min-width: 0; padding: var(--space-md) var(--space-lg); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.phase3-summary-card::before { content: ""; position: absolute; top: 0; left: 0; width: 72px; height: 2px; background: linear-gradient(90deg, var(--color-primary), transparent); }
.phase3-summary-card__label { color: var(--color-text-tertiary); font-size: var(--text-small); }
.phase3-summary-card__value { margin-top: 5px; color: var(--color-text-primary); font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1; }
.phase3-summary-card__unit { margin-left: 5px; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--text-small); font-weight: 400; }
.phase3-summary-card__note { margin-top: 6px; overflow: hidden; color: var(--color-text-tertiary); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.phase3-summary-card.is-warning::before { background: linear-gradient(90deg, var(--color-warning), transparent); }
.phase3-summary-card.is-danger::before { background: linear-gradient(90deg, var(--color-danger), transparent); }
.phase3-workspace { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(360px, .72fr); gap: var(--space-md); min-height: 0; }
.phase3-video-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding-bottom: var(--space-md); }
.phase3-card-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.phase3-card-heading__left { display: flex; align-items: center; min-width: 0; }
.phase3-card-heading__left::before { content: ""; width: 4px; height: 22px; margin-right: var(--space-sm); border-radius: 2px; background: var(--color-primary); }
.phase3-card-heading__title { color: var(--color-text-primary); font-size: var(--text-h3); font-weight: 700; }
.phase3-card-heading__meta { margin-left: var(--space-sm); color: var(--color-text-tertiary); font-size: var(--text-micro); }
.phase3-split-controls { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--radius-sm); background: var(--color-bg-elevated); }
.phase3-control-btn, .phase3-protocol-btn, .phase3-tab-btn { min-height: 32px; padding: 0 11px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--text-small); cursor: pointer; }
.phase3-control-btn:hover, .phase3-protocol-btn:hover, .phase3-tab-btn:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.phase3-control-btn.is-active, .phase3-protocol-btn.is-active, .phase3-tab-btn.is-active { color: var(--color-primary); border-color: var(--color-primary-border); background: var(--color-success-bg); }
.phase3-video-toolbar { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-sm); }
.phase3-video-toolbar__hint { color: var(--color-text-tertiary); font-size: var(--text-micro); }
.phase3-video-toolbar__spacer { flex: 1; }
.phase3-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-glow); animation: phase3-pulse 1.8s ease-in-out infinite; }
.phase3-video-grid { display: grid; flex: 1; gap: 8px; min-height: 0; }
.phase3-video-grid[data-split="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.phase3-video-grid[data-split="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.phase3-video-grid[data-split="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.phase3-video-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #0a1217; cursor: pointer; outline: none; }
.phase3-video-tile:hover, .phase3-video-tile:focus-visible, .phase3-video-tile.is-selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 14px var(--color-primary-glow); }
.phase3-video-scene { position: absolute; inset: 0; overflow: hidden; background-color: #10221d; }
.phase3-video-scene::before, .phase3-video-scene::after { content: ""; position: absolute; pointer-events: none; }
.phase3-video-scene--field { background: radial-gradient(circle at 82% 18%, rgba(242,190,79,.55) 0 3%, transparent 3.5%), linear-gradient(174deg, transparent 0 45%, rgba(20,102,70,.5) 46% 49%, transparent 50% 57%, rgba(20,102,70,.55) 58% 61%, transparent 62%), linear-gradient(180deg, #294f5a 0 43%, #173d2f 44% 100%); }
.phase3-video-scene--field::before { left: -10%; right: -10%; bottom: -15%; height: 62%; transform: perspective(220px) rotateX(48deg); background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(53,178,113,.55) 10% 13%, transparent 14% 21%); }
.phase3-video-scene--warehouse { background: linear-gradient(180deg, #27333c 0 68%, #141b20 69%); }
.phase3-video-scene--warehouse::before { inset: 13% 8% 25%; border: 3px solid rgba(151,177,174,.55); background: repeating-linear-gradient(180deg, rgba(25,36,42,.6) 0 27%, rgba(133,107,64,.75) 28% 40%, rgba(25,36,42,.6) 41% 56%); box-shadow: inset 28px 0 rgba(3,8,12,.28), inset -28px 0 rgba(3,8,12,.28); }
.phase3-video-scene--processing { background: linear-gradient(180deg, #33414a 0 62%, #182128 63%); }
.phase3-video-scene--processing::before { left: 8%; right: 8%; bottom: 20%; height: 25%; border: 2px solid #65747c; border-radius: 8px; background: repeating-linear-gradient(90deg, #2a343b 0 10%, #5e6b72 11% 13%); transform: perspective(260px) rotateX(52deg); }
.phase3-video-scene--processing::after { left: 28%; top: 13%; width: 22%; height: 42%; border: 3px solid #68777d; border-radius: 7px 7px 2px 2px; background: linear-gradient(90deg,#273239,#48565d,#273239); }
.phase3-video-scene--high { background: radial-gradient(ellipse at 48% 48%, rgba(38,121,79,.85) 0 18%, transparent 19%), repeating-linear-gradient(33deg, rgba(29,110,71,.7) 0 9%, rgba(48,139,87,.75) 10% 17%, rgba(22,72,59,.9) 18% 26%); }
.phase3-video-scene--high::before { inset: -30%; border: 2px dashed rgba(215,225,214,.32); border-radius: 44%; transform: rotate(-18deg); }
.phase3-video-scene--offline { filter: grayscale(1) brightness(.48); }
.phase3-video-scene--offline::after { inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 2px 5px); }
.phase3-video-scan { position: absolute; z-index: 2; left: 0; right: 0; top: -2px; height: 2px; background: linear-gradient(90deg, transparent, rgba(93,227,168,.72), transparent); animation: phase3-scan 5s linear infinite; }
.phase3-video-tile.is-paused .phase3-video-scan { animation-play-state: paused; opacity: .25; }
.phase3-camera-icon { position: absolute; z-index: 1; left: 50%; top: 50%; width: 74px; height: 74px; transform: translate(-50%,-50%); color: rgba(222,238,231,.25); }
.phase3-video-tile[data-status="offline"] .phase3-camera-icon { color: rgba(255,255,255,.38); }
.phase3-video-top { position: absolute; z-index: 4; top: 8px; left: 9px; right: 9px; display: flex; justify-content: space-between; gap: 8px; }
.phase3-video-label { min-width: 0; overflow: hidden; color: #edf7f2; font-size: var(--text-small); font-weight: 600; text-shadow: 0 1px 3px #000; text-overflow: ellipsis; white-space: nowrap; }
.phase3-status-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 2px 7px; border-radius: 999px; color: #ddfff0; background: rgba(9,117,77,.72); font-size: 11px; }
.phase3-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.phase3-status-badge.is-delay { color: #fff3d4; background: rgba(174,100,14,.78); }
.phase3-status-badge.is-offline { color: #ffe4e4; background: rgba(151,42,46,.8); }
.phase3-video-bottom { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 24px 9px 8px; color: #d8e6df; background: linear-gradient(transparent, rgba(3,9,12,.82)); font-family: var(--font-mono); font-size: 11px; }
.phase3-video-location { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase3-video-time { flex-shrink: 0; }
.phase3-video-offline-copy { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; font-size: var(--text-body); font-weight: 700; text-align: center; text-shadow: 0 2px 5px #000; }
.phase3-video-footer { display: flex; align-items: center; gap: var(--space-xs); min-height: 38px; padding-top: var(--space-sm); }
.phase3-selected-stream { min-width: 0; overflow: hidden; color: var(--color-text-secondary); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.phase3-selected-stream strong { color: var(--color-text-primary); }
.phase3-video-footer__spacer { flex: 1; }
.phase3-side { display: grid; grid-template-rows: minmax(270px, .8fr) minmax(0, 1.2fr); gap: var(--space-md); min-width: 0; min-height: 0; }
.phase3-side-card { display: flex; flex-direction: column; min-height: 0; padding-bottom: var(--space-md); }
.phase3-map-wrap { position: relative; flex: 1; min-height: 0; margin-top: var(--space-sm); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-elevated); }
.phase3-map-svg { width: 100%; height: 100%; }
.phase3-map-region { fill: var(--color-success-bg); stroke: var(--color-primary-border); stroke-width: 1.5; stroke-dasharray: 6 4; }
.phase3-map-road { fill: none; stroke: var(--color-border-strong); stroke-width: 5; opacity: .45; }
.phase3-map-camera { cursor: pointer; outline: none; }
.phase3-map-camera circle:first-child { fill: var(--color-bg-surface); stroke: var(--color-primary); stroke-width: 2; transition: r var(--duration-fast), filter var(--duration-fast); }
.phase3-map-camera:hover circle:first-child, .phase3-map-camera:focus circle:first-child, .phase3-map-camera.is-selected circle:first-child { r: 11; filter: drop-shadow(0 0 5px var(--color-primary)); }
.phase3-map-camera[data-status="delay"] circle:first-child { stroke: var(--color-warning); }
.phase3-map-camera[data-status="offline"] circle:first-child { stroke: var(--color-danger); }
.phase3-map-camera circle:last-child { fill: var(--color-primary); }
.phase3-map-camera[data-status="delay"] circle:last-child { fill: var(--color-warning); }
.phase3-map-camera[data-status="offline"] circle:last-child { fill: var(--color-danger); }
.phase3-map-legend { position: absolute; left: 8px; bottom: 7px; display: flex; gap: 11px; padding: 5px 8px; border-radius: 5px; color: var(--color-text-secondary); background: var(--color-visual-label-bg); font-size: 10px; }
.phase3-map-legend span { display: inline-flex; align-items: center; gap: 4px; }
.phase3-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.phase3-map-legend .delay { background: var(--color-warning); }
.phase3-map-legend .offline { background: var(--color-danger); }
.phase3-side-tabs { display: flex; gap: 5px; margin: var(--space-sm) 0; padding: 3px; border-radius: var(--radius-sm); background: var(--color-bg-elevated); }
.phase3-tab-btn { flex: 1; }
.phase3-directory { display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.phase3-directory-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-elevated); cursor: pointer; }
.phase3-directory-item:hover, .phase3-directory-item.is-selected { border-color: var(--color-primary-border); background: var(--color-bg-hover); }
.phase3-directory-item.is-selected { box-shadow: inset 3px 0 0 var(--color-primary); }
.phase3-directory-item__name { overflow: hidden; color: var(--color-text-primary); font-size: var(--text-small); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.phase3-directory-item__meta { margin-top: 3px; overflow: hidden; color: var(--color-text-tertiary); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.phase3-directory-item__side { text-align: right; }
.phase3-directory-item__time { margin-top: 5px; color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: 10px; }
.phase3-event-level { display: inline-flex; padding: 2px 7px; border-radius: 999px; color: var(--color-warning); background: var(--color-warning-bg); font-size: 10px; }
.phase3-event-level.is-danger { color: var(--color-danger); background: var(--color-danger-bg); }
.phase3-event-level.is-normal { color: var(--color-primary); background: var(--color-success-bg); }
.phase3-stream-note { display: none; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); padding: 8px 10px; border: 1px solid var(--color-primary-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); background: var(--color-success-bg); font-size: var(--text-micro); }
.phase3-stream-note.is-visible { display: flex; }
.phase3-stream-note strong { color: var(--color-primary); }
@keyframes phase3-scan { from { transform: translateY(0); } to { transform: translateY(680px); } }
@keyframes phase3-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .phase3-video-scan, .phase3-live-dot { animation: none; } }
:root[data-theme="light"] .phase3-video-tile { background: #16251f; }
:root[data-theme="light"] .phase3-map-legend { color: #486057; background: rgba(255,255,255,.9); box-shadow: 0 1px 5px rgba(34,62,51,.12); }
:root[data-theme="light"] .phase3-summary-card, :root[data-theme="light"] .phase3-side-card, :root[data-theme="light"] .phase3-video-card { background: rgba(255,255,255,.94); }