body { overflow: hidden; }
.forecast-page { display: flex; flex-direction: column; height: calc(100vh - var(--nav-height)); height: calc(100dvh - var(--nav-height)); }
.forecast-page [hidden] { display: none !important; }
.forecast-heading { padding: 0.5rem 1rem; flex-shrink: 0; border-bottom: 1px solid var(--color-border); }
.forecast-heading h1 { font-size: 1rem; }
.forecast-layout { display: flex; flex: 1; min-height: 0; }
.forecast-image-panel { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; background: #000; }
.forecast-image-panel img { width: 100%; height: 100%; object-fit: contain; }
.forecast-message { padding: 1rem 3.5rem; color: #ddd; text-align: center; }
.forecast-controls { width: 280px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; background: var(--color-surface); border-left: 1px solid var(--color-border); }
.forecast-controls label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; }
.forecast-controls select, .forecast-controls button { font: inherit; font-size: 0.8rem; padding: 0.6rem; color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.forecast-controls select { width: 100%; min-width: 0; }
.forecast-page button { cursor: pointer; }
.forecast-page button:disabled, .forecast-page select:disabled { opacity: 0.4; cursor: default; }
.forecast-controls button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.forecast-time { display: flex; flex-direction: column; gap: 0.5rem; }
.forecast-time span, .forecast-time small, .forecast-status { color: var(--color-text-muted); font-size: 0.75rem; }
.forecast-time input { width: 100%; accent-color: var(--color-accent); }
.forecast-buttons { display: flex; gap: 0.5rem; }
.forecast-buttons button { flex: 1; }
.forecast-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 1px solid #ffffff30; border-radius: var(--radius-sm); background: #0008; color: #fff; font-size: 2rem; }
.forecast-arrow--prev { left: 0.4rem; }
.forecast-arrow--next { right: 0.4rem; }
.forecast-page :is(button, select, input):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 768px) {
  body { overflow: auto; }
  .forecast-page { height: auto; min-height: calc(100dvh - var(--nav-height)); }
  .forecast-layout { flex-direction: column; }
  .forecast-image-panel { flex: none; height: max(60vw, 240px); }
  .forecast-controls { width: 100%; overflow: visible; border-left: none; border-top: 1px solid var(--color-border); }
}