/* 四季主题变量。业务组件只引用变量，不依赖具体季节。 */
:root[data-season="spring"] {
    --primary: #4f8f55;
    --secondary: #e58c9f;
    --accent: #2f6f45;
    --bg-primary: #edf5e8;
    --bg-secondary: #d9ead2;
    --bg-tertiary: #b9d5af;
    --text-primary: #24412d;
    --text-secondary: #4e6d55;
    --card-bg: rgba(250, 255, 247, 0.92);
    --input-bg: rgba(255, 255, 255, 0.94);
    --border-color: rgba(47, 111, 69, 0.24);
    --glow-primary: rgba(79, 143, 85, 0.28);
    --glow-secondary: rgba(229, 140, 159, 0.26);
    --overlay-bg: rgba(35, 67, 43, 0.50);
    --surface-shadow: rgba(47, 111, 69, 0.18);
    --control-shadow: rgba(47, 111, 69, 0.12);
    --button-shadow: rgba(47, 111, 69, 0.40);
    --button-hover-shadow: rgba(47, 111, 69, 0.58);
    --accent-wash: rgba(79, 143, 85, 0.16);
    --button-text: #ffffff;
    --toggle-off-bg: #b9d5af;
    --toggle-on-bg: #4f8f55;
    --toggle-knob: #ffffff;
    --notification-text: #f8fff8;
    --exclude-button-bg: #f4fbf1;
    --exclude-button-text: #24412d;
}

:root[data-season="summer"] {
    --primary: #247fa3;
    --secondary: #f2a33a;
    --accent: #135c7c;
    --bg-primary: #e8f5fa;
    --bg-secondary: #c7e6ef;
    --bg-tertiary: #9bcbd8;
    --text-primary: #153746;
    --text-secondary: #3e6573;
    --card-bg: rgba(248, 253, 255, 0.92);
    --input-bg: rgba(255, 255, 255, 0.94);
    --border-color: rgba(19, 92, 124, 0.24);
    --glow-primary: rgba(36, 127, 163, 0.28);
    --glow-secondary: rgba(242, 163, 58, 0.28);
    --overlay-bg: rgba(13, 58, 79, 0.52);
    --surface-shadow: rgba(19, 92, 124, 0.18);
    --control-shadow: rgba(19, 92, 124, 0.12);
    --button-shadow: rgba(19, 92, 124, 0.42);
    --button-hover-shadow: rgba(19, 92, 124, 0.60);
    --accent-wash: rgba(36, 127, 163, 0.16);
    --button-text: #ffffff;
    --toggle-off-bg: #9bcbd8;
    --toggle-on-bg: #247fa3;
    --toggle-knob: #ffffff;
    --notification-text: #f5fcff;
    --exclude-button-bg: #f2fbff;
    --exclude-button-text: #153746;
}

:root[data-season="autumn"] {
    --primary: #a94f2a;
    --secondary: #c8872d;
    --accent: #7d351e;
    --bg-primary: #f5efe2;
    --bg-secondary: #ead2ad;
    --bg-tertiary: #d5ae78;
    --text-primary: #382319;
    --text-secondary: #69452e;
    --card-bg: rgba(255, 250, 241, 0.90);
    --input-bg: rgba(255, 255, 255, 0.92);
    --border-color: rgba(125, 53, 30, 0.24);
    --glow-primary: rgba(169, 79, 42, 0.32);
    --glow-secondary: rgba(200, 135, 45, 0.30);
    --overlay-bg: rgba(56, 35, 25, 0.58);
    --surface-shadow: rgba(93, 47, 13, 0.18);
    --control-shadow: rgba(93, 47, 13, 0.12);
    --button-shadow: rgba(210, 105, 30, 0.45);
    --button-hover-shadow: rgba(210, 105, 30, 0.65);
    --accent-wash: rgba(224, 142, 11, 0.16);
    --button-text: #ffffff;
    --toggle-off-bg: #e8b878;
    --toggle-on-bg: #a94f2a;
    --toggle-knob: #ffffff;
    --notification-text: #fffaf2;
    --exclude-button-bg: #fff8eb;
    --exclude-button-text: #5a2c17;
}

:root[data-season="winter"] {
    --primary: #5fa5d8;
    --secondary: #b8ddf5;
    --accent: #d7efff;
    --bg-primary: #0c1726;
    --bg-secondary: #1a3048;
    --bg-tertiary: #2a4862;
    --text-primary: #edf8ff;
    --text-secondary: #b9d0e3;
    --card-bg: rgba(18, 34, 52, 0.92);
    --input-bg: rgba(29, 51, 72, 0.96);
    --border-color: rgba(159, 209, 241, 0.30);
    --glow-primary: rgba(95, 165, 216, 0.34);
    --glow-secondary: rgba(184, 221, 245, 0.30);
    --overlay-bg: rgba(3, 9, 18, 0.78);
    --surface-shadow: rgba(2, 10, 22, 0.56);
    --control-shadow: rgba(2, 10, 22, 0.44);
    --button-shadow: rgba(46, 126, 187, 0.48);
    --button-hover-shadow: rgba(95, 165, 216, 0.68);
    --accent-wash: rgba(95, 165, 216, 0.20);
    --button-text: #071321;
    --toggle-off-bg: #2a4862;
    --toggle-on-bg: #5fa5d8;
    --toggle-knob: #edf8ff;
    --notification-text: #f3fbff;
    --exclude-button-bg: #eaf6ff;
    --exclude-button-text: #15324a;
}

:root[data-season="winter"] .season-option.active {
    color: #071321;
}

body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    transition: background 0.35s ease, color 0.35s ease;
}

.cover-overlay {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* 主题化公共阴影、焦点环和弹窗遮罩，避免组件沿用秋季棕金色。 */
.modal-overlay {
    background: var(--overlay-bg);
}

.header-action,
.controls,
.animation-area,
.modal,
.changelog-modal,
.gender-modal,
.result-card,
.history-item {
    box-shadow: 0 10px 30px var(--surface-shadow), 0 0 22px var(--glow-primary);
}

.header-action {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.header-action:hover {
    background: var(--card-bg);
    border-color: var(--accent);
    box-shadow: 0 6px 16px var(--surface-shadow), 0 0 14px var(--glow-primary);
}

.header-action:focus-visible,
input:focus,
select:focus {
    outline-color: var(--secondary);
    box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--glow-primary);
}

.enter-btn {
    color: var(--accent);
    background: color-mix(in srgb, var(--card-bg) 48%, transparent);
    border-color: var(--border-color);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.34), 0 8px 20px var(--button-shadow);
}

.enter-btn:hover {
    background: color-mix(in srgb, var(--card-bg) 68%, transparent);
    border-color: var(--secondary);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.44), 0 12px 28px var(--button-hover-shadow);
}

.loading-progress {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--card-bg) 72%, transparent);
    box-shadow: inset 0 1px 3px var(--control-shadow), 0 8px 20px var(--surface-shadow);
}

.loading-progress-fill {
    box-shadow: 0 0 14px var(--glow-primary);
}

.cover-title,
.flashing-name {
    text-shadow: 0 0 18px var(--glow-primary);
}

h1 {
    text-shadow: 0 0 14px var(--glow-primary);
}

.cover-cursor {
    background: var(--accent);
    box-shadow: 0 0 10px var(--glow-primary);
}

input,
select {
    border-color: var(--border-color);
    box-shadow: 0 2px 6px var(--control-shadow);
}

button {
    box-shadow: 0 4px 15px var(--button-shadow);
}

button:hover {
    box-shadow: 0 7px 20px var(--button-hover-shadow);
}

.copy-btn,
.reset-btn {
    background: var(--accent);
    background-image: none;
    box-shadow: 0 4px 15px var(--button-shadow);
}

.copy-btn:hover,
.reset-btn:hover {
    background: var(--primary);
    background-image: none;
    box-shadow: 0 7px 20px var(--button-hover-shadow);
}

.controls:hover {
    transform: none;
    box-shadow: 0 10px 30px var(--surface-shadow), 0 0 22px var(--glow-primary);
}

.controls::before {
    display: none;
}

.slider {
    background-color: var(--toggle-off-bg);
}

input:checked + .slider {
    background: var(--toggle-on-bg);
}

.slider:before {
    background-color: var(--toggle-knob);
}

.modal::before,
.gender-modal::before {
    background: linear-gradient(90deg, var(--accent), var(--secondary));
}

.exclude-list,
.reset-option,
.gender-info {
    background: color-mix(in srgb, var(--card-bg) 70%, var(--accent-wash));
    border-color: var(--border-color);
    box-shadow: inset 0 0 8px var(--control-shadow);
}

.exclude-item {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 6px var(--control-shadow);
}

.exclude-item:hover,
.reset-option:hover {
    background: color-mix(in srgb, var(--card-bg) 78%, var(--accent-wash));
    border-color: var(--accent);
    box-shadow: 0 8px 18px var(--surface-shadow), 0 0 0 2px var(--glow-primary);
}

.result-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--secondary) 18%, transparent));
}

.result-card:hover {
    box-shadow: 0 10px 25px var(--surface-shadow), 0 0 15px var(--glow-primary);
}

.notification {
    color: var(--notification-text);
    box-shadow: 0 5px 15px var(--surface-shadow), 0 0 12px var(--glow-primary);
    border-color: var(--border-color);
}

.copy-area {
    background: color-mix(in srgb, var(--card-bg) 82%, var(--accent-wash));
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: 0 8px 22px var(--surface-shadow);
}

.changelog-content::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--accent-wash) 72%, transparent);
}

.male-indicator,
.female-indicator {
    background: color-mix(in srgb, var(--accent-wash) 82%, transparent);
    color: var(--accent);
    border-color: var(--border-color);
}

.flashing-name {
    color: var(--accent);
}

@keyframes nameGlow {
    0% { text-shadow: 0 0 10px var(--glow-secondary), 0 0 20px var(--glow-primary); }
    100% { text-shadow: 0 0 20px var(--glow-secondary), 0 0 32px var(--glow-primary); }
}

.season-snow {
    background: radial-gradient(circle at 35% 30%, #ffffff, rgba(236, 249, 255, 0.94) 42%, rgba(111, 181, 228, 0.62));
    box-shadow: 0 0 12px rgba(216, 243, 255, 0.96), 0 0 24px rgba(111, 181, 228, 0.52);
}

.season-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.season-switcher-label { font-weight: 600; }

.theme-control {
    position: relative;
}

.theme-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    display: none;
    min-width: 218px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    box-shadow: 0 12px 28px var(--surface-shadow), 0 0 18px var(--glow-primary);
}

.theme-popover.is-open {
    display: block;
    animation: themePopoverIn 0.2s ease both;
}

.theme-popover-title {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.theme-popover .season-options {
    width: 100%;
    justify-content: space-between;
    background: color-mix(in srgb, var(--accent-wash) 55%, transparent);
}

.theme-popover .season-option {
    flex: 1;
    min-width: 0;
}

.theme-popover .season-mode-status {
    display: block;
    min-width: 0;
    margin-top: 8px;
    color: var(--text-secondary);
    text-align: left;
}

@keyframes themePopoverIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.exclude-toggle,
.exclude-toggle:hover,
.header-action.exclude-toggle.active {
    background: var(--exclude-button-bg) !important;
    color: var(--exclude-button-text) !important;
    border-color: color-mix(in srgb, var(--exclude-button-text) 22%, transparent);
}

.theme-toggle,
.theme-toggle:hover,
.theme-toggle.active {
    background: var(--exclude-button-bg) !important;
    color: var(--exclude-button-text) !important;
    border-color: color-mix(in srgb, var(--exclude-button-text) 22%, transparent);
}

.footer-season-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 5px;
    color: var(--accent);
    font-size: 0.8rem;
}

.footer-changelog,
.footer-changelog:hover,
.footer-changelog:active {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--accent) !important;
    box-shadow: none;
    font: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-changelog span {
    margin-right: 4px;
    text-decoration: none;
}

.season-options {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
}

.season-option {
    width: auto;
    min-width: 42px;
    padding: 7px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
    font-size: 0.88rem;
}

.season-option:hover,
.season-option.active {
    background: var(--accent);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.season-mode-status {
    min-width: 82px;
    text-align: left;
    font-size: 0.82rem;
}

body,
.cover-overlay,
.controls,
.animation-area,
.modal,
.changelog-modal,
.gender-modal,
.result-card,
.history-item,
input,
select,
.season-options {
    transition-property: background, background-color, color, border-color, box-shadow;
    transition-duration: 0.42s;
    transition-timing-function: ease;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    transition: opacity 0.22s ease;
}

html.season-transition body::after {
    opacity: 0.16;
}

.season-petal,
.summer-spark,
.summer-drop,
.summer-bubble,
.season-snow {
    position: absolute;
    top: -10vh;
    display: block;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}

.season-petal {
    width: var(--particle-size, 18px);
    height: calc(var(--particle-size, 18px) * 0.64);
    opacity: var(--particle-opacity, 0.42);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(135deg, #f5b7c5, #d86f91);
    box-shadow: 0 2px 8px rgba(143, 74, 95, 0.18);
}

.season-petal::after {
    content: '';
    position: absolute;
    left: 46%;
    top: 20%;
    width: 1px;
    height: 70%;
    background: rgba(255, 255, 255, 0.62);
    transform: rotate(28deg);
}

.season-petal.petal-b {
    border-radius: 0 100% 0 100%;
    background: linear-gradient(135deg, #ffd0dc, #e78ca6);
}

.season-petal.petal-c {
    width: calc(var(--particle-size, 18px) * 0.78);
    height: calc(var(--particle-size, 18px) * 0.78);
    border-radius: 50% 8% 50% 8%;
    background: linear-gradient(135deg, #f3c4d0, #d77e98);
}

@keyframes petalFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(var(--start-rot)); opacity: 0; }
    12% { opacity: var(--particle-opacity, 0.42); }
    86% { opacity: var(--particle-opacity, 0.42); }
    100% { transform: translate3d(var(--drift), 112vh, 0) rotate(var(--rot-end)); opacity: 0; }
}

.summer-spark {
    width: calc(var(--particle-size, 18px) * 0.36);
    height: calc(var(--particle-size, 18px) * 0.36);
    border-radius: 50%;
    opacity: var(--particle-opacity, 0.48);
    background: #fff7cf;
    box-shadow: 0 0 12px rgba(255, 220, 112, 0.86), 0 0 22px rgba(255, 255, 255, 0.56);
}

.summer-bubble {
    top: 105vh;
    width: var(--particle-size, 18px);
    height: var(--particle-size, 18px);
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    opacity: var(--particle-opacity, 0.56);
    background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.8), rgba(130, 211, 232, 0.22) 42%, rgba(36, 127, 163, 0.08) 72%);
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.42), 0 0 10px rgba(92, 194, 224, 0.38);
}

@keyframes bubbleRise {
    0% { transform: translate3d(0, 0, 0) scale(0.72); opacity: 0; }
    10% { opacity: var(--particle-opacity, 0.56); }
    52% { transform: translate3d(var(--drift), -112vh, 0) scale(1); }
    88% { opacity: var(--particle-opacity, 0.56); }
    100% { transform: translate3d(calc(var(--drift) * -0.45), -224vh, 0) scale(1.16); opacity: 0; }
}

@keyframes sparkFloat {
    0%, 100% { transform: translate3d(0, 105vh, 0) scale(0.72); opacity: 0; }
    24%, 76% { opacity: var(--particle-opacity, 0.48); }
    50% { transform: translate3d(var(--drift), 42vh, 0) scale(1.18); }
}

.summer-drop {
    width: calc(var(--particle-size, 18px) * 0.56);
    height: calc(var(--particle-size, 18px) * 0.86);
    border-radius: 55% 55% 58% 0;
    opacity: var(--particle-opacity, 0.36);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(60, 165, 196, 0.72));
    box-shadow: 0 2px 8px rgba(27, 109, 139, 0.18);
    transform: rotate(45deg);
}

@keyframes dropFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(45deg); opacity: 0; }
    14% { opacity: var(--particle-opacity, 0.36); }
    88% { opacity: var(--particle-opacity, 0.36); }
    100% { transform: translate3d(var(--drift), 112vh, 0) rotate(45deg); opacity: 0; }
}

.season-snow {
    width: var(--particle-size, 18px);
    height: var(--particle-size, 18px);
    opacity: var(--particle-opacity, 0.52);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, 0.72) 45%, rgba(157, 193, 221, 0.42));
    box-shadow: 0 0 9px rgba(255, 255, 255, 0.82);
}

.season-snow.snow-b { transform: scale(0.72); }
.season-snow.snow-c { transform: scale(1.24); }

@keyframes snowFall {
    0% { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
    12% { opacity: var(--particle-opacity, 0.52); }
    88% { opacity: var(--particle-opacity, 0.52); }
    100% { transform: translate3d(var(--drift), 112vh, 0) rotate(280deg); opacity: 0; }
}

@media (max-width: 600px) {
    .season-switcher { flex-wrap: wrap; }
    .season-mode-status { flex-basis: 100%; text-align: center; }
    .season-option { min-width: 38px; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .cover-overlay,
    .controls,
    .animation-area,
    .modal,
    .changelog-modal,
    .gender-modal,
    .result-card,
    .history-item,
    input,
    select,
    .season-options {
        transition: none;
    }
    body::after { display: none; }
}

/* 所有按钮使用当前主题的纯色，不使用渐变背景。 */
button,
button:hover,
button:active,
button:disabled,
button:disabled:hover {
    background-image: none !important;
}

button:not(.season-option):not(.enter-btn):not(:disabled):not(.exclude-toggle):not(.theme-toggle):not(.footer-changelog) {
    background-color: var(--accent) !important;
    color: var(--button-text) !important;
}

button:not(.season-option):not(.enter-btn):not(:disabled):not(.exclude-toggle):not(.theme-toggle):not(.footer-changelog):hover {
    background-color: var(--primary) !important;
    color: var(--button-text) !important;
}

button:not(.season-option):not(.enter-btn):not(.exclude-toggle):not(.theme-toggle):not(.footer-changelog):disabled,
button:not(.season-option):not(.enter-btn):not(.exclude-toggle):not(.theme-toggle):not(.footer-changelog):disabled:hover {
    background-color: var(--bg-tertiary) !important;
}

.enter-btn,
.enter-btn:hover {
    background-image: none !important;
}

.season-option {
    background-color: transparent !important;
}

.season-option:hover,
.season-option.active {
    background-color: var(--accent) !important;
}

:root[data-season="winter"] .season-option.active {
    background-color: var(--secondary) !important;
}