/* --- Cyberpunk / Neon Night Mode Styles --- */
:root {
    --cp-bg: #020205;         /* 极黑背景 */
    --cp-panel: #090916;      /* 面板黑蓝 */
    --cp-cyan: #00f3ff;       /* 赛博青 */
    --cp-magenta: #bc13fe;    /* 霓虹紫 */
    --cp-yellow: #fcee0a;     /* 警示黄 */
    --cp-grid: rgba(0, 243, 255, 0.05);
    --cp-text-main: #e0e0ff;
    --cp-text-dim: #94a3b8;   /* 修复后的暗文颜色 */
}

/* 仅当 body 拥有 .cyberpunk-mode 类时生效 */
body.cyberpunk-mode {
    background-color: var(--cp-bg) !important;
    
    /* --- 赛博城市夜景背景 (CSS绘制) --- */
    background-image: 
        /* 1. 扫描线网格 (透视感) */
        linear-gradient(transparent 95%, var(--cp-grid) 95%),
        linear-gradient(90deg, transparent 95%, var(--cp-grid) 95%),
        /* 2. 底部城市霓虹光晕 (City Glow) */
        linear-gradient(to top, rgba(188, 19, 254, 0.2) 0%, transparent 40%),
        linear-gradient(to top, rgba(0, 243, 255, 0.1) 0%, transparent 30%),
        /* 3. 顶部暗色压暗 */
        radial-gradient(circle at 50% 0%, #1a1a40 0%, var(--cp-bg) 60%) !important;
        
    background-size: 
        40px 40px, 40px 40px, /* 网格尺寸 */
        100% 100%, 100% 100%, 100% 100% !important;
        
    background-position: center bottom !important;
    background-attachment: fixed !important;
    color: var(--cp-text-main) !important;
    
    /* 鼠标样式 */
    cursor: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 2L2 16L16 30L30 16L16 2Z' stroke='%2300f3ff' stroke-width='2' fill='rgba(0, 243, 255, 0.2)'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23bc13fe'/%3E%3C/svg%3E") 16 16, auto !important;
}

/* --- CRT 扫描线特效层 (增加复古科技感) --- */
body.cyberpunk-mode::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 9999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    opacity: 0.6;
}

/* --- 全局容器覆盖 --- */
body.cyberpunk-mode .bg-white {
    background-color: rgba(9, 9, 22, 0.85) !important; /* 深色半透明面板 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--cp-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15), inset 0 0 20px rgba(0, 243, 255, 0.02) !important;
    color: var(--cp-text-main) !important;
}

/* 修复图片继承容器样式导致溢出/毛玻璃失效的问题 */
body.cyberpunk-mode img.bg-white {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* --- 修复详情页背景 (Critical Fix) --- */
/* 原本是米黄色的区域，现在改为深色透明 */
body.cyberpunk-mode .bg-pop-bg {
    background-color: rgba(0, 20, 40, 0.6) !important;
    border-color: var(--cp-cyan) !important;
    color: var(--cp-text-main) !important;
}

/* 修复浅灰色背景 (如抽奖任务列表 bg-gray-50) */
body.cyberpunk-mode .bg-gray-50 {
    background-color: rgba(20, 20, 35, 0.6) !important;
    border-color: var(--cp-cyan) !important;
    color: var(--cp-text-main) !important;
}
body.cyberpunk-mode .bg-gray-50:hover {
    background-color: rgba(0, 243, 255, 0.1) !important;
}

/* 详情页标签和小块的适配 */
body.cyberpunk-mode .bg-pop-bg .text-pop-text,
body.cyberpunk-mode .bg-pop-bg p {
    color: #ffffff !important;
    text-shadow: none !important;
}

body.cyberpunk-mode nav.bg-white, 
body.cyberpunk-mode footer {
    background-color: rgba(5, 5, 16, 0.95) !important;
    border-color: var(--cp-magenta) !important;
    box-shadow: 0 4px 20px rgba(188, 19, 254, 0.2) !important;
}

/* --- 文字可视性修复 (High Contrast Fixes) --- */
body.cyberpunk-mode .text-pop-text { color: #ffffff !important; text-shadow: 0 0 5px rgba(0, 243, 255, 0.5); }

/* 强制覆盖所有灰色文字，确保在黑背景下可见 */
body.cyberpunk-mode .text-gray-400, 
body.cyberpunk-mode .text-gray-500,
body.cyberpunk-mode .text-gray-600,
body.cyberpunk-mode .text-gray-800 { 
    color: var(--cp-text-dim) !important; 
}

/* 强调文字 */
body.cyberpunk-mode .text-pop-pink { color: var(--cp-magenta) !important; text-shadow: 0 0 8px var(--cp-magenta); }
body.cyberpunk-mode .text-pop-blue-dark { color: var(--cp-cyan) !important; }

/* 边框 */
body.cyberpunk-mode .border-pop-text { 
    border-color: var(--cp-cyan) !important; 
}

/* 阴影改为发光 */
body.cyberpunk-mode .shadow-comic {
    box-shadow: 0 0 8px var(--cp-cyan), 2px 2px 0 var(--cp-magenta) !important;
}
body.cyberpunk-mode .shadow-comic-hover:hover {
    box-shadow: 0 0 15px var(--cp-cyan), 0 0 5px var(--cp-magenta) !important;
}

/* 按钮重定义 */
body.cyberpunk-mode .bg-pop-pink {
    background-color: var(--cp-magenta) !important;
    box-shadow: 0 0 10px var(--cp-magenta) !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}
body.cyberpunk-mode .bg-pop-blue {
    background-color: rgba(0, 243, 255, 0.1) !important;
    border: 2px solid var(--cp-cyan) !important;
    color: var(--cp-cyan) !important;
    box-shadow: 0 0 10px var(--cp-cyan) !important;
}
body.cyberpunk-mode .bg-pop-yellow {
    background-color: var(--cp-yellow) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--cp-yellow) !important;
    text-shadow: none !important;
}

/* Banner 特效 */
body.cyberpunk-mode .bg-pop-purple {
    background: linear-gradient(135deg, #2d0b44 0%, #050510 100%) !important;
    border: 2px solid var(--cp-magenta) !important;
    position: relative;
    overflow: hidden;
}
/* 动态扫描线 Banner 背景 */
body.cyberpunk-mode .bg-pop-purple::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 4px,
        rgba(0, 243, 255, 0.1) 5px
    );
    animation: scanline-move 10s linear infinite;
    pointer-events: none;
}
@keyframes scanline-move {
    0% { transform: translateY(0); }
    100% { transform: translateY(50px); }
}

/* 选中状态 */
body.cyberpunk-mode .category-selected {
    background-color: var(--cp-cyan) !important;
    color: #000 !important;
    border-color: #fff !important;
    box-shadow: 0 0 15px var(--cp-cyan) !important;
    text-shadow: none !important;
}

/* 输入框适配 */
body.cyberpunk-mode input {
    background-color: rgba(0,0,0,0.6) !important;
    color: var(--cp-cyan) !important;
    border-color: var(--cp-magenta) !important;
}
body.cyberpunk-mode input::placeholder { color: rgba(0, 243, 255, 0.4) !important; }

/* 骨架屏适配 */
body.cyberpunk-mode .skeleton {
    background: linear-gradient(90deg, #1a1a2e 25%, #2a2a4e 50%, #1a1a2e 75%) !important;
}

/* --- Toggle Switch Button (Fixed Style) --- */
#cyber-toggle-btn {
    position: relative;
    overflow: hidden;
}
body.cyberpunk-mode #cyber-toggle-btn {
    background-color: var(--cp-panel);
    border-color: var(--cp-cyan);
    color: var(--cp-cyan);
    box-shadow: 0 0 10px var(--cp-cyan);
}
/* 按钮图标闪烁 */
body.cyberpunk-mode #cyber-toggle-btn i {
    animation: neon-flicker 2s infinite alternate;
}
@keyframes neon-flicker {
    0% { opacity: 1; text-shadow: 0 0 5px var(--cp-cyan); }
    100% { opacity: 0.7; text-shadow: 0 0 2px var(--cp-cyan); }
}

/* --- 欢迎语 Toast 升级 --- */
.cyber-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(5, 5, 16, 0.95);
    border: 2px solid var(--cp-cyan);
    padding: 15px 40px;
    color: var(--cp-cyan);
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    z-index: 10000;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4), inset 0 0 10px rgba(0, 243, 255, 0.2);
    text-align: center;
    /* 赛博切角外形 */
    clip-path: polygon(
        10px 0, 100% 0, 
        100% calc(100% - 10px), calc(100% - 10px) 100%, 
        0 100%, 0 10px
    );
}
.cyber-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cyber-toast::before {
    content: 'SYSTEM_MSG_';
    font-size: 10px;
    display: block;
    color: var(--cp-magenta);
    margin-bottom: 5px;
    letter-spacing: 3px;
    border-bottom: 1px solid rgba(188, 19, 254, 0.3);
    padding-bottom: 3px;
}

/* 适配: 如果存在节日装饰层，调整其颜色滤镜以融入赛博风格 */
body.cyberpunk-mode .ny-container,
body.cyberpunk-mode #xm-container,
body.cyberpunk-mode .qm-decor-layer {
    filter: hue-rotate(180deg) contrast(1.2) brightness(1.2);
    opacity: 0.7; 
}