body { transition: background-color 0.3s ease, color 0.3s ease; }

/* 深色模式背景调整 */
html.dark body {
    background-color: #050505;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), 
        linear-gradient(to bottom, #0f0f11, #050505);
    background-size: 20px 20px, 100% 100%;
    background-attachment: fixed;
}

/* 浅色模式背景 */
html:not(.dark) body {
    background-color: #f0f2f5;
    background-image: radial-gradient(#cbd5e199 1px, transparent 1px);
    background-size: 20px 20px;
}

.dark .metal-card-border {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0,0,0,0.8);
}
.dark .metal-card-top-line::after {
    content: '';
    position: absolute;
    top: -1px; left: 20px; right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}

.cycle-radio:checked + div {
    background-color: #f59e0b;
    color: #000;
    font-weight: 700;
    border-color: #f59e0b;
}
.cycle-radio:checked + div:hover {
    color: #ffffff;
}

.dark .value-glow {
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, #fff 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    margin-right: -0.2em;
}
/* 浅色模式下高亮颜色统一为 #f59e0b */
body:not(.dark) .value-glow { color: #f59e0b; }
body:not(.dark) .text-amber-600 { color: #f59e0b; }

.progress-fill { background: linear-gradient(90deg, #d97706, #fbbf24); }
.dark .progress-fill { box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }

.dark input[type="date"] { color-scheme: dark; }
.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 0.8; }
body:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: 0.6; cursor: pointer; }

#toast, #rateLimitTip { 
    visibility: hidden; 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.95);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}
#toast.show, #rateLimitTip.show { 
    visibility: visible; 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#toast {
    transform: translateX(-50%) translateY(20px);
}
#toast.show {
    transform: translateX(-50%) translateY(0);
}

/* Custom Spin Animation (replaces fa-spin) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin {
    animation: spin 1s linear infinite;
}