* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    background-image: url('https://my.xyiy.top/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Swup 页面切换动画 */
.transition-fade {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
    transform: scale(1);
}

/* 旧页面淡出 - 放大至115%并淡出 */
html.is-animating .transition-fade {
    opacity: 0;
    transform: scale(1.15);
}

/* 新页面淡入 - 从85%缩放至100% */
html.is-rendering .transition-fade {
    opacity: 0;
    transform: scale(0.85);
}

/* 弹窗动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.2s ease-out;
}

.animate-scaleIn {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 卷帘展开动画 */
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

.animate-slideDown {
    animation: slideDown 0.3s ease-out;
}

/* 弹窗居中和动画样式 */
.modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 暗色模式全局样式 */
body.dark-mode {
    /* 卡片样式 - 黑色半透明 */
    --card-bg: rgba(0, 0, 0, 0.2);
    --card-bg-hover: rgba(0, 0, 0, 0.3);
    --card-border: rgba(255, 255, 255, 0.1);
    
    /* 文字颜色 */
    --text-primary: rgba(255, 255, 255, 0.9);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    
    /* 输入框 */
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(255, 255, 255, 0.2);
    
    /* 按钮 */
    --button-bg: rgba(255, 255, 255, 0.1);
    --button-bg-hover: rgba(255, 255, 255, 0.2);
}

body:not(.dark-mode) {
    /* 浅色模式 */
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-bg-hover: rgba(255, 255, 255, 0.9);
    --card-border: rgba(0, 0, 0, 0.1);
    
    --text-primary: rgba(0, 0, 0, 0.9);
    --text-secondary: rgba(0, 0, 0, 0.6);
    --text-tertiary: rgba(0, 0, 0, 0.4);
    
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(0, 0, 0, 0.2);
    
    --button-bg: rgba(0, 0, 0, 0.05);
    --button-bg-hover: rgba(0, 0, 0, 0.1);
}

/* 应用暗色模式到所有卡片 */
body.dark-mode .bg-white,
body.dark-mode .bg-white\/80,
body.dark-mode .bg-white\/90,
body.dark-mode .bg-white\/95,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100 {
    background-color: var(--card-bg) !important;
    backdrop-filter: blur(12px);
}

body.dark-mode .bg-white:hover,
body.dark-mode .bg-white\/80:hover,
body.dark-mode .bg-white\/90:hover {
    background-color: var(--card-bg-hover) !important;
}

/* 文字颜色 */
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-black {
    color: var(--text-primary) !important;
}

body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600 {
    color: var(--text-secondary) !important;
}

body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
    color: var(--text-tertiary) !important;
}

/* 边框 */
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .border-black\/10 {
    border-color: var(--card-border) !important;
}

/* 输入框 */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* 按钮 */
body.dark-mode button:not(.bg-blue-500):not(.bg-blue-600):not(.bg-red-500):not(.bg-red-600):not(.bg-green-500):not(.bg-green-600) {
    background-color: var(--button-bg) !important;
    color: var(--text-primary) !important;
}

body.dark-mode button:not(.bg-blue-500):not(.bg-blue-600):not(.bg-red-500):not(.bg-red-600):not(.bg-green-500):not(.bg-green-600):hover {
    background-color: var(--button-bg-hover) !important;
}

/* 表格 */
body.dark-mode table {
    background-color: var(--card-bg) !important;
}

body.dark-mode th {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: var(--text-primary) !important;
}

body.dark-mode td {
    border-color: var(--card-border) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode tr:hover {
    background-color: var(--card-bg-hover) !important;
}

/* 阴影 */
body.dark-mode .shadow,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-xl,
body.dark-mode .shadow-2xl {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* 分隔线 */
body.dark-mode hr {
    border-color: var(--card-border) !important;
}

/* 下拉菜单 */
body.dark-mode .dropdown-menu,
body.dark-mode [role="menu"] {
    background-color: var(--card-bg) !important;
    backdrop-filter: blur(12px);
    border-color: var(--card-border) !important;
}

/* 工具提示 */
body.dark-mode .tooltip {
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
}

/* 徽章 */
body.dark-mode .badge:not(.bg-red-500):not(.bg-blue-500):not(.bg-green-500):not(.bg-yellow-500) {
    background-color: var(--button-bg) !important;
    color: var(--text-primary) !important;
}

/* 平滑过渡 */
body.dark-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}