:root{--b:#1d5e8c;--bg:#eef3f7;--c:#fff;--t:#1b2630;--m:#5d6b78}
@media (prefers-color-scheme:dark){:root{--bg:#10171d;--c:#1b252e;--t:#e6edf3;--m:#93a3b1}}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--t);padding-bottom:env(safe-area-inset-bottom)}
header{position:sticky;top:0;z-index:5;display:flex;gap:6px;padding:8px;padding-top:max(8px,env(safe-area-inset-top));background:var(--b)}
header select{flex:1;font-size:16px;padding:8px;border-radius:8px;border:0}header button{font-size:18px;border:0;border-radius:8px;padding:6px 10px;background:#ffffff22;color:#fff}
main{padding:8px;max-width:760px;margin:auto}.card{background:var(--c);border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:0 1px 3px #0002}
#tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:8px}#tabs button{flex:none;border:0;border-radius:20px;padding:8px 12px;font-size:14px;background:var(--c);color:var(--t)}#tabs button.on{background:var(--b);color:#fff}
.big{font-size:44px;font-weight:600}.sym{font-size:44px}.small{font-size:12px;color:var(--m)}.row{display:flex;align-items:center;gap:8px}
.hscroll{overflow-x:auto;display:flex;gap:4px}.h{flex:none;width:58px;text-align:center;padding:6px 2px;border-radius:8px;font-size:13px}.h:nth-child(odd){background:#8881}
.arrow{display:inline-block;transition:transform .3s;font-weight:700;font-size:1.3em;color:var(--b)}.pr{color:#2b78c5}
table{width:100%;border-collapse:collapse;font-size:14px}td{padding:6px 4px;border-bottom:1px solid #8883}td.r{text-align:right}
.compass{width:160px;height:160px;border-radius:50%;border:3px solid var(--b);position:relative;margin:8px auto}.compass span{position:absolute;font-size:12px;font-weight:600}
.compass .ar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:70px;color:var(--b)}
.ok{color:#2a9d3a}.bad{color:#c0392b}.warnbox{border-left:6px solid #e0a800;padding:8px;margin:6px 0;background:#e0a80015;border-radius:6px}.warnbox.RED{border-color:#c0392b}.warnbox.ORANGE{border-color:#e67e22}
.rw{position:relative}#rmap{height:62vh;min-height:320px;border-radius:8px;z-index:0}#rtime{position:absolute;z-index:500;top:6px;left:50px;background:#000a;color:#fff;padding:2px 8px;border-radius:6px;font-size:13px}
input[type=range]{flex:1}button.p{border:0;border-radius:8px;padding:8px 12px;background:var(--b);color:#fff;font-size:14px}
.meter{height:14px;border-radius:7px;background:#8883;overflow:hidden}.meter div{height:100%}
#alerts .warnbox{margin:8px}
#ptr{height:0;overflow:hidden;text-align:center;font-size:13px;color:var(--m);transition:height .15s;line-height:40px}
.says{margin-top:8px;padding:8px 10px;border-radius:8px;background:#1d5e8c14;font-size:14px}
.stars{color:#e0a800;letter-spacing:1px;white-space:nowrap}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle}
.bar{height:50px;display:flex;align-items:flex-end;justify-content:center}.bar div{width:16px;border-radius:3px 3px 0 0}
table.cmp th{font-size:12px;font-weight:600;padding:4px;min-width:84px;vertical-align:bottom}table.cmp td{text-align:center;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chips button{border:0;border-radius:18px;padding:8px 12px;background:#1d5e8c22;color:var(--t);font-size:14px}
#sayBar{padding:8px;text-align:center}.big-say{font-size:18px;padding:12px 18px}
.badge{margin-top:6px;padding:6px 10px;border-radius:8px;font-size:14px}.badge.snow{background:#cfe8ff;color:#0b3d66}.badge.snow2{background:#e8f2fb;color:#0b3d66}
.fjol{padding:8px 10px;margin-bottom:8px;border-radius:8px;background:#8881;font-size:13px}
#passmap{height:280px;border-radius:8px;margin:8px 0;z-index:0}.passform input,.passform select{padding:8px;font-size:15px}.passform input{width:100%;margin:4px 0}.passform .row input{width:32%}
.passgrid{overflow-x:auto}.passgrid table{font-size:11px;width:auto}.passgrid th{font-weight:500;padding:2px;color:var(--m)}.passgrid td{padding:2px;border:0}.passgrid td.pn{white-space:nowrap;padding-right:6px;font-size:12px}
.cell{display:inline-block;width:16px;height:16px;border-radius:3px}.rank{padding-left:20px;margin:4px 0}.rank li{margin:3px 0}button.x{border:0;background:none;color:var(--m);font-size:14px;cursor:pointer}
.windicon{text-align:center;color:#1d5e8c;font-weight:700;text-shadow:0 0 3px #fff,0 0 3px #fff}.windicon div{font-size:34px;line-height:40px}.windicon span{font-size:11px}
.ptip{font-size:11px;padding:1px 4px}
#roadmap{height:260px;border-radius:8px;margin:8px 0;z-index:0}.sitic{font-size:18px;text-align:center}
body.mini header,body.mini main,body.mini footer,body.mini #alerts,body.mini #ptr{display:none}
#miniv{max-width:420px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 16px;min-height:100vh;background:linear-gradient(160deg,#1d5e8c,#0f3550);color:#fff}
.m-top{display:flex;align-items:center;gap:12px}.m-sym{font-size:64px}.m-t{font-size:72px;font-weight:600}.m-w{text-align:center;font-size:14px;margin-left:auto}.m-w .arrow{color:#fff}
.m-p{opacity:.85;margin:4px 0 12px}.m-rows div{background:#ffffff1f;border-radius:10px;padding:10px 12px;margin:6px 0;font-size:17px}.m-f{margin-top:14px;font-size:12px;opacity:.7}.m-f a{color:#fff}
.acc .drow{display:grid;grid-template-columns:1.3fr .6fr 1fr .9fr 1.1fr 14px;align-items:center;gap:2px;padding:7px 4px;border-bottom:1px solid #8883;font-size:14px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.acc .drow:active{background:#8881}.acc .drow .r{text-align:right}.acc .chev{text-align:right;color:#888;transition:transform .3s;font-size:18px}
.acc .drow[aria-expanded=true]{background:#1d5e8c14}.acc .drow[aria-expanded=true] .chev{transform:rotate(90deg)}
.dexp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.dexp.open{grid-template-rows:1fr}.din{overflow:hidden}
.dexp.open .din{padding:4px 0 8px 10px;border-left:3px solid #1d5e8c55}table.steps{font-size:13px}table.steps td{padding:4px}
#rostbox{margin-top:16px;border-top:1px solid #8883;padding-top:8px}#rostbox select{padding:6px}
.vr{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid #8882;cursor:pointer}.vr .rd{width:14px;height:14px;border-radius:50%;border:2px solid #1d5e8c;flex:none}
.vr.on .rd{background:#1d5e8c}.vr.on{background:#1d5e8c12}.vr .vn{flex:1}.vr small{display:block;color:#888}.svl{font-size:11px;background:#2a9d3a22;color:#2a7d3a;border-radius:6px;padding:1px 5px}
.srcbar{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}.srcbar button{border:1px solid #1d5e8c55;background:none;border-radius:14px;padding:5px 11px;font-size:13px;color:inherit}
.srcbar button.on{background:#1d5e8c;color:#fff;border-color:#1d5e8c}.conf{font-size:10px;white-space:nowrap}.h .conf{display:block;margin-top:2px}.small .conf{font-size:12px}
.pl{border-radius:6px;padding:0 5px;font-size:12px;white-space:nowrap}.pl1,.pl2{background:#2a9d3a22}.pl3,.pl4{background:#e0a80033}.pl5,.pl6,.pl7{background:#c0392b33}
.muted{color:#888}.uvh{color:#b8860b}details summary{cursor:pointer;color:#1d5e8c}
table.rec td,table.rec th{font-size:13px;padding:5px 4px;vertical-align:top}table.rec th{text-align:left;font-size:12px;color:#666;font-weight:600}
.mchart{width:100%;height:auto;margin-top:8px}.warm{color:#c0392b}.cold{color:#2b78c5}#hist select{padding:5px}
/* ===== v1m: färger, teman och väderstyrd hero ===== */
:root{--hero:linear-gradient(135deg,#2f80c9,#56a8e8);--hb:#1d5e8c;--ht:#fff;--acc:var(--b);--shadow:0 2px 10px #0d2a4a1f}
.card{border-radius:16px;box-shadow:var(--shadow)}
header{background:var(--hb);transition:background .6s}
#now{background:var(--hero);color:var(--ht);position:relative;overflow:hidden;transition:background .8s}
#now .small,#now .muted{color:var(--ht);opacity:.88}#now .arrow{color:var(--ht)}#now .pr{color:var(--ht);font-weight:600}
#now .says{background:#ffffff26;color:var(--ht);border-radius:12px;padding:8px 10px}#now .warnbox{background:#ffffff26;color:var(--ht)}
#now button.p{background:#ffffff33;color:var(--ht);border:1px solid #ffffff55;backdrop-filter:blur(4px)}
#now .big{text-shadow:0 2px 8px #0003}#now a{color:var(--ht)}#now .conf,#now .pl{color:inherit}
#now::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .8s}
body.w-night #now::after{opacity:.9;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 15%,#fffd,transparent),radial-gradient(1px 1px at 72% 40%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 18%,#fff,transparent),radial-gradient(1px 1px at 92% 75%,#fffa,transparent),radial-gradient(1px 1px at 45% 50%,#fff9,transparent)}
#now>*{position:relative;z-index:1}
/* väder (automatiskt tema) */
body.t-auto.w-sun{--hero:linear-gradient(135deg,#1f7fd6 0%,#4fb0f0 55%,#f7c948 130%);--hb:#1b6fbf}
body.t-auto.w-half{--hero:linear-gradient(135deg,#3b82c4,#8fb8d8 70%,#f2d27a 140%);--hb:#336f9f}
body.t-auto.w-cloud{--hero:linear-gradient(135deg,#5f7b94,#9fb3c4);--hb:#4f6a82}
body.t-auto.w-fog{--hero:linear-gradient(135deg,#7d8b97,#b9c3cb);--hb:#6b7884}
body.t-auto.w-rain{--hero:linear-gradient(135deg,#123a6b,#2d6aa8);--hb:#123a6b}
body.t-auto.w-snow{--hero:linear-gradient(135deg,#dfeefa,#b5d3ee);--hb:#5d8fb8;--ht:#14324d}
body.t-auto.w-snow #now .says,body.t-auto.w-snow #now .warnbox,body.t-auto.w-snow #now button.p{background:#ffffff8c;border-color:#14324d33}
body.t-auto.w-thunder{--hero:linear-gradient(135deg,#2a1745,#5b2e83 60%,#e0b23c 140%);--hb:#2e1a4d}
body.t-auto.w-dawn{--hero:linear-gradient(135deg,#4a3f8c,#e0709a 55%,#f6a94f);--hb:#5b4590}
body.t-auto.w-night{--hero:linear-gradient(160deg,#07122b,#14264d 70%,#23386a);--hb:#0b1733}
/* fasta teman */
body.t-host{--b:#b4441c;--bg:#fbf1e7;--hero:linear-gradient(135deg,#8c2d12,#d9622b 55%,#f2a541);--hb:#8c2d12}
body.t-skog{--b:#2f6b3a;--bg:#eef4ec;--hero:linear-gradient(135deg,#1e3d24,#3f7a45 60%,#a9b860);--hb:#1e3d24}
body.t-natt{--b:#5b8bd6;--bg:#0b1220;--c:#151f33;--t:#e3eaf5;--m:#9fb0c8;--hero:linear-gradient(160deg,#07122b,#1a2b52);--hb:#07122b;--shadow:0 2px 12px #0008}
body.t-klassisk{--hero:var(--c);--hb:#1d5e8c;--ht:var(--t);--shadow:0 1px 3px #0002}
body.t-klassisk #now .says,body.t-klassisk #now button.p{background:revert;color:revert;border:revert}body.t-klassisk #now button.p{background:var(--b);color:#fff;border:0}
body.t-klassisk #now .small{color:var(--m)}body.t-klassisk #now .arrow{color:var(--b)}body.t-klassisk #now .pr{color:#2b78c5}body.t-klassisk #now .says{background:#8881;border-radius:8px}
@media (prefers-color-scheme:dark){body.t-auto,body.t-host,body.t-skog{--bg:#10171d;--c:#1b252e;--t:#e6edf3;--m:#93a3b1}body.t-auto.w-snow{--hero:linear-gradient(135deg,#3d5a75,#6f93b4);--ht:#fff}}
/* sektionsaccenter */
#tim{--acc:#2f80c9}#dag{--acc:#3b9c8f}#jakt{--acc:#4a8a3c}#radar{--acc:#2a6fdb}#vag{--acc:#e07b18}#varn{--acc:#d64545}#mane{--acc:#7a5cc4}#fiske{--acc:#1f9bb5}#brand{--acc:#e2552d}#svamp{--acc:#9b6a3c}#jmf{--acc:#5c7cfa}#hist{--acc:#b0782a}#plats{--acc:#6b7a8f}
body:not(.t-klassisk) .tab.card{border-top:4px solid var(--acc)}body:not(.t-klassisk) .tab.card h3{color:var(--acc)}
body:not(.t-klassisk) #tabs button{box-shadow:0 1px 4px #0001}body:not(.t-klassisk) #tabs button.on{background:var(--tabc,var(--b))}
body:not(.t-klassisk) #tabs button[data-t=tim]{--tabc:#2f80c9}body:not(.t-klassisk) #tabs button[data-t=dag]{--tabc:#3b9c8f}body:not(.t-klassisk) #tabs button[data-t=jakt]{--tabc:#4a8a3c}body:not(.t-klassisk) #tabs button[data-t=radar]{--tabc:#2a6fdb}body:not(.t-klassisk) #tabs button[data-t=vag]{--tabc:#e07b18}body:not(.t-klassisk) #tabs button[data-t=varn]{--tabc:#d64545}body:not(.t-klassisk) #tabs button[data-t=mane]{--tabc:#7a5cc4}body:not(.t-klassisk) #tabs button[data-t=fiske]{--tabc:#1f9bb5}body:not(.t-klassisk) #tabs button[data-t=brand]{--tabc:#e2552d}body:not(.t-klassisk) #tabs button[data-t=svamp]{--tabc:#9b6a3c}body:not(.t-klassisk) #tabs button[data-t=jmf]{--tabc:#5c7cfa}body:not(.t-klassisk) #tabs button[data-t=hist]{--tabc:#b0782a}body:not(.t-klassisk) #tabs button[data-t=plats]{--tabc:#6b7a8f}
/* temperaturfärger och staplar */
.tc{font-weight:700}body.t-klassisk .tc{color:inherit!important}
.hb{height:26px;display:flex;align-items:flex-end;justify-content:center;margin:2px 0}.hb i{display:block;width:14px;border-radius:4px 4px 1px 1px;background:linear-gradient(#5fb0ff,#1f5fae)}
.wb{height:5px;border-radius:3px;margin:3px auto 0;max-width:44px}body.t-klassisk .hb,body.t-klassisk .wb{display:none}
.h{border-radius:12px}body:not(.t-klassisk) .h:nth-child(odd){background:color-mix(in srgb,var(--acc) 8%,transparent)}
.thsel{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.thsel button{border:2px solid transparent;border-radius:12px;padding:8px 10px;font-size:13px;color:#fff;min-width:96px;text-align:left;text-shadow:0 1px 2px #0005}
.thsel button.on{border-color:var(--t);box-shadow:0 0 0 2px var(--bg) inset}
/* ===== v1o: realistisk väderbild + canvas ===== */
#now .wxs{position:absolute;z-index:0;inset:0 0 0 auto;width:62%;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent);mask-image:linear-gradient(to left,#000 45%,transparent)}
#now .wxs .wbg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;object-position:70% 50%;filter:brightness(calc(var(--fl,1)*.78)) saturate(1.05);animation:wxsway 6s ease-in-out infinite alternate}
#now .wxs canvas{position:absolute;inset:0;width:100%;height:100%}
#now.hasx{background-image:var(--hero)}
#now.hasx .row,#now.hasx .small,#now.hasx b{text-shadow:0 1px 3px #0009}
@media (min-width:700px){#now.hasx{padding-right:calc(40% + 18px);min-height:230px}#now .wxs{inset:10px 10px 10px auto;width:40%;border-radius:14px;box-shadow:0 4px 18px #0004;-webkit-mask-image:none;mask-image:none}#now .wxs .wbg{filter:brightness(var(--fl,1))}}
@keyframes wxsway{from{transform:translate(calc(var(--sw,0)*-6px),0) scale(1)}to{transform:translate(calc(var(--sw,0)*6px),calc(var(--sw,0)*-2px)) scale(1.02)}}
@media (prefers-reduced-motion:reduce){#now .wxs .wbg{animation:none}}
/* v1p */
#now .wxs .wbg.nx{opacity:0;transition:opacity 1.2s ease}#now .wxs .wbg.nx.on{opacity:1}
#now.hasx::after{display:none}
.fcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 10px;margin:2px 0 4px 22px}.fcgrid label{padding:3px 0}