/* --- 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:#060d19;
  --surface:rgba(10,22,42,.72);
  --surface2:rgba(12,28,54,.88);
  --border:rgba(126,190,255,.14);
  --border2:rgba(126,190,255,.26);
  --text:#f4f8ff;
  --muted:rgba(198,214,235,.74);
  --accent:#63cfff;
  --teal:#62e7d5;
  --bura:#ff8f97;
  --warm:#ffbf62;
  --green:#76efc2;
  --lightning:#ffe08a;
  --purple:#c8a8ff;
  --panel-shadow:0 18px 44px rgba(0,0,0,.28);
  --panel-glow:0 0 0 1px rgba(116,190,255,.05), 0 14px 38px rgba(2,8,20,.32);
  --panel-grad:linear-gradient(180deg, rgba(11,24,47,.78) 0%, rgba(7,16,32,.78) 100%);
  /* 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; background:var(--bg); overscroll-behavior:none; }
body { font-family:'DM Sans',sans-serif; background:linear-gradient(180deg,#081323 0%,#07101d 44%,#050b15 100%); color:var(--text); min-height:100vh; overflow-x:hidden; overscroll-behavior-y:none; }

/* 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(123,199,255,.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(32,220,200,.06) 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,217,90,.28); background:rgba(255,225,138,.08); }
.app-status.error { color:#ffb4a9; border-color:rgba(255,140,135,.28); background:rgba(255,140,135,.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:6px 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(70,190,255,.34); border-radius:clamp(12px,2vw,16px); display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px rgba(70,190,255,.24); }
.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(70,190,255,.15); border-color:rgba(70,190,255,.34); 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(70,190,255,.18); color:var(--accent); }

.refresh-btn { display:flex; align-items:center; gap:7px; background:rgba(70,190,255,.10); border:1px solid rgba(70,190,255,.24); 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(70,190,255,.18); }
.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,111,134,.12),rgba(255,140,135,.04)); border:1px solid rgba(255,111,134,.28); }
.alert-box.jugo { background:linear-gradient(135deg,rgba(32,220,200,.12),rgba(79,224,208,.04)); border:1px solid rgba(32,220,200,.28); }
.alert-box.lightning { background:linear-gradient(135deg,rgba(255,217,90,.12),rgba(255,225,138,.04)); border:1px solid rgba(255,217,90,.28); }
.alert-box.hot { background:linear-gradient(135deg,rgba(255,193,92,.12),rgba(77,184,255,.04)); border:1px solid rgba(255,193,92,.28); }
@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(70,190,255,.07),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(110px,20vw,160px); height:clamp(110px,20vw,160px); 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:#ff6f61; }
.scard:has(.last-seen.stale) .sdot { background:#ff6f61; box-shadow:0 0 6px #ff6f61; }
.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:#8799e6; } .sv-uv { color:var(--warm); }
.sv-pres { color:var(--teal); }  .sv-hum  { color:#8de3e9; }  .sv-sol  { color:#ffe18a; }
.wdir-badge { display:inline-flex; align-items:center; font-size:clamp(10px,1.5vw,11px); background:rgba(70,190,255,.15); 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(70,190,255,.18) !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(70,190,255,.15); border-color:rgba(70,190,255,.34); 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,#9b7fe0,var(--purple)); }
.bar-v { background:linear-gradient(90deg,var(--warm),#ff6f61); }
.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(70,190,255,.12); }
.cmp-meta-dot.min { background:var(--accent); box-shadow:0 0 0 4px rgba(70,190,255,.12); }
.cmp-meta-dot.max { background:#6ef1aa; 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(77,184,255,.12); }
.cmp-meta-text { flex:1; }

/* Sea card */
.sea-badge { display:flex; align-items:center; gap:10px; background:rgba(79,224,208,.08); border:1px solid rgba(79,224,208,.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; display: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(70,190,255,.18); 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(123,199,255,.1); border:1px solid rgba(70,190,255,.24); 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; }
  .bg-canvas { display:none; }
  .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(123,199,255,.1); color:var(--accent); border:1px solid rgba(70,190,255,.24); 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:#8799e6; }

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

/* Temp color classes */
.tmp-freeze { color:#8de3e9; }
.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:#8799e6; 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, 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(70,190,255,.10) 0%,transparent 70%); }
html.light .bg-canvas::after  { background:radial-gradient(circle,rgba(79,224,208,.06) 0%,transparent 70%); }
html.light .logo-icon { background:linear-gradient(135deg,#e3f0ff,#d0e8f7); border-color:rgba(123,199,255,.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(123,199,255,.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(70,190,255,.10); border:1px solid rgba(70,190,255,.24); 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(70,190,255,.18); }
.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(123,199,255,.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(70,190,255,.10); border:1px solid rgba(70,190,255,.24); 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(70,190,255,.18); }
.info-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:clamp(12px,3vw,28px); background:rgba(3,8,16,0); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); z-index:1200; transition:background .3s, backdrop-filter .3s; }
.info-modal.open { display:flex; background:rgba(3,8,16,.75); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.info-dialog { width:min(640px,100%); max-height:min(88vh,800px); overflow:hidden; background:linear-gradient(180deg, rgba(12,24,44,.98), rgba(8,16,30,.98)); border:1px solid rgba(79,195,247,.12); border-radius:24px; box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 1px rgba(255,255,255,.1); display:flex; flex-direction:column; }
.info-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
.info-title { font-family:'Syne',sans-serif; font-size:clamp(18px,2.2vw,22px); font-weight:800; color:var(--accent); }
.info-close { width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-size:18px; line-height:1; transition:all .2s; }
.info-close:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.15); }
.info-body { overflow:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
.info-intro { color:rgba(255,255,255,.7); font-size:14px; line-height:1.7; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.05); }
.info-block { display:flex; align-items:flex-start; gap:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:14px 16px; transition:all .2s; }
.info-block:hover { background:rgba(79,195,247,.05); border-color:rgba(79,195,247,.12); }
.info-block-icon { font-size:22px; flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:rgba(79,195,247,.08); border-radius:10px; }
.info-block-content { flex:1; min-width:0; }
.info-block h3 { font-family:'Syne',sans-serif; font-size:13px; letter-spacing:.5px; font-weight:700; color:var(--accent); margin-bottom:4px; }
.info-block p { font-size:13px; line-height:1.65; color:rgba(255,255,255,.65); margin:0; }
.info-footer { margin-top:8px; padding-top:14px; border-top:1px solid rgba(255,255,255,.05); display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:rgba(255,255,255,.35); text-align:center; }
.info-footer-tech { font-size:11px; color:rgba(255,255,255,.25); }
@media (max-width:700px){ .info-dialog { max-height:92vh; border-radius:20px; margin:0; } .info-head{padding:16px 18px;} .info-body{padding:16px 18px;} .info-block{padding:12px 14px; gap:12px;} .info-block-icon{width:32px;height:32px;font-size:18px;} }

/* 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(8,24,50,.9), rgba(6,18,40,.9));
  border: 1px solid rgba(77,184,255,.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: .5;
}

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

.sea-wave-path { fill: #4db8ff; }
.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(79,224,208,.06);
  border-color: rgba(79,224,208,.15);
}

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

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

.sea-stat-lbl {
  font-size: 10px;
  color: rgba(77,184,255,.5);
  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(123,199,255,.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: #8799e6;
  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: 700px) {
  .bridge-expanded,
  .bridge-expanded .bridge-info,
  .bridge-details,
  .bridge-details-panel,
  .bridge-hak-desc {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
}

@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(123,199,255,.1);
  background: linear-gradient(180deg, rgba(123,199,255,.03) 0%, transparent 100%);
  padding: var(--sp-lg) 0 var(--sp-md);
}

.logo-icon {
  position: relative;
  box-shadow: 0 0 30px rgba(70,190,255,.18), inset 0 0 20px rgba(70,190,255,.07);
  transition: all .3s;
}
.logo-icon:hover {
  box-shadow: 0 0 40px rgba(123,199,255,.25), inset 0 0 20px rgba(123,199,255,.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(70,190,255,.18) 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(70,190,255,.24);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 30px rgba(70,190,255,.07);
}
.scard::after {
  background: linear-gradient(135deg, rgba(123,199,255,.06), rgba(79,224,208,.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(70,190,255,.18);
  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(123,199,255,.1);
}

/* Beaufort badge */
.bft-badge {
  background: linear-gradient(135deg, rgba(70,190,255,.15), rgba(79,224,208,.08));
  border: 1px solid rgba(70,190,255,.18);
}

/* -------- 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(70,190,255,.34), 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(70,190,255,.18);
}

.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(123,199,255,.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(79,224,208,.3), transparent);
}

.wbar {
  background: linear-gradient(180deg, var(--accent), var(--teal)) !important;
  box-shadow: 0 -2px 10px rgba(70,190,255,.18);
  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(123,199,255,.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(123,199,255,.1);
}

.big-val {
  text-shadow: 0 0 20px rgba(70,190,255,.24);
}

.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);
  
}

/* -------- 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(70,190,255,.34);
}
.loader {
  box-shadow: 0 0 20px rgba(123,199,255,.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(123,199,255,.1);
  transition: all .2s;
}
.eco-badge:hover {
  box-shadow: 0 0 16px rgba(70,190,255,.24);
  transform: translateY(-1px);
}

/* -------- GLOBAL GLASS EFFECT -------- */
/* GLOBAL GLASS EFFECT — removed: caused white haze on scroll */

/* -------- SCROLLBAR CUSTOM -------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(70,190,255,.24); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(123,199,255,.35); }

/* -------- SELECTION COLOR -------- */
::selection { background: rgba(123,199,255,.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; display: 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(70,190,255,.10); }
.lw1 { animation: lwMove 4s ease-in-out infinite; }
.lw2 { fill: rgba(79,224,208,.06); animation: lwMove 6s ease-in-out infinite reverse; }
.lw3 { fill: rgba(123,199,255,.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);
  
}

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(2,136,209,.12), rgba(0,105,170,.06));
  border-color: rgba(2,136,209,.2);
}

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);
}
html.light .info-block h3 { color: var(--accent); }
html.light .info-block p { color: rgba(0,0,0,.65); }
html.light .info-intro { color: rgba(0,0,0,.6); }
html.light .info-block-icon { background: rgba(2,136,209,.08); }
html.light .info-footer { color: rgba(0,0,0,.35); border-top-color: rgba(0,0,0,.06); }
html.light .info-footer-tech { color: rgba(0,0,0,.25); }
html.light .info-close { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.5); }

/* Light theme: sea section - ocean blue on light bg */
html.light .sea-hero { background: linear-gradient(135deg, rgba(2,136,209,.12), rgba(0,105,170,.06)); border-color: rgba(2,136,209,.2); }
html.light .sea-hero-text { color: #01579b; text-shadow: none; }
html.light .sea-wave-path { fill: #0288d1; }
html.light .sea-stat { background: rgba(2,136,209,.05); border-color: rgba(2,136,209,.12); }
html.light .sea-stat:hover { background: rgba(2,136,209,.1); border-color: rgba(2,136,209,.2); }
html.light .sea-stat-icon { background: rgba(2,136,209,.1); color: #0277bd; }
html.light .sea-stat-val { color: #01579b; text-shadow: none; }
html.light .sea-stat-lbl { color: rgba(1,87,155,.55); }
html.light .sea-temp-val { color: #01579b !important; }

/* Light theme: compass */
html.light .compass-wrap svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.1)); }

/* Light theme: forecast hourly desktop panel */
html.light .fday-desk-panel { background: rgba(2,136,209,.03); border-color: rgba(2,136,209,.1); }
html.light .fdp-title { color: var(--accent); }
html.light .fdp-date { color: rgba(0,0,0,.4); }
html.light .fdp-close { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.5); }
html.light .fdp-head { border-bottom-color: rgba(0,0,0,.06); }
html.light .fdp-grid .fh-row { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.04); }
html.light .fh-time { color: rgba(0,0,0,.5); }
html.light .fh-temp { color: #0277bd; }
html.light .fh-wind { color: rgba(0,0,0,.4); }
html.light .fh-rain { color: #5c6bc0; }
html.light .fh-header { color: rgba(2,136,209,.7); }
html.light .fday-tap-hint { color: rgba(0,0,0,.2); }
html.light .fday:hover .fday-tap-hint { color: rgba(2,136,209,.5); }
html.light .fday-expanded { border-color: rgba(2,136,209,.2); background: rgba(2,136,209,.03); }
html.light .fday-hourly { border-top-color: rgba(0,0,0,.06); }

/* Light theme: forecast fullscreen modal (mobile) */
html.light .fm-overlay { background: linear-gradient(180deg, rgba(244,247,251,.99), rgba(255,255,255,.99)); }
html.light .fm-title { color: var(--accent); }
html.light .fm-date { color: rgba(0,0,0,.4); }
html.light .fm-close { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: rgba(0,0,0,.5); }
html.light .fm-head { border-bottom-color: rgba(0,0,0,.06); }
html.light .fm-col-header { color: rgba(0,0,0,.3); border-bottom-color: rgba(0,0,0,.06); }
html.light .fm-body .fh-row { border-bottom-color: rgba(0,0,0,.04); }
html.light .fm-body .fh-time { color: rgba(0,0,0,.55); }
html.light .fm-body .fh-temp { color: #0277bd; }

/* Light theme: bell animation */
html.light #notifBtn:not(.active)::after { border-color: rgba(2,136,209,.25); }

/* ================================================================
   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(123,199,255,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 20%, rgba(79,224,208,.03) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(209,178,255,.02) 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(123,199,255,.03) 0%, transparent 45%),
    radial-gradient(ellipse at 30% 60%, rgba(77,184,255,.015) 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: .2;
}

/* -------- 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(70,190,255,.24), 0 0 4px rgba(123,199,255,.1);
}
.icon-btn.active {
  box-shadow: 0 0 16px rgba(123,199,255,.25), 0 0 6px rgba(70,190,255,.18);
}
.lang-btn.active {
  box-shadow: 0 0 12px rgba(70,190,255,.18);
}
.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(123,199,255,.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(123,199,255,.03);
}

.fday:hover {
  box-shadow:
    0 12px 36px rgba(0,0,0,.3),
    0 0 20px rgba(123,199,255,.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(123,199,255,.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(70,190,255,.24); }
.tmp-warm { text-shadow: 0 0 30px rgba(77,184,255,.2); }
.tmp-hot { text-shadow: 0 0 30px rgba(255,111,134,.28); }

/* -------- 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(70,190,255,.34); }
.sens:hover .sv-rain { text-shadow: 0 0 12px rgba(121,134,203,.3); }
.sens:hover .sv-uv { text-shadow: 0 0 12px rgba(77,184,255,.3); }
.sens:hover .sv-pres { text-shadow: 0 0 12px rgba(79,224,208,.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(70,190,255,.34);
}

/* -------- INFO MODAL PREMIUM -------- */
.info-modal.open {
  animation: modalBgIn .3s ease both;
}
@keyframes modalBgIn {
  from { background: transparent; }
  to {  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 {
  
  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 {
  
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
html.light .toast {
  
  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,217,90,.28);
  background: linear-gradient(135deg, rgba(255,225,138,.08), rgba(255,225,138,.02));
}
.bridge-box.bridge-closed {
  border-color: rgba(255,140,135,.3);
  background: linear-gradient(135deg, rgba(255,111,134,.12), rgba(255,140,135,.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,225,138,.12);
  color: var(--lightning);
  border: 1px solid rgba(255,225,138,.2);
  animation: cautionPulse 2s ease-in-out infinite;
}
.bridge-badge.bridge-closed {
  background: rgba(255,140,135,.15);
  color: var(--bura);
  border: 1px solid rgba(255,111,134,.28);
  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,225,138,.2); }
}
@keyframes closedPulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 16px rgba(255,111,134,.28); }
}

.bridge-src-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.bridge-src-badge.hak {
  background: rgba(70,190,255,.15);
  color: var(--accent);
  border: 1px solid rgba(70,190,255,.24);
}
.bridge-src-badge.wind {
  background: rgba(255,255,255,.05);
  color: var(--muted);
  border: 1px solid var(--border);
}
.bridge-hak-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
  opacity: .8;
}
.bridge-desc-primary {
  font-size: clamp(13px, 1.9vw, 15px);
  color: var(--text);
  font-weight: 600;
}
.bridge-details {
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 8px;
}
.bridge-box.is-collapsible {
  padding: 0;
  overflow: hidden;
}
.bridge-box.is-collapsible.is-open {
  border-color: color-mix(in srgb, currentColor 18%, rgba(255,255,255,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.18);
}
.bridge-accordion-trigger {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 16px 18px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.bridge-accordion-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.bridge-title-stack {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.bridge-static-head { padding: 2px 0; }
.bridge-chevron {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  position: relative;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.bridge-chevron::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid color-mix(in srgb, var(--text) 78%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text) 78%, transparent);
  transform: rotate(45deg) translate(-1px, -1px);
}
.bridge-box.is-open .bridge-chevron {
  transform: rotate(180deg);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.bridge-accordion-cta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--accent-2);
}
.bridge-cta-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}
.bridge-details-toggle {
  cursor: pointer;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: 0;
  padding: 8px 2px;
  min-height: 44px;
  text-align: left;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bridge-details-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.bridge-details-panel {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 18px 0;
  transition: max-height .26s ease, opacity .18s ease, padding .26s ease;
}
.bridge-details-panel.open {
  max-height: 280px;
  opacity: 1;
  padding: 0 18px 18px;
}
.bridge-details-panel[hidden] {
  display: block !important;
}
.bridge-detail-grid {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}
.bridge-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bridge-detail-label {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 82%, #fff 18%);
}
.bridge-detail-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.bridge-details-panel .bridge-hak-desc {
  margin-top: 12px;
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal;
  word-break: break-word;
}
html.light .bridge-src-badge.hak {
  background: rgba(2,136,209,.08);
  border-color: rgba(2,136,209,.15);
}

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

.bridge-note {
  font-size: 11px;
  color: color-mix(in srgb, var(--muted) 76%, #ffffff 24%);
  opacity: .82;
  margin-top: 10px;
  margin-left: 2px;
  letter-spacing: .2px;
  line-height: 1.35;
}

@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, #9b7fe0, #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(70,190,255,.24));
}

/* 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(70,190,255,.34), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.fday:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,.3); border-color: rgba(70,190,255,.18); }
.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: #8799e6;
  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; }

/* Fday tap hint */
.fday-tap-hint { font-size:10px; color:rgba(255,255,255,.25); text-align:center; margin-top:8px; letter-spacing:.5px; transition:all .2s; }
.fday:hover .fday-tap-hint { color:rgba(79,195,247,.5); }
.fday-expanded .fday-tap-hint { display:none; }

/* Hourly forecast expandable panel */
.fday-hourly { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); animation:fhSlide .3s ease both; }
@keyframes fhSlide { from { opacity:0; } to { opacity:1; } }
.fh-header { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:rgba(79,195,247,.6); margin-bottom:8px; text-align:center; font-weight:600; }
.fh-row { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:5px 2px; border-bottom:1px solid rgba(255,255,255,.03); font-size:12px; }
.fh-row:last-child { border-bottom:none; }
.fh-time { color:rgba(255,255,255,.5); font-weight:600; font-family:'Syne',sans-serif; min-width:34px; font-size:11px; }
.fh-icon { font-size:13px; min-width:20px; text-align:center; }
.fh-temp { font-family:'Syne',sans-serif; font-weight:700; color:var(--teal); min-width:38px; text-align:right; font-size:12px; }
.fh-wind { color:rgba(255,255,255,.4); font-size:10px; min-width:30px; text-align:right; }
.fh-rain { color:#8799e6; font-size:10px; min-width:28px; text-align:right; }
.fday-expanded { border-color:rgba(79,195,247,.2); background:linear-gradient(180deg, rgba(79,195,247,.04), rgba(79,195,247,.01)); }

/* Desktop full-width hourly panel */
.fday-desk-panel { margin-top:14px; padding:18px 22px; background:linear-gradient(135deg, rgba(79,195,247,.04), rgba(79,195,247,.01)); border:1px solid rgba(79,195,247,.12); border-radius:18px; animation:fhSlide .25s ease both; }
.fdp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06); }
.fdp-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:var(--accent); }
.fdp-date { font-weight:500; color:rgba(255,255,255,.4); margin-left:4px; }
.fdp-close { width:32px; height:32px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.fdp-close:hover { background:rgba(255,255,255,.1); }
.fdp-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; }
.fdp-grid .fh-row { flex-direction:column; align-items:center; text-align:center; gap:6px; padding:12px 6px; border-radius:12px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); border-bottom:none; }
.fdp-grid .fh-time { min-width:auto; font-size:13px; }
.fdp-grid .fh-icon { min-width:auto; font-size:18px; }
.fdp-grid .fh-temp { min-width:auto; text-align:center; font-size:15px; }
.fdp-grid .fh-wind { min-width:auto; text-align:center; font-size:11px; }
.fdp-grid .fh-rain { min-width:auto; text-align:center; font-size:11px; }

/* Fullscreen forecast modal (mobile) */
.fm-overlay { position:fixed; inset:0; z-index:1200; background:linear-gradient(180deg, rgba(8,19,35,.99), rgba(5,13,24,.99)); display:flex; flex-direction:column; animation:fmFadeIn .25s ease; }
@keyframes fmFadeIn { from { opacity:0; } to { opacity:1; } }
.fm-panel { width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; }
.fm-head { display:flex; align-items:center; justify-content:space-between; padding:max(env(safe-area-inset-top, 16px), 16px) 20px 16px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; }
.fm-title { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--accent); }
.fm-date { font-weight:500; font-size:15px; color:rgba(255,255,255,.4); margin-left:8px; }
.fm-close { width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.fm-close:hover { background:rgba(255,255,255,.1); }
.fm-body { overflow-y:auto; padding:12px 20px max(env(safe-area-inset-bottom, 24px), 24px); flex:1; }
.fm-col-header { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 2px 12px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,.06); font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.3); }
.fm-col-header span { min-width:30px; }
.fm-col-header span:nth-child(3) { min-width:44px; text-align:right; }
.fm-col-header span:nth-child(4) { min-width:36px; text-align:right; }
.fm-col-header span:nth-child(5) { min-width:32px; text-align:right; }
.fm-body .fh-row { padding:14px 2px; border-bottom:1px solid rgba(255,255,255,.04); font-size:15px; }
.fm-body .fh-time { font-size:15px; min-width:48px; color:rgba(255,255,255,.65); font-weight:700; }
.fm-body .fh-icon { font-size:20px; min-width:30px; }
.fm-body .fh-temp { font-size:18px; min-width:50px; }
.fm-body .fh-wind { font-size:14px; min-width:40px; }
.fm-body .fh-rain { font-size:14px; min-width:36px; }
@media (min-width:721px) { .fm-overlay { display:none !important; } }

/* ========== 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(8,24,50,.9), rgba(6,18,40,.9));
  border: 1px solid rgba(77,184,255,.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: #4db8ff;
  z-index: 1;
  letter-spacing: .3px;
  text-shadow: 0 0 24px rgba(77,184,255,.3);
}

.sea-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(77,184,255,.06), rgba(77,184,255,.03));
  border: 1px solid rgba(77,184,255,.12);
  transition: all .25s;
}
.sea-stat:hover {
  background: linear-gradient(135deg, rgba(77,184,255,.12), rgba(77,184,255,.05));
  border-color: rgba(77,184,255,.22);
  transform: translateY(-1px);
}

.sea-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(77,184,255,.12);
  color: #4db8ff;
  flex-shrink: 0;
}

.sea-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 800;
  color: #4db8ff;
  text-shadow: 0 0 16px rgba(77,184,255,.2);
}

.sea-temp-val {
  color: #4db8ff !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(2,136,209,.12), rgba(0,105,170,.06));
  border-color: rgba(2,136,209,.2);
}
html.light .sea-hero-text { color: #01579b; text-shadow: none; }
html.light .sea-wave-path { fill: #0288d1; }
html.light .sea-stat {
  background: rgba(2,136,209,.05);
  border-color: rgba(2,136,209,.12);
}
html.light .sea-stat:hover {
  background: rgba(2,136,209,.1);
  border-color: rgba(2,136,209,.2);
}
html.light .sea-stat-icon { background: rgba(2,136,209,.1); color: #0277bd; }
html.light .sea-stat-val { color: #01579b; text-shadow: none; }
html.light .sea-stat-lbl { color: rgba(1,87,155,.55); }
html.light .sea-temp-val { color: #01579b !important; }

/* ========== 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(70,190,255,.34);
}

.wbar {
  width: 100%;
  border-radius: 8px 8px 2px 2px;
  min-height: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -2px 12px rgba(123,199,255,.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(70,190,255,.24);
  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(123,199,255,.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);
}

/* ========== LIGHTNING CATEGORIES ========== */
.alert-box.lightning-danger {
  background: linear-gradient(135deg, rgba(255,71,87,.12), rgba(255,71,87,.04));
  border: 1px solid rgba(255,71,87,.3);
  border-left: 4px solid #ff4757;
  animation: alertSlide .5s cubic-bezier(.16,1,.3,1) both, dangerPulse 2s ease-in-out infinite;
}
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,71,87,.15); }
  50% { box-shadow: 0 4px 30px rgba(255,71,87,.3); }
}

.alert-box.lightning-near {
  background: linear-gradient(135deg, rgba(255,217,90,.12), rgba(255,225,138,.04));
  border: 1px solid rgba(255,217,90,.28);
  border-left: 4px solid var(--lightning);
}

.alert-box.lightning-area {
  background: linear-gradient(135deg, rgba(77,184,255,.08), rgba(77,184,255,.03));
  border: 1px solid rgba(77,184,255,.2);
  border-left: 4px solid var(--warm);
}

/* Bridge warning (yellow) category */
.bridge-box.bridge-warning {
  border-color: rgba(255,225,138,.2);
  background: linear-gradient(135deg, rgba(255,225,138,.07), rgba(255,225,138,.02));
}
.bridge-badge.bridge-warning {
  background: rgba(255,225,138,.12);
  color: var(--lightning);
  border: 1px solid rgba(255,225,138,.2);
  animation: cautionPulse 2.5s ease-in-out infinite;
}
html.light .bridge-box.bridge-warning {
  background: linear-gradient(135deg, rgba(249,168,37,.05), transparent);
  border-color: rgba(249,168,37,.15);
}

/* Tabular nums za stabilne brojeve tijekom animacije */
.temp-big, .sens-val, .cmp-val, .big-val, .cstat-val, .sea-stat-val, .fday-max, .fday-min {
  font-variant-numeric: tabular-nums;
}

/* Glatka rotacija strelice vjetra */
.wind-arrow {
  display: inline-block;
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}

/* ========== NOTIFICATION BELL ACTIVE STATE ========== */
.icon-btn.active#notifBtn {
  background: rgba(105,240,174,.12);
  border-color: rgba(105,240,174,.3);
  color: var(--green);
  animation: bellPulse 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(105,240,174,.2);
}

/* Inactive bell — attention ring animation */
#notifBtn:not(.active) {
  position: relative;
  animation: bellRing 4s ease-in-out infinite;
}

@keyframes bellRing {
  0%, 70%, 100% { transform: rotate(0deg); }
  72% { transform: rotate(12deg); }
  74% { transform: rotate(-10deg); }
  76% { transform: rotate(8deg); }
  78% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); }
  82% { transform: rotate(0deg); }
}

#notifBtn:not(.active)::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 1.5px solid rgba(79,195,247,.35);
  animation: bellAttention 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bellAttention {
  0%, 68%, 88%, 100% { opacity: 0; transform: scale(1); }
  72% { opacity: 1; transform: scale(1); }
  84% { opacity: 0; transform: scale(1.3); }
}

@keyframes bellPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(105,240,174,.15); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(105,240,174,.3); transform: scale(1.08); }
}

/* Bell ring animation on toggle */
.icon-btn.active#notifBtn::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
  animation: dotBlink 3s ease-in-out infinite;
}

@keyframes dotBlink {
  0%, 80%, 100% { opacity: 1; }
  40% { opacity: .2; }
}

html.light .icon-btn.active#notifBtn {
  background: rgba(46,125,50,.08);
  border-color: rgba(46,125,50,.2);
  color: var(--green);
  box-shadow: 0 0 8px rgba(46,125,50,.12);
}

/* Mini wind compass (za inline korištenje) */
.wind-compass {
  position: relative;
  width: 32px;
  height: 32px;
  border: 2px solid var(--border2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  vertical-align: middle;
}
.wind-compass::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 2px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}
.wind-needle {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}
.wind-needle-icon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 12px solid var(--bura);
  transform: translateY(-4px);
}


/* Theme override */

body.bg-dawn  { background:linear-gradient(160deg,#161521 0%,#08111f 100%); }
body.bg-morning { background:linear-gradient(160deg,#0f2032 0%,#08111f 100%); }
body.bg-day   { background:linear-gradient(160deg,#11253b 0%,#08111f 100%); }
body.bg-dusk  { background:linear-gradient(160deg,#1b1524 0%,#08111f 100%); }
body.bg-night { background:linear-gradient(160deg,#08111f 0%,#050a13 100%); }
header{border-bottom-color:rgba(255,255,255,.08);}
.logo-icon,.scard,.chart-sec,.map-sec,.icard{backdrop-filter: blur(18px);}
.scard,.chart-sec,.map-sec,.icard{box-shadow:0 18px 55px rgba(0,0,0,.28);}
.scard::after{background:linear-gradient(135deg,rgba(123,199,255,.09),rgba(209,178,255,.03),transparent);}
.refresh-btn,.ctab.active,.lang-btn.active,.icon-btn.active{box-shadow:0 12px 28px rgba(70,190,255,.12);}



/* === 20x BETTER VISUAL OVERHAUL === */
:root {
  --bg:#060d19;
  --surface:rgba(10,22,42,.72);
  --surface2:rgba(12,28,54,.88);
  --border:rgba(126,190,255,.14);
  --border2:rgba(126,190,255,.26);
  --text:#f4f8ff;
  --muted:rgba(198,214,235,.74);
  --accent:#63cfff;
  --teal:#62e7d5;
  --bura:#ff8f97;
  --warm:#ffbf62;
  --green:#76efc2;
  --lightning:#ffe08a;
  --purple:#c8a8ff;
  --panel-shadow:0 18px 44px rgba(0,0,0,.28);
  --panel-glow:0 0 0 1px rgba(116,190,255,.05), 0 14px 38px rgba(2,8,20,.32);
  --panel-grad:linear-gradient(180deg, rgba(11,24,47,.78) 0%, rgba(7,16,32,.78) 100%);
  /* 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;
}
html {
  background: linear-gradient(180deg,#081323 0%, #07101d 44%, #050b15 100%);
}
body {
  background: linear-gradient(180deg,#081323 0%, #07101d 44%, #050b15 100%);
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.008) 0 1px, transparent 1px 120px);
  z-index:0;
}
.bg-canvas::before {
  width:min(980px,130vw); height:min(980px,130vw);
  background:radial-gradient(circle,rgba(93,199,255,.06) 0%,rgba(93,199,255,.02) 28%,transparent 68%);
  filter:blur(8px);
}
.bg-canvas::after {
  width:min(760px,110vw); height:min(760px,110vw);
  background:radial-gradient(circle,rgba(55,230,212,.05) 0%,rgba(184,143,255,.02) 34%,transparent 72%);
  filter:blur(10px);
}
header {
  position:sticky;
  top:0;
  z-index:20;
  margin:0 calc(var(--sp-sm) * -1) var(--sp-lg);
  padding:18px clamp(14px,3vw,24px);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  background:linear-gradient(180deg, rgba(5,14,27,.82), rgba(8,19,35,.68));
  border:1px solid rgba(138,192,255,.12);
  border-radius:0 0 26px 26px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.logo-icon {
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.18), transparent 0 30%),
    linear-gradient(145deg,#14335b,#0d1c34 55%, #081323 100%);
  border:1px solid rgba(122,201,255,.42);
  box-shadow:0 14px 34px rgba(23,119,199,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.logo-text h1 {
  background:linear-gradient(90deg,#ffffff 0%, #cfe7ff 36%, #86ddff 72%, #6df2d6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.logo-text span,
.upd-time,
.sun-item,
footer p,
.big-lbl,
.a-text p,
.cstat-lbl,
.rec-lbl,
.sens-lbl,
.icard-title,
.sec-label,
.sea-item .lbl,
.cmp-loc,
.last-seen,
.wbar-val,
.chart-loading,
.app-status-text {
  color:var(--muted);
}
.icon-btn,
.lang-toggle,
.ctab,
.refresh-btn,
.sea-badge,
.app-status,
.chart-sec,
.map-sec,
.weekly-sec,
.icard,
.scard {
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
.icon-btn {
  background:linear-gradient(180deg, rgba(14,30,53,.92), rgba(9,21,38,.92));
  border-color:rgba(138,192,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.18);
}
.icon-btn:hover,
.icon-btn.active {
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(43,162,255,.18);
}
.refresh-btn {
  background:linear-gradient(135deg, rgba(38,131,255,.20), rgba(55,230,212,.14));
  border-color:rgba(118,206,255,.34);
  color:#e7f6ff;
  box-shadow:0 10px 26px rgba(22,111,201,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.refresh-btn:hover {
  background:linear-gradient(135deg, rgba(38,131,255,.28), rgba(55,230,212,.20));
  border-color:rgba(118,206,255,.48);
  transform:translateY(-1px);
}
.lang-btn.active,
.ctab.active,
.icon-btn.active {
  background:linear-gradient(135deg, rgba(93,199,255,.24), rgba(55,230,212,.16));
  color:#f6fbff;
  border-color:rgba(116,211,255,.44);
}
.alert-box {
  box-shadow:0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.scard,
.chart-sec,
.map-sec,
.weekly-sec,
.icard {
  background:
    linear-gradient(180deg, rgba(13,28,48,.82), rgba(9,21,38,.92)),
    linear-gradient(135deg, rgba(93,199,255,.08), transparent 34%);
  border:1px solid rgba(138,192,255,.16);
  box-shadow:
    0 22px 50px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.02);
}
.scard::before,
.chart-sec::before,
.map-sec::before,
.weekly-sec::before,
.icard::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 18%, transparent 82%, rgba(255,255,255,.03));
  opacity:.75;
}
.scard:hover,
.chart-sec:hover,
.map-sec:hover,
.weekly-sec:hover,
.icard:hover {
  border-color:rgba(126,205,255,.34);
  box-shadow:
    0 26px 64px rgba(0,0,0,.30),
    0 0 0 1px rgba(93,199,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-4px);
}
.scard-head {
  margin-bottom:18px;
}
.station-name,
.card-title,
.chart-hdr h3,
.chart-hdr h2,
.icard .big-val,
.sea-badge-text,
.cstat-val,
.sens-val,
.rec-val,
.feels-val,
.temp-big,
.big-val {
  text-shadow:0 2px 16px rgba(0,0,0,.24);
}
.temp-big {
  font-size:clamp(48px,8vw,66px);
  letter-spacing:-2px;
  background:linear-gradient(180deg,#ffffff 0%, #d8eaff 38%, #8ee5ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 24px rgba(69,163,255,.18));
}
.sdot {
  width:10px;
  height:10px;
  box-shadow:0 0 0 4px rgba(113,240,190,.12), 0 0 12px currentColor;
}
.temp-chip,
.wdir-badge,
.eco-badge,
.sea-badge {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.16);
}
.wdir-badge {
  background:linear-gradient(135deg, rgba(93,199,255,.20), rgba(55,230,212,.12));
  border:1px solid rgba(121,217,255,.24);
  color:#dff7ff;
}
.divider,
.chart-stats,
.big-row,
footer,
header,
.bar-wrap {
  border-color:rgba(138,192,255,.12);
}
.feels,
.sens,
.sea-item,
.rec {
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px 12px;
}
.records-row {
  gap:12px;
}
.sens-grid {
  gap:12px;
}
.bar-wrap {
  background:rgba(255,255,255,.08);
}
.bar-c { background:linear-gradient(90deg,#4bc6ff,#2df0d3); box-shadow:0 0 24px rgba(75,198,255,.16); }
.bar-m { background:linear-gradient(90deg,#9e7cff,#df9dff); box-shadow:0 0 24px rgba(158,124,255,.14); }
.bar-v { background:linear-gradient(90deg,#ffb458,#ff7f63); box-shadow:0 0 24px rgba(255,180,88,.14); }
.weekly-bars { gap:8px; }
.wbar {
  background:linear-gradient(180deg,#75dcff 0%, #33e8d2 100%);
  box-shadow:0 0 24px rgba(51,232,210,.14);
  opacity:.88;
}
.chart-svg .grid line,
.chart-svg .grid path {
  stroke:rgba(175,212,255,.14) !important;
}
#leafletMap {
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 16px 32px rgba(0,0,0,.22);
}
.leaflet-control-zoom a,
.leaflet-control-attribution {
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}
.sea-badge {
  background:linear-gradient(135deg, rgba(55,230,212,.14), rgba(93,199,255,.10));
  border-color:rgba(95,227,220,.24);
}
.cmp-meta {
  font-size:15px;
}
.cmp-meta-dot { box-shadow:0 0 0 6px rgba(93,199,255,.10); }
.loading-overlay {
  background:
    radial-gradient(circle at 50% 30%, rgba(93,199,255,.12), transparent 0 26%),
    linear-gradient(180deg,#081323 0%, #050b15 100%);
}
.loader {
  border:3px solid rgba(93,199,255,.14);
  border-top-color:#7de9ff;
  box-shadow:0 0 28px rgba(93,199,255,.14);
}
@media (max-width: 720px) {
  header {
    border-radius: 0;
    padding: 14px 16px 16px;
    margin-left: -12px;
    margin-right: -12px;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .scard,
  .chart-sec,
  .map-sec,
  .weekly-sec,
  .icard {
    border-radius:22px;
  }
  .temp-big {
    font-size:clamp(44px,14vw,58px);
  }
}


/* ==== THEME HARMONY PASS ==== */
header,
.scard,
.chart-sec,
.map-sec,
.icard,
.forecast-sec,
.weekly-sec,
.wind-chart-sec,
.bridge-box,
.fday,
footer {
  background: var(--panel-grad);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--panel-glow);
}

header {
  padding: clamp(18px,3vw,26px);
  border: 1px solid var(--border);
  border-radius: calc(var(--r-card) + 8px);
  background:
    radial-gradient(circle at 0% 0%, rgba(99,207,255,.08), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(98,231,213,.07), transparent 22%),
    linear-gradient(180deg, rgba(7,18,38,.86) 0%, rgba(6,14,28,.86) 100%);
}

.scard,
.chart-sec,
.map-sec,
.icard,
.forecast-sec,
.weekly-sec,
.wind-chart-sec {
  border-color: var(--border);
}

.scard::after,
.icard::after { background: linear-gradient(135deg, rgba(99,207,255,.06), transparent 45%); }

.scard:hover,
.chart-sec:hover,
.map-sec:hover,
.icard:hover,
.forecast-sec:hover,
.weekly-sec:hover,
.wind-chart-sec:hover,
.bridge-box:hover {
  border-color: var(--border2);
  box-shadow: 0 20px 50px rgba(2,8,20,.38), 0 0 0 1px rgba(102,208,255,.10);
}

.logo-icon,
.icon-btn,
.theme-btn,
.lang-toggle,
.refresh-btn,
.share-btn,
.pwa-install,
.ctab,
.eco-badge,
.wittboy-badge,
.bft-badge,
.wdir-badge,
.sea-badge,
.bridge-src-badge,
.bridge-badge {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.logo-text h1 {
  text-shadow: 0 2px 18px rgba(99,207,255,.12);
}

.icon-btn,
.theme-btn,
.lang-toggle,
.refresh-btn,
.share-btn,
.pwa-install,
.ctab {
  background: rgba(10,25,48,.72);
  border-color: rgba(116,190,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.icon-btn:hover,
.theme-btn:hover,
.refresh-btn:hover,
.share-btn:hover,
.pwa-install:hover,
.ctab:hover {
  background: rgba(15,33,62,.90);
}

.lang-btn.active,
.ctab.active,
.refresh-btn,
.pwa-install,
.eco-badge,
.wittboy-badge,
.bft-badge,
.wdir-badge,
.bridge-src-badge.hak {
  background: linear-gradient(180deg, rgba(74,170,245,.24), rgba(50,126,210,.16));
  border-color: rgba(99,207,255,.24);
  color: #a7e6ff;
}

.share-btn {
  background: linear-gradient(180deg, rgba(77,184,146,.18), rgba(29,110,88,.16));
  border-color: rgba(118,239,194,.22);
  color: #95f2cf;
}

.alert-box {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 10px 28px rgba(4,10,22,.18);
}

.bridge-box {
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.02), transparent 40%),
    linear-gradient(180deg, rgba(19,28,54,.72) 0%, rgba(13,21,40,.80) 100%);
}

.bridge-box.bridge-open {
  background: linear-gradient(180deg, rgba(13,44,35,.42) 0%, rgba(8,25,22,.72) 100%);
  border-color: rgba(118,239,194,.22);
}
.bridge-box.bridge-caution {
  background: linear-gradient(180deg, rgba(67,53,18,.36) 0%, rgba(26,22,13,.74) 100%);
  border-color: rgba(255,224,138,.26);
}
.bridge-box.bridge-warning {
  background: linear-gradient(180deg, rgba(59,43,17,.34) 0%, rgba(21,18,12,.74) 100%);
  border-color: rgba(255,191,98,.24);
}
.bridge-box.bridge-closed {
  background: linear-gradient(180deg, rgba(59,21,31,.38) 0%, rgba(24,14,22,.78) 100%);
  border-color: rgba(255,143,151,.28);
}

.bridge-desc-primary { color:#f5f8ff; }
.bridge-hak-desc,
.bridge-desc,
footer p,
.smeta,
.sun-item,
.upd-time,
.fday-name,
.fday-min,
.cstat-lbl,
.icard-title,
.big-lbl,
.sea-item .lbl,
.cmp-meta,
.rain-stat-lbl,
.bridge-note,
.a-text p { color: var(--muted); }

.fday,
.bar-wrap,
.sea-item,
.sens,
.cmp-row .bar-wrap,
.skeleton {
  background-color: rgba(255,255,255,.028);
}

.bar-c { background: linear-gradient(90deg, #68d6ff, #63e7d6); }
.bar-m { background: linear-gradient(90deg, #b58cff, #d2a8ff); }
.bar-v { background: linear-gradient(90deg, #ffb95e, #ff8978); }
.wbar,
.solar-bar { filter: saturate(1.05) brightness(1.02); }

.cmp-meta-line {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.045);
}
.cmp-meta-line:first-child { border-top: 0; padding-top: 0; }

#leafletMap {
  border-radius: calc(var(--r-card) - 4px);
  overflow: hidden;
}

footer { padding: 18px 0 0; }

@media (max-width: 700px) {
  header {
    padding: 14px 16px 16px;
    border-radius: 0;
    margin-left: -12px;
    margin-right: -12px;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .wrapper { padding: 0 12px 56px; }
  .scard,
  .chart-sec,
  .map-sec,
  .icard,
  .forecast-sec,
  .weekly-sec,
  .wind-chart-sec,
  .bridge-expanded { border-radius: 22px; }
}


/* ==== FINAL 10/10 POLISH ==== */
@media (max-width: 720px) {
  .wrapper { padding-top: 0; padding-left: 12px; padding-right: 12px; }
  header {
    margin-left: -12px;
    margin-right: -12px;
    padding: 14px 16px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    top: 0;
    background: linear-gradient(180deg, rgba(5,14,27,.96), rgba(8,19,35,.93));
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
  }
  .logo-icon { width: 48px; height: 48px; }
  .logo-text h1 { font-size: clamp(20px, 7.8vw, 28px); }
  .logo-text span { font-size: 10px; letter-spacing: 1.6px; }
  .hrow { gap: 8px; }
  .live-badge, .upd-time { font-size: 12px; }
  .icon-btn { width: 38px; height: 38px; border-radius: 13px; }
  .refresh-btn { padding: 8px 14px; }
  .lang-btn { padding: 8px 14px; }
  .bridge-box.bridge-expanded { padding: 16px; }
  .bridge-box.is-collapsible { padding: 0; }
  .bridge-accordion-trigger { padding: 16px 16px 12px; }
  .bridge-details-panel.open { padding: 0 16px 16px; }
  .bridge-expanded .bridge-header { gap: 8px; }
  .bridge-expanded .bridge-header strong { font-size: 16px; }
  .bridge-desc-primary { font-size: 15px; line-height: 1.35; }
  .bridge-hak-desc { font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--muted) 78%, #fff 22%); }
  .bridge-note { font-size: 12px; opacity: .92; margin-top: 8px; }
  .scard { padding: 14px; }
  .sens-grid { gap: 10px; }
  .sens, .feels, .rec, .sea-item { border-radius: 15px; }
  .chart-sec, .map-sec, .weekly-sec, .forecast-sec { padding: 14px; }
  .chart-hdr { margin-bottom: 12px; }
  .cmp-meta { font-size: 14px; line-height: 1.45; }
  .cmp-meta-line { padding: 10px 0; }
  .sec-label { margin-bottom: 10px; }
  .fday { padding: 14px 10px; }
  footer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

@media (min-width: 721px) {
  .bridge-note { opacity: .86; }
  .upd-time, .sun-item, footer p, .cmp-meta { color: color-mix(in srgb, var(--muted) 80%, #ffffff 20%); }
}


/* ===== Premium sea / forecast / bridge refresh ===== */
.sea-hero { align-items: flex-start; min-height: 118px; }
.sea-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sea-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(77,184,255,.12);
  border: 1px solid rgba(77,184,255,.18);
  color: #9ad7ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.sea-hero-sub {
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: rgba(245,248,255,.88);
  line-height: 1.45;
}
.sea-hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.sea-hero-meta span {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  color: rgba(255,255,255,.72);
}
#waveD { display: inline-flex; align-items: center; gap: 8px; }
.sea-dir-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(77,184,255,.14);
  border: 1px solid rgba(77,184,255,.18);
  font-size: 13px;
  line-height: 1;
  color: #9ad7ff;
}

.forecast-days { gap: 14px; }
.fday {
  text-align: left;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.fday-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.fday-date {
  font-size: 11px;
  color: rgba(255,255,255,.42);
  margin-top: 3px;
  font-weight: 600;
}
.fday-summary {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(245,248,255,.82);
  min-height: 38px;
  margin-bottom: 10px;
}
.fday-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.fday-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.fday-risk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.fday-risk.stable { background: rgba(105,240,174,.12); color: #9ff2be; border: 1px solid rgba(105,240,174,.18); }
.fday-risk.wind { background: rgba(255,216,102,.14); color: #ffe38b; border: 1px solid rgba(255,216,102,.2); }
.fday-risk.rain { background: rgba(123,199,255,.14); color: #a8ddff; border: 1px solid rgba(123,199,255,.2); }
.fday-tap-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  color: rgba(255,255,255,.45);
  letter-spacing: .3px;
}
.fday-tap-hint strong {
  font-size: 11px;
  font-weight: 800;
  color: #9ad7ff;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.bridge-box.is-collapsible {
  background: linear-gradient(135deg, rgba(20,32,54,.92), rgba(10,18,32,.94));
  border-color: rgba(123,199,255,.14);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.bridge-box.bridge-warning,
.bridge-box.bridge-caution,
.bridge-box.bridge-closed {
  position: relative;
  overflow: hidden;
}
.bridge-box.bridge-warning::before,
.bridge-box.bridge-caution::before,
.bridge-box.bridge-closed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.03), transparent 42%);
  pointer-events: none;
}
.bridge-accordion-trigger { min-height: 86px; }
.bridge-accordion-top { margin-bottom: 10px; }
.bridge-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.bridge-desc-primary { line-height: 1.45; }
.bridge-detail-grid { background: rgba(255,255,255,.04); }

html.light .sea-kicker {
  background: rgba(2,136,209,.1);
  border-color: rgba(2,136,209,.16);
  color: #0277bd;
}
html.light .sea-hero-sub { color: rgba(1,87,155,.82); }
html.light .sea-hero-meta span {
  background: rgba(2,136,209,.05);
  border-color: rgba(2,136,209,.1);
  color: rgba(1,87,155,.76);
}
html.light .sea-dir-arrow {
  background: rgba(2,136,209,.08);
  border-color: rgba(2,136,209,.14);
  color: #0277bd;
}
html.light .fday-date { color: rgba(1,87,155,.48); }
html.light .fday-summary { color: rgba(0,0,0,.72); }
html.light .fday-detail {
  background: rgba(2,136,209,.04);
  border-color: rgba(2,136,209,.08);
  color: rgba(0,0,0,.72);
}
html.light .fday-tap-hint { color: rgba(0,0,0,.45); border-top-color: rgba(0,0,0,.06); }
html.light .fday-tap-hint strong { color: #0277bd; }
html.light .fday-risk.stable { color: #1b8f4a; background: rgba(105,240,174,.14); }
html.light .fday-risk.wind { color: #8a6400; background: rgba(255,216,102,.22); }
html.light .fday-risk.rain { color: #01579b; background: rgba(123,199,255,.18); }
html.light .bridge-box.is-collapsible {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,249,252,.96));
  border-color: rgba(2,136,209,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

@media (max-width: 720px) {
  .sea-hero { padding: 16px 16px 18px; min-height: 132px; }
  .sea-hero-text { font-size: 20px; }
  .sea-hero-sub { font-size: 13px; }
  .sea-hero-meta { gap: 6px; }
  .forecast-days { grid-template-columns: 1fr; }
  .fday-summary { min-height: 0; }
}


/* ===== FINAL POLISH PASS ===== */
.bridge-box.is-collapsible { padding: 0; }
.bridge-accordion-trigger { padding: 14px 16px 10px; min-height: 0; }
.bridge-accordion-top { margin-bottom: 6px; align-items: center; }
.bridge-title-stack { gap: 8px; }
.bridge-desc-primary { font-size: clamp(14px, 1.9vw, 15px); line-height: 1.35; }
.bridge-accordion-cta { margin-top: 10px; padding-top: 10px; }
.bridge-cta-label { font-size: 12px; }
.bridge-details-panel { padding: 0 16px 0; }
.bridge-details-panel.open { max-height: 220px; padding: 0 16px 14px; }
.bridge-detail-grid { gap: 6px; padding: 10px 12px; border-radius: 14px; }
.bridge-hak-desc { margin-top: 8px; font-size: 12px; }
.bridge-chevron { width: 30px; min-width: 30px; height: 30px; }
.bridge-note { margin-top: 8px; }

.sea-grid.compact-sea { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sea-stat.optional-muted { opacity: .7; }

.fday { padding: 14px 14px 12px; border-radius: 18px; }
.fday-topline { margin-bottom: 8px; }
.fday-dayblock { min-width: 0; }
.fday-main { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fday-main .fday-icon { width: 72px; min-width: 72px; display: flex; align-items: center; justify-content: center; margin: 0; }
.fday-main-copy { min-width: 0; flex: 1; }
.fday-summary { margin: 0 0 6px; min-height: 0; font-size: 14px; line-height: 1.35; }
.fday-temps { margin-bottom: 0; }
.fday-max { font-size: clamp(28px, 5vw, 34px); }
.fday-min { font-size: 18px; opacity: .72; }
.fday-metrics.compact { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 0; }
.fday-detail { min-height: 40px; justify-content: center; padding: 7px 10px; }
.fday-tap-hint { margin-top: 10px; padding-top: 10px; align-items: center; }
.fday-tap-hint strong { text-transform: none; font-size: 12px; }
.fday-tap-arrow { margin-left: auto; color: #9ad7ff; font-size: 17px; line-height: 1; }
.fday-risk { padding: 4px 9px; font-size: 10px; }

.fm-overlay { background: linear-gradient(180deg, rgba(4,10,20,.92), rgba(3,8,16,.97)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fm-panel { max-width: 760px; margin: 0 auto; }
.fm-head { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(4,10,20,.98), rgba(4,10,20,.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: max(env(safe-area-inset-top, 16px), 16px) 18px 14px; }
.fm-heading { min-width: 0; }
.fm-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(154,215,255,.68); margin-bottom: 4px; font-weight: 700; }
.fm-title { font-size: 24px; display: flex; align-items: baseline; gap: 8px; }
.fm-date { margin-left: 0; font-size: 16px; }
.fm-close { width: 42px; height: 42px; background: rgba(255,255,255,.05); }
.fm-body { padding: 10px 16px max(env(safe-area-inset-bottom, 26px), 26px); }
.fm-col-header { position: sticky; top: 0; z-index: 1; background: rgba(4,10,20,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 10px 6px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.05); margin-bottom: 10px; }
.fm-grid { display: grid; gap: 10px; }
.fm-body .fh-row { padding: 12px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); gap: 8px; }
.fm-body .fh-row.is-key { border-color: rgba(123,199,255,.16); background: linear-gradient(180deg, rgba(77,184,255,.08), rgba(255,255,255,.02)); }
.fm-body .fh-row.is-windy .fh-wind .fh-chip { border-color: rgba(255,216,102,.25); background: rgba(255,216,102,.1); color: #ffe38b; }
.fm-body .fh-row.is-rainy .fh-rain .fh-chip { border-color: rgba(123,199,255,.24); background: rgba(123,199,255,.1); color: #a8ddff; }
.fm-body .fh-time { min-width: 54px; }
.fm-body .fh-icon { min-width: 34px; }
.fm-body .fh-temp { min-width: 58px; }
.fm-body .fh-wind, .fm-body .fh-rain { min-width: 0; }
.fh-chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); white-space: nowrap; }
.fh-chip-wind { color: rgba(255,255,255,.78); }
.fh-chip-rain { color: #a8ddff; }

@media (max-width: 720px) {
  .bridge-accordion-trigger { padding: 13px 14px 9px; }
  .bridge-details-panel.open { max-height: 260px; padding: 0 14px 13px; }
  .sea-grid.compact-sea { grid-template-columns: 1fr 1fr; }
  .fday { padding: 13px 13px 11px; }
  .fday-main { gap: 10px; }
  .fday-main .fday-icon { width: 64px; min-width: 64px; }
  .fday-summary { font-size: 13px; }
  .fday-max { font-size: 24px; }
  .fday-min { font-size: 16px; }
  .fday-metrics.compact { grid-template-columns: 1fr 1fr; }
  .fday-detail { font-size: 11px; padding: 7px 8px; }
  .fday-tap-hint { font-size: 11px; }
  .fm-title { font-size: 20px; }
  .fm-date { font-size: 14px; }
  .fm-body .fh-row { grid-template-columns: 52px 32px 56px 1fr auto; display: grid; align-items: center; }
  .fm-body .fh-wind { text-align: left; }
  .fm-body .fh-rain { text-align: right; }
}

html.light .fm-head,
html.light .fm-col-header { background: rgba(255,255,255,.9); }
html.light .fm-overlay { background: linear-gradient(180deg, rgba(245,249,252,.86), rgba(240,245,250,.94)); }
html.light .fm-kicker { color: rgba(2,119,189,.7); }
html.light .fm-body .fh-row { background: linear-gradient(180deg, rgba(2,136,209,.03), rgba(255,255,255,.6)); border-color: rgba(2,136,209,.08); }
html.light .fm-body .fh-row.is-key { background: linear-gradient(180deg, rgba(2,136,209,.08), rgba(255,255,255,.7)); border-color: rgba(2,136,209,.14); }
html.light .fh-chip { background: rgba(2,136,209,.05); border-color: rgba(2,136,209,.08); }


/* ===== Stronger HAK alert visibility ===== */
.bridge-box.bridge-warning,
.bridge-box.bridge-caution,
.bridge-box.bridge-closed {
  border-width: 1.5px;
}
.bridge-box.bridge-warning {
  background: radial-gradient(circle at 12% 18%, rgba(255,210,88,.16), transparent 22%), linear-gradient(135deg, rgba(46,38,16,.94), rgba(20,18,12,.97) 28%, rgba(8,16,32,.96) 76%);
  border-color: rgba(255,214,102,.34);
  box-shadow: 0 18px 42px rgba(0,0,0,.22), 0 0 0 1px rgba(255,214,102,.08) inset, 0 0 28px rgba(255,214,102,.08);
}
.bridge-box.bridge-caution,
.bridge-box.bridge-closed {
  background: radial-gradient(circle at 12% 18%, rgba(255,87,87,.14), transparent 22%), linear-gradient(135deg, rgba(52,22,26,.95), rgba(20,12,14,.98) 28%, rgba(8,16,32,.96) 76%);
  border-color: rgba(255,120,120,.28);
  box-shadow: 0 18px 42px rgba(0,0,0,.24), 0 0 0 1px rgba(255,120,120,.08) inset, 0 0 28px rgba(255,120,120,.08);
}
.bridge-badge.bridge-warning,
.bridge-badge.bridge-caution,
.bridge-badge.bridge-closed {
  font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 20px rgba(0,0,0,.18);
}
.bridge-badge.bridge-warning {
  background: linear-gradient(180deg, rgba(255,221,114,.22), rgba(255,196,54,.12));
  border-color: rgba(255,214,102,.42);
  color: #ffe38b;
}
.bridge-badge.bridge-caution,
.bridge-badge.bridge-closed {
  background: linear-gradient(180deg, rgba(255,121,121,.22), rgba(255,87,87,.12));
  border-color: rgba(255,120,120,.36);
  color: #ffd0d0;
}
.bridge-alert-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 2px 0 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,214,102,.14);
  border: 1px solid rgba(255,214,102,.32);
  color: #ffe38b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.bridge-box.bridge-caution .bridge-alert-kicker,
.bridge-box.bridge-closed .bridge-alert-kicker {
  background: rgba(255,120,120,.14);
  border-color: rgba(255,120,120,.3);
  color: #ffd0d0;
}
.bridge-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.bridge-desc-primary {
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 850;
  line-height: 1.28;
  color: rgba(255,250,240,.96);
  text-shadow: 0 2px 16px rgba(0,0,0,.18);
}
.bridge-static-head .bridge-desc-primary,
.bridge-accordion-trigger .bridge-desc-primary {
  max-width: 940px;
}
.bridge-accordion-cta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.bridge-cta-label {
  font-size: 14px;
  font-weight: 850;
  color: rgba(255,255,255,.96);
}
.bridge-details-panel.open {
  max-height: 320px;
  padding: 0 16px 16px;
}
.bridge-detail-grid {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 14px 16px;
}
.bridge-detail-row + .bridge-detail-row {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
  margin-top: 10px;
}
.bridge-detail-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.bridge-detail-value {
  font-size: 15px;
  font-weight: 800;
  color: rgba(255,255,255,.96);
}
.bridge-detail-value.emphasis {
  color: #ffe38b;
}
.bridge-box.bridge-caution .bridge-detail-value.emphasis,
.bridge-box.bridge-closed .bridge-detail-value.emphasis {
  color: #ffd0d0;
}
.bridge-hak-desc.strong {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border-left: 3px solid rgba(255,214,102,.48);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}
.bridge-box.bridge-caution .bridge-hak-desc.strong,
.bridge-box.bridge-closed .bridge-hak-desc.strong {
  border-left-color: rgba(255,120,120,.46);
}
.bridge-note {
  font-size: 14px;
  color: rgba(255,255,255,.68);
}
@media (max-width: 720px) {
  .bridge-desc-primary { font-size: 15px; }
  .bridge-alert-kicker { font-size: 10px; padding: 5px 10px; }
  .bridge-cta-label { font-size: 13px; }
  .bridge-hak-desc.strong { font-size: 13px; }
}
html.light .bridge-box.bridge-warning {
  background: radial-gradient(circle at 12% 18%, rgba(255,210,88,.16), transparent 24%), linear-gradient(135deg, rgba(255,252,241,.98), rgba(252,248,233,.98) 36%, rgba(246,249,252,.98) 76%);
  border-color: rgba(186,138,0,.24);
}
html.light .bridge-box.bridge-caution,
html.light .bridge-box.bridge-closed {
  background: radial-gradient(circle at 12% 18%, rgba(255,120,120,.12), transparent 24%), linear-gradient(135deg, rgba(255,248,248,.98), rgba(254,242,242,.98) 36%, rgba(246,249,252,.98) 76%);
  border-color: rgba(198,64,64,.18);
}
html.light .bridge-alert-kicker { background: rgba(255,214,102,.2); border-color: rgba(186,138,0,.2); color: #8a6400; }
html.light .bridge-box.bridge-caution .bridge-alert-kicker,
html.light .bridge-box.bridge-closed .bridge-alert-kicker { background: rgba(255,120,120,.14); border-color: rgba(198,64,64,.18); color: #a53737; }
html.light .bridge-desc-primary { color: rgba(20,28,44,.92); text-shadow: none; }
html.light .bridge-cta-label { color: rgba(20,28,44,.88); }
html.light .bridge-detail-grid { background: rgba(255,255,255,.72); border-color: rgba(2,136,209,.08); }
html.light .bridge-detail-label { color: rgba(20,28,44,.52); }
html.light .bridge-detail-value { color: rgba(20,28,44,.92); }
html.light .bridge-detail-value.emphasis { color: #8a6400; }
html.light .bridge-box.bridge-caution .bridge-detail-value.emphasis,
html.light .bridge-box.bridge-closed .bridge-detail-value.emphasis { color: #a53737; }
html.light .bridge-hak-desc.strong { background: rgba(255,255,255,.75); color: rgba(20,28,44,.84); border-left-color: rgba(186,138,0,.34); }
html.light .bridge-box.bridge-caution .bridge-hak-desc.strong,
html.light .bridge-box.bridge-closed .bridge-hak-desc.strong { border-left-color: rgba(198,64,64,.28); }
html.light .bridge-note { color: rgba(20,28,44,.58); }


/* ===== FINAL ALERT + SEA TUNE ===== */
.sea-hero {
  padding-bottom: 26px;
}
.sea-hero-copy {
  padding-right: 8px;
  padding-bottom: 6px;
}
.sea-wave-bg {
  height: 26px;
  bottom: -6px;
  opacity: .32;
  pointer-events: none;
}
.sea-wave-path.w1 { opacity: .38; }
.sea-wave-path.w2 { opacity: .22; }

.bridge-box.is-collapsible {
  overflow: hidden;
}
.bridge-box.bridge-warning::after,
.bridge-box.bridge-caution::after,
.bridge-box.bridge-closed::after {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, rgba(255,239,170,.95), rgba(255,190,82,.6));
  box-shadow: 0 0 18px rgba(255,205,110,.24);
}
.bridge-box.bridge-caution::after,
.bridge-box.bridge-closed::after {
  background: linear-gradient(180deg, rgba(255,186,186,.95), rgba(255,102,102,.58));
  box-shadow: 0 0 20px rgba(255,120,120,.22);
}
.bridge-accordion-trigger {
  padding: 13px 16px 8px;
}
.bridge-accordion-cta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.bridge-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.bridge-box.bridge-warning .bridge-cta-label {
  background: rgba(255,214,102,.12);
  border-color: rgba(255,214,102,.22);
}
.bridge-box.bridge-caution .bridge-cta-label,
.bridge-box.bridge-closed .bridge-cta-label {
  background: rgba(255,120,120,.11);
  border-color: rgba(255,120,120,.18);
}
.bridge-details-panel {
  max-height: 0;
  opacity: 0;
  padding: 0 16px 0;
  transition: max-height .26s ease, opacity .2s ease, padding .24s ease, transform .24s ease;
  transform: translateY(-4px);
}
.bridge-details-panel.open {
  opacity: 1;
  padding: 0 16px 14px;
  transform: translateY(0);
}
.bridge-details-panel[hidden] {
  display: none !important;
}
.bridge-detail-grid {
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}
.bridge-hak-desc.strong {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
@media (max-width: 720px) {
  .sea-hero { padding: 16px 16px 24px; }
  .sea-hero-copy { padding-bottom: 8px; }
  .sea-wave-bg { height: 22px; bottom: -5px; opacity: .26; }
  .bridge-accordion-trigger { padding: 12px 14px 8px; }
  .bridge-desc-primary { font-size: 16px; }
  .bridge-cta-label { font-size: 13px; }
  .bridge-details-panel.open { padding: 0 14px 12px; }
  .bridge-detail-grid { padding: 11px 12px; }
}


/* ==== CROSS-PLATFORM MOBILE / PWA TOP SAFE-AREA ==== */
/* Safe-area applied ONLY on header — no double/triple stacking */
@media (max-width: 720px) {
  header {
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    margin-top: 0 !important;
  }
}

/* PWA standalone/fullscreen: Android often returns env()=0, so enforce minimum */
@media (max-width: 720px) and (display-mode: standalone),
       (max-width: 720px) and (display-mode: fullscreen) {
  header {
    padding-top: max(calc(14px + env(safe-area-inset-top, 0px)), 48px) !important;
  }
}

/* SMS / Alerts modal */
.alerts-dialog { max-width: 680px; }
.alerts-body { display:grid; gap:14px; }
.alerts-intro { color: var(--muted); font-size: 14px; line-height: 1.5; }
.alerts-card { border:1px solid rgba(79,195,247,.14); border-radius: 20px; padding: 16px; background: linear-gradient(180deg, rgba(9,22,42,.8), rgba(7,17,32,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.alerts-card.active { border-color: rgba(109,230,196,.26); }
.alerts-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom: 14px; }
.alerts-card-head h3 { margin:0 0 4px; font-size: 18px; }
.alerts-card-head p { margin:0; color: var(--muted); line-height: 1.45; }
.alerts-pill { display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:32px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:var(--muted); font-weight:700; letter-spacing:.08em; font-size:11px; }
.alerts-pill.on { background:rgba(109,230,196,.14); border-color:rgba(109,230,196,.24); color:#baf7e5; }
.alerts-action { width:100%; min-height:46px; border:1px solid rgba(79,195,247,.22); border-radius:16px; background:linear-gradient(180deg, rgba(26,50,86,.88), rgba(17,33,58,.88)); color:#eaf6ff; font-weight:700; font-size:15px; }
.alerts-action.sms { background:linear-gradient(180deg, rgba(55,94,90,.9), rgba(26,54,51,.9)); border-color: rgba(109,230,196,.22); }
.alerts-action.ghost { background:rgba(255,255,255,.04); }
.alerts-form-grid { display:grid; gap:12px; }
.alerts-field { display:grid; gap:7px; }
.alerts-field span, .alerts-verify-title { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.alerts-field input, .alerts-verify-row input { width:100%; min-height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#f4fbff; padding:0 14px; font-size:16px; }
.alerts-checks { display:grid; gap:8px; color:#eef7ff; }
.alerts-checks label { display:flex; align-items:center; gap:8px; }
.alerts-verify { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); display:grid; gap:10px; }
.alerts-verify-row { display:grid; grid-template-columns: 1fr auto; gap:10px; }
.alerts-active-note { margin-top:12px; color:#baf7e5; font-weight:600; }
.alerts-footnote { margin-top:12px; color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width: 720px) {
  .alerts-card { padding: 14px; border-radius: 18px; }
  .alerts-card-head { flex-direction:column; }
  .alerts-verify-row { grid-template-columns: 1fr; }
}


.app-update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 12000;
  width: min(92vw, 460px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(79,195,247,.24);
  background: linear-gradient(180deg, rgba(8,20,42,.96), rgba(4,14,32,.98));
  box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}
.app-update-banner[hidden] { display: none !important; }
.app-update-copy {
  color: #dceaff;
  font: 600 14px/1.35 'DM Sans', system-ui, sans-serif;
}
.app-update-btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(86,224,193,.22), rgba(86,224,193,.16));
  color: #effffb;
  font: 700 14px/1 'Syne', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}


/* ===== V105 LIGHT THEME + EN AUDIT POLISH ===== */
html.light {
  --text: #112133;
  --muted: rgba(17,33,51,.68);
  --surface: rgba(255,255,255,.88);
  --surface2: rgba(248,251,255,.96);
  --border: rgba(17,33,51,.10);
  --border2: rgba(17,33,51,.16);
}
html.light header {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,255,.92));
  border: 1px solid rgba(17,33,51,.08);
  box-shadow: 0 18px 38px rgba(22,34,51,.10);
}
html.light .logo-text h1 {
  background: none;
  -webkit-text-fill-color: initial;
  color: #244a73;
  text-shadow: none;
}
html.light .logo-text span,
html.light .sun-item,
html.light .upd-time,
html.light .smeta,
html.light .last-seen,
html.light .cmp-meta,
html.light .bridge-note,
html.light footer p,
html.light .a-text p,
html.light .fday-summary,
html.light .fday-detail,
html.light .fday-tap-hint,
html.light .sea-hero-sub,
html.light .alerts-intro,
html.light .alerts-card p,
html.light .alerts-footnote,
html.light .app-status,
html.light .info-intro {
  color: rgba(17,33,51,.70);
}
html.light .icon-btn,
html.light .theme-btn,
html.light .lang-toggle,
html.light .refresh-btn,
html.light .share-btn,
html.light .pwa-install,
html.light .info-btn,
html.light .ctab {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,247,253,.92));
  border: 1px solid rgba(36,74,115,.14);
  color: #285986;
  box-shadow: 0 6px 18px rgba(17,33,51,.06), inset 0 1px 0 rgba(255,255,255,.88);
}
html.light .icon-btn:hover,
html.light .theme-btn:hover,
html.light .refresh-btn:hover,
html.light .share-btn:hover,
html.light .pwa-install:hover,
html.light .info-btn:hover,
html.light .ctab:hover {
  background: linear-gradient(180deg, rgba(244,250,255,.99), rgba(234,244,253,.95));
  border-color: rgba(36,74,115,.22);
  color: #1d4f7d;
}
html.light .lang-btn { color: rgba(17,33,51,.60); }
html.light .lang-btn.active,
html.light .ctab.active {
  background: linear-gradient(180deg, rgba(60,141,224,.18), rgba(44,112,193,.14));
  border-color: rgba(37,118,201,.28);
  color: #155a95;
  box-shadow: 0 10px 24px rgba(60,141,224,.14);
}
html.light .refresh-btn,
html.light .info-btn { color: #16629d; }
html.light .share-btn {
  background: linear-gradient(180deg, rgba(55,176,134,.14), rgba(28,135,103,.10));
  border-color: rgba(28,135,103,.22);
  color: #167a5c;
}
html.light .pwa-install { color: #16629d; }
html.light .scard,
html.light .chart-sec,
html.light .wind-chart-sec,
html.light .map-sec,
html.light .weekly-sec,
html.light .forecast-sec,
html.light .icard,
html.light .sea-card,
html.light .bridge-box,
html.light footer,
html.light .info-dialog,
html.light .alerts-dialog {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,254,.94));
  border-color: rgba(17,33,51,.08);
  box-shadow: 0 14px 34px rgba(17,33,51,.08);
}
html.light .scard::after,
html.light .chart-sec::before,
html.light .map-sec::before,
html.light .weekly-sec::before,
html.light .forecast-sec::before,
html.light .wind-chart-sec::before {
  opacity: .8;
  background: linear-gradient(135deg, rgba(32,129,220,.06), rgba(91,186,177,.04), transparent);
}
html.light .scard:hover,
html.light .chart-sec:hover,
html.light .map-sec:hover,
html.light .weekly-sec:hover,
html.light .forecast-sec:hover,
html.light .wind-chart-sec:hover,
html.light .bridge-box:hover {
  box-shadow: 0 18px 42px rgba(17,33,51,.10);
  border-color: rgba(36,74,115,.15);
}
html.light .temp-big,
html.light .big-val,
html.light .sea-stat-val,
html.light .cmp-val,
html.light .wval,
html.light .bridge-desc-primary,
html.light .bridge-detail-value,
html.light .fday-max,
html.light .fh-temp,
html.light .sea-hero-text,
html.light .sname,
html.light .icard-title,
html.light .sec-label,
html.light .cmp-loc,
html.light .fday-name,
html.light .fday-date,
html.light .big-lbl,
html.light .bridge-expanded .bridge-header strong {
  color: #12263d !important;
  text-shadow: none !important;
}
html.light .wind-desc,
html.light .feels-row,
html.light .alerts-card h3,
html.light .info-block p,
html.light .bridge-hak-desc,
html.light .bridge-desc,
html.light .bridge-detail-label,
html.light .cmp-meta,
html.light .pres-trend,
html.light .sea-stat-lbl {
  color: rgba(17,33,51,.70) !important;
}
html.light .sens,
html.light .records-row .rec,
html.light .sea-stat,
html.light .fday,
html.light .alerts-card,
html.light .bridge-details-panel,
html.light .bridge-detail-row,
html.light .app-status {
  background: rgba(244,248,253,.92);
  border-color: rgba(17,33,51,.08);
}
html.light .sea-hero {
  background: linear-gradient(180deg, rgba(231,244,253,.96), rgba(244,250,255,.96));
  border-color: rgba(33,123,206,.16);
}
html.light .alert-box {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,251,255,.93));
  border-color: rgba(17,33,51,.08);
  box-shadow: 0 10px 24px rgba(17,33,51,.06);
}
html.light .alert-box.bura,
html.light .bridge-box.bridge-closed {
  background: linear-gradient(180deg, rgba(255,239,241,.96), rgba(255,247,248,.95));
  border-color: rgba(211,47,47,.18);
}
html.light .alert-box.jugo,
html.light .bridge-box.bridge-open {
  background: linear-gradient(180deg, rgba(238,251,247,.96), rgba(246,253,250,.95));
  border-color: rgba(0,137,123,.16);
}
html.light .bridge-box.bridge-caution,
html.light .bridge-box.bridge-warning {
  background: linear-gradient(180deg, rgba(255,248,232,.96), rgba(255,252,244,.95));
  border-color: rgba(227,156,34,.18);
}
html.light .bridge-badge,
html.light .bridge-src-badge,
html.light .alerts-pill {
  box-shadow: none;
}
html.light .alerts-pill.on { background: rgba(28,135,103,.12); color: #166a52; border-color: rgba(28,135,103,.22); }
html.light .alerts-action {
  background: linear-gradient(180deg, rgba(60,141,224,.18), rgba(44,112,193,.14));
  border-color: rgba(37,118,201,.24);
  color: #155a95;
}
html.light .alerts-action.sms {
  background: linear-gradient(180deg, rgba(28,135,103,.18), rgba(22,117,89,.14));
  border-color: rgba(22,117,89,.24);
  color: #166a52;
}
html.light .alerts-action.ghost {
  background: rgba(244,248,253,.92);
  color: #244a73;
}
html.light footer {
  background: linear-gradient(180deg, rgba(248,251,255,.94), rgba(242,247,252,.94));
  border-top-color: rgba(17,33,51,.08);
}
html.light .eco-badge {
  background: rgba(36,74,115,.06);
  border-color: rgba(36,74,115,.14);
  color: #244a73;
}
html.light .map-leg-item,
html.light .leaflet-control-attribution { color: rgba(17,33,51,.72) !important; }
html.light .fm-overlay { background: rgba(244,248,253,.96); }
html.light .fm-panel,
html.light .fday-desk-panel { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,254,.97)); }


/* v106 micro-polish: stronger light-theme contrast + cleaner EN/ui balance */
html.light header {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,253,.86));
  border-bottom-color: rgba(20,28,44,.08);
  box-shadow: 0 14px 40px rgba(18,30,51,.08);
}
html.light .chart-hdr,
html.light .sec-label,
html.light .cmp-meta,
html.light footer p {
  color: rgba(20,28,44,.64);
}
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,
html.light .alerts-dialog,
html.light footer {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,253,.84));
  border-color: rgba(20,28,44,.08);
  box-shadow: 0 12px 34px rgba(18,30,51,.08);
}
html.light .bridge-box,
html.light .alert-box {
  box-shadow: 0 10px 26px rgba(18,30,51,.06);
}
html.light .bridge-box.bridge-closed,
html.light .bridge-box.bridge-caution,
html.light .bridge-box.bridge-warning {
  background: linear-gradient(135deg, rgba(255,246,246,.96), rgba(255,251,251,.9));
  border-color: rgba(190,70,70,.18);
}
html.light .bridge-box.bridge-open {
  background: linear-gradient(135deg, rgba(244,252,246,.96), rgba(250,254,251,.9));
  border-color: rgba(69,144,90,.18);
}
html.light .bridge-title-stack,
html.light .bridge-desc,
html.light .bridge-desc-primary,
html.light .bridge-status,
html.light .bridge-note,
html.light .bridge-src-badge {
  color: rgba(20,28,44,.92);
}
html.light .bridge-note,
html.light .bridge-hak-desc,
html.light .bridge-detail-label,
html.light .upd-time,
html.light .sun-item,
html.light .meta-small,
html.light .station-meta,
html.light .fdp-date,
html.light .fm-date {
  color: rgba(20,28,44,.58) !important;
}
html.light .icon-btn,
html.light .lang-btn,
html.light .share-btn,
html.light .refresh-btn,
html.light .theme-btn,
html.light .info-close {
  background: rgba(255,255,255,.78);
  border-color: rgba(20,28,44,.10);
  color: rgba(20,28,44,.84);
}
html.light .icon-btn:hover,
html.light .lang-btn:hover,
html.light .share-btn:hover,
html.light .refresh-btn:hover,
html.light .theme-btn:hover {
  background: rgba(255,255,255,.96);
  border-color: rgba(2,136,209,.22);
}
html.light .lang-btn.active,
html.light .ctab.active,
html.light .icon-btn.active {
  background: linear-gradient(180deg, rgba(2,136,209,.18), rgba(2,136,209,.10));
  color: #01579b;
  border-color: rgba(2,136,209,.28);
}
html.light .fday,
html.light .sea-stat,
html.light .sens,
html.light .records-row .rec,
html.light .info-block,
html.light .bridge-detail-grid {
  background: rgba(255,255,255,.82);
}
html.light .fday-max,
html.light .fday-min,
html.light .sea-stat-val,
html.light .sea-temp-val,
html.light .tmp,
html.light .big-val,
html.light .cmp-num,
html.light .rec strong {
  text-shadow: none !important;
}
html.light .forecast-sec .chart-hdr > div:last-child,
html.light #seaSourceNote,
html.light .map-sec .leaflet-control-attribution,
html.light .legend-item,
html.light .legend-dot + span {
  color: rgba(20,28,44,.54) !important;
}
html.light footer {
  border-top-color: rgba(20,28,44,.08);
}
html.light .eco-badge {
  background: rgba(2,136,209,.10);
  border-color: rgba(2,136,209,.18);
  color: #01579b;
}
html.light a.eco-badge[style*="112.hr"] {
  color: #a25b00 !important;
  background: rgba(255,179,71,.16) !important;
  border-color: rgba(214,136,19,.22) !important;
}


/* v107 ultra micro-polish: stronger light-theme readability + final consistency pass */
html.light body {
  background: linear-gradient(180deg, #eef3f8 0%, #edf2f7 100%);
  color: #1b2940;
}
html.light .wrapper {
  filter: none;
}
html.light header {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,253,.96));
  border: 1px solid rgba(23,35,56,.06);
  box-shadow: 0 14px 36px rgba(17,27,44,.10);
}
html.light .chart-hdr,
html.light .sec-label,
html.light .cmp-meta,
html.light footer p,
html.light .sea-stat-lbl,
html.light .mini-h,
html.light .last-seen,
html.light .smeta,
html.light .swipe-meta,
html.light .cmp-note,
html.light .chart-note,
html.light .bridge-detail-label,
html.light .legend-item,
html.light .map-leg-item,
html.light .muted,
html.light .sun-item,
html.light .meta-small,
html.light .station-meta,
html.light .fdp-date,
html.light .fm-date {
  color: rgba(20,28,44,.72) !important;
}
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,
html.light .alerts-dialog,
html.light footer,
html.light .info-dialog,
html.light .bridge-box,
html.light .alert-box {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,251,254,.94));
  border-color: rgba(20,28,44,.09);
  box-shadow: 0 12px 30px rgba(18,30,51,.09);
}
html.light .fday,
html.light .sea-stat,
html.light .sens,
html.light .records-row .rec,
html.light .info-block,
html.light .bridge-detail-grid,
html.light .mini,
html.light .cmp-box,
html.light .cmp-row,
html.light .map-legend,
html.light .legend-box,
html.light .modal-card,
html.light .bridge-detail-note,
html.light .bridge-detail-row {
  background: rgba(255,255,255,.92);
  border-color: rgba(20,28,44,.08);
}
html.light .bridge-box.bridge-closed,
html.light .bridge-box.bridge-caution,
html.light .bridge-box.bridge-warning,
html.light .alert-box.wind,
html.light .alert-box.storm {
  background: linear-gradient(135deg, rgba(255,248,248,.98), rgba(255,252,252,.96));
}
html.light .tmp,
html.light .big-val,
html.light .cmp-num,
html.light .sea-stat-val,
html.light .sea-temp-val,
html.light .cmp-val,
html.light .cstat-val,
html.light .fday-max,
html.light .rec strong,
html.light .bridge-desc-primary,
html.light .bridge-title-stack,
html.light .bridge-status,
html.light .info-title,
html.light .sname,
html.light .cmp-loc,
html.light .chart-value,
html.light .chart-summary strong,
html.light .weekly-high,
html.light .weekly-low {
  color: #1f2d45 !important;
}
html.light .fday-min,
html.light .fdesc,
html.light .sea-head-sub,
html.light .sea-note,
html.light #seaSourceNote,
html.light .bridge-note,
html.light .bridge-hak-desc,
html.light .upd-time {
  color: rgba(20,28,44,.66) !important;
}
html.light .lang-btn,
html.light .icon-btn,
html.light .share-btn,
html.light .refresh-btn,
html.light .theme-btn,
html.light .info-close,
html.light .ctab {
  background: rgba(255,255,255,.90);
  border-color: rgba(20,28,44,.11);
  color: rgba(20,28,44,.88);
}
html.light .lang-btn.active,
html.light .ctab.active,
html.light .icon-btn.active {
  background: linear-gradient(180deg, rgba(2,136,209,.20), rgba(2,136,209,.11));
  border-color: rgba(2,136,209,.30);
  color: #0b4d83;
}
html.light .bridge-detail-grid > div,
html.light .bridge-detail-row,
html.light .bridge-table-row,
html.light .bridge-grid-row {
  background: rgba(246,249,252,.88);
}
html.light .bridge-box .badge,
html.light .label-chip,
html.light .pill,
html.light .eco-badge {
  box-shadow: none;
}
html.light .chart canvas,
html.light .wind-chart canvas {
  opacity: .98;
}
html.light footer {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,253,.96));
}
html.light footer p,
html.light footer span,
html.light footer a {
  color: rgba(20,28,44,.74);
}
html.light .fm-overlay { background: rgba(244,248,253,.97); }
html.light .fm-panel,
html.light .fday-desk-panel,
html.light .hourly-modal-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,254,.97));
}


/* ===== SEA CARD VISUAL POLISH v108 ===== */
.sea-hero{
  gap:14px !important;
  align-items:flex-start !important;
  padding:18px 20px 24px !important;
  min-height:unset !important;
}
.sea-hero-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:100%;
  min-width:0;
}
.sea-hero-icon{
  font-size:34px !important;
  line-height:1;
  margin-top:2px;
  filter:drop-shadow(0 4px 12px rgba(25,120,210,.18));
}
.sea-kicker{
  padding:6px 14px !important;
  font-size:11px !important;
  letter-spacing:1px !important;
}
.sea-hero-text{
  font-size:clamp(32px, 6.3vw, 44px) !important;
  line-height:.95 !important;
  letter-spacing:-.02em !important;
  font-weight:800 !important;
  text-shadow:0 0 20px rgba(77,184,255,.18) !important;
}
.sea-hero-sub{
  font-size:clamp(15px, 2.7vw, 18px) !important;
  line-height:1.45 !important;
  color:rgba(245,248,255,.9) !important;
  max-width:32ch;
}
.sea-hero-meta{
  gap:10px !important;
  margin-top:0 !important;
}
.sea-hero-meta span{
  padding:6px 12px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.8) !important;
}
.sea-wave-bg{ height:32px !important; opacity:.42 !important; }
.sea-grid-modern{ gap:14px !important; }
.sea-stat{
  padding:14px 16px !important;
  gap:14px !important;
  border-radius:18px !important;
}
.sea-stat-icon{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
}
.sea-stat-lbl{
  font-size:12px !important;
  letter-spacing:.06em !important;
  margin-bottom:4px !important;
}
.sea-stat-val{
  font-size:clamp(28px, 5.8vw, 42px) !important;
  line-height:.96 !important;
  font-weight:800 !important;
  color:#75bfff !important;
  white-space:nowrap !important;
}
.sea-stat-val span{ white-space:nowrap !important; }
#waveD{
  gap:10px !important;
  white-space:nowrap !important;
}
#waveD .sea-dir-arrow{
  width:36px !important;
  height:36px !important;
  font-size:18px !important;
}
#waveD span:last-child{
  display:inline-block;
  white-space:nowrap !important;
  letter-spacing:0 !important;
}
.sea-temp-val{
  font-size:clamp(38px, 7vw, 56px) !important;
  white-space:nowrap !important;
}
@media (max-width: 640px){
  .sea-hero{
    padding:16px 16px 22px !important;
    gap:12px !important;
  }
  .sea-hero-icon{ font-size:30px !important; }
  .sea-hero-text{
    font-size:clamp(24px, 8.6vw, 34px) !important;
    line-height:1.02 !important;
  }
  .sea-hero-sub{
    font-size:14px !important;
    max-width:100% !important;
  }
  .sea-grid-modern{ gap:12px !important; }
  .sea-stat{
    padding:12px 12px !important;
    gap:12px !important;
  }
  .sea-stat-lbl{
    font-size:11px !important;
    line-height:1.15 !important;
  }
  .sea-stat-val{
    font-size:clamp(18px, 6.4vw, 28px) !important;
  }
  .sea-temp-val{
    font-size:clamp(28px, 8.8vw, 40px) !important;
  }
}
html.light .sea-hero{
  background:linear-gradient(180deg, rgba(242,248,255,.96), rgba(232,242,252,.98)) !important;
  border-color:rgba(76,137,190,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 28px rgba(25,60,100,.06) !important;
}
html.light .sea-kicker{
  background:rgba(57,124,199,.08) !important;
  border-color:rgba(57,124,199,.14) !important;
  color:#3a73ad !important;
}
html.light .sea-hero-text{
  color:#1e5f99 !important;
  text-shadow:none !important;
}
html.light .sea-hero-sub{
  color:#4b647f !important;
}
html.light .sea-hero-meta span{
  background:rgba(255,255,255,.8) !important;
  border-color:rgba(76,137,190,.12) !important;
  color:#5f7590 !important;
}
html.light .sea-wave-path{ fill:#88bfe8 !important; }
html.light .sea-stat{
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(76,137,190,.12) !important;
}
html.light .sea-stat-lbl{ color:#68829d !important; }
html.light .sea-stat-val{ color:#193856 !important; }
html.light .sea-temp-val{ color:#1f5482 !important; }


/* ===== SEA MOBILE OVERFLOW FIX v110 ===== */
.sea-stat-data{ min-width:0; flex:1 1 auto; }
.sea-stat{ overflow:hidden; }
.sea-stat-val{ overflow:hidden; text-overflow:ellipsis; }
#waveD, #swell, #waveP, #waveH, #seaTemp{ min-width:0; }
@media (max-width: 640px){
  .sea-hero-text{ font-size:clamp(22px,7.4vw,30px) !important; }
  .sea-hero-sub{ font-size:13px !important; line-height:1.35 !important; }
  .sea-hero-meta span{ max-width:100%; }
  .sea-grid-modern{ gap:10px !important; }
  .sea-stat{ padding:12px 10px !important; gap:10px !important; }
  .sea-stat-icon{ width:40px !important; height:40px !important; }
  .sea-stat-lbl{ font-size:10px !important; letter-spacing:.05em !important; }
  .sea-stat-val{ font-size:clamp(16px,5.6vw,24px) !important; }
  .sea-temp-val{ font-size:clamp(24px,8vw,34px) !important; }
  #waveD .sea-dir-arrow{ width:30px !important; height:30px !important; font-size:16px !important; }
}



/* v112 sea numbers desktop/mobile rebalance */
.sea-stat{
  padding: 10px 12px;
}
.sea-stat-lbl{
  font-size: 11px;
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.sea-stat-val{
  font-size: clamp(14px, 1.9vw, 18px) !important;
  line-height: 1.05;
  letter-spacing: .01em;
}
.sea-stat-val.sec{
  font-size: clamp(13px, 1.6vw, 16px) !important;
}
.sea-temp-val{
  font-size: clamp(16px, 2.4vw, 20px) !important;
  line-height: 1;
}
.sea-stat-icon{
  width: 36px;
  height: 36px;
}
.sea-hero-text{
  font-size: clamp(18px, 3.2vw, 28px);
  line-height: .98;
}
@media (min-width: 900px){
  .sea-grid-modern{
    gap: 12px !important;
  }
  .sea-stat{
    min-height: 84px;
  }
}
@media (max-width: 640px){
  .sea-stat-val{
    font-size: clamp(14px, 5vw, 20px) !important;
  }
  .sea-stat-val.sec{
    font-size: clamp(13px, 4.4vw, 17px) !important;
  }
  .sea-temp-val{
    font-size: clamp(20px, 7vw, 30px) !important;
  }
}



/* ===== SEA HERO WIDTH BALANCE v113 ===== */
.sea-hero-copy{
  flex:1 1 auto !important;
  max-width:calc(100% - 72px) !important;
}
.sea-hero-text{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.sea-hero-sub{
  max-width:28ch !important;
}
@media (max-width: 1360px){
  .sea-hero{
    padding:16px 18px 22px !important;
    gap:12px !important;
  }
  .sea-hero-icon{
    font-size:30px !important;
  }
  .sea-hero-text{
    font-size:clamp(24px, 3.1vw, 34px) !important;
    line-height:1.02 !important;
    letter-spacing:-.015em !important;
  }
  .sea-hero-sub{
    font-size:clamp(14px, 1.5vw, 17px) !important;
    max-width:24ch !important;
  }
  .sea-hero-meta span{
    font-size:11px !important;
    padding:5px 11px !important;
  }
}
@media (max-width: 1180px){
  .sea-hero-text{
    font-size:clamp(22px, 2.7vw, 30px) !important;
  }
  .sea-hero-sub{
    max-width:22ch !important;
  }
}



/* ===== SEA HERO COPY / COLOR POLISH v114 ===== */
.sea-hero-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:10px !important;
}
.sea-hero-text{
  font-size:clamp(26px, 3vw, 34px) !important;
  line-height:1.02 !important;
  letter-spacing:-0.01em !important;
  color:#6ec6ff !important;
  text-shadow:0 0 16px rgba(110,198,255,.14) !important;
}
.sea-hero-sub{
  font-size:clamp(16px, 1.55vw, 21px) !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  color:#d9ecff !important;
  max-width:28ch !important;
}
.sea-hero-meta{
  margin-top:0 !important;
}
.sea-hero-meta span{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  color:#a9bcd6 !important;
  font-size:12px !important;
  font-weight:600 !important;
}
.sea-hero-note{
  display:block !important;
  max-width:34ch !important;
  padding:0 !important;
  margin-top:0 !important;
  font-size:15px !important;
  line-height:1.45 !important;
  color:#f6c768 !important;
  font-weight:500 !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media (max-width: 1180px){
  .sea-hero-text{
    font-size:clamp(24px, 2.5vw, 30px) !important;
  }
  .sea-hero-sub{
    font-size:clamp(15px, 1.4vw, 18px) !important;
    max-width:24ch !important;
  }
  .sea-hero-note{
    font-size:14px !important;
    max-width:30ch !important;
  }
}
@media (max-width: 640px){
  .sea-hero-text{
    font-size:clamp(24px, 8vw, 32px) !important;
  }
  .sea-hero-sub{
    font-size:15px !important;
    max-width:100% !important;
  }
  .sea-hero-note{
    font-size:14px !important;
    max-width:100% !important;
  }
}

/* ===== SEA CLEAN PANEL v116 ===== */

/* Hide old elements */
.sea-grid-modern { display: none !important; }
.sea-hero { all: unset !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.sea-wave-bg, .sea-hero-icon, .sea-hero-copy, .sea-kicker,
.sea-hero-text, .sea-hero-sub, .sea-hero-meta, .sea-hero-note { all: unset !important; display: none !important; }

/* New panel classes */
.sea-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sea-panel-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .3px;
}
.sea-panel-time {
  font-size: 11px;
  color: var(--muted);
  opacity: .6;
}
.sea-panel-cond {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.sea-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 10px;
}
.sea-data-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sea-data-lbl {
  font-size: 10px;
  color: var(--muted);
  opacity: .6;
  letter-spacing: .3px;
}
.sea-data-val {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.sea-panel-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.sea-panel-src {
  font-size: 10px;
  color: var(--muted);
  opacity: .5;
}

/* Mobile */
@media (max-width: 640px) {
  .sea-panel-cond { font-size: clamp(22px, 7vw, 28px); }
  .sea-data-val { font-size: 16px; }
  .sea-data-lbl { font-size: 11px; }
  .sea-panel-note { font-size: 13px; }
}