:root {
  --bg-2: #0a142a;
  --panel: rgba(10, 20, 42, .92);
  --panel-solid: #0d1a33;
  --line-strong: rgba(138, 175, 236, .35);
  --text-dim: var(--muted);
  --text-faint: #8399bc;
  --accent-2: var(--accent);
  --selection: #c6deff;
  --land: #172e56;
  --land-hi: #325794;
  --ocean: var(--bg);
  --radius: 8px;
  --shadow: 0 18px 50px rgba(1, 5, 18, .6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  background: radial-gradient(ellipse at 78% 12%, #122c5b45, transparent 45%), var(--bg);
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 10, 24, .92);
  backdrop-filter: blur(14px);
  flex-wrap: wrap;
  z-index: 30;
}

.search {
  position: relative;
  flex: 1 1 240px;
  min-width: 190px;
  max-width: 380px;
}
.search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(8, 17, 38, 0.85);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52, 118, 226, 0.16);
}
.search input::placeholder { color: var(--text-faint); }
.search .ico {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--text-faint);
  pointer-events: none;
}
.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
  display: none;
  z-index: 40;
  padding: 4px;
}
.suggest.open { display: block; }
.suggest .item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}
.suggest .item:hover, .suggest .item.active { background: rgba(52, 118, 226, 0.16); }
.suggest .item .flag { font-size: 15px; width: 20px; text-align: center; }
.suggest .item .en { color: var(--text-faint); font-size: 11.5px; margin-left: auto; }
.suggest .empty { padding: 10px; color: var(--text-faint); font-size: 12.5px; text-align: center; }

.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(8, 17, 38, 0.8);
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.seg button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.seg button.on {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(59, 116, 224, 0.4);
}
.seg .lab {
  align-self: center;
  font-size: 10.5px;
  color: var(--text-faint);
  padding: 0 6px 0 8px;
  letter-spacing: 0.4px;
}

.seg.primary {
  padding: 4px;
  border-color: rgba(122, 170, 255, 0.3);
  background: rgba(10, 20, 42, .85);
  box-shadow: 0 6px 18px rgba(10, 24, 52, 0.45);
}
.seg.primary button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
}
.seg.primary button .ic { font-size: 13px; line-height: 1; }
.seg.primary button.on {
  background: var(--primary);
  box-shadow: 0 3px 14px rgba(52, 118, 226, 0.45);
}

.zoombar { display: flex; gap: 6px; margin-left: auto; }
.zoombar button {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(8, 17, 38, 0.85);
  color: var(--text-dim);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.zoombar button.wide { width: auto; padding: 0 11px; font-size: 12px; }
.zoombar button:hover { color: var(--text); border-color: var(--line-strong); background: rgba(52, 118, 226, 0.14); }
.zoombar button.fs { font-size: 14px; line-height: 1; }
.zoombar button.on {
  color: #fff;
  border-color: rgba(52, 118, 226, 0.55);
  background: rgba(52, 118, 226, 0.24);
  box-shadow: 0 0 0 3px rgba(52, 118, 226, 0.12);
}

/* 全屏时铺满，并保留背景色 */
#app:fullscreen,
#app:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
}
#app:fullscreen #stage,
#app:-webkit-full-screen #stage { border-radius: 0; }

/* ---------------------------------------------------------------- 主体 */
main {
  flex: 1;
  display: flex;
  min-height: 0;
}

#stage {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 50% 45%, rgba(31, 67, 136, 0.24) 0%, transparent 70%),
    var(--ocean);
}

#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#map.dragging { cursor: grabbing; }
#map.flying { cursor: default; }

.ocean-line { fill: none; stroke: rgba(120, 170, 240, 0.10); stroke-width: 1; }

.country {
  fill: var(--land);
  stroke: rgba(140, 190, 255, 0.28);
  stroke-width: 0.75;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;  /* 放大后国界保持细线 */
  transition: fill 0.18s ease;
  cursor: pointer;
}
.country:hover { fill: var(--land-hi); }
.country.dim { opacity: 0.55; }
.country.faded { opacity: 0.34; }
.country.hidden { display: none; }
/* 省 / 州 模式：其他国家作为暗色底衬，不参与交互 */
.country.context {
  fill: #081327;
  stroke: rgba(120, 165, 225, 0.16);
  pointer-events: none;
}

/* 省 / 州 图层 */
.sub {
  fill: #1c3966;
  stroke: rgba(150, 195, 255, 0.5);
  stroke-width: 0.85;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.18s ease;
  cursor: pointer;
}
.sub:hover { fill: #325794; }
.sub.hot {
  fill: var(--primary) !important;
  stroke: #dceaff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 8px rgba(52, 118, 226, 0.9));
}
.sub.sel {
  stroke: var(--selection);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 9px rgba(138, 184, 255, 0.75));
}
.sub.nodata { fill: #0b162c; }
.country.hot {
  fill: var(--primary) !important;
  stroke: #cfe2ff;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 7px rgba(52, 118, 226, 0.85));
}
.country.sel {
  stroke: var(--selection);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 8px rgba(138, 184, 255, 0.7));
}
.country.nodata { fill: #0b162c; }

/* 微小国家的透明点击点 */
.hit { fill: transparent; stroke: none; cursor: pointer; }

.labels { pointer-events: none; }
.labels text {
  fill: #eaf1ff;
  paint-order: stroke;
  stroke: rgba(3, 7, 14, 0.92);
  stroke-width: 3px;          /* 实际宽度由 JS 按缩放写内联样式 */
  stroke-linejoin: round;
  stroke-linecap: round;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: 0.2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.labels text.show { opacity: 0.94; }

/* 提示条 */
#hint {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 11.5px;
  color: var(--text-faint);
  background: rgba(5, 10, 24, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
#hint b { color: var(--text-dim); font-weight: 600; }

/* 图例 */
#legend {
  position: absolute;
  right: 14px;
  bottom: 12px;
  min-width: 210px;
  padding: 9px 11px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(5, 10, 24, 0.78);
  backdrop-filter: blur(10px);
  font-size: 11px;
  color: var(--text-dim);
  display: none;
}
#legend.open { display: block; }
#legend .title { font-size: 11.5px; color: var(--text); margin-bottom: 7px; font-weight: 600; }
#legend .bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; }
#legend .bar i { flex: 1; }
#legend .ticks { display: flex; justify-content: space-between; margin-top: 5px; color: var(--text-faint); font-size: 10px; }
#legend .nodata { margin-top: 7px; display: flex; align-items: center; gap: 6px; color: var(--text-faint); }
#legend .nodata i { width: 12px; height: 9px; border-radius: 3px; background: #0b162c; border: 1px solid var(--line); display: inline-block; }

/* 悬停卡片 */
#tooltip {
  position: absolute;
  z-index: 50;
  min-width: 236px;
  max-width: 292px;
  padding: 12px 13px 11px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(17, 35, 71, .98), rgba(8, 17, 38, .98));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
#tooltip.show { opacity: 1; transform: translateY(0); }
.tt-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tt-flag { font-size: 22px; line-height: 1; }
.tt-names { min-width: 0; }
.tt-zh { font-size: 15px; font-weight: 650; letter-spacing: 0.2px; }
.tt-en { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.tt-iso {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  letter-spacing: 0.5px;
}
.tt-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; }
.tt-grid .k { color: var(--text-faint); white-space: nowrap; }
.tt-grid .v { text-align: right; font-variant-numeric: tabular-nums; }
.tt-grid .v .unit { color: var(--text-faint); font-size: 10.5px; margin-left: 2px; }
.tt-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.tt-stat {
  background: rgba(52, 118, 226, 0.09);
  border: 1px solid rgba(52, 118, 226, 0.16);
  border-radius: 8px;
  padding: 6px 8px;
}
.tt-stat .n { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.tt-stat .n small { font-size: 10.5px; color: var(--text-dim); font-weight: 500; margin-left: 3px; }
.tt-stat .l { font-size: 10px; color: var(--text-faint); margin-top: 2px; letter-spacing: 0.3px; }
.tt-foot { margin-top: 9px; font-size: 10.5px; color: var(--text-faint); display: flex; gap: 8px; align-items: center; }
.tt-foot .dot { color: var(--accent); }

/* ---------------------------------------------------------------- 侧栏 */
#panel {
  width: 336px;
  flex: 0 0 336px;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 20, 42, .96), rgba(5, 10, 24, .96));
  backdrop-filter: blur(14px);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#panel::-webkit-scrollbar { width: 9px; }
#panel::-webkit-scrollbar-thumb { background: rgba(138, 175, 236, 0.2); border-radius: 5px; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #10234a66, #08132726);
  padding: 12px;
}
.card h3 {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.card h3 .clear {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
}
.card h3 .clear:hover { color: var(--text); border-color: var(--line-strong); }

.sel-head { display: flex; align-items: center; gap: 11px; }
.sel-flag { font-size: 32px; line-height: 1; }
.sel-zh { font-size: 19px; font-weight: 680; letter-spacing: 0.2px; }
.sel-en { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.sel-tags { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.tag {
  font-size: 10.5px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  padding: 2px 8px;
}
.tag.hi { color: #cfe2ff; border-color: rgba(52, 118, 226, 0.4); background: rgba(52, 118, 226, 0.14); }
.tag:hover { color: var(--text); border-color: var(--line-strong); }

/* 搜索结果里的“省 / 州”标记 */
.suggest .item .pill {
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1px 6px;
  flex: 0 0 auto;
}

.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5.5px 0; border-bottom: 1px dashed rgba(138, 175, 236, 0.12); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-faint); flex: 0 0 auto; }
.kv .v { text-align: right; font-variant-numeric: tabular-nums; }
.kv .v small { color: var(--text-faint); font-size: 10.5px; }

.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 2px; }
.stats3 .box { background: rgba(52, 118, 226, 0.08); border: 1px solid rgba(52, 118, 226, 0.16); border-radius: 9px; padding: 7px 6px; text-align: center; }
.stats3 .n { font-size: 14.5px; font-weight: 660; font-variant-numeric: tabular-nums; }
.stats3 .n small { font-size: 10px; color: var(--text-dim); font-weight: 500; }
.stats3 .l { font-size: 10px; color: var(--text-faint); margin-top: 2px; }

.rank { display: flex; flex-direction: column; gap: 3px; }
.rank .row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12.5px;
  position: relative;
  overflow: hidden;
}
.rank .row:hover { background: rgba(52, 118, 226, 0.14); }
.rank .row.on { background: rgba(138, 184, 255, 0.15); }
.rank .row .idx { color: var(--text-faint); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.rank .row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.rank .row .nm .flag { font-size: 13px; }
.rank .row .val { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.rank .row .bg { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(52, 118, 226, 0.26), rgba(138, 184, 255, 0.05)); }
.rank .row > *:not(.bg) { position: relative; }  /* 文字压在数据条之上 */
.rank .empty { color: var(--text-faint); font-size: 12px; padding: 6px; }

.tips { font-size: 11.5px; color: var(--text-faint); line-height: 1.75; }
.tips kbd {
  font-family: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--text-dim);
}
.src { font-size: 10.5px; color: var(--text-faint); line-height: 1.6; }

@media (max-width: 860px) {
  main { flex-direction: column; }
  #panel { width: auto; flex: 0 0 auto; max-height: 42vh; border-left: 0; border-top: 1px solid var(--line); }
  #hint { display: none; }
}

/* English labels need room to wrap without widening the page. */
.language-switch { flex: 0 0 auto; }
.seg { max-width: 100%; }
#modes, #projbtns { flex-wrap: wrap; align-items: center; }
.seg button:focus-visible, .zoombar button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.card h3 { flex-wrap: wrap; letter-spacing: 0.6px; }
.card h3 .clear { white-space: nowrap; }
.kv .k { flex: 0 1 48%; }
.kv .v { min-width: 0; overflow-wrap: anywhere; }
.stats3 .box { min-width: 0; }
.stats3 .l { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .topbar { gap: 8px; padding: 10px; }
  .search { max-width: none; }
  .seg button { padding: 6px 8px; }
}

.seg button.on:hover, .seg.primary button.on:hover { background: var(--primary-hover); }
::selection { background: var(--accent); color: var(--bg); }