*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-primary:#0f172a;
  --bg-secondary:#1e293b;
  --bg-tertiary:#334155;
  --text-primary:#f1f5f9;
  --text-secondary:#94a3b8;
  --accent:#3b82f6;
  --accent-light:rgba(59,130,246,.15);
  --border:#334155;
  --rain-light:#60a5fa;
  --rain-heavy:#2563eb;
  --radius:12px;
}

html,body{
  height:100%;
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}

/* ── Header ── */
.header{
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:12px;
}
.header h1{font-size:1.1rem;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:6px}
.header-icon{width:16px;height:16px;flex-shrink:0}
.header .subtitle{font-size:.75rem;color:var(--text-secondary)}

/* ── Layout ── */
.container{
  display:grid;
  grid-template-columns:1fr 380px;
  height:calc(100vh - 49px);
}

/* ── Map ── */
#map{width:100%;height:100%}
.leaflet-container{background:var(--bg-primary)!important}

/* ── Sidebar ── */
.sidebar{
  background:var(--bg-secondary);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}

.panel{padding:20px}
.panel-title{
  font-size:.8rem;
  font-weight:700;
  color:var(--text-secondary);
  letter-spacing:1px;
  margin-bottom:12px;
  text-transform:uppercase;
}

/* ── Form ── */
.form-group{margin-bottom:14px}
.form-group label{
  display:block;
  font-size:.8rem;
  color:var(--text-secondary);
  margin-bottom:4px;
  font-weight:500;
}
.form-group input[type="text"],
.form-group input[type="date"]{
  width:100%;
  padding:10px 12px;
  min-height:44px;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-primary);
  font-size:.9rem;
  font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.form-group input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-light)}
.form-group input::-webkit-calendar-picker-indicator{filter:invert(1)}

.location-display{
  padding:10px 12px;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.85rem;
  color:var(--text-secondary);
  min-height:40px;
  display:flex;
  align-items:center;
}
.location-display.active{color:var(--text-primary)}

.btn-search{
  width:100%;
  padding:12px;
  min-height:44px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:.95rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:opacity .15s;
}
.btn-search:hover:not(:disabled){opacity:.85}
.btn-search.loading{pointer-events:none;opacity:.6}
.btn-search .btn-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
.btn-search.loading .btn-spinner{display:inline-block}
.btn-search:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-light)}
.btn-search:disabled{opacity:.4;cursor:not-allowed}

/* ── Result ── */
.result{
  border-top:1px solid var(--border);
  padding:20px;
  flex:1;
}

.result-summary{
  text-align:center;
  margin-bottom:20px;
}
.result-total{
  font-size:2.8rem;
  font-weight:900;
  color:var(--accent);
  line-height:1;
}
.result-unit{
  font-size:1rem;
  color:var(--text-secondary);
  margin-left:4px;
}
.result-label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  padding:4px 14px;
  border-radius:20px;
  font-size:.85rem;
  font-weight:700;
}
.result-label svg{flex-shrink:0;vertical-align:middle}
.label-none{background:rgba(148,163,184,.15);color:#94a3b8}
.label-light{background:rgba(96,165,250,.15);color:#60a5fa}
.label-rain{background:rgba(59,130,246,.2);color:#3b82f6}
.label-moderate{background:rgba(245,158,11,.15);color:#f59e0b}
.label-heavy{background:rgba(239,68,68,.15);color:#ef4444}
.label-extreme{background:rgba(220,38,38,.2);color:#dc2626}

.result-location{
  text-align:center;
  font-size:.85rem;
  color:var(--text-secondary);
  margin-bottom:16px;
}

/* Result summary */
.result-summary{
  text-align:center;
  margin-bottom:16px;
}
.card-source{
  font-size:.75rem;
  color:var(--text-secondary);
  margin-bottom:4px;
  font-weight:500;
  letter-spacing:.5px;
}
.card-total-wrap{margin-bottom:6px}
.result-total{
  font-size:3rem;
  font-weight:900;
  color:#f59e0b;
  line-height:1;
}
.result-unit{
  font-size:1rem;
  color:var(--text-secondary);
  margin-left:4px;
}
.card-station{
  font-size:.8rem;
  color:var(--text-secondary);
  margin-top:8px;
}

.chart-wrap{
  background:var(--bg-primary);
  border-radius:var(--radius);
  padding:16px;
  border:1px solid var(--border);
}

/* ── Error / Empty ── */
.message{
  text-align:center;
  padding:30px 20px;
  color:var(--text-secondary);
  font-size:.9rem;
}
.message svg{
  width:48px;height:48px;
  margin-bottom:12px;
  opacity:.4;
}
.btn-retry{
  margin-top:12px;
  padding:8px 20px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  font-family:inherit;
  font-size:.85rem;
  cursor:pointer;
}
.btn-retry:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-light)}

/* ── Loading ── */
.loading{display:none;text-align:center;padding:30px}
.spinner{
  width:32px;height:32px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .6s linear infinite;
  margin:0 auto 10px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Station tooltip */
.station-tooltip{
  background:rgba(30,41,59,.95)!important;
  border:1px solid rgba(245,158,11,.5)!important;
  color:#f1f5f9!important;
  font-size:12px!important;
  font-weight:500!important;
  padding:4px 10px!important;
  border-radius:6px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.3)!important;
}
.station-tooltip::before{
  border-top-color:rgba(245,158,11,.5)!important;
}

/* ── Mobile ── */
@media(max-width:768px){
  .container{
    grid-template-columns:1fr;
    grid-template-rows:min(50vh,300px) 1fr;
    height:auto;
    min-height:calc(100vh - 49px);
  }
  #map{min-height:240px}
  .sidebar{border-left:none;border-top:1px solid var(--border)}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .spinner,.btn-spinner{animation:none}
  *{transition-duration:0s!important}
}

/* スクリーンリーダー専用 */
.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;
}
h2.panel-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-transform: uppercase;
}