/* DJB · 双主题赛博朋克层（Day / Night）
   配色唯一口径：design/15-DJB-Aurora-Signal-配色修订-v1.md §1.1（紫墨夜色 / 藕粉晨光）
   机制唯一口径：ops/uta/DESIGN-DUAL-THEME-2026-11-01.md（两套结构/动效完全相同，只换颜色与光晕强度）
   载入顺序：最后一个（用 html:root 提权，保证盖住各页自己的 :root）。
   新增：--surface-3 / --violet-2,3 / --violet-text / --pink,2,3 / --pink-text / --selection
        / --brand-grad / --accent-grad / --glow-3（紫色=第二强调，粉色=第三强调，均不承担状态语义）。 */

/* ── Night（原型夜色，默认） ─────────────────────────────────────── */
html:root {
  color-scheme: dark;
  /* 底色与表面（紫墨夜色） */
  --bg: #0a0915;
  --bg-2: #111020;
  --surface: #151327;
  --surface-2: #1d1933;
  --surface-3: #241f3d;
  --ink: #f1edfb;
  --ink-2: #d3cce8;
  --muted: #a49bc0;
  --line: rgba(198, 183, 255, .12);
  --line-2: rgba(198, 183, 255, .22);
  --line-3: rgba(198, 183, 255, .50);
  /* 主色：温和玉绿（不再荧光） */
  --mint: #8fd9be;
  --mint-2: #b4ead6;
  --mint-3: rgba(143, 217, 190, .14);
  --mint-strong: #c9f5e5;
  --mint-text: #a9e8d3;
  --mint-hover: #a5e4cc;
  --btn-ink: #08221b;
  --on-mint: #08221b;
  --lime: #c6dd9b;
  --cyan: #7fcbe8;
  --cyan-text: #a5ddf1;
  /* 第二强调：紫 */
  --violet: #b9a2ff;
  --violet-2: #d4c7ff;
  --violet-3: rgba(185, 162, 255, .14);
  --violet-text: #cdbdff;
  /* 第三强调：粉（非状态） */
  --pink: #f4a6d7;
  --pink-2: #f9c9e4;
  --pink-3: rgba(244, 166, 215, .13);
  --pink-text: #f8c4e2;
  /* 状态色：等待=琥珀 / 真失败=珊瑚（不参与紫粉轮换） */
  --amber: #f0c56b;
  --amber-text: #f7dca6;
  --red: #ff9b93;
  --red-text: #ffc4bf;
  --red-3: rgba(255, 155, 147, .14);
  --glow: rgba(143, 217, 190, .30);
  --glow-2: rgba(185, 162, 255, .28);
  --glow-3: rgba(244, 166, 215, .22);
  --grid-line: rgba(185, 162, 255, .08);
  --ambient-1: rgba(185, 162, 255, .20);
  --ambient-2: rgba(244, 166, 215, .15);
  --ambient-3: rgba(143, 217, 190, .12);
  --selection: rgba(244, 166, 215, .30);
  --brand-grad: linear-gradient(120deg, #8fd9be 0%, #b9a2ff 58%, #f4a6d7 100%);
  --accent-grad: linear-gradient(90deg, #8fd9be, #b9a2ff 55%, #f4a6d7);
  --shadow: 0 1px 0 rgba(198, 183, 255, .06), 0 18px 48px rgba(0, 0, 0, .48);
  --login-panel-a: #0b0918;
  --login-panel-b: #3a2a6b;
  --login-panel-ink: #f1edfb;
}

/* ── Day（浅色赛博：结构同夜色，只提明度、降光晕） ───────────────── */
html:root[data-theme="day"] {
  color-scheme: light;
  /* 底色与表面（藕粉晨光） */
  --bg: #f5f1fa;
  --bg-2: #ede7f6;
  --surface: #ffffff;
  --surface-2: #faf7fe;
  --surface-3: #f3edfa;
  --ink: #1b1530;
  --ink-2: #3c3457;
  --muted: #6b6385;
  --line: rgba(60, 40, 110, .14);
  --line-2: rgba(60, 40, 110, .24);
  --line-3: rgba(60, 40, 110, .55);
  /* 主色：温和玉绿 */
  --mint: #2f7d66;
  --mint-2: #3fa184;
  --mint-3: #ddf3ea;
  --mint-strong: #256b57;
  --mint-text: #256b57;
  --mint-hover: #2a735e;
  --btn-ink: #ffffff;
  --on-mint: #ffffff;
  --lime: #5f7f3a;
  --cyan: #2f7f9e;
  --cyan-text: #2a6e8c;
  /* 第二强调：紫 */
  --violet: #6a4fbf;
  --violet-2: #8a6fe0;
  --violet-3: #eee8ff;
  --violet-text: #5b3fa8;
  /* 第三强调：粉（非状态） */
  --pink: #b93c7e;
  --pink-2: #d967a6;
  --pink-3: #fbe7f3;
  --pink-text: #a83270;
  /* 状态色 */
  --amber: #9a6a16;
  --amber-text: #8a5d12;
  --red: #b94f47;
  --red-text: #a84540;
  --red-3: #fbeae8;
  --glow: rgba(47, 125, 102, .20);
  --glow-2: rgba(106, 79, 191, .16);
  --glow-3: rgba(185, 60, 126, .12);
  --grid-line: rgba(106, 79, 191, .10);
  --ambient-1: rgba(106, 79, 191, .16);
  --ambient-2: rgba(185, 60, 126, .12);
  --ambient-3: rgba(47, 125, 102, .12);
  --selection: rgba(185, 60, 126, .16);
  --brand-grad: linear-gradient(120deg, #2f7d66 0%, #6a4fbf 58%, #b93c7e 100%);
  --accent-grad: linear-gradient(90deg, #2f7d66, #6a4fbf 55%, #b93c7e);
  --shadow: 0 1px 2px rgba(27, 21, 48, .06), 0 12px 32px rgba(27, 21, 48, .08);
  --login-panel-a: #1b1530;
  --login-panel-b: #4a3570;
  --login-panel-ink: #f7f3ff;
}

/* 未显式选择时跟随系统：浅色系统上等同 day 一组值（同样一套结构） */
@media (prefers-color-scheme: light) {
  html:root:not([data-theme]):not([data-surface="public"]) {
    color-scheme: light;
    /* 与 html:root[data-theme="day"] 同一组值（藕粉晨光） */
    --bg: #f5f1fa;
    --bg-2: #ede7f6;
    --surface: #ffffff;
    --surface-2: #faf7fe;
    --surface-3: #f3edfa;
    --ink: #1b1530;
    --ink-2: #3c3457;
    --muted: #6b6385;
    --line: rgba(60, 40, 110, .14);
    --line-2: rgba(60, 40, 110, .24);
    --line-3: rgba(60, 40, 110, .55);
    --mint: #2f7d66;
    --mint-2: #3fa184;
    --mint-3: #ddf3ea;
    --mint-strong: #256b57;
    --mint-text: #256b57;
    --mint-hover: #2a735e;
    --btn-ink: #ffffff;
    --on-mint: #ffffff;
    --lime: #5f7f3a;
    --cyan: #2f7f9e;
    --cyan-text: #2a6e8c;
    --violet: #6a4fbf;
    --violet-2: #8a6fe0;
    --violet-3: #eee8ff;
    --violet-text: #5b3fa8;
    --pink: #b93c7e;
    --pink-2: #d967a6;
    --pink-3: #fbe7f3;
    --pink-text: #a83270;
    --amber: #9a6a16;
    --amber-text: #8a5d12;
    --red: #b94f47;
    --red-text: #a84540;
    --red-3: #fbeae8;
    --glow: rgba(47, 125, 102, .20);
    --glow-2: rgba(106, 79, 191, .16);
    --glow-3: rgba(185, 60, 126, .12);
    --grid-line: rgba(106, 79, 191, .10);
    --ambient-1: rgba(106, 79, 191, .16);
    --ambient-2: rgba(185, 60, 126, .12);
    --ambient-3: rgba(47, 125, 102, .12);
    --selection: rgba(185, 60, 126, .16);
    --brand-grad: linear-gradient(120deg, #2f7d66 0%, #6a4fbf 58%, #b93c7e 100%);
    --accent-grad: linear-gradient(90deg, #2f7d66, #6a4fbf 55%, #b93c7e);
    --shadow: 0 1px 2px rgba(27, 21, 48, .06), 0 12px 32px rgba(27, 21, 48, .08);
    --login-panel-a: #1b1530;
    --login-panel-b: #4a3570;
    --login-panel-ink: #f7f3ff;
  }
}

html:root {
  background-color: var(--bg);
  color: var(--ink);
}

body {
  background-color: var(--bg);
  color: var(--ink);
}

/* ── 动效 M1–M13 ─────────────────────────────────────────────────── */
@keyframes djb-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes djb-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes djb-rotate-rev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes djb-pulse {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@keyframes djb-drift-a {
  0%, 100% { transform: translate3d(-2%, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, -3%, 0) scale(1.08); }
}

@keyframes djb-drift-b {
  0%, 100% { transform: translate3d(2%, 1%, 0) scale(1.05); }
  50%      { transform: translate3d(-3%, 2%, 0) scale(.96); }
}

@keyframes djb-drift-c {
  0%, 100% { transform: translate3d(0, 2%, 0) scale(.98); }
  50%      { transform: translate3d(2%, -2%, 0) scale(1.06); }
}

@keyframes djb-grid-slide {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}

@keyframes djb-sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%) skewX(-18deg); }
}

@keyframes djb-reveal-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes djb-page-in {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes djb-scan {
  from { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  to   { transform: scaleX(1); opacity: 0; }
}

@keyframes djb-shimmer {
  from { background-position: -180% 0; }
  to   { background-position: 180% 0; }
}

@keyframes djb-blink {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: .25; }
  100% { opacity: 1; }
}

/* M11 页面进入：主内容整体淡入 + 顶部 2px 扫描线 */
main, .site-main, .console-main, .admin-main {
  animation: djb-page-in 280ms cubic-bezier(.22, .61, .36, 1) both;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 90;
  background: var(--accent-grad);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  transform-origin: left center;
  animation: djb-scan 700ms ease-out both;
  pointer-events: none;
}

/* M3 环境光斑：三团缓慢漂移的径向光 */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient::before,
.ambient::after,
.ambient > i {
  content: "";
  position: absolute;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  filter: blur(28px);
}

.ambient::before {
  top: -26vw;
  left: -12vw;
  background: radial-gradient(circle, var(--ambient-1), transparent 62%);
  animation: djb-drift-a 34s ease-in-out infinite;
}

.ambient::after {
  right: -18vw;
  top: 8vh;
  background: radial-gradient(circle, var(--ambient-2), transparent 64%);
  animation: djb-drift-b 41s ease-in-out infinite;
}

.ambient > i {
  left: 26vw;
  bottom: -28vw;
  background: radial-gradient(circle, var(--ambient-3), transparent 66%);
  animation: djb-drift-c 26s ease-in-out infinite;
}

/* M4 网格背景 */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  animation: djb-grid-slide 18s linear infinite;
}

/* M1 顶栏 ticker（放在页头下方，纯 CSS 无缝滚动；同一段内容复制两遍） */
.ticker {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: djb-marquee 42s linear infinite;
  will-change: transform;
}

.ticker-track > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.ticker-track > span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--glow-3);
  animation: djb-pulse 2.4s ease-in-out infinite;
}

/* M2 Hero 轨道图：三层环 + 节点，纯 CSS */
.orbit {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.orbit-ring:nth-child(2) { inset: 12%; animation: djb-rotate 24s linear infinite; border-style: dashed; }
.orbit-ring:nth-child(3) { inset: 24%; animation: djb-rotate-rev 36s linear infinite; }
.orbit-ring:nth-child(4) { inset: 36%; animation: djb-rotate 56s linear infinite; border-color: var(--glow); }

.orbit-core {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 22px;
  letter-spacing: .1em;
  color: var(--ink);
  background: radial-gradient(circle at 40% 35%, var(--surface-2), var(--surface) 62%);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0), 0 0 60px var(--glow);
}

.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px var(--glow);
  animation: djb-pulse 3.2s ease-in-out infinite;
}

/* 三个节点 = 玉绿 / 紫 / 粉三档强调（状态语义不在这里，状态点走 .status-dot 的绿） */
.orbit-dot:nth-of-type(1) { top: 8%; left: 46%; background: var(--mint); box-shadow: 0 0 12px var(--glow); }
.orbit-dot:nth-of-type(2) { top: 58%; right: 6%; animation-delay: .8s; background: var(--violet); box-shadow: 0 0 12px var(--glow-2); }
.orbit-dot:nth-of-type(3) { bottom: 10%; left: 18%; animation-delay: 1.6s; background: var(--pink); box-shadow: 0 0 12px var(--glow-3); }

/* M7/M10 模块切入 */
.reveal,
.section,
.card {
  animation: djb-reveal-up 520ms cubic-bezier(.22, .61, .36, 1) both;
}

.reveal:nth-of-type(2) { animation-delay: 60ms; }
.reveal:nth-of-type(3) { animation-delay: 120ms; }
.reveal:nth-of-type(4) { animation-delay: 180ms; }
.reveal:nth-of-type(5) { animation-delay: 240ms; }

/* M5 卡片 hover / focus 光晕与位移 */
.card,
.promise-card,
.kpi {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card:hover,
.promise-card:hover,
.kpi:hover {
  transform: translate3d(0, -2px, 0);
  border-color: var(--line-2);
  box-shadow: var(--shadow), 0 0 0 1px var(--glow-2);
}

.card:focus-within {
  box-shadow: var(--shadow), 0 0 0 2px var(--glow);
}

/* M6 主按钮斜向扫光 */
.btn.primary,
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn.primary::after,
.btn-primary::after {
  content: "";
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: djb-sheen 2.6s ease-in-out infinite;
}

/* M8 状态点 */
.status-dot,
.dot-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--glow);
  animation: djb-pulse 2s ease-in-out infinite;
}

/* M12 加载骨架 */
.skeleton {
  border-radius: 6px;
  min-height: 12px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-2) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: djb-shimmer 1.4s linear infinite;
}

/* M9 主题切换：View Transitions 圆形扩散；不支持则颜色过渡 */
@media (prefers-reduced-motion: no-preference) {
  html.theme-switching,
  html.theme-switching * {
    transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease,
                box-shadow 240ms ease !important;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* ── 文本选中：粉色（§2.2-4；只用底，不承担状态语义） ──────────── */
::selection {
  background: var(--selection);
  color: var(--ink);
}

/* ── 紫/粉强调组件（§2.1/§2.2；紫/粉文字一律用 -text 变体保对比度） ── */
.badge-violet,
.badge-pink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm, 8px);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-violet {
  border-color: color-mix(in srgb, var(--violet) 34%, transparent);
  background: var(--violet-3);
  color: var(--violet-text);
}

.badge-pink {
  border-color: color-mix(in srgb, var(--pink) 34%, transparent);
  background: var(--pink-3);
  color: var(--pink-text);
}

/* 渐变文字只给大标题/首屏用；正文不得用（发光与渐变字均不进正文） */
.text-grad {
  width: fit-content;
  max-width: 100%;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (forced-colors: active) {
  .text-grad {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: CanvasText;
  }
}

/* ── 主题切换按钮 ───────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.theme-toggle:hover {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--glow);
}

.theme-toggle:active { transform: scale(.97); }

.theme-toggle .theme-label {
  font-size: 12px;
  letter-spacing: .02em;
}

.theme-toggle .theme-icon {
  display: inline-block;
  transition: transform 180ms ease;
}

.theme-toggle[data-mode="day"] .theme-icon { transform: rotate(180deg); }

/* ── 无障碍：减少动效时全部关掉 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .ticker-track { animation: none !important; }
  body::before { display: none; }
}