:root {
  color-scheme: light;
  --bg: #f5f8fc;
  --panel: #fff;
  --panel-soft: #f8fafc;
  --ink: #0a2548;
  --text: #1a2b40;
  --muted: #58708c;
  --border: #dee7f0;
  --accent: #ffc72a;
  --accent-ink: #17253b;
  --shadow: 0 10px 34px #24436a12;
  --map-surface: #f9fbfd;
}
body[data-theme="dark"] {
  color-scheme: dark;
  /* Neurje.si dark canvas and surface palette. */
  --bg: #1c1f23;
  --panel: #252a31;
  --panel-soft: #2d343d;
  --ink: #f6f7f9;
  --text: #e7e9ed;
  --muted: #bfc5ce;
  --border: #3b4048;
  --shadow: 0 10px 34px #0004;
  --map-surface: #e5ebf2;
}
body[data-theme="gray"] {
  color-scheme: dark;
  --bg: #272b32;
  --panel: #333b45;
  --panel-soft: #3d4651;
  --ink: #f8f8fa;
  --text: #f3f4f6;
  --muted: #c6d0dc;
  --border: #525d69;
  --shadow: 0 10px 34px #0003;
  --map-surface: #e5e8eb;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
button, select, input { font: inherit; }
button, select { cursor: pointer; }
button:disabled, select:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #237ad7; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pv-app { max-width: 1300px; margin: 0 auto; padding: 10px 16px 20px; background: var(--bg); }
.dot { margin: 0 3px; opacity: .6; }
.pv-frame { background: var(--panel); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.product-switch { display: flex; gap: 8px; }
.product { white-space: nowrap; border: 1px solid var(--border); border-radius: 9px; padding: 10px 16px; color: var(--muted); background: var(--panel-soft); font-weight: 750; font-size: 13px; transition: background .15s; }
.product:hover { color: var(--ink); }
.product.active { border-color: #ffc321; color: var(--accent-ink); background: var(--accent); }
.product-desc { font-size: 11px; font-weight: 600; opacity: .7; }
.product-desc::before { content: "· "; }
.forecast-details { display: flex; align-items: center; justify-content: center; gap: 19px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.forecast-details strong { color: var(--ink); font-size: 14px; }
.lead { font-weight: 650; font-size: 12px; }
.export { display: inline-flex; gap: 7px; align-items: center; justify-content: center; padding: 9px 15px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); color: var(--ink); font-weight: 800; }
.export:hover:not(:disabled) { background: var(--panel-soft); }
.export-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; position: relative; }
.export-gif { border-color: #f0c553; background: #fff8e5; color: #17253b; }
.export-gif:hover:not(:disabled) { background: #ffe7a0; }
.export-gif.is-working { background: #ffe29a; min-width: 94px; }
.fullscreen-toggle { width: 42px; min-width: 42px; min-height: 39px; padding: 8px; }
.fullscreen-toggle svg { display: block; width: 19px; height: 19px; }
.fullscreen-toggle .icon-collapse { display: none; }
.fullscreen-toggle[aria-pressed="true"] .icon-expand { display: none; }
.fullscreen-toggle[aria-pressed="true"] .icon-collapse { display: block; }
.export-status { position: absolute; top: calc(100% + 5px); right: 0; z-index: 9; white-space: nowrap; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 7px; padding: 5px 9px; font-size: 11px; color: var(--muted); }
.map-workspace { min-height: 570px; display: grid; grid-template-columns: 159px minmax(300px, 1fr) 196px; align-items: center; position: relative; gap: 5px; padding: 14px 18px 12px; background: var(--panel); }
.legend { height: min(482px, 100%); align-self: center; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); padding: 18px 12px; z-index: 1; }
.legend-title { color: var(--ink); text-align: center; font-size: 13px; font-weight: 900; letter-spacing: .035em; }
.legend-unit { color: var(--muted); text-align: center; font-size: 12px; margin-bottom: 25px; }
.legend-scale { display: flex; justify-content: center; align-items: stretch; gap: 13px; height: 360px; }
.legend-gradient { height: 100%; width: 33px; border: 1px solid #15314f; border-radius: 8px; box-shadow: inset 0 0 0 1px #ffffff36; background: linear-gradient(to bottom,#720019 0%,#ad0e2f 14%,#ec5e5d 27%,#fcbfa8 39%,#fafcfc 50%,#a9dff5 62%,#3b9bd5 73%,#0861ad 87%,#002b5e 100%); }
.legend-ticks { display: flex; height: 100%; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 700; padding: 0 0 1px; font-variant-numeric: tabular-nums; }
.map-column { width: 100%; min-width: 0; justify-self: center; }
.map-holder { width: min(100%, 620px); margin: 0 auto; aspect-ratio: 1; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1.5px solid #334558; background: var(--map-surface); }
.map-holder img { display: block; width: 100%; height: 100%; object-fit: contain; }
.map-placeholder { color: #244363; text-align: center; padding: 24px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 11px; background: radial-gradient(circle at 52% 40%,#eef4f9 0%,#d6e7f2 78%,#c9dfec 100%); }
.placeholder-icon { display: block; font-size: 58px; line-height: 1; color: #86afcd; }
.map-placeholder strong { font-size: 18px; }
.map-placeholder span:not(.placeholder-icon) { max-width: 310px; font-size: 13px; }
.retry { border-radius: 8px; background: #ffc72a; color: #142942; border: 0; padding: 8px 14px; font-weight: 800; margin-top: 4px; }
.loading { position: absolute; inset: 0; border-radius: 50%; border: 4px solid #0000; border-top-color: #ffc72a; animation: spin 1s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.wind-card { width: 196px; align-self: end; justify-self: end; z-index: 1; margin-bottom: 0; background: linear-gradient(120deg,#07365e,#0b466c); color: #fff; border-radius: 10px; box-shadow: 0 5px 16px #02385a25; padding: 13px 13px 10px; text-align: center; }
.wind-caption { border-bottom: 1px solid #ffffff36; font-size: 12px; padding: 0 0 8px; }
.wind-value { margin-top: 7px; line-height: 1.12; font-size: 27px; font-weight: 850; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wind-description { font-size: 12px; color: #bed3e5; margin: 4px 0 1px; }
.map-brand { position: absolute; z-index: 3; top: 19px; right: 18px; width: 164px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.map-brand img { display: block; width: 100%; height: auto; object-fit: contain; }
body[data-theme="dark"] .map-brand img, body[data-theme="gray"] .map-brand img { filter: brightness(0) invert(1); }
.info-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; align-self: flex-end; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--ink); font-weight: 750; font-size: 11px; box-shadow: 0 4px 13px #14294410; }
.info-toggle:hover, .info-toggle[aria-expanded="true"] { border-color: #deb02f; background: var(--accent); color: var(--accent-ink); }
.info-panel { position: absolute; z-index: 6; top: 112px; right: 17px; width: min(380px, calc(100% - 34px)); max-height: calc(100% - 132px); overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 15px 55px #0c2f4d32; border-radius: 13px; padding: 19px 20px 17px; }
.info-panel h2 { margin: 0 25px 10px 0; font-size: 20px; color: var(--ink); letter-spacing: -.03em; }
.info-panel p { font-size: 13px; line-height: 1.55; margin: 10px 0; }
.info-panel .info-note { font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 11px; }
.info-close { position: absolute; top: 12px; right: 13px; width: 29px; height: 29px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-soft); color: var(--ink); font-size: 20px; }
.player { border-top: 1px solid var(--border); padding: 11px 18px 5px; display: flex; gap: 20px; align-items: center; }
.player-actions { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; }
.step-btn { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; height: 39px; width: 39px; font-weight: 750; font-size: 24px; color: var(--ink); line-height: 1; }
.play-btn { background: var(--accent); border: 1px solid #e7ad06; border-radius: 9px; height: 39px; min-width: 121px; padding: 0 12px; color: var(--accent-ink); font-weight: 850; }
#play-icon { font-size: 13px; margin-right: 6px; }
#speed { padding: 10px 17px 10px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--ink); font-weight: 750; height: 39px; }
.mobile-only { display: none; }
.timeline-area { flex: 1; min-width: 0; }
input[type=range] { display: block; width: 100%; accent-color: #ffc72a; cursor: pointer; margin: 0; height: 19px; }
.timeline-labels { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; margin-top: 1px; font-variant-numeric: tabular-nums; }
.timeline-labels .current { color: #aa8100; font-weight: 900; }
.preload-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; min-height: 17px; color: var(--muted); font-size: 10px; font-weight: 650; }
.preload-track { flex: 0 0 85px; height: 3px; border-radius: 5px; background: var(--border); overflow: hidden; }
#preload-fill { display: block; width: 0%; height: 100%; background: #ffc72a; transition: width .15s ease; }
.pv-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; padding: 12px 18px 10px; font-size: 11px; color: var(--muted); }
.pv-footer strong { color: inherit; font-weight: 750; }
.explain { color: var(--muted); max-width: 1000px; margin: 12px 6px; font-size: 12px; }
/* Fullscreen works both for the viewer itself and when an enclosing iframe
   enters fullscreen (or is expanded as a same-origin fallback). */
.pv-frame:fullscreen,
html.pv-host-fullscreen .pv-frame {
  width: 100%; height: 100vh; height: 100dvh; max-width: none;
  display: flex; flex-direction: column; margin: 0; border: 0;
  border-radius: 0; overflow: hidden; background: var(--panel);
}
html.pv-host-fullscreen, html.pv-host-fullscreen body { width: 100%; height: 100%; overflow: hidden; }
html.pv-host-fullscreen .pv-app { width: 100%; max-width: none; height: 100%; padding: 0; }
.pv-frame:fullscreen .toolbar,
html.pv-host-fullscreen .toolbar { flex: 0 0 auto; flex-wrap: nowrap; }
.pv-frame:fullscreen .map-workspace,
html.pv-host-fullscreen .map-workspace {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  grid-template-columns: minmax(135px, 168px) minmax(0, 1fr) minmax(158px, 196px);
  padding: 8px 18px;
}
.pv-frame:fullscreen .map-holder,
html.pv-host-fullscreen .map-holder {
  width: min(100%, calc(100dvh - 205px), 770px);
  max-width: 100%; max-height: 100%;
}
.pv-frame:fullscreen .player,
html.pv-host-fullscreen .player { flex: 0 0 auto; }
.pv-frame:fullscreen .pv-footer,
html.pv-host-fullscreen .pv-footer { flex: 0 0 auto; }
@media (max-width: 750px) {
  .pv-frame:fullscreen .toolbar, html.pv-host-fullscreen .toolbar { flex-wrap: wrap; }
  .pv-frame:fullscreen .map-workspace, html.pv-host-fullscreen .map-workspace {
    grid-template-columns: 1fr minmax(0, 4fr); grid-template-rows: minmax(0, 1fr) auto;
    padding: 7px;
  }
  .pv-frame:fullscreen .map-holder, html.pv-host-fullscreen .map-holder {
    width: min(100%, calc(100dvh - 245px));
  }
}
@media (max-width: 1060px) {
  .toolbar { gap: 10px; }
  .map-workspace { grid-template-columns: 119px minmax(250px,1fr) 160px; min-height: 475px; padding: 10px; }
  .legend { padding: 12px 8px; height: 390px; }
  .legend-scale { height: 315px; gap: 8px; }
  .legend-gradient { width: 26px; }
  .legend-ticks { font-size: 11px; }
  .legend-unit { margin-bottom: 15px; }
  .wind-card { width: 157px; }
  .wind-value { font-size: 24px; }
  .map-brand { width: 145px; }
  .player { gap: 9px; }
}
@media (max-width: 750px) {
  .pv-app { padding: 10px 8px 20px; }
  .toolbar { padding: 9px; }
  .product-switch { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product { padding: 9px 4px; font-size: 11px; min-width: 0; white-space: normal; }
  .product-desc { display: none; }
  .forecast-details { flex: 1; gap: 3px 13px; justify-content: flex-start; font-size: 11px; }
  .forecast-details strong { font-size: 12px; }
  .export { padding: 7px 10px; }
  .export-actions { gap: 5px; }
  .map-workspace { display: grid; grid-template-columns: 1fr minmax(0, 4fr); grid-template-rows: auto auto; gap: 7px; min-height: unset; padding: 9px 7px 5px; }
  .legend { grid-row: 1; grid-column: 1; padding: 6px 3px; width: 100%; min-width: 47px; height: min(68vw, 330px); }
  .legend-title { font-size: 9px; letter-spacing: -.015em; }
  .legend-unit { font-size: 9px; margin: 0 0 9px; }
  .legend-scale { height: calc(100% - 43px); gap: 5px; }
  .legend-gradient { width: 12px; border-radius: 5px; }
  .legend-ticks { font-size: 9px; }
  .map-column { grid-column: 2; grid-row: 1; }
  .map-holder { max-width: 100%; }
  .map-placeholder { padding: 12px 8px; gap: 8px; }
  .placeholder-icon { font-size: 30px; }
  .map-placeholder strong { font-size: 13px; }
  .map-placeholder span:not(.placeholder-icon) { font-size: 10px; }
  .wind-card { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: auto; display: grid; align-items: center; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 10px; padding: 8px 12px; text-align: left; }
  .wind-caption { grid-row: 1; grid-column: 1; border: none; padding: 0; font-size: 11px; }
  .wind-description { grid-row: 2; grid-column: 1; margin: 0; font-size: 10px; }
  .wind-value { grid-row: 1 / 3; grid-column: 2; margin: 0; font-size: 19px; }
  .map-brand { top: 12px; right: 9px; width: clamp(72px, 20vw, 108px); gap: 2px; }
  .info-toggle { align-self: flex-end; font-size: 0; width: 27px; height: 27px; padding: 4px; border-radius: 50%; }
  .info-toggle svg { width: 17px; height: 17px; }
  .info-panel { top: 45px; right: 7px; width: calc(100% - 14px); max-height: calc(100% - 55px); padding: 15px; }
  .player { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
  .player-actions { justify-content: space-between; }
  .mobile-only { display: inline-block; }
  .timeline-area { width: 100%; }
  .timeline-labels { font-size: 10px; }
  .preload-track { flex-basis: 70px; }
  .pv-footer { padding: 8px 11px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; scroll-behavior: auto !important; } }