:root { --admin-coral: #f45f68; --admin-coral-hover: #df505a; --admin-coral-soft: #fff0f1; --admin-shell-bg: rgba(255, 255, 255, 0.96); --admin-sidebar-bg: #202d38; --admin-sidebar-surface: #2b3a46; --admin-sidebar-text: #D9E1E6; --admin-sidebar-muted: #8FA1AC; --admin-page-bg: #f7f9fb; --admin-primary: var(--admin-coral); --admin-primary-hover: var(--admin-coral-hover); --admin-card-radius: 14px; --admin-shell-radius: 22px; --admin-shadow: 0 18px 48px rgba(57, 40, 45, 0.14); --admin-header-bg: #FFFFFF; --admin-soft-pink: var(--admin-coral-soft); --admin-soft-blue: #EEF5FF; --admin-soft-green: #EDF8F1; --admin-soft-purple: #F4EFFF; --color-primary: var(--admin-primary); --color-primary-hover: var(--admin-primary-hover); --color-primary-light: #FFF3F2; --color-primary-lighter: #FFF8F7; --color-success: #2E9B68; --color-warning: #E59A32; --color-danger: #D94A4A; --color-info: #4A7CD4; --color-text-primary: #222222; --color-text-secondary: #555555; --color-text-tertiary: #888888; --color-bg-primary: #FFFFFF; --color-bg-secondary: #FFF8F7; --color-bg-page: #FAFAF8; --color-border: #E8E5E2; --color-border-light: #F0EDE9; --sidebar-width: 220px; --header-height: 64px; --border-radius-sm: 8px; --border-radius-md: var(--admin-card-radius); --border-radius-lg: 16px; --shadow-card: 0 8px 24px rgba(75, 55, 46, 0.06); --el-color-primary: var(--color-primary); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body, #app { width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; color: var(--color-text-primary); background-color: var(--color-bg-page); } body { min-width: 1100px; } button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(238, 102, 107, 0.32); outline-offset: 2px; } .el-button--primary { --el-button-bg-color: var(--color-primary); --el-button-border-color: var(--color-primary); --el-button-hover-bg-color: var(--color-primary-hover); --el-button-hover-border-color: var(--color-primary-hover); } .el-radio-group .el-radio-button__inner:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .el-card { --el-card-border-radius: var(--border-radius-md); --el-card-border-color: var(--color-border-light); } .el-table { --el-table-header-bg-color: #FBFAF8; --el-table-border-color: var(--color-border-light); } .el-tag { border-radius: 999px; } .page-container { padding: 24px; } .page-shell { max-width: 1440px; margin: 0 auto; } .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .page-heading h1 { font-size: 24px; line-height: 1.35; font-weight: 650; } .page-heading p { margin-top: 6px; color: var(--color-text-tertiary); } .surface-card { background: var(--color-bg-primary); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-md); box-shadow: var(--shadow-card); } .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-tertiary { color: var(--color-text-tertiary); } .mt-sm { margin-top: 8px; } .mt-md { margin-top: 16px; } .mt-lg { margin-top: 24px; } .mb-sm { margin-bottom: 8px; } .mb-md { margin-bottom: 16px; } .mb-lg { margin-bottom: 24px; } .flex-center { display: flex; align-items: center; justify-content: center; } @media (max-width: 1200px) { body { min-width: 0; } } @media (max-width: 900px) { .page-container { padding: 16px; } .page-heading { align-items: flex-start; flex-direction: column; } }