/* --- NOVI UI ELEMENTI --- */
#toast-container {
    position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999;
}
.toast {
    background: rgba(5, 13, 26, 0.95); border: 1px solid #333; color: #fff; padding: 12px 20px;
    border-radius: 8px; font-size: 14px; animation: slideInUp 0.3s ease forwards; transition: opacity 0.3s;
}
.toast.error { border-left: 4px solid #ff4d4d; }
.toast.success { border-left: 4px solid #00cc66; }
@keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* ZALIJEPI SVOJ STARI CSS ISPOD OVE LINIJE: */

:root {
  --bg:#050d1a; --surface:rgba(255,255,255,.04); --surface2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.15);
  --text:#e8f0fe; --muted:rgba(232,240,254,.45);
  --accent:#4fc3f7; --teal:#26c6da; --bura:#ff6b6b;
  --warm:#ffb347; --green:#69f0ae; --lightning:#ffd54f; --purple:#ce93d8;
  /* Fluid spacing scale */
  --sp-xs: clamp(4px, 1vw, 8px);
  --sp-sm: clamp(8px, 2vw, 14px);
  --sp-md: clamp(14px, 3vw, 24px);
  --sp-lg: clamp(18px, 4vw, 28px);
  --sp-xl: clamp(22px, 5vw, 32px);
  /* Fluid radius */
  --r-card: clamp(16px, 3vw, 24px);
  --r-pill: 22px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; transition:background 3s ease; }

/* Dynamic time-based backgrounds */
body.bg-dawn  { background:linear-gradient(160deg,#120808 0%,#0a0e1a 100%); }
body.bg-morning { background:linear-gradient(160deg,#071828 0%,#060e1c 100%); }
body.bg-day   { background:linear-gradient(160deg,#071a2e 0%,#060e1c 100%); }
body.bg-dusk  { background:linear-gradient(160deg,#180a18 0%,#0a0814 100%); }
body.bg-night { background:#050d1a; }

/* Animated background blobs */
.bg-canvas { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bg-canvas::before { content:''; position:absolute; width:min(900px,120vw); height:min(900px,120vw); background:radial-gradient(circle,rgba(79,195,247,.07) 0%,transparent 70%); top:-250px; left:-250px; animation:drift1 22s ease-in-out infinite; }
.bg-canvas::after  { content:''; position:absolute; width:min(700px,100vw); height:min(700px,100vw); background:radial-gradient(circle,rgba(38,198,218,.05) 0%,transparent 70%); bottom:-150px; right:-150px; animation:drift2 28s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(120px,90px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-90px,-70px)} }

.waves { display:none; }

.app-status { display:none; align-items:center; gap:10px; margin:0 0 var(--sp-md); padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
.app-status.show { display:flex; }
.app-status.info { color:var(--text); }
.app-status.warn { color:#ffd54f; border-color:rgba(255,213,79,.25); background:rgba(255,213,79,.08); }
.app-status.error { color:#ffb4a9; border-color:rgba(255,107,107,.28); background:rgba(255,107,107,.10); }
.app-status-dot { width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; flex-shrink:0; }
.app-status-text { font-size:13px; line-height:1.4; }
.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; }


/* Layout */
.wrapper { position:relative; z-index:1; max-width:1480px; margin:0 auto; padding:0 var(--sp-md) clamp(60px,10vw,90px); }

/* Header */
header { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-lg) 0; border-bottom:1px solid var(--border); margin-bottom:var(--sp-lg); flex-wrap:wrap; gap:var(--sp-sm); }
.logo { display:flex; align-items:center; gap:var(--sp-sm); }
.logo-icon { width:clamp(44px,7vw,54px); height:clamp(44px,7vw,54px); background:linear-gradient(135deg,#0d2137,#0a1a2e); border:1px solid rgba(79,195,247,.3); border-radius:clamp(12px,2vw,16px); display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px rgba(79,195,247,.2); }
.logo-text h1 { font-family:'Syne',sans-serif; font-size:clamp(20px,3.5vw,26px); font-weight:800; letter-spacing:-.5px; }
.logo-text span { font-size:clamp(10px,1.5vw,12px); color:var(--muted); letter-spacing:2px; text-transform:uppercase; display:block; margin-top:2px; }

.sun-row { display:flex; align-items:center; gap:clamp(12px,2vw,20px); }
.sun-item { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--muted); }
.sun-val { color:var(--text); font-weight:500; }

.hrow { display:flex; align-items:center; gap:clamp(6px,1.5vw,12px); flex-wrap:wrap; }
.live-badge { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--green); letter-spacing:1.5px; text-transform:uppercase; font-weight:500; }
.live-dot { width:8px; height:8px; background:var(--green); border-radius:50%; animation:pulse 2s ease-in-out infinite; box-shadow:0 0 8px var(--green); }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
.upd-time { font-size:13px; color:var(--muted); }

.icon-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:var(--surface); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .2s; font-size:17px; color:var(--muted); appearance:none; }
.icon-btn:focus-visible, .theme-btn:focus-visible, .refresh-btn:focus-visible, .lang-btn:focus-visible, .share-btn:focus-visible, .pwa-install:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.icon-btn:hover { background:var(--surface2); border-color:var(--border2); color:var(--text); }
.icon-btn.active { background:rgba(79,195,247,.12); border-color:rgba(79,195,247,.3); color:var(--accent); }

.lang-toggle { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.lang-btn { padding:8px 12px; font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); background:transparent; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
.lang-btn.active { background:rgba(79,195,247,.15); color:var(--accent); }

.refresh-btn { display:flex; align-items:center; gap:7px; background:rgba(79,195,247,.08); border:1px solid rgba(79,195,247,.2); color:var(--accent); font-size:13px; font-family:'DM Sans',sans-serif; padding:8px 16px; border-radius:var(--r-pill); cursor:pointer; transition:all .2s; }
.refresh-btn:hover { background:rgba(79,195,247,.15); }
.refresh-btn.spinning svg { animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Alerts */
.alert-box { border-radius:var(--r-card); padding:var(--sp-sm) var(--sp-md); display:flex; align-items:center; gap:var(--sp-sm); margin-bottom:var(--sp-sm); animation:slideIn .4s ease both; }
.alert-box.bura { background:linear-gradient(135deg,rgba(255,107,107,.1),rgba(255,107,107,.04)); border:1px solid rgba(255,107,107,.25); }
.alert-box.jugo { background:linear-gradient(135deg,rgba(38,198,218,.1),rgba(38,198,218,.04)); border:1px solid rgba(38,198,218,.25); }
.alert-box.lightning { background:linear-gradient(135deg,rgba(255,213,79,.1),rgba(255,213,79,.04)); border:1px solid rgba(255,213,79,.25); }
.alert-box.hot { background:linear-gradient(135deg,rgba(255,179,71,.1),rgba(255,179,71,.04)); border:1px solid rgba(255,179,71,.25); }
@keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.a-icon { font-size:clamp(20px,4vw,26px); }
.a-icon.shake { animation:shake 3s ease-in-out infinite; }
@keyframes shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-5deg)} 75%{transform:rotate(5deg)} }
.a-text strong { font-family:'Syne',sans-serif; font-size:clamp(13px,2vw,15px); font-weight:700; display:block; margin-bottom:3px; }
.a-text.bura strong { color:var(--bura); }
.a-text.jugo strong { color:var(--teal); }
.a-text.lightning strong { color:var(--lightning); }
.a-text.hot strong { color:var(--warm); }
.a-text p { font-size:clamp(12px,2vw,14px); color:var(--muted); }
.a-val { margin-left:auto; text-align:right; flex-shrink:0; }
.a-val .big { font-family:'Syne',sans-serif; font-size:clamp(24px,5vw,32px); font-weight:800; line-height:1; }
.a-val .small { font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }

/* Section label */
.sec-label { font-family:'Syne',sans-serif; font-size:clamp(11px,1.5vw,13px); font-weight:600; letter-spacing:clamp(1.5px,0.4vw,3px); text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-sm); }

/* Station grid — auto-fit for fluid columns */
.stations-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap:var(--sp-lg); margin-bottom:var(--sp-lg); }
.scard { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-md); transition:all .3s; animation:fadeUp .6s ease both; position:relative; overflow:hidden; }
.scard::after { content:''; position:absolute; inset:0; border-radius:var(--r-card); background:linear-gradient(135deg,rgba(79,195,247,.05),transparent); opacity:0; transition:opacity .3s; }
.scard:hover { border-color:var(--border2); transform:translateY(-3px); box-shadow:0 16px 50px rgba(0,0,0,.4); }
.scard:hover::after { opacity:1; }
.scard:nth-child(1){animation-delay:.1s} .scard:nth-child(2){animation-delay:.2s} .scard:nth-child(3){animation-delay:.3s}
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.scard-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--sp-sm); gap:var(--sp-sm); }
.sname { font-family:'Syne',sans-serif; font-size:clamp(17px,2.5vw,20px); font-weight:700; }
.smeta { font-size:13px; color:var(--muted); margin-top:3px; }
.sstatus { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--green); letter-spacing:1px; text-transform:uppercase; margin-top:5px; font-weight:500; }
.sdot { width:6px; height:6px; background:var(--green); border-radius:50%; }

/* Compass */
.compass-wrap { width:clamp(140px,25vw,200px); height:clamp(140px,25vw,200px); flex-shrink:0; }
.compass-wrap svg { width:100%; height:100%; }

.temp-row { display:flex; align-items:flex-start; gap:4px; margin-bottom:4px; }
.temp-big { font-family:'Syne',sans-serif; font-size:clamp(48px,12vw,72px); font-weight:800; line-height:1; letter-spacing:clamp(-2px,-0.5vw,-3px); }
.temp-deg { font-family:'Syne',sans-serif; font-size:clamp(18px,3vw,26px); font-weight:600; margin-top:clamp(4px,1vw,10px); color:var(--muted); }
.wind-desc { font-size:14px; color:var(--muted); margin-bottom:8px; font-weight:500; }

/* Feels like */
.feels-row { display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.feels-lbl { font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
.feels-val { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:var(--text); }
.feels-diff { font-size:12px; color:var(--muted); }

/* Last seen */
.last-seen { font-size:11px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:5px; }
.last-seen.stale { color:#ff8a65; }
.scard:has(.last-seen.stale) .sdot { background:#ff8a65; box-shadow:0 0 6px #ff8a65; }
.last-seen svg { opacity:.5; }

/* Daily records */
.records-row { display:flex; gap:clamp(10px,2vw,16px); margin-bottom:16px; flex-wrap:wrap; }
.rec { display:flex; align-items:center; gap:6px; }
.rec-lbl { font-size:11px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; }
.rec-val { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; margin-left:3px; }
.rec-val.mx { color:var(--warm); }
.rec-val.mn { color:var(--accent); }

.divider { height:1px; background:var(--border); margin-bottom:16px; }
.sens-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap:clamp(10px,2vw,16px); }
.sens { display:flex; flex-direction:column; gap:5px; }
.sens-lbl { display:flex; align-items:center; gap:6px; font-size:clamp(10px,1.3vw,11px); color:var(--muted); letter-spacing:.8px; text-transform:uppercase; }
.si { display:flex; align-items:center; opacity:.6; }
.sens-val { font-family:'Syne',sans-serif; font-size:clamp(15px,2.5vw,19px); font-weight:700; }
.sv-wind { color:var(--accent); } .sv-rain { color:#7986cb; } .sv-uv { color:var(--warm); }
.sv-pres { color:var(--teal); }  .sv-hum  { color:#80deea; }  .sv-sol  { color:#fff176; }
.wdir-badge { display:inline-flex; align-items:center; font-size:clamp(10px,1.5vw,11px); background:rgba(79,195,247,.12); color:var(--accent); padding:3px 9px; border-radius:20px; margin-top:3px; width:fit-content; font-weight:600; }

/* Leaflet map overrides */
#leafletMap { z-index:0; }
.leaflet-control-zoom { border:1px solid rgba(255,255,255,.15) !important; }
.leaflet-control-zoom a { background:rgba(5,13,26,.9) !important; color:var(--text) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; }
.leaflet-control-zoom a:hover { background:rgba(79,195,247,.15) !important; }
.leaflet-control-attribution { background:rgba(5,13,26,.7) !important; color:var(--muted) !important; font-size:9px !important; }
.map-legend { display:flex; flex-direction:column; gap:10px; margin-top:var(--sp-sm); }
.map-leg-item { display:flex; align-items:center; gap:10px; font-size:13px; }
.map-leg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Chart section */
.chart-sec { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-md); margin-bottom:var(--sp-lg); animation:fadeUp .6s ease .35s both; }
.chart-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-sm); flex-wrap:wrap; gap:clamp(8px,1.5vw,12px); }
.chart-tabs { display:flex; gap:clamp(4px,1vw,6px); flex-wrap:wrap; }
.ctab { padding:clamp(5px,1vw,6px) clamp(8px,2vw,14px); font-size:clamp(10px,1.5vw,12px); font-weight:600; letter-spacing:.5px; text-transform:uppercase; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); cursor:pointer; transition:all .2s; color:var(--muted); }
.ctab.active { background:rgba(79,195,247,.12); border-color:rgba(79,195,247,.3); color:var(--accent); }
.chart-wrap { width:100%; height:160px; position:relative; }
.chart-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); }
.chart-svg { width:100%; height:160px; }
.chart-stats { display:flex; flex-wrap:wrap; gap:clamp(14px,3vw,28px); margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.cstat-lbl { font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.cstat-val { font-family:'Syne',sans-serif; font-size:clamp(18px,3vw,24px); font-weight:800; }
.cstat-avg { margin-left:auto; text-align:right; }

/* Bottom grid — auto-fit */
.btm-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:var(--sp-lg); margin-bottom:var(--sp-lg); }
.map-sec { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-md); margin-bottom:var(--sp-lg); animation:fadeUp .6s ease .48s both; }
@media (min-width: 1100px){
  #leafletMap { height: 320px !important; }
}

.icard { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-md); animation:fadeUp .6s ease both; }
.icard:nth-child(1){animation-delay:.4s} .icard:nth-child(2){animation-delay:.5s} .icard:nth-child(3){animation-delay:.6s}
.icard-title { font-family:'Syne',sans-serif; font-size:clamp(11px,1.5vw,12px); font-weight:600; letter-spacing:clamp(1.5px,0.3vw,2.5px); text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-sm); }
.cmp-row { display:flex; align-items:center; gap:clamp(8px,1.5vw,12px); margin-bottom:13px; }
.cmp-loc { font-size:clamp(12px,2vw,14px); font-weight:500; min-width:clamp(55px,10vw,70px); }
.bar-wrap { flex:1; height:6px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; }
.bar { height:100%; border-radius:10px; transition:width 1.2s ease; }
.bar-c { background:linear-gradient(90deg,var(--accent),var(--teal)); }
.bar-m { background:linear-gradient(90deg,#9575cd,var(--purple)); }
.bar-v { background:linear-gradient(90deg,var(--warm),#ff8a65); }
.cmp-val { font-family:'Syne',sans-serif; font-size:clamp(13px,2vw,15px); font-weight:700; min-width:clamp(50px,10vw,64px); text-align:right; }
.big-row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; gap:8px; }
.big-lbl { font-size:12px; color:var(--muted); }
.big-val { font-family:'Syne',sans-serif; font-size:clamp(20px,4vw,26px); font-weight:800; color:var(--accent); }
.cmp-meta { margin-top:18px; display:grid; gap:10px; font-size:15px; line-height:1.35; color:rgba(255,255,255,.92); }
.cmp-meta-line { display:flex; align-items:flex-start; gap:12px; }
.cmp-meta-dot { width:12px; height:12px; border-radius:999px; flex:0 0 12px; margin-top:8px; background:var(--accent); box-shadow:0 0 0 4px rgba(79,195,247,.10); }
.cmp-meta-dot.min { background:var(--accent); box-shadow:0 0 0 4px rgba(79,195,247,.10); }
.cmp-meta-dot.max { background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.12); }
.cmp-meta-dot.wind { background:var(--warm); box-shadow:0 0 0 4px rgba(255,179,71,.12); }
.cmp-meta-text { flex:1; }

/* Sea card */
.sea-badge { display:flex; align-items:center; gap:10px; background:rgba(38,198,218,.08); border:1px solid rgba(38,198,218,.15); border-radius:12px; padding:var(--sp-sm) var(--sp-md); margin-bottom:var(--sp-sm); }
.sea-badge-icon { font-size:22px; }
.sea-badge-text { font-size:15px; font-weight:500; color:var(--teal); }
.sea-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,2vw,14px); }
.sea-item .lbl { font-size:11px; color:var(--muted); letter-spacing:.8px; text-transform:uppercase; margin-bottom:4px; }
.sea-item .val { font-family:'Syne',sans-serif; font-size:clamp(16px,3vw,20px); font-weight:700; color:var(--teal); }
.sea-item .val.sec { font-size:clamp(14px,2vw,16px); color:var(--muted); }

/* Weekly chart */
.weekly-sec { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-md); margin-bottom:var(--sp-lg); animation:fadeUp .6s ease .5s both; }
.weekly-bars { display:flex; align-items:flex-end; gap:clamp(5px,1.2vw,10px); height:clamp(80px,14vw,110px); margin-bottom:8px; }
.wbar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.wbar { width:100%; background:linear-gradient(180deg,var(--accent),var(--teal)); border-radius:5px 5px 0 0; opacity:.65; transition:opacity .2s; min-height:4px; }
.wbar:hover { opacity:1; }
.wbar-val { font-family:'Syne',sans-serif; font-size:clamp(10px,1.5vw,12px); font-weight:700; color:var(--muted); }

/* Loading overlay */
.loading-overlay { position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transition:opacity .6s ease; }
.loading-overlay.hidden { opacity:0; pointer-events:none; }
.loading-logo { font-family:'Syne',sans-serif; font-size:clamp(24px,5vw,30px); font-weight:800; color:var(--accent); }
.loader { width:50px; height:50px; border:3px solid rgba(79,195,247,.15); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.loading-sub { font-size:14px; color:var(--muted); letter-spacing:1px; }
.loading-st { display:flex; gap:16px; margin-top:8px; }
.lst { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.lst.done { color:var(--green); }

.skeleton { background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Footer */
footer { margin-top:clamp(28px,6vw,48px); padding-top:var(--sp-md); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
footer p { font-size:14px; color:var(--muted); }
.eco-badge { background:rgba(79,195,247,.1); border:1px solid rgba(79,195,247,.2); color:var(--accent); font-size:12px; padding:4px 11px; border-radius:var(--r-pill); letter-spacing:.5px; font-weight:600; }

/* ========== Responsive — only structural layout changes ========== */
/* Mobile: header stacking + hide sun row */
@media(max-width:700px) {
  header { flex-direction:column; align-items:flex-start; }
  .sun-row { display:none; }
  /* Chart avg wraps nicely instead of pushing right */
  .cstat-avg { margin-left:0; text-align:left; }
}

/* Swipe stations on mobile */
.stations-swipe { display:none; }
@media(max-width:600px) {
  .stations-grid { display:none; }
  .stations-swipe { display:block; position:relative; overflow:hidden; margin-bottom:var(--sp-lg); }
  .swipe-track { display:flex; gap:12px; padding-right:44px; transition:transform .35s cubic-bezier(.4,0,.2,1); will-change:transform; }
  .swipe-track .scard { min-width:calc(100% - 44px); flex-shrink:0; }
  .swipe-indicator { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
  .swipe-meta { font-family:'Syne',sans-serif; font-size:12px; font-weight:700; color:var(--text); letter-spacing:.06em; }
  .swipe-hint { font-size:11px; color:var(--muted); opacity:.9; }
  .swipe-dots { display:flex; justify-content:center; gap:8px; }
  .swipe-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15); transition:all .2s; }
  .swipe-dot.active { background:var(--accent); transform:scale(1.25); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
}

/* === V5 NEW STYLES === */

/* Countdown + Share in header */
.countdown { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.countdown-ring { width:16px; height:16px; position:relative; flex-shrink:0; }
.countdown-ring svg { width:16px; height:16px; transform:rotate(-90deg); }
.countdown-ring circle { fill:none; stroke-width:2; }
.countdown-ring .bg { stroke:rgba(255,255,255,.08); }
.countdown-ring .fg { stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }

.share-btn { display:flex; align-items:center; gap:6px; background:rgba(105,240,174,.08); border:1px solid rgba(105,240,174,.2); color:var(--green); font-size:13px; font-family:'DM Sans',sans-serif; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer; transition:all .2s; }
.share-btn:hover { background:rgba(105,240,174,.15); }

/* Pressure trend */
.pres-trend { display:inline-flex; align-items:center; gap:4px; font-size:clamp(10px,1.5vw,12px); margin-top:3px; font-weight:600; }
.pres-trend.up   { color:#69f0ae; }
.pres-trend.down { color:#ff6b6b; }
.pres-trend.stable { color:var(--muted); }

/* WittBoy badge */
.wittboy-badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; background:rgba(79,195,247,.1); color:var(--accent); border:1px solid rgba(79,195,247,.2); padding:3px 9px; border-radius:20px; margin-top:4px; letter-spacing:.5px; font-weight:600; text-transform:uppercase; }

/* Solar highlight za WittBoy */
.sv-sol-hi { color:#ffd54f; font-size:clamp(18px,3vw,22px); }
.solar-bar-wrap { margin-top:4px; height:4px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; }
.solar-bar { height:100%; border-radius:10px; background:linear-gradient(90deg,#ffb347,#ffd54f); transition:width .8s ease; }

/* Rain stats row */
.rain-stats { display:flex; gap:clamp(10px,2vw,16px); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.rain-stat { display:flex; flex-direction:column; gap:3px; }
.rain-stat-lbl { font-size:clamp(9px,1.2vw,10px); color:var(--muted); letter-spacing:.8px; text-transform:uppercase; }
.rain-stat-val { font-family:'Syne',sans-serif; font-size:clamp(13px,2vw,15px); font-weight:700; color:#7986cb; }

/* UV color classes */
.uv-low    { color:#69f0ae; }
.uv-mod    { color:#fff176; }
.uv-high   { color:#ffb347; }
.uv-vhigh  { color:#ff6b6b; }
.uv-extreme { color:#ce93d8; }

/* Temp color classes */
.tmp-freeze { color:#80deea; }
.tmp-cold   { color:#81d4fa; }
.tmp-cool   { color:#4fc3f7; }
.tmp-mild   { color:var(--text); }
.tmp-warm   { color:#ffb347; }
.tmp-hot    { color:#ff6b6b; }

/* Compass animation */
@keyframes compassSpin { from{} to{} }
.compass-wrap svg { transition:all .3s ease; }

/* Forecast section */
.forecast-sec { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-md); margin-bottom:var(--sp-lg); animation:fadeUp .6s ease .6s both; }
.forecast-days { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(6px,1.5vw,14px); margin-top:var(--sp-sm); }
.fday { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:clamp(10px,2vw,16px); padding:clamp(10px,2vw,18px) clamp(6px,1.5vw,12px); text-align:center; min-width:0; }
.fday-name { font-size:clamp(10px,1.5vw,12px); color:var(--muted); letter-spacing:clamp(.5px,0.1vw,1px); text-transform:uppercase; margin-bottom:clamp(6px,1.5vw,10px); }
.fday-icon { font-size:clamp(22px,4vw,28px); margin-bottom:clamp(5px,1vw,8px); }
.fday-temps { display:flex; justify-content:center; gap:clamp(4px,1vw,10px); align-items:baseline; margin-bottom:clamp(6px,1.5vw,10px); flex-wrap:wrap; }
.fday-max { font-family:'Syne',sans-serif; font-size:clamp(16px,3vw,22px); font-weight:800; }
.fday-min { font-family:'Syne',sans-serif; font-size:clamp(12px,2vw,15px); font-weight:600; color:var(--muted); }
.fday-wind { font-size:clamp(10px,1.5vw,12px); color:var(--muted); }
.fday-rain { font-size:clamp(10px,1.5vw,12px); color:#7986cb; margin-top:4px; }

/* Lazy load fade */
.lazy-section { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.lazy-section.visible { opacity:1; transform:translateY(0); }

/* Light mode */
html.light {
  --bg:#f0f4f8; --surface:rgba(0,0,0,.03); --surface2:rgba(0,0,0,.05);
  --border:rgba(0,0,0,.08); --border2:rgba(0,0,0,.15);
  --text:#1a2332; --muted:rgba(26,35,50,.5);
}
html.light body { background:var(--bg); color:var(--text); }
html.light body.bg-dawn,
html.light body.bg-morning,
html.light body.bg-day,
html.light body.bg-dusk,
html.light body.bg-night { background:var(--bg); }
html.light .bg-canvas::before { background:radial-gradient(circle,rgba(79,195,247,.08) 0%,transparent 70%); }
html.light .bg-canvas::after  { background:radial-gradient(circle,rgba(38,198,218,.06) 0%,transparent 70%); }
html.light .logo-icon { background:linear-gradient(135deg,#e3f0ff,#d0e8f7); border-color:rgba(79,195,247,.4); }
html.light .loading-overlay { background:var(--bg); }
html.light .leaflet-control-zoom a { background:rgba(240,244,248,.95) !important; color:var(--text) !important; border-bottom:1px solid rgba(0,0,0,.08) !important; }
html.light .leaflet-control-attribution { background:rgba(240,244,248,.85) !important; color:var(--muted) !important; }
html.light .temp-deg { color:var(--muted); }
html.light .scard::after { background:linear-gradient(135deg,rgba(79,195,247,.06),transparent); }

/* Theme toggle */
.theme-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:var(--surface); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .2s; font-size:17px; color:var(--muted); border:none; }
.theme-btn:hover { background:var(--surface2); color:var(--text); }

/* PWA Install button */
.pwa-install { display:none; align-items:center; gap:6px; background:rgba(79,195,247,.08); border:1px solid rgba(79,195,247,.2); color:var(--accent); font-size:13px; font-family:'DM Sans',sans-serif; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer; transition:all .2s; }
.pwa-install:hover { background:rgba(79,195,247,.15); }
.pwa-install.show { display:flex; }

/* Wind chart */
.wind-chart-sec { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--sp-md); margin-bottom:var(--sp-lg); }
.wind-chart-svg { width:100%; height:140px; }

/* Dew point sensor */
.sv-dew { color:#80cbc4; }

/* Beaufort badge */
.bft-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; background:rgba(79,195,247,.1); color:var(--accent); padding:2px 8px; border-radius:12px; margin-top:2px; font-weight:600; }

/* Sea temp */
.sea-temp { color:var(--teal); }

/* Animated weather icons — pure SVG */
.wx-icon { display:inline-flex; align-items:center; justify-content:center; width:clamp(48px,8vw,64px); height:clamp(48px,8vw,64px); }
.wx-icon svg { width:100%; height:100%; }

/* Sun rays rotation */
@keyframes wxRaysRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
/* Cloud float */
@keyframes wxCloudFloat { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
/* Rain drops */
@keyframes wxDrop1 { 0%{transform:translateY(0);opacity:1} 80%{transform:translateY(8px);opacity:.6} 100%{transform:translateY(0);opacity:1} }
@keyframes wxDrop2 { 0%{transform:translateY(0);opacity:1} 80%{transform:translateY(7px);opacity:.5} 100%{transform:translateY(0);opacity:1} }
/* Snow drift */
@keyframes wxSnow { 0%{transform:translate(0,0);opacity:.9} 50%{transform:translate(2px,5px);opacity:1} 100%{transform:translate(0,0);opacity:.9} }
/* Lightning flash */
@keyframes wxBolt { 0%,85%,100%{opacity:0} 88%{opacity:1} 92%{opacity:0} 95%{opacity:.8} }
/* Fog pulse */
@keyframes wxFogPulse { 0%,100%{opacity:.5;transform:translateX(0)} 50%{opacity:.8;transform:translateX(3px)} }
/* Sun glow pulse */
@keyframes wxGlow { 0%,100%{opacity:.15} 50%{opacity:.25} }

/* Weekly range bars */
.wbar-range { display:flex; flex-direction:column; align-items:center; gap:2px; }
.wbar-minmax { display:flex; gap:3px; font-size:8px; color:var(--muted); }
.wbar-mx { color:var(--warm); }
.wbar-mn { color:var(--accent); }


/* Info modal */
.info-btn { display:inline-flex; align-items:center; gap:6px; background:rgba(79,195,247,.08); border:1px solid rgba(79,195,247,.2); color:var(--accent); font-size:13px; font-family:'DM Sans',sans-serif; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer; transition:all .2s; }
.info-btn:hover { background:rgba(79,195,247,.15); }
.info-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:clamp(16px,3vw,28px); background:rgba(3,8,16,.72); backdrop-filter:blur(10px); z-index:1200; }
.info-modal.open { display:flex; }
.info-dialog { width:min(820px,100%); max-height:min(86vh,920px); overflow:hidden; background:linear-gradient(180deg, rgba(10,22,40,.98), rgba(7,16,30,.98)); border:1px solid var(--border); border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.45); display:flex; flex-direction:column; }
.info-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.info-title { font-family:'Syne',sans-serif; font-size:clamp(18px,2.2vw,24px); font-weight:800; }
.info-close { width:40px; height:40px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-size:20px; line-height:1; }
.info-close:hover { background:rgba(255,255,255,.08); }
.info-body { overflow:auto; padding:20px; display:grid; gap:16px; }
.info-intro { color:var(--text); font-size:15px; line-height:1.65; }
.info-block { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:18px; padding:16px 18px; }
.info-block h3 { font-family:'Syne',sans-serif; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.info-block p { font-size:14px; line-height:1.7; color:var(--text); }
@media (max-width:700px){ .info-dialog { max-height:90vh; border-radius:20px; } .info-head{padding:16px 16px;} .info-body{padding:16px;} .info-block{padding:14px 14px;} }

/* Toast Notifications */
#toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 24px));
}

.toast {
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
  background: rgba(5, 13, 26, 0.95);
  border: 1px solid var(--border2);
  border-left: 4px solid transparent;
  color: var(--text);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.4;
  animation: slideInUp 0.3s ease forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.error { border-left-color: var(--bura); }
.toast.success { border-left-color: var(--green); }
.toast.info { border-left-color: var(--accent); }
.toast.is-hiding { opacity: 0; transform: translateY(8px); }

/* Skeleton helpers */
.skeleton-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--sp-md);
  border: 1px solid var(--border);
}

.skeleton-title,
.skeleton-data {
  position: relative;
  overflow: hidden;
  background: var(--surface2);
}

.skeleton-title {
  width: 40%;
  height: 20px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.skeleton-data {
  width: 100%;
  height: 60px;
  border-radius: 8px;
}

.skeleton-title::after,
.skeleton-data::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: shimmer 1.6s infinite;
}

.hidden { display: none !important; }

@media (max-width: 640px) {
  #toast-container {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-hiding,
  .skeleton-title::after,
  .skeleton-data::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ========== MODERN SEA CARD ========== */
.sea-card { overflow: hidden; }

.sea-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(38,198,218,.12), rgba(79,195,247,.06));
  border: 1px solid rgba(38,198,218,.2);
  margin-bottom: var(--sp-sm);
  overflow: hidden;
  min-height: 56px;
}

.sea-wave-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  overflow: hidden;
  opacity: .3;
}

.sea-wave-svg { width: 200%; height: 100%; }

.sea-wave-path { fill: var(--teal); }
.sea-wave-path.w1 { opacity: .5; animation: seaWave1 6s ease-in-out infinite; }
.sea-wave-path.w2 { opacity: .3; animation: seaWave2 8s ease-in-out infinite; }

@keyframes seaWave1 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-25%); }
}
@keyframes seaWave2 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-15%); }
}

.sea-hero-icon {
  font-size: 28px;
  z-index: 1;
  animation: seaBob 3s ease-in-out infinite;
}

@keyframes seaBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.sea-hero-text {
  font-family: 'Syne', sans-serif;
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 700;
  color: var(--teal);
  z-index: 1;
  letter-spacing: .5px;
}

.sea-grid-modern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.5vw, 12px);
}

.sea-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  transition: all .2s;
}

.sea-stat:hover {
  background: rgba(38,198,218,.06);
  border-color: rgba(38,198,218,.15);
}

.sea-stat-wide {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(38,198,218,.06), transparent);
}

.sea-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(38,198,218,.08);
  flex-shrink: 0;
}

.sea-stat-lbl {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.sea-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 700;
  color: var(--teal);
}

.sea-stat-val.sec {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--muted);
}

.sea-temp-val {
  color: var(--teal) !important;
  font-size: clamp(18px, 3vw, 22px) !important;
}

/* ========== MODERN FORECAST ========== */
.forecast-sec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-md);
  margin-bottom: var(--sp-lg);
  animation: fadeUp .6s ease .6s both;
}

.forecast-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.5vw, 14px);
  margin-top: var(--sp-sm);
}

.fday {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: clamp(14px, 2.5vw, 20px);
  padding: clamp(14px, 2.5vw, 22px) clamp(8px, 1.5vw, 14px);
  text-align: center;
  min-width: 0;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.fday::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(79,195,247,.06), transparent);
  opacity: 0;
  transition: opacity .3s;
}

.fday:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}

.fday:hover::before { opacity: 1; }

.fday-name {
  font-family: 'Syne', sans-serif;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: clamp(1px, 0.2vw, 2px);
  text-transform: uppercase;
  margin-bottom: clamp(8px, 1.5vw, 14px);
}

.fday-icon {
  font-size: clamp(28px, 5vw, 36px);
  margin-bottom: clamp(8px, 1.5vw, 12px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

.fday-temps {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
  align-items: baseline;
  margin-bottom: clamp(8px, 1.5vw, 12px);
  flex-wrap: wrap;
}

.fday-max {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 800;
  letter-spacing: -.5px;
}

.fday-min {
  font-family: 'Syne', sans-serif;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 600;
  color: var(--muted);
  opacity: .7;
}

.fday-wind {
  font-size: clamp(10px, 1.5vw, 12px);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.fday-rain {
  font-size: clamp(10px, 1.5vw, 12px);
  color: #7986cb;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(121,134,203,.08);
  border-radius: 8px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Forecast stagger animation */
.fday:nth-child(1) { animation: fSlideUp .5s ease .1s both; }
.fday:nth-child(2) { animation: fSlideUp .5s ease .2s both; }
.fday:nth-child(3) { animation: fSlideUp .5s ease .3s both; }

@keyframes fSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .sea-grid-modern { gap: 8px; }
  .sea-stat { padding: 8px 10px; }
  .sea-stat-wide { grid-column: span 2; }
}

/* ================================================================
   V6 — VISUAL POLISH: Header, Cards, Charts, Weekly
   ================================================================ */

/* -------- 1. HEADER GLOW-UP -------- */
header {
  border-bottom: 1px solid rgba(79,195,247,.1);
  background: linear-gradient(180deg, rgba(79,195,247,.03) 0%, transparent 100%);
  padding: var(--sp-lg) 0 var(--sp-md);
}

.logo-icon {
  position: relative;
  box-shadow: 0 0 30px rgba(79,195,247,.15), inset 0 0 20px rgba(79,195,247,.05);
  transition: all .3s;
}
.logo-icon:hover {
  box-shadow: 0 0 40px rgba(79,195,247,.25), inset 0 0 20px rgba(79,195,247,.1);
  transform: scale(1.05);
}

.logo-text h1 {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.live-badge {
  background: rgba(105,240,174,.06);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(105,240,174,.15);
}

.live-dot {
  box-shadow: 0 0 12px var(--green), 0 0 4px var(--green);
}

.refresh-btn {
  position: relative;
  overflow: hidden;
}
.refresh-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(79,195,247,.15) 100%);
  opacity: 0;
  transition: opacity .2s;
}
.refresh-btn:hover::after { opacity: 1; }

.icon-btn, .theme-btn {
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.icon-btn:hover, .theme-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.countdown {
  background: rgba(255,255,255,.03);
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
}

/* -------- 2. STATION CARDS POLISH -------- */
.scard {
  background: linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.scard:hover {
  border-color: rgba(79,195,247,.2);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 30px rgba(79,195,247,.05);
}
.scard::after {
  background: linear-gradient(135deg, rgba(79,195,247,.06), rgba(38,198,218,.03), transparent);
}

.sname {
  background: linear-gradient(135deg, var(--text), rgba(232,240,254,.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sstatus {
  background: rgba(105,240,174,.06);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(105,240,174,.1);
  width: fit-content;
}

.temp-big {
  text-shadow: 0 0 40px rgba(79,195,247,.15);
  transition: color .3s;
}

.compass-wrap svg {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

/* Sensor grid — glass cards */
.sens {
  background: rgba(255,255,255,.02);
  padding: clamp(8px,1.5vw,12px);
  border-radius: clamp(10px,1.5vw,14px);
  border: 1px solid rgba(255,255,255,.05);
  transition: all .2s;
}
.sens:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}

.divider {
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* Records row — pill style */
.records-row .rec {
  background: rgba(255,255,255,.03);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

/* Wind direction badge glow */
.wdir-badge {
  box-shadow: 0 0 8px rgba(79,195,247,.1);
}

/* Beaufort badge */
.bft-badge {
  background: linear-gradient(135deg, rgba(79,195,247,.12), rgba(38,198,218,.08));
  border: 1px solid rgba(79,195,247,.15);
}

/* -------- 3. CHARTS POLISH -------- */
.chart-sec, .wind-chart-sec {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
}
.chart-sec::before, .wind-chart-sec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,195,247,.3), transparent);
}

.ctab {
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.ctab:hover:not(.active) {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.ctab.active {
  box-shadow: 0 0 12px rgba(79,195,247,.15);
}

.chart-stats {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border), transparent) 1;
}

.cstat-val {
  text-shadow: 0 0 20px rgba(79,195,247,.1);
}

/* -------- 4. WEEKLY CHART POLISH -------- */
.weekly-sec {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  position: relative;
  overflow: hidden;
}
.weekly-sec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(38,198,218,.3), transparent);
}

.wbar {
  background: linear-gradient(180deg, var(--accent), var(--teal)) !important;
  box-shadow: 0 -2px 10px rgba(79,195,247,.15);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  border-radius: 6px 6px 0 0;
}
.wbar:hover {
  opacity: 1 !important;
  box-shadow: 0 -4px 20px rgba(79,195,247,.25);
  transform: scaleY(1.02);
  transform-origin: bottom;
}

.wbar-val {
  transition: color .2s;
}
.wbar-col:hover .wbar-val {
  color: var(--accent);
}

/* -------- COMPARISON CARDS POLISH -------- */
.icard {
  background: linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  transition: all .3s;
}
.icard:hover {
  border-color: var(--border2);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

.bar {
  box-shadow: 0 0 8px rgba(79,195,247,.1);
}

.big-val {
  text-shadow: 0 0 20px rgba(79,195,247,.2);
}

.cmp-meta-dot {
  animation: dotPulse 3s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* -------- MAP SECTION POLISH -------- */
.map-sec {
  background: linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}

/* -------- ALERT POLISH -------- */
.alert-box {
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
}

/* -------- LOADING OVERLAY POLISH -------- */
.loading-overlay {
  background: radial-gradient(ellipse at center, rgba(10,20,40,.98), var(--bg));
}
.loading-logo {
  text-shadow: 0 0 30px rgba(79,195,247,.3);
}
.loader {
  box-shadow: 0 0 20px rgba(79,195,247,.1);
}

/* -------- FOOTER POLISH -------- */
footer {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border), transparent) 1;
}
.eco-badge {
  box-shadow: 0 0 10px rgba(79,195,247,.1);
  transition: all .2s;
}
.eco-badge:hover {
  box-shadow: 0 0 16px rgba(79,195,247,.2);
  transform: translateY(-1px);
}

/* -------- GLOBAL GLASS EFFECT -------- */
@supports (backdrop-filter: blur(1px)) {
  .scard, .icard, .chart-sec, .wind-chart-sec, .weekly-sec, .map-sec, .forecast-sec, .sea-card {
    backdrop-filter: blur(12px);
  }
}

/* -------- SCROLLBAR CUSTOM -------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(79,195,247,.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(79,195,247,.35); }

/* -------- SELECTION COLOR -------- */
::selection { background: rgba(79,195,247,.25); color: var(--text); }

/* ================================================================
   V7 — LOADING, NUMBERS, COMPASS, LIGHT THEME
   ================================================================ */

/* -------- ANIMATED LOADING SCREEN -------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(ellipse at 50% 80%, rgba(10,30,60,.98), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s ease;
  overflow: hidden;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }

.load-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
}
.load-wave-svg { width: 200%; height: 100%; }
.lw { fill: rgba(79,195,247,.08); }
.lw1 { animation: lwMove 4s ease-in-out infinite; }
.lw2 { fill: rgba(38,198,218,.06); animation: lwMove 6s ease-in-out infinite reverse; }
.lw3 { fill: rgba(79,195,247,.04); animation: lwMove 8s ease-in-out infinite; }
@keyframes lwMove { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-25%)} }

.load-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 1;
}

.load-icon-wrap {
  animation: loadFloat 3s ease-in-out infinite;
}
@keyframes loadFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.load-ring {
  animation: loadSpin 2s linear infinite;
  transform-origin: 30px 30px;
}
@keyframes loadSpin { to { stroke-dashoffset: -43; } }

.load-wave-inner {
  animation: loadWaveInner 2s ease-in-out infinite;
}
@keyframes loadWaveInner {
  0%,100% { d: path("M18 32 C22 26 26 38 30 32 C34 26 38 38 42 32"); }
  50% { d: path("M18 32 C22 36 26 26 30 32 C34 36 38 26 42 32"); }
}

.loading-logo {
  font-family: 'Syne', sans-serif;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.loading-sub {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: loadPulse 2s ease-in-out infinite;
}
@keyframes loadPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.loading-st { display: flex; gap: 16px; margin-top: 4px; }
.lst { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; transition: color .3s; }
.lst.done { color: var(--green); }
.lst .chk { font-size: 11px; transition: all .3s; }
.lst.done .chk { transform: scale(1.2); }

/* -------- SMOOTH NUMBER TRANSITION -------- */
.temp-big {
  transition: text-shadow .5s ease;
}

/* -------- 3D COMPASS UPGRADE -------- */
.compass-wrap {
  position: relative;
}
.compass-wrap svg {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

/* -------- LIGHT THEME FULL UPGRADE -------- */
html.light {
  --bg: #f4f7fb;
  --surface: rgba(0,0,0,.025);
  --surface2: rgba(0,0,0,.04);
  --border: rgba(0,0,0,.07);
  --border2: rgba(0,0,0,.12);
  --text: #1a2332;
  --muted: rgba(26,35,50,.45);
  --accent: #0288d1;
  --teal: #00897b;
  --bura: #d32f2f;
  --warm: #e65100;
  --green: #2e7d32;
  --lightning: #f9a825;
  --purple: #7b1fa2;
}

html.light body,
html.light body.bg-dawn,
html.light body.bg-morning,
html.light body.bg-day,
html.light body.bg-dusk,
html.light body.bg-night {
  background: linear-gradient(170deg, #f4f7fb 0%, #e8eef5 100%);
}

html.light .bg-canvas::before {
  background: radial-gradient(circle, rgba(2,136,209,.06) 0%, transparent 70%);
}
html.light .bg-canvas::after {
  background: radial-gradient(circle, rgba(0,137,123,.04) 0%, transparent 70%);
}

html.light .loading-overlay {
  background: radial-gradient(ellipse at 50% 80%, #e8eef5, #f4f7fb);
}
html.light .loading-logo {
  background: linear-gradient(135deg, #0288d1, #00897b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.light .logo-icon {
  background: linear-gradient(135deg, #e1f0fa, #d4ecf7);
  border-color: rgba(2,136,209,.3);
  box-shadow: 0 2px 16px rgba(2,136,209,.1);
}

html.light .logo-text h1 {
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.light header {
  border-bottom-color: rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(2,136,209,.03), transparent);
}

html.light .scard,
html.light .icard,
html.light .chart-sec,
html.light .wind-chart-sec,
html.light .weekly-sec,
html.light .map-sec,
html.light .forecast-sec,
html.light .sea-card {
  background: rgba(255,255,255,.7);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  backdrop-filter: blur(12px);
}

html.light .scard:hover,
html.light .icard:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  border-color: rgba(2,136,209,.15);
}

html.light .scard::after {
  background: linear-gradient(135deg, rgba(2,136,209,.04), transparent);
}

html.light .sname {
  background: linear-gradient(135deg, var(--text), rgba(26,35,50,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.light .alert-box.bura {
  background: linear-gradient(135deg, rgba(211,47,47,.08), rgba(211,47,47,.02));
  border-color: rgba(211,47,47,.2);
}
html.light .alert-box.jugo {
  background: linear-gradient(135deg, rgba(0,137,123,.08), rgba(0,137,123,.02));
  border-color: rgba(0,137,123,.2);
}

html.light .ctab.active {
  background: rgba(2,136,209,.1);
  border-color: rgba(2,136,209,.25);
  color: var(--accent);
}

html.light .live-badge {
  background: rgba(46,125,50,.06);
  border-color: rgba(46,125,50,.15);
}

html.light .refresh-btn {
  background: rgba(2,136,209,.06);
  border-color: rgba(2,136,209,.15);
}

html.light .sea-hero {
  background: linear-gradient(135deg, rgba(0,137,123,.08), rgba(2,136,209,.04));
  border-color: rgba(0,137,123,.15);
}

html.light .sea-stat {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.06);
}

html.light .fday {
  background: rgba(255,255,255,.6);
  border-color: rgba(0,0,0,.06);
}
html.light .fday:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

html.light .sens {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.05);
}

html.light .wbar {
  background: linear-gradient(180deg, var(--accent), var(--teal)) !important;
}

html.light .records-row .rec {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.06);
}

html.light .sstatus {
  background: rgba(46,125,50,.06);
  border-color: rgba(46,125,50,.1);
}

html.light .eco-badge {
  background: rgba(2,136,209,.08);
  border-color: rgba(2,136,209,.15);
}

html.light .leaflet-control-zoom a {
  background: rgba(255,255,255,.9) !important;
  color: var(--text) !important;
  border-color: rgba(0,0,0,.08) !important;
}

html.light .toast {
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.1);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

html.light ::-webkit-scrollbar-thumb {
  background: rgba(2,136,209,.2);
}

html.light .info-dialog {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,251,.98));
}
html.light .info-block {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.06);
}

/* ================================================================
   V8 — ALL-IN PREMIUM: Particles, Mesh, Micro-interactions, Glow
   ================================================================ */

/* -------- GRADIENT MESH BACKGROUND (Apple style) -------- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-canvas::before {
  content: '';
  position: absolute;
  width: 140vmax;
  height: 140vmax;
  top: -40%;
  left: -30%;
  background:
    radial-gradient(ellipse at 25% 25%, rgba(79,195,247,.09) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 20%, rgba(38,198,218,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(206,147,216,.04) 0%, transparent 50%);
  animation: meshDrift 30s ease-in-out infinite;
}
.bg-canvas::after {
  content: '';
  position: absolute;
  width: 120vmax;
  height: 120vmax;
  bottom: -30%;
  right: -20%;
  background:
    radial-gradient(ellipse at 60% 70%, rgba(79,195,247,.06) 0%, transparent 45%),
    radial-gradient(ellipse at 30% 60%, rgba(255,179,71,.03) 0%, transparent 40%);
  animation: meshDrift2 35s ease-in-out infinite;
}
@keyframes meshDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(3%, 2%) rotate(1deg); }
  66% { transform: translate(-2%, -1%) rotate(-0.5deg); }
}
@keyframes meshDrift2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-3%, 2%) rotate(0.8deg); }
}

/* -------- PARTICLE CANVAS -------- */
#particleCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .4;
}

/* -------- MICRO-INTERACTIONS -------- */

/* Ripple effect on buttons */
.refresh-btn,
.icon-btn,
.theme-btn,
.lang-btn,
.share-btn,
.info-btn,
.pwa-install,
.ctab {
  position: relative;
  overflow: hidden;
}
.refresh-btn::before,
.icon-btn::before,
.theme-btn::before,
.lang-btn::before,
.share-btn::before,
.info-btn::before,
.ctab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.15), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.refresh-btn:active::before,
.icon-btn:active::before,
.theme-btn:active::before,
.lang-btn:active::before,
.share-btn:active::before,
.info-btn:active::before,
.ctab:active::before {
  opacity: 1;
  transition: opacity 0s;
}

/* Card tilt on hover (subtle 3D) */
.scard,
.icard,
.fday {
  transform-style: preserve-3d;
  perspective: 800px;
}

/* Glow on active/focused elements */
.ctab.active {
  box-shadow: 0 0 16px rgba(79,195,247,.2), 0 0 4px rgba(79,195,247,.1);
}
.icon-btn.active {
  box-shadow: 0 0 16px rgba(79,195,247,.25), 0 0 6px rgba(79,195,247,.15);
}
.lang-btn.active {
  box-shadow: 0 0 12px rgba(79,195,247,.15);
}
.live-dot {
  box-shadow: 0 0 16px var(--green), 0 0 6px var(--green), 0 0 2px var(--green);
}

/* -------- SMOOTH PAGE TRANSITIONS -------- */
.wrapper {
  animation: pageReveal .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pageReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Staggered section reveals */
.stations-grid { animation-delay: .1s; }
.chart-sec { animation-delay: .15s; }
.wind-chart-sec { animation-delay: .2s; }
.map-sec { animation-delay: .25s; }
.weekly-sec { animation-delay: .3s; }
.btm-grid { animation-delay: .35s; }
.forecast-sec { animation-delay: .4s; }

/* -------- PARALLAX SUBTLE SCROLL -------- */
.bg-canvas {
  will-change: transform;
}

/* -------- ENHANCED HOVER STATES -------- */
.scard:hover {
  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    0 0 40px rgba(79,195,247,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.icard:hover {
  box-shadow:
    0 12px 40px rgba(0,0,0,.25),
    0 0 20px rgba(79,195,247,.03);
}

.fday:hover {
  box-shadow:
    0 12px 36px rgba(0,0,0,.3),
    0 0 20px rgba(79,195,247,.04);
}

/* -------- GLOW BORDERS ON SCROLL-IN -------- */
.lazy-section.visible {
  animation: sectionGlow .6s ease both;
}
@keyframes sectionGlow {
  0% { opacity: 0; transform: translateY(20px); box-shadow: 0 0 0 transparent; }
  60% { box-shadow: 0 0 30px rgba(79,195,247,.06); }
  100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 transparent; }
}

/* -------- ENHANCED ALERT ANIMATIONS -------- */
.alert-box {
  animation: alertSlide .5s cubic-bezier(.16,1,.3,1) both;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
@keyframes alertSlide {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.alert-box.bura {
  border-left: 3px solid var(--bura);
}
.alert-box.jugo {
  border-left: 3px solid var(--teal);
}
.alert-box.lightning {
  border-left: 3px solid var(--lightning);
}

/* -------- TEMPERATURE GLOW EFFECT -------- */
.temp-big {
  position: relative;
}
.tmp-freeze { text-shadow: 0 0 30px rgba(128,222,234,.2); }
.tmp-cold { text-shadow: 0 0 30px rgba(129,212,250,.2); }
.tmp-cool { text-shadow: 0 0 30px rgba(79,195,247,.2); }
.tmp-warm { text-shadow: 0 0 30px rgba(255,179,71,.2); }
.tmp-hot { text-shadow: 0 0 30px rgba(255,107,107,.25); }

/* -------- SENSOR VALUE HOVER -------- */
.sens-val {
  transition: transform .2s, text-shadow .2s;
}
.sens:hover .sens-val {
  transform: scale(1.05);
}
.sens:hover .sv-wind { text-shadow: 0 0 12px rgba(79,195,247,.3); }
.sens:hover .sv-rain { text-shadow: 0 0 12px rgba(121,134,203,.3); }
.sens:hover .sv-uv { text-shadow: 0 0 12px rgba(255,179,71,.3); }
.sens:hover .sv-pres { text-shadow: 0 0 12px rgba(38,198,218,.3); }
.sens:hover .sv-hum { text-shadow: 0 0 12px rgba(128,222,234,.3); }
.sens:hover .sv-sol { text-shadow: 0 0 12px rgba(255,241,118,.3); }

/* -------- COMPARISON BAR ANIMATION -------- */
.bar {
  transition: width 1.2s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: 0 10px 10px 0;
  background: rgba(255,255,255,.2);
  filter: blur(2px);
}

/* -------- SWIPE DOTS UPGRADE -------- */
.swipe-dot {
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.swipe-dot.active {
  width: 24px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(79,195,247,.3);
}

/* -------- INFO MODAL PREMIUM -------- */
.info-modal.open {
  animation: modalBgIn .3s ease both;
}
@keyframes modalBgIn {
  from { backdrop-filter: blur(0); background: transparent; }
  to { backdrop-filter: blur(12px); background: rgba(3,8,16,.72); }
}
.info-dialog {
  animation: modalSlideUp .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* -------- TOAST UPGRADE -------- */
.toast {
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 1px rgba(255,255,255,.1);
}

/* -------- LIGHT THEME PREMIUM ADDITIONS -------- */
html.light .scard:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.08), 0 0 20px rgba(2,136,209,.04);
}
html.light .alert-box {
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
html.light .toast {
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
html.light .info-dialog {
  box-shadow: 0 24px 80px rgba(0,0,0,.12);
}
html.light .tmp-warm { text-shadow: 0 0 20px rgba(230,81,0,.15); }
html.light .tmp-hot { text-shadow: 0 0 20px rgba(211,47,47,.15); }
html.light .tmp-cool { text-shadow: 0 0 20px rgba(2,136,209,.15); }
html.light #particleCanvas { opacity: .15; }

/* -------- REDUCED MOTION -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #particleCanvas { display: none; }
}

/* -------- HIDE MAX/MIN RECORDS FROM STATION CARDS -------- */
.records-row { display: none !important; }

/* ========== PAŠKI MOST — BRIDGE STATUS ========== */
.bridge-status { margin-bottom: var(--sp-sm); }

.bridge-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  animation: slideIn .4s ease both;
  transition: all .3s;
}

/* Compact (open) — single line pill */
.bridge-compact-icon { font-size: 16px; }
.bridge-compact-title {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.bridge-compact-note {
  font-size: 9px;
  color: var(--muted);
  opacity: .5;
  margin-left: auto;
}

.bridge-box.bridge-open {
  border-color: rgba(105,240,174,.15);
  background: rgba(105,240,174,.04);
}

/* Expanded (caution/closed) — full alert style */
.bridge-expanded {
  padding: 14px 18px;
  border-radius: var(--r-card);
  gap: var(--sp-sm);
}
.bridge-expanded .bridge-icon {
  font-size: clamp(24px, 4vw, 32px);
  flex-shrink: 0;
}
.bridge-expanded .bridge-info { flex: 1; min-width: 0; }
.bridge-expanded .bridge-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.bridge-expanded .bridge-header strong {
  font-family: 'Syne', sans-serif;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 700;
}

.bridge-box.bridge-caution {
  border-color: rgba(255,213,79,.25);
  background: linear-gradient(135deg, rgba(255,213,79,.08), rgba(255,213,79,.02));
}
.bridge-box.bridge-closed {
  border-color: rgba(255,107,107,.3);
  background: linear-gradient(135deg, rgba(255,107,107,.1), rgba(255,107,107,.03));
}

.bridge-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.bridge-badge.bridge-open {
  background: rgba(105,240,174,.12);
  color: var(--green);
  border: 1px solid rgba(105,240,174,.2);
}
.bridge-badge.bridge-caution {
  background: rgba(255,213,79,.12);
  color: var(--lightning);
  border: 1px solid rgba(255,213,79,.2);
  animation: cautionPulse 2s ease-in-out infinite;
}
.bridge-badge.bridge-closed {
  background: rgba(255,107,107,.15);
  color: var(--bura);
  border: 1px solid rgba(255,107,107,.25);
  animation: closedPulse 1.5s ease-in-out infinite;
}

@keyframes cautionPulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 12px rgba(255,213,79,.2); }
}
@keyframes closedPulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 16px rgba(255,107,107,.25); }
}

.bridge-desc {
  font-size: clamp(12px, 1.8vw, 13px);
  color: var(--muted);
  line-height: 1.4;
}

.bridge-note {
  font-size: 9px;
  color: var(--muted);
  opacity: .5;
  margin-top: 6px;
  letter-spacing: .3px;
}

@media (max-width: 600px) {
  .bridge-compact-note { display: none; }
}

/* Light theme */
html.light .bridge-box.bridge-open {
  background: rgba(46,125,50,.04);
  border-color: rgba(46,125,50,.12);
}
html.light .bridge-box.bridge-caution {
  background: linear-gradient(135deg, rgba(249,168,37,.06), transparent);
  border-color: rgba(249,168,37,.2);
}
html.light .bridge-box.bridge-closed {
  background: linear-gradient(135deg, rgba(211,47,47,.06), transparent);
  border-color: rgba(211,47,47,.2);
}

/* ========== PREMIUM COMPARISON CARDS ========== */

/* Bar tracks */
.bar-wrap {
  height: 8px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.bar-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.04);
  pointer-events: none;
}

/* Bars with shimmer */
.bar {
  height: 100%;
  border-radius: 10px;
  transition: width 1s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}
.bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: barShimmer 3s ease-in-out infinite;
}
@keyframes barShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* Bar gradients — enhanced */
.bar-c { background: linear-gradient(90deg, #0288d1, #4fc3f7, #26c6da); }
.bar-m { background: linear-gradient(90deg, #7b1fa2, #9575cd, #ce93d8); }
.bar-v { background: linear-gradient(90deg, #e65100, #ffb347, #ffd54f); }

/* Comparison values — animated */
.cmp-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 2.2vw, 16px);
  min-width: clamp(55px, 10vw, 70px);
  text-align: right;
  letter-spacing: -.3px;
}

/* Station name in comparison */
.cmp-loc {
  font-weight: 600;
  font-size: clamp(13px, 2vw, 15px);
  letter-spacing: .2px;
}

/* Big value glow */
.big-val {
  background: linear-gradient(135deg, var(--accent), var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(79,195,247,.2));
}

/* Comparison rows hover */
.cmp-row {
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .2s;
  margin-bottom: 8px;
}
.cmp-row:hover {
  background: rgba(255,255,255,.03);
}

/* Meta section */
.cmp-meta {
  padding: 14px 0 0;
}
.cmp-meta-line {
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .2s;
}
.cmp-meta-line:hover {
  background: rgba(255,255,255,.03);
}
.cmp-meta-text {
  font-size: 14px;
  line-height: 1.4;
}

/* Big row separator */
.big-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border), transparent) 1;
}

/* Light theme bars */
html.light .bar-c { background: linear-gradient(90deg, #0277bd, #0288d1, #039be5); }
html.light .bar-m { background: linear-gradient(90deg, #6a1b9a, #7b1fa2, #8e24aa); }
html.light .bar-v { background: linear-gradient(90deg, #d84315, #e65100, #ef6c00); }
html.light .bar-wrap { background: rgba(0,0,0,.04); }
html.light .cmp-row:hover { background: rgba(0,0,0,.02); }
html.light .big-val {
  background: linear-gradient(135deg, #0277bd, #00897b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========== PREMIUM FORECAST V2 ========== */
.fday {
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: clamp(16px, 3vw, 22px);
  padding: clamp(16px, 3vw, 24px) clamp(10px, 2vw, 16px);
  text-align: center;
  min-width: 0;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
}
.fday::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(79,195,247,.3), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.fday:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.3); border-color: rgba(79,195,247,.15); }
.fday:hover::before { opacity: 1; }

.fday-name {
  font-family: 'Syne', sans-serif;
  font-size: clamp(11px, 1.6vw, 13px);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: clamp(1.5px, .3vw, 2.5px);
  text-transform: uppercase;
}

.fday-icon {
  font-size: clamp(32px, 6vw, 42px);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
  margin: clamp(4px, 1vw, 8px) 0;
}

.fday-temps {
  display: flex;
  align-items: baseline;
  gap: clamp(4px, 1vw, 8px);
  justify-content: center;
}
.fday-max {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  letter-spacing: -.5px;
}
.fday-sep {
  color: var(--muted);
  opacity: .3;
  font-size: clamp(14px, 2vw, 18px);
}
.fday-min {
  font-family: 'Syne', sans-serif;
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 600;
  color: var(--muted);
}

.fday-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(11px, 1.5vw, 13px);
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}
.fday-detail-icon { font-size: 12px; }
.fday-rain-detail {
  color: #7986cb;
  background: rgba(121,134,203,.08);
}

/* Forecast stagger */
.fday:nth-child(1) { animation: fSlideUp .5s cubic-bezier(.16,1,.3,1) .05s both; }
.fday:nth-child(2) { animation: fSlideUp .5s cubic-bezier(.16,1,.3,1) .15s both; }
.fday:nth-child(3) { animation: fSlideUp .5s cubic-bezier(.16,1,.3,1) .25s both; }

/* ========== PREMIUM SEA CARD V2 ========== */
.sea-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(38,198,218,.14), rgba(79,195,247,.06));
  border: 1px solid rgba(38,198,218,.2);
  margin-bottom: var(--sp-sm);
  overflow: hidden;
  min-height: 64px;
}

.sea-hero-icon {
  font-size: 32px;
  z-index: 1;
  animation: seaBob 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

.sea-hero-text {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 800;
  color: var(--teal);
  z-index: 1;
  letter-spacing: .3px;
  text-shadow: 0 0 20px rgba(38,198,218,.2);
}

.sea-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  transition: all .25s;
}
.sea-stat:hover {
  background: linear-gradient(135deg, rgba(38,198,218,.08), rgba(38,198,218,.03));
  border-color: rgba(38,198,218,.15);
  transform: translateY(-1px);
}

.sea-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(38,198,218,.1);
  flex-shrink: 0;
}

.sea-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 800;
  color: var(--teal);
  text-shadow: 0 0 12px rgba(38,198,218,.15);
}

.sea-temp-val {
  color: var(--teal) !important;
  font-size: clamp(20px, 3.5vw, 26px) !important;
}

/* Light theme forecast */
html.light .fday {
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
  border-color: rgba(0,0,0,.06);
}
html.light .fday:hover { box-shadow: 0 8px 28px rgba(0,0,0,.08); }
html.light .fday-name { color: var(--accent); }
html.light .fday-detail { background: rgba(0,0,0,.03); }
html.light .fday-rain-detail { background: rgba(121,134,203,.08); }

html.light .sea-hero {
  background: linear-gradient(135deg, rgba(0,137,123,.1), rgba(2,136,209,.05));
  border-color: rgba(0,137,123,.15);
}
html.light .sea-stat {
  background: linear-gradient(135deg, rgba(0,0,0,.025), rgba(0,0,0,.01));
  border-color: rgba(0,0,0,.06);
}
html.light .sea-stat:hover {
  background: linear-gradient(135deg, rgba(0,137,123,.06), rgba(0,137,123,.02));
}

/* ========== PREMIUM WEEKLY CHART V2 ========== */
.weekly-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.5vw, 12px);
  height: clamp(120px, 20vw, 160px);
  margin-bottom: 0;
  padding: 0 4px;
}

.wbar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
  transition: all .3s;
}
.wbar-col:hover { transform: translateY(-2px); }

.wbar-today {
  position: relative;
}
.wbar-today::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 15%;
  right: 15%;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(79,195,247,.3);
}

.wbar {
  width: 100%;
  border-radius: 8px 8px 2px 2px;
  min-height: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -2px 12px rgba(79,195,247,.1);
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.wbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: barShimmer 4s ease-in-out infinite;
}

.wbar-col:hover .wbar {
  box-shadow: 0 -4px 20px rgba(79,195,247,.2);
  filter: brightness(1.15);
}

.wbar-range {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wbar-val {
  font-family: 'Syne', sans-serif;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 800;
  color: var(--text);
  transition: color .2s;
}
.wbar-col:hover .wbar-val { color: var(--accent); }

.wbar-minmax {
  display: flex;
  gap: 6px;
  font-size: clamp(9px, 1.3vw, 10px);
  font-weight: 600;
}
.wbar-mx { color: var(--warm); }
.wbar-mn { color: var(--accent); }

.wbar-day {
  font-family: 'Syne', sans-serif;
  font-size: clamp(9px, 1.3vw, 11px);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.wbar-today .wbar-day { color: var(--accent); }

/* ========== PREMIUM MAP V2 ========== */
.map-sec {
  position: relative;
  overflow: hidden;
}
.map-sec::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(79,195,247,.25), transparent);
  z-index: 1;
}

#leafletMap {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: inset 0 2px 12px rgba(0,0,0,.3);
}

.map-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--sp-sm);
  padding: 12px;
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.04);
}

.map-leg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .2s;
}
.map-leg-item:hover { background: rgba(255,255,255,.03); }

.map-leg-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

.map-leg-item span:last-child {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: -.3px;
}

/* Light theme map & weekly */
html.light #leafletMap {
  box-shadow: inset 0 2px 8px rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .map-legend {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.04);
}
html.light .wbar-today::after {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(2,136,209,.25);
}