/* MC 主题兼容层：noir 变量映射到 MC 23 主题变量 + 页面布局适配 */
html[data-theme] {
  --noir-bg-primary: var(--bg-deep);
  --noir-bg-secondary: var(--bg-card);
  --noir-bg-elevated: var(--bg-elevated);
  --noir-bg-tertiary: var(--bg-card);
  --noir-bg-inverse: var(--text-primary);
  --noir-text-primary: var(--text-primary);
  --noir-text-secondary: var(--text-secondary);
  --noir-text-tertiary: var(--text-muted);
  --noir-text-inverse: var(--bg-deep);
  --noir-accent: var(--green);
  --noir-accent-hover: var(--green-light);
  --noir-accent-subtle: rgba(91,135,49,.15); /* 老浏览器 fallback */
  --noir-accent-subtle: color-mix(in srgb, var(--green-light, var(--green)) 14%, transparent); /* 主题联动 */
  --noir-border-light: var(--stone);
  --noir-border-medium: var(--stone-light);
  --noir-border-strong: var(--green-light);
  --noir-shadow-sm: var(--shadow);
  --noir-shadow-md: var(--shadow);
  --noir-shadow-lg: var(--shadow);
  --noir-shadow-glow: var(--shadow-glow);
  --noir-shadow-glow-lg: var(--shadow-glow);
  --noir-radius-xs: 4px;
  --noir-radius-sm: var(--radius-sm);
  --noir-radius-md: var(--radius);
  --noir-radius-lg: 16px;
  --noir-radius-xl: 20px;
  --noir-radius-full: 999px;
}
/* 固定导航栏让位（MC navbar 高 60px） */
body.has-nav { padding-top: 60px; }
/* 页面背景统一为 MC 主题色（覆盖任何旧背景，含 bg.svg） */
body.mc-page, html[data-theme] body.mc-page, .noir-dark body.mc-page, .noir-light body.mc-page {
  background: var(--bg-deep) !important;
  color: var(--text-primary);
}
.mc-page { min-height: 100vh; }
/* 全屏布局页面（登录/注册等）在导航栏下居中 */
body.mc-page { box-sizing: border-box; }

/* ===== 透明材质主题化：毛玻璃用主题背景色的半透明版 ===== */
html[data-theme] .noir-glass {
  background-color: color-mix(in srgb, var(--bg-card) 55%, transparent);
  border-color: color-mix(in srgb, var(--stone-light) 60%, transparent);
}
htmlhtml.sinh-light .noir-glass {
  background-color: color-mix(in srgb, var(--bg-card) 45%, transparent);
  border-color: color-mix(in srgb, var(--stone-light) 50%, transparent);
}
/* 卡片/输入框高光跟随主题边框色 */
html[data-theme] .noir-card {
  box-shadow: var(--noir-shadow-xs), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 8%, transparent);
}
/* 模态遮罩跟随主题（深色主题深遮罩，浅色主题浅遮罩） */
htmlhtml.sinh-light .noir-modal-overlay {
  background-color: rgba(0, 0, 0, 0.35);
}

/* 内联 SVG 图标统一颜色（随主题主色） */
.sinh-icon{color:var(--green-light);display:inline-block}
.sinh-icon *{color:inherit}

/* DeepSeek 图标：CSS 覆盖实现主题变色（属性值 #7caf4e 为兜底） */
.sinh-icon-deepseek path{fill:var(--green-light) !important}

/* ===== AI Chat 侧边栏文字对比度增强 ===== */
html[data-theme] #sidebar{color:var(--text-primary)}
html[data-theme] #sidebar .noir-text-tertiary{color:var(--text-secondary)}
html[data-theme] #sidebar .noir-text-sm{color:var(--text-primary)}
html[data-theme] #sidebar .noir-text-xs{color:var(--text-secondary)}
html[data-theme] #sidebar .conversation-item{color:var(--text-secondary)}
html[data-theme] #sidebar .conversation-item:hover{color:var(--text-primary)}
html[data-theme] #sidebar .conversation-item.active{color:var(--text-primary)}
html[data-theme] #sidebar .conversation-item .noir-text-sm{color:var(--text-primary)}

/* ===== 毛玻璃 UI 统一重写 =====
   主题化半透明渐变 + 高模糊 + 顶部高光 */
html[data-theme] .noir-glass,
html[data-theme] .noir-card,
html[data-theme] .noir-modal,
html[data-theme] .noir-nav {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--bg-elevated) 58%, transparent) 0%,
      color-mix(in srgb, var(--bg-card) 38%, transparent) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.06) !important;
  backdrop-filter: blur(18px) saturate(160%) brightness(1.06) !important;
  border: 1px solid color-mix(in srgb, var(--stone-light) 55%, transparent) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .16),
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 9%, transparent) !important;
}
/* 玻璃悬停微动效 */
html[data-theme] .noir-glass:hover,
html[data-theme] .noir-card:hover {
  border-color: color-mix(in srgb, var(--green-light) 45%, transparent);
}
/* 模态遮罩：主题化深色毛玻璃 */
html[data-theme] .noir-modal-overlay {
  background-color: color-mix(in srgb, var(--bg-deep) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
}
/* 卡片内高光微调（跟随主题文字色） */
html[data-theme] .noir-card::after,
html[data-theme] .noir-modal::after {
  background:
    radial-gradient(ellipse at 30% 12%, color-mix(in srgb, var(--text-primary) 7%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, color-mix(in srgb, var(--text-primary) 3%, transparent) 0%, transparent 45%) !important;
}
html[data-theme] .noir-glass::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 10%, transparent), transparent) !important;
}

/* 防御：body 级变量映射（杜绝任何 .noir-dark/.noir-light 硬编码覆盖主题） */
html[data-theme] body{
  --noir-bg-primary: var(--bg-deep);
  --noir-bg-secondary: var(--bg-card);
  --noir-bg-elevated: var(--bg-elevated);
  --noir-bg-tertiary: var(--bg-card);
  --noir-text-primary: var(--text-primary);
  --noir-text-secondary: var(--text-secondary);
  --noir-text-tertiary: var(--text-muted);
  --noir-accent: var(--green);
  --noir-accent-hover: var(--green-light);
  --noir-border-light: var(--stone);
  --noir-border-medium: var(--stone-light);
  --noir-shadow-sm: var(--shadow);
  --noir-shadow-md: var(--shadow);
  --noir-shadow-lg: var(--shadow);
  --noir-radius-lg: 16px;
}

/* ===== 用户头衔徽章（开发者/管理员/挚友/同学） ===== */
.sinh-role-badge{display:inline-block;font-size:10px;line-height:1;padding:2px 7px;border-radius:999px;margin-left:5px;vertical-align:1.5px;font-weight:600;letter-spacing:.02em}
.sinh-role-developer{background:linear-gradient(135deg,#f6c453,#ef9f2e);color:#3d2a00;border:1px solid #e3a83a}
.sinh-role-admin{background:#4f83f1;color:#fff;border:1px solid #6b97f5}
.sinh-role-friend{background:#e070a0;color:#fff;border:1px solid #ea8bb5}
.sinh-role-classmate{background:var(--noir-bg-tertiary);color:var(--noir-text-secondary);border:1px solid var(--noir-border-light)}

/* ===== 子页面统一 UI 组件 ===== */
/* 统一文字返回链接（bottle/luck 等） */
html[data-theme] a.back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--stone);
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: all .25s;
}
html[data-theme] a.back:hover { border-color: var(--green-light); color: var(--text-primary); transform: translateX(-2px); }
/* 统一悬浮返回按钮（左上角圆形） */
html[data-theme] .home-btn {
  position: fixed; top: 16px; left: 16px; z-index: 100;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-card); backdrop-filter: blur(16px);
  border: 1px solid var(--stone); display: flex; align-items: center; justify-content: center;
  color: var(--text-primary); text-decoration: none; font-size: 17px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: all .25s;
}
html[data-theme] .home-btn:hover { transform: scale(1.1); border-color: var(--green-light); color: var(--green-light); }
/* 统一页面主标题 */
html[data-theme] .al-hdr h1, html[data-theme] .hero-section h1, html[data-theme] .blog-header h1,
html[data-theme] .tool-header h1, html[data-theme] .page-title, html[data-theme] .player-title {
  font-family: 'Sora','Noto Sans SC',sans-serif;
  font-weight: 800; letter-spacing: -.02em; color: var(--text-primary) !important;
}
/* 统一页面副标题 */
html[data-theme] .al-sub, html[data-theme] .hero-sub, html[data-theme] .blog-sub, html[data-theme] .tool-sub {
  color: var(--text-secondary) !important;
}

/* ===== 背景强保险：所有主题下 body 背景强制跟随 ===== */
html[data-theme] body {
  background: var(--bg-deep) !important;
  color: var(--text-primary) !important;
}
/* 账户页卡片/菜单显式主题背景（防止任何旧规则覆盖） */
html[data-theme] .acct-card { background: var(--bg-elevated) !important; }
html[data-theme] .acct-topbar { background: linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent), transparent 60%) !important; }
html[data-theme] .acct-menu { background: color-mix(in srgb, var(--bg-card) 60%, transparent) !important; }
html[data-theme] .acct-content { color: var(--text-primary) !important; }

/* 账户页：无毛玻璃朴素卡片（实色、无渐变、无模糊、无阴影） */
html[data-theme] .acct-card {
  background: var(--bg-elevated) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--stone) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
}
html[data-theme] .acct-topbar {
  background: var(--bg-card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme] .acct-menu { background: var(--bg-card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme] .acct-content { background: transparent !important; }
html[data-theme] .acct-menu button { color: var(--text-secondary) !important; }
html[data-theme] .acct-menu button:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
html[data-theme] .acct-menu button.active { background: var(--green) !important; color: #fff !important; }

/* ===== 账户页面板区彻底透明/主题化（消灭所有灰色块） ===== */
html[data-theme] .panel { background: transparent !important; }
html[data-theme] .acct-content { background: transparent !important; }
html[data-theme] .role-user-row { background: var(--bg-card) !important; border: 1px solid var(--stone) !important; }
html[data-theme] .profile-row { background: transparent !important; }
html[data-theme] .noir-form-group input { background: var(--bg-card) !important; }

/* ===== 全局滚动条主题化（替代默认黑色拖拽条） ===== */
html[data-theme] ::-webkit-scrollbar { width: 6px; height: 6px; }
html[data-theme] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-primary) 18%, transparent);
  border-radius: 999px;
}
html[data-theme] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-primary) 32%, transparent);
}
html[data-theme] * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-primary) 25%, transparent) transparent;
}

/* ═══ 手机端适配（全站） ═══ */
@media (max-width: 768px) {
  /* 导航栏 */
  .navbar { padding: .5rem .8rem; gap: .4rem; }
  .nav-logo { font-size: .95rem; }
  .nav-logo-icon { width: 22px !important; height: 22px !important; }
  .nav-links { gap: .3rem; }
  .nav-links a { padding: .28rem .5rem; font-size: .78rem; }
  .nav-select { max-width: 108px; font-size: .8rem; padding: .25rem .4rem; }
  /* 首页 hero */
  .hero { padding: 1.8rem 1rem 1.2rem; }
  .hero h1 { font-size: 1.45rem; }
  .hero .hero-badge { font-size: .68rem; padding: .2rem .6rem; }
  .hero p { font-size: .88rem; }
  /* 卡片网格：2 列 */
  .grid, .nav-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; }
  .nav-card { padding: 1rem .7rem; gap: .4rem; }
  .nav-card h3 { font-size: .92rem; }
  .nav-card p { font-size: .72rem; line-height: 1.3; }
  .nav-card .icon, .nav-card svg { width: 30px !important; height: 30px !important; font-size: 1.5rem; }
  /* 通用容器内边距 */
  .mc-page main, .mc-page .container, .noir-container, .noir-main, .al-main,
  .cm-main, .vo-main, .bl-main, .bt-main, .lk-main, .ac-main { padding-left: .75rem !important; padding-right: .75rem !important; }
  /* 输入与按钮 */
  .btn { padding: .5rem .8rem; font-size: .85rem; }
  input[type=text], input[type=password], input[type=email], input[type=search],
  input[type=file], select, textarea { font-size: 16px !important; max-width: 100%; }
  /* 页脚 */
  .site-footer { font-size: .72rem; padding: .6rem; }
}

/* 补充变量 */
[data-theme] {
  --noir-danger: var(--red-bright, #e5534b);
}

/* ═══ 轻量动效 ═══ */
/* 卡片入场：交错淡入上浮 */
.nav-card, .panel, .card, .noir-card { animation: fxCardIn .5s ease both; }
.nav-cards .nav-card:nth-child(2) { animation-delay: .05s; }
.nav-cards .nav-card:nth-child(3) { animation-delay: .1s; }
.nav-cards .nav-card:nth-child(4) { animation-delay: .15s; }
.nav-cards .nav-card:nth-child(5) { animation-delay: .2s; }
.nav-cards .nav-card:nth-child(6) { animation-delay: .25s; }
.nav-cards .nav-card:nth-child(7) { animation-delay: .3s; }
.nav-cards .nav-card:nth-child(8) { animation-delay: .35s; }
.nav-cards .nav-card:nth-child(n+9) { animation-delay: .4s; }
@keyframes fxCardIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
/* 卡片悬停：上浮 + 光泽扫过 */
.nav-card { position: relative; overflow: hidden; }
.nav-card::before {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.nav-card:hover::before { left: 130%; }
.nav-card .icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.nav-card:hover .icon { transform: scale(1.12) rotate(-3deg); }
/* 按钮微动效 */
.btn, .noir-btn, button { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; }
/* 导航栏内按钮：hover 只变色，不变形不发光（防突兀放大+绿光） */
.navbar .btn, .navbar .noir-btn, .navbar .btn:hover, .navbar .noir-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}
.navbar .btn:hover, .navbar .noir-btn:hover { filter: brightness(1.12); }
.btn:hover, .noir-btn:hover, button:hover { filter: brightness(1.08); }
.btn:active, .noir-btn:active, button:active { transform: scale(.95); }
/* 链接下划线动画 */
a { text-decoration: none; }
.nav-links a, .nav-card h3, .back { position: relative; }
.nav-links a {
  padding: .32rem .7rem;
  border-radius: 8px;
  background-image: linear-gradient(var(--green-light, #7caf4e), var(--green-light, #7caf4e));
  background-size: 0% 2.5px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.nav-links a:hover { background-size: 100% 2.5px; }
/* 主题下拉展开微动 */
.nav-select { transition: border-color .2s ease, box-shadow .2s ease; }
.nav-select:focus { border-color: var(--green-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-light) 25%, transparent); }
/* 徽章悬浮 */
.sinh-role-badge, .badge { transition: transform .2s ease; }
.sinh-role-badge:hover, .badge:hover { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .nav-card, .panel, .card, .noir-card { animation: none; }
  .nav-card::before { display: none; }
}

/* 统一返回按钮 */
.nav-back {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .32rem .8rem; border-radius: 10px;
  background: var(--bg-card, #14171c);
  border: 1px solid var(--stone, #2a2f38);
  color: var(--text-secondary, #9ca3af);
  font-size: .8rem; text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.nav-back:hover { border-color: var(--green-light); color: var(--green-light); transform: translateX(-2px); }
.nav-back svg { flex: none; }

/* ═══ 更多交互动画 ═══ */
/* 涟漪 keyframes */
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }
/* 涟漪载体需 overflow hidden */
.btn, .noir-btn, button, .nav-card, .nav-back, .quick a { overflow: hidden; }
/* 滚动入场 */
.fx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.fx-reveal.fx-in { opacity: 1; transform: none; }
/* 输入框聚焦光晕 */
input[type=text], input[type=password], input[type=email], input[type=search], textarea, select {
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus, textarea:focus, select:focus {
  border-color: var(--green-light, #7caf4e) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-light, #7caf4e) 22%, transparent) !important;
}
/* 卡片按下微下沉 */
.nav-card:active, .panel:active, .card:active { transform: translateY(1px) scale(.985); }
/* 图片 hover 微缩放（相册/博客/头像） */
img { transition: transform .3s ease, filter .3s ease; }
.album-grid img:hover, .blog-img:hover, .al-photo img:hover, img.zoomable:hover { transform: scale(1.04); }
/* 主题切换平滑过渡（主要表面） */
body, .panel, .card, .noir-card, .nav-card, .navbar, .auth-card, .tt-panel, .tt-objpanel {
  transition: background-color .3s ease, border-color .3s ease;
}
/* 下拉/弹层展开微动 */
details.sinh-reasoning, .quick a { transition: all .25s ease; }
/* 主题下拉选项悬停 */
.nav-select option { background: var(--bg-card); }
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .fx-ripple { display: none !important; }
}

/* ═══ 交互光效 ═══ */
/* 导航链接：文字发光 + 指示条光晕 */
.nav-links a { transition: background-size .25s ease, color .25s ease, text-shadow .25s ease; }
.nav-links a:hover { text-shadow: 0 0 12px color-mix(in srgb, var(--green-light, #7caf4e) 55%, transparent); }
.nav-links a:hover::after { box-shadow: 0 0 8px var(--green-light, #7caf4e); }
/* logo 发光 */
.nav-logo { transition: text-shadow .3s ease, filter .3s ease; }
.nav-logo:hover { text-shadow: 0 0 16px color-mix(in srgb, var(--green-light, #7caf4e) 70%, transparent); filter: brightness(1.1); }
/* 通用按钮发光 */
.btn:hover, .noir-btn:hover, button:hover {
  box-shadow: 0 0 16px color-mix(in srgb, var(--green-light, #7caf4e) 40%, transparent);
}
.navbar .btn:hover, .navbar .noir-btn:hover { text-shadow: none !important; }
/* 卡片发光 */
.nav-card:hover {
  box-shadow: 0 0 26px color-mix(in srgb, var(--green-light, #7caf4e) 20%, transparent), 0 10px 30px rgba(0,0,0,.25);
}
/* 返回按钮发光 */
.nav-back:hover {
  box-shadow: 0 0 14px color-mix(in srgb, var(--green-light, #7caf4e) 45%, transparent);
}
/* 主题下拉发光 */
.nav-select { transition: border-color .2s ease, box-shadow .2s ease; }
.nav-select:hover, .nav-select:focus {
  box-shadow: 0 0 12px color-mix(in srgb, var(--green-light, #7caf4e) 35%, transparent);
}
/* 欢迎页快捷按钮发光 */
.quick a:hover {
  box-shadow: 0 0 20px color-mix(in srgb, var(--green-light, #7caf4e) 35%, transparent) !important;
}
/* 徽章发光 */
.sinh-role-badge:hover, .badge:hover {
  box-shadow: 0 0 12px color-mix(in srgb, var(--green-light, #7caf4e) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a, .nav-logo, .btn, .nav-card, .nav-back { transition: none !important; }
}

/* ═══ 模糊动画 ═══ */
/* 通用模糊入场（fx-blur-in） */
.fx-blur-in { animation: fxBlurIn .55s cubic-bezier(.22,.8,.36,1) both; }
@keyframes fxBlurIn {
  from { opacity: 0; filter: blur(10px); transform: translateY(12px) scale(.98); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
/* 卡片 hover：毛玻璃模糊增强 */
.nav-card, .panel, .card, .noir-card, .tt-panel, .auth-card {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter .35s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav-card:hover, .panel:hover, .card:hover, .noir-card:hover {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* 导航栏悬停毛玻璃 */
.navbar { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: backdrop-filter .3s ease; }
.navbar:hover { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* 图片 hover：轻微模糊 + 提亮 */
.al-photo img, .album-grid img {
  transition: transform .3s ease, filter .3s ease;
}
.al-photo img:hover, .album-grid img:hover {
  filter: blur(.6px) brightness(1.06);
}
/* 弹窗/面板模糊入场（增强） */
.sp-panel.open, .sinh-modal-box { animation: fxBlurIn .4s cubic-bezier(.22,.8,.36,1) both; }
/* 按钮 hover：文字光晕微模糊 */
.btn:hover, .noir-btn:hover { text-shadow: 0 0 10px color-mix(in srgb, var(--green-light, #7caf4e) 50%, transparent); }
/* 主题切换时内容模糊过渡 */
.theme-switching body { filter: blur(4px); transition: filter .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .fx-blur-in, .nav-card, .panel, .card, .noir-card, .al-photo img, .album-grid img { animation: none !important; transition: none !important; }
}

/* ═══ 法线视差材质 ═══ */
.fx-tilt, .nav-card, .panel, .card, .noir-card, .tt-panel, .auth-card {
  transform-style: preserve-3d;
  will-change: transform;
}
/* 鼠标跟踪光照层（nav-card 的 ::after 专属；fx-tilt 元素同理） */
.nav-card::after, .fx-tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.10), transparent 62%);
  opacity: 0; transition: opacity .3s ease; z-index: 2;
}
.nav-card:hover::after, .fx-tilt:hover::after { opacity: 1; }
/* 面板类用内嵌高光（不占用 ::after） */
.panel, .card, .noir-card, .tt-panel, .auth-card { position: relative; }
.panel::after, .card::after, .noir-card::after, .tt-panel::after, .auth-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.panel:hover::after, .card:hover::after, .noir-card:hover::after, .tt-panel:hover::after, .auth-card:hover::after { opacity: 1; }
/* 边缘立体高光 */
.nav-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.18);
}
@media (prefers-reduced-motion: reduce) {
  .fx-tilt, .nav-card, .panel, .card, .noir-card, .tt-panel, .auth-card { transform: none !important; }
  .nav-card::after, .fx-tilt::after, .panel::after, .card::after, .noir-card::after, .tt-panel::after, .auth-card::after { display: none !important; }
}

/* ═══ 浅色主题：亮色光效切换为深色（否则在浅底上不可见） ═══ */
html.sinh-light .nav-card::before {
  background: linear-gradient(105deg, transparent, rgba(0,0,0,.10), transparent);
}
html.sinh-light .nav-card::after,
html.sinh-light .fx-tilt::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,.07), transparent 62%);
}
html.sinh-light .panel::after,
html.sinh-light .card::after,
html.sinh-light .noir-card::after,
html.sinh-light .tt-panel::after,
html.sinh-light .auth-card::after {
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,.05), transparent 60%);
}
html.sinh-light .nav-card {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.10);
}

/* ═══ 浅色主题海洋背景 ═══ */
.so-wave {
  position: absolute; left: 0; bottom: 0;
  width: 200%; height: 100%;
  will-change: transform;
}
.so-w1 { animation: soFlow 16s linear infinite; }
.so-w2 { animation: soFlow 23s linear infinite reverse; opacity: .9; }
.so-w3 { animation: soFlow 30s linear infinite; opacity: .85; }
@keyframes soFlow {
  from { transform: translateX(0); }
  to { transform: translateX(-100vw); }
}
/* 海洋层整体随陀螺仪平移（移动端） */
#sinh-ocean { transition: transform .3s ease-out; }
#sinh-ocean svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 45vh; }
#sinh-ocean .so-w1 { bottom: -4vh; }
#sinh-ocean .so-w2 { bottom: -12vh; height: 55vh; }
#sinh-ocean .so-w3 { bottom: -8vh; }
@media (prefers-reduced-motion: reduce) {
  .so-wave { animation: none !important; }
}

/* ═══ 自定义主题下拉（主题变量——手机展开不再深蓝） ═══ */
.nav-sel { position: relative; }
.nav-sel-btn {
  background: var(--bg-card, #14171c); color: var(--text-primary, #e8eaed);
  border: 1px solid var(--stone, #2a2f38); border-radius: 10px;
  padding: .35rem .8rem; font-size: .8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1.4 !important; height: auto !important; min-height: 2.1em;
  transition: border-color .2s, box-shadow .2s;
}
.nav-sel-btn::after {
  content: ''; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--text-secondary, #9ca3af);
  transition: transform .2s;
}
.nav-sel-btn:hover, .nav-sel.open .nav-sel-btn {
  border-color: var(--green-light, #7caf4e);
  box-shadow: 0 0 12px color-mix(in srgb, var(--green-light, #7caf4e) 35%, transparent);
}
.nav-sel.open .nav-sel-btn::after { transform: rotate(180deg); }
.nav-sel-menu {
  position: fixed; z-index: 99999;
  display: none; flex-direction: column; gap: 2px;
  min-width: 130px; max-height: 58vh; overflow-y: auto;
  background: var(--bg-card, #14171c);
  border: 1px solid var(--stone, #2a2f38); border-radius: 12px;
  padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.nav-sel-menu.open { display: flex; animation: navSelIn .18s ease both; }
@keyframes navSelIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.nav-sel-item {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-primary, #e8eaed); text-align: left;
  padding: 8px 12px; border-radius: 8px; font-size: .8rem;
  line-height: 1.6 !important; height: auto !important;
  overflow: visible !important; white-space: nowrap;
  flex-shrink: 0; min-height: 2.2em;
  transition: background-color .15s, color .15s;
}
.nav-sel-item:hover { background: var(--bg-elevated, #1c2027); color: var(--green-light, #7caf4e); }
.nav-sel-item:active { transform: scale(.97); }
/* 滚动条主题化 */
.nav-sel-menu::-webkit-scrollbar { width: 6px; }
.nav-sel-menu::-webkit-scrollbar-thumb { background: var(--stone, #2a2f38); border-radius: 3px; }

/* ═══ 导航链接折叠菜单（手机端）═══ */
.menu-toggle {
  display: none;
  background: transparent; border: 1px solid var(--stone, #2a2f38);
  border-radius: 8px; color: var(--text-primary, #e8eaed);
  padding: 6px 9px; cursor: pointer; line-height: 0;
  transition: border-color .2s;
}
.menu-toggle:hover { border-color: var(--green-light, #7caf4e); }
@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }
  .nav-links {
    display: none !important;
    position: fixed; top: 60px; left: 10px; right: 10px; z-index: 99999;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-card, #14171c);
    border: 1px solid var(--stone, #2a2f38); border-radius: 14px;
    padding: 8px; box-shadow: 0 16px 44px rgba(0,0,0,.45);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .nav-links.open { display: flex !important; animation: navLinksIn .22s ease both; }
  .nav-links a {
    display: block; padding: .62rem .85rem; font-size: .92rem;
    border-radius: 10px; background-image: none !important;
    transition: background-color .18s, color .18s;
  }
  .nav-links a:hover { background: var(--bg-elevated, #1c2027); color: var(--green-light, #7caf4e); }
  .nav-links a:active { transform: scale(.98); }
}
@keyframes navLinksIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ═══ 导航栏自动隐藏 ═══ */
#siteNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  transition: transform .3s ease;
}
#siteNav.nav-hide { transform: translateY(-100%); }
body.has-nav { padding-top: 58px; }
@media (max-width: 768px) {
  body.has-nav { padding-top: 52px; }
}

/* ═══ 导航栏组件完整样式（子站无 style.css 时也生效）═══ */
.nav-select {
  background: var(--bg-card, #14171c);
  color: var(--text-primary, #e8eaed);
  border: 1px solid var(--stone, #2a2f38);
  border-radius: 10px;
  padding: .32rem .8rem;
  font-size: .8rem;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.nav-select:hover, .nav-select:focus {
  border-color: var(--green-light, #7caf4e);
  box-shadow: 0 0 10px color-mix(in srgb, var(--green-light, #7caf4e) 30%, transparent);
}
.nav-select option {
  background: var(--bg-card, #14171c);
  color: var(--text-primary, #e8eaed);
}
/* 账号按钮（btn-primary） */
.btn-primary {
  background: var(--green-light, #7caf4e);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .4rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter .2s;
}
.btn-primary:hover { filter: brightness(1.1); }

/* ═══ 导航栏完整样式（子站无 style.css 时也一致）═══ */
.navbar {
  background: var(--bg-card, #14171c);
  border-bottom: 1px solid var(--stone, #2a2f38);
  min-height: 58px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.navbar .container {
  display: flex; align-items: center; gap: .9rem;
  justify-content: space-between; flex-wrap: wrap;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 14px;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-primary, #e8eaed) !important;
  font-weight: 700; font-size: .95rem;
  text-decoration: none !important;
  white-space: nowrap;
}
.nav-logo:hover { color: var(--green-light, #7caf4e) !important; }
.nav-links {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: var(--text-secondary, #9ca3af) !important;
  font-size: .85rem; font-weight: 500;
  padding: .3rem .55rem;
  text-decoration: none !important;
}
.nav-links a:hover { color: var(--green-light, #7caf4e) !important; }

/* ═══ 输入框主题兜底（覆盖内联/缓存旧样式，任何页面都跟随主题） ═══ */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="file"], textarea, select {
  background: var(--bg-card, #14171c) !important;
  border: 1px solid var(--stone, #2a2f38) !important;
  color: var(--text-primary, #e8eaed) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary, #8a919c) !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary, #e8eaed) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card, #14171c) inset !important;
  transition: background-color 9999s ease-out;
}

/* ═══ 主题特色特效（花瓣/浮云/气泡/星光等） ═══ */
.fx-el { position: fixed; z-index: -1; pointer-events: none; will-change: transform; }
@keyframes fxFall { 0% { top: -8%; } 100% { top: 108%; } }
@keyframes fxSway { from { transform: translateX(-22px) rotate(-24deg); } to { transform: translateX(22px) rotate(24deg); } }
@keyframes fxDrift { from { left: -18%; } to { left: 112%; } }
@keyframes fxRise { 0% { bottom: -8%; } 100% { bottom: 108%; } }
@keyframes fxBob { from { transform: translateY(0); } to { transform: translateY(-18px); } }
@keyframes fxTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-el { display: none !important; } }

/* ═══ 全站基础样式（替代旧 style.css，统一主题） ═══ */
body {
  background: var(--bg-deep, #0b0e12);
  color: var(--text-primary, #e8eaed);
  font-family: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  min-height: 100vh;
}
.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.panel {
  background: var(--bg-card, #14171c);
  border: 1px solid var(--stone, #2a2f38);
  border-radius: 16px;
  padding: 20px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--green-light, #7caf4e);
  color: #fff;
  border: none; border-radius: 12px;
  padding: 9px 22px; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all .2s ease;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--green-light, #7caf4e) 35%, transparent); }
.btn:active { transform: scale(.96); }
.btn-secondary { background: var(--bg-elevated, #1c2027); color: var(--text-primary, #e8eaed); border: 1px solid var(--stone, #2a2f38); }
.btn-danger { background: var(--red-bright, #e5534b); }
.page-title { font-family: 'Sora', 'Noto Sans SC', sans-serif; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary) !important; margin: 1rem 0 .8rem; }
.section-label { color: var(--text-tertiary, #8a919c); font-size: .8rem; letter-spacing: .18em; margin: 1.8rem 0 .6rem; text-transform: uppercase; }
h1, h2, h3, h4 { color: var(--text-primary, #e8eaed); }
p, li { color: var(--text-secondary, #9ca3af); }
a { color: var(--green-light, #7caf4e); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-bright, #9ecb76); }

/* 导航栏滚动自动隐藏 */
.navbar.nav-hidden { transform: translateY(-100%); }

/* ═══ 鼠标拖尾 + 点击动效 ═══ */
@keyframes fxTrail { to { opacity: 0; transform: scale(.15); } }
@keyframes fxRing { to { width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 0; } }
@keyframes fxSpark { to { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx-trail, .fx-ring, .fx-spark { display: none !important; }
}