/* Dashboard Themes - UI/UX Pro Max */

/* --- 1. Business Theme (商务) --- */
body.theme-business {
    --color-primary: #D4AF37;
    /* Metallic Gold */
    --color-secondary: #C5A028;
    --color-cta: #1E293B;
    /* Deep Slate */
    --color-cta-hover: #0F172A;
    --color-background: #0B1120;
    --color-surface: #161E2E;
    --color-text: #F8FAFC;
    background-image: linear-gradient(rgba(11, 17, 32, 0.8), rgba(11, 17, 32, 0.8)), url('/image/theme_business_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body.theme-business .feature-card {
    border-radius: 4px;
    /* Sharp professional edges */
    border-color: rgba(212, 175, 55, 0.2);
}

body.theme-business .cosmic-logo-text {
    background: linear-gradient(135deg, #D4AF37 0%, #F97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* --- 2. Tech Theme (科技) --- */
body.theme-tech {
    --color-primary: #06B6D4;
    /* Cyan 500 */
    --color-secondary: #0891B2;
    --color-cta: #3B82F6;
    /* Blue 500 */
    --color-cta-hover: #2563EB;
    --color-background: #020617;
    --color-surface: #0F172A;
    background-image: linear-gradient(rgba(2, 6, 23, 0.7), rgba(2, 6, 23, 0.7)), url('/image/theme_tech_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body.theme-tech .feature-card {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.1);
}

body.theme-tech .feature-card:hover {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
    border-color: #06B6D4;
}

body.theme-tech .font-mono {
    color: #22D3EE;
    text-shadow: 0 0 5px rgba(34, 211, 238, 0.5);
}

/* --- 3. Female Theme (女性) --- */
body.theme-female {
    --color-primary: #DB2777;
    /* Deep Pink 600 */
    --color-secondary: #EC4899;
    --color-cta: #7C3AED;
    --color-cta-hover: #6D28D9;
    --color-background: #FDF2F8;
    --color-surface: rgba(255, 255, 255, 0.95);
    --color-text: #0F172A;
    /* Slate 900: 极高对比度 */
    --color-text-muted: #475569;
    background-image: linear-gradient(rgba(253, 242, 248, 0.5), rgba(253, 242, 248, 0.5)), url('/image/theme_female_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body.theme-female .feature-card {
    border-radius: 24px;
    border-color: #F9A8D4;
    background: rgba(255, 255, 255, 0.9);
}

body.theme-female h1,
body.theme-female h2,
body.theme-female h3 {
    color: #831843 !important;
    /* 深浆果红色，确保标题清晰 */
}

body.theme-female .feature-card:hover {
    border-color: #DB2777;
    box-shadow: 0 20px 40px rgba(219, 39, 119, 0.15);
}

body.theme-female .cosmic-logo-text {
    background: linear-gradient(135deg, #DB2777 0%, #7C3AED 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.theme-female .gradient-bg {
    background: linear-gradient(180deg, rgba(253, 242, 248, 0.1) 0%, rgba(219, 39, 119, 0.05) 100%), var(--color-background);
}

/* 优化 Hero 区域在女性主题下的文字对比度 */
body.theme-female header.gradient-bg,
body.theme-female header.gradient-bg h1,
body.theme-female header.gradient-bg p {
    color: #831843 !important;
    /* 深浆果红 */
}

body.theme-female header.gradient-bg p {
    opacity: 0.95;
}

/* --- 4. Cartoon Theme (卡通) --- */
body.theme-cartoon {
    --color-primary: #FFD60A;
    --color-secondary: #FFC300;
    --color-cta: #D00000;
    /* 高对比度红色 */
    --color-cta-hover: #9D0000;
    --color-background: #BAE6FD;
    /* 稍微深一点的蓝色背景 */
    --color-surface: #FFFFFF;
    --color-text: #000000;
    /* 纯黑文字 */
    --color-text-muted: #1E293B;
    background-image: linear-gradient(rgba(186, 230, 253, 0.4), rgba(186, 230, 253, 0.4)), url('/image/theme_cartoon_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* 优化 Hero 区域在卡通主题下的文字对比度 */
body.theme-cartoon header.gradient-bg,
body.theme-cartoon header.gradient-bg h1,
body.theme-cartoon header.gradient-bg p {
    color: #000000 !important;
    /* 纯黑 */
}

body.theme-cartoon header.gradient-bg p {
    opacity: 1;
    font-weight: 500;
}

body.theme-cartoon .feature-card {
    border-radius: 30px;
    border: 4px solid #000000;
    box-shadow: 8px 8px 0px #000000;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.theme-cartoon h1,
body.theme-cartoon h2,
body.theme-cartoon h3 {
    color: #000000 !important;
}

body.theme-cartoon .feature-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 12px 12px 0px #000000;
}

body.theme-cartoon .feature-card:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0px #000000;
}

body.theme-cartoon .btn-primary {
    border-radius: 12px;
    border: 3px solid #000000;
    box-shadow: 4px 4px 0px #000000;
}

body.theme-cartoon .btn-primary:hover {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0px #000000;
}

body.theme-cartoon .status-indicator {
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4px);
    }
}


/* --- Theme Switcher Component (#07 Holographic Shifter Style) --- */
.theme-switcher-container {
    position: fixed;
    right: 24px;
    /* 靠右 */
    bottom: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    /* 按钮在右，列表在左 */
    align-items: center;
    gap: 15px;
}

.theme-toggle-master {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 25%, #f093fb 50%, #f5576c 75%, #00f2fe 100%);
    background-size: 400% 400%;
    animation: holo-ani 4s linear infinite;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.4), 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1001;
}

@keyframes holo-ani {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 400% 50%;
    }
}

.theme-toggle-master:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 30px rgba(240, 147, 251, 0.6);
}

.theme-toggle-master.active {
    transform: scale(0.95);
    filter: hue-rotate(90deg);
}

.theme-toggle-master i {
    transition: transform 0.4s ease;
}

.theme-toggle-master.active i {
    transform: scale(0.8);
}

.theme-switcher {
    display: flex;
    flex-direction: row;
    gap: 10px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateX(30px) scale(0.9);
    /* 向左滑出 */
    pointer-events: none;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(15px);
    padding: 10px 10px 10px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    /* 为关闭按钮提供定位上下文 */
}

.theme-switcher.open {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.theme-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.theme-btn:hover {
    transform: translateY(-5px) scale(1.1);
    border-color: #00f2fe;
}

.theme-btn.active {
    border: 2px solid #00f2fe;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
}

.theme-btn-business {
    background-image: url('/image/theme_icon_business.png');
}

.theme-btn-tech {
    background-image: url('/image/theme_icon_tech.png');
}

.theme-btn-female {
    background-image: url('/image/theme_icon_female.png');
}

.theme-btn-cartoon {
    background-image: url('/image/theme_icon_cartoon.png');
}

.theme-btn-default {
    background-image: url('/image/theme_icon_default.png');
}

/* 关闭按钮样式 */
.theme-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.theme-close-btn:hover {
    transform: scale(1.2) rotate(90deg);
    background: #ef4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
}