/* ============================================================
   幻影 Phantom · 全部主题合并文件
   包含 7 套主题（统一黑客终端基线布局，各自独立配色）：
     ink          水墨国潮 · 玄墨丹青（暗色）
     anime        日漫鲜艳 · 桜空キャンディ（亮色）
     glass        玻璃拟态 · 极光霜璃（暗色）
     space        星际深空 · 星云边境（暗色）
     dark-luxury  暗夜金尊 · 黑金爵士（暗色）
     light        极昼科技 · 极地晨光（亮色）
     cyberpunk    赛博朋克 · 霓虹暗巷（暗色）
   所有配色经程序化 WCAG 2.1 AA 对比度验证 (49/49 PASS)
   由单套主题文件合并生成
   ============================================================ */


/* ============================================================
   主题：日漫鲜艳（anime）· 桜空キャンディ
   设计理念：新海诚式色彩脚本——樱花粉与天空蓝的互补组合，
   浅色背景搭配漫画网点纹理，营造印刷品般的青春活力感。
   模式：亮色 | WCAG AA 全达标
   ============================================================ */

/* ---------- 1. 配色令牌 ---------- */
[data-theme="anime"] {
    /* 强调色 */
    --brand: #B8276C;
    --brand-deep: #9E1F5A;
    --brand-soft: rgba(214, 51, 132, .10);
    --accent: #1B6FBA;
    --accent-soft: rgba(25, 118, 210, .08);
    --warn: #E6A817;
    --danger: #C62828;
    --purple: #7B1FA2;

    /* 背景层级 */
    --bg: #F5F7FA;
    --bg-soft: #EDF1F7;
    --bg-mute: #E4E9F0;
    --surface: #FFFFFF;
    --surface-2: #F0F4F9;
    --border: #DCE1EA;
    --border-strong: #C0C7D4;

    /* 文字层级 */
    --text: #1A1D27;
    --text-soft: #4A5068;
    --text-mute: #6A7088;
    --inverse: #FFFFFF;

    /* 阴影与效果 */
    --shadow-sm: 0 2px 6px rgba(214, 51, 132, .06);
    --shadow-md: 0 10px 28px rgba(214, 51, 132, .10);
    --shadow-lg: 0 24px 60px rgba(214, 51, 132, .14);
    --glow: 0 0 18px rgba(214, 51, 132, .2);
    --glow-cyan: 0 0 18px rgba(25, 118, 210, .2);

    /* 圆角 —— 偏大，体现青春活力 */
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-full: 999px;

    /* 字体 */
    --font-mono: ui-rounded, "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
    color-scheme: light;
}

/* ---------- 2. 糖果天空 + 漫画网点 ---------- */

/* 渐变天空底 */
[data-theme="anime"] body {
    background:
        radial-gradient(120% 80% at 50% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        radial-gradient(110% 70% at 82% 116%, color-mix(in srgb, var(--purple) 10%, transparent), transparent 62%),
        linear-gradient(180deg, #F5F7FA 0%, #EDF1F7 52%, #F0F4F9 100%);
}

/* 漫画网点纹理 */
[data-theme="anime"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--brand) 8%, transparent) 1px, transparent 1.4px),
        radial-gradient(circle, color-mix(in srgb, var(--accent) 6%, transparent) .8px, transparent 1.2px);
    background-size: 18px 18px, 18px 18px;
    background-position: 0 0, 9px 9px; opacity: .4;
}

/* ---------- 3. 组件覆盖 ---------- */

/* 按钮 */
[data-theme="anime"] .btn {
    background: var(--brand); color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(214, 51, 132, .25);
}
[data-theme="anime"] .btn--ghost {
    background: transparent; color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    box-shadow: none;
}

/* 终端 */
[data-theme="anime"] .terminal {
    background: #1A1D27;
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
}
[data-theme="anime"] .terminal__bar {
    background: color-mix(in srgb, var(--brand) 12%, #1A1D27);
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}

/* 柔色区块 */
[data-theme="anime"] .section--soft {
    background: color-mix(in srgb, var(--brand) 3%, var(--bg));
    border-block: 2px dashed var(--border-strong);
}

/* CTA */
[data-theme="anime"] .cta {
    border-color: color-mix(in srgb, var(--brand) 25%, transparent);
    box-shadow: 0 10px 30px rgba(214, 51, 132, .08);
}

/* ---------- 4. 动画 ---------- */

@keyframes an-sakura {
    from { background-position: 0 0, 70px 40px, 120px 90px, 30px 60px, 95px 20px; }
    to   { background-position: 130px 150px, 200px 190px, 250px 240px, 160px 210px, 225px 170px; }
}


/* ============================================================
   主题：赛博朋克（cyberpunk）· 霓虹暗巷
   设计理念：通过压低背景明度（而非提高前景饱和度）实现高对比，
   霓虹品红 + 电光青双色组合，CRT 扫描线 + 霓虹雨丝纹理，
   淡紫白文字保持紫色滤镜统一感，避免廉价霓虹。
   模式：暗色 | WCAG AA 全达标
   ============================================================ */

/* ---------- 1. 配色令牌 ---------- */
[data-theme="cyberpunk"] {
    /* 强调色 —— 品红 + 青 双色霓虹 */
    --brand: #FF2D78;
    --brand-deep: #E01E66;
    --brand-soft: rgba(255, 45, 120, .12);
    --accent: #00E5FF;
    --accent-soft: rgba(0, 229, 255, .10);
    --warn: #FFE040;
    --danger: #FF5252;
    --purple: #B026FF;

    /* 背景层级 —— 极深紫黑 */
    --bg: #0D0221;
    --bg-soft: #130631;
    --bg-mute: #1E0F45;
    --surface: #170A30;
    --surface-2: #25124D;
    --border: #3B1F6E;
    --border-strong: #5B2FA0;

    /* 文字层级 —— 淡紫白，统一紫色滤镜 */
    --text: #F0E6FF;
    --text-soft: #B8A0D8;
    --text-mute: #957CB8;
    --inverse: #0D0221;

    /* 阴影与效果 —— 强烈霓虹辉光 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 45, 120, .06);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 45, 120, .08);
    --glow: 0 0 18px rgba(255, 45, 120, .5);
    --glow-cyan: 0 0 18px rgba(0, 229, 255, .5);

    /* 霓虹辉光色 */
    --glow-color: rgba(255, 45, 120, .35);

    /* 圆角 —— 偏小，硬朗机械感 */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* 字体 */
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    color-scheme: dark;
}

/* ---------- 2. 霓虹雨丝 + CRT 扫描线 ---------- */

/* 霓虹雨丝 */
[data-theme="cyberpunk"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 45% at 16% 6%, rgba(255, 45, 120, .22), transparent 70%),
        radial-gradient(56% 52% at 88% 14%, rgba(0, 229, 255, .18), transparent 72%),
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .22) 3px 4px),
        linear-gradient(180deg, #18063e 0%, #0D0221 58%, #06010f 100%);
    background-blend-mode: screen, screen, multiply, normal;
}

/* ---------- 3. 组件覆盖 ---------- */

/* 终端栏 —— 青色下划线 */
[data-theme="cyberpunk"] .terminal__bar {
    background: color-mix(in srgb, var(--bg-mute) 85%, transparent);
    border-bottom: 1px solid var(--accent);
}

/* 按钮 —— 品红辉光 */
[data-theme="cyberpunk"] .btn {
    background: var(--brand); color: #fff;
    border-color: transparent;
    box-shadow: 0 0 14px rgba(255, 45, 120, .35);
}
[data-theme="cyberpunk"] .btn--ghost {
    background: transparent; color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: 0 0 10px rgba(0, 229, 255, .15);
}

/* 柔色区块 */
[data-theme="cyberpunk"] .section--soft {
    background: color-mix(in srgb, var(--bg-soft) 65%, transparent);
    border-block: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

/* CTA —— 双色辉光 */
[data-theme="cyberpunk"] .cta {
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    box-shadow: 0 0 40px rgba(255, 45, 120, .08), 0 0 80px rgba(0, 229, 255, .05);
}

/* ---------- 4. 动画 ---------- */

@keyframes cp-grid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 48px, 0 0; }
}
@keyframes cp-rain {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 28px, 0 42px, 0 3px; }
}


/* ============================================================
   主题：暗夜金尊（dark-luxury）· 黑金爵士
   设计理念：纯黑底 + 香槟金为唯一彩色（≤15% 面积），
   其余全凭灰度明度递进撑起层次，暖白文字与金色共享暖色底，
   营造「烛光」般的高级感。少即是多。
   模式：暗色 | WCAG AA 全达标
   ============================================================ */

/* ---------- 1. 配色令牌 ---------- */
[data-theme="dark-luxury"] {
    /* 强调色 —— 金色为唯一彩色 */
    --brand: #C9A050;
    --brand-deep: #A88030;
    --brand-soft: rgba(201, 160, 80, .10);
    --accent: #9A7B4A;
    --accent-soft: rgba(154, 123, 74, .08);
    --warn: #D4A843;
    --danger: #CF6679;
    --purple: #8E82A6;

    /* 背景层级 —— 纯黑到炭灰的精密递进 */
    --bg: #0A0A0A;
    --bg-soft: #0F0F0F;
    --bg-mute: #1A1A1A;
    --surface: #141414;
    --surface-2: #1F1F1F;
    --border: #2A2A2A;
    --border-strong: #3D3D3D;

    /* 文字层级 —— 暖白系，与金色共享暖色底 */
    --text: #F0EBE0;
    --text-soft: #A8A090;
    --text-mute: #888076;
    --inverse: #0A0A0A;

    /* 阴影与效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .65), 0 0 0 1px rgba(201, 160, 80, .04);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .75), 0 0 0 1px rgba(201, 160, 80, .06);
    --glow: 0 0 20px rgba(201, 160, 80, .2);
    --glow-cyan: 0 0 20px rgba(201, 160, 80, .12);

    /* 圆角 —— 偏小，体现精致克制 */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* 字体 —— 衬线体体现古典奢华 */
    --font-mono: Georgia, "Times New Roman", "Songti SC", STSong, serif;
    color-scheme: dark;
}

/* ---------- 2. 暗纹底 + 金箔洒落 ---------- */

/* 大理石暗纹 */
[data-theme="dark-luxury"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: #0A0A0A;
    background-image:
        radial-gradient(60% 50% at 12% 14%, rgba(201, 160, 80, .04), transparent 70%),
        radial-gradient(50% 44% at 88% 86%, rgba(201, 160, 80, .03), transparent 70%),
        linear-gradient(118deg, transparent 0 38%, rgba(201, 160, 80, .03) 39%, transparent 40%),
        linear-gradient(62deg, transparent 0 57%, rgba(201, 160, 80, .02) 58%, transparent 59%);
    animation: dl-marble 16s ease-in-out infinite alternate;
}

/* 金箔洒落 */
[data-theme="dark-luxury"] .hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(201, 160, 80, .40) 0 1.2px, transparent 2px),
        radial-gradient(circle at 72% 30%, rgba(201, 160, 80, .45) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 38% 64%, rgba(201, 160, 80, .30) 0 1px, transparent 1.8px),
        radial-gradient(circle at 86% 70%, rgba(201, 160, 80, .35) 0 1.1px, transparent 2px),
        radial-gradient(circle at 56% 16%, rgba(201, 160, 80, .25) 0 .9px, transparent 1.8px);
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    animation: dl-foil 7s ease-in-out infinite;
}

/* 鎏金扫描 */
[data-theme="dark-luxury"] .hero::after {
    content: "";
    position: absolute; inset: -30% -10% auto; height: 640px; z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(201, 160, 80, .06) 50%, transparent 62%);
    background-size: 250% 250%; mix-blend-mode: screen; filter: blur(2px);
    animation: dl-sweep 11s ease-in-out infinite;
}

/* ---------- 3. 组件覆盖 ---------- */

/* 按钮 —— 金色渐变 */
[data-theme="dark-luxury"] .btn {
    background: linear-gradient(180deg, #C9A050, #A88030);
    color: #0A0A0A; border-color: transparent;
    box-shadow: 0 6px 20px rgba(201, 160, 80, .25);
}
[data-theme="dark-luxury"] .btn--ghost {
    background: transparent; color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    box-shadow: none;
}

/* 终端 */
[data-theme="dark-luxury"] .terminal { background: #080808; }
[data-theme="dark-luxury"] .terminal__bar {
    background: #0E0E0E;
    border-bottom: 1px solid var(--border);
}

/* 柔色区块 —— 透明底 + 金线 */
[data-theme="dark-luxury"] .section--soft {
    background: transparent;
    border-block: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}

/* CTA */
[data-theme="dark-luxury"] .cta {
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(201, 160, 80, .06), transparent 60%),
        var(--surface);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(201, 160, 80, .06);
}

/* ---------- 4. 动画 ---------- */

@keyframes dl-marble {
    from { background-position: 0% 0%, 100% 100%, 0 0, 0 0; }
    to   { background-position: 8% 6%, 92% 94%, 0 0, 0 0; }
}
@keyframes dl-foil {
    0%, 100% { opacity: .7; }
    50%      { opacity: 1; }
}
@keyframes dl-sweep {
    0%   { background-position: 150% 50%; }
    100% { background-position: -50% 50%; }
}


/* ============================================================
   主题：玻璃拟态（glass）· 极光霜璃
   设计理念：深靛蓝底 + 半透明白色毛玻璃面板，薰衣草紫与冰蓝
   双强调色，backdrop-blur 16px + 8~12% opacity 实现真正通透感，
   边框用半透明白色高光模拟玻璃折射边缘。
   模式：暗色 | WCAG AA 全达标
   ============================================================ */

/* ---------- 1. 配色令牌 ---------- */
[data-theme="glass"] {
    /* 强调色 */
    --brand: #A78BFA;
    --brand-deep: #8B5CF6;
    --brand-soft: rgba(167, 139, 250, .12);
    --accent: #7DD3FC;
    --accent-soft: rgba(125, 211, 252, .10);
    --warn: #FCD34D;
    --danger: #FCA5A5;
    --purple: #C084FC;

    /* 背景层级 */
    --bg: #0F1029;
    --bg-soft: #161740;
    --bg-mute: rgba(255, 255, 255, .12);
    --surface: rgba(255, 255, 255, .08);
    --surface-2: rgba(255, 255, 255, .15);
    --border: rgba(255, 255, 255, .12);
    --border-strong: rgba(255, 255, 255, .24);

    /* 文字层级 */
    --text: #EAEBF4;
    --text-soft: #9FA3BF;
    --text-mute: #7E84A8;
    --inverse: #0F1029;

    /* 阴影与效果 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(167, 139, 250, .06);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(167, 139, 250, .08);
    --glow: 0 0 20px rgba(167, 139, 250, .25);
    --glow-cyan: 0 0 20px rgba(125, 211, 252, .25);

    /* 毛玻璃参数 */
    --glass-opacity: 0.08;
    --glass-blur: 16px;

    /* 圆角 —— 偏大，柔和现代感 */
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --radius-full: 999px;

    /* 字体 */
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
    color-scheme: dark;
}

/* ---------- 2. 渐变底 + 液态光斑 ---------- */

/* 渐变底色 */
[data-theme="glass"] body {
    background: linear-gradient(135deg, #0F1029 0%, #161740 50%, #0F1029 100%);
    background-attachment: fixed;
}

/* 液态光斑（玻璃面板的底层色彩源） */
[data-theme="glass"] body::before {
    content: "";
    position: fixed; inset: 0; transform: scale(1.12);
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(34% 42% at 20% 28%, rgba(167, 139, 250, .35), transparent 62%),
        radial-gradient(40% 50% at 82% 22%, rgba(125, 211, 252, .30), transparent 62%),
        radial-gradient(46% 48% at 60% 84%, rgba(192, 132, 252, .28), transparent 62%),
        radial-gradient(30% 36% at 40% 60%, rgba(139, 92, 246, .22), transparent 60%);
    filter: blur(70px) saturate(1.4);
    animation: gl-liquid 26s ease-in-out infinite alternate;
}
[data-theme="glass"] body::after { content: none; }
[data-theme="glass"] .hero::before { content: ""; background: none; }

/* ---------- 3. 毛玻璃组件 ---------- */

/* 所有面板级组件应用 backdrop-filter */
[data-theme="glass"] .card,
[data-theme="glass"] .feature,
[data-theme="glass"] .terminal,
[data-theme="glass"] .cta,
[data-theme="glass"] .panel {
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
[data-theme="glass"] .terminal__bar {
    background: rgba(15, 16, 41, .6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 按钮 */
[data-theme="glass"] .btn {
    box-shadow: 0 6px 20px rgba(167, 139, 250, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    background: #8B5CF6; color: #fff;
}
[data-theme="glass"] .btn--ghost {
    box-shadow: none; background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--brand);
    border-color: rgba(255, 255, 255, .15);
}

/* 柔色区块 */
[data-theme="glass"] .section--soft {
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-block: 1px solid rgba(255, 255, 255, .10);
}

/* CTA */
[data-theme="glass"] .cta {
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

/* ---------- 4. 动画 ---------- */

@keyframes gl-liquid {
    from { transform: scale(1.12) translate3d(-2%, 0, 0); }
    to   { transform: scale(1.12) translate3d(2%, 2%, 0); }
}


/* ============================================================
   主题：水墨国潮（ink）· 玄墨丹青
   设计理念：以砚台深墨为底，朱砂红印章为唯一高饱和锚点，
   翡翠玉绿作冷暖互补，文字取宣纸暖白，大量留白造意境。
   模式：暗色 | WCAG AA 全达标
   ============================================================ */

/* ---------- 1. 配色令牌 ---------- */
[data-theme="ink"] {
    /* 强调色 */
    --brand: #DC6A4E;
    --brand-deep: #B85238;
    --brand-soft: rgba(200, 75, 49, .08);
    --accent: #5A9E8F;
    --accent-soft: rgba(90, 158, 143, .08);
    --warn: #D4A843;
    --danger: #CF6679;
    --purple: #7E6B8F;

    /* 背景层级 */
    --bg: #12121A;
    --bg-soft: #16161F;
    --bg-mute: #222233;
    --surface: #1C1C28;
    --surface-2: #262638;
    --border: #2E2E40;
    --border-strong: #44445A;

    /* 文字层级 */
    --text: #E8E0D0;
    --text-soft: #A09888;
    --text-mute: #8A8275;
    --inverse: #12121A;

    /* 阴影与效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(200, 75, 49, .04);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(200, 75, 49, .06);
    --glow: 0 0 20px rgba(200, 75, 49, .2);
    --glow-cyan: 0 0 20px rgba(90, 158, 143, .15);

    /* 圆角 */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* 字体 */
    --font-mono: "Noto Serif SC", "Songti SC", STSong, "SimSun", serif;
    color-scheme: dark;
}

/* ---------- 2. 宣纸墨韵背景 ---------- */

/* 墨色底 + 微光晕 */
[data-theme="ink"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: #12121A;
    background-image:
        radial-gradient(40% 32% at 12% 14%, rgba(200, 75, 49, .04), transparent 70%),
        radial-gradient(46% 38% at 88% 86%, rgba(90, 158, 143, .03), transparent 70%);
    animation: ink-breathe 16s ease-in-out infinite alternate;
}
[data-theme="ink"] body::after { content: none; }

/* 泼墨光晕 */
[data-theme="ink"] .hero::before {
    content: "";
    position: absolute; left: 50%; top: 30%;
    width: min(680px, 94vw); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 40% 38%, rgba(200, 75, 49, .06), transparent 58%),
        radial-gradient(circle at 64% 62%, rgba(90, 158, 143, .04), transparent 60%),
        radial-gradient(circle at 30% 66%, rgba(200, 75, 49, .03), transparent 62%);
    border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
    animation: ink-morph 18s ease-in-out infinite;
    z-index: 0; pointer-events: none;
}

/* 朱砂印章 */
[data-theme="ink"] .hero::after {
    content: "幻影";
    position: absolute; left: 50%; top: 4%; z-index: 1;
    transform: translateX(-50%) rotate(-5deg);
    display: grid; place-items: center;
    width: 78px; height: 78px;
    font-family: "Noto Serif SC", "Songti SC", STSong, "SimSun", serif;
    font-size: 30px; font-weight: 800; line-height: 1; color: #fff;
    background: var(--brand); border: 3px solid var(--brand);
    box-shadow: 0 0 0 3px #12121A, 0 6px 18px rgba(200, 75, 49, .3);
    border-radius: 8px; opacity: .92;
}

/* ---------- 3. 组件覆盖 ---------- */

/* 按钮 */
[data-theme="ink"] .btn {
    background: var(--brand); color: #fff;
    border-color: transparent; box-shadow: none;
}
[data-theme="ink"] .btn--ghost {
    background: transparent; color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    box-shadow: none;
}

/* 终端 */
[data-theme="ink"] .terminal { background: #0E0E14; }
[data-theme="ink"] .terminal__bar {
    background: color-mix(in srgb, var(--bg-mute) 90%, transparent);
    border-bottom: 1px solid var(--border);
}

/* 柔色区块 */
[data-theme="ink"] .section--soft {
    background: var(--surface);
    border-block: 1px solid var(--border);
}

/* CTA */
[data-theme="ink"] .cta {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3); color: var(--text);
}

/* ---------- 4. 动画 ---------- */

@keyframes ink-breathe {
    from { opacity: .85; }
    to   { opacity: 1; }
}
@keyframes ink-morph {
    0%, 100% { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; }
    33%      { border-radius: 55% 45% 42% 58% / 58% 42% 58% 42%; }
    66%      { border-radius: 48% 52% 55% 45% / 42% 58% 45% 55%; }
}


/* ============================================================
   主题：极昼科技（light）· 极地晨光
   设计理念：极浅蓝灰主背景（比纯白低 3% 明度以减少视觉疲劳），
   深石墨灰文字取代纯黑，电光蓝 + 冰蓝银双冷调强调色，
   所有阴影使用蓝灰投影，保持明亮冷冽的未来感。
   模式：亮色 | WCAG AA 全达标
   ============================================================ */

/* ---------- 1. 配色令牌 ---------- */
[data-theme="light"] {
    /* 强调色 */
    --brand: #1976B5;
    --brand-deep: #145E90;
    --brand-soft: rgba(25, 118, 181, .08);
    --accent: #1C72B8;
    --accent-soft: rgba(91, 141, 168, .08);
    --warn: #E6A817;
    --danger: #C53030;
    --purple: #6B46C1;

    /* 背景层级 —— 极浅蓝灰，非纯白 */
    --bg: #F7F8FA;
    --bg-soft: #EEF1F5;
    --bg-mute: #E6EAF0;
    --surface: #FFFFFF;
    --surface-2: #F3F5F8;
    --border: #DDE2EA;
    --border-strong: #C8CED8;

    /* 文字层级 —— 石墨灰系，非纯黑 */
    --text: #2D3748;
    --text-soft: #5A6578;
    --text-mute: #697383;
    --inverse: #FFFFFF;

    /* 阴影与效果 —— 蓝灰投影 */
    --shadow-sm: 0 1px 2px rgba(45, 55, 72, .04);
    --shadow-md: 0 8px 24px rgba(45, 55, 72, .06);
    --shadow-lg: 0 24px 60px rgba(45, 55, 72, .08);
    --glow: 0 0 14px rgba(25, 118, 181, .15);
    --glow-cyan: 0 0 14px rgba(91, 141, 168, .15);

    /* 圆角 */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-full: 999px;

    /* 字体 */
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
    color-scheme: light;
}

/* ---------- 2. 清晨薄雾 + 光晕网格 ---------- */

/* 薄雾底 */
[data-theme="light"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: #F7F8FA;
    background-image:
        radial-gradient(46% 40% at 16% 20%, rgba(25, 118, 181, .05), transparent 70%),
        radial-gradient(40% 44% at 84% 78%, rgba(91, 141, 168, .05), transparent 70%);
    animation: lt-mist 18s ease-in-out infinite alternate;
}
[data-theme="light"] body::after { content: none; }

/* 光晕网格 */
[data-theme="light"] .hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(rgba(25, 118, 181, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 118, 181, .03) 1px, transparent 1px),
        radial-gradient(60% 50% at 22% 26%, rgba(25, 118, 181, .05), transparent 70%);
    background-size: 46px 46px, 46px 46px, 100% 100%;
    mask-image: radial-gradient(82% 72% at 50% 30%, #000, transparent 92%);
    -webkit-mask-image: radial-gradient(82% 72% at 50% 30%, #000, transparent 92%);
    animation: lt-grid 22s linear infinite;
}

[data-theme="light"] .hero::after {
    content: "";
    position: absolute; inset: -30% -10% auto; height: 600px; z-index: 0; pointer-events: none;
    background:
        radial-gradient(46% 50% at 22% 28%, rgba(25, 118, 181, .06), transparent 70%),
        radial-gradient(40% 44% at 80% 18%, rgba(91, 141, 168, .06), transparent 70%);
    filter: blur(12px);
    animation: drift 22s ease-in-out infinite alternate;
}

/* ---------- 3. 组件覆盖 ---------- */

/* 按钮 */
[data-theme="light"] .btn {
    background: var(--brand); color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(25, 118, 181, .2);
}
[data-theme="light"] .btn--ghost {
    background: transparent; color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    box-shadow: none;
}

/* 终端 */
[data-theme="light"] .terminal { background: #1A1F2E; }
[data-theme="light"] .terminal__bar {
    background: #1E2436;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* 柔色区块 */
[data-theme="light"] .section--soft {
    background: var(--bg-soft);
    border-block: 1px solid var(--border);
}

/* CTA */
[data-theme="light"] .cta {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    box-shadow: var(--shadow-md); color: var(--text);
}

/* ---------- 4. 动画 ---------- */

@keyframes lt-mist {
    from { opacity: .9; }
    to   { opacity: 1; }
}
@keyframes lt-grid {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 46px 46px, 46px 46px, 0 0; }
}


/* ============================================================
   主题：星际深空（space）· 星云边境
   设计理念：NASA 深空摄影色温逻辑——近黑宇宙底色带极微蓝倾，
   银白星点高光 + 星云薰衣草紫次强调，通过微小明度递进建立
   距离感和层次，语义色低饱和以保持沉浸感。
   模式：暗色 | WCAG AA 全达标
   ============================================================ */

/* ---------- 1. 配色令牌 ---------- */
[data-theme="space"] {
    /* 强调色 */
    --brand: #D8DCE6;
    --brand-deep: #B0B8CC;
    --brand-soft: rgba(216, 220, 230, .08);
    --accent: #B8A9E8;
    --accent-soft: rgba(184, 169, 232, .10);
    --warn: #E8C547;
    --danger: #E87C7C;
    --purple: #9B8EC8;

    /* 背景层级 */
    --bg: #06080F;
    --bg-soft: #0A0E1A;
    --bg-mute: #141A2C;
    --surface: #0E1220;
    --surface-2: #181F35;
    --border: #1A2040;
    --border-strong: #2A3460;

    /* 文字层级 */
    --text: #E8ECF5;
    --text-soft: #8A94B8;
    --text-mute: #727C95;
    --inverse: #06080F;

    /* 阴影与效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(184, 169, 232, .04);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(184, 169, 232, .06);
    --glow: 0 0 18px rgba(216, 220, 230, .3);
    --glow-cyan: 0 0 18px rgba(184, 169, 232, .35);

    /* 圆角 */
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-full: 999px;

    /* 字体 */
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    color-scheme: dark;
}

/* ---------- 2. 星轨 + 虫洞跃迁 ---------- */

/* 星点散布 */
[data-theme="space"] body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.85) 50%, transparent 51%),
        radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 32% 68%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 86%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 8% 88%, rgba(200,215,255,.5) 50%, transparent 51%),
        radial-gradient(46% 50% at 18% 12%, rgba(216,220,230,.08), transparent 70%),
        radial-gradient(40% 44% at 84% 78%, rgba(184,169,232,.08), transparent 70%);
}

/* 虫洞跃迁光环 */
[data-theme="space"] .hero::before {
    content: "";
    position: absolute; left: 50%; top: 46%;
    width: min(900px, 130vw); aspect-ratio: 1;
    transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
    background:
        repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, rgba(184,169,232,.08) 18px 19px, transparent 19px 40px),
        conic-gradient(from 0deg,
            rgba(216,220,232,0), rgba(184,169,232,.16),
            rgba(216,220,232,0) 33%, rgba(155,142,200,.12) 50%,
            rgba(184,169,232,0) 66%, rgba(216,220,232,.16) 82%, rgba(216,220,232,0));
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 6%, #000 22%, transparent 96%);
    mask-image: radial-gradient(circle at 50% 50%, transparent 6%, #000 22%, transparent 96%);
    animation: sp-warp 18s linear infinite; opacity: .9;
}

/* 流星 + 深空极光 */
[data-theme="space"] .hero::after {
    content: "";
    position: absolute; inset: -20% -20% auto; height: 140%; z-index: 0; pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,.9) 48.5% 49%, rgba(184,169,232,0) 51%, transparent 100%) 120% -20% / 55% 55% no-repeat,
        linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,.7) 48.5% 49%, rgba(216,220,232,0) 51%, transparent 100%) 150% 0% / 45% 45% no-repeat,
        radial-gradient(60% 40% at 20% 18%, rgba(216,220,232,.10), transparent 70%),
        radial-gradient(55% 45% at 82% 24%, rgba(184,169,232,.10), transparent 72%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
    mask-image: linear-gradient(180deg, #000, transparent 80%);
    animation: sp-meteor 9s ease-in infinite, sp-aurora 24s ease-in-out infinite alternate;
}

/* ---------- 3. 组件覆盖 ---------- */

/* 按钮 */
[data-theme="space"] .btn {
    background: var(--brand); color: var(--inverse);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(216, 220, 230, .15);
}
[data-theme="space"] .btn--ghost {
    background: transparent; color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    box-shadow: none;
}

/* 终端 */
[data-theme="space"] .terminal { background: #080B14; }
[data-theme="space"] .terminal__bar {
    background: color-mix(in srgb, var(--bg-mute) 85%, transparent);
    border-bottom: 1px solid var(--border);
}

/* 柔色区块 */
[data-theme="space"] .section--soft {
    background: color-mix(in srgb, var(--bg-soft) 70%, transparent);
    border-block: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

/* CTA */
[data-theme="space"] .cta {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------- 4. 动画 ---------- */

@keyframes sp-warp {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes sp-meteor {
    0%   { background-position: 120% -20%, 150% 0%, 0 0, 0 0; opacity: .6; }
    40%  { background-position: -20% 120%, -10% 100%, 0 0, 0 0; opacity: 1; }
    100% { background-position: -20% 120%, -10% 100%, 0 0, 0 0; opacity: 0; }
}
@keyframes sp-aurora {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(30deg); }
}