:root{
color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
background:#070b12;color:#f5f7fb;--panel:rgba(255,255,255,.055);--line:rgba(255,255,255,.09);
--muted:#8f9bad;--accent:#73d7ff;--good:#76f7b1;--warn:#ffd66e;--bad:#ff7d8f}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(80% 60% at 50% -10%,#15345c 0%,transparent 62%),#070b12}
body{padding:max(18px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
.shell{width:min(520px,100%);margin:0 auto}header{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 18px}
.eyebrow{font-size:10px;letter-spacing:.18em;color:#7e8a9d;font-weight:700}h1{font-size:25px;margin:4px 0 0;letter-spacing:-.04em}
.version{font-size:11px;color:#758197;font-weight:700;letter-spacing:0;vertical-align:middle}.iconBtn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:white;font-size:22px}
.hero{position:relative;overflow:hidden;min-height:260px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));padding:30px 24px 26px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.hero::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-110px;top:-120px;background:rgba(115,215,255,.10)}
.statusDot{position:absolute;left:24px;top:24px;width:11px;height:11px;border-radius:50%;background:#8f9bad;box-shadow:0 0 0 6px rgba(143,155,173,.08)}
.hero.dry .statusDot{background:var(--good);box-shadow:0 0 0 6px rgba(118,247,177,.09)}.hero.rain .statusDot{background:var(--accent);box-shadow:0 0 0 6px rgba(115,215,255,.10)}
.hero.soon .statusDot{background:var(--warn);box-shadow:0 0 0 6px rgba(255,214,110,.10)}.hero.error .statusDot{background:var(--bad);box-shadow:0 0 0 6px rgba(255,125,143,.10)}
.nowLabel{font-size:12px;font-weight:800;letter-spacing:.16em;color:#9ba6b6;margin-bottom:6px}.eta{font-size:clamp(42px,12vw,66px);line-height:.98;letter-spacing:-.065em;font-weight:760}
.etaSub{margin-top:13px;color:#a9b3c2;font-size:14px;line-height:1.45;max-width:420px}.rangePanel{margin-top:10px;padding:14px 17px;border:1px solid var(--line);border-radius:17px;background:rgba(115,215,255,.06);display:flex;justify-content:space-between;align-items:center}
.rangePanel span{color:#8593a7;font-size:12px}.rangePanel strong{font-size:14px}.hidden{display:none}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.card{min-height:112px;padding:17px;border-radius:20px;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}
.card span{color:var(--muted);font-size:12px;margin-bottom:auto}.card strong{font-size:21px;letter-spacing:-.03em;margin-top:12px}.card small{color:#778397;font-size:11px;margin-top:3px}
.cellCard{margin-top:10px;padding:17px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025))}
.cellHeader{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em}.cellHeader span{color:#748197;font-weight:700}.cellHeader b{color:#cbd5e2}
.cellGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:18px}.cellGrid div{display:flex;flex-direction:column;gap:4px}.cellGrid span{color:var(--muted);font-size:11px}.cellGrid b{font-size:15px}
.details{margin-top:10px;padding:8px 17px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.035)}.detailRow{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px}
.detailRow:last-child{border-bottom:0}.detailRow span{color:var(--muted)}.detailRow b{font-weight:600;text-align:right;color:#dbe2ec}.actions{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-top:13px}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}.primary,.secondary{border:0;min-height:50px;border-radius:16px;font-weight:700;font-size:14px}.primary{background:#eaf7ff;color:#07101b}.secondary{background:rgba(255,255,255,.07);color:#eaf0f8;border:1px solid var(--line)}
.advanced{margin-top:18px;color:#8c98aa;font-size:12px}.advanced summary{cursor:pointer;padding:8px 2px}.manual{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}.manual label{display:flex;flex-direction:column;gap:5px}.manual button{grid-column:1/-1}
input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:white;border-radius:12px;padding:11px;font-size:14px}
pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border-radius:14px;background:#04070c;border:1px solid rgba(255,255,255,.05);color:#768398;font-size:10px}
footer{color:#5f6b7d;font-size:10px;line-height:1.5;text-align:center;padding:20px 10px 4px}@media(max-width:360px){.grid,.actions{grid-template-columns:1fr}}

.episodePanel{
  margin-top:10px;padding:16px 17px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(118,247,177,.055),rgba(255,255,255,.025));
}
.episodeEyebrow{font-size:10px;letter-spacing:.15em;color:#738398;font-weight:800;margin-bottom:7px}
.episodeMain{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.episodeMain strong{font-size:20px;letter-spacing:-.03em}
.episodeMain span{font-size:12px;color:#93a0b2;text-align:right}

/* v0.4.1 UI polish */
body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
header{margin-bottom:14px}
.hero{min-height:220px;padding:26px 22px 22px}
.grid{gap:8px;margin-top:8px}
.card{min-height:102px;padding:15px}
.card strong{font-size:20px}
.cellCard{margin-top:8px;padding:15px}
.cellGrid{margin-top:14px;gap:11px 18px}
.details{margin-top:8px;padding:5px 15px}
.detailRow{padding:9px 0}
.rangePanel,.episodePanel,.timelineCard{margin-top:8px}

.meter{
  position:relative;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.07);margin-top:10px
}
.meter i{
  display:block;height:100%;width:0;border-radius:inherit;
  transition:width .35s ease
}
.intensityMeter{
  background:linear-gradient(90deg,
    rgba(115,215,255,.16) 0 24%,
    rgba(115,215,255,.28) 24% 45%,
    rgba(255,214,110,.22) 45% 68%,
    rgba(255,125,143,.20) 68% 100%)
}
.intensityMeter i{
  background:linear-gradient(90deg,#6bd5ff 0%,#53b8ff 35%,#ffd66e 68%,#ff7d8f 100%);
  box-shadow:0 0 12px rgba(115,215,255,.28)
}
.confidenceMeter i{background:linear-gradient(90deg,#6bd5ff,#76f7b1)}

.directionValue{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.directionValue strong{margin-top:0}
.directionArrow{
  font-style:normal;font-size:25px;line-height:1;color:#9adfff;
  transform-origin:50% 50%;transition:transform .35s ease
}

.timelineCard{
  padding:14px 16px 12px;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.035)
}
.timelineHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.timelineHeader span{font-size:10px;letter-spacing:.14em;color:#748197;font-weight:800}
.timelineHeader b{font-size:11px;color:#aeb9c8;font-weight:600;text-align:right}
.timelineBar{
  position:relative;display:grid;grid-template-columns:repeat(24,1fr);
  gap:2px;height:11px;border-radius:999px;overflow:hidden
}
.timelineSlot{background:rgba(255,255,255,.06)}
.timelineSlot.wet.light{background:#6bd5ff}
.timelineSlot.wet.moderate{background:#4ea8ff}
.timelineSlot.wet.heavy{background:#ffd66e}
.timelineSlot.wet.veryheavy{background:#ff7d8f}
.timelineTicks{display:flex;justify-content:space-between;margin-top:7px;color:#667487;font-size:9px}

.actionDock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 16px max(12px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(7,11,18,0),rgba(7,11,18,.93) 22%,rgba(7,11,18,.98));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.actionDock .actions{width:min(520px,100%);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
.actionDock .primary,.actionDock .secondary{min-height:48px;box-shadow:0 10px 35px rgba(0,0,0,.22)}

@media(max-width:360px){
  .actionDock .actions{grid-template-columns:1fr 1fr}
  .actionDock .primary,.actionDock .secondary{font-size:12px}
}