:root {
  /* 让滚动条、原生 select 下拉、表单控件跟随深色主题，避免浅色穿帮 */
  color-scheme: dark;
  --bg: #0a0d14;
  --bg-soft: #0f1320;
  --panel: rgba(20, 26, 40, 0.5);
  --panel-strong: rgba(20, 26, 40, 0.72);
  --line: rgba(255, 255, 255, 0.08);
  --text: #e9eef7;
  --muted: #8b95a8;
  --accent: #b07dff;
  --accent-2: #6ea8ff;
  --bili: #4ba3ff;
  --dy: #ff3d6e;
  /* 鼠标准星专用色：常态/锁定。主题文件可覆盖，不想跟着主题主色走就用这两个变量 */
  --reticle: #ff8a3d;
  --reticle-lock: #c8ff2e;
  --glow-tint: rgba(255, 138, 61, 0.12);
  /* 整站默认字体 = 极窄冲击（Impact 系窄体 + 思源黑体兜底中文）
     英文/数字走 Impact / Haettenschweiler / Arial Narrow，中文自动回退思源黑体 / 雅黑 / 苹方。
     数字默认也用同一窄体字（不再默认七段数码管 DSEG7）。
     想换风格：用左下角「字体预览」面板实时切换，或改下面两行变量。
     备选（供面板/手动参考）：
       圆润几何   "Century Gothic","Futura","Avenir Next","Poppins","Nunito","Noto Sans SC",...
       科技 DIN   "Bahnschrift","DIN Alternate","Roboto Condensed","Noto Sans SC",...
       厚重海报   "Franklin Gothic Medium","Libre Franklin","Noto Sans SC",...
       现代黑体   "DengXian","等线","Noto Sans SC",...
       衬线优雅   Cambria,Georgia,"Times New Roman","Noto Sans SC",serif
     注：DSEG7 七段数码管仍保留在 js/app.js 的 DEFAULT_NUM，供面板「数码管」选项调用。 */
  --num: Impact, "Haettenschweiler", "Arial Narrow", "Noto Sans SC", "PingFang SC",
         "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  /* 数字的字重 / 字距 / 字号倍率：不同字体需要的微调不同。换字体时这三个量要一起调，否则效果打折 */
  --num-weight: 700;
  --num-tracking: 1px;
  --num-scale: 1;
  /* 非数码管栈：英文/中文与数字混排文本（DSEG7 没有完整字母表）。整站默认即极窄冲击 */
  --num-sans: Impact, "Haettenschweiler", "Arial Narrow", "Noto Sans SC", "PingFang SC",
              "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --glow: 0 0 28px rgba(110, 168, 255, 0.35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; overflow-x: hidden; }

/* 锚点目标不被 66px 固定头部遮挡 */
.hero, .section, #main { scroll-margin-top: 82px; }

/* —— 键盘焦点：全站统一可见焦点环 —— */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* 鼠标点击不显示焦点环（不支持 :focus-visible 的旧浏览器会整体忽略本条） */
:focus:not(:focus-visible) { outline: none; }

/* —— 仅屏幕阅读器可见 —— */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* —— 「跳到主内容」：仅键盘聚焦时出现 —— */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 100000;
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  background: #fff; color: #0b0e14; font-weight: 700; text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

/* 站酷快乐体 —— 自托管本地，先显示回退字体，加载完成后切换，避免打印/弱网空白 */
@font-face {
  font-family: "ZCOOL KuaiLe";
  src: url("../fonts/ZCOOLKuaiLe-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* DSEG7 Classic —— 老式计算器 / 电子表的七段数码管字形（SIL Open Font License，可商用）。
   只给「纯数字」用：这套字形没有完整的英文字母和汉字，
   用在 PERSONAL·2026 这类混排文本上会把英文变成残缺的七段字母。 */
@font-face {
  font-family: "DSEG7";
  src: url("../fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DSEG7";
  src: url("../fonts/DSEG7Classic-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}

/* Noto Sans SC（思源黑体）—— 自托管简体中文，保证跨平台中文渲染一致（不再是各系统默认黑体）。
   已按本站点实际用到的汉字子集化（约 884 字），体积从 1.1MB 降到约 112KB。 */
@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/NotoSansSC-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/NotoSansSC-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* —— 开屏加载动画 —— */
.site-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.5s ease;
}
.site-loader.hide { opacity: 0; pointer-events: none; }
.site-loader.off { display: none; }
/* JS 未能执行时的自愈：4 秒后自动淡出，避免永久黑屏（正常情况下 hideLoader 会先把它关掉） */
.site-loader { animation: loaderFailSafe 0s linear 4s forwards; }
@keyframes loaderFailSafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.loader-ring {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 130px; border-radius: 50%;
  border: 3px solid rgba(110,168,255,0.18); border-top-color: var(--accent);
  animation: loaderSpin 1s linear infinite;
}
.loader-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 40px rgba(110,168,255,0.4); }
.loader-name { color: var(--text); font-weight: 800; font-size: 18px; letter-spacing: 1px; }
.loader-bar { width: 180px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; animation: loaderBar 1.1s ease-in-out infinite; }
@keyframes loaderSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes loaderBar { 0%{transform:translateX(-110%);} 100%{transform:translateX(300%);} }

body {
  margin: 0;
  padding-top: calc(66px + env(safe-area-inset-top));
  color: var(--text);
  background: var(--bg);
  font-family: var(--num-sans, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* —— 银河星云背景 —— */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% -20%, #0d1226 0%, #0a0d14 55%, #05070c 100%);
}
/* 银河弥散星云带：横贯画面的星尘色带 */
.galaxy-band {
  position: absolute; left: -20%; right: -20%; top: 22%; height: 55%;
  filter: blur(70px); opacity: 0.55; mix-blend-mode: screen; transform: rotate(-14deg);
  background:
    radial-gradient(closest-side, rgba(120,150,255,0.55), transparent 70%),
    radial-gradient(closest-side, rgba(176,125,255,0.45), transparent 70%),
    radial-gradient(closest-side, rgba(255,94,150,0.30), transparent 70%);
  background-position: 30% 50%, 55% 50%, 75% 50%;
  background-size: 55% 80%, 60% 90%, 50% 70%;
  background-repeat: no-repeat;
  animation: galaxyDrift 40s ease-in-out infinite alternate;
}
/* 星尘薄雾 */
.galaxy-haze {
  position: absolute; inset: 0; opacity: 0.5;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,0.10) 1px, transparent 2px),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,0.08) 1px, transparent 2px),
    radial-gradient(circle at 80% 55%, rgba(200,210,255,0.10) 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,0.07) 1px, transparent 2px),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.09) 1px, transparent 2px);
  background-size: 240px 240px, 300px 300px, 260px 260px, 320px 320px, 280px 280px;
}
@keyframes galaxyDrift {
  0% { transform: rotate(-14deg) translateX(0); }
  100% { transform: rotate(-14deg) translateX(80px); }
}

/* 网格纹理 */
.grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 60%, transparent 100%);
}

.container { width: min(1500px, 95%); margin: 0 auto; position: relative; }
.site-header .container { width: min(1400px, 95%); }

/* —— 顶部导航 —— */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-top: env(safe-area-inset-top);
  background: rgba(10, 13, 20, 0.6);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 17px; }
.logo-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ box-shadow: 0 0 6px var(--accent);} 50%{ box-shadow: 0 0 22px var(--accent);} }
.site-nav { display: flex; gap: 6px; align-items: center; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: 11px; transition: 0.2s; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); background: rgba(255,255,255,0.06); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 6px; border-radius: 8px; touch-action: manipulation;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

/* —— 首屏 —— */
.hero { padding: 40px 0 50px; min-height: calc(100vh - 66px); display: flex; align-items: center; }
/* 移动端用 dvh，避免 iOS 地址栏伸缩导致首屏高度跳变 */
@supports (min-height: 100dvh) {
  .hero { min-height: calc(100dvh - 66px - env(safe-area-inset-top)); }
}
.hero-inner { width: min(1500px, 95%); }
.hero-grid { display: grid; grid-template-columns: 1.55fr 0.85fr; gap: 60px; align-items: center; }
/* 滚动跑马灯（倾斜，带上下边框） */
.marquee {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 0; position: relative; background: rgba(255,255,255,0.02);
  transform: rotate(-1.5deg); transform-origin: center;
  margin: 0 -2.5%;
}
.marquee-track { display: flex; gap: 0; width: max-content; will-change: transform; backface-visibility: hidden; animation: marqueeScroll 24s linear infinite; }
.marquee-group { display: flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap; flex: none; }
.marquee-group .mq-item { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--text); }
.marquee-group .mq-item:nth-child(4n + 1) { color: var(--accent); }
.marquee-group .mq-sep { font-size: 20px; color: var(--accent); }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: none) { .marquee-track { animation-duration: 30s; } }
.hero-eyebrow {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
  margin: 0 0 18px;
}
.hero-outline {
  font-size: clamp(30px, 6vw, 88px); font-weight: 900; letter-spacing: 2px; line-height: 1.05;
  text-transform: uppercase; color: #fff; margin: 0 0 26px;
}
.hero-m3 {
  display: flex; align-items: baseline; gap: 0;
  margin: 0 0 10px; line-height: 1.05; white-space: nowrap;
}
.hero-m3 .m3-big {
  font-size: clamp(28px, 5.2vw, 76px); font-weight: 900; letter-spacing: 2px;
  color: #fff; text-transform: uppercase;
}
.hero-m3 .m3-small {
  font-size: clamp(26px, 5vw, 72px); font-weight: 900; letter-spacing: 2px;
  color: transparent; -webkit-text-stroke: 2.2px rgba(255,255,255,0.8);
  transition: color 0.3s ease;
}
.hero-m3 .m3-small:hover { color: #fff; }
.hero-m3:hover { color: #fff; }
.hero-title {
  font-size: clamp(40px, 7vw, 112px); font-weight: 900; letter-spacing: -1px; line-height: 1;
  text-transform: uppercase; color: #fff; margin: 0 0 8px;
}
@keyframes gradflow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.hero-slogan { font-family: var(--num-sans); font-size: clamp(30px, 4vw, 54px); color: var(--accent); margin: 0 0 26px; line-height: 1.3; }
.hero-intro { color: var(--muted); max-width: 640px; font-size: 17px; line-height: 1.9; white-space: pre-line; margin-bottom: 4px; }
.hero-actions { display: flex; gap: 18px; margin-top: 40px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 16px 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--text);
  text-decoration: none; font-size: 17px; transition: 0.2s;
}
.btn.primary { background: #fff; border: 0; color: #0b0e14; font-weight: 800; }
.btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.45); }
.btn.primary:hover { background: #f2f2f7; }
/* 危险操作按钮（如删除确认）：与 .btn.primary 形成视觉对比，警示用户 */
.btn.danger {
  color: #ff8fa3; border-color: rgba(255, 92, 92, 0.45);
  background: rgba(255, 92, 92, 0.08);
}
.btn.danger:hover { border-color: #ff5c5c; background: rgba(255, 92, 92, 0.16); color: #ffb3c0; }
.btn.danger:focus-visible { outline-color: #ff5c5c; box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.28); }
.btn .btn-arrow { font-size: 0.9em; transform: translateY(1px); }
.btn.primary .btn-arrow { color: #0b0e14; }
/* 胶囊按钮悬停“注水”填充（水浪） */
.hero-actions .btn { position: relative; overflow: hidden; isolation: isolate; }
.hero-actions .btn .btn-label, .hero-actions .btn .btn-arrow { position: relative; z-index: 2; }
.hero-actions .btn.wave-blue { border: 3px solid rgba(255,255,255,0.7); color: var(--text); font-weight: 800; }
.hero-actions .btn.wave-white { background: #fff; border: 3px solid #fff; color: #0b0e14; font-weight: 800; }
.hero-actions .btn::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;
  pointer-events: none;
  background: var(--wave, rgba(110,168,255,0.32));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q15 0 30 8 T60 8 T90 8 T120 8 L120 60 L0 60 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 100%;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: 0 0;
  transform: translateY(103%);
  transition: transform 0.5s ease;
}
.hero-actions .btn:hover::before {
  transform: translateY(0);
  animation: waveRipple 1.4s linear infinite;
}
.hero-actions .btn.wave-blue { --wave: rgba(110,168,255,0.38); }
.hero-actions .btn.wave-white { --wave: rgba(30,34,46,0.22); }
@keyframes waveRipple { to { -webkit-mask-position-x: -120px; } }

.hero-right { display: flex; flex-direction: column; gap: 18px; align-items: center; position: relative; }
.hero-avatar {
  width: 150px; height: 150px; border-radius: 50%; padding: 4px; position: relative;
  background: linear-gradient(135deg, var(--accent), var(--accent-2), #ff5c8a, var(--accent));
  background-size: 300% 300%; animation: gradflow 8s ease infinite;
  box-shadow: 0 0 50px rgba(110, 168, 255, 0.4);
}
.hero-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  transition: transform 0.6s ease, filter 0.4s ease;
}
/* 播放时（.glass）才加毛玻璃：图片模糊 + 高光描边 */
.hero-avatar.glass img { filter: blur(2px) saturate(120%); background: rgba(255,255,255,0.06); }
.hero-avatar::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; z-index: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.0) 60%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 10px rgba(255,255,255,0.10);
  pointer-events: none;
  opacity: 0; transition: opacity 0.4s ease;
}
.hero-avatar.glass::after { opacity: 1; }
.hero-avatar img.spin { transform: rotate(180deg); }

/* —— 头像播放控制（毛玻璃控制条，叠在头像上）—— */
.hero-avatar { position: relative; }
.avatar-player {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 24px;
  background: rgba(12, 15, 24, 0.6);
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.hero-avatar:hover .avatar-player,
.hero-avatar:focus-within .avatar-player { opacity: 1; visibility: visible; }
.avatar-player .ap-btn {
  font-size: 18px; line-height: 1; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; transition: 0.18s;
  touch-action: manipulation;
}
.avatar-player .ap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar-player .ap-btn:hover { border-color: var(--accent); color: var(--accent); }
.avatar-player .ap-play { background: var(--accent); color: #fff; border-color: transparent; }
.avatar-player .ap-play:hover { color: #fff; filter: brightness(1.1); }

/* —— 粉丝卡片（玻璃拟态 + 渐变描边）—— */
.fans-card {
  width: min(340px, 100%);
  padding: 20px 22px; border-radius: var(--radius);
  position: relative; overflow: hidden;
  background: var(--panel-strong);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.fans-card > * { position: relative; z-index: 1; }
.fans-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius); z-index: 0;
  background: linear-gradient(135deg, rgba(110,168,255,0.5), transparent 40%, rgba(255,61,110,0.4));
  opacity: 0.5; pointer-events: none;
}
.fans-card-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.fans-card-head small { color: var(--muted); }
.fans-time.fresh { color: #3ddc97; }
.fans-time.stale { color: #ffb020; }
.fans-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.fans-total span { color: var(--muted); font-size: 14px; }
.fans-total strong {
  font-family: var(--num, inherit); color: #fff;
  font-size: calc(38px * var(--num-scale, 1));
  font-weight: var(--num-weight, 700);
  letter-spacing: var(--num-tracking, 0.5px);
  text-shadow: 0 0 24px rgba(110,168,255,0.4);
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1;
}
.fans-row { display: flex; flex-direction: column; gap: 10px; }
.fans-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 13px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: 0.2s;
}
.fans-item:hover, .fans-item:focus-visible { transform: translateX(3px); border-color: var(--accent); }
.fans-item .fans-name { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; }
.fans-item .fans-num {
  font-family: var(--num, inherit);
  font-size: calc(20px * var(--num-scale, 1));
  font-weight: var(--num-weight, 700);
  letter-spacing: var(--num-tracking, 0.5px);
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1;
}
.fans-item.bili .fans-num { color: var(--bili); }
.fans-item.dy .fans-num { color: var(--dy); }
.fans-item.bili { border-left: 3px solid var(--bili); }
.fans-item.dy { border-left: 3px solid var(--dy); }
.fans-placeholder { color: var(--muted); font-size: 13px; text-align: center; padding: 8px; }

/* —— 区块 —— */
.section { padding: 64px 0; border-top: 1px solid var(--line); position: relative; }
#tools { border-top: 0; }
.section-title { font-size: 28px; margin: 0 0 8px; }
.section-sub { color: var(--muted); margin: 0 0 28px; }

/* —— 工具卡片 —— */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card {
  display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--panel); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--line); transition: 0.25s;
}
.card:hover { transform: translateY(-6px); border-color: rgba(110,168,255,0.55); box-shadow: var(--shadow), var(--glow); }
.card .card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(135deg, rgba(110,168,255,0.18), rgba(160,107,255,0.18));
  border: 1px solid var(--line);
}
.card .card-body h3 { margin: 0 0 6px; font-size: 17px; }
.card .card-body p { margin: 0; color: var(--muted); font-size: 13px; }
.card .card-meta { display: flex; gap: 8px; align-items: center; margin-top: auto; color: var(--accent); font-size: 13px; }
.badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: rgba(110,168,255,0.14); color: var(--accent); }

/* —— 文章列表 —— */
.article-list { display: flex; flex-direction: column; gap: 14px; }
/* 文章外层容器：让编辑/删除按钮可以放在 <a> 之外（避免交互元素嵌套） */
.article-wrap { position: relative; }
.article-item {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px;
  border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--panel); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--line); transition: 0.22s;
}
.article-item:hover, .article-item:focus-visible { transform: translateX(5px); border-color: rgba(110,168,255,0.55); box-shadow: var(--shadow), var(--glow); }
.article-item .article-main { flex: 1; min-width: 0; }
.article-item h3 { margin: 0 0 5px; font-size: 17px; }
.article-item p { margin: 0; color: var(--muted); font-size: 13px; }
.article-item .article-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.article-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(135deg, rgba(110,168,255,0.18), rgba(160,107,255,0.18)); border: 1px solid var(--line); flex-shrink: 0;
}

/* —— 关于 —— */
.about-text { color: var(--muted); max-width: 760px; font-size: 15px; }

/* —— 页脚 —— */
.site-footer { padding: 44px 0; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 13px; }
.footer-version { color: var(--muted); font-size: 12px; margin-top: 10px; }
.footer-icp { margin: 6px 0; }
.footer-icp a { color: var(--muted); text-decoration: none; font-size: 13px; }
.footer-icp a:hover, .footer-icp a:focus-visible { color: var(--accent); }
.site-footer p { margin: 6px 0; }
.footer-social { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
.footer-social a {
  color: var(--text); text-decoration: none; padding: 8px 15px; border: 1px solid var(--line);
  border-radius: 11px; background: rgba(255,255,255,0.05); font-size: 13px; transition: 0.2s;
}
.footer-social a:hover, .footer-social a:focus-visible { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* —— 滚动渐入 —— */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* —— 粒子星空 —— */
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* —— 鼠标跟随光效 —— */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 220px; height: 220px;
  /* 90：在内容之上、固定头部(100)之下 —— 悬停到卡片上时光晕不会被面板盖住 */
  border-radius: 50%; pointer-events: none; z-index: 90;
  /* translate 由 JS 逐帧写入（已含自身一半尺寸的偏移），这里不要再写 transform */
  background: radial-gradient(circle, var(--glow-tint, rgba(255, 255, 255, 0.10)), transparent 62%);
  opacity: 0; transition: opacity 0.3s;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

/* 自定义光标：光点 + 光圈。
   仅在「精细指针 + JS 已就绪（html.has-custom-cursor）+ 未要求减弱动效」时才接管，
   否则保留系统光标 —— JS 失效时页面照常可用，也不再覆盖用户的辅助光标设置。 */
/* 用「通配符 + !important」而不是逐个列选择器。
   列清单必然漏：播放器按钮 `.avatar-player .ap-btn` 是双类选择器 (0,2,0)，
   特异性高于 `html.has-custom-cursor button` (0,1,2)，于是系统小手又冒出来了。
   以后新增任何可交互元素都不用再往清单里补。 */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor *:not(input):not(textarea):not(select):not([contenteditable]) {
    cursor: none !important;
  }
}
/* 输入类控件要保留系统光标，否则没法正常编辑/选中文本 */
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor [contenteditable] { cursor: auto !important; }
/* —— 自定义光标：锁定准星 ——
   由 JS 移动 .reticle 的位置；这里只管外观，所以放大/形变都写在子元素上，
   避免和 JS 每帧写入的 transform 冲突。
   旧方案（光点 + 光圈）节点已删除，留一条兜底防止残留。 */
.cursor-dot, .cursor-ring { display: none; }

.reticle {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px;
  z-index: 99999; pointer-events: none;
  opacity: 0; transition: opacity 0.25s ease;
  will-change: transform;
}
html.has-custom-cursor .reticle { opacity: 1; }
/* 中心菱形 */
.reticle-core {
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--reticle, var(--accent)); transform: rotate(45deg);
  /* 先描一圈深色边，再叠两层彩色辉光 —— 压在复杂的城市夜景照片上也不会糊掉
     （这是游戏准星的通用做法：亮色主体 + 深色描边，任何背景都成立） */
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.92),
    0 0 4px rgba(0, 0, 0, 0.65),
    0 0 14px var(--reticle, var(--accent)),
    0 0 30px var(--reticle, var(--accent));
  transition: width 0.18s ease, height 0.18s ease, margin 0.18s ease,
              background-color 0.18s ease, box-shadow 0.18s ease;
}
/* 四角括号（常态：排在方框四角） */
.rt-bracket {
  position: absolute; width: 10px; height: 10px;
  border: 2px solid var(--reticle, var(--accent)); opacity: 1;
  /* 必须用 drop-shadow 而不是 box-shadow：这四个元素只画了两条边（L 形），
     box-shadow 会沿元素方块的外框描边，露出一圈多余的方框轮廓。
     drop-shadow 按实际绘制形状生成阴影，正好贴着 L 形走。 */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1)) drop-shadow(0 0 2.5px rgba(0, 0, 0, 0.8));
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.2s ease,
              border-color 0.18s ease;
}
.rt-bracket.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.rt-bracket.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.rt-bracket.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.rt-bracket.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* 悬停可交互元素：准星「锁定」—— 四个括号从方框四角滑到上/右/下/左，
   并各自旋转 45°（L 形变 V 形），整体围成一个**菱形**；核心变大并换成锁定色。
   位移 = 目标点(菱形四顶点，半径 15px) − 静止点(方框四角，半径 8.5px) */
.reticle.lock .rt-bracket { opacity: 1; border-color: var(--reticle-lock, var(--accent-2)); }
.reticle.lock .rt-bracket.tl { transform: translate(9px, -7px) rotate(45deg); }   /* → 上 */
.reticle.lock .rt-bracket.tr { transform: translate(7px, 9px) rotate(45deg); }    /* → 右 */
.reticle.lock .rt-bracket.bl { transform: translate(-7px, -9px) rotate(45deg); }  /* → 左 */
.reticle.lock .rt-bracket.br { transform: translate(-9px, 7px) rotate(45deg); }   /* → 下 */
.reticle.lock .reticle-core {
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  background: var(--reticle-lock, var(--accent-2));
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.92),
    0 0 4px rgba(0, 0, 0, 0.65),
    0 0 16px var(--reticle-lock, var(--accent-2)),
    0 0 34px var(--reticle-lock, var(--accent-2));
}
/* 按下：核心再胀一圈，作为点击反馈 */
.reticle.press .reticle-core { width: 14px; height: 14px; margin: -7px 0 0 -7px; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .reticle, .cursor-glow { display: none; }
}

/* —— 3D 翻转工具卡 —— */
.card-grid { grid-auto-rows: 1fr; }
/* 卡片外层容器：让编辑/删除按钮可以放在 <a> 之外（避免交互元素嵌套） */
.card-wrap { position: relative; display: block; height: 100%; }
.flip-card { display: block; text-decoration: none; color: inherit; position: relative; height: 100%; }
.flip-inner {
  position: relative; display: block; min-height: 210px; height: 100%;
  transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card:focus-within .flip-inner { transform: rotateY(180deg); }
/* 键盘聚焦时给卡片一个明确的焦点态，与 hover 视觉一致 */
.flip-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.flip-front, .flip-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.flip-front {
  background: var(--panel); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--shadow); align-items: flex-start;
}
.flip-back {
  background: linear-gradient(135deg, rgba(110,168,255,0.22), rgba(160,107,255,0.22)); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
  transform: rotateY(180deg); justify-content: space-between; box-shadow: var(--shadow);
}
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(135deg, rgba(110,168,255,0.18), rgba(160,107,255,0.18)); border: 1px solid var(--line);
}
.card-title { font-weight: 700; font-size: 18px; }
.card-desc {
  color: var(--muted); font-size: 15px; margin: 0; line-height: 1.7;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  line-clamp: 6; overflow: hidden;
}
.flip-back .card-meta { color: var(--text); font-weight: 700; }

/* —— 打字机副标题 —— */
.hero-slogan { min-height: 2.6em; position: relative; }
.caret {
  display: inline-block; width: 2px; height: 1.05em; background: var(--accent);
  margin-left: 3px; vertical-align: text-bottom; animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }
/* 扫光（文字模板/文字蒙版）：高光带只在字形内部扫过，文字外不显示 */
#typedText { -webkit-background-clip: text; background-clip: text; }
#typedText.sweeping {
  color: transparent;
  background-image: linear-gradient(120deg, var(--accent) 25%, #ffffff 50%, var(--accent) 75%, var(--accent) 100%);
  background-size: 300% 100%;
  background-repeat: repeat;
  animation: sweepLight 1.2s ease forwards;
}
@keyframes sweepLight {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* 响应式 */
@media (max-width: 860px) {
  .hero { min-height: auto; padding: 46px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-right { order: 2; margin-top: 8px; }
  .hero-title { font-size: clamp(34px, 11vw, 62px); }
  .hero-outline { font-size: clamp(24px, 7.5vw, 46px); }
  .hero-m3 { flex-wrap: wrap; }
  .hero-m3 .m3-big { font-size: clamp(24px, 8.5vw, 48px); }
  .hero-m3 .m3-small { font-size: clamp(22px, 8vw, 44px); }
  .hero-slogan { font-size: clamp(22px, 6.5vw, 36px); min-height: 2.6em; }
  .hero-intro { font-size: 15px; }
  .fans-card { width: 100%; max-width: 560px; }
}
@media (max-width: 640px) {
  .container, .hero-inner { width: min(1120px, 92%); }
  .site-nav {
    display: none; position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
    width: 100vw; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; background: var(--bg-soft);
    border-bottom: 1px solid var(--line); padding: 10px;
  }
  .site-nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .site-nav a { padding: 12px 14px; }
  .marquee { margin: 0 -3%; }
  .marquee-group .mq-item { font-size: 18px; }
  .marquee-group .mq-sep { font-size: 16px; }
  .hero-actions .btn { padding: 13px 30px; }
}

/* —— 管理入口 —— */
.admin-entry {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 200;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel-strong); backdrop-filter: blur(12px); color: var(--text);
  font-size: 20px; cursor: pointer; transition: 0.2s; box-shadow: var(--shadow);
}
.admin-entry:hover { border-color: var(--accent); transform: translateY(-2px); }

/* —— 管理工具条 —— */
.admin-bar {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 210;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--panel-strong);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow); flex-wrap: wrap; justify-content: center;
}
.admin-bar-title { color: var(--accent); font-weight: 700; font-size: 13px; margin-right: 4px; }
.admin-btn { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.05); color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; transition: 0.18s; touch-action: manipulation; }
.admin-btn:hover, .admin-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.admin-btn.danger:hover { border-color: #ff5c5c; color: #ff8fa3; }

/* —— 弹窗 —— */
.modal-mask { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-mask[hidden] { display: none; }
.modal-box {
  width: min(520px, 92vw); max-height: 88vh; overflow: auto; padding: 24px;
  overscroll-behavior: contain;
  border-radius: 18px; border: 1px solid var(--line); background: var(--panel-strong);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow); color: var(--text);
}
@supports (max-height: 88dvh) { .modal-box { max-height: 88dvh; } }
.modal-box h3 { margin: 0 0 16px; font-size: 20px; }
.modal-label { display: block; color: var(--muted); font-size: 13px; margin: 10px 0 4px; }
.modal-box input, .modal-box textarea, .modal-box select {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.04); color: var(--text); font-size: 14px; font-family: inherit;
}
.modal-box textarea { min-height: 76px; resize: vertical; }
.modal-box textarea.tall { min-height: 130px; }
.modal-box select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
/* 焦点态：保留边框高亮，但可见焦点环交给 :focus-visible，键盘用户始终有清晰焦点 */
.modal-box input:focus, .modal-box textarea:focus, .modal-box select:focus { border-color: var(--accent); }
.modal-box input:focus-visible, .modal-box textarea:focus-visible,
.modal-box select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(176, 125, 255, 0.35);
}
.modal-hint { color: #ff8fa3; font-size: 13px; margin: 8px 0 0; min-height: 1em; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.modal-actions .btn { flex: 1; justify-content: center; }

/* 图标选择库 */
.icon-picker { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin-top: 8px; }
.icon-picker .ip {
  font-family: inherit; color: var(--text); font-size: 20px; line-height: 1;
  min-height: 40px; text-align: center; padding: 6px 0; border: 1px solid var(--line);
  border-radius: 8px; background: rgba(255,255,255,0.03); cursor: pointer;
  transition: 0.15s; touch-action: manipulation;
}
.icon-picker .ip:hover, .icon-picker .ip:focus-visible { border-color: var(--accent); background: rgba(110,168,255,0.12); transform: translateY(-2px); }

/* —— 编辑按钮（仅管理模式下显示在卡片/文章上）—— */
.flip-card, .article-item { position: relative; }
.edit-chip {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.45); color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1;
}
.edit-chip:hover { border-color: var(--accent); }
.add-inline {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; margin: 6px 0;
  border-radius: 12px; border: 1px dashed var(--accent); background: rgba(110,168,255,0.08);
  color: var(--accent); font-size: 14px; cursor: pointer; transition: 0.2s;
}
.add-inline:hover { background: rgba(110,168,255,0.16); }

/* —— 编辑/删除按钮（管理员模式）—— */
.card-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 9; pointer-events: auto; }
.mini-btn {
  padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.45); color: var(--accent); font-size: 12px; line-height: 1.2;
  font-family: inherit; display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; white-space: nowrap; transition: 0.15s; touch-action: manipulation;
}
.mini-btn:hover, .mini-btn:focus-visible { border-color: var(--accent); }
.mini-btn.danger { color: #ff8fa3; }
.mini-btn.danger:hover { border-color: #ff5c5c; }

/* —— 保存状态 —— */
.admin-status { font-size: 12px; color: var(--muted); margin-left: 4px; }
.admin-status.ok { color: #3ddc97; }
.admin-status.err { color: #ff8fa3; }

/* —— 移动端交互：去掉 300ms 双击缩放延迟，统一点击高亮 —— */
.btn, .nav-toggle, .ap-btn, .fans-item, .flip-card, .article-item,
.mini-btn, .admin-btn, .add-inline, .ip, .footer-social a, .site-nav a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(176, 125, 255, 0.18);
}

/* —— 减弱动效（前庭敏感 / 系统级无障碍偏好）—— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .galaxy-band { animation: none !important; }
  .logo-dot { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-actions .btn::before { display: none !important; }
  .caret { animation: none !important; }
  .flip-card:hover .flip-inner,
  .flip-card:focus-visible .flip-inner,
  .flip-card:focus-within .flip-inner { transform: none !important; }
  .flip-back { display: none !important; }
}

/* —— 字体预览面板（站点字体选择，方便快速对比不同字体） —— */
.font-launch {
  position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 205;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel-strong); backdrop-filter: blur(12px); color: var(--text);
  font-size: 19px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer; transition: 0.2s; box-shadow: var(--shadow);
}
.font-launch:hover, .font-launch:focus-visible { border-color: var(--accent); transform: translateY(-2px); }

.font-panel {
  position: fixed; left: 18px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 206;
  width: 280px; max-width: calc(100vw - 36px); max-height: calc(100vh - 110px); overflow: auto;
  overscroll-behavior: contain;
  padding: 16px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--panel-strong); backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow); color: var(--text);
}
.font-panel[hidden] { display: none; }
.font-panel h3 { margin: 0 0 12px; font-size: 15px; }
.font-panel .fp-group { margin-bottom: 14px; }
.font-panel .fp-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.font-panel .fp-opts { display: flex; flex-direction: column; gap: 6px; }
.font-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.03); color: var(--text); font-size: 15px; cursor: pointer;
  transition: 0.15s; touch-action: manipulation; text-align: left;
}
.font-opt:hover, .font-opt:focus-visible { border-color: var(--accent); background: rgba(110,168,255,0.12); }
.font-opt[aria-checked="true"] { border-color: var(--accent); background: rgba(176,125,255,0.18); box-shadow: inset 0 0 0 1px var(--accent); }
.font-opt .fp-sample { font-size: 12px; color: var(--muted); }
.font-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.font-seg button {
  padding: 7px 14px; border: 0; background: transparent; color: var(--muted); font-size: 13px;
  font-family: inherit; cursor: pointer; transition: 0.15s;
}
.font-seg button[aria-pressed="true"] { background: var(--accent); color: #0b0e14; font-weight: 700; }
.font-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.font-panel .fp-reset {
  width: 100%; padding: 9px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.04); color: var(--text); font-size: 13px; font-family: inherit;
  cursor: pointer; transition: 0.15s;
}
.font-panel .fp-reset:hover, .font-panel .fp-reset:focus-visible { border-color: var(--accent); color: var(--accent); }

/* —— 打印：保持字体一致，避免浏览器回退成宋体/系统默认 —— */
@media print {
  body {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", system-ui, sans-serif !important;
    color: #000 !important;
    background: #fff !important;
  }
  .hero-slogan,
  .hero-title,
  .hero-outline,
  .hero-m3 {
    font-family: Impact, "Haettenschweiler", "Arial Narrow", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    color: #000 !important;
  }
  .site-loader,
  .bg-aurora,
  .grid-overlay,
  .stars,
  .cursor-dot,
  .cursor-ring,
  .marquee,
  .fans-card,
  .hero-actions,
  .admin-bar,
  .nav-toggle,
  .modal-mask,
  .add-inline,
  .font-panel, .font-launch,
  .card-tools {
    display: none !important;
  }
  .flip-card,
  .article-item {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  /* 打印时不再依赖滚动触发，避免整块内容被印成空白 */
  .reveal { opacity: 1 !important; transform: none !important; }
  /* 翻转卡在纸上无法交互，直接把正反面依次排开 */
  .flip-inner { transform: none !important; display: block !important; height: auto !important; }
  .flip-front, .flip-back {
    position: static !important; inset: auto !important;
    transform: none !important; height: auto !important;
    backface-visibility: visible !important; -webkit-backface-visibility: visible !important;
    background: #fff !important;
  }
  .card-desc {
    -webkit-line-clamp: unset !important; line-clamp: unset !important;
    display: block !important; overflow: visible !important;
  }
  .modal-label, .article-date, .card-desc { color: #333 !important; }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
}