/* ============================================================
EOC 共创组首页样式 - 亮/暗双主题体系
暗色：默认（18:00 - 次日06:00）
亮色：日间（06:00 - 18:00）
主题挂在 上
============================================================ */
/* ===== 设计变量（共用基座，主题专属变量由 JS 从 /css/data/theme-default.json 注入到 :root） ===== */
:root {
--elastic-out: cubic-bezier(0.34, 1.56, 0.64, 1);
--elastic-soft: cubic-bezier(0.22, 1, 0.36, 1);
--smooth: cubic-bezier(0.65, 0, 0.35, 1);
--blue: #027bff;
--blue-light: #4fc3f7;
--orange: #ff7d00;
--gold: #ffca28;
--radius-lg: 18px;
--radius-md: 14px;
--radius-sm: 10px;
--space-section: 56px;
--theme-fade: 0.6s; /* 主题切换过渡时长 */
/* 动画时长统一变量化：集中调速，避免散落字面量难以统一维护 */
--dur-instant: 0.08s; /* 点击反馈 */
--dur-fast: 0.18s; /* 开关旋钮 */
--dur-quick: 0.25s; /* 菜单项 / 按钮底色 */
--dur-base: 0.3s; /* 常规 hover 过渡 */
--dur-mid: 0.35s; /* 旋钮位移 / 扫光 */
--dur-slow: 0.4s; /* 图标旋转 */
--dur-panel: 0.45s; /* 面板展开 */
--dur-fade: 0.55s; /* 淡入淡出 */
--dur-enter: 0.7s; /* 入场淡入 */
--dur-enter-t: 0.8s; /* 入场位移 */
--dur-text: 1.2s; /* 首屏文字过渡 */
--title-gradient: linear-gradient(90deg, var(--blue), var(--blue-light), var(--orange), var(--gold), var(--orange), var(--blue-light), var(--blue));
/* 主题专属变量默认值（防 JS 未加载时的兜底，实际由 /css/data/theme-default.json 覆盖） */
--bg: #0b101b;
--bg-soft: rgba(17, 24, 39, 0.72);
--bg-card: rgba(255, 255, 255, 0.04);
--bg-card-border: rgba(255, 255, 255, 0.09);
--text: #f2f5fa;
--text-dim: #aab3c2;
--text-faint: rgba(255, 255, 255, 0.35);
--accent-glow: rgba(2, 123, 255, 0.3);
--accent-glow-strong: rgba(2, 123, 255, 0.4);
--orange-glow: rgba(255, 125, 0, 0.3);
--btn-text: #ffffff;
--toggle-bg: rgba(255, 255, 255, 0.06);
--toggle-bg-hover: rgba(255, 255, 255, 0.12);
--toggle-border: rgba(255, 255, 255, 0.15);
--bg-img-opacity: 0.14;
--bg-img-filter: none;
--star-a: 0.55;
--focus-veil: radial-gradient(ellipse 62% 55% at 50% 46%, rgba(11,16,27,0.55), transparent 70%);
--brand-bg: linear-gradient(180deg, rgba(11,16,27,0.75), transparent);
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
--icon-filter: none;
--glow-1: rgba(2, 123, 255, 0.16);
--glow-2: rgba(255, 125, 0, 0.09);
--glow-board-bg: rgba(255, 255, 255, 0.03);
--glow-blur: 10px;
--glow-opacity: 0.95;
--menu-bg: rgba(17, 24, 39, 0.92);
--menu-border: rgba(255, 255, 255, 0.10);
/* 细节修饰变量：同样由 /css/data/theme-default.json 覆盖，此处仅为无 JS 兜底 */
--cursor-glow: rgba(2, 123, 255, 0.06);
--logo-shadow: rgba(2, 123, 255, 0.35);
--knob-shadow: rgba(0, 0, 0, 0.3);
--welcome-glow: rgba(2, 123, 255, 0.15);
--title-glow: rgba(2, 123, 255, 0.08);
--btn-border: rgba(255, 255, 255, 0.14);
--btn-inset: rgba(255, 255, 255, 0.12);
--btn-inset-hover: rgba(255, 255, 255, 0.15);
--btn-border-hover: rgba(255, 255, 255, 0.28);
--btn-sweep: rgba(255, 255, 255, 0.12);
--ripple-bg: rgba(255, 255, 255, 0.25);
--card-hover-border: rgba(2, 123, 255, 0.35);
--h2-icon-glow: rgba(2, 123, 255, 0.4);
/* 遮罩渐变中的「实心」色标：mask-image 仅取 alpha 通道，
色相不参与渲染，此处仅作语义化占位，避免散落字面量 #000 */
--mask-solid: #000;
/* ===== 组件级变量兜底 =====
加载器 / 弹窗 / 卡片 / 搜索 / 状态点等组件依赖的主题变量全部由
/css/data/theme-default.json 注入。此前它们只在 JSON 中声明，
:root 里没有兜底值——一旦 JS 未执行、JSON 请求失败或注入尚未完成，
var() 会解析为 guaranteed-invalid，组件即退化为透明/黑色（不可见）。
这里补齐与 dark 主题一致的静态兜底，保证任意时刻都有可用配色。 */
/* 加载器 */
--loader-overlay-bg: rgba(11, 16, 27, 0.94);
--loader-overlay-blur: 10px;
--loader-panel-bg: rgba(20, 28, 46, 0.88);
--loader-panel-border: rgba(255, 255, 255, 0.14);
--loader-panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
--loader-text: #e8eefc;
--loader-text-dim: rgba(232, 238, 252, 0.66);
--loader-bar-track: rgba(255, 255, 255, 0.12);
--loader-bar-fill-file: linear-gradient(90deg, rgba(2,123,255,0.9), rgba(120,190,255,0.6));
--loader-bar-fill-total: linear-gradient(90deg, rgba(255,125,0,0.9), rgba(255,180,90,0.6));
--loader-orbit-duration: 2.4s;
--loader-bar-duration: 420ms;
--loader-fade-duration: 600ms;
--loader-elastic-easing: cubic-bezier(0.34, 1.4, 0.64, 1);
--loader-fade-easing: cubic-bezier(0.4, 0, 0.2, 1);
/* 层级 */
--layer-tint: rgba(2, 123, 255, 0.04);
/* 卡片表面 */
--surface-card: rgba(255, 255, 255, 0.05);
--surface-card-raised: rgba(255, 255, 255, 0.08);
--surface-card-border: rgba(255, 255, 255, 0.11);
--surface-card-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
--surface-inset: rgba(255, 255, 255, 0.03);
--surface-inset-border: rgba(255, 255, 255, 0.07);
/* 信息条 */
--header-bar-bg: linear-gradient(135deg, rgba(2,123,255,0.22), rgba(255,125,0,0.12));
--header-bar-border: rgba(255, 255, 255, 0.14);
--header-bar-text: #f2f5fa;
--header-bar-accent: #4fc3f7;
/* 按钮 */
--btn-primary-bg: linear-gradient(135deg, #027bff, #4fc3f7);
--btn-primary-bg-hover: linear-gradient(135deg, #1a8bff, #6fd0f8);
--btn-primary-text: #ffffff;
--btn-primary-border: rgba(255, 255, 255, 0.22);
--btn-primary-shadow: 0 6px 20px rgba(2, 123, 255, 0.35);
--btn-ghost-bg: rgba(255, 255, 255, 0.06);
--btn-ghost-bg-hover: rgba(255, 255, 255, 0.12);
--btn-ghost-text: #f2f5fa;
--btn-ghost-border: rgba(255, 255, 255, 0.16);
/* 高亮 */
--highlight-bg: linear-gradient(135deg, rgba(2,123,255,0.16), rgba(2,123,255,0.05));
--highlight-border: rgba(2, 123, 255, 0.35);
--highlight-text: #e8f2ff;
--highlight-glow: 0 0 26px rgba(2, 123, 255, 0.22);
--highlight-accent: #4fc3f7;
/* 公告 */
--notice-bg: rgba(255, 125, 0, 0.10);
--notice-border: rgba(255, 125, 0, 0.28);
--notice-text: #ffd9a8;
/* 状态点 */
--status-online: #34d399;
--status-offline: #ff6b6b;
--status-unknown: #ffca28;
--status-online-bg: rgba(52, 211, 153, 0.14);
--status-offline-bg: rgba(255, 107, 107, 0.14);
--status-unknown-bg: rgba(255, 202, 40, 0.14);
/* 弹窗 */
--modal-bg: rgba(17, 24, 39, 0.96);
--modal-border: rgba(255, 255, 255, 0.13);
--modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
--modal-text: #f2f5fa;
--modal-text-dim: #aab3c2;
--modal-head-bg: linear-gradient(135deg, rgba(2,123,255,0.20), rgba(255,125,0,0.10));
--modal-head-border: rgba(255, 255, 255, 0.11);
--modal-close-bg: rgba(255, 255, 255, 0.07);
--modal-close-hover: rgba(255, 255, 255, 0.15);
/* 标签 chip */
--chip-bg: rgba(255, 255, 255, 0.07);
--chip-border: rgba(255, 255, 255, 0.13);
--chip-text: #cdd6e4;
/* 搜索框 */
--search-bg: rgba(255, 255, 255, 0.06);
--search-border: rgba(255, 255, 255, 0.16);
--search-text: #f2f5fa;
--search-placeholder: rgba(242, 245, 250, 0.45);
/* 搜索结果 */
--result-hover-bg: rgba(2, 123, 255, 0.14);
--result-border: rgba(255, 255, 255, 0.09);
}
/* ===== 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 滚动锁定：js/main.js 在侧边栏/登录弹窗打开时给 加 .overflow-hidden。
此前全站 CSS 均无该类规则，类名切换不产生任何效果 —— 弹层打开时背景仍可
滚动，形成「滚动穿透」。此处补齐唯一定义，作为 JS 与 CSS 的契约锚点。 */
body.overflow-hidden { overflow: hidden; }
body {
position: relative;
min-height: 100vh;
padding: 20px 20px 72px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow-x: hidden;
font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
background-color: var(--bg);
color: var(--text);
/* 主题切换无缝渐变：哪些属性参与过渡 */
transition: background-color var(--theme-fade) ease, color var(--theme-fade) ease;
}
/* 需要随主题渐变过渡的公共规则 */
.brand, .intro-card, .site-footer, .theme-toggle,
.text-wrap .desc, .area-title, .bg-img, #starCanvas {
transition: background-color var(--theme-fade) ease,
color var(--theme-fade) ease,
border-color var(--theme-fade) ease,
box-shadow var(--theme-fade) ease,
opacity var(--theme-fade) ease;
}
/* ===== 背景层 ===== */
#starCanvas {
position: fixed; inset: 0;
width: 100%; height: 100%;
z-index: 0;
pointer-events: none;
}
.bg-img {
position: fixed; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -2;
opacity: var(--bg-img-opacity);
filter: var(--bg-img-filter);
will-change: opacity, transform;
transition: opacity 1.2s ease, transform 1.2s ease,
filter var(--theme-fade) ease;
}
/* 聚焦遮罩：文字区低噪声，提升可读性 */
.focus-veil {
position: fixed; inset: 0;
z-index: 0;
pointer-events: none;
background: var(--focus-veil);
transition: background var(--theme-fade) ease;
}
/* ===== 鼠标光晕（仅暗色 + 精确指针下启用，亮色淡化） ===== */
#cursorGlow {
position: fixed;
left: 0; top: 0;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, var(--cursor-glow), transparent 60%);
transform: translate3d(-50%, -50%, 0);
opacity: 0;
z-index: 1;
pointer-events: none;
transition: opacity 0.8s ease;
will-change: transform;
}
body[data-theme="light"] #cursorGlow {
/* 亮色下由主题 JSON 的 --cursor-glow 变量控制，无需再写字面色值 */
background: radial-gradient(circle, var(--cursor-glow), transparent 60%);
}
/* ===== 顶部品牌栏 ===== */
.brand {
position: fixed;
top: 0; left: 0;
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 18px 28px;
z-index: 4;
background: var(--brand-bg);
}
.brand img.logo {
width: 34px; height: 34px;
filter: drop-shadow(0 0 8px var(--logo-shadow));
}
.brand-name {
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
color: var(--text);
}
.brand-name small {
display: block;
font-size: 11px;
font-weight: 400;
color: var(--text-dim);
letter-spacing: 2px;
}
/* ===== 主题切换按钮（右顶常驻） ===== */
.theme-toggle {
position: fixed;
top: 16px; right: 20px;
z-index: 5;
width: 44px; height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--toggle-border);
border-radius: 50%;
background: var(--toggle-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background var(--theme-fade) ease,
border-color var(--theme-fade) ease,
transform 0.3s var(--elastic-out),
box-shadow 0.3s ease;
}
.theme-toggle:hover {
background: var(--toggle-bg-hover);
transform: translateY(-2px) scale(1.06);
box-shadow: 0 6px 18px var(--accent-glow);
}
.theme-toggle:active { transform: scale(0.92); transition-duration: 0.08s; }
/* ===== 点击 / 轻触回弹反馈 =====
只在合成层做 transform，不触发重排；曲线取站点 N 型瞬态 --elastic-out
（cubic-bezier(0.34,1.56,0.64,1)），先缩后弹再收敛，反馈明显但不夸张。
由 js/theme.js 在点击时补 .is-bouncing，动画结束自动移除。 */
@keyframes themeToggleBounce {
0% { transform: scale(1); }
32% { transform: scale(0.88); }
66% { transform: scale(1.09); }
100% { transform: scale(1); }
}
.theme-toggle.is-bouncing {
animation: themeToggleBounce 0.42s var(--elastic-out);
}
.theme-toggle img {
width: 21px; height: 21px;
/* 图标换向小动画 */
transition: opacity 0.25s ease, transform 0.45s var(--elastic-out);
}
/* ===== 主题图标 sun↔moon 形变（交叉形变降级方案）=====
站点图标一律外链 SVG（![]()
引用），外部文档内部的 path 无法补间；
且 sun（1 圆 + 8 射线）与 moon（单条新月路径）节点结构不匹配，
故采用「旧图旋转收缩淡出 + 新图反向旋转放大淡入」的交叉形变：
两层同时进行，形成连续形状过渡，消除直接换图的跳变。
全程只动 opacity / transform，不触发重排。 */
.theme-toggle-ghost {
position: absolute;
top: 50%; left: 50%;
width: 21px; height: 21px;
margin: -10.5px 0 0 -10.5px; /* 居中：绝对定位不占据按钮内布局 */
pointer-events: none;
filter: var(--icon-filter);
opacity: 1;
transform: rotate(0deg) scale(1);
transition: opacity 0.34s var(--smooth), transform 0.44s var(--elastic-soft);
}
.theme-toggle-ghost.is-out {
opacity: 0;
transform: rotate(-90deg) scale(0.55);
}
.theme-toggle img.is-morph-in {
animation: themeIconMorphIn 0.44s var(--elastic-soft);
}
@keyframes themeIconMorphIn {
0% { opacity: 0; transform: rotate(75deg) scale(0.5); }
60% { opacity: 1; }
100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
/* 减弱动效偏好：直接落位，仅保留极短淡入，不做旋转缩放位移 */
@media (prefers-reduced-motion: reduce) {
.theme-toggle.is-bouncing { animation: none; }
.theme-toggle img.is-morph-in {
animation: none;
opacity: 1;
transform: none;
}
.theme-toggle-ghost { transition: opacity 0.12s linear; transform: none; }
.theme-toggle-ghost.is-out { transform: none; }
}
/* 动画加速开关（.anim-slow）下同步收敛，避免与全局放慢策略冲突 */
.anim-slow .theme-toggle.is-bouncing { animation-duration: 0.16s; }
.anim-slow .theme-toggle img.is-morph-in { animation-duration: 0.16s; }
.theme-toggle.switching img {
opacity: 0;
transform: rotate(-90deg) scale(0.6);
}
/* 亮色主题下图标加深，保证可见 */
body[data-theme="light"] .theme-toggle img,
.theme-toggle img { filter: var(--icon-filter); }
/* ===== 背景板光影投射（柔和，兼容双主题，可由 .glow-off 关闭） ===== */
.glow-board {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(60% 42% at 22% 18%, var(--glow-1), transparent 70%),
radial-gradient(52% 40% at 82% 30%, var(--glow-2), transparent 72%),
radial-gradient(70% 50% at 50% 100%, var(--glow-1), transparent 75%);
background-color: var(--glow-board-bg);
filter: blur(var(--glow-blur));
opacity: var(--glow-opacity);
transition: opacity var(--theme-fade) ease, background-color var(--theme-fade) ease,
filter var(--theme-fade) ease;
will-change: opacity;
}
.glow-board::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(40% 30% at 50% 46%, var(--glow-1), transparent 70%);
opacity: 0.5;
mix-blend-mode: screen;
}
html.glow-off .glow-board { opacity: 0; }
/* ===== 光影映射开关的作用域收敛 =====
此前 .glow-off 只把 .glow-board 隐藏，而该元素本身透明度极低，
导致开关开/关几乎没有可感知差异（"没效果"）。
这里把真正承载"光影/辉光"观感的元素一并纳入开关作用域：
#cursorGlow 跟随光标的光晕
.welcome / .area-title 的 text-shadow 辉光
.logo / .h2-icon 的 drop-shadow 辉光
.intro-card:hover 的高光描边
关闭时统一归零，开启时恢复变量原值，使开关具备明确的可感知效果。 */
html.glow-off #cursorGlow { opacity: 0; }
html.glow-off .welcome,
html.glow-off .area-title,
html.glow-off .intro-title { text-shadow: none; }
html.glow-off .logo,
html.glow-off .h2-icon,
html.glow-off .zh-status-title img { filter: none; }
html.glow-off .intro-card:hover,
html.glow-off .feature-card:hover { box-shadow: var(--shadow-card); }
html.glow-off .card-icon { box-shadow: none; }
/* ===== 汉堡折叠菜单（右上角，三条横杠） ===== */
.hamburger {
position: fixed;
top: 16px; right: 72px;
z-index: 6;
width: 44px; height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--toggle-border);
border-radius: 50%;
background: var(--toggle-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background var(--theme-fade) ease, border-color var(--theme-fade) ease,
transform 0.3s var(--elastic-out), box-shadow 0.3s ease;
}
.hamburger:hover {
background: var(--toggle-bg-hover);
transform: scale(1.06);
box-shadow: 0 6px 18px var(--accent-glow);
}
.hamburger:active { transform: scale(0.92); }
/* ===== 汉堡图标 → 关闭 X：弹簧形变序列 =====
外链 SVG 雪碧图 + stroke="currentColor"，颜色继承 .hamburger 的 color，
明暗主题自动适配；HTML 内无内联 SVG 代码。
序列：① 三条整长横线 → ② 中线横向收缩为断开的短线段 → ③ 上下线旋转立起成 X
④ 关闭时整体反向回放。 */
.hamburger {
color: var(--text);
}
.hamburger-svg {
width: 22px;
height: 22px;
display: block;
overflow: visible;
/* 轻微过冲（y=1.15，幅度克制），收尾自然回落，非夸张弹跳 */
--ease-spring: cubic-bezier(0.25, 1.15, 0.5, 1);
--dur-spring: 0.45s;
--stagger: 0.06s; /* 中线收缩与上下线旋转之间的微错峰 */
}
.hamburger-svg .hb-line {
stroke: currentColor;
transform-box: fill-box;
transform-origin: center;
transition:
transform var(--dur-spring) var(--ease-spring),
opacity var(--dur-spring) var(--ease-spring);
}
/* ── 收起态（默认）：三条整长横线，无位移 ── */
.hamburger-svg .hb-line-1,
.hamburger-svg .hb-line-3 {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
.hamburger-svg .hb-line-2 {
transform: scaleX(1);
opacity: 1;
}
/* ── 展开态：中线收缩为断开短线段，上下线立起成 X ── */
/* 中线先动（delay 0），收缩为短线段并淡出 */
.hamburger[aria-expanded="true"] .hb-line-2 {
transform: scaleX(0.18);
opacity: 0;
transition-delay: 0s;
}
/* 上下两线随后旋转合拢（delay = stagger），形成 X */
.hamburger[aria-expanded="true"] .hb-line-1 {
transform: translateY(5px) rotate(45deg);
transition-delay: var(--stagger);
}
.hamburger[aria-expanded="true"] .hb-line-3 {
transform: translateY(-5px) rotate(-45deg);
transition-delay: var(--stagger);
}
/* ── 关闭态反向：上下线先转回横线（delay 0），中线随后伸展复位 ── */
.hamburger[aria-expanded="false"] .hb-line-1,
.hamburger[aria-expanded="false"] .hb-line-3 {
transform: translateY(0) rotate(0deg);
transition-delay: 0s;
}
.hamburger[aria-expanded="false"] .hb-line-2 {
transform: scaleX(1);
opacity: 1;
transition-delay: var(--stagger);
}
/* 菜单面板 */
.settings-menu {
position: fixed;
top: 68px; right: 16px;
z-index: 7;
width: min(248px, calc(100vw - 32px));
padding: 10px;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--menu-bg);
border: 1px solid var(--menu-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
transform: translateY(-8px) scale(0.98);
transform-origin: top right;
pointer-events: none;
transition: opacity 0.28s var(--smooth), transform 0.28s var(--elastic-soft);
}
.settings-menu.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.menu-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 8px;
border-radius: var(--radius-sm);
}
.menu-row + .menu-row { border-top: 1px solid var(--menu-border); }
.menu-label {
font-size: 13.5px;
font-weight: 500;
color: var(--text);
letter-spacing: 0.3px;
}
/* 主题模式行：与 .menu-row 组合使用（class="menu-row menu-theme"），
此前该类缺少任何样式定义（空 CSS），导致该行的按钮对齐与间距
完全依赖父级 .menu-row 的默认值，与其它设置行观感不一致。
此处补齐，取值沿用全站主题变量，不引入新的独立配色。 */
.menu-theme {
align-items: center;
justify-content: space-between;
gap: 12px;
}
.menu-theme .menu-label {
/* 与开关类行保持同一视觉权重 */
font-weight: 500;
}
.menu-theme-btn {
font-size: 13px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--toggle-border);
background: var(--toggle-bg);
color: var(--text);
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease;
}
.menu-theme-btn:hover { background: var(--toggle-bg-hover); }
/* ===== 公共侧边栏（components/sidebar-menu.html）=====
全部色值走 CSS 变量，由 /css/data/theme-default.json 注入；
展开/收起为平铺式弹性缓动，无抖动、无呼吸动画。 */
.settings-menu.sidebar {
padding: 8px;
gap: 2px;
}
/* ===== 侧边 HUD 展开动画（Apple 风格弹性）=====
初始态：translateY(12px) + opacity:0 + 模糊；展开后归零并去除模糊。
缓动曲线与时长严格遵循 cubic-bezier(0.25, 1.1, 0.5, 1) / 0.45s；
关闭时反向播放同一序列（属性过渡天然对称，无需额外关键帧）。
毛玻璃沿用现有明暗主题变量，无硬编码色值。 */
.settings-menu.sidebar {
opacity: 0;
transform: translateY(12px);
transform-origin: top right;
pointer-events: none;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
filter: blur(6px);
will-change: transform, opacity, filter;
transition:
transform 0.45s cubic-bezier(0.25, 1.1, 0.5, 1),
opacity 0.45s cubic-bezier(0.25, 1.1, 0.5, 1),
filter 0.45s cubic-bezier(0.25, 1.1, 0.5, 1),
visibility 0s linear 0.45s;
visibility: hidden;
}
.settings-menu.sidebar.open {
opacity: 1;
transform: translateY(0);
filter: blur(0);
pointer-events: auto;
visibility: visible;
transition:
transform 0.45s cubic-bezier(0.25, 1.1, 0.5, 1),
opacity 0.45s cubic-bezier(0.25, 1.1, 0.5, 1),
filter 0.45s cubic-bezier(0.25, 1.1, 0.5, 1),
visibility 0s linear 0s;
}
/* 无障碍：尊重系统「减弱动态效果」偏好，关闭位移与模糊过渡 */
@media (prefers-reduced-motion: reduce) {
.hamburger-svg .hb-line { transition-duration: 0.01ms; transition-delay: 0s; }
.settings-menu.sidebar,
.settings-menu.sidebar.open {
transition-duration: 0.01ms;
filter: none;
}
}
.sidebar-head {
padding: 8px 8px 6px;
border-bottom: 1px solid var(--menu-border);
margin-bottom: 2px;
}
.sidebar-title {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
color: var(--text-faint);
text-transform: uppercase;
}
/* ===== 侧边栏·多层级导航 =====
level-1 为分类条目（#sidebarCats），点击进入 level-2 子面板（#sidebarContent）。
结构与配色沿用 .sidebar-link，保持与原有条目一致的视觉语言；
只动 transform / background，不触发重排。 */
.sidebar-cats {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0;
}
.sidebar-cat {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
padding: 10px 8px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
font-family: inherit;
font-size: 13.5px;
font-weight: 500;
color: var(--text);
text-align: left;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.25s var(--smooth), transform 0.25s var(--elastic-soft);
}
.sidebar-cat:hover { background: var(--bg-card-border); }
.sidebar-cat:active { transform: scale(0.97); }
.sidebar-cat:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sidebar-cat-icon {
flex: none;
width: 18px;
height: 18px;
filter: var(--icon-filter);
}
.sidebar-cat-name { flex: 1 1 auto; min-width: 0; }
.sidebar-cat-arrow {
flex: none;
width: 14px;
height: 14px;
/* 指向右侧：旋转向下箭头 270° */
transform: rotate(-90deg);
filter: var(--icon-filter);
opacity: 0.55;
}
.sidebar-content {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0;
}
.sidebar-content[hidden],
.sidebar-cats[hidden],
.sidebar-back[hidden] { display: none; }
/* ===== 层级切换过渡（一级 ⇄ 二级） =====
[hidden] 会置 display:none，display 无法参与 transition，
因此由 js/sidebar-nav.js 的 swapLevel() 分两段控制：
离开层加 .is-leaving，新层加 .is-entering 后于下一帧移除。
时长需与 JS 的 LEVEL_MS（180ms）保持一致。
只动 opacity / transform，不触发重排。 */
.sidebar-cats,
.sidebar-content {
transition: opacity 180ms var(--smooth, ease),
transform 180ms var(--smooth, ease);
}
.sidebar-cats.is-leaving,
.sidebar-content.is-leaving {
opacity: 0;
transform: translate3d(-8px, 0, 0); /* 向左淡出：暗示「进入下一层」 */
pointer-events: none;
}
.sidebar-cats.is-entering,
.sidebar-content.is-entering {
opacity: 0;
transform: translate3d(10px, 0, 0); /* 从右侧淡入 */
}
/* 返回上级：方向相反，从左侧淡入，与前进形成呼应 */
.sidebar-back[data-current-panel] ~ .sidebar-content .sidebar-cats.is-entering,
.sidebar-cats.is-entering {
transform: translate3d(10px, 0, 0);
}
/* 减少动效偏好：直接切换，不做位移与淡入淡出 */
@media (prefers-reduced-motion: reduce) {
.sidebar-cats,
.sidebar-content { transition: none; }
.sidebar-cats.is-leaving,
.sidebar-content.is-leaving,
.sidebar-cats.is-entering,
.sidebar-content.is-entering {
opacity: 1;
transform: none;
}
}
/* 全站动画加速开关下同步收敛 */
.anim-slow .sidebar-cats,
.anim-slow .sidebar-content { transition-duration: 0.12s; }
/* 返回上级按钮 */
.sidebar-back {
display: flex;
align-items: center;
gap: 6px;
margin: 4px 0 2px;
padding: 7px 8px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
color: var(--text-dim);
cursor: pointer;
transition: background 0.25s var(--smooth), color 0.25s var(--smooth);
}
.sidebar-back:hover { background: var(--bg-card-border); color: var(--text); }
.sidebar-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sidebar-back-icon {
flex: none;
width: 16px;
height: 16px;
filter: var(--icon-filter);
}
/* ===== 侧边栏·更新公告条目 =====
圆圈-i 外链 SVG + 公告标题 + 缓慢横向滚动摘要；整条为可点击链接。
滚动用 transform 位移（合成层），不触发重排，滚动缓慢无卡顿。 */
.sidebar-notice {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 9px 8px;
margin: 6px 0 2px;
border: 1px solid var(--notice-border);
border-radius: var(--radius-sm);
background: var(--notice-bg);
color: var(--notice-text);
font-size: 12.5px;
text-decoration: none;
will-change: transform;
transition: background 0.25s var(--smooth), border-color 0.25s var(--smooth),
transform 0.25s var(--elastic-soft);
}
.sidebar-notice:hover { background: var(--btn-ghost-bg-hover); border-color: var(--highlight-border); }
.sidebar-notice:active { transform: scale(0.98); }
.sidebar-notice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sidebar-notice-icon {
flex: none;
width: 18px;
height: 18px;
filter: var(--icon-filter);
}
.sidebar-notice-title {
flex: none;
font-weight: 600;
font-size: 12.5px;
color: var(--notice-text);
letter-spacing: 0.3px;
}
/* 滚动视窗：遮裁溢出文本，宽度自适应剩余空间 */
.sidebar-notice-marquee {
position: relative;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
/* 左右淡出遮罩，避免文字硬边切断 */
mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 8px, var(--mask-solid) calc(100% - 8px), transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 8px, var(--mask-solid) calc(100% - 8px), transparent);
}
.sidebar-notice-marquee-inner {
display: inline-block;
white-space: nowrap;
color: var(--text-dim);
will-change: transform;
}
/* 缓慢横向滚动：24s 线性循环；文本短于容器时由 JS 置 data-scroll="off" 停滚 */
.sidebar-notice-marquee-inner[data-scroll="on"] {
animation: sidebar-marquee 24s linear infinite;
}
@keyframes sidebar-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* 动画加速关闭时收敛 */
.anim-slow .sidebar-notice-marquee-inner[data-scroll="on"] { animation-duration: 40s; }
/* ===== 侧边栏·信息区块（服务器在线等）===== */
.sidebar-block {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 8px;
margin: 2px 0 6px;
border: 1px solid var(--surface-card-border);
border-radius: var(--radius-sm);
background: var(--surface-card);
}
.sidebar-block-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.sidebar-block-title {
flex: 1 1 auto;
min-width: 0;
font-size: 13.5px;
font-weight: 500;
color: var(--text);
letter-spacing: 0.3px;
}
.sidebar-block-note {
margin: 0;
font-size: 11.5px;
line-height: 1.5;
color: var(--text-dim);
/* 备注可能较长，限高两行 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sidebar-block-link {
align-self: flex-start;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--btn-ghost-border);
background: var(--btn-ghost-bg);
color: var(--btn-ghost-text);
font-size: 12px;
font-weight: 500;
text-decoration: none;
will-change: transform;
transition: background 0.25s var(--smooth), color 0.25s var(--smooth),
transform 0.25s var(--elastic-soft);
}
.sidebar-block-link:hover { background: var(--btn-ghost-bg-hover); color: var(--header-bar-accent); }
.sidebar-block-link:active { transform: scale(0.96); }
.sidebar-block-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* ===== 侧边栏·状态徽标（在线 / 离线 / 未知）===== */
.sidebar-status-badge {
flex: none;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
transition: background 0.3s var(--smooth), color 0.3s var(--smooth);
}
.sidebar-status-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.sidebar-status-badge[data-state="online"] {
background: var(--status-online-bg);
color: var(--status-online);
}
.sidebar-status-badge[data-state="offline"] {
background: var(--status-offline-bg);
color: var(--status-offline);
}
.sidebar-status-badge[data-state="unknown"] {
background: var(--status-unknown-bg);
color: var(--status-unknown);
}
/* 侧边栏导航容器：承载 .sidebar-link，纯布局壳，不参与视觉表现 */
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 8px;
border-radius: var(--radius-sm);
font-size: 13.5px;
font-weight: 500;
color: var(--text);
text-decoration: none;
letter-spacing: 0.3px;
/* 轻量化：仅 transform / background 合成层属性，不触发重排 */
transition: background 0.25s var(--smooth), transform 0.25s var(--elastic-soft);
}
/* 流量统计由