/* ============================================================
   虎迅客 · 日间模式 (Day Mode)
   白金底色 · 暖黑文字 · 金线点缀
   通过 [data-theme="day"] 选择器覆盖夜间模式样式
   ============================================================ */

/* ============================================================
   一、设计令牌覆盖
   ============================================================ */
[data-theme="day"] {
  /* --- 背景：白金暖底 --- */
  --bg: #F7F3EB;
  --bg-2: #F2EDE1;
  --surface: #FFFFFF;
  --surface-2: #FAF6EE;
  --surface-3: #EDE7D9;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-glass-2: rgba(255, 255, 255, 0.55);

  /* --- 文字：暖色黑 --- */
  --ink: #1A1510;
  --text: #3D352A;
  --muted: #8A7E6B;
  --disabled: #C5B9A4;

  /* --- 边框 --- */
  --border: rgba(60, 50, 30, 0.12);
  --border-strong: rgba(60, 50, 30, 0.20);
  --border-glow: rgba(108, 92, 231, 0.35);
  --hairline: rgba(60, 50, 30, 0.08);
  --hairline-gold: rgba(201, 169, 97, 0.40);

  /* --- 品牌（紫色微调深，保证白底对比度） --- */
  --brand: #5B4AD9;
  --brand-hover: #4A3BC4;
  --brand-active: #3D2FB0;
  --brand-2: #7C5CF6;
  --brand-text: #5B4AD9;
  --brand-soft: rgba(108, 92, 231, 0.07);
  --brand-soft-strong: rgba(108, 92, 231, 0.15);

  /* --- 极光（降低透明度，避免白底过艳） --- */
  --aurora-1: #7C5CFF;
  --aurora-2: #22D3EE;
  --aurora-3: #14E0B1;
  --aurora-1-soft: rgba(124, 92, 255, 0.06);
  --aurora-2-soft: rgba(34, 211, 238, 0.04);
  --aurora-3-soft: rgba(20, 224, 177, 0.04);
  --grad-aurora: linear-gradient(120deg, #7C5CFF 0%, #22D3EE 50%, #14E0B1 100%);

  /* --- 商务金线（白底下加深） --- */
  --gold: #B8943C;
  --gold-soft: rgba(201, 169, 97, 0.10);
  --gold-soft-strong: rgba(201, 169, 97, 0.22);

  /* --- 状态色（白底下加深保证可读） --- */
  --success: #00A886;
  --success-soft: rgba(0, 168, 134, 0.08);
  --info: #2563EB;
  --info-soft: rgba(37, 99, 235, 0.08);
  --connect: #0891B2;
  --connect-soft: rgba(8, 145, 178, 0.08);
  --warning: #D97706;
  --warning-soft: rgba(217, 119, 6, 0.08);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.08);

  /* --- 渐变 --- */
  --grad-brand: linear-gradient(135deg, #5B4AD9 0%, #7C5CF6 100%);
  --grad-brand-accent: linear-gradient(135deg, #5B4AD9 0%, #00A886 100%);
  --grad-text: linear-gradient(135deg, #1A1510 0%, #5B4AD9 50%, #B8943C 100%);
  --grad-gold: linear-gradient(135deg, #B8943C 0%, #E8D5A0 100%);
  --grad-mesh: radial-gradient(ellipse 60% 80% at 20% 10%, rgba(124,92,255,0.05), transparent 55%),
               radial-gradient(ellipse 50% 60% at 80% 20%, rgba(34,211,238,0.03), transparent 55%),
               radial-gradient(ellipse 70% 50% at 50% 100%, rgba(201,169,97,0.04), transparent 55%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 55%, rgba(124,92,255,0.03) 100%);
  --grad-border: linear-gradient(120deg, rgba(108,92,231,0.25), rgba(201,169,97,0.20), rgba(34,211,238,0.18));
  --grad-hairline: linear-gradient(90deg, transparent, rgba(108,92,231,0.12) 25%, rgba(201,169,97,0.12) 50%, rgba(34,211,238,0.12) 75%, transparent);
  --grad-card-border: linear-gradient(150deg, rgba(60,50,30,0.10), rgba(60,50,30,0.02) 38%, rgba(124,92,255,0.06) 70%, rgba(34,211,238,0.06));

  /* --- 阴影（更浅更暖） --- */
  --shadow-sm: 0 1px 3px rgba(60, 50, 30, 0.06);
  --shadow-md: 0 6px 24px rgba(60, 50, 30, 0.08);
  --shadow-lg: 0 16px 56px rgba(60, 50, 30, 0.10);
  --shadow-xl: 0 28px 90px rgba(60, 50, 30, 0.12);
  --shadow-glow: 0 0 56px rgba(108, 92, 231, 0.08);
  --shadow-brand: 0 8px 32px rgba(91, 74, 217, 0.20);
  --shadow-gold: 0 4px 24px rgba(201, 169, 97, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-glass: 0 12px 44px rgba(60, 50, 30, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- 玻璃态模糊（白底减弱） --- */
  --blur-sm: blur(10px) saturate(120%);
  --blur: blur(18px) saturate(130%);
  --blur-lg: blur(26px) saturate(135%);
  --blur-xl: blur(44px) saturate(140%);
}

/* ============================================================
   二、全局氛围背景覆盖
   ============================================================ */

/* 极光流体 → 暖金淡光 */
[data-theme="day"] body::before {
  background:
    radial-gradient(46% 46% at 14% 18%, rgba(124, 92, 255, 0.10) 0%, transparent 68%),
    radial-gradient(38% 38% at 84% 72%, rgba(34, 211, 238, 0.07) 0%, transparent 68%),
    radial-gradient(32% 32% at 62% 12%, rgba(201, 169, 97, 0.08) 0%, transparent 62%),
    radial-gradient(30% 30% at 24% 88%, rgba(201, 169, 97, 0.05) 0%, transparent 62%);
  opacity: 0.7;
}

/* 精密网格 → 暖灰细线 + 中心微亮 */
[data-theme="day"] body::after {
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 252, 245, 0.30) 0%, transparent 72%),
    linear-gradient(to right, rgba(60, 50, 30, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60, 50, 30, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 58px 58px, 58px 58px;
}

/* 胶片噪点 → 降低透明度 */
[data-theme="day"] html::after {
  opacity: 0.02;
}

/* Canvas 粒子网络 → 降低存在感 */
[data-theme="day"] .bg-scene {
  opacity: 0.30;
}

/* 滚动条 */
[data-theme="day"] ::-webkit-scrollbar-track {
  background: var(--bg-2);
}
[data-theme="day"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(108, 92, 231, 0.40), rgba(34, 211, 238, 0.35));
  border: 2px solid var(--bg-2);
}

/* 选区 */
[data-theme="day"] ::selection {
  background: rgba(108, 92, 231, 0.20);
  color: #1A1510;
}

/* ============================================================
   三、页头导航覆盖
   ============================================================ */
[data-theme="day"] .site-header {
  background: linear-gradient(180deg, rgba(247, 243, 235, 0.82) 0%, rgba(247, 243, 235, 0.55) 100%);
}
[data-theme="day"] .site-header::before {
  background: linear-gradient(90deg, transparent, rgba(201,169,97,0.35) 30%, rgba(108,92,231,0.30) 50%, rgba(34,211,238,0.25) 70%, transparent);
  opacity: 0.6;
}
[data-theme="day"] .site-header.scrolled {
  background: rgba(247, 243, 235, 0.92);
  box-shadow: 0 4px 24px rgba(60, 50, 30, 0.06);
}

/* 移动端导航抽屉 */
[data-theme="day"] .nav {
  background: rgba(247, 243, 235, 0.98);
}

/* ============================================================
   四、页脚覆盖
   ============================================================ */
[data-theme="day"] .site-footer {
  background: linear-gradient(180deg, rgba(250, 246, 238, 0.90) 0%, rgba(242, 237, 225, 0.98) 100%);
}
[data-theme="day"] .site-footer::after {
  background: radial-gradient(ellipse at center, rgba(124,92,255,0.06), transparent 70%);
}

/* ============================================================
   五、卡片 / 表面硬编码深色覆盖
   ============================================================ */

/* 通用卡片 */
[data-theme="day"] .card,
[data-theme="day"] .product-card {
  background-color: rgba(255, 255, 255, 0.80);
}

/* 去毛玻璃后写死不透明深底的组件
   ------------------------------------------------------------
   这些组件在 components.css / pages.css 里把毛玻璃
   （var(--surface-glass) + backdrop-filter）替换成了写死的
   background: rgba(16, 21, 43, 0.86)，日间模式下会保持深色块、
   压住 --ink 暖黑文字导致不可读。此处显式还原浅底（与 .card 一致）。
   ⚠️ 只覆盖 background-color，不碰上方卡片聚光的 background-image。 */
[data-theme="day"] .flow__step,
[data-theme="day"] .faq-item,
[data-theme="day"] .audio-card,
[data-theme="day"] .quote,
[data-theme="day"] .filter,
[data-theme="day"] .feature-block,
[data-theme="day"] .points-list li,
[data-theme="day"] .aside-nav,
[data-theme="day"] .pager a,
[data-theme="day"] .contact-item {
  background-color: rgba(255, 255, 255, 0.80);
}

/* 架构区 */
[data-theme="day"] .arch {
  background: rgba(255, 255, 255, 0.72);
}
[data-theme="day"] .arch__layer {
  background: rgba(250, 246, 238, 0.75);
}
[data-theme="day"] .arch__layer:hover {
  background: rgba(250, 246, 238, 0.95);
}
[data-theme="day"] .arch__state {
  background: rgba(250, 246, 238, 0.80);
}
[data-theme="day"] .arch__state:hover {
  background: rgba(250, 246, 238, 1);
}

/* 智能体层 — 日间模式玻璃质感适配 */
[data-theme="day"] .arch__node--model {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text-day, #3D352A);
}
[data-theme="day"] .arch__node--model:hover {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
[data-theme="day"] .arch__node[data-model] {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text-day, #3D352A);
}

/* 交付流程 */
[data-theme="day"] .phase {
  background: rgba(255, 255, 255, 0.78);
}

/* 平台能力 */
[data-theme="day"] .platform__flow-step {
  background: rgba(250, 246, 238, 0.80);
}
[data-theme="day"] .dim {
  background: rgba(250, 246, 238, 0.80);
}

/* 卡片光标聚光 → 暖光 */
[data-theme="day"] .card,
[data-theme="day"] .metric,
[data-theme="day"] .phase,
[data-theme="day"] .dim,
[data-theme="day"] .news-card,
[data-theme="day"] .case-card,
[data-theme="day"] .product-card,
[data-theme="day"] .contact-item,
[data-theme="day"] .feature-block,
[data-theme="day"] .audio-card,
[data-theme="day"] .faq-item,
[data-theme="day"] .quote,
[data-theme="day"] .form-card,
[data-theme="day"] .aside-nav,
[data-theme="day"] .aside-cta,
[data-theme="day"] .points-list li,
[data-theme="day"] .pager a,
[data-theme="day"] .proof,
[data-theme="day"] .capability__dialog,
[data-theme="day"] .arch,
[data-theme="day"] .softcta,
[data-theme="day"] .platform__flow-step,
[data-theme="day"] .arch__layer,
[data-theme="day"] .arch__state,
[data-theme="day"] .filter {
  background-image:
    radial-gradient(460px circle at var(--mx) var(--my), rgba(124, 92, 255, 0.06), rgba(34, 211, 238, 0.02) 42%, transparent 66%);
}

/* 卡片悬浮阴影 */
[data-theme="day"] .card:hover,
[data-theme="day"] .product-card:hover,
[data-theme="day"] .news-card:hover,
[data-theme="day"] .contact-item:hover,
[data-theme="day"] .feature-block:hover,
[data-theme="day"] .audio-card:hover {
  box-shadow: var(--shadow-lg), 0 0 60px rgba(124, 92, 255, 0.08);
  border-color: rgba(108, 92, 231, 0.25);
}

/* ============================================================
   六、按钮覆盖
   ============================================================ */
[data-theme="day"] .btn--primary {
  background: linear-gradient(135deg, #5B4AD9 0%, #6C5CE7 45%, #7C5CF6 100%);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0 8px 28px rgba(91, 74, 217, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
[data-theme="day"] .btn--primary:hover {
  box-shadow: 0 14px 40px rgba(124, 92, 255, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
[data-theme="day"] .btn--ghost {
  background: rgba(60, 50, 30, 0.04);
  border-color: rgba(60, 50, 30, 0.18);
  color: var(--ink);
}
[data-theme="day"] .btn--ghost:hover {
  background: rgba(108, 92, 231, 0.08);
  border-color: rgba(108, 92, 231, 0.40);
  color: var(--brand-text);
  box-shadow: 0 0 40px rgba(124, 92, 255, 0.12);
}

/* ============================================================
   七、Hero 覆盖
   ============================================================ */
[data-theme="day"] .hero::before {
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(124, 92, 255, 0.07) 0deg,
    rgba(34, 211, 238, 0.04) 90deg,
    rgba(201, 169, 97, 0.06) 170deg,
    rgba(201, 169, 97, 0.04) 240deg,
    rgba(124, 92, 255, 0.07) 360deg);
}
[data-theme="day"] .hero__bg {
  opacity: 0.07;
  filter: saturate(0.8) contrast(1.02) brightness(1.1);
}
[data-theme="day"] .hero__bg::after {
  background:
    linear-gradient(180deg, rgba(247,243,235,0.40) 0%, transparent 32%, transparent 58%, var(--bg) 100%),
    linear-gradient(90deg, rgba(247,243,235,0.60) 0%, rgba(247,243,235,0.15) 46%, transparent 70%);
}
[data-theme="day"] .hero__title {
  background: linear-gradient(120deg, #1A1510 0%, #3D352A 30%, #5B4AD9 62%, #B8943C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(108, 92, 255, 0.12));
}
[data-theme="day"] .hero__label {
  background: rgba(108, 92, 231, 0.08);
  border-color: rgba(108, 92, 231, 0.20);
  box-shadow: 0 0 32px rgba(124, 92, 255, 0.08);
}
[data-theme="day"] .hero__core-hud {
  background: rgba(255, 255, 255, 0.65);
}
[data-theme="day"] .hero__particle {
  background: rgba(124, 92, 255, 0.6);
  box-shadow: 0 0 8px rgba(124,92,255,0.3), 0 0 18px rgba(201,169,97,0.2);
}

/* ============================================================
   八、指标 / 数字渐变覆盖
   ============================================================ */
[data-theme="day"] .metric__value {
  background: linear-gradient(120deg, #1A1510 0%, #5B4AD9 40%, #0891B2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(108, 92, 231, 0.15));
}
[data-theme="day"] .metric:hover .metric__value {
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, 0.20));
}
[data-theme="day"] .proof__value {
  background: linear-gradient(120deg, #1A1510 0%, #5B4AD9 50%, #B8943C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* ============================================================
   九、图标容器覆盖
   ============================================================ */
[data-theme="day"] .card__icon,
[data-theme="day"] .product-card__icon,
[data-theme="day"] .contact-item__icon,
[data-theme="day"] .step__num {
  background: linear-gradient(145deg, rgba(108, 92, 231, 0.10), rgba(34, 211, 238, 0.05));
  border-color: rgba(108, 92, 231, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ============================================================
   十、表单控件覆盖
   ============================================================ */
[data-theme="day"] .input,
[data-theme="day"] .textarea,
[data-theme="day"] .select,
[data-theme="day"] .cs-input {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(60, 50, 30, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--ink);
}
[data-theme="day"] .input::placeholder,
[data-theme="day"] .textarea::placeholder {
  color: var(--disabled);
}
[data-theme="day"] .input:hover,
[data-theme="day"] .textarea:hover,
[data-theme="day"] .select:hover {
  border-color: rgba(60, 50, 30, 0.25);
}
[data-theme="day"] .input:focus,
[data-theme="day"] .textarea:focus,
[data-theme="day"] .select:focus {
  border-color: rgba(108, 92, 231, 0.60);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.10), 0 0 24px rgba(108, 92, 255, 0.10);
  background: rgba(255, 255, 255, 0.95);
}

/* ============================================================
   十一、内页头图覆盖
   ============================================================ */
[data-theme="day"] .page-hero::before {
  background:
    var(--grad-mesh),
    radial-gradient(rgba(108, 92, 231, 0.06) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px;
  opacity: 0.6;
}
[data-theme="day"] .page-hero::after {
  background:
    radial-gradient(ellipse at center, rgba(124, 92, 255, 0.08), transparent 66%),
    radial-gradient(ellipse 60% 60% at 70% 40%, rgba(34, 211, 238, 0.05), transparent 66%);
}
[data-theme="day"] .page-hero__title {
  background: linear-gradient(120deg, #1A1510 0%, #3D352A 38%, #5B4AD9 78%, #B8943C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(108, 92, 255, 0.10));
}

/* 区块背景图 - 日间模式：新中性银色图适当提亮 */
[data-theme="day"] .section-bg__img {
  opacity: 0.06;
  filter: saturate(0.8) contrast(1.02) brightness(1.1);
}
/* 内页头图背景 - 日间模式：头图以文字为主，需比首页区块更可见；
   同时保持浅色底 + 深色标题的对比，不发灰。 */
[data-theme="day"] .page-hero .section-bg__img {
  opacity: 0.14;
  filter: saturate(0.85) contrast(1.02) brightness(1.04);
}
[data-theme="day"] .section-bg__img::after {
  background: linear-gradient(180deg, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%);
}
/* 日间扫光：改为独立子层后的取色（取自旧版第二条渐变） */
[data-theme="day"] .section-bg__sheen {
  background: linear-gradient(115deg, transparent 44%, rgba(255,250,240,0.20) 50%, transparent 56%);
}

/* 地图 — 底图已改为中性浅色（OpenStreetMap 标准样式），
   明暗两种主题下均保持原色，故此处不再需要 invert/hue-rotate 反相提亮。
   filter 必须保持 none：一旦给 .map-static img 加任何 filter，
   都会重新让底图受主题影响，并连带压掉定位图钉的混色效果。 */
[data-theme="day"] .map-static img {
  filter: none;
}
[data-theme="day"] .map-wrap {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="day"] .map-info,
/* 地图下方导航链接条：与 .map-info 同为写死深底，日间一并还原 */
[data-theme="day"] .map-links {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.06);
}

/* ============================================================
   十二、软性 CTA
   ============================================================ */
[data-theme="day"] .softcta {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.06), rgba(0, 168, 134, 0.03));
}
[data-theme="day"] .softcta::after {
  background: radial-gradient(circle, rgba(108, 92, 231, 0.04), transparent 70%);
}

/* ============================================================
   十三、代码块
   ============================================================ */
[data-theme="day"] code {
  background: var(--surface-2);
  color: #5B4AD9;
}

/* ============================================================
   十四、咨询弹窗覆盖
   ============================================================ */
[data-theme="day"] .consult-popup__backdrop {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(108,92,231,0.08), rgba(247,243,235,0.65) 60%);
}
[data-theme="day"] .consult-popup__card {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-xl), 0 0 56px rgba(108, 92, 231, 0.08);
}
[data-theme="day"] .consult-popup__card::after {
  background: radial-gradient(circle, rgba(108,92,231,0.06), transparent 65%);
}
[data-theme="day"] .consult-popup__title {
  background: linear-gradient(135deg, #1A1510 0%, #5B4AD9 50%, #B8943C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   十五、在线客服覆盖
   ============================================================ */
[data-theme="day"] .cs-panel {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-xl), 0 0 56px rgba(108, 92, 231, 0.08);
}
[data-theme="day"] .cs-panel__head {
  background: linear-gradient(135deg, rgba(108,92,231,0.05), transparent);
}
[data-theme="day"] .cs-panel__close {
  background: rgba(250, 246, 238, 0.60);
  border-color: var(--border);
}
[data-theme="day"] .cs-input-row {
  background: rgba(250, 246, 238, 0.60);
}
[data-theme="day"] .cs-toolbar {
  background: rgba(250, 246, 238, 0.60);
}
[data-theme="day"] .cs-lead {
  background: rgba(237, 231, 217, 0.60);
}
[data-theme="day"] .cs-msg--ai .cs-msg__bubble {
  background: rgba(250, 246, 238, 0.80);
  color: var(--ink);
}
[data-theme="day"] .cs-fab__label {
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
}

/* ============================================================
   十六、返回顶部 / 移动端 CTA
   ============================================================ */
[data-theme="day"] .back-top {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(108, 92, 231, 0.25);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
[data-theme="day"] .back-top:hover {
  box-shadow: 0 14px 40px rgba(124, 92, 255, 0.15);
}
[data-theme="day"] .mobile-cta {
  background: rgba(247, 243, 235, 0.97);
}

/* ============================================================
   十七、关于页覆盖
   ============================================================ */
[data-theme="day"] .about-hero__overlay {
  background: linear-gradient(90deg, rgba(247,243,235,0.92), rgba(247,243,235,0.30));
}

/* ============================================================
   十八、对话气泡覆盖
   ============================================================ */
[data-theme="day"] .bubble--ai {
  background: rgba(255, 255, 255, 0.70);
  color: var(--ink);
}

/* ============================================================
   十九、导航 toggle（移动端）
   ============================================================ */
[data-theme="day"] .nav-toggle {
  background: rgba(255, 255, 255, 0.60);
  color: var(--ink);
}

/* ============================================================
   二十、主题切换按钮
   ============================================================ */
.theme-toggle {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 150;
  width: 44px;
  height: 64px;
  border: 1px solid var(--border-strong);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--surface-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.theme-toggle:hover {
  width: 52px;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.12);
}
.theme-toggle__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--brand-text);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.theme-toggle:hover .theme-toggle__icon {
  transform: rotate(20deg);
}
/* 太阳图标（日间模式时显示） */
.theme-toggle__sun { display: none; }
/* 月亮图标（夜间模式时显示） */
.theme-toggle__moon { display: block; }
[data-theme="day"] .theme-toggle__sun { display: block; }
[data-theme="day"] .theme-toggle__moon { display: none; }

/* 移动端调整 */
@media (max-width: 768px) {
  .theme-toggle {
    width: 38px;
    height: 56px;
  }
  .theme-toggle:hover {
    width: 44px;
  }
  .theme-toggle__icon {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================
   二十一、夜间模式图片适配
   ------------------------------------------------------------
   品牌 LOGO 用「双版本透明底 PNG + display 切换」适配两套主题
   （2026-09-21 换新 LOGO 时由 invert 反色改为切图）：
   · 夜间（默认，无 data-theme）：logo-night.png —— 提亮版，
     蓝紫文字在深色底上更清晰
   · 日间（[data-theme="day"]）：logo.png —— 原色版
   旧做法 invert + hue-rotate 对蓝紫→橙的彩色渐变会失真，故弃用。
   二维码保留原色不可反转（影响扫描），改加白底+边框。
   ============================================================ */

/* 品牌 LOGO：默认（夜间）显示提亮版，日间切到原色版 */
.brand__logo--day,
[data-theme="day"] .brand__logo--night {
  display: none;
}
[data-theme="day"] .brand__logo--day {
  display: block;
}

/* 夜间模式：二维码加白底+边框，确保可扫描 */
:root:not([data-theme="day"]) .footer__qr img {
  background: #fff;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* 日间模式：二维码恢复正常 */
[data-theme="day"] .footer__qr img {
  background: none;
  padding: 0;
}