/* ==========================================
   Tiny-RiPro 全局背景预设
   ========================================== */

:root {
    --body-bg-base: #f8fafc;
    --body-bg-surface: #ffffff;
    --body-bg-text: #0f172a;
    --body-bg-text-sub: #64748b;
    --body-bg-border: #e2e8f0;
    --body-bg-accent: #3b82f6;
    --body-bg-accent-2: #8b5cf6;
    --body-bg-accent-3: #06b6d4;
}

[data-bs-theme="dark"] {
    --body-bg-base: #0b0f19;
    --body-bg-surface: #161f33;
    --body-bg-text: #f8fafc;
    --body-bg-text-sub: #94a3b8;
    --body-bg-border: #2a364d;
    --body-bg-accent: #60a5fa;
    --body-bg-accent-2: #a78bfa;
    --body-bg-accent-3: #22d3ee;
}

body.tiny-body-bg-aurora,
body.tiny-body-bg-cosmic,
body.tiny-body-bg-mesh,
body.tiny-body-bg-geek,
body.tiny-body-bg-light {
    background: var(--body-bg-base);
    position: relative;
    overflow-x: hidden;
}

body.tiny-body-bg-aurora::before,
body.tiny-body-bg-aurora::after,
body.tiny-body-bg-cosmic::before,
body.tiny-body-bg-cosmic::after,
body.tiny-body-bg-mesh::before,
body.tiny-body-bg-mesh::after,
body.tiny-body-bg-geek::before,
body.tiny-body-bg-geek::after,
body.tiny-body-bg-light::before,
body.tiny-body-bg-light::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

body.tiny-body-bg-aurora::before {
    background:
        linear-gradient(105deg, transparent 40%, rgba(139, 92, 246, 0.08) 45%, rgba(139, 92, 246, 0.15) 50%, rgba(139, 92, 246, 0.08) 55%, transparent 60%),
        linear-gradient(80deg, transparent 30%, rgba(59, 130, 246, 0.06) 35%, rgba(59, 130, 246, 0.12) 42%, rgba(59, 130, 246, 0.06) 48%, transparent 55%),
        linear-gradient(125deg, transparent 45%, rgba(6, 182, 212, 0.05) 50%, rgba(6, 182, 212, 0.1) 55%, rgba(6, 182, 212, 0.05) 60%, transparent 65%);
    background-size: 200% 100%;
    animation: auroraStream 12s ease-in-out infinite;
}

body.tiny-body-bg-aurora::after {
    background:
        linear-gradient(95deg, transparent 50%, rgba(236, 72, 153, 0.04) 55%, rgba(236, 72, 153, 0.08) 60%, rgba(236, 72, 153, 0.04) 65%, transparent 70%),
        linear-gradient(115deg, transparent 35%, rgba(34, 211, 238, 0.05) 42%, rgba(34, 211, 238, 0.1) 48%, rgba(34, 211, 238, 0.05) 54%, transparent 60%);
    background-size: 180% 100%;
    animation: auroraStream2 18s ease-in-out infinite reverse;
}

@keyframes auroraStream {
    0% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
    100% { background-position: -100% 0; }
}

@keyframes auroraStream2 {
    0% { background-position: -80% 0; }
    50% { background-position: 20% 0; }
    100% { background-position: 120% 0; }
}

[data-bs-theme="dark"] body.tiny-body-bg-aurora::before {
    background:
        linear-gradient(105deg, transparent 35%, rgba(139, 92, 246, 0.12) 42%, rgba(167, 139, 250, 0.2) 50%, rgba(139, 92, 246, 0.12) 58%, transparent 65%),
        linear-gradient(80deg, transparent 25%, rgba(59, 130, 246, 0.1) 32%, rgba(96, 165, 250, 0.18) 40%, rgba(59, 130, 246, 0.1) 48%, transparent 55%),
        linear-gradient(125deg, transparent 40%, rgba(6, 182, 212, 0.08) 48%, rgba(34, 211, 238, 0.15) 52%, rgba(6, 182, 212, 0.08) 58%, transparent 65%);
    background-size: 200% 100%;
}

[data-bs-theme="dark"] body.tiny-body-bg-aurora::after {
    background:
        linear-gradient(95deg, transparent 45%, rgba(236, 72, 153, 0.06) 52%, rgba(236, 72, 153, 0.12) 58%, rgba(236, 72, 153, 0.06) 64%, transparent 70%),
        linear-gradient(115deg, transparent 30%, rgba(34, 211, 238, 0.07) 38%, rgba(34, 211, 238, 0.14) 45%, rgba(34, 211, 238, 0.07) 52%, transparent 60%);
    background-size: 180% 100%;
}

body.tiny-body-bg-cosmic::before {
    background-image:
        radial-gradient(2px 2px at 20px 30px, var(--body-bg-accent), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(139, 92, 246, 0.7), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--body-bg-text), transparent),
        radial-gradient(2px 2px at 160px 120px, var(--body-bg-accent-3), transparent),
        radial-gradient(1px 1px at 230px 80px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 300px 200px, var(--body-bg-accent-2), transparent),
        radial-gradient(1px 1px at 350px 150px, var(--body-bg-text), transparent),
        radial-gradient(2px 2px at 420px 60px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 500px 180px, var(--body-bg-accent), transparent),
        radial-gradient(2px 2px at 580px 100px, rgba(139, 92, 246, 0.6), transparent);
    background-size: 600px 300px;
    animation: starTwinkle 8s ease-in-out infinite;
    opacity: 0.5;
}

body.tiny-body-bg-cosmic::after {
    background:
        radial-gradient(ellipse 80% 50% at 20% 30%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.7; }
}

[data-bs-theme="dark"] body.tiny-body-bg-cosmic::before {
    opacity: 0.7;
}

body.tiny-body-bg-mesh::before {
    background-image:
        linear-gradient(var(--body-bg-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--body-bg-border) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.25;
    animation: meshDrift 30s linear infinite;
}

body.tiny-body-bg-mesh::after {
    background:
        radial-gradient(ellipse 100% 80% at 10% 20%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 90% 80%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(6, 182, 212, 0.03) 0%, transparent 50%);
}

@keyframes meshDrift {
    0% { background-position: 0 0; }
    100% { background-position: 0 60px; }
}

body.tiny-body-bg-geek::before {
    background:
        radial-gradient(ellipse 120% 80% at 10% 10%, rgba(147, 197, 253, 0.18) 0%, rgba(59, 130, 246, 0.08) 40%, transparent 70%),
        radial-gradient(ellipse 100% 90% at 90% 20%, rgba(196, 181, 253, 0.15) 0%, rgba(139, 92, 246, 0.06) 45%, transparent 70%),
        radial-gradient(ellipse 110% 85% at 30% 90%, rgba(253, 186, 116, 0.12) 0%, rgba(249, 115, 22, 0.05) 45%, transparent 70%),
        radial-gradient(ellipse 90% 100% at 80% 80%, rgba(167, 139, 250, 0.12) 0%, rgba(139, 92, 246, 0.05) 45%, transparent 70%),
        radial-gradient(ellipse 100% 70% at 50% 50%, rgba(236, 72, 153, 0.06) 0%, transparent 60%);
    animation: macFloat 30s ease-in-out infinite;
}

body.tiny-body-bg-geek::after {
    background:
        radial-gradient(ellipse 140% 100% at 20% 40%, rgba(147, 197, 253, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 120% 90% at 75% 65%, rgba(253, 186, 116, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 110% 110% at 45% 75%, rgba(196, 181, 253, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 60% 30%, rgba(167, 139, 250, 0.05) 0%, transparent 45%);
    animation: macFloat2 35s ease-in-out infinite reverse;
}

@keyframes macFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(2%, 1%); }
    50% { transform: translate(-1%, 2%); }
    75% { transform: translate(1%, -1%); }
}

@keyframes macFloat2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-1.5%, 1%); }
    66% { transform: translate(1%, -1.5%); }
}

[data-bs-theme="dark"] body.tiny-body-bg-geek::before {
    background:
        radial-gradient(ellipse 120% 80% at 10% 10%, rgba(96, 165, 250, 0.22) 0%, rgba(59, 130, 246, 0.1) 40%, transparent 70%),
        radial-gradient(ellipse 100% 90% at 90% 20%, rgba(167, 139, 250, 0.2) 0%, rgba(139, 92, 246, 0.08) 45%, transparent 70%),
        radial-gradient(ellipse 110% 85% at 30% 90%, rgba(252, 165, 165, 0.16) 0%, rgba(239, 68, 68, 0.06) 45%, transparent 70%),
        radial-gradient(ellipse 90% 100% at 80% 80%, rgba(196, 181, 253, 0.16) 0%, rgba(139, 92, 246, 0.07) 45%, transparent 70%),
        radial-gradient(ellipse 100% 70% at 50% 50%, rgba(236, 72, 153, 0.08) 0%, transparent 60%);
}

[data-bs-theme="dark"] body.tiny-body-bg-geek::after {
    background:
        radial-gradient(ellipse 140% 100% at 20% 40%, rgba(96, 165, 250, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 120% 90% at 75% 65%, rgba(252, 165, 165, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 110% 110% at 45% 75%, rgba(167, 139, 250, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 60% 30%, rgba(196, 181, 253, 0.08) 0%, transparent 45%);
}

[data-bs-theme="light"] body.tiny-body-bg-geek::before {
    background:
        radial-gradient(ellipse 120% 80% at 10% 10%, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.04) 40%, transparent 70%),
        radial-gradient(ellipse 100% 90% at 90% 20%, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.03) 45%, transparent 70%),
        radial-gradient(ellipse 110% 85% at 30% 90%, rgba(249, 115, 22, 0.06) 0%, rgba(249, 115, 22, 0.02) 45%, transparent 70%),
        radial-gradient(ellipse 90% 100% at 80% 80%, rgba(236, 72, 153, 0.05) 0%, rgba(236, 72, 153, 0.02) 45%, transparent 70%),
        radial-gradient(ellipse 100% 70% at 50% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 60%);
}

[data-bs-theme="light"] body.tiny-body-bg-geek::after {
    background:
        radial-gradient(ellipse 140% 100% at 20% 40%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 120% 90% at 75% 65%, rgba(249, 115, 22, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 110% 110% at 45% 75%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 80% 80% at 60% 30%, rgba(236, 72, 153, 0.03) 0%, transparent 45%);
}

body.tiny-body-bg-light::before {
    background:
        radial-gradient(ellipse 100% 60% at 20% 20%, rgba(148, 163, 184, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 80% 30%, rgba(203, 213, 225, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 90% 70% at 50% 80%, rgba(191, 203, 220, 0.06) 0%, transparent 55%);
    background-size: 100% 100%;
    animation: minimalPulse 20s ease-in-out infinite;
}

body.tiny-body-bg-light::after {
    background:
        radial-gradient(ellipse 70% 40% at 30% 60%, rgba(203, 213, 225, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(191, 203, 220, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 15% 75%, rgba(148, 163, 184, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(100, 116, 139, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 60% 45%, rgba(148, 163, 184, 0.08) 0%, transparent 30%);
    background-size: 100% 100%;
    animation: minimalPulse2 25s ease-in-out infinite;
}

@keyframes minimalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes minimalPulse2 {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

[data-bs-theme="dark"] body.tiny-body-bg-light::before {
    background:
        radial-gradient(ellipse 100% 60% at 20% 20%, rgba(71, 85, 105, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 80% 30%, rgba(100, 116, 139, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 90% 70% at 50% 80%, rgba(51, 65, 85, 0.12) 0%, transparent 55%);
    background-size: 100% 100%;
}

[data-bs-theme="dark"] body.tiny-body-bg-light::after {
    background:
        radial-gradient(ellipse 70% 40% at 30% 60%, rgba(100, 116, 139, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(71, 85, 105, 0.06) 0%, transparent 45%);
    background-size: 100% 100%;
}

[data-bs-theme="light"] body.tiny-body-bg-light::before {
    background:
        radial-gradient(ellipse 100% 60% at 20% 20%, rgba(226, 232, 240, 0.8) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 80% 30%, rgba(241, 245, 249, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse 90% 70% at 50% 80%, rgba(226, 232, 240, 0.6) 0%, transparent 55%);
    background-size: 100% 100%;
}

[data-bs-theme="light"] body.tiny-body-bg-light::after {
    background:
        radial-gradient(ellipse 70% 40% at 30% 60%, rgba(241, 245, 249, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 70% 70%, rgba(226, 232, 240, 0.5) 0%, transparent 45%),
        radial-gradient(circle at 15% 75%, rgba(203, 213, 225, 0.5) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(148, 163, 184, 0.4) 0%, transparent 35%),
        radial-gradient(circle at 60% 45%, rgba(203, 213, 225, 0.35) 0%, transparent 30%);
    background-size: 100% 100%;
}

body.tiny-body-bg-intensity-low::before,
body.tiny-body-bg-intensity-low::after {
    opacity: 0.5 !important;
}

body.tiny-body-bg-intensity-medium::before,
body.tiny-body-bg-intensity-medium::after {
    opacity: 0.75 !important;
}

body.tiny-body-bg-intensity-high::before,
body.tiny-body-bg-intensity-high::after {
    opacity: 1 !important;
}