/* 畅弹 - 全局样式 */
/* 樱花磨砂玻璃主题 - 活力粉+玫瑰金 */

/* ========== 全局等比例缩放系统 (vmax) ========== */
/* 设计基准: 1920x1080 (对角线 ≈ 2203px) */
/* 1vmax = max(vw, vh) 的 1%，在 1920x1080 下 1vmax ≈ 19.2px */
/* 转换公式: px_value / 19.2 = vmax_value */
:root {
    /* ========== 半透明黑色背景系统（磨砂玻璃） ========== */
    --bg-primary: rgba(0,0,0,0.45);               /* 主背景 - 黑色半透明 */
    --bg-secondary: rgba(0,0,0,0.40);             /* 次级背景 */
    --bg-tertiary: rgba(10,10,10,0.38);            /* 三级背景/输入框 */
    --bg-elevated: rgba(5,5,5,0.42);               /* 浮层/卡片背景 */
    --bg-hover: rgba(20,20,20,0.45);               /* 悬停背景 */
    --bg-card: linear-gradient(145deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.40) 100%);
    --bg-glass: rgba(0,0,0,0.35);                  /* 毛玻璃背景 */
    
    /* ========== 樱花粉强调色系统 ========== */
    --accent: #FF85A2;               /* 主强调色 - 活力粉 */
    --accent-hover: #FFB0C4;         /* 悬停 - 浅樱粉 */
    --accent-secondary: #E8708A;     /* 次级 - 暗粉 */
    --accent-muted: rgba(255, 133, 162, 0.08);  /* 弱化粉色背景 */
    --accent-gradient: linear-gradient(135deg, #FF85A2 0%, #D4A574 50%, #B8866A 100%);  /* 粉+玫瑰金渐变 */
    --accent-glow: 0 4px 20px rgba(255, 133, 162, 0.3);  /* 发光阴影 - 粉色光晕 */
    
    /* 辅助色彩 - 功能状态色 */
    --color-success: #50C878;        /* 成功状态 - 祖母绿 */
    --color-warning: #FFB347;        /* 警告状态 - 暖橙 */
    --color-error: #DC3545;          /* 错误状态 - 暗红 */
    --color-info: #FF85A2;           /* 信息状态 - 粉色 */
    
    /* ========== 白色文字系统 ========== */
    --text-primary: #ffffff;         /* 主文字色 - 纯白 */
    --text-secondary: #e5e5e5;       /* 次级文字色 - 浅灰白 */
    --text-muted: #a0a0a0;           /* 弱化文字色 - 中灰 */
    --text-disabled: #666666;        /* 禁用文字色 - 暗灰 */
    --text-link: #FF85A2;            /* 链接文字色 - 粉色 */
    
    /* ========== 粉色边框系统 ========== */
    --border: rgba(255, 133, 162, 0.15);       /* 默认边框 - 微粉 */
    --border-hover: rgba(255, 133, 162, 0.4);  /* 悬停边框 */
    --border-focus: rgba(255, 133, 162, 0.6);  /* 聚焦边框 */
    --border-subtle: rgba(255, 255, 255, 0.05); /* 微妙边框 */
    
    /* ========== 阴影系统升级 ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);    /* 极小阴影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);    /* 小阴影 */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);   /* 中阴影 */
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);   /* 大阴影 */
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);  /* 超大阴影 */
    --shadow-glow: 0 0 24px rgba(255, 133, 162, 0.2);  /* 发光效果 - 粉色 */
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);  /* 内阴影 */
    
    /* ========== 圆角系统 (vmax缩放) ========== */
    --radius-xs: calc(4 * var(--px));     /* 极小圆角 - 标签 */
    --radius-sm: calc(8 * var(--px));     /* 小圆角 - 按钮 */
    --radius-md: calc(12 * var(--px));    /* 中圆角 - 输入框/小卡片 */
    --radius-lg: calc(16 * var(--px));    /* 大圆角 - 主卡片 */
    --radius-xl: calc(24 * var(--px));    /* 超大圆角 - 模态框 */
    --radius-full: calc(9999 * var(--px));  /* 完全圆角 - 头像/徽章 */
    
    /* ========== 动画时长标准 ========== */
    --transition-fast: 0.15s ease-out;      /* 快速 - 按钮悬停、图标变化 */
    --transition-normal: 0.25s ease;        /* 标准 - 页面切换、卡片悬停 */
    --transition-slow: 0.35s ease-in-out;   /* 缓慢 - 模态框弹出、大范围动画 */
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);  /* 流畅 - 侧边栏展开/折叠 */
    
    /* ========== 兼容旧变量 ========== */
    --primary: #FF85A2;
    --primary-color: #FF85A2;
    --border-color: rgba(255, 133, 162, 0.15);
    
    /* ========== 现代渐变色系 ========== */
    --gradient-primary: linear-gradient(135deg, #FF85A2 0%, #D4A574 50%, #B8866A 100%);
    --gradient-secondary: linear-gradient(135deg, rgba(10,10,10,0.7) 0%, rgba(0,0,0,0.75) 100%);
    --gradient-accent: linear-gradient(135deg, #FF85A2 0%, #FFB0C4 100%);
    --gradient-aurora: linear-gradient(135deg, #FF85A2 0%, #E8708A 50%, #B8866A 100%);
    --gradient-cosmic: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 50%, rgba(10,10,10,0.6) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,133,162,0.1) 0%, rgba(255,133,162,0.05) 100%);
    
    /* ========== 玻璃拟态效果 ========== */
    --glass-bg: rgba(0, 0, 0, 0.55);
    --glass-border: rgba(255, 133, 162, 0.15);
    --glass-blur: blur(24px);
    --glass-blur-strong: blur(48px);
    
    /* ========== 增强阴影系统 ========== */
    --shadow-glow-primary: 0 0 40px rgba(255, 133, 162, 0.3);
    --shadow-glow-accent: 0 0 40px rgba(255, 133, 162, 0.3);
    --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 30px 80px rgba(0, 0, 0, 0.6);
    
    /* ========== 增强动画时长系统 ========== */
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-elastic: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* ========== 按钮渐变系统 ========== */
    --btn-primary-gradient: linear-gradient(135deg, #FF85A2 0%, #D4A574 100%);
    --btn-secondary-gradient: linear-gradient(135deg, #E8708A 0%, #B8866A 100%);
    --btn-danger-gradient: linear-gradient(135deg, #e94560 0%, #D4A574 100%);
    --btn-success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    
    /* ========== 磨砂背景系统 ========== */
    --glass-dark: rgba(0, 0, 0, 0.75);
    --glass-dark-strong: rgba(0, 0, 0, 0.85);
    
    /* ========== vmax 全局自动缩放系统 ========== */
    /* 设计基准: 1920x1080，1vmax = 19.2px */
    /* 核心变量: --px 代表 1px，自动跟随视口缩放 */
    --px: calc(1vmax / 19.2);  /* 在 1920px 视口下 1--px = 1px */
    --vmax-scale: 1;  /* 用户手动缩放因子 */
    
    /* 常用尺寸的 vmax 单位变量 */
    --size-xs: calc(4 * var(--px));    /* 4px */
    --size-sm: calc(8 * var(--px));    /* 8px */
    --size-md: calc(12 * var(--px));   /* 12px */
    --size-lg: calc(16 * var(--px));   /* 16px */
    --size-xl: calc(20 * var(--px));   /* 20px */
    --size-2xl: calc(24 * var(--px));  /* 24px */
    --size-3xl: calc(32 * var(--px));  /* 32px */
    
    /* 字体大小的 vmax 单位变量 */
    --font-xs: calc(12 * var(--px));   /* 12px */
    --font-sm: calc(13 * var(--px));   /* 13px */
    --font-base: calc(14 * var(--px)); /* 14px */
    --font-md: calc(16 * var(--px));   /* 16px */
    --font-lg: calc(18 * var(--px));   /* 18px */
    --font-xl: calc(20 * var(--px));   /* 20px */
    --font-2xl: calc(24 * var(--px));  /* 24px */
    --font-3xl: calc(32 * var(--px));  /* 32px */
}

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

body {
    font-family: 'Inter', 'SF Pro Display', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #000000;
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: auto;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 全局樱花壁纸背景层 - 已改为视频背景，见 index.html */

/* 滚动条美化 - 樱花粉主题（默认透明，hover 时显示） */
::-webkit-scrollbar {
    width: calc(6 * var(--px));
    height: calc(6 * var(--px));
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: calc(3 * var(--px));
}

::-webkit-scrollbar-thumb {
    background: rgba(50,40,60,0.3);
    border-radius: calc(3 * var(--px));
}

::-webkit-scrollbar-thumb:hover {
    background: #FF85A2;
    box-shadow: 0 0 8px rgba(255, 133, 162, 0.3);
}

/* 选中文本样式 */
::selection {
    background: rgba(255, 133, 162, 0.3);
    color: #ffffff;
}

.app-container {
    display: flex;
    min-height: 100vh;
}

/* 主内容区 */
.main-content {
    flex: 1;
    padding: calc(20 * var(--px));
    overflow-y: auto;
    overflow-x: hidden;
}

/* 应用容器 - 支持等比例缩放 */
.app-wrapper {
    transform-origin: top left;
    min-width: calc(1380 * var(--px));
    width: 100%;
    transition: transform 0.1s ease;
}

/* 首页欢迎区 - 现代设计 */
.welcome-section {
    text-align: center;
    margin-bottom: calc(60 * var(--px));
    padding: calc(80 * var(--px)) calc(40 * var(--px));
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 133, 162, 0.08) 0%, transparent 60%);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

.welcome-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(600 * var(--px));
    height: calc(600 * var(--px));
    background: radial-gradient(circle, rgba(255, 133, 162, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.welcome-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(1 * var(--px));
    background: linear-gradient(90deg, transparent, rgba(255, 133, 162, 0.3), transparent);
}

.welcome-title {
    font-size: calc(48 * var(--px));
    font-weight: 800;
    margin-bottom: calc(16 * var(--px));
    background: linear-gradient(135deg, #FFB0C4 0%, #FF85A2 50%, #D4A574 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
    letter-spacing: calc(-1 * var(--px));
}

.welcome-subtitle {
    font-size: calc(18 * var(--px));
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
    max-width: calc(600 * var(--px));
    margin: 0 auto;
    line-height: 1.7;
}

/* 功能卡片网格 - 优化 */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(240 * var(--px)), 1fr));
    gap: calc(16 * var(--px));
    max-width: calc(1200 * var(--px));
    margin: 0 auto;
    padding: 0 calc(20 * var(--px));
}

/* 功能卡片 - 现代设计 */
.feature-card {
    background: rgba(10,10,10, 0.90);
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.2);
    border-radius: var(--radius-md);
    padding: calc(20 * var(--px));
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(1 * var(--px));
    background: linear-gradient(90deg, transparent, rgba(255, 133, 162, 0.2), transparent);
}

.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 133, 162, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover {
    background: rgba(40, 30, 60, 0.95);
    border-color: rgba(255, 133, 162, 0.4);
    transform: translateY(calc(-4 * var(--px)));
    box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(255, 133, 162, 0.15);
}

.feature-card:hover::after {
    opacity: 1;
}

.feature-card:active {
    transform: translateY(calc(-2 * var(--px))) scale(0.99);
}

/* 卡片图标容器 */
.card-icon {
    width: calc(48 * var(--px));
    height: calc(48 * var(--px));
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #FF85A2, #D4A574, #B8866A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(22 * var(--px));
    margin-bottom: calc(14 * var(--px));
    color: #0a0a0a;
    border: none;
    transition: all var(--transition-normal);
    box-shadow: 0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(255, 133, 162, 0.3);
    position: relative;
    z-index: 1;
}

.feature-card:hover .card-icon {
    transform: scale(1.05);
    box-shadow: 0 calc(6 * var(--px)) calc(16 * var(--px)) rgba(255, 133, 162, 0.4);
}

.card-title {
    font-size: calc(15 * var(--px));
    font-weight: 600;
    margin-bottom: calc(8 * var(--px));
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.card-desc {
    color: #a0a0a0;
    font-size: calc(12 * var(--px));
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* 卡片状态徽章 */
.card-badge {
    position: absolute;
    top: calc(10 * var(--px));
    right: calc(10 * var(--px));
    padding: calc(3 * var(--px)) calc(8 * var(--px));
    border-radius: var(--radius-full);
    font-size: calc(10 * var(--px));
    font-weight: 700;
    z-index: 2;
}

.card-badge.new {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    box-shadow: 0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(16, 185, 129, 0.3);
}

.card-badge.developing {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
    border: calc(1 * var(--px)) solid rgba(245, 158, 11, 0.3);
}

.card-badge.available {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    border: calc(1 * var(--px)) solid rgba(16, 185, 129, 0.3);
}

/* 页面标题 */
.page-header {
    margin-bottom: calc(30 * var(--px));
}

.page-title {
    font-size: calc(28 * var(--px));
    margin-bottom: calc(10 * var(--px));
}

.page-desc {
    color: var(--text-secondary);
}

/* 步骤指示器 */
.steps {
    display: flex;
    gap: calc(10 * var(--px));
    margin-bottom: calc(30 * var(--px));
}

.step {
    padding: calc(10 * var(--px)) calc(20 * var(--px));
    background-color: var(--bg-secondary);
    border: calc(1 * var(--px)) solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.step:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-hover);
}

.step.active {
    background: linear-gradient(135deg, #FF85A2, #D4A574);
    border-color: transparent;
    color: #0a0a0a;
    box-shadow: 0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(255, 133, 162, 0.3);
    font-weight: 600;
}

/* 表单元素 */
.form-group {
    margin-bottom: calc(20 * var(--px));
}

.form-label {
    display: block;
    margin-bottom: calc(8 * var(--px));
    color: var(--text-secondary);
    font-size: calc(14 * var(--px));
    font-weight: 500;
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: calc(12 * var(--px)) calc(16 * var(--px));
    background-color: rgba(10,10,10,0.65);
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.15);
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-size: calc(14 * var(--px));
    transition: all var(--transition-fast);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: #FF85A2;
    box-shadow: 0 0 0 calc(3 * var(--px)) rgba(255, 133, 162, 0.1);
    background-color: rgba(10,10,10,0.65);
}

.form-input::placeholder, .form-textarea::placeholder {
    color: #666666;
}

/* 修复Chrome autofill白底问题 */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active,
.form-textarea:-webkit-autofill,
.form-textarea:-webkit-autofill:hover,
.form-textarea:-webkit-autofill:focus,
.form-textarea:-webkit-autofill:active,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus,
.form-select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #ffffff;
}

.form-input::placeholder, .form-textarea::placeholder {
    color: var(--text-muted);
}

.form-textarea {
    min-height: calc(200 * var(--px));
    resize: vertical;
}

.form-input:hover, .form-textarea:hover, .form-select:hover {
    border-color: rgba(255, 133, 162, 0.3);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: #FF85A2;
    box-shadow: 0 0 0 calc(3 * var(--px)) rgba(255, 133, 162, 0.1);
}

/* 按钮系统 */
.btn {
    padding: calc(10 * var(--px)) calc(18 * var(--px));
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.3);
    border-radius: var(--radius-sm);
    font-size: calc(13 * var(--px));
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--px));
}

.btn-primary {
    background: linear-gradient(135deg, #FF85A2, #D4A574);
    color: #0a0a0a;
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.5);
    box-shadow: 0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(255, 133, 162, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FFB0C4, #FF85A2);
    transform: translateY(calc(-1 * var(--px)));
    border-color: rgba(255, 133, 162, 0.7);
    box-shadow: 0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(255, 133, 162, 0.4);
}

.btn-primary:active {
    background: linear-gradient(135deg, #E8708A, #B8866A);
    transform: translateY(0);
    box-shadow: 0 calc(1 * var(--px)) calc(4 * var(--px)) rgba(255, 133, 162, 0.3);
}

.btn-secondary {
    background-color: rgba(10,10,10,0.65);
    color: #ffffff;
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.2);
    font-weight: 500;
}

.btn-secondary:hover {
    background-color: #222222;
    border-color: rgba(255, 133, 162, 0.4);
    color: #ffffff;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: calc(1 * var(--px)) solid rgba(245, 158, 11, 0.5);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(calc(-1 * var(--px)));
    border-color: rgba(217, 119, 6, 0.6);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: calc(1 * var(--px)) solid rgba(239, 68, 68, 0.5);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: rgba(220, 38, 38, 0.6);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: calc(1 * var(--px)) solid rgba(16, 185, 129, 0.5);
}

/* 面板布局 */
.panel {
    background: rgba(0,0,0,0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.15);
    border-radius: var(--radius-md);
    padding: calc(18 * var(--px));
    margin-bottom: calc(16 * var(--px));
    box-shadow: 0 calc(2 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.3);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(1 * var(--px));
    background: linear-gradient(90deg, transparent, rgba(255, 133, 162, 0.2), transparent);
}

.panel:hover {
    box-shadow: 0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 133, 162, 0.25);
}

.panel-title {
    font-size: calc(14 * var(--px));
    font-weight: 600;
    margin-bottom: calc(12 * var(--px));
    padding-bottom: calc(10 * var(--px));
    background: rgba(255, 133, 162, 0.08);
    padding-left: calc(12 * var(--px));
    border-left: calc(3 * var(--px)) solid #FF85A2;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    gap: calc(6 * var(--px));
    color: #ffffff;
}

/* 两栏布局 */
.two-column {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(20 * var(--px));
}

/* 卡片列表 */
.card-list {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--px));
}

.card-item {
    background: rgba(0,0,0,0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: calc(1 * var(--px)) solid rgba(255, 133, 162, 0.15);
    border-radius: var(--radius-md);
    padding: calc(16 * var(--px));
    display: flex;
    gap: calc(16 * var(--px));
    transition: all var(--transition-fast);
}

.card-item:hover {
    border-color: rgba(255, 133, 162, 0.3);
    box-shadow: 0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(255, 133, 162, 0.1);
}

.card-image {
    width: calc(120 * var(--px));
    height: calc(120 * var(--px));
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    overflow: hidden;
}

.card-info {
    flex: 1;
}

.card-actions {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--px));
}

/* 导航栏 */
.nav-bar {
    display: flex;
    justify-content: space-between;
    padding: calc(20 * var(--px)) 0;
    margin-top: calc(20 * var(--px));
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: calc(50 * var(--px));
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: calc(40 * var(--px));
    margin-bottom: calc(12 * var(--px));
    opacity: 0.5;
}

.empty-state-title {
    font-size: calc(15 * var(--px));
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: calc(6 * var(--px));
}

/* 加载状态 */
.loading {
    text-align: center;
    padding: calc(32 * var(--px));
    color: var(--text-secondary);
}

/* 设置组 */
.settings-group {
    background: var(--bg-card);
    border: calc(1 * var(--px)) solid var(--border);
    border-radius: var(--radius-md);
    padding: calc(20 * var(--px));
    margin-bottom: calc(16 * var(--px));
    transition: all var(--transition-fast);
}

.settings-group:hover {
    border-color: var(--border-hover);
}

.settings-group-title {
    font-size: calc(15 * var(--px));
    font-weight: 600;
    margin-bottom: calc(18 * var(--px));
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: calc(8 * var(--px));
}

.settings-group-title::before {
    content: '';
    width: calc(3 * var(--px));
    height: calc(16 * var(--px));
    background: var(--accent-gradient);
    border-radius: calc(2 * var(--px));
}

.settings-row {
    display: flex;
    align-items: center;
    margin-bottom: calc(12 * var(--px));
}

.settings-label {
    width: calc(130 * var(--px));
    color: var(--text-secondary);
    font-size: calc(13 * var(--px));
}

.settings-input {
    flex: 1;
    display: flex;
    gap: calc(8 * var(--px));
}

.hint {
    font-size: calc(11 * var(--px));
    color: var(--text-muted);
    margin-top: calc(4 * var(--px));
}

/* 全局加载遮罩 */
.global-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 5, 18, 0.85);
    backdrop-filter: blur(calc(8 * var(--px)));
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading, 99995);
    flex-direction: column;
    gap: calc(20 * var(--px));
}

.global-loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: calc(48 * var(--px));
    height: calc(48 * var(--px));
    border: calc(3 * var(--px)) solid rgba(255, 133, 162, 0.2);
    border-top-color: #FF85A2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: 0 0 calc(20 * var(--px)) rgba(255, 133, 162, 0.3);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--text-primary);
    font-size: calc(14 * var(--px));
    font-weight: 500;
}

.loading-progress {
    width: calc(200 * var(--px));
    height: calc(4 * var(--px));
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    background: var(--accent-gradient);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: var(--radius-full);
}

/* 禁用状态 */
.btn:disabled, .form-input:disabled, .form-textarea:disabled, .form-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

body.loading-active {
    overflow: hidden;
}

body.loading-active .main-content {
    pointer-events: none;
    user-select: none;
}

/* 链接样式 */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

/* 分隔线 */
.divider {
    height: calc(1 * var(--px));
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: calc(18 * var(--px)) 0;
}

/* 微光效果背景 */
.glow-effect {
    position: relative;
}

.glow-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 133, 162, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* 主内容区 */
.main-content {
    flex: 1;
    padding: calc(25 * var(--px));
    overflow-y: auto;
    overflow-x: hidden;
}