/* ── Vercel Design Tokens ── */
:root {
  --bg:             #ffffff;
  --bg-subtle:      #fafafa;
  --bg-hover:       #f5f5f5;

  --text-primary:   #171717;
  --text-secondary: #4d4d4d;
  --text-muted:     #666666;
  --text-faint:     #808080;

  /* Vercel: shadow-as-border (no CSS border on cards) */
  --shadow-border:  0px 0px 0px 1px rgba(0,0,0,0.08);
  --shadow-card:    rgba(0,0,0,0.08) 0px 0px 0px 1px,
                    rgba(0,0,0,0.04) 0px 2px 4px,
                    #fafafa 0px 0px 0px 1px inset;

  /* Vercel workflow accent colors */
  --blue:    #0a72ef;
  --pink:    #de1d8d;
  --red:     #ff5b4f;
  --link:    #0072f5;

  /* Semantic */
  --success-bg:   #f0fdf4;
  --success-text: #166534;
  --error-bg:     #fff0f0;
  --error-text:   #d93025;
  --warn-bg:      #fffbeb;
  --warn-text:    #92400e;
  --info-bg:      #ebf5ff;
  --info-text:    #0068d6;

  --border:       #ebebeb;

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-pill: 9999px;

  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'Source Code Pro', 'ui-monospace', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
}

/* ── Map / Globe — 布局不变 ── */
#map {
  position: fixed;
  inset: 0;
  z-index: 1;
  transition: opacity 0.3s;
}

#globe {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #000;
  display: none;
}

body.globe-mode #map   { display: none; }
body.globe-mode #globe { display: block; }

body.globe-mode .leaflet-control { display: none !important; }

/* ── Globe 信息卡 — Vercel 亮色卡片 ── */
.globe-card {
  position: fixed;
  z-index: 1100;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  max-width: 300px;
  min-width: 200px;
  backdrop-filter: blur(4px);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  pointer-events: auto;
  animation: globe-card-in 0.18s ease;
}

@keyframes globe-card-in {
  from { opacity: 0; transform: scale(0.93) translateY(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.globe-card.hidden { display: none; }

.globe-card-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--bg-hover);
  border: none;
  color: var(--text-faint);
  border-radius: 50%;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-border);
  transition: background 0.12s, color 0.12s;
}
.globe-card-close:hover {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

/* ── Overlay 浮层面板 — Vercel 亮色毛玻璃 ── */
.overlay {
  position: fixed;
  z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}

.leaflet-control { z-index: 1000 !important; }

/* ── 控制面板 top-left ── */
.top-left {
  top: 16px;
  left: 16px;
  width: min(472px, calc(100vw - 32px));
  padding: 14px;
}

h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.25;
  color: var(--text-primary);
}

.sub {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
}

.controls {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  white-space: nowrap;
}

.custom-controls {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.custom-controls input[type="datetime-local"] {
  height: 30px;
  border-radius: var(--radius-md);
  border: none;
  padding: 0 8px;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  box-shadow: var(--shadow-border);
  outline: none;
  transition: box-shadow 0.12s;
}
.custom-controls input[type="datetime-local"]:focus {
  box-shadow: 0 0 0 2px hsla(212,100%,48%,1);
}

/* ── Select — Vercel ghost pill ── */
select {
  height: 30px;
  border-radius: var(--radius-pill);
  border: none;
  padding: 0 26px 0 10px;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--shadow-border);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: box-shadow 0.12s;
}
select:focus { box-shadow: 0 0 0 2px hsla(212,100%,48%,1); }
select:hover { box-shadow: rgba(0,0,0,0.12) 0px 0px 0px 1px; }

/* ── 自定义控件第二行（震级 + 倍速） ── */
.custom-controls-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}
.custom-controls-row2 #speedBtn {
  margin-left: 12px;
}
.custom-controls-row2 #playBtn {
  margin-left: 0;
}

/* ── 震级范围选择器组 ── */
.mag-range-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mag-range-group select {
  width: 68px;
  padding-left: 8px;
  padding-right: 22px;
}
.mag-range-sep {
  font-size: 11px;
  color: var(--text-faint);
  user-select: none;
}

/* ── Buttons — Vercel 风格 ── */
button {
  height: 30px;
  border-radius: var(--radius-md);
  border: none;
  padding: 0 12px;
  /* 默认 ghost 白底，避免全局黑色影响语义按钮 */
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-border);
  transition: background 0.12s, box-shadow 0.12s;
}
button:hover { background: var(--bg-subtle); box-shadow: rgba(0,0,0,0.13) 0px 0px 0px 1px; }
button:focus-visible { outline: 2px solid hsla(212,100%,48%,1); outline-offset: 2px; }

/* 刷新 — 蓝色 ghost，更有辨识度 */
#refreshBtn {
  background: var(--info-bg);
  color: var(--info-text);
  box-shadow: 0px 0px 0px 1px rgba(0,104,214,0.25);
}
#refreshBtn:hover { background: #dbeeff; box-shadow: 0px 0px 0px 1px rgba(0,104,214,0.4); }

/* 切换底图 */
#switchTileBtn {
  background: var(--bg);
  color: var(--text-muted);
  box-shadow: var(--shadow-border);
}
#switchTileBtn:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* 切换 2D/3D — 始终保持 ghost 蓝色，不变黑 */
#toggleGlobeBtn {
  background: var(--bg);
  color: var(--blue);
  box-shadow: 0px 0px 0px 1px rgba(10,114,239,0.25);
}
#toggleGlobeBtn:hover {
  background: var(--info-bg);
  box-shadow: 0px 0px 0px 1px rgba(10,114,239,0.4);
}
/* globe 模式下变为实心蓝，但不用黑色 */
body.globe-mode #toggleGlobeBtn {
  background: var(--blue);
  color: #ffffff;
  box-shadow: none;
}
body.globe-mode #toggleGlobeBtn:hover { background: #0861d4; }

body.globe-mode #switchTileBtn { display: none; }

/* 夜间 — color 必须用白色，因为 JS 会直接写 background:#b45309 或 #0369a1 */
#globeDayNightBtn {
  display: none;
  background: #b45309;   /* 与 JS 默认值对齐 */
  color: #ffffff;        /* 白色文字在两种 JS 背景下均可读 */
  box-shadow: none;
}
#globeDayNightBtn:hover { opacity: 0.85; }
body.globe-mode #globeDayNightBtn { display: inline-flex; align-items: center; }

/* 柱状图 */
#globeHeatmapBtn {
  display: none;
  background: #f5f3ff;
  color: #7c3aed;
  box-shadow: 0px 0px 0px 1px rgba(124,58,237,0.2);
}
#globeHeatmapBtn:hover { background: #ede9fe; }
body.globe-mode #globeHeatmapBtn { display: inline-flex; align-items: center; }
body.globe-mode.hexbin-mode #globeHeatmapBtn {
  background: var(--success-bg);
  color: var(--success-text);
  box-shadow: 0px 0px 0px 1px rgba(22,101,52,0.2);
}

/* 自转 */
#globeAutoRotateBtn {
  display: none;
  background: var(--bg);
  color: var(--text-faint);
  box-shadow: var(--shadow-border);
}
body.globe-mode #globeAutoRotateBtn { display: inline-flex; align-items: center; }
#globeAutoRotateBtn.active {
  background: var(--info-bg);
  color: var(--info-text);
  box-shadow: 0px 0px 0px 1px rgba(0,104,214,0.2);
}
#globeAutoRotateBtn:hover { background: var(--bg-subtle); }

/* 播放 */
#playBtn {
  background: var(--success-bg);
  color: var(--success-text);
  box-shadow: 0px 0px 0px 1px rgba(22,101,52,0.2);
}
#playBtn:hover { background: #dcfce7; }

/* 倍速 */
#speedBtn {
  background: #f5f3ff;
  color: #7c3aed;
  box-shadow: 0px 0px 0px 1px rgba(124,58,237,0.2);
}
#speedBtn:hover { background: #ede9fe; }

/* ── Meta 信息行 ── */
.meta {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.meta strong { color: var(--text-secondary); font-weight: 500; }

/* ── 状态徽章 — Vercel pill badge ── */
.state {
  margin-top: 10px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.state.loading { background: var(--info-bg);    color: var(--info-text); }
.state.error   { background: var(--error-bg);   color: var(--error-text); }
.state.empty   { background: var(--warn-bg);    color: var(--warn-text); }
.state.success { background: var(--success-bg); color: var(--success-text); }

.hidden { display: none !important; }

/* ── 地震列表面板 bottom-left ── */
.bottom-left {
  left: 16px;
  bottom: 16px;
}

.list-panel {
  width: min(360px, calc(100vw - 32px));
  max-height: 38vh;
  overflow: auto;
  padding: 10px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.list-panel::-webkit-scrollbar {
  display: none;
}

.list-panel h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}

#eventList {
  list-style: none;
  margin: 0;
  padding: 0;
}

#eventList li {
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background 0.08s;
}
#eventList li:hover  { background: var(--bg-subtle); }
#eventList li:active { background: var(--bg-hover); }
#eventList li:last-child { border-bottom: none; }

#eventList .row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#eventList .mag {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12px;
}

#eventList .row2 {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 图例面板 bottom-right ── */
.bottom-right {
  right: 16px;
  bottom: 16px;
}

.legend {
  width: 220px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.legend h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mag-low  { background: #22c55e; }
.mag-mid  { background: #f59e0b; }
.mag-high { background: #ef4444; }

.legend p {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
}

/* ── 时间轴面板 ── */
.timeline-panel {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  padding: 10px 12px;
}

.timeline-panel h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
}

.timeline-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

#timelineRange {
  width: 100%;
  margin: 10px 0 8px;
  accent-color: var(--text-primary);
}

.timeline-ends {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}

/* ── Leaflet Popup — Vercel 亮色弹窗 ── */
.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.98) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-secondary) !important;
  border: none !important;
}

.leaflet-popup-tip {
  background: #ffffff !important;
}

.leaflet-popup-content {
  margin: 10px 12px;
  color: var(--text-secondary);
}

.popup-title {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

.popup-enrichment {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.popup-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-faint);
}

.popup-keywords {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.popup-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.popup-link {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: opacity 0.12s;
}
.popup-link:hover { opacity: 0.75; }

.popup-link-news     { background: var(--info-bg);    border-color: #bfdbfe; color: var(--info-text); }
.popup-link-video    { background: var(--error-bg);   border-color: #fecdd3; color: #be123c; }
.popup-link-official { background: var(--success-bg); border-color: #bbf7d0; color: var(--success-text); }

/* ── 地图脉冲动画 — 功能色不变 ── */
.leaflet-div-icon:empty,
[data-map-eq-anim] {
  background: none;
  border: none;
}

.pulse-wrapper {
  position: relative;
  width: var(--pulse-size);
  height: var(--pulse-size);
  pointer-events: none;
}

.pulse-core {
  position: absolute;
  width: var(--pulse-core-size, 12px);
  height: var(--pulse-core-size, 12px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: var(--pulse-color);
  box-shadow:
    0 0 0 2.5px rgba(56, 189, 248, 0.7),
    0 0 10px 3px rgba(56, 189, 248, 0.45),
    0 0 3px 1px rgba(0, 0, 0, 0.25);
}

.pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #38bdf8;
  opacity: 0;
}

.pulse-ring-1 { animation: quakePulse 2.4s ease-out infinite 0s; }
.pulse-ring-2 { animation: quakePulse 2.4s ease-out infinite 0.75s; }
.pulse-ring-3 { animation: quakePulse 2.4s ease-out infinite 1.5s; }

@keyframes quakePulse {
  0%   { transform: scale(0.06); opacity: 0.9; border-color: #e0f2fe; }
  40%  { opacity: 0.55; border-color: #38bdf8; }
  100% { transform: scale(1);    opacity: 0;   border-color: #0284c7; }
}

/* ── 滚动条 ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── 响应式 ── */
@media (max-width: 900px) {
  .legend { display: none; }
  .timeline-panel { display: none !important; }
}