*,*::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:#f59e0b;
  --accent-light:rgba(245,158,11,.15);
  --border:#334155;
  --intensity-1:#60a5fa;
  --intensity-2:#34d399;
  --intensity-3:#fbbf24;
  --intensity-4:#f97316;
  --intensity-5:#ef4444;
  --intensity-6:#dc2626;
  --intensity-7:#991b1b;
  --radius:8px;
}

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

/* ── Header ── */
.header{
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-shrink:0;
}
.header-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.header h1{
  font-size:1.05rem;font-weight:700;color:var(--accent);
  display:flex;align-items:center;gap:6px;
}
.header-icon{width:18px;height:18px;flex-shrink:0}
.subtitle{font-size:.72rem;color:var(--text-secondary)}
.header-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.header-controls select{
  padding:6px 10px;min-height:44px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg-tertiary);
  color:var(--text-primary);font-size:.78rem;font-family:inherit;cursor:pointer;
}
.header-controls select:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-light)}
.btn-sidebar-toggle{
  display:none;padding:6px 8px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg-tertiary);
  color:var(--text-primary);cursor:pointer;
}
.btn-sidebar-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-light)}

/* ── Layout ── */
.container{
  display:flex;
  flex:1;
  overflow:hidden;
  position:relative;
}

/* ── Sidebar ── */
.sidebar{
  width:320px;min-width:280px;background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;
}
.sidebar-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:900}
.stats-bar{
  display:flex;gap:0;border-bottom:1px solid var(--border);
}
.stat{
  flex:1;text-align:center;padding:12px 8px;
  border-right:1px solid var(--border);
}
.stat:last-child{border-right:none}
.stat-num{display:block;font-size:1.2rem;font-weight:900;color:var(--accent)}
.stat-label{font-size:.65rem;color:var(--text-secondary)}
.sidebar-title{
  font-size:.75rem;font-weight:700;color:var(--text-secondary);
  padding:10px 14px;border-bottom:1px solid var(--border);
  text-transform:uppercase;letter-spacing:.5px;
}
.quake-list{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}

/* ── Quake item ── */
.quake-item{
  padding:10px 14px;border-bottom:1px solid var(--border);
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  transition:background .1s;
}
.quake-item:hover,.quake-item:focus-visible{background:var(--bg-tertiary)}
.quake-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.quake-item.active{background:rgba(245,158,11,.1);border-left:3px solid var(--accent)}

.quake-badge{
  min-width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;
}
.quake-body{flex:1;min-width:0}
.quake-place{font-size:.82rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quake-meta{font-size:.7rem;color:var(--text-secondary);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.quake-mag{font-size:.82rem;font-weight:700;color:var(--accent);white-space:nowrap}

/* ── Map ── */
#map{flex:1;z-index:1}
.leaflet-container{background:var(--bg-primary)!important}
.leaflet-popup-content-wrapper{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius)}
.leaflet-popup-tip{background:var(--bg-secondary)}
.leaflet-popup-content{margin:10px 14px;font-size:.82rem;line-height:1.7}

/* ── Loading ── */
.loading-overlay{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(30,41,59,.95);padding:16px 28px;border-radius:var(--radius);
  z-index:2000;font-size:.85rem;color:var(--text-secondary);pointer-events:none;
  display:none;
}
.loading-msg{text-align:center;padding:30px;color:var(--text-secondary);font-size:.85rem}

/* ── Intensity colors ── */
.intensity-1{background:var(--intensity-1)}
.intensity-2{background:var(--intensity-2)}
.intensity-3{background:var(--intensity-3);color:#111}
.intensity-4{background:var(--intensity-4)}
.intensity-5{background:var(--intensity-5)}
.intensity-6{background:var(--intensity-6)}
.intensity-7{background:var(--intensity-7)}

/* ── Mobile ── */
@media(max-width:767px){
  .header{flex-wrap:wrap;padding:8px 12px}
  .header-controls{width:100%;justify-content:flex-end}
  .btn-sidebar-toggle{display:inline-flex;align-items:center}
  .sidebar{
    position:absolute;top:0;left:0;bottom:0;z-index:1000;
    transform:translateX(-100%);transition:transform .25s ease;
    width:85%;max-width:320px;min-width:unset;
    border-right:none;box-shadow:2px 0 12px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block;z-index:900}
}

/* ── Footer ── */
.site-footer{
  background:var(--bg-secondary);border-top:1px solid var(--border);
  padding:12px 16px;font-size:.7rem;color:var(--text-secondary);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  flex-shrink:0;
}
.site-footer a{color:var(--accent);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-links{display:flex;gap:12px}

/* ── Error retry ── */
.btn-retry{
  margin-top:12px;padding:8px 20px;min-height:44px;border-radius:var(--radius);
  border:1px solid var(--accent);background:transparent;
  color:var(--accent);font-size:.82rem;font-family:inherit;cursor:pointer;
}
.btn-retry:hover{background:var(--accent-light)}
.btn-retry:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-light)}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:0s!important;animation-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.sidebar-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin: 12px 16px 6px;
  letter-spacing: 0.5px;
}