/* ============================================================
 * base.css —— 变量 / 主题背景面板 / 基础排版
 * 主题切换只改 <html data-theme>，地图与所有组件通过 CSS 变量自动跟随。
 * 默认主题是深色「夜航」——参考高德/百度足迹页的那种高级感。
 * ============================================================ */

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

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans SC', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s ease, color 0.35s ease;
}

/* ---------------- 主题 ---------------- */

:root,
[data-theme='night'] {
  --bg: #070c14;
  --bg-glow: radial-gradient(
      1200px 680px at 18% -12%,
      rgba(64, 224, 208, 0.14),
      transparent 60%
    ),
    radial-gradient(1000px 600px at 92% 112%, rgba(96, 128, 255, 0.16), transparent 62%);
  --panel: #0e1622;
  --panel-soft: #131d2b;
  --panel-2: #172435;
  --text: #eaf2fb;
  --text-dim: #8ea1b6;
  --text-faint: #5d6e82;
  --line: #1e2c3d;
  --line-soft: #182433;
  --accent: #3fd8c8;
  --accent-2: #6ba6ff;
  --accent-soft: rgba(63, 216, 200, 0.14);
  --c-plain: #16202e;
  --c-plain-hi: #223044;
  --c-visited: #2fc9b9;
  --c-visited-2: #46e0c8;
  --c-visited-hi: #6ff0dd;
  --c-stroke: #0a121c;
  --c-label: #9db0c4;
  --c-label-hi: #eaf2fb;
  /* 去过板块底色偏亮，名称要用深色才压得住（文字印在色块上，不描边） */
  --c-label-on: #062a27;
  --ctx-fill: rgba(255, 255, 255, 0.045);
  --ctx-line: rgba(255, 255, 255, 0.1);
  --ctx-hover: rgba(255, 255, 255, 0.11);
  --glass: rgba(13, 21, 32, 0.78);
  --glass-line: rgba(255, 255, 255, 0.08);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
}

[data-theme='paper'] {
  --bg: #f7f4ef;
  --bg-glow: radial-gradient(
      1100px 620px at 22% -8%,
      rgba(212, 98, 47, 0.09),
      transparent 62%
    ),
    radial-gradient(900px 520px at 88% 108%, rgba(31, 122, 140, 0.08), transparent 60%);
  --panel: #ffffff;
  --panel-soft: #fbf9f5;
  --panel-2: #f3efe7;
  --text: #2b2823;
  --text-dim: #8d867a;
  --text-faint: #b3ab9d;
  --line: #e7e1d6;
  --line-soft: #f0ebe2;
  --accent: #d4622f;
  --accent-2: #1f7a8c;
  --accent-soft: rgba(212, 98, 47, 0.1);
  --c-plain: #e9e3d8;
  --c-plain-hi: #dcd3c3;
  --c-visited: #d4622f;
  --c-visited-2: #e8834f;
  --c-visited-hi: #ee7f47;
  --c-stroke: #ffffff;
  --c-label: #6d6659;
  --c-label-hi: #2b2823;
  --c-label-on: #fff7f1;
  --ctx-fill: rgba(43, 40, 35, 0.03);
  --ctx-line: rgba(43, 40, 35, 0.1);
  --ctx-hover: rgba(43, 40, 35, 0.07);
  --glass: rgba(255, 255, 255, 0.88);
  --glass-line: rgba(43, 40, 35, 0.08);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(43, 40, 35, 0.05), 0 8px 24px rgba(43, 40, 35, 0.06);
  --shadow-lg: 0 18px 40px rgba(43, 40, 35, 0.12);
}

[data-theme='jade'] {
  --bg: #f2f6f3;
  --bg-glow: radial-gradient(
      1100px 620px at 22% -8%,
      rgba(47, 143, 111, 0.11),
      transparent 62%
    ),
    radial-gradient(900px 520px at 86% 108%, rgba(190, 160, 70, 0.09), transparent 60%);
  --panel: #ffffff;
  --panel-soft: #f7faf8;
  --panel-2: #edf3ef;
  --text: #232b26;
  --text-dim: #7d8a80;
  --text-faint: #a8b3aa;
  --line: #dde7e0;
  --line-soft: #ebf1ed;
  --accent: #2f8f6f;
  --accent-2: #b08a2a;
  --accent-soft: rgba(47, 143, 111, 0.1);
  --c-plain: #e0e8e2;
  --c-plain-hi: #cfdbd3;
  --c-visited: #2f8f6f;
  --c-visited-2: #45ad8a;
  --c-visited-hi: #45ad8a;
  --c-stroke: #ffffff;
  --c-label: #64706a;
  --c-label-hi: #232b26;
  --c-label-on: #f4fbf8;
  --ctx-fill: rgba(35, 43, 38, 0.03);
  --ctx-line: rgba(35, 43, 38, 0.1);
  --ctx-hover: rgba(35, 43, 38, 0.07);
  --glass: rgba(255, 255, 255, 0.88);
  --glass-line: rgba(35, 43, 38, 0.08);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(35, 43, 38, 0.05), 0 8px 24px rgba(35, 43, 38, 0.06);
  --shadow-lg: 0 18px 40px rgba(35, 43, 38, 0.12);
}

[data-theme='danxia'] {
  --bg: #fbf5f0;
  --bg-glow: radial-gradient(
      1100px 620px at 24% -8%,
      rgba(184, 69, 47, 0.12),
      transparent 62%
    ),
    radial-gradient(900px 520px at 86% 108%, rgba(196, 138, 40, 0.1), transparent 60%);
  --panel: #ffffff;
  --panel-soft: #fdf8f4;
  --panel-2: #f6ece4;
  --text: #2e2521;
  --text-dim: #8f8079;
  --text-faint: #b8aaa0;
  --line: #ecded4;
  --line-soft: #f5eae2;
  --accent: #b8452f;
  --accent-2: #c48a28;
  --accent-soft: rgba(184, 69, 47, 0.1);
  --c-plain: #ece0d6;
  --c-plain-hi: #ded0c3;
  --c-visited: #b8452f;
  --c-visited-2: #d4654a;
  --c-visited-hi: #d4654a;
  --c-stroke: #ffffff;
  --c-label: #75665e;
  --c-label-hi: #2e2521;
  --c-label-on: #fff5f0;
  --ctx-fill: rgba(46, 37, 33, 0.03);
  --ctx-line: rgba(46, 37, 33, 0.1);
  --ctx-hover: rgba(46, 37, 33, 0.07);
  --glass: rgba(255, 255, 255, 0.88);
  --glass-line: rgba(46, 37, 33, 0.08);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(46, 37, 33, 0.05), 0 8px 24px rgba(46, 37, 33, 0.06);
  --shadow-lg: 0 18px 40px rgba(46, 37, 33, 0.12);
}

/* ---------------- 基础元件 ---------------- */

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.muted {
  color: var(--text-dim);
}

.tiny {
  font-size: 12px;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

::-webkit-scrollbar-track {
  background: transparent;
}