/* ================================================================
   theme-cyber.css —— 赛博朋克主题
   正统霓虹 / 故障 / CRT 扫描线
   ================================================================ */

body.theme-cyber {
    --cy: 0, 245, 255;
    --mg: 255, 0, 170;
    --yl: 255, 214, 0;
    background: #05010f;
}

/* ---- 暗角 ---- */
body.theme-cyber::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 49;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 48%,
        rgba(0, 0, 0, 0) 30%,
        rgba(10, 0, 28, 0.42) 72%,
        rgba(2, 0, 8, 0.88) 100%);
}

/* ---- CRT 扫描线 + 屏幕边缘色晕 ---- */
body.theme-cyber::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.34) 0px,
            rgba(0, 0, 0, 0.34) 1px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0) 3px
        ),
        linear-gradient(
            to bottom,
            rgba(255, 0, 170, 0.05) 0%,
            rgba(0, 0, 0, 0) 12%,
            rgba(0, 0, 0, 0) 88%,
            rgba(0, 245, 255, 0.05) 100%
        );
    opacity: 0.6;
    animation: crtFlicker 4s steps(1) infinite;
}

@keyframes crtFlicker {
    0%, 95%, 100% { opacity: 0.60; }
    96%           { opacity: 0.44; }
    97%           { opacity: 0.66; }
    98%           { opacity: 0.52; }
}

/* ---- 加载闪屏 ---- */
body.theme-cyber .loading-shimmer {
    background: #05010f;
    color: rgba(0, 245, 255, 0.35);
    letter-spacing: 10px;
    text-shadow:
        0 0 24px rgba(0, 245, 255, 0.60),
        0 0 60px rgba(255, 0, 170, 0.45);
}

/* ---- 日期：终端状态栏 ---- */
body.theme-cyber .date-display {
    color: rgba(200, 255, 255, 0.92);
    letter-spacing: 5px;
    font-family: 'Courier New', monospace;
    font-weight: 500;
    border-radius: 4px;
    background: rgba(10, 0, 26, 0.80);
    border: 1px solid rgba(0, 245, 255, 0.38);
    text-shadow:
        0 0 8px rgba(0, 245, 255, 0.95),
        0 0 26px rgba(0, 245, 255, 0.45),
        -1px 0 0 rgba(255, 0, 170, 0.70);
    box-shadow:
        0 0 18px rgba(0, 245, 255, 0.18),
        inset 0 0 24px rgba(255, 0, 170, 0.12);
}

body.theme-cyber .date-display::before {
    content: '▸ ';
    color: rgba(255, 0, 170, 0.95);
    text-shadow: 0 0 12px rgba(255, 0, 170, 0.85);
}

/* ---- 时钟主体 ---- */
body.theme-cyber .clock {
    background:
        linear-gradient(180deg, rgba(255, 0, 170, 0.06), rgba(0, 245, 255, 0.05)),
        rgba(8, 0, 22, 0.84);
    border: 1px solid rgba(0, 245, 255, 0.32);
    box-shadow:
        0 0 26px rgba(0, 245, 255, 0.16),
        0 0 70px rgba(255, 0, 170, 0.14),
        0 24px 90px rgba(0, 0, 0, 0.95),
        inset 0 0 80px rgba(255, 0, 170, 0.07);
}

/* ---- 翻牌卡片 ---- */
body.theme-cyber .flip-card {
    box-shadow:
        0 0 16px rgba(0, 245, 255, 0.14),
        0 6px 30px rgba(0, 0, 0, 0.85);
}

body.theme-cyber .flip-face {
    border-radius: 10px;
    background: linear-gradient(160deg, #150031 0%, #0a0018 55%, #04000c 100%);
    border: 1px solid rgba(0, 245, 255, 0.35);
    box-shadow:
        inset 0 0 30px rgba(0, 245, 255, 0.08),
        inset 0 -16px 34px rgba(255, 0, 170, 0.10),
        0 0 14px rgba(0, 245, 255, 0.15);
}

body.theme-cyber .flip-back {
    background: linear-gradient(160deg, #0a0018, #04000c);
    border-color: rgba(255, 0, 170, 0.40);
    box-shadow:
        inset 0 0 30px rgba(255, 0, 170, 0.10),
        0 0 16px rgba(255, 0, 170, 0.18);
}

/* 面板内部细密扫描线 */
body.theme-cyber .flip-face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 245, 255, 0.05) 0px,
        rgba(0, 245, 255, 0.05) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 4px
    );
}

/* ---- 数字：霓虹 + RGB 色差故障 ---- */
body.theme-cyber .digit {
    color: #b9fbff;
    animation: cyberGlitch 3.6s ease-in-out infinite;
}

@keyframes cyberGlitch {
    0%, 100% {
        text-shadow:
            -2px 0 rgba(255, 0, 170, 0.85),
            2px 0 rgba(0, 245, 255, 0.85),
            0 0 10px rgba(0, 245, 255, 0.80),
            0 0 28px rgba(0, 245, 255, 0.40),
            0 0 60px rgba(255, 0, 170, 0.35);
    }
    18% {
        text-shadow:
            -3px 1px rgba(255, 0, 170, 1),
            3px -1px rgba(0, 245, 255, 1),
            0 0 14px rgba(0, 245, 255, 0.95),
            0 0 36px rgba(0, 245, 255, 0.50),
            0 0 76px rgba(255, 0, 170, 0.45);
    }
    20% {
        text-shadow:
            2px 0 rgba(255, 0, 170, 0.90),
            -2px 0 rgba(0, 245, 255, 0.90),
            0 0 12px rgba(0, 245, 255, 0.90),
            0 0 30px rgba(255, 0, 170, 0.45),
            0 0 66px rgba(0, 245, 255, 0.35);
    }
    55% {
        text-shadow:
            -2px 0 rgba(255, 0, 170, 0.95),
            2px 0 rgba(0, 245, 255, 0.95),
            0 0 12px rgba(0, 245, 255, 0.90),
            0 0 34px rgba(0, 245, 255, 0.45),
            0 0 70px rgba(255, 0, 170, 0.40);
    }
    57% {
        text-shadow:
            1px 0 rgba(255, 214, 0, 0.90),
            -1px 0 rgba(0, 245, 255, 0.90),
            0 0 14px rgba(0, 245, 255, 0.85),
            0 0 30px rgba(255, 0, 170, 0.50);
    }
}

body.theme-cyber .flip-card.flipping .digit {
    filter: brightness(1.55) saturate(1.45);
}

/* ---- 卡片中线：霓虹灯管 ---- */
body.theme-cyber .flip-unit::after {
    height: 2px;
    opacity: 0.9;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 245, 255, 0.85),
        rgba(255, 0, 170, 0.95),
        rgba(0, 245, 255, 0.85),
        transparent);
    box-shadow:
        0 0 16px rgba(0, 245, 255, 0.65),
        0 0 34px rgba(255, 0, 170, 0.45);
}

body.theme-cyber .flip-unit::before {
    opacity: 0.65;
    background: radial-gradient(ellipse at center, rgba(255, 0, 170, 0.20) 0%, transparent 70%);
}

/* ---- 冒号：霓虹闪烁 ---- */
body.theme-cyber .colon {
    color: #ff44dd;
    animation: colonPulseCyber 0.95s ease-in-out infinite alternate;
}

@keyframes colonPulseCyber {
    0% {
        opacity: 0.28;
        text-shadow: 0 0 8px rgba(255, 0, 170, 0.35);
    }
    100% {
        opacity: 1;
        text-shadow:
            0 0 14px rgba(255, 0, 170, 1),
            0 0 36px rgba(255, 0, 170, 0.60),
            0 0 70px rgba(0, 245, 255, 0.45);
    }
}

/* ---- 悬浮按钮 ---- */
body.theme-cyber .fullscreen-btn,
body.theme-cyber .settings-btn {
    background: rgba(12, 0, 28, 0.82);
    border: 1px solid rgba(0, 245, 255, 0.32);
    color: rgba(0, 245, 255, 0.85);
    box-shadow:
        0 0 18px rgba(0, 245, 255, 0.14),
        0 4px 26px rgba(0, 0, 0, 0.70);
}

body.theme-cyber .fullscreen-btn:hover,
body.theme-cyber .settings-btn:hover {
    background: rgba(40, 0, 70, 0.85);
    border-color: rgba(255, 0, 170, 0.60);
    color: #fff;
    box-shadow:
        0 0 22px rgba(255, 0, 170, 0.45),
        0 0 50px rgba(0, 245, 255, 0.25);
}

/* ---- 设置面板：终端控制台 ---- */
body.theme-cyber .settings-panel {
    background: rgba(10, 0, 24, 0.92);
    border: 1px solid rgba(0, 245, 255, 0.35);
    border-radius: 8px;
    box-shadow:
        0 0 26px rgba(0, 245, 255, 0.18),
        0 0 60px rgba(255, 0, 170, 0.16),
        0 20px 60px rgba(0, 0, 0, 0.85);
}

body.theme-cyber .settings-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 245, 255, 0.9),
        rgba(255, 0, 170, 0.9),
        transparent);
    box-shadow: 0 0 14px rgba(0, 245, 255, 0.70);
}

body.theme-cyber .panel-title {
    color: rgba(0, 245, 255, 0.85);
    text-shadow: 0 0 14px rgba(0, 245, 255, 0.55);
}

body.theme-cyber .panel-label {
    color: rgba(255, 90, 220, 0.65);
}

body.theme-cyber .theme-option {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 245, 255, 0.14);
    color: rgba(210, 235, 255, 0.80);
}

body.theme-cyber .theme-option:hover {
    background: rgba(0, 245, 255, 0.10);
    border-color: rgba(0, 245, 255, 0.55);
    color: #fff;
    box-shadow: 0 0 18px rgba(0, 245, 255, 0.22);
}

body.theme-cyber .theme-option.is-active {
    border-color: rgba(255, 0, 170, 0.70);
    background: rgba(255, 0, 170, 0.14);
    color: #fff;
    box-shadow:
        0 0 22px rgba(255, 0, 170, 0.35),
        inset 0 0 18px rgba(0, 245, 255, 0.08);
}

body.theme-cyber .theme-check {
    color: #00f5ff;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.90);
}