/* =========================================================================
   背景主题（themes.css）
   用 body[data-theme="..."] 切换整套配色（底色渐变 + 光晕 + 文字反色）
   默认主题 = 当前蓝紫；浅色主题文字自动反色为深色保证可读
   ========================================================================= */

/* ---- 文字色 :: 深浅主题各自的默认值（由属于该主题的 [data-theme] 覆盖） ---- */
:root {
    --text-main: rgba(255, 255, 255, 0.95); /* 主要文字：深色主题白 */
    --text-sub: rgba(255, 255, 255, 0.6);   /* 次要文字（历史序号、空态等） */
}

/* ================= 主题一：蓝紫（默认/当前） ================= */
body[data-theme="blurple"] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
}
body[data-theme="blurple"] {
    --text-main: rgba(255, 255, 255, 0.95);
    --text-sub: rgba(255, 255, 255, 0.6);
}
body[data-theme="blurple"] .aurora-blob:nth-child(1) { background: radial-gradient(circle at 30% 30%, #6366f1 0%, transparent 70%); }
body[data-theme="blurple"] .aurora-blob:nth-child(2) { background: radial-gradient(circle at 60% 40%, #8b5cf6 0%, transparent 70%); }
body[data-theme="blurple"] .aurora-blob:nth-child(3) { background: radial-gradient(circle at 50% 50%, #a78bfa 0%, transparent 70%); }
body[data-theme="blurple"] .aurora-blob:nth-child(4) { background: radial-gradient(circle at 40% 60%, #38bdf8 0%, transparent 70%); }
body[data-theme="blurple"] .aurora-blob:nth-child(5) { background: radial-gradient(circle at 50% 30%, #f9a8d4 0%, transparent 70%); }

/* ================= 主题二：浅彩（原「浅色流彩」，第五轮⑥改名） ================= */
body[data-theme="flow"] {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55) 0%, transparent 70%),
        linear-gradient(135deg, #eafaff 0%, #fdf0f8 50%, #f3effd 100%);
    --text-main: #1f3a3f;
    --text-sub: rgba(31, 58, 63, 0.6);
}
body[data-theme="flow"] .aurora-blob:nth-child(1) { background: radial-gradient(circle at 30% 30%, rgba(0, 183, 215, 0.28) 0%, transparent 70%); }
body[data-theme="flow"] .aurora-blob:nth-child(2) { background: radial-gradient(circle at 60% 40%, rgba(246, 51, 154, 0.28) 0%, transparent 70%); }
body[data-theme="flow"] .aurora-blob:nth-child(3) { background: radial-gradient(circle at 50% 50%, rgba(225, 42, 251, 0.25) 0%, transparent 70%); }
body[data-theme="flow"] .aurora-blob:nth-child(4) { background: radial-gradient(circle at 40% 60%, rgba(0, 165, 239, 0.30) 0%, transparent 70%); }
body[data-theme="flow"] .aurora-blob:nth-child(5) { background: radial-gradient(circle at 50% 30%, rgba(89, 199, 167, 0.30) 0%, transparent 70%); }

/* ================= 主题三：浅青（浅色，文字反色；第五轮⑥整体再调浅一档） ================= */
body[data-theme="aqua"] {
    background: linear-gradient(135deg, #f4fcfa 0%, #e6f8f5 50%, #d6f0ec 100%);
    --text-main: #12352f;
    --text-sub: rgba(18, 53, 47, 0.6);
}
body[data-theme="aqua"] .aurora-blob:nth-child(1) { background: radial-gradient(circle at 30% 30%, rgba(150, 220, 212, 0.55) 0%, transparent 70%); }
body[data-theme="aqua"] .aurora-blob:nth-child(2) { background: radial-gradient(circle at 60% 40%, rgba(166, 228, 222, 0.5) 0%, transparent 70%); }
body[data-theme="aqua"] .aurora-blob:nth-child(3) { background: radial-gradient(circle at 50% 50%, rgba(190, 236, 230, 0.55) 0%, transparent 70%); }
body[data-theme="aqua"] .aurora-blob:nth-child(4) { background: radial-gradient(circle at 40% 60%, rgba(140, 210, 203, 0.5) 0%, transparent 70%); }
body[data-theme="aqua"] .aurora-blob:nth-child(5) { background: radial-gradient(circle at 50% 30%, rgba(178, 228, 222, 0.5) 0%, transparent 70%); }

/* ================= 主题四：雾蓝（浅色，文字反色） ================= */
body[data-theme="mist"] {
    background: linear-gradient(135deg, #e7edf5 0%, #d6e0ee 50%, #c3d2e6 100%);
    --text-main: #26364d;
    --text-sub: rgba(38, 54, 77, 0.6);
}
body[data-theme="mist"] .aurora-blob:nth-child(1) { background: radial-gradient(circle at 30% 30%, rgba(158, 183, 218, 0.95) 0%, transparent 70%); }
body[data-theme="mist"] .aurora-blob:nth-child(2) { background: radial-gradient(circle at 60% 40%, rgba(174, 196, 226, 0.9) 0%, transparent 70%); }
body[data-theme="mist"] .aurora-blob:nth-child(3) { background: radial-gradient(circle at 50% 50%, rgba(188, 207, 233, 0.95) 0%, transparent 70%); }
body[data-theme="mist"] .aurora-blob:nth-child(4) { background: radial-gradient(circle at 40% 60%, rgba(146, 174, 212, 0.9) 0%, transparent 70%); }
body[data-theme="mist"] .aurora-blob:nth-child(5) { background: radial-gradient(circle at 50% 30%, rgba(177, 199, 227, 0.9) 0%, transparent 70%); }

/* ================= 主题五：深蓝（原「星空深蓝」，第五轮⑥改名·暗色） ================= */
body[data-theme="night"] {
    background: linear-gradient(135deg, #1e2a55 0%, #2b2f66 50%, #12122b 100%);
    --text-main: rgba(255, 255, 255, 0.96);
    --text-sub: rgba(255, 255, 255, 0.6);
}
body[data-theme="night"] .aurora-blob:nth-child(1) { background: radial-gradient(circle at 30% 30%, #3b4f9e 0%, transparent 70%); }
body[data-theme="night"] .aurora-blob:nth-child(2) { background: radial-gradient(circle at 60% 40%, #4451a8 0%, transparent 70%); }
body[data-theme="night"] .aurora-blob:nth-child(3) { background: radial-gradient(circle at 50% 50%, #565da8 0%, transparent 70%); }
body[data-theme="night"] .aurora-blob:nth-child(4) { background: radial-gradient(circle at 40% 60%, #2c4a8f 0%, transparent 70%); }
body[data-theme="night"] .aurora-blob:nth-child(5) { background: radial-gradient(circle at 50% 30%, #7c5bea 0%, transparent 70%); }

/* =========================================================================
   浅色主题下，玻璃控件文字反色（让主要文字/次要文字改用变量色）
   仅针对浅色主题（flow / aqua / mist / sweep）覆盖，让索引与关键文本换为深色
   （第五轮⑥：milk 已删除，从列表移除）
   ========================================================================= */
body[data-theme="flow"] .glass-btn,
body[data-theme="aqua"] .glass-btn,
body[data-theme="mist"] .glass-btn,
body[data-theme="sweep"] .glass-btn {
    color: var(--text-main);
    text-shadow: none;
}
body[data-theme="flow"] .glass-btn::before,
body[data-theme="aqua"] .glass-btn::before,
body[data-theme="mist"] .glass-btn::before,
body[data-theme="sweep"] .glass-btn::before {
    opacity: 0.05;
}

/* ================= 主题六：流光（原「扫光渐变」，第五轮⑥改名） =================
   浅色打底 + 青/粉/紫/天蓝低透明，整体做 background-position 流动扫光
   （此主题按用户要求复刻参考文件效果，故使用 background 动画） */
@keyframes sweep-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body[data-theme="sweep"] {
    background-color: #f2f6f9;
    background-image:
        linear-gradient(120deg,
            rgba(0, 183, 215, 0.18),
            rgba(246, 51, 154, 0.18),
            rgba(225, 42, 251, 0.18),
            rgba(0, 165, 239, 0.18));
    background-size: 300% 300%;
    background-position: 0% 50%;
    animation: sweep-gradient 16s ease-in-out infinite;
    --text-main: #22323c;
    --text-sub: rgba(34, 50, 60, 0.62);
}
body[data-theme="sweep"] .aurora-blob:nth-child(1) { background: radial-gradient(circle at 30% 30%, rgba(0, 183, 215, 0.22) 0%, transparent 70%); opacity: 0.5; }
body[data-theme="sweep"] .aurora-blob:nth-child(2) { background: radial-gradient(circle at 60% 40%, rgba(246, 51, 154, 0.22) 0%, transparent 70%); opacity: 0.5; }
body[data-theme="sweep"] .aurora-blob:nth-child(3) { background: radial-gradient(circle at 50% 50%, rgba(225, 42, 251, 0.20) 0%, transparent 70%); opacity: 0.45; }
body[data-theme="sweep"] .aurora-blob:nth-child(4) { background: radial-gradient(circle at 40% 60%, rgba(0, 165, 239, 0.22) 0%, transparent 70%); opacity: 0.45; }
body[data-theme="sweep"] .aurora-blob:nth-child(5) { background: radial-gradient(circle at 50% 30%, rgba(89, 199, 167, 0.22) 0%, transparent 70%); opacity: 0.45; }

/* =========================================================================
   流动光晕加强：位移幅度更大、部分时长更短，让光晕流动更明显
   （仍只用 transform 驱动，保持 GPU 合成、不带来重绘）
   ========================================================================= */
.aurora-blob {
    animation-duration: 20s;
}
.aurora-blob:nth-child(1) { animation-duration: 18s; }
.aurora-blob:nth-child(2) { animation-duration: 22s; }
.aurora-blob:nth-child(3) { animation-duration: 16s; }
.aurora-blob:nth-child(4) { animation-duration: 20s; }
.aurora-blob:nth-child(5) { animation-duration: 17s; }

@keyframes auroraFloat1 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(18vw, 14vh) scale(1.25) rotate(12deg); }
    100% { transform: translate(-14vw, 20vh) scale(0.9) rotate(-10deg); }
}
@keyframes auroraFloat2 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(-20vw, 16vh) scale(0.85) rotate(-14deg); }
    100% { transform: translate(14vw, -18vh) scale(1.3) rotate(10deg); }
}
@keyframes auroraFloat3 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(15vw, -18vh) scale(1.2) rotate(10deg); }
    100% { transform: translate(-16vw, 12vh) scale(0.85) rotate(-12deg); }
}
@keyframes auroraFloat4 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(-18vw, -15vh) scale(1.3) rotate(-10deg); }
    100% { transform: translate(15vw, 18vh) scale(0.9) rotate(12deg); }
}
@keyframes auroraFloat5 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(12vw, 18vh) scale(1.15) rotate(12deg); }
    100% { transform: translate(-18vw, -14vh) scale(1.25) rotate(-12deg); }
}