/* SF Pro 全局字体（拉丁子集 woff2，中文回落系统中文字体） */
@font-face{
  font-family:"SF Pro";
  src:url('/fonts/sf-pro-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

@font-face{
  font-family:"PingFang SC";
  src:url('/fonts/pingfang-sc.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

@font-face{
  font-family:"SF Pro";
  src:url('/fonts/sf-pro-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"SF Pro";
  src:url('/fonts/sf-pro-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

/* ===== changelog.i093.com 样式 v1 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  background: var(--bg);
  --bg: #f0f0f4;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --poem-c1: #60a5fa;  /* 与主页同款导航色 */
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --line: #e5e7eb;
  --tag-home: #2563eb;
  --tag-404: #ea580c;
  --tag-both: #f59e0b;
}

.dark {
  --bg: #000000;
  --card: #101014;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --poem-c1: #2563eb;  /* 与主页同款导航色 */
  --accent: #60a5fa;
  --accent-soft: rgba(96, 165, 250, 0.1);
  --line: #26262e;


/* HDR / 广色域增强：支持 P3 的屏幕显示更鲜艳的主题蓝，普通屏自动回退 sRGB */
@media (color-gamut: p3), (dynamic-range: high) {
  :root {
    --poem-c1: color(display-p3 0.38 0.60 1.0);
    --accent: color(display-p3 0.16 0.34 1.0);
    --accent-soft: color(display-p3 0.16 0.34 1.0 / 0.1);
    --tag-home: color(display-p3 0.16 0.34 1.0);
    --tag-404: color(display-p3 0.852 0.387 0.041);
    --tag-both: color(display-p3 0.909 0.647 0.035);
  }
  .dark {
    --poem-c1: color(display-p3 0.16 0.34 1.0);
    --accent: color(display-p3 0.38 0.60 1.0);
    --accent-soft: color(display-p3 0.38 0.60 1.0 / 0.12);
  }
}}

html { scroll-behavior: smooth; }
html.scrolling::-webkit-scrollbar-thumb { background: var(--accent); }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; transition: background .3s; }

body {
  background: var(--bg);
  color: var(--text);
  font-family:"SF Pro","PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  line-height: 1.7;
  transition: background .3s, color .3s;
  min-height: calc(100vh / var(--z,1));
  display: flex;
  flex-direction: column;
}

/* ===== 导航栏（主页同款玻璃 + 时钟 + 浅深切换）===== */
.glass{
  position:fixed;top:0;left:0;right:0;
  height:64px;
  z-index:998; /* 在时钟/按钮(999)之下，内容之上 */
  pointer-events:auto; /* 玻璃拦截点击，防止穿透点到下层元素 */
  background:transparent; /* 玻璃不改颜色（18:12 音心：模糊用选项卡那种玻璃效果） */
  /* 回退（不支持 url() 折射时）：普通毛玻璃 */
  -webkit-backdrop-filter:blur(14px) saturate(190%);
  backdrop-filter:blur(14px) saturate(190%);
  /* 支持时：轻微模糊 + 折射扭曲（与选项卡同材质） */
  -webkit-backdrop-filter:blur(2px) saturate(190%) url(#segLens);
  backdrop-filter:blur(2px) saturate(190%) url(#segLens);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12); /* 顶部微高光 */
}
.clock{
  position:fixed;top:16px;right:16px;
  z-index:999;
  text-align:right;user-select:none;
}
.clock .cd{
  font-size:12px;color:var(--muted);letter-spacing:1px;line-height:1.4;
}
.clock .ct{
  font-size:22px;font-weight:700;color:var(--poem-c1);
  font-variant-numeric:tabular-nums;line-height:1.2;margin-top:2px;
  text-shadow:0 2px 10px rgba(37,99,235,0.25);
}
.clock .ct.sync{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.sw{
  position:fixed;top:16px;left:16px;
  z-index:999; /* 永远最顶层 */
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--poem-c1);background:transparent;
  cursor:pointer;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding-top:1px; /* 内圆（◐）视觉微调对齐 */
  transition:all .3s;color:var(--poem-c1);
}
.sw:hover{background:var(--poem-c1);color:var(--bg)}
.lg{
  position:fixed;top:16px;left:60px;
  z-index:999; /* 永远最顶层 */
  height:36px;line-height:32px;
  width:64px;padding:0;
  border-radius:20px;
  border:2px solid var(--poem-c1);background:transparent;
  cursor:pointer;font-size:14px;font-weight:600;
  color:var(--poem-c1);letter-spacing:2px;transition:all .3s;
  text-align:center;
}
.lg:hover{background:var(--poem-c1);color:var(--bg)}



/* 顶栏（旧）*/

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: transparent; /* 主页同款玻璃：不改颜色 */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); /* 顶部微高光 */
  border-bottom: 1px solid var(--line);
}

.topbar .brand {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.topbar .brand:hover { color: var(--accent); }

.topbar .brand-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ===== 头部 ===== */
.hero {
  text-align: center;
  padding: 64px 24px 40px;
}

.hero .site-brand{
  font-size:13px;color:var(--muted);letter-spacing:2px;margin-bottom:10px;
}
.hero .site-brand a{color:var(--accent);text-decoration:none;border-bottom:1px dashed var(--accent)}
.hero .site-brand a:hover{opacity:.8}
.hero h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--accent), #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 1px;
}

/* ===== 时间线 ===== */
.timeline {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 48px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--line) 5%, var(--line) 95%, transparent);
  transform: translateX(-50%);
}

.day { position: relative; margin-bottom: 36px; }

.day-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.day-head time {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.day-head time {
  width: 118px;           /* 固定宽：日期和标签到竖线距离相等 */
  flex-shrink: 0;         /* 禁止收缩：确保严格 118px */
  height: 32px;           /* 与标签同高 */
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.tag {
  width: 118px;           /* 固定占位与日期等宽：竖线正中间，两边距离相等 */
  flex-shrink: 0;         /* 禁止收缩：确保严格 118px */
  margin-left: 24px;      /* 标签整体远离连接线 */
  height: 32px;           /* 强制与日期胶囊等高 */
  display: flex;
  align-items: center;
  text-align: left;       /* 标签左对齐：靠近竖线的一端对齐成一条竖线 */
  box-sizing: border-box;
}
.tag-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;                 /* 撑满占位：与日期胶囊一样扁（118×32） */
  height: 100%;                /* 撑满 .tag：与日期胶囊绝对等高 */
  box-sizing: border-box;
  font-size: 13px;             /* 与日期胶囊同字号 */
  line-height: 1;
  padding: 0 16px;             /* 左右内边距 */
  border: 1px solid transparent; /* 补齐边框，与日期胶囊同高 */
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
  background: var(--tag-home); /* 背景铺满胶囊 */
  box-shadow: 0 2px 8px rgba(0,0,0,.05); /* 与日期胶囊同款阴影 */
}
.tag-404 .tag-inner { background: var(--tag-404); }
.tag-both .tag-inner { background: var(--tag-both); }

.log-list { list-style: none; }

.ver {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px 18px;
  margin-bottom: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.ver:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.ver .vnum {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 8px;
}

.ver h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.items { list-style: none; }

.items li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.items li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}

/* ===== 页脚（与主页/404 同款）===== */

/* 下滑引导弱提示：固定在视口底部中央，不干扰布局；滚动后隐藏 */
.scroll-hint{
  position:fixed;bottom:calc(8vh / var(--z,1));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  color:var(--muted);opacity:.5;
  font-size:13px;letter-spacing:3px;
  animation:hintFloat 2.2s ease-in-out 1; /* 只播一次，不循环 */
  transition:opacity .8s,transform .8s; /* 消失动画：淡出+下移（慢一点） */
  z-index:10;
}
.scroll-hint [data-lang]{display:none}
.scroll-hint [data-lang].show{display:inline}
.scroll-hint .arr{font-size:16px;line-height:1}
@keyframes hintFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
/* HDR 徽标：仅 HDR/广色域屏显示（动态检测），普通屏隐藏 */
.scroll-hint .hdr{
  display:none;
  font-size:10px;letter-spacing:1px;
  border:1px solid currentColor;border-radius:4px;
  padding:1px 5px;opacity:.9;vertical-align:1px;
}
@media (color-gamut: p3), (dynamic-range: high) {
  .scroll-hint .hdr{display:inline-block}
}


.from-hint{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  letter-spacing:1px;
  padding:10px 0 0;
  margin:0;
}
.bottom{
  min-height:calc(32vh / var(--z,1));min-height:calc(32dvh / var(--z,1));height:auto; /* 高度随内容撑开，至少 32vh（千问 2026-08-12 建议） */
  background:#f5f5f7;
  border-top:1px solid #cbd5e1;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start; /* 内容从顶部排，防向上溢出 */
  line-height:normal; /* 覆盖 body 的 1.7，与首页页脚文字行高完全一致 */
}
.dark .bottom{background:#1b1b1b;border-top-color:#2e3138}
.bottom .fp{
  margin:0;font-size:14px;color:#64748b;letter-spacing:1px;
  padding:0 24px;text-align:center;line-height:1.8;
}
.dark .bottom .fp{color:#9aa0a8}
.bottom [data-lang]{display:none}
.bottom [data-lang].show{display:inline}
.bottom .mail{margin-top:6px;font-size:14px}
.bottom .mail a{color:var(--poem-c1);text-decoration:none;border-bottom:1px dashed var(--poem-c1)}
.bottom .mail a:hover{opacity:.8}
.bottom .changelog{margin-bottom:14px;text-align:center}
.bottom .cl-head{
  display:inline-block;font-size:13px;color:var(--poem-c1);
  text-decoration:none;letter-spacing:2px;margin-bottom:8px;
  border-bottom:1px dashed var(--poem-c1);padding-bottom:2px;
  white-space:nowrap; /* 标题不换行 */
  margin-left:0; /* 手机端居中；桌面端 media 里恢复 64px 对齐版本号列 */
}
.bottom .cl-head:hover{opacity:.8}
.bottom .cl-item{
  display:flex;flex-wrap:wrap;max-width:420px;margin:5px auto;padding:4px 14px;text-align:left; /* 条目左对齐，日期成竖线（音心 2026-08-12 定） */
  font-size:12.5px;color:#64748b;text-decoration:none;line-height:1.5;
  border-radius:8px;transition:background .2s,color .2s;
  align-items:flex-start;
}
.dark .bottom .cl-item{color:#9aa0a8}
.bottom .cl-item:hover{background:rgba(0,0,0,.05);color:var(--poem-c1)}
.dark .bottom .cl-item:hover{background:rgba(255,255,255,.06)}
.bottom .cl-date{display:inline-block;min-width:44px;color:#94a3b8;font-variant-numeric:tabular-nums;flex-shrink:0;margin-right:6px}
.dark .bottom .cl-date{color:#6b7280}
.bottom .cl-ver{
  display:inline-block;min-width:34px;margin:0 6px;padding:0 5px;
  font-size:11px;color:var(--poem-c1);border:1px solid var(--poem-c1);
  border-radius:4px;line-height:1.5;vertical-align:1px;flex-shrink:0;
}
.bottom .cl-txt{letter-spacing:.5px;flex:1;min-width:0;align-self:flex-start} /* flex 悬挂：换行从内容文字下面对齐（千问 2026-08-12 建议） */
.bottom .cl-item [data-lang]{display:none}
.bottom .cl-item [data-lang].show{display:inline}

/* ===== 响应式 ===== */
@media (orientation: portrait){
  .clock{top:12px;right:12px}
  .clock .cd{font-size:11px}
  .clock .ct{font-size:18px}
  .sw{top:12px;left:12px;width:32px;height:32px;font-size:16px}
}
@media (max-width: 640px) {
  .timeline::before { left: 14px; }
  .day-head { justify-content: flex-start; padding-left: 4px; }
  .hero h1 { font-size: 27px; }
  .topbar { padding: 12px 18px; }
}

/* ===== 点击小波纹：圆A实心 + 圆B空心环，浅绿 ===== */
.ripple{
  position:fixed;z-index:9999;pointer-events:none;
  width:0;height:0;transform:translate(-50%,-50%);
}
.ripple::before{
  content:'';position:absolute;left:0;top:0;
  width:0;height:0;border-radius:50%;
  background:rgba(52,199,89,0.40);
  transform:translate(-50%,-50%);
  animation:rippleA 1.9s ease-out forwards;
}
.ripple::after{
  content:'';position:absolute;left:0;top:0;
  width:0;height:0;border-radius:50%;
  border:2px solid rgba(52,199,89,0.80);
  transform:translate(-50%,-50%);
  animation:rippleB 1.9s ease-out forwards;
  animation-delay:0.3s;
}
.dark .ripple::before{ background:rgba(48,209,88,0.50); } /* 苹果 systemGreen 深色版 */
.dark .ripple::after{ border:2px solid rgba(48,209,88,0.35); }
@keyframes rippleA{0%{width:0;height:0;opacity:1}100%{width:48px;height:48px;opacity:0}}
@keyframes rippleB{0%{width:0;height:0;opacity:1}100%{width:92px;height:92px;opacity:0}}

/* ===== 卡片鼠标高光（iOS 26 Liquid Glass 同款）===== */
.ver {
  position: relative;
  overflow: hidden;
}
.ver::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.05) 40%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .35s;
}
.ver:hover::before { opacity: 1; }
.ver > * { position: relative; z-index: 1; }

/* 故障码（与首页同款）：左下角访客 token */
.tk{
  position:fixed;bottom:0;left:0;
  pointer-events:none;user-select:none;
}

/* ===== 页脚整体布局：电脑端左右分栏利用宽度（2026-08-12）===== */
.bottom-inner{
  width:100%;margin:0 auto; /* 移动端占满；桌面端 media 里 fit-content 自适应 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;padding:36px 24px;box-sizing:border-box;
}
/* 手机端顺序（音心 2026-08-12 定）：快捷工具 → 更新日志 → 弦音之镜 */
.bottom-inner > .quick-tools{order:1;width:100%;max-width:420px}
.bottom-inner > .changelog{order:2;width:100%;max-width:420px}
.bottom-inner > .bottom-info{order:3;width:100%;max-width:420px}
.bottom .bottom-info{display:flex;flex-direction:column;align-items:center;gap:6px}
.bottom .home-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:16px;color:var(--poem-c1);text-decoration:none;letter-spacing:1px;
  border-bottom:none;padding-bottom:0;
}
.bottom .home-link:hover{opacity:.85}
.bottom .home-ico{width:36px;height:36px;border-radius:8px;vertical-align:middle}
.bottom .home-name{
  color:var(--poem-c1);font-weight:400;font-size:17px;letter-spacing:2px;
}
@media (min-width:900px){
  .bottom{min-height:calc(32vh / var(--z,1));min-height:calc(32dvh / var(--z,1));height:auto;justify-content:center} /* 高度随内容撑开，防内容溢出底部露白（2026-08-31 音心反馈页脚没贴底） */
  .bottom-inner{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:40px;width:100%;max-width:1500px;margin:0 auto;padding-right:60px}
  .bottom-inner > .quick-tools,
  .bottom-inner > .changelog,
  .bottom-inner > .bottom-info{order:0;width:auto;max-width:none;flex-shrink:0;min-width:0} /* 高特异性覆盖移动端 order/宽度（音心 2026-08-12 反馈电脑端被带偏） */
  .bottom .bottom-info{align-items:flex-start;text-align:left}
  .bottom .changelog{text-align:left;margin-bottom:0}
  .bottom .cl-head{margin-left:64px} /* 桌面端对齐版本号列 */
}

/* 快捷工具区块（与更新日志同款排版，2026-08-12） */
.bottom .quick-tools{text-align:center;margin-bottom:14px} /* 手机端居中；桌面端 media 里恢复 left */
.bottom .qt-head{margin-left:0} /* 移动端居中；桌面端 media 里对齐 TOOL 列 */
@media (min-width:900px){
  .bottom .quick-tools{margin-bottom:0;text-align:left}
  .bottom .qt-head{margin-left:64px} /* 快捷工具标题与 TOOL 列对齐（音心 2026-08-12 定） */}
}

/* 右侧组：更新日志 + 快捷工具并排（2026-08-12，保持原本两区块布局） */
.bottom .right-group{
  display:flex;flex-direction:column;gap:20px;
  width:100%;max-width:680px;
}
@media (min-width:900px){
  .bottom .right-group{flex-direction:row;gap:48px;width:auto;max-width:none;align-items:flex-start}
  .bottom .quick-tools{margin-bottom:0}
}