/* 日夜切换开关 · 移植自 LifeFlow 原生 App 的 DayNightToggle
   ---------------------------------------
   对齐导航里 EN 胶囊的高度（约 24~26px），不抢视觉。
   浅色：蓝天底 + 左侧太阳（八道光芒自转 + 日轮脉动），白色滑块在右
   深色：深夜底 + 右侧月亮 + 五星闪烁 + 流星斜划，白色滑块在左
   天体永远落在滑块让出的那一侧（与 LifeFlow 一致）。
*/

.theme-toggle {
  width: 48px;
  height: 24px;
  border: 1px solid var(--divider);
  padding: 0;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
  background: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  transition: border-color .2s ease;
}
.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 轨道底色 */
.theme-toggle .tt-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, #59b3ff, #99d3ff);
  transition: background .4s ease;
}
:root[data-theme="dark"] .theme-toggle .tt-track {
  background: linear-gradient(to bottom, #050526, #0f0a40);
}

/* 白色滑块：浅色在右、深色在左 */
.theme-toggle .tt-knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transform: translateX(24px);
  transition: transform .38s cubic-bezier(.4,1.35,.5,1);
  z-index: 3;
}
:root[data-theme="dark"] .theme-toggle .tt-knob {
  transform: translateX(0);
}

/* 天体层 */
.theme-toggle .tt-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.theme-toggle .tt-sky > * { position: absolute; }

/* ── 太阳（浅色，左侧，中心 x≈12）── */
.tt-sun {
  left: 12px;
  top: 12px;
  width: 0;
  height: 0;
  opacity: 1;
  transition: opacity .25s ease;
}
:root[data-theme="dark"] .tt-sun { opacity: 0; }

.tt-sun .tt-sun-disc {
  position: absolute;
  width: 11px;
  height: 11px;
  left: -5.5px;
  top: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffbd1 0%, #ffd433 55%, #ffa314 100%);
  box-shadow: 0 0 0 .7px rgba(250,153,13,.85),
              0 0 7px 1px rgba(255,200,60,.45);
  animation: tt-sun-pulse 2.6s ease-in-out infinite;
}
@keyframes tt-sun-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.09); }
}

.tt-sun .tt-ray {
  position: absolute;
  width: 1.6px;
  height: 4px;
  left: -0.8px;
  top: -9px;
  background: #ffdc47;
  border-radius: 1px;
  transform-origin: 0.8px 9px;
  animation: tt-sun-spin 6s linear infinite;
}
@keyframes tt-sun-spin { to { transform: rotate(360deg); } }

/* ── 月亮（深色，右侧）── */
.tt-moon {
  right: 11px;
  top: 12px;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity .25s ease;
}
:root[data-theme="dark"] .tt-moon { opacity: 1; }
.tt-moon .tt-moon-body {
  position: absolute;
  width: 11px;
  height: 11px;
  left: -5.5px;
  top: -5.5px;
  border-radius: 50%;
  background: #fff7cc;
  box-shadow: 0 0 7px 1px rgba(255,250,200,.5);
}
/* 深色圆咬出月牙 */
.tt-moon .tt-moon-crater {
  position: absolute;
  width: 9px;
  height: 9px;
  left: -1px;
  top: -7px;
  border-radius: 50%;
  background: #0a0730;
}

/* ── 星星（深色）── 动画只在深色下播放，浅色强制静止且透明 ── */
.tt-star {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: tt-twinkle 2.4s ease-in-out infinite;
  animation-play-state: paused;
}
:root[data-theme="dark"] .tt-star {
  opacity: .6;
  animation-play-state: running;
}
@keyframes tt-twinkle {
  0%,100% { opacity: .25; transform: scale(.8); }
  50%     { opacity: 1;   transform: scale(1.15); }
}

/* ── 流星（深色）── */
.tt-meteor {
  width: 14px;
  height: 1.4px;
  background: linear-gradient(to left, rgba(255,255,255,0), #fff);
  border-radius: 1px;
  opacity: 0;
  transform-origin: right center;
  animation: tt-meteor 3.2s ease-in infinite;
  animation-play-state: paused;
}
:root[data-theme="dark"] .tt-meteor {
  animation-play-state: running;
}
@keyframes tt-meteor {
  0%   { opacity: 0; transform: translate(-4px, -3px) rotate(28deg); }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  78%  { opacity: 0; transform: translate(14px, 9px) rotate(28deg); }
  100% { opacity: 0; transform: translate(14px, 9px) rotate(28deg); }
}

/* 导航内排列 */
.nav .theme-toggle { margin-left: 2px; }
@media (max-width: 640px) {
  .theme-toggle { width: 44px; height: 22px; }
  .theme-toggle .tt-knob { width: 18px; height: 18px; transform: translateX(23px); }
  :root[data-theme="dark"] .theme-toggle .tt-knob { transform: translateX(0); }
}

/* ─────────────────────────────────────────────────────────────
   语言切换胶囊 · 与日夜切换胶囊同尺寸（2026-08-28，第二版）
   ---------------------------------------
   尺寸 1:1 对齐 .theme-toggle：同宽(48px)、同高(24px)、同圆角(100px)、
   同轨道渐变（浅色蓝天 / 深色深夜）、同边框。
   ⛔ 交互刻意保留「普通链接按钮」原样：<a href="/en/">EN</a> / <a href="/">中文</a>，
      点击即跳转切换语言（中文页点 EN → 英文页；英文页点 中文 → 中文页）。
      不做滑块、不隐藏原文——胶囊内直接居中显示链接文字（EN / 中文），
      任何状态下文字都完整可见、不被遮挡。
   文字配色与轨道反相：浅色蓝天轨道用深色字、深色深夜轨道用浅色字。
   ───────────────────────────────────────────────────────────── */
.nav-links a.lang-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 24px;
  max-width: 48px;
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: 100px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;          /* 中/EN 字距拉开一点 */
  text-indent: 1.5px;            /* 补偿末字尾距，保证视觉居中 */
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  color: #12306b;
  background: linear-gradient(to bottom, #59b3ff, #99d3ff);
  transition: color .4s ease, background .4s ease;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .nav-links a.lang-switch {
  color: #ffe9a8;
  background: linear-gradient(to bottom, #050526, #0f0a40);
}
.nav-links a.lang-switch:hover {
  border-color: var(--primary);
  text-decoration: none;
}
.nav-links a.lang-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 英文页胶囊里显示「中文」两个汉字：汉字字面天生比拉丁 EN 满，
   字号小一档让两者视觉等大（桌面 10→9、移动 9→8），字距同步收一点。 */
html[lang="en"] .nav-links a.lang-switch {
  font-size: 9px;
  letter-spacing: 1px;
  text-indent: 1px;
}

/* 移动端：日夜胶囊缩到 44×22，语言胶囊同尺寸 44×22 */
@media (max-width: 640px) {
  .nav-links a.lang-switch { width: 44px; height: 22px; max-width: 44px; font-size: 9px; }
  html[lang="en"] .nav-links a.lang-switch { font-size: 8px; }
}