/* ========== 主题切换按钮 - 精确还原 WPF Demo ========== */

.theme-toggle-container {
    display: flex;
    align-items: center;
    margin: 0 8px;
}

.theme-toggle-input {
    display: none !important;
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* 外层容器 100×40 */
.theme-toggle-switch {
    position: relative;
    display: block;
    width: 100px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
    border: 1.8px solid #5C6170;
    box-shadow: 0 0 7px rgba(92, 97, 112, 0.5);
}

/* ===== 背景 backBorder ===== */
.theme-toggle-back {
    position: absolute;
    inset: 0;
    background: #4685C0;
    border-radius: 20px;
    transition: background 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}

.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-back {
    background: #171E33;
}

/* ===== 发光圆 glow1/glow2/glow3 ===== */
.theme-toggle-glow {
    position: absolute;
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}

.theme-toggle-glow-1 {
    width: 79px;
    height: 79px;
    background: rgba(255, 255, 255, 0.07);
}

.theme-toggle-glow-2 {
    width: 67px;
    height: 67px;
    background: rgba(255, 255, 255, 0.13);
}

.theme-toggle-glow-3 {
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.13);
}

/* 黑夜模式：发光圆右移（带回弹） */
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-glow-1 {
    transform: translateY(-50%) translateX(21px);
}
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-glow-2 {
    transform: translateY(-50%) translateX(33px);
}
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-glow-3 {
    transform: translateY(-50%) translateX(45px);
}

/* ===== 星星 Canvas ===== */
.theme-toggle-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translateY(-36px);
    transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}

.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-stars {
    transform: translateY(0);
}

/* 星星使用 WPF starGeometry 四角星形状 */
.theme-toggle-star {
    position: absolute;
    background: white;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
    opacity: 0;
    transform: scale(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.theme-toggle-star-1  { width: 7px; height: 7px; left: 20.6px; top: 5.5px; }
.theme-toggle-star-2  { width: 7px; height: 7px; left: 48.5px; top: 10px; }
.theme-toggle-star-3  { width: 5px; height: 5px; left: 24.6px; top: 26.5px; }
.theme-toggle-star-4  { width: 3px; height: 3px; left: 10px; top: 11px; }
.theme-toggle-star-5  { width: 5px; height: 5px; left: 44.5px; top: 29.5px; }
.theme-toggle-star-6  { width: 3px; height: 3px; left: 32.3px; top: 12.5px; }
.theme-toggle-star-7  { width: 3px; height: 3px; left: 23.6px; top: 18px; }
.theme-toggle-star-8  { width: 3px; height: 3px; left: 34px; top: 24px; }
.theme-toggle-star-9  { width: 3px; height: 3px; left: 47px; top: 22.5px; }
.theme-toggle-star-10 { width: 3px; height: 3px; left: 39.5px; top: 8px; }
.theme-toggle-star-11 { width: 5px; height: 5px; left: 11.5px; top: 26.5px; }

.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-star {
    opacity: 1;
    transform: scale(1);
}

/* 星星闪烁 */
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-star-1 {
    animation: starBlink1 3.6s ease-in-out infinite;
}
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-star-2 {
    animation: starBlink2 3.6s ease-in-out infinite;
}
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-star-3 {
    animation: starBlink3 3.6s ease-in-out infinite;
}
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-star-4 {
    animation: starBlink4 3.6s ease-in-out infinite;
}
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-star-5 {
    animation: starBlink5 3.6s ease-in-out infinite;
}

@keyframes starBlink1 {
    0%,36%,69%,100% { opacity: 1; transform: scale(1); }
    52% { opacity: 0; transform: scale(0); }
}
@keyframes starBlink2 {
    0%,44%,78%,100% { opacity: 1; transform: scale(1); }
    61% { opacity: 0; transform: scale(0); }
}
@keyframes starBlink3 {
    0%,56%,86%,100% { opacity: 1; transform: scale(1); }
    69% { opacity: 0; transform: scale(0); }
}
@keyframes starBlink4 {
    0%,61%,92%,100% { opacity: 1; transform: scale(1); }
    75% { opacity: 0; transform: scale(0); }
}
@keyframes starBlink5 {
    0%,72%,100% { opacity: 1; transform: scale(1); }
    83% { opacity: 0; transform: scale(0); }
}

/* ===== 云朵 cloud1/cloud2 ===== */
.theme-toggle-cloud {
    position: absolute;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}

.theme-toggle-cloud-1 {
    width: 100px;
    height: 40px;
    top: 2px;
    left: 2px;
    opacity: 0.53;
    transform: translateY(0);
}

.theme-toggle-cloud-2 {
    width: 100px;
    height: 40px;
    top: 8px;
    left: 2px;
    opacity: 1;
    transform: translateY(0);
}

.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-cloud-1 {
    transform: translateY(34px);
    animation: none;
}
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-cloud-2 {
    transform: translateY(26px);
    animation: none;
}

/* 云朵浮动动画（仅白天模式） */
.theme-toggle-input:not(:checked) + .theme-toggle-switch .theme-toggle-cloud-1 {
    animation: cloudFloat1 3.6s ease-in-out infinite;
}
.theme-toggle-input:not(:checked) + .theme-toggle-switch .theme-toggle-cloud-2 {
    animation: cloudFloat2 2.8s ease-in-out infinite;
}

@keyframes cloudFloat1 {
    0%, 100% { transform: translateY(0); }
    17% { transform: translateY(-6px); }
    67% { transform: translateY(4px); }
}

@keyframes cloudFloat2 {
    0%, 100% { transform: translateY(0); }
    21% { transform: translateY(-4px); }
    64% { transform: translateY(3px); }
}

/* ===== 滑块 thumb（36×38 圆角矩形，白色背景） ===== */
.theme-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 4px;
    width: 36px;
    height: 38px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}

.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-thumb {
    transform: translateX(59px);
}

/* 滑块底部阴影（径向渐变） */
.theme-toggle-thumb-shadow {
    position: absolute;
    top: 2px;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.9) 100%);
    z-index: 11;
    pointer-events: none;
}

/* ===== 太阳 sun（33×33） ===== */
.theme-toggle-sun {
    position: absolute;
    top: 2px;
    left: 1.5px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: #F3C62B;
    overflow: hidden;
    z-index: 12;
    transition: opacity 0.3s ease, transform 0.6s ease;
}

/* 黑夜模式隐藏太阳 */
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-sun {
    opacity: 0;
}

/* 太阳高光弧线（左上角白色渐变） */
.theme-toggle-sun-highlight {
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    width: 29px;
    height: 29px;
    z-index: 13;
    pointer-events: none;
    transform: rotate(2deg);
}

/* 太阳暗影弧线（右下角黑色渐变） */
.theme-toggle-sun-shadow {
    position: absolute;
    right: -0.6px;
    bottom: -2.2px;
    width: 25px;
    height: 25px;
    z-index: 13;
    pointer-events: none;
    transform: rotate(200deg);
}

/* ===== 月亮 moon（33×33，初始在 thumb 右侧外面 X=34） ===== */
.theme-toggle-moon {
    position: absolute;
    top: 2px;
    left: 1.5px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: #C4C9D4;
    overflow: hidden;
    z-index: 12;
    opacity: 0;
    transform: translateX(34px);
    transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1),
                opacity 0.3s ease;
    /* WPF DropShadowEffect: BlurRadius=4, ShadowDepth=2, Color=Gray */
    box-shadow: 0 2px 4px rgba(128, 128, 128, 0.6);
}

/* 黑夜模式：月亮滑入 thumb 内 */
.theme-toggle-input:checked + .theme-toggle-switch .theme-toggle-moon {
    opacity: 1;
    transform: translateX(0);
}

/* 月亮高光弧线 */
.theme-toggle-moon-highlight {
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    width: 29px;
    height: 29px;
    z-index: 13;
    pointer-events: none;
    transform: rotate(2deg);
}

/* 月亮暗影弧线 */
.theme-toggle-moon-shadow {
    position: absolute;
    right: -1px;
    bottom: -2px;
    width: 25px;
    height: 25px;
    z-index: 13;
    pointer-events: none;
    transform: rotate(192deg);
}

/* 月亮陨石坑 */
.theme-toggle-moon-crater {
    position: absolute;
    background: #9A9FB2;
    border-radius: 50%;
    border: 0.5px solid rgba(0,0,0,0.4);
}

.theme-toggle-moon-crater-1 { width: 10px; height: 10px; top: 14px; left: 6px; }
.theme-toggle-moon-crater-2 { width: 6px; height: 6px; top: 5px; left: 13px; }
.theme-toggle-moon-crater-3 { width: 7px; height: 7px; top: 18px; left: 20px; }

/* ===== 悬停效果 ===== */

/* 悬停高光蒙版 */
.theme-toggle-highlight {
    position: absolute;
    top: 2px;
    left: 1.5px;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.44), transparent);
    z-index: 14;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* 悬停时太阳旋转 30° + 高光亮起 */
.theme-toggle-switch:hover .theme-toggle-sun {
    transform: rotate(30deg);
}
.theme-toggle-switch:hover .theme-toggle-highlight {
    opacity: 1;
}