.observation-v5 {
    --obs-cyan:#48c8f1;
    --obs-mint:#39d8b6;
    --obs-muted:#9eb0c2;
    width:min(100% - 3rem,1180px);
    margin:0 auto;
    padding:clamp(2rem,4vw,4.5rem) 0 4rem;
}

.observation-v5-header { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.observation-v5-kicker { display:block; margin-bottom:.55rem; color:var(--obs-mint); font-size:.72rem; font-weight:750; letter-spacing:.14em; }
.observation-v5-header h1 { margin:0; color:#fff; font-size:clamp(2.35rem,6vw,4.8rem); line-height:.98; letter-spacing:-.055em; }
.observation-v5-header p { max-width:66ch; margin:1rem 0 0; color:var(--obs-muted); line-height:1.65; }
.observation-v5-back { flex:0 0 auto; padding:.7rem 1rem; border:1px solid rgba(72,200,241,.22); border-radius:999px; color:#cbe6f4; background:rgba(72,200,241,.06); font-size:.8rem; font-weight:650; text-decoration:none; }

.observation-v5 .observation-tabs-container { margin:0; padding:0; overflow:hidden; border:1px solid rgba(116,180,221,.16); border-radius:22px; background:rgba(7,30,50,.84); box-shadow:0 24px 70px rgba(0,8,20,.18); }
.observation-v5 .tab-buttons-observation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; margin:0; padding:.7rem; overflow:visible; border-bottom:1px solid rgba(116,180,221,.13); background:rgba(255,255,255,.018); }
.observation-v5 .tab-button-observation { justify-content:center; gap:.55rem; margin:0; padding:.85rem .7rem; border:1px solid transparent; border-radius:13px; color:#aebdca; background:transparent; font-size:.8rem; font-weight:650; }
.observation-v5 .tab-button-observation:hover { color:#fff; background:rgba(72,200,241,.07); }
.observation-v5 .tab-button-observation.active { border-color:rgba(72,200,241,.22); color:#fff; background:linear-gradient(135deg,rgba(72,200,241,.16),rgba(57,216,182,.08)); }
.observation-v5 .tab-content-observation { padding:clamp(1rem,2.5vw,1.75rem); }

.observation-v5 .webcam-main-section { margin:0 0 1rem; }
.observation-v5 .webcam-featured { padding:0; overflow:hidden; border:1px solid rgba(116,180,221,.14); border-radius:18px; background:#050d16; }
.observation-v5 .webcam-large { display:block; width:auto; max-width:100%; height:auto; max-height:none; margin:0 auto; object-fit:contain; }
.observation-v5 .webcam-caption { margin:0; padding:.85rem 1rem; color:var(--obs-muted); background:rgba(7,30,50,.94); font-size:.72rem; text-align:left; }
.observation-v5 .webcam-history-section,.observation-v5 .webcam-video-section { margin-top:1.25rem; padding:1rem; border:1px solid rgba(116,180,221,.13); border-radius:17px; background:rgba(255,255,255,.022); }
.observation-v5 .subsection-title { margin:0 0 .9rem; color:#fff; font-size:.92rem; }
.observation-v5 .webcam-history-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.observation-v5 .history-image-item { overflow:hidden; border:1px solid rgba(116,180,221,.14); border-radius:12px; background:#071522; }
.observation-v5 .webcam-thumb { display:block; width:100%; height:auto; aspect-ratio:2048/1228; object-fit:cover; transition:filter 180ms ease; }
.observation-v5 .webcam-thumb:hover { filter:brightness(1.08); }
.observation-v5 .video-container { overflow:hidden; border-radius:13px; background:#030a11; }
.observation-v5 .video-container video { display:block; width:100%; max-height:70vh; }
.observation-v5-video-link { display:inline-block; margin-top:.8rem; color:var(--obs-cyan); font-size:.74rem; font-weight:650; text-decoration:none; }
.observation-v5-video-link:hover { color:#9be7ff; }

.observation-v5 .observation-embeds-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.observation-v5 .embed-card,.observation-v5 .radiosondeo-diagram { margin:0; padding:1rem; border:1px solid rgba(116,180,221,.14); border-radius:16px; background:rgba(255,255,255,.025); }
.observation-v5 .embed-card:hover { transform:none; border-color:rgba(72,200,241,.3); }
.observation-v5 .card-subtitle { margin:0 0 .8rem; color:#fff; font-size:.9rem; }
.observation-v5 .embed-link { display:inline-block; margin-top:.75rem; color:var(--obs-cyan); font-size:.74rem; }
.observation-v5 .radar-windy-embed { overflow:hidden; border-radius:12px; }
.observation-v5 .radiosondeo-img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; border-radius:12px; }

@media (max-width:1024px) {
    .observation-v5 { padding-top:5.5rem; }
    .observation-v5 .tab-buttons-observation { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:768px) {
    .observation-v5 { width:min(100% - 1.25rem,1180px); padding-top:3.75rem; }
    .observation-v5-header { align-items:flex-start; flex-direction:column; gap:1rem; }
    .observation-v5 .tab-buttons-observation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
    .observation-v5 .tab-button-observation { justify-content:center; border:1px solid transparent; padding:.72rem .35rem; font-size:.7rem; white-space:normal; }
    .observation-v5 .tab-button-observation.active { border:1px solid rgba(72,200,241,.22); }
    .observation-v5 .webcam-history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .observation-v5 .observation-embeds-grid { grid-template-columns:1fr; }
}

@media (max-width:420px) {
    .observation-v5 .tab-button-observation svg { width:17px; height:17px; }
    .observation-v5 .tab-content-observation { padding:.7rem; }
    .observation-v5 .webcam-history-grid { grid-template-columns:1fr; }
}
