.webcam-studio-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.webcam-studio-tabs button { position:relative; min-height:44px; padding:10px 14px; color:var(--text-muted); border:1px solid var(--hairline); border-radius:8px; background:var(--surface-1); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; font-size:15px; line-height:1.2; text-align:center; }
.webcam-studio-tabs .result-notification-dot { position:absolute; top:7px; right:9px; margin:0; }
.webcam-mode-tabs { margin-bottom:18px; }
/* The Studio bar has three entries (weather maps, webcam reels, vigilance explainer); the reel-type switch keeps two. */
.webcam-studio-tabs:not(.webcam-mode-tabs) { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:560px) { .webcam-studio-tabs:not(.webcam-mode-tabs) button { flex-direction:column; gap:4px; padding:8px 4px; font-size:13px; } }
.webcam-mode-tabs button { min-height:40px; font-size:14px; }
.webcam-studio-tabs .is-active { color:var(--text-primary); border-color:var(--primary-soft); background:var(--primary-bg-subdued); }
.webcam-intro { margin:0 0 20px; color:var(--text-secondary); line-height:1.6; }
.webcam-intro p { font-size:15px; margin:0; }
.webcam-intro span { display:block; font-size:12px; color:var(--text-muted); margin-top:6px; }
.webcam-workspace { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr); gap:20px; align-items:start; }
.webcam-search, .webcam-selected-copy, #webcam-controls { padding:20px; }
.webcam-search .label { margin-bottom:8px; display:block; }
.webcam-filters { display:flex; gap:10px; align-items:end; margin-top:14px; flex-wrap:wrap; }
.webcam-filter-label { flex:1; min-width:100px; font-size:12px; color:var(--text-secondary); }
.webcam-filter-label select { margin-top:6px; }
.webcam-filters .btn, .webcam-pagination .btn { min-height:44px; }
.webcam-favorites-toggle[aria-pressed="true"] { color:var(--primary-soft); border-color:var(--primary-soft); }
.webcam-count { margin-top:14px; color:var(--text-muted); font-size:12px; }
.webcam-error { color:var(--accent-red); margin-top:12px; }
.webcam-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 20px 20px; }
.webcam-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--hairline); border-radius:8px; background:var(--surface-0); }
.webcam-card.is-selected { border-color:var(--primary-soft); box-shadow:0 0 0 1px var(--primary-soft); }
.webcam-camera { display:block; width:100%; text-align:left; cursor:pointer; color:var(--text-primary); background:transparent; min-height:190px; }
.webcam-camera img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--surface-2); }
.webcam-card-copy { padding:12px; display:block; line-height:1.5; }
.webcam-card-copy strong { display:block; font-size:13px; padding-right:8px; overflow-wrap:anywhere; }
.webcam-card-copy small { display:block; color:var(--text-secondary); margin-top:3px; }
.webcam-card-copy > span { display:block; color:var(--text-muted); font-size:11px; margin-top:7px; }
.webcam-favorite { position:absolute; top:5px; right:5px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:white; background:rgba(7,20,40,.85); cursor:pointer; }
.webcam-favorite[aria-pressed="true"] { color:#ffb1cc; }
.webcam-empty { padding:36px 20px; text-align:center; grid-column:1/-1; color:var(--text-muted); line-height:1.65; }
.webcam-empty strong, .webcam-empty > i { display:block; margin:0 0 12px; color:var(--text-primary); }
.webcam-empty .btn { margin-top:15px; }
.webcam-pagination { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-top:1px solid var(--hairline); color:var(--text-muted); }
.webcam-selection { overflow:hidden; }
.webcam-selected-preview { width:100%; aspect-ratio:16/10; display:block; object-fit:contain; background:var(--surface-0); }
.webcam-selected-copy h2 { margin-top:7px; font-size:22px; line-height:1.3; overflow-wrap:anywhere; }
.webcam-selected-copy p { font-size:13px; line-height:1.6; color:var(--text-secondary); margin:8px 0; }
.webcam-player { margin:16px 0; }
.webcam-player summary { min-height:44px; cursor:pointer; padding:10px 0; }
.webcam-player iframe { width:100%; aspect-ratio:16/10; border:0; margin-top:10px; background:var(--surface-0); }
#webcam-controls { border-top:1px solid var(--hairline); }
#webcam-controls .label { display:block; margin-bottom:8px; }
#webcam-controls .btn { width:100%; margin-top:18px; min-height:48px; }
.webcam-language, .webcam-draft-note { color:var(--text-muted); font-size:12px; line-height:1.6; margin-top:12px; }
.webcam-result { margin-top:20px; padding:24px; }
.webcam-result-heading { display:flex; justify-content:space-between; gap:15px; align-items:start; margin-bottom:20px; }
.webcam-result-heading h2 { margin:7px 0; font-size:22px; }
.webcam-result-heading p { color:var(--text-muted); font-size:12px; line-height:1.6; }
.webcam-result-layout { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr); gap:24px; }
.webcam-result video { display:block; width:100%; max-height:650px; aspect-ratio:9/16; background:var(--surface-0); border-radius:8px; }
.webcam-caption { margin:15px 0; white-space:pre-wrap; line-height:1.7; color:var(--text-secondary); font-size:13px; overflow-wrap:anywhere; }
.webcam-result-actions { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.webcam-result-actions .btn { min-height:44px; }
.webcam-result details { border-top:1px solid var(--hairline); padding:12px 0; }
.webcam-result summary { cursor:pointer; min-height:44px; padding:10px 0; }
.webcam-result details p { line-height:1.7; margin:10px 0; color:var(--text-secondary); }
.webcam-shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px 0; }
.webcam-shots img { width:100%; display:block; border-radius:5px; }
.webcam-camera:focus-visible, .webcam-favorite:focus-visible, .webcam-studio-tabs button:focus-visible { outline:3px solid var(--primary-soft); outline-offset:3px; }
.webcam-workspace button:active, .webcam-result button:active { opacity:.8; }
@media(max-width:1100px) { .webcam-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .webcam-workspace { grid-template-columns:minmax(0,1fr); } .webcam-result-layout { grid-template-columns:minmax(0,1fr); } .webcam-result video { max-height:600px; } .webcam-result { padding:18px; } .webcam-result-heading { flex-wrap:wrap; } }
@media(max-width:400px) { .webcam-gallery { gap:8px; padding:0 12px 12px; } .webcam-search { padding:16px 12px; } .webcam-card-copy { padding:10px; } .webcam-card-copy small { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .webcam-workspace *, .webcam-result * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

.webcam-queue-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary, #a9b4c2); }
.webcam-queue-note i { margin-top: 2px; color: var(--primary-soft, #8ab4ff); }

.region-picker { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.region-picker__hint { margin: 4px 0 8px; font-size: 13px; color: var(--text-muted); }
.region-options { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; padding-right: 2px; }
.region-option { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hairline); border-radius: 8px; cursor: pointer; }
.region-option input { width: 18px; height: 18px; accent-color: var(--primary-soft, #8ab4ff); }
.region-option small { color: var(--text-muted); }
.region-option__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.region-option__date { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: var(--primary-bg-subdued); color: var(--primary-soft); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.region-option.is-selected { border-color: var(--primary-soft); background: var(--primary-bg-subdued); }
.region-option:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.region-option:focus-within { outline: 3px solid var(--primary-soft); outline-offset: 2px; }

#region-controls { padding:20px; }
#region-controls .label { display:block; margin:0 0 8px; }
#region-controls > .label, #region-controls > select { margin-top:16px; }
#region-controls select { display:block; width:100%; }
#region-controls .btn { width:100%; margin-top:18px; min-height:48px; }
.region-picker { margin:0; }
.region-picker legend { display:block; width:100%; padding:0; margin:0 0 4px; }
.region-picker__hint { margin:0 0 10px; }
.webcam-result ol { margin:6px 0 4px; padding:0 0 0 2.2em; line-height:1.8; font-size:14px; color:var(--text-secondary); }
.webcam-result ol li { padding-left:2px; }
@media(max-width:400px) { #region-controls { padding:16px 12px; } .webcam-studio-tabs button { padding:10px 8px; font-size:14px; } }

/* A/B opening comparison: explicit labels also distinguish variants without colour. */
.explainer-ab { margin-top:24px; padding-top:24px; border-top:1px solid var(--hairline); }
.explainer-ab__heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.explainer-ab__heading h3 { margin:6px 0 0; font-size:20px; color:var(--text-primary); }
.explainer-ab__description { margin:12px 0 18px; color:var(--text-secondary); font-size:14px; line-height:1.65; }
.explainer-ab__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.explainer-ab__variant { min-width:0; padding:14px; display:flex; flex-direction:column; gap:14px; border:1px solid var(--hairline); border-radius:12px; background:var(--surface-0); }
.webcam-result .explainer-ab__variant.alert-result--new { border-color:var(--hairline); box-shadow:none; }
.webcam-result .explainer-ab__variant[data-ab-variant="B"] { border-color:var(--primary-soft); }
.explainer-ab__variant.is-selected { outline:2px solid var(--primary-soft); outline-offset:2px; }
.explainer-ab__variant-heading { display:flex; align-items:start; gap:10px; }
.explainer-ab__letter { display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:8px; font-size:19px; font-weight:800; color:var(--text-primary); background:var(--surface-2); }
[data-ab-variant="B"] .explainer-ab__letter { color:var(--primary-soft); background:var(--primary-bg-subdued); }
.explainer-ab__variant h4 { margin:0; font-size:15px; line-height:1.5; color:var(--text-primary); }
.explainer-ab__variant p { margin:5px 0 0; font-size:13px; line-height:1.5; color:var(--text-secondary); }
.webcam-result .explainer-ab__video { width:100%; max-height:420px; margin-top:auto; object-fit:contain; }
.explainer-ab__variant .ui-video-frame { width:100%; margin-top:auto; }
.webcam-result .ui-video-frame .explainer-ab__video { width:100%; max-height:420px; object-fit:contain; }
.explainer-ab__variant .btn { width:100%; min-height:48px; white-space:normal; line-height:1.4; }
.explainer-ab__note { margin:16px 0; font-size:13px; line-height:1.65; color:var(--text-secondary); }
.explainer-ab__note i { margin-right:5px; }
@media(max-width:560px) {
  .explainer-ab__grid { gap:10px; }
  .explainer-ab__variant { padding:10px; gap:12px; }
  .explainer-ab__variant-heading { flex-direction:column; gap:8px; }
  .explainer-ab__variant h4 { font-size:14px; }
  .explainer-ab__variant .btn { padding:10px 8px; font-size:13px; }
}
@media(max-width:360px) { .explainer-ab__grid { grid-template-columns:minmax(0,1fr); } }

.explainer-workspace { display:block; }
.explainer-controls { overflow:hidden; }
.explainer-controls__heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:20px 24px; border-bottom:1px solid var(--hairline); }
.explainer-controls__heading h2 { margin:6px 0 0; font-size:20px; line-height:1.4; }
.explainer-controls__body { padding:24px; }
.explainer-controls__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.explainer-controls .label { display:block; margin:0 0 10px; }
.explainer-controls select { width:100%; min-height:48px; }
.explainer-controls .region-option { padding:12px; min-height:60px; }
.explainer-controls__footer { margin-top:24px; padding-top:20px; border-top:1px solid var(--hairline); }
.explainer-controls__footer .btn { min-height:48px; }
.explainer-controls__footer .webcam-draft-note { margin-bottom:0; }
.explainer-ab__notice { margin:16px 0; padding:14px 16px; border:1px solid var(--hairline); border-radius:8px; font-size:14px; line-height:1.6; color:var(--text-secondary); background:var(--surface-2); }
.explainer-ab__notice i { margin-right:6px; }
@media(max-width:640px) {
  .explainer-controls__heading { padding:18px; }
  .explainer-controls__body { padding:18px; }
  .explainer-controls__grid { grid-template-columns:minmax(0,1fr); gap:22px; }
  .explainer-controls__footer .btn { width:100%; }
  .explainer-controls .region-option { grid-template-columns:22px minmax(0,1fr); gap:6px 10px; }
  .explainer-controls .region-option small { grid-column:2; }
}

.explainer-ab__caption { width:100%; min-width:0; margin:0; }
.explainer-ab__caption summary { min-height:44px; padding:10px 0; cursor:pointer; font-weight:600; }
.explainer-ab__caption h5 { margin:8px 0; font-size:14px; line-height:1.5; }
.explainer-ab__caption .webcam-caption { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }