/* imd V1.4 · 双主题系统 | 深空 (dark) + 晴天 (light) */

/* ============ 字体系统 ============ */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, ul, ol,
button, input, textarea, select, label,
nav, header, main, footer, section, article, aside,
strong, em, small, figure, figcaption, blockquote {
  font-family: "Times New Roman", Times,
               "Microsoft YaHei", "微软雅黑",
               "PingFang SC", "Hiragino Sans GB",
               "Heiti SC", "WenQuanYi Micro Hei",
               sans-serif !important;
}
pre, code, kbd, samp,
.font-mono, [class*="font-mono"] {
  font-family: "Courier New", Courier,
               "SF Mono", Menlo, Consolas,
               "Microsoft YaHei", "微软雅黑",
               monospace !important;
}

/* ============ 主题变量 ============ */
/* 深空 (默认) —— 黑夜 + 白紫色粒子 */
:root,
html[data-theme="dark"] {
  --bg-page: #000000;
  --bg-body: transparent;
  --color-text: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-text-dim: #94a3b8;
  --color-text-faint: #64748b;

  --glass-bg: rgba(255,255,255,.03);
  --glass-bg-hover: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.08);
  --glass-border-hover: rgba(255,255,255,.12);

  --btn-primary-bg: #fff;
  --btn-primary-text: #030712;
  --btn-primary-shadow: rgba(255,255,255,.15);

  --btn-ghost-bg: rgba(255,255,255,.05);
  --btn-ghost-border: rgba(255,255,255,.10);
  --btn-ghost-text: #cbd5e1;
  --btn-ghost-bg-hover: rgba(255,255,255,.10);
  --btn-ghost-text-hover: #fff;

  --btn-indigo-bg: #4f46e5;
  --btn-indigo-bg-hover: #6366f1;

  --nav-bg: rgba(0,0,0,.70);
  --nav-border: rgba(255,255,255,.05);

  --grid-line: rgba(255,255,255,.03);

  --star-color-1: rgba(255,255,255,1);
  --star-color-2: rgba(200,220,255,.9);
  --star-color-3: rgba(170,200,255,.85);
  --star-color-4: rgba(180,210,255,.9);
  --star-bright: rgba(255,255,255,1);
  --meteor-color: rgba(255,255,255,1);
  --meteor-trail: rgba(200,220,255,.8);
  --meteor-glow: rgba(139,180,255,.6);

  --aurora-glow: rgba(139, 92, 246, 0.4);

  --scrollbar-thumb: #1e293b;
  --scrollbar-thumb-hover: #334155;

  --halo-1: rgba(79,70,229,.2);
  --halo-2: rgba(168,85,247,.1);

  --switch-bg: rgba(255,255,255,.05);
  --switch-border: rgba(255,255,255,.12);
  --switch-text: #e0e7ff;
  --switch-bg-hover: rgba(255,255,255,.10);

  --eyebrow-bg: rgba(99,102,241,.08);
  --eyebrow-border: rgba(99,102,241,.2);
  --eyebrow-text: #c7d2fe;
  --eyebrow-dot: #6366f1;
  --eyebrow-dot-ping: #818cf8;

  --mac-bg: #0A0A0A;
  --mac-border: rgba(255,255,255,.1);

  --shot-fade: rgba(10,10,10,.6);

  --input-bg: rgba(255,255,255,.03);
  --input-border: rgba(255,255,255,.08);
  --input-text: #f8fafc;
  --input-placeholder: #475569;
  --input-focus-border: rgba(99,102,241,.5);
  --input-focus-bg: rgba(255,255,255,.05);
  --input-focus-ring: rgba(99,102,241,.1);
  --input-label: #64748b;

  --qr-bg: rgba(255,255,255,.03);
  --qr-border: rgba(255,255,255,.08);

  --tag-bg: rgba(255,255,255,.04);
  --tag-border: rgba(255,255,255,.08);
  --tag-text: #cbd5e1;

  --shine-start: #93c5fd;
  --shine-mid: #e0e7ff;
}

/* 晴天 (白色) —— 以白色为主 (85% 白 + 蓝天白云装饰) */
html[data-theme="light"] {
  --bg-page: #fcfdff;  /* 几乎纯白,仅带极微弱的冷蓝反光 */
  --bg-body: transparent;
  --color-text: #0f172a;
  --color-text-muted: #334155;
  --color-text-dim: #475569;
  --color-text-faint: #64748b;

  --glass-bg: rgba(255,255,255,.55);
  --glass-bg-hover: rgba(255,255,255,.75);
  --glass-border: rgba(15,23,42,.08);
  --glass-border-hover: rgba(15,23,42,.15);

  --btn-primary-bg: #1e3a8a;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: rgba(30,58,138,.30);

  --btn-ghost-bg: rgba(255,255,255,.55);
  --btn-ghost-border: rgba(15,23,42,.12);
  --btn-ghost-text: #1e293b;
  --btn-ghost-bg-hover: rgba(255,255,255,.85);
  --btn-ghost-text-hover: #0f172a;

  --btn-indigo-bg: #3b82f6;
  --btn-indigo-bg-hover: #2563eb;

  --nav-bg: rgba(255,255,255,.80);
  --nav-border: rgba(15,23,42,.06);

  --grid-line: rgba(30,58,138,.015);

  /* 白天静态星点: 浅蓝本体 (不用 filter,性能优先) */
  --star-color-1: rgba(147,197,253,.70);
  --star-color-2: rgba(186,230,253,.55);
  --star-color-3: rgba(191,219,254,.50);
  --star-color-4: rgba(147,197,253,.65);
  --star-bright:  rgba(96,165,250,.75);
  /* 白天流星:白色本体 + 灰色光晕 (在白底上可见) */
  --meteor-color: rgba(100,116,139,1);       /* 流星头:中灰 (白底上可见) */
  --meteor-trail: rgba(148,163,184,.75);     /* 拖尾:浅灰 */
  --meteor-glow:  rgba(148,163,184,.45);     /* 光晕:中浅灰 */

  --aurora-glow: rgba(139, 92, 246, 0.30);

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  --halo-1: rgba(59,130,246,.12);
  --halo-2: rgba(147,197,253,.15);

  --switch-bg: rgba(255,255,255,.65);
  --switch-border: rgba(30,58,138,.15);
  --switch-text: #1e3a8a;
  --switch-bg-hover: rgba(255,255,255,.90);

  --eyebrow-bg: rgba(59,130,246,.12);
  --eyebrow-border: rgba(59,130,246,.30);
  --eyebrow-text: #1e3a8a;
  --eyebrow-dot: #3b82f6;
  --eyebrow-dot-ping: #60a5fa;

  --mac-bg: #f8fafc;
  --mac-border: rgba(15,23,42,.10);

  --shot-fade: rgba(255,255,255,.5);

  --input-bg: rgba(255,255,255,.70);
  --input-border: rgba(15,23,42,.10);
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --input-focus-border: rgba(59,130,246,.50);
  --input-focus-bg: rgba(255,255,255,.90);
  --input-focus-ring: rgba(59,130,246,.12);
  --input-label: #475569;

  --qr-bg: rgba(255,255,255,.70);
  --qr-border: rgba(15,23,42,.10);

  --tag-bg: rgba(255,255,255,.60);
  --tag-border: rgba(30,58,138,.12);
  --tag-text: #1e3a8a;

  --shine-start: #1e3a8a;
  --shine-mid: #3b82f6;
}

/* ============ 页面基础 ============ */
/* 关键: html 必须有实际背景色。当 html 透明时,负 z-index 的 fixed 元素
   会被浏览器渲染到 html 画布后面而不可见。 */
html {
  background-color: #000000;  /* 深色默认 */
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="dark"]  { background-color: #000000 !important; }
html[data-theme="light"] { background-color: #fcfdff !important; }

body {
  background-color: transparent !important;
  color: var(--color-text);
  transition: color .5s ease;
}

/* .theme-bg 现在作为"装饰渐变"层 - 叠加在 html 背景上产生渐变光晕效果
   z-index 改为 -1 与粒子同层 (都在 html 背景之上、内容之下) */
.theme-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: transparent;  /* html 已经有底色了,这里不需要重复 */
}
html[data-theme="light"] .theme-bg {
  background-image:
    /* 顶部蓝天渐变带 */
    linear-gradient(to bottom, rgba(186,230,253,.20) 0%, rgba(219,234,254,.08) 30%, transparent 60%),
    /* 散落的云朵光斑 (模拟远云) */
    radial-gradient(ellipse 400px 200px at 15% 18%, rgba(255,255,255,.70), transparent 70%),
    radial-gradient(ellipse 500px 180px at 72% 12%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 350px 160px at 88% 28%, rgba(219,234,254,.45), transparent 70%),
    radial-gradient(ellipse 450px 200px at 30% 35%, rgba(255,255,255,.30), transparent 70%),
    /* 底部淡蓝晕染 */
    radial-gradient(circle at 50% 100%, rgba(186,230,253,.10), transparent 50%) !important;
}
html[data-theme="dark"] .theme-bg {
  background-image:
    radial-gradient(ellipse at top, rgba(30,27,75,.35), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(76,29,149,.18), transparent 50%) !important;
}

/* 白天主题下,tailwind 文字/背景颜色反转 */
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] body.bg-slate-950 { background-color: transparent !important; }
html[data-theme="light"] .text-white       { color: #0f172a !important; }
html[data-theme="light"] .text-slate-200   { color: #1e293b !important; }
html[data-theme="light"] .text-slate-300   { color: #334155 !important; }
html[data-theme="light"] .text-slate-400   { color: #475569 !important; }
html[data-theme="light"] .text-slate-500   { color: #64748b !important; }
html[data-theme="light"] .text-slate-600   { color: #64748b !important; }
html[data-theme="light"] .text-indigo-300  { color: #1e40af !important; }
html[data-theme="light"] .text-indigo-400  { color: #2563eb !important; }

/* 白天下内容卡底色 + 边框反转 */
html[data-theme="light"] [class*="bg-white/"]    { background-color: rgba(255,255,255,.55) !important; }
html[data-theme="light"] .bg-slate-800           { background-color: #e0e7ff !important; color: #1e3a8a !important; }
html[data-theme="light"] .bg-slate-800:hover,
html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: #c7d2fe !important; }
html[data-theme="light"] [class*="border-white/5"],
html[data-theme="light"] [class*="border-white/10"],
html[data-theme="light"] [class*="border-white/20"] { border-color: rgba(15,23,42,.10) !important; }
html[data-theme="light"] [class*="divide-white"] > * + * { border-color: rgba(15,23,42,.08) !important; }

.bg-slate-950 { background-color: transparent !important; }

/* ============ 极光文字 ============ */
.aurora-text {
  font-weight: 800;
  background: linear-gradient(
    110deg,
    #60a5fa 0%, #a78bfa 20%, #67e8f9 40%,
    #c084fc 60%, #818cf8 80%, #60a5fa 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aurora 8s linear infinite;
  /* 用 text-shadow 代替 filter drop-shadow,性能更好 (不触发层合成) */
  text-shadow: 0 0 18px var(--aurora-glow);
  display: inline-block;
}
html[data-theme="light"] .aurora-text {
  /* 白天:更轻的发光 */
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}
@keyframes aurora {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* 栅格背景 */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

/* 玻璃 */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}
.glass-hover:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

/* Shine 动画 */
@keyframes shine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.animate-shine { background-size: 200% auto; animation: shine 8s linear infinite; }

/* Reveal */
.reveal { opacity: 1 !important; transform: none !important; }

/* ============ 星空背景 ============ */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(2px 2px at 20px 30px,      var(--star-color-1), transparent),
    radial-gradient(1.5px 1.5px at 40px 70px,  var(--star-color-2), transparent),
    radial-gradient(2px 2px at 90px 40px,      var(--star-color-1), transparent),
    radial-gradient(1.5px 1.5px at 130px 80px, var(--star-color-3), transparent),
    radial-gradient(2.5px 2.5px at 160px 120px,var(--star-bright),  transparent),
    radial-gradient(1.5px 1.5px at 200px 50px, var(--star-color-4), transparent),
    radial-gradient(2px 2px at 240px 100px,    var(--star-color-1), transparent),
    radial-gradient(1.5px 1.5px at 280px 30px, var(--star-color-4), transparent),
    radial-gradient(2px 2px at 320px 140px,    var(--star-bright),  transparent),
    radial-gradient(1.5px 1.5px at 360px 70px, var(--star-color-2), transparent),
    radial-gradient(2.5px 2.5px at 400px 110px,var(--star-bright),  transparent),
    radial-gradient(1.5px 1.5px at 440px 40px, var(--star-color-3), transparent);
  background-repeat: repeat;
  background-size: 480px 200px;
  animation: starDrift 120s linear infinite;
}
.starfield::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(3px 3px at 80px 150px,     var(--star-bright), transparent),
    radial-gradient(2.5px 2.5px at 220px 220px,var(--star-color-2), transparent),
    radial-gradient(3px 3px at 380px 180px,    var(--star-bright), transparent),
    radial-gradient(2.5px 2.5px at 520px 60px, var(--star-color-3), transparent),
    radial-gradient(4px 4px at 620px 200px,    var(--star-bright), transparent),
    radial-gradient(2.5px 2.5px at 760px 100px,var(--star-color-4), transparent);
  background-repeat: repeat;
  background-size: 800px 300px;
  animation: starTwinkle 4s ease-in-out infinite alternate, starDriftSlow 180s linear infinite;
}
.starfield::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 15px 20px,  var(--star-color-1), transparent),
    radial-gradient(1px 1px at 55px 60px,  var(--star-color-2), transparent),
    radial-gradient(1px 1px at 95px 110px, var(--star-color-1), transparent),
    radial-gradient(1px 1px at 135px 30px, var(--star-color-3), transparent),
    radial-gradient(1px 1px at 175px 90px, var(--star-color-1), transparent),
    radial-gradient(1px 1px at 215px 150px,var(--star-color-4), transparent);
  background-repeat: repeat;
  background-size: 260px 180px;
  opacity: .85;
  animation: starDriftReverse 240s linear infinite;
}
@keyframes starDrift     { from { background-position: 0 0; } to { background-position: -480px -200px; } }
@keyframes starDriftSlow { from { background-position: 0 0; } to { background-position: 800px 300px; } }
@keyframes starDriftReverse { from { background-position: 0 0; } to { background-position: 260px -180px; } }
@keyframes starTwinkle { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* 白天主题下星点改为直接在 radial-gradient 中使用有色淡蓝,
   不用 filter drop-shadow (避免整层重绘开销) */
html[data-theme="light"] .starfield {
  opacity: .75;
}

/* ============ 流星 (JS 动态生成) ============
   通过 CSS 变量承载每个流星的独立参数:
   --angle      : 倾角 (例: 35deg)
   --start-top  : 起点 Y% (例: 12%)
   --start-left : 起点 X% (例: -5%)
   --distance   : 位移距离 (例: 1600px)
   --duration   : 持续时间 (例: 1.8s)
   --delay      : 出现延迟 (例: 0.5s)
   --trail-length : 拖尾长度 (例: 140px)
   设计要点:
   - 运动方向 = 拖尾方向 = --angle 指向 (通过 rotate+translateX 保证一致)
   - 数量不固定,JS 随机生成 (2~5 条同时在飞) */
.meteor {
  position: fixed;
  top: var(--start-top, 10%);
  left: var(--start-left, -5%);
  width: 2px;
  height: 2px;
  background: var(--meteor-color);
  border-radius: 50%;
  box-shadow:
    0 0 6px var(--meteor-color),
    0 0 14px var(--meteor-glow),
    0 0 28px var(--meteor-glow);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: meteorShoot var(--duration, 1.8s) linear var(--delay, 0s) forwards;
}
/* 拖尾:沿 rotate 后的"后方"伸出一条淡色尾巴 */
.meteor::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: var(--trail-length, 140px);
  height: 1.5px;
  background: linear-gradient(
    to left,
    var(--meteor-color) 0%,
    var(--meteor-trail) 30%,
    transparent 100%
  );
  border-radius: 1px;
  filter: blur(.4px);
}
/* 运动:rotate 把坐标系转到倾角方向,再 translateX 沿该方向推进
   这样拖尾 (::before 沿 rotate 后的 X 负方向) 和运动方向完全一致 */
@keyframes meteorShoot {
  0%   { opacity: 0; transform: rotate(var(--angle)) translateX(0); }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--distance, 1600px)); }
}

/* ============ 雪花 (白天主题下替代流星) ============
   小巧的纯白雪花,无蓝色光晕,只保留极轻灰阴影做边缘定义 */
.snowflake {
  position: fixed;
  top: var(--start-top, -5%);
  left: var(--start-left, 30%);
  width: var(--size, 8px);
  height: var(--size, 8px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgba(148,163,184,.45));
  animation:
    snowFall var(--duration, 8s) linear var(--delay, 0s) forwards,
    snowSway var(--sway-duration, 3s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
/* 六角雪花 SVG - 纯白晶体 */
.snowflake::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'><line x1='50' y1='5' x2='50' y2='95'/><line x1='5' y1='50' x2='95' y2='50'/><line x1='18' y1='18' x2='82' y2='82'/><line x1='82' y1='18' x2='18' y2='82'/><path d='M50 15 L44 22 L56 22 Z M50 85 L44 78 L56 78 Z M15 50 L22 44 L22 56 Z M85 50 L78 44 L78 56 Z M28 28 L35 25 L32 32 Z M72 72 L65 75 L68 68 Z M72 28 L68 32 L65 25 Z M28 72 L32 68 L35 75 Z' fill='white'/><circle cx='50' cy='50' r='5' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: snowSpin var(--spin-duration, 5s) linear infinite;
}
@keyframes snowFall {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: var(--max-opacity, .95); }
  88%  { opacity: var(--max-opacity, .95); }
  100% { opacity: 0; transform: translateY(var(--distance, 110vh)); }
}
@keyframes snowSway {
  0%, 100% { margin-left: 0; }
  25%      { margin-left: calc(var(--sway-amp, 30px) * -1); }
  75%      { margin-left: var(--sway-amp, 30px); }
}
@keyframes snowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============ 移动抽屉 ============ */
.mobile-drawer {
  display: none;
  border-top: 1px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.mobile-drawer.open { display: block; }
.mobile-drawer a {
  display: block;
  padding: 12px 24px;
  font-size: 13px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--glass-border);
}
.mobile-drawer a:hover { color: var(--color-text); background: var(--glass-bg-hover); }

/* Mac 窗口 */
.mac-window {
  border-radius: 14px;
  border: 1px solid var(--mac-border);
  background: var(--mac-bg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), 0 0 0 1px var(--mac-border);
}
html[data-theme="light"] .mac-window {
  box-shadow: 0 20px 50px rgba(30,58,138,.15), 0 0 0 1px var(--mac-border);
}
.mac-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mac-border);
}
/* 黑夜主题下,Mac 窗口顶栏用纯白色 (产品感强烈的对比) */
html[data-theme="dark"] .mac-topbar {
  background-color: #f8fafc !important;  /* 近白 - 和黑色窗体强对比 */
  border-bottom-color: rgba(15,23,42,.10) !important;
}
/* 黑夜下顶栏内的小徽章文字和底色都要翻转成浅底深字 */
html[data-theme="dark"] .mac-topbar [class*="bg-white/"] {
  background-color: rgba(15,23,42,.06) !important;
  border-color: rgba(15,23,42,.08) !important;
}
html[data-theme="dark"] .mac-topbar .text-slate-400,
html[data-theme="dark"] .mac-topbar .text-slate-500 { color: #475569 !important; }
html[data-theme="dark"] .mac-topbar .text-indigo-300 { color: #4338ca !important; }
html[data-theme="dark"] .mac-topbar .text-indigo-500,
html[data-theme="dark"] .mac-topbar [class*="text-indigo"] { color: #4338ca !important; }
/* 黑夜顶栏里 bg-indigo-500/10 之类的小色块保持识别色但稍暗 */
html[data-theme="dark"] .mac-topbar [class*="bg-indigo-500"] {
  background-color: rgba(79,70,229,.15) !important;
  border-color: rgba(79,70,229,.25) !important;
}

/* 白天主题下,Mac 窗口顶栏用纯色 (消除半透明叠加的灰感) */
html[data-theme="light"] .mac-topbar {
  background-color: #0f172a !important;  /* 深靛蓝 */
  border-bottom-color: rgba(255,255,255,.08) !important;
}
html[data-theme="light"] .mac-topbar [class*="bg-white/"] {
  background-color: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.10) !important;
}
html[data-theme="light"] .mac-topbar .text-slate-400,
html[data-theme="light"] .mac-topbar .text-slate-500 { color: #94a3b8 !important; }
html[data-theme="light"] .mac-topbar .text-indigo-300 { color: #a5b4fc !important; }
.mac-dot { width: 12px; height: 12px; border-radius: 50%; }

/* 软件截图 */
.product-shot { background: #000; padding: 0; position: relative; }
.product-shot img { display: block; width: 100%; height: auto; }
.product-shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 60%, var(--shot-fade));
  pointer-events: none;
}

/* 按钮 */
.btn-primary {
  padding: 10px 24px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 9999px;
  font-weight: 500; font-size: 13px;
  transition: all .2s ease;
  box-shadow: 0 0 20px var(--btn-primary-shadow);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary:hover { transform: translateY(-1px); opacity: .95; }

.btn-ghost {
  padding: 10px 24px;
  background: var(--btn-ghost-bg);
  border: 1px solid var(--btn-ghost-border);
  color: var(--btn-ghost-text);
  border-radius: 9999px;
  font-weight: 500; font-size: 13px;
  transition: all .2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-ghost:hover {
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-text-hover);
}

.btn-indigo {
  padding: 10px 24px;
  background: var(--btn-indigo-bg);
  color: #fff;
  border-radius: 9999px;
  font-weight: 500; font-size: 13px;
  transition: all .2s ease;
  box-shadow: 0 6px 20px var(--btn-indigo-bg);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-indigo:hover { background: var(--btn-indigo-bg-hover); transform: translateY(-1px); }

.magnetic { transition: transform .2s cubic-bezier(.3,.7,.4,1); }

/* Eyebrow */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid var(--eyebrow-border);
  background: var(--eyebrow-bg);
  color: var(--eyebrow-text);
  font-size: 11px; font-weight: 500;
}
.eyebrow-pill .ping {
  position: relative; display: flex;
  width: 6px; height: 6px;
}
.eyebrow-pill .ping::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--eyebrow-dot-ping);
  opacity: .75;
  animation: ping 2s cubic-bezier(0,0,.2,1) infinite;
}
.eyebrow-pill .ping::after {
  content: ''; position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--eyebrow-dot);
}
@keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }

.data-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 11px;
  color: var(--color-text-dim);
}

.breadcrumb { font-size: 12px; color: var(--color-text-faint); margin-bottom: 20px; }
.breadcrumb a { color: var(--color-text-dim); }
.breadcrumb a:hover { color: var(--color-text); }

.shine-text {
  background: linear-gradient(110deg, var(--shine-start), 45%, var(--shine-mid), 55%, var(--shine-start));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shine 8s linear infinite;
}

/* 表单 */
.field-group { margin-bottom: 16px; }
.field-group label {
  display: block;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--input-label);
  margin-bottom: 8px;
}
.field-group input {
  width: 100%;
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--input-text);
  transition: all .2s ease;
}
.field-group input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 4px var(--input-focus-ring);
}
.field-group input::placeholder { color: var(--input-placeholder); }

.qr-card {
  background: var(--qr-bg);
  border: 1px solid var(--qr-border);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all .25s ease;
}
.qr-card:hover { background: var(--glass-bg-hover); transform: translateY(-2px); }
.qr-card img {
  width: 100%; max-width: 160px; height: auto;
  margin: 0 auto 12px;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.tag-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  font-size: 11px;
  color: var(--tag-text);
}

/* ============ 主题切换按钮 ============ */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 60;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--switch-border);
  background: var(--switch-bg);
  color: var(--switch-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.theme-toggle:hover {
  background: var(--switch-bg-hover);
  transform: scale(1.06);
}
.theme-toggle svg {
  width: 20px; height: 20px;
  transition: transform .5s cubic-bezier(.34,1.5,.5,1);
}
.theme-toggle:hover svg { transform: rotate(-20deg); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* 粒子 z-index */
#particles-js, #particles-js canvas { z-index: -1 !important; }
body > div[style*="z-index:1"], body > div[style*="z-index: 1"] { z-index: -1 !important; }
nav.fixed { z-index: 50; }
main, footer { position: relative; z-index: 2; }

/* 白天下 nav 和 footer */
html[data-theme="light"] nav.fixed {
  background-color: var(--nav-bg) !important;
  border-bottom-color: var(--nav-border) !important;
}
html[data-theme="light"] footer { border-top-color: var(--nav-border) !important; }
html[data-theme="light"] footer.bg-slate-950 { background-color: rgba(255,255,255,.5) !important; }
html[data-theme="light"] input::placeholder { color: var(--input-placeholder) !important; }
html[data-theme="light"] .blur-\[100px\],
html[data-theme="light"] .blur-\[120px\] { opacity: .35 !important; }

/* 白天下的大面积深色区域需要反转 */
html[data-theme="light"] .bg-slate-950\/50 { background-color: rgba(255,255,255,.5) !important; }
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-\[\#0A0B1A\],
html[data-theme="light"] .bg-\[\#050816\] { background-color: rgba(255,255,255,.75) !important; }

/* 白天下 from-slate-900 via-slate-950 to-indigo-950/40 这种渐变 (品牌暗卡) 换成浅蓝渐变 */
html[data-theme="light"] [class*="from-slate-900"][class*="to-indigo-950"] {
  background-image: linear-gradient(to bottom right, rgba(255,255,255,.85), rgba(234,242,251,.75), rgba(186,230,253,.45)) !important;
}

/* 最终 CTA 的径向渐变 (from-indigo-900/20 via-slate-950 to-slate-950) 在白天改浅 */
html[data-theme="light"] [class*="from-indigo-900\/20"] {
  background-image: radial-gradient(ellipse at center, rgba(147,197,253,.25), rgba(234,242,251,.7), rgba(234,242,251,.9)) !important;
}

/* 白天下深色文字修正:某些 h3/h4 会混在 slate 色中读不清 */
html[data-theme="light"] .from-pink-500\/10,
html[data-theme="light"] .from-emerald-500\/10,
html[data-theme="light"] .from-purple-500\/10 { opacity: .5 !important; }

/* 白天下终端黑色卡保持 (这是代码展示,本来就该黑底) —— 不动它 */

/* 白天下 Mac 窗口的软件截图外壳 */
html[data-theme="light"] .bg-\[\#0A0A0A\] {
  background-color: #0A0A0A !important; /* 保留 Mac 窗口外壳黑色,展示软件感 */
}

/* ============ 生态栏 logo 容器 ============ */
/* 黑夜主题下 logo 容器透明,让 PNG 在纯黑底上自然显示
   白天主题下维持白底,保证彩色 logo 不失真 */
.logo-chip {
  background-color: transparent;
  transition: background-color .3s ease;
}
html[data-theme="light"] .logo-chip {
  background-color: rgba(255,255,255,.90);
}

/* ============ 实战教程卡片 ============ */
.tutorial-card {
  display: block;
  padding: 1.75rem;
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.tutorial-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
}
.tutorial-card .chapter-no {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eyebrow-text);
  background: var(--eyebrow-bg);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid var(--eyebrow-border);
  margin-bottom: 14px;
}
.tutorial-card .chapter-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.3;
}
.tutorial-card .chapter-desc {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}
.tutorial-card .chapter-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(148,163,184,.10);
  color: var(--color-text-faint);
  border: 1px dashed var(--glass-border);
}
.tutorial-card.pending {
  opacity: .72;
  cursor: not-allowed;
}
.tutorial-card.pending:hover {
  transform: none;
}

/* ============ 性能:尊重系统的减少动画偏好 ============ */
@media (prefers-reduced-motion: reduce) {
  .starfield, .starfield::before, .starfield::after,
  .aurora-text, .animate-shine, .shine-text,
  .meteor, .snowflake {
    animation: none !important;
  }
  .meteor, .snowflake { display: none; }
  #particles-js { display: none !important; }
  * { transition-duration: 0ms !important; }
}