:root{
  --ink:#122033;
  --ink-soft:#3A4757;
  --muted:#9AA7B4;
  --muted-2:#B2BCC6;
  --label:#8A97A6;
  --cyan:#00C2FF;
  --cyan-deep:#0098D4;
  --amber:#FFB700;
  --amber-deep:#D98A00;
  --cloud:#6B7886;
  --line:rgba(18,32,51,.08);
  --line-soft:rgba(18,32,51,.05);
  --line-strong:rgba(18,32,51,.14);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }

@keyframes liveblink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }

body{
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
  background:#FFFFFF;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
}

.page{ width:100%; display:flex; justify-content:center; }

.container{
  width:100%;
  max-width:600px;
  padding:clamp(28px,7vw,56px) clamp(22px,6vw,44px) clamp(40px,8vw,72px);
}

/* HEADER */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.location{
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.20em;
  color:var(--label);
}
.clock-wrap{
  display:flex;
  align-items:center;
  gap:7px;
}
.live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  animation:liveblink 1.6s ease-in-out infinite;
}
.clock{
  font-family:'DM Mono',monospace;
  font-size:13px;
  color:var(--label);
  font-variant-numeric:tabular-nums;
}

/* HERO TEMP */
.hero{
  margin-top:clamp(40px,9vw,64px);
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.hero-temp{
  font-family:'DM Mono',monospace;
  font-size:clamp(96px,28vw,132px);
  font-weight:400;
  letter-spacing:-0.05em;
  line-height:.8;
}
.hero-unit{
  font-family:'DM Mono',monospace;
  font-size:clamp(28px,7vw,36px);
  color:var(--muted-2);
  margin-top:8px;
}
.hero-sub{
  font-size:clamp(14px,3.6vw,16px);
  color:var(--cloud);
  margin-top:18px;
}

/* RAIN GRAPH */
.graph{
  margin-top:clamp(46px,10vw,68px);
}
.graph-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:18px;
  gap:12px;
}
.graph-title{
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--ink);
  white-space:nowrap;
}
.graph-max{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.graph-body{
  display:flex;
  gap:12px;
}

.y-axis{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  height:140px;
  padding:2px 0;
}
.y-axis span{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--muted);
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.plot-wrap{
  flex:1 1 auto;
  min-width:0;
}
.plot{
  position:relative;
  height:140px;
}
.gridline{
  position:absolute;
  left:0; right:0;
  height:1px;
}
.gridline--top{ top:0; background:var(--line); }
.gridline--minor{ background:var(--line-soft); }
.gridline--base{ bottom:0; background:var(--line-strong); }

.chart-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.x-axis{
  display:flex;
  justify-content:space-between;
  margin-top:9px;
}
.x-axis span{
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.x-axis span:nth-child(2){ color:var(--muted-2); }

.graph-foot{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--muted-2);
  margin-top:10px;
  text-align:right;
}

/* TIMELINE */
.timeline{
  margin-top:clamp(44px,10vw,64px);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:clamp(10px,3vw,20px);
}

.timecol-label{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  margin-bottom:16px;
  color:var(--muted);
}
.timecol--now .timecol-label{ color:var(--ink); }

.timecol-dot{
  width:9px; height:9px;
  border-radius:50%;
  margin-bottom:16px;
  background:#C7D0D9;
}
.timecol-dot--now{ background:var(--cyan); }
.timecol.warn .timecol-dot{ background:var(--amber); }

.timecol-temp{
  font-family:'DM Mono',monospace;
  font-size:clamp(24px,6.5vw,30px);
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--ink-soft);
}
.timecol--now .timecol-temp{ color:var(--ink); }

.timecol-rows{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.row-label{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:.1em;
  color:var(--muted-2);
  margin-bottom:2px;
}
.row-val{
  font-family:'DM Mono',monospace;
  font-size:13px;
}
.row-val--rain{ color:var(--cyan-deep); }
.row-val--wind,
.row-val--storm{ color:var(--ink-soft); }

.timecol.warn .row-val--rain,
.timecol.warn .row-val--wind,
.timecol.warn .row-val--storm{ color:var(--amber-deep); }

/* MAP */
.map-section{
  margin-top:clamp(44px,10vw,64px);
}
.map-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:8px;
}
.map-title{
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--ink);
}
.map-source{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--muted);
}

.map-canvas-wrap{
  position:relative;
}
.map-canvas{
  width:100%;
  height:clamp(300px,72vw,400px);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(18,32,51,.10);
  background:#EEF1F4;
  z-index:0;
  filter:brightness(0.9) saturate(0.8);
}

.map-icon-bar{
  position:absolute;
  top:12px; right:12px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.icon-btn{
  width:34px; height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(18,32,51,.12);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  cursor:pointer;
  color:var(--ink-soft);
  box-shadow:0 4px 12px -6px rgba(18,32,51,.3);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn--active{
  border-color:var(--cyan);
  color:var(--cyan);
}

.history-btn{
  position:absolute;
  bottom:12px; left:12px;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(18,32,51,.12);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  cursor:pointer;
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink);
  box-shadow:0 4px 12px -6px rgba(18,32,51,.3);
}
.history-btn--active{ border-color:var(--cyan); color:var(--cyan-deep); }
.history-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--cloud);
}
.history-btn--active .history-dot{
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,194,255,.25);
}

.locate-btn{
  position:absolute;
  bottom:12px; right:12px;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(18,32,51,.12);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  cursor:pointer;
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink);
  box-shadow:0 4px 12px -6px rgba(18,32,51,.3);
}
.locate-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,194,255,.25);
}

.map-legend{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.08em;
  color:var(--muted-2);
  margin-top:10px;
  line-height:1.7;
}

/* FOOTER */
.footer{
  margin-top:clamp(40px,9vw,60px);
  padding-top:20px;
  border-top:1px solid var(--line);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--muted-2);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

/* LEAFLET OVERRIDES */
.leaflet-container{ font-family:'DM Mono',monospace !important; background:#EEF1F4 !important; }
.leaflet-control-attribution{ font-size:9px !important; background:rgba(255,255,255,.7) !important; color:#9AA7B4 !important; }
.leaflet-bar a{ color:#122033 !important; }