/* ========== 主题配色系统 ========== */

/* 主题1：明亮主题 - 蓝色科技风（默认明亮） */
html[data-theme="light-blue"],
html.light-blue-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --shadow: rgba(99, 102, 241, 0.1);
    --primary-color: #6366f1;
    --primary-color-rgb: 99, 102, 241;
    --primary-hover: #4f46e5;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    --purple-color: #8b5cf6;
    --purple-hover: #7c3aed;
    --success-text: #10b981;
    --error-text: #ef4444;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* 主题2：明亮主题 - 紫色科技风 */
html[data-theme="light-purple"],
html.light-purple-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #faf5ff;
    --bg-card: #ffffff;
    --text-primary: #1e1b4b;
    --text-secondary: #6b7280;
    --border-color: #e9d5ff;
    --shadow: rgba(139, 92, 246, 0.1);
    --primary-color: #8b5cf6;
    --primary-color-rgb: 139, 92, 246;
    --primary-hover: #7c3aed;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #a78bfa;
    --purple-color: #a855f7;
    --purple-hover: #9333ea;
    --success-text: #10b981;
    --error-text: #ef4444;
    --accent-gradient: linear-gradient(135deg, #8b5cf6, #a855f7);
}

/* 主题3：暗黑主题 - 深蓝科技风（默认暗黑） */
html[data-theme="dark-blue"],
html.dark-blue-mode {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: #334155;
    --shadow: rgba(0, 0, 0, 0.3);
    --primary-color: #818cf8;
    --primary-color-rgb: 129, 140, 248;
    --primary-hover: #6366f1;
    --success-color: #34d399;
    --error-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #60a5fa;
    --purple-color: #a78bfa;
    --purple-hover: #8b5cf6;
    --success-text: #34d399;
    --error-text: #f87171;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* 主题4：暗黑主题 - 深紫科技风 */
html[data-theme="dark-purple"],
html.dark-purple-mode {
    --bg-primary: #1a0b2e;
    --bg-secondary: #2d1b3d;
    --bg-card: #2d1b3d;
    --text-primary: #f3e8ff;
    --text-secondary: #c4b5fd;
    --border-color: #4c1d95;
    --shadow: rgba(0, 0, 0, 0.4);
    --primary-color: #a78bfa;
    --primary-color-rgb: 167, 139, 250;
    --primary-hover: #8b5cf6;
    --success-color: #34d399;
    --error-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #c4b5fd;
    --purple-color: #c084fc;
    --purple-hover: #a855f7;
    --success-text: #34d399;
    --error-text: #f87171;
    --accent-gradient: linear-gradient(135deg, #8b5cf6, #a855f7);
}

/* 主题5：暗黑主题 - 深绿科技风 */
html[data-theme="dark-green"],
html.dark-green-mode {
    --bg-primary: #0a1f0a;
    --bg-secondary: #1a2e1a;
    --bg-card: #1a2e1a;
    --text-primary: #d1fae5;
    --text-secondary: #86efac;
    --border-color: #166534;
    --shadow: rgba(0, 0, 0, 0.4);
    --primary-color: #34d399;
    --primary-color-rgb: 52, 211, 153;
    --primary-hover: #10b981;
    --success-color: #34d399;
    --error-color: #f87171;
    --warning-color: #fbbf24;
    --info-color: #60a5fa;
    --purple-color: #6ee7b7;
    --purple-hover: #34d399;
    --success-text: #34d399;
    --error-text: #f87171;
    --accent-gradient: linear-gradient(135deg, #10b981, #34d399);
}

/* 默认主题（向后兼容） */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow: rgba(0, 0, 0, 0.1);
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    --purple-color: #8b5cf6;
    --purple-hover: #7c3aed;
    --success-text: #10b981;
    --error-text: #ef4444;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* 向后兼容：light-mode 和 dark-mode */
html.light-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow: rgba(0, 0, 0, 0.1);
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    --purple-color: #8b5cf6;
    --purple-hover: #7c3aed;
    --success-text: #10b981;
    --error-text: #ef4444;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
}

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

/* 可访问性：键盘焦点（高对比、跨主题一致） */
:focus-visible {
    outline: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.75);
    outline-offset: 2px;
}

/* 加载圈旋转动画（多处引用，须在 style.css 定义） */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 尊重“减少动效”，但保留相册页与图片查看器内动画（加载圈、弹入、查看器等） */
@media (prefers-reduced-motion: reduce) {
    *:not(.showcase-spinner):not(.modal-overlay):not(.modal-overlay *):not(.showcase-container):not(.showcase-container *) {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ========== 科技感全局样式 ========== */

/* 卡片科技感增强 */
.bg-card,
.dashboard-card,
.form-card,
.vipcard-info-card {
    position: relative;
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.2) !important;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-card:hover,
.dashboard-card:hover,
.form-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.4) !important;
    box-shadow: 
        0 12px 40px rgba(var(--primary-color-rgb, 99, 102, 241), 0.22),
        0 0 0 1px rgba(var(--primary-color-rgb, 99, 102, 241), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* 按钮科技感增强 */
.btn-primary {
    background: var(--accent-gradient) !important;
    border: none !important;
    color: white !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb, 99, 102, 241), 0.40) !important;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(var(--primary-color-rgb, 99, 102, 241), 0.50) !important;
}

.btn-secondary {
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.30) !important;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06) !important;
    transition: all 0.3s;
}

.btn-secondary:hover {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 99, 102, 241), 0.22);
}

/* 导航项科技感增强 */
.nav-item {
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20) !important;
    background: var(--bg-card) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.nav-item:hover::before {
    transform: scaleX(1);
}

.nav-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.40) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 99, 102, 241), 0.22);
}

.nav-item.active {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb, 99, 102, 241), 0.40);
}

/* 表格科技感增强 */
.table-container {
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.2) !important;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.data-table thead {
    background: linear-gradient(
        135deg,
        rgba(var(--primary-color-rgb, 99, 102, 241), 0.12),
        rgba(var(--primary-color-rgb, 99, 102, 241), 0.04)
    ) !important;
}

.data-table th {
    border-bottom: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.3) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

.data-table tbody tr {
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.data-table tbody tr:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06) !important;
    border-left-color: var(--primary-color);
    transform: none;
}

/* 输入框/选择框统一（避免重复定义与 !important 冲突） */
:root {
    --input-bg: var(--bg-primary);
    --input-border: var(--border-color);
    --input-border-focus: var(--primary-color);
    --focus-ring: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
}

.form-group input,
.form-group select,
.form-group textarea,
.form-input,
.form-select,
.form-textarea,
.search-input {
    background: var(--input-bg);
    border-color: var(--input-border);
}
.form-group input::placeholder,
.search-input::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.75;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.search-input:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
    transform: none;
}

/* 页面头部科技感增强 */
.page-header {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary-color) 20%, 
        var(--purple-color) 80%, 
        transparent 100%) 1;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.page-header h1 {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* 主题切换下拉菜单 */
.theme-toggle-nav {
    margin-left: auto;
    position: relative;
}

/* 主题色块选择器 */
.theme-palette {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-color-block {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 2px solid transparent;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.theme-color-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: 6px;
}

.theme-color-block::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.theme-color-block:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.theme-color-block.active {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 0 0 3px rgba(255, 255, 255, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.4);
}

.theme-color-block.active::after {
    transform: translate(-50%, -50%) scale(1);
    animation: checkBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkBounce {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* 主题色块配色 - 使用组合色块展示主题配色（静态） */
.theme-color-block[data-theme="light-blue"] {
    background: 
        linear-gradient(135deg, 
            #ffffff 0%, #ffffff 25%, 
            #6366f1 25%, #6366f1 50%, 
            #8b5cf6 50%, #8b5cf6 75%, 
            #3b82f6 75%, #3b82f6 100%);
}

.theme-color-block[data-theme="light-purple"] {
    background: 
        linear-gradient(135deg, 
            #ffffff 0%, #ffffff 25%, 
            #8b5cf6 25%, #8b5cf6 50%, 
            #a855f7 50%, #a855f7 75%, 
            #c084fc 75%, #c084fc 100%);
}

.theme-color-block[data-theme="dark-blue"] {
    background: 
        linear-gradient(135deg, 
            #0f172a 0%, #0f172a 25%, 
            #1e293b 25%, #1e293b 50%, 
            #334155 50%, #334155 75%, 
            #475569 75%, #475569 100%);
}

.theme-color-block[data-theme="dark-purple"] {
    background: 
        linear-gradient(135deg, 
            #1a0b2e 0%, #1a0b2e 25%, 
            #2d1b3d 25%, #2d1b3d 50%, 
            #4c1d95 50%, #4c1d95 75%, 
            #6b21a8 75%, #6b21a8 100%);
}

.theme-color-block[data-theme="dark-green"] {
    background: 
        linear-gradient(135deg, 
            #0a1f0a 0%, #0a1f0a 25%, 
            #1a2e1a 25%, #1a2e1a 50%, 
            #166534 50%, #166534 75%, 
            #15803d 75%, #15803d 100%);
}

/* dark-orange/dark-cyan/dark-pink 已移除（主题收敛为 2亮 + 3暗） */

/* Flash消息 */
.flash-messages {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 999;
    max-width: 400px;
}

.flash-message {
    padding: 16px 20px;
    margin-bottom: 12px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.flash-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.flash-success {
    background: var(--success-color);
    color: white;
}

.flash-error {
    background: var(--error-color);
    color: white;
}

.flash-info {
    background: var(--info-color);
    color: white;
}

.flash-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    margin-left: 15px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.flash-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 登录页面 - 科技感增强 */
/* 登录页面样式 - 已在login.html中定义，这里保留向后兼容 */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--accent-gradient);
    position: relative;
    overflow: hidden;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 48px;
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    background-size: 200% 100%;
    animation: gradientMove 3s linear infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 32px;
    margin-bottom: 12px;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

.login-form {
    margin-top: 30px;
}

/* 表单样式 */
.form-group {
    margin-bottom: 20px;
}

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--input-border-focus, var(--primary-color));
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(99, 102, 241, 0.12));
}

.required {
    color: var(--error-color);
}

/* 按钮样式 */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1.4;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 99, 102, 241), 0.4);
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.3;
}

.btn-edit {
    background: var(--info-color);
    color: white;
    border: none;
}

.btn-edit:hover {
    background: #3b82f6;
}

.btn-delete {
    background: var(--error-color);
    color: white;
    border: none;
}

.btn-delete:hover {
    background: #dc2626;
}

/* 容器 */
.container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 12px;
    background: var(--bg-primary);
    min-height: 100vh;
    box-sizing: border-box;
}

/* 全屏容器（用于订单管理等需要全屏显示的页面） */
.container-full {
    max-width: 100%;
    width: 100%;
    padding: 12px;
    margin: 0;
    background: var(--bg-primary) !important;
    min-height: 100vh;
}

/* 页面头部 - 科技感增强 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary-color) 20%, 
        var(--purple-color) 80%, 
        transparent 100%) 1;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    /* 兼容性：部分环境不支持“渐变文字裁剪”时，至少保证可见 */
    color: var(--text-primary);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-actions {
    display: flex;
    gap: 10px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-secondary);
}

/* 导航 */
.main-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 13px;
}

.nav-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.nav-item.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.nav-icon {
    font-size: 18px;
}

/* 下拉菜单样式 */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-item-dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
    display: inline-block;
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* active状态只用于高亮显示，不影响下拉菜单显示 */
.nav-dropdown.active .nav-item-dropdown {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.1);
    border-color: var(--primary-color);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    padding: 8px 0;
    backdrop-filter: blur(10px);
    pointer-events: none;
    overflow: hidden;
    margin-top: 0;
}

/* 防止间隙导致下拉消失的填充区域 - 连接父项和下拉菜单 */
.dropdown-menu-padding {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    height: 8px;
    background: transparent;
    z-index: 1001;
}

/* 下拉菜单和父项之间的连接区域 - 关键：填补间隙，防止鼠标移动时消失 */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -4px;
    right: -4px;
    height: 8px;
    background: transparent;
    z-index: 999;
    pointer-events: auto;
}

/* 下拉菜单显示动画 - 只在hover时显示 */
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 确保hover状态持续 */
.nav-dropdown:hover::before {
    pointer-events: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-item:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.1);
    color: var(--primary-color);
    padding-left: 20px;
}

.dropdown-item.active {
    background: var(--primary-color);
    color: white;
}

.dropdown-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(255, 255, 255, 0.8);
}

.dropdown-item .nav-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* 下拉菜单项动画 */
.dropdown-item {
    animation: fadeInDown 0.3s ease backwards;
}

.dropdown-item:nth-child(2) {
    animation-delay: 0.05s;
}

.dropdown-item:nth-child(3) {
    animation-delay: 0.1s;
}

.dropdown-item:nth-child(4) {
    animation-delay: 0.15s;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 确保下拉菜单在hover时保持显示 */
.nav-dropdown:hover .dropdown-menu {
    pointer-events: auto;
}

/* 下拉菜单和父项之间的连接区域 */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    z-index: 999;
}

/* 媒体前台链接特殊样式 */
.nav-item-frontend {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15)) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    position: relative;
}

.nav-item-frontend::after {
    content: '↗';
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.7;
}

.nav-item-frontend:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.25)) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
}

/* 主题选择下拉菜单样式已在上面定义 */

/* 仪表板分区与标题 */
.dashboard-section {
    margin-bottom: 32px;
}

.dashboard-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
    letter-spacing: 0.5px;
}

.dashboard-card-highlight {
    border-color: rgba(0, 212, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(var(--primary-color-rgb, 99, 102, 241), 0.05) 100%);
}

.dashboard-card-highlight::before {
    background: linear-gradient(90deg, #00d4ff, var(--primary-color));
}

.dashboard-card-highlight:hover {
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2), 0 0 0 1px rgba(0, 212, 255, 0.15);
}

/* 仪表板网格 - 科技感增强 */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.dashboard-card {
    background: var(--bg-card);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.dashboard-card:hover::before {
    transform: scaleX(1);
}

.dashboard-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.4);
    box-shadow: 
        0 12px 40px rgba(var(--primary-color-rgb, 99, 102, 241), 0.25),
        0 0 0 1px rgba(var(--primary-color-rgb, 99, 102, 241), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.card-icon {
    font-size: 40px;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(var(--primary-color-rgb, 99, 102, 241), 0.18),
        rgba(var(--primary-color-rgb, 99, 102, 241), 0.06)
    );
    transition: all 0.4s;
}

.dashboard-card:hover .card-icon {
    transform: rotate(5deg) scale(1.1);
    background: linear-gradient(
        135deg,
        rgba(var(--primary-color-rgb, 99, 102, 241), 0.28),
        rgba(var(--primary-color-rgb, 99, 102, 241), 0.10)
    );
    box-shadow: 0 8px 24px rgba(var(--primary-color-rgb, 99, 102, 241), 0.30);
}

.card-content {
    flex: 1;
}

.card-content h3 {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value {
    font-size: 24px;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.card-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.card-link:hover {
    text-decoration: underline;
}

/* 表格 */
.table-container {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 12px;
    padding: 12px;
}

/* 全屏容器的表格容器 */
.container-full .table-container {
    width: 100%;
    overflow-x: hidden; /* 隐藏横向滚动条，由JavaScript控制列宽 */
    overflow-y: visible;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* 使用自动表格布局，由浏览器根据内容自动调整列宽 */
}

/* 订单表格使用自动布局，由浏览器自主处理列宽 */
.container-full .data-table {
    table-layout: auto;
    width: 100%;
    max-width: 100%;
}

.data-table thead {
    background: var(--bg-secondary);
}

.data-table th {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 10;
}

/* 订单表格：日期和电话列不换行，其他列允许换行 */
/* 日期列：不换行 */
.container-full .data-table th:nth-child(1),  /* 日期 */
.container-full .data-table td:nth-child(1) {
    white-space: nowrap;
}

/* 电话列：不换行 */
.container-full .data-table th:nth-child(13), /* 电话 */
.container-full .data-table td:nth-child(13) {
    white-space: nowrap;
}

.data-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.3;
    vertical-align: top;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 订单表格允许内容换行（日期和电话列除外，已在上面单独设置） */
.container-full .data-table td {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}

.data-table tbody tr {
    transition: background 0.2s ease;
    cursor: pointer;
}

/* 移除鼠标悬停时的颜色变化 */
/* .data-table tbody tr:hover {
    background: var(--bg-secondary);
} */

/* 默认订单列表：2种颜色交替显示（斑马纹）
   优先级：选中状态（!important） > 电话组背景色（!important） > 默认交替背景色 */
.data-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.data-table tbody tr:nth-child(odd) {
    background: var(--bg-card);
}

/* 暗黑模式下增强斑马纹对比度 */
html[data-theme^="dark"] .data-table tbody tr:nth-child(even) {
    background: var(--bg-card); /* 深一点的背景色 */
}

html[data-theme^="dark"] .data-table tbody tr:nth-child(odd) {
    background: var(--bg-secondary); /* 更深的背景色，形成明显对比 */
}

/* 移除暗黑模式下的悬停效果 */
/* .dark-mode .data-table tbody tr:hover {
    background: #334155 !important;
} */

/* 订单行选中背景颜色（4种颜色循环，优先级最高） */
.data-table tbody tr.order-selected-0 {
    background: #e0f2fe !important; /* 浅蓝色 */
    border-left: 3px solid #0ea5e9;
    color: #0c4a6e !important; /* 深蓝色文字，与浅蓝背景形成强烈对比 */
}

.data-table tbody tr.order-selected-0 td {
    background: #e0f2fe !important;
    color: #0c4a6e !important; /* 确保所有单元格文字都是深蓝色 */
    border-bottom: 1px solid rgba(12, 74, 110, 0.3) !important; /* 深蓝色分割线，与背景形成对比 */
}

.data-table tbody tr.order-selected-1 {
    background: #fef3c7 !important; /* 浅黄色 */
    border-left: 3px solid #f59e0b;
    color: #78350f !important; /* 深棕色文字，与浅黄背景形成强烈对比 */
}

.data-table tbody tr.order-selected-1 td {
    background: #fef3c7 !important;
    color: #78350f !important;
    border-bottom: 1px solid rgba(120, 53, 15, 0.3) !important; /* 深棕色分割线 */
}

.data-table tbody tr.order-selected-2 {
    background: #d1fae5 !important; /* 浅绿色 */
    border-left: 3px solid #10b981;
    color: #065f46 !important; /* 深绿色文字，与浅绿背景形成强烈对比 */
}

.data-table tbody tr.order-selected-2 td {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-bottom: 1px solid rgba(6, 95, 70, 0.3) !important; /* 深绿色分割线 */
}

.data-table tbody tr.order-selected-3 {
    background: #fce7f3 !important; /* 浅粉色 */
    border-left: 3px solid #ec4899;
    color: #831843 !important; /* 深粉色文字，与浅粉背景形成强烈对比 */
}

.data-table tbody tr.order-selected-3 td {
    background: #fce7f3 !important;
    color: #831843 !important;
    border-bottom: 1px solid rgba(131, 24, 67, 0.3) !important; /* 深粉色分割线 */
}

/* 日期订单列表：相同电话的背景色（额外的背景色，优先级低于选中状态） */
.data-table tbody tr.phone-group-0 {
    background: #e9d5ff !important; /* 浅紫色 */
}
.data-table tbody tr.phone-group-0 td { background: #e9d5ff !important; }

.data-table tbody tr.phone-group-1 {
    background: #fed7aa !important; /* 浅橙色 */
}
.data-table tbody tr.phone-group-1 td { background: #fed7aa !important; }

.data-table tbody tr.phone-group-2 {
    background: #cffafe !important; /* 浅青色 */
}
.data-table tbody tr.phone-group-2 td { background: #cffafe !important; }

.data-table tbody tr.phone-group-3 {
    background: #fef2f2 !important; /* 浅红色 */
}
.data-table tbody tr.phone-group-3 td { background: #fef2f2 !important; }

.data-table tbody tr.phone-group-4 {
    background: #dbeafe !important; /* 浅天蓝色 */
}
.data-table tbody tr.phone-group-4 td { background: #dbeafe !important; }

.data-table tbody tr.phone-group-5 {
    background: #fef9c3 !important; /* 浅柠檬色 */
}
.data-table tbody tr.phone-group-5 td { background: #fef9c3 !important; }

.data-table tbody tr.phone-group-6 {
    background: #dcfce7 !important; /* 浅薄荷绿 */
}
.data-table tbody tr.phone-group-6 td { background: #dcfce7 !important; }

.data-table tbody tr.phone-group-7 {
    background: #fce7f3 !important; /* 浅玫瑰色 */
}
.data-table tbody tr.phone-group-7 td { background: #fce7f3 !important; }

/* 暗色模式下的背景色和文字颜色（增强对比度） */
html[data-theme^="dark"] .data-table tbody tr.order-selected-0 {
    background: #1e3a5f !important;
    border-left-color: #3b82f6;
    color: #bfdbfe !important; /* 亮蓝色文字，与深蓝背景形成强烈对比 */
}

html[data-theme^="dark"] .data-table tbody tr.order-selected-0 td {
    background: #1e3a5f !important;
    color: #bfdbfe !important; /* 确保所有单元格文字都是亮蓝色 */
    border-bottom: 1px solid rgba(191, 219, 254, 0.4) !important; /* 亮蓝色分割线，与深蓝背景形成对比 */
}

html[data-theme^="dark"] .data-table tbody tr.order-selected-1 {
    background: #4a3a1f !important;
    border-left-color: #f59e0b;
    color: #fde68a !important; /* 亮黄色文字，与深棕背景形成强烈对比 */
}

html[data-theme^="dark"] .data-table tbody tr.order-selected-1 td {
    background: #4a3a1f !important;
    color: #fde68a !important;
    border-bottom: 1px solid rgba(253, 230, 138, 0.4) !important; /* 亮黄色分割线 */
}

html[data-theme^="dark"] .data-table tbody tr.order-selected-2 {
    background: #1e3a2f !important;
    border-left-color: #10b981;
    color: #a7f3d0 !important; /* 亮绿色文字，与深绿背景形成强烈对比 */
}

html[data-theme^="dark"] .data-table tbody tr.order-selected-2 td {
    background: #1e3a2f !important;
    color: #a7f3d0 !important;
    border-bottom: 1px solid rgba(167, 243, 208, 0.4) !important; /* 亮绿色分割线 */
}

html[data-theme^="dark"] .data-table tbody tr.order-selected-3 {
    background: #4a2a3f !important;
    border-left-color: #ec4899;
    color: #fbcfe8 !important; /* 亮粉色文字，与深粉背景形成强烈对比 */
}

html[data-theme^="dark"] .data-table tbody tr.order-selected-3 td {
    background: #4a2a3f !important;
    color: #fbcfe8 !important;
    border-bottom: 1px solid rgba(251, 207, 232, 0.4) !important; /* 亮粉色分割线 */
}

html[data-theme^="dark"] .data-table tbody tr.phone-group-0 {
    background: #3a2a4f !important; /* 浅紫色 */
}
.data-table tbody tr.phone-group-0 td { background: inherit !important; }

html[data-theme^="dark"] .data-table tbody tr.phone-group-1 {
    background: #4a2a1f !important; /* 浅橙色 */
}
.data-table tbody tr.phone-group-1 td { background: inherit !important; }

html[data-theme^="dark"] .data-table tbody tr.phone-group-2 {
    background: #1e4a5f !important; /* 浅青色 */
}
.data-table tbody tr.phone-group-2 td { background: inherit !important; }

html[data-theme^="dark"] .data-table tbody tr.phone-group-3 {
    background: #4a1e1e !important; /* 浅红色 */
}
.data-table tbody tr.phone-group-3 td { background: inherit !important; }

html[data-theme^="dark"] .data-table tbody tr.phone-group-4 {
    background: #1e3a5f !important; /* 浅天蓝色 */
}
.data-table tbody tr.phone-group-4 td { background: inherit !important; }

html[data-theme^="dark"] .data-table tbody tr.phone-group-5 {
    background: #4a3a1f !important; /* 浅柠檬色 */
}
.data-table tbody tr.phone-group-5 td { background: inherit !important; }

html[data-theme^="dark"] .data-table tbody tr.phone-group-6 {
    background: #1e3a2f !important; /* 浅薄荷绿 */
}
.data-table tbody tr.phone-group-6 td { background: inherit !important; }

html[data-theme^="dark"] .data-table tbody tr.phone-group-7 {
    background: #4a2a3f !important; /* 浅玫瑰色 */
}
.data-table tbody tr.phone-group-7 td { background: inherit !important; }

/* 订单表格紧凑样式 */
.data-table.compact th,
.data-table.compact td {
    padding: 4px 8px;
    font-size: 12px;
}

.data-table .amount-cell {
    white-space: nowrap;
    font-weight: 500;
}

.data-table td strong {
    font-weight: 600;
}


.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-secondary);
    font-size: 12px;
}

/* 表单容器 - 科技感增强 */
.form-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.form-card {
    background: var(--bg-card);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    background-size: 200% 100%;
    animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    justify-content: flex-end;
}

/* VIP卡管理样式 - 科技感增强 */
.search-container {
    margin-bottom: 16px;
    background: var(--bg-card);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* search-input 基础样式（全局统一，避免多处重复定义） */
.search-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.3s ease;
}
.search-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ========== 全局小工具类（提升可读性/减少行内 style） ========== */
.page-section { margin-top: 20px; }
.section-title {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}
.section-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55);
}
.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 12px;
}
.btn-purple {
    background: rgba(168,85,247,0.14);
    border: 1px solid rgba(168,85,247,0.25);
    color: var(--purple-color);
}
.btn-purple:hover {
    background: rgba(168,85,247,0.18);
    border-color: rgba(168,85,247,0.35);
}

/* 优惠券页筛选下拉宽度 */
.miniprogram-coupons-page #statusFilter,
.miniprogram-coupons-page #typeFilter {
    flex: 0 0 150px;
}

.vipcard-row {
    transition: background 0.2s ease;
}

.vipcard-row:hover {
    background: var(--bg-secondary) !important;
}

.amount-cell {
    font-weight: 600;
}

.balance-amount {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: bold;
}

.balance-display {
    font-size: 28px;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.balance-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
}

.vipcard-info-card {
    background: var(--bg-card);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.vipcard-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
}

.vipcard-info-card h3 {
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 12px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, 
        transparent 0%, 
        var(--primary-color) 50%, 
        transparent 100%) 1;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.info-item span {
    font-size: 14px;
    color: var(--text-primary);
}

.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.radio-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.radio-label:hover::before {
    transform: scaleX(1);
}

.radio-label:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.radio-label input[type="radio"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.radio-label input[type="radio"]:checked + span {
    color: var(--primary-color);
    font-weight: 700;
}

.radio-label input[type="radio"]:checked ~ span {
    color: var(--primary-color);
}

.radio-label:has(input[type="radio"]:checked) {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.radio-label:has(input[type="radio"]:checked)::before {
    transform: scaleX(1);
}

/* 响应式 */
@media (max-width: 768px) {
    .container {
        padding: 12px;
        width: 100%;
        max-width: 100%;
    }

    .container-full {
        padding: 8px;
        width: 100%;
        max-width: 100%;
    }

    .form-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .header-actions {
        width: 100%;
        flex-direction: column;
    }

    .header-actions .btn {
        width: 100%;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .data-table {
        font-size: 14px;
    }

    .data-table th,
    .data-table td {
        padding: 12px 8px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .radio-group {
        flex-direction: column;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .container {
        padding: 8px;
    }

    .container-full {
        padding: 4px;
    }
}

/* 分页样式 */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 10px 0;
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 12px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-btn {
    display: inline-block;
    padding: 8px 14px;
    min-width: 40px;
    text-align: center;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.pagination-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.pagination-btn:hover:not(.disabled):not(.active)::before {
    width: 100px;
    height: 100px;
}

.pagination-btn:hover:not(.disabled):not(.active) {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.pagination-btn.active {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    font-weight: 700;
    cursor: default;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}

.pagination-ellipsis {
    padding: 8px 4px;
    color: var(--text-secondary);
    font-size: 14px;
}

@media (max-width: 768px) {
    .pagination-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .pagination {
        justify-content: center;
    }
    
    .pagination-info {
        text-align: center;
    }
}

/* ========== 全局模态框 / Toast / Confirm（后台统一） ========== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10000;
}
.modal-overlay.show { display: block; }

/* 防止背景滚动 */
html.modal-open,
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Toast模态框 */
.toast-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card, #fff);
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    min-width: 300px;
    max-width: 520px;
    text-align: center;
}
.toast-modal.show { display: block; }

.toast-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.toast-icon.success { color: #10b981; }
.toast-icon.error { color: #ef4444; }
.toast-icon.warning { color: #f59e0b; }
.toast-icon.info { color: #3b82f6; }

.toast-message {
    color: var(--text-primary, #333);
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 确认模态框 */
.confirm-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card, #fff);
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    min-width: 350px;
    max-width: 520px;
}
.confirm-modal.show { display: block; }

/* 相册页：服务器耗时统计浮层（与 .modal-overlay 同套路，用 .show 控制显示） */
.timing-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.timing-modal-overlay.show {
    display: flex;
}

.timing-modal-box {
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.98));
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    min-width: 340px;
    max-width: 420px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.timing-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}
.timing-modal-icon { font-size: 22px; line-height: 1; }
.timing-modal-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}
.timing-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
}
.timing-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.timing-modal-body { padding: 20px; }
.timing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.timing-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.timing-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.timing-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
.timing-table tbody tr.timing-row-total {
    background: rgba(99, 102, 241, 0.15);
    font-weight: 600;
}
.timing-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
}
.timing-table tr.timing-row-total td { border-bottom: none; }
.timing-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Monaco, Consolas, monospace;
    font-size: 15px;
    color: rgba(167, 243, 208, 0.95);
}
.timing-table tr.timing-row-total td:last-child { color: rgba(134, 239, 172, 1); font-size: 16px; }
.timing-modal-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 20px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1.5;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}
.timing-modal-hint-icon { font-size: 20px; opacity: 0.8; }

.confirm-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #333);
    margin-bottom: 16px;
    text-align: center;
}
.confirm-message {
    color: var(--text-primary, #333);
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}
.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.confirm-actions .btn {
    min-width: 100px;
    padding: 10px 20px;
}

/* ========== 后台通用组件（用于小程序后台/媒体后台等页面统一） ========== */
.tech-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px var(--shadow);
}

.search-bar,
.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.tech-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--accent-gradient);
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}
.tech-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}
.tech-btn:active {
    transform: translateY(0);
}
.tech-btn.secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: none;
}
.tech-btn.secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}
.tech-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: rgba(239, 68, 68, 0.6);
}

.filter-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    font-weight: 600;
}
.filter-btn:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10);
}
.filter-btn.active {
    background: var(--accent-gradient);
    color: #fff;
    border-color: transparent;
}

/* 兼容部分页面自带的 .modal/.modal-content 结构 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    box-sizing: border-box;
}
.modal.show { display: flex; }

.modal-content {
    position: relative;
    z-index: 10001;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    max-width: min(980px, 95vw);
    width: 95vw;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.modal-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
}
.modal-header h2,
.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}
.modal-close {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.modal-close:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
    color: var(--text-primary);
}

.modal-body {
    padding: 16px;
    overflow: auto;
    color: var(--text-primary);
}

.modal-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--bg-secondary);
}

/* ========== 小程序后台：迁移后兼容修复（模态框/旧行内颜色） ========== */
/* 小程序后台里很多模态框没有 .modal-body，原本依赖 modal-content 自己滚动与 padding */
:where(.container.container-full[class*="miniprogram-"]) .modal-content {
    padding: 22px;
    overflow: auto;
}
:where(.container.container-full[class*="miniprogram-"]) .modal-content > .modal-header {
    margin: -22px -22px 18px;
    border-radius: 12px 12px 0 0;
}
:where(.container.container-full[class*="miniprogram-"]) .modal-content .form-actions {
    margin: 18px -22px -22px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    justify-content: flex-end;
}

/* 覆盖迁移前写死的颜色（亮色主题会“看不见”） */
:where(.container.container-full[class*="miniprogram-"]) [style*="color: #fff"],
:where(.container.container-full[class*="miniprogram-"]) [style*="color:#fff"] {
    color: var(--text-primary) !important;
}
/* 迁移前常见的 rgba 白字：按透明度粗略映射到主题文字色 */
:where(.container.container-full[class*="miniprogram-"]) [style*="color: rgba(255,255,255"],
:where(.container.container-full[class*="miniprogram-"]) [style*="color:rgba(255,255,255"],
:where(.container.container-full[class*="miniprogram-"]) [style*="color: rgba(255, 255, 255"],
:where(.container.container-full[class*="miniprogram-"]) [style*="color:rgba(255, 255, 255"] {
    color: var(--text-secondary) !important;
}
:where(.container.container-full[class*="miniprogram-"]) [style*="rgba(255,255,255,0.9"],
:where(.container.container-full[class*="miniprogram-"]) [style*="rgba(255,255,255,0.8"],
:where(.container.container-full[class*="miniprogram-"]) [style*="rgba(255, 255, 255, 0.9"],
:where(.container.container-full[class*="miniprogram-"]) [style*="rgba(255, 255, 255, 0.8"] {
    color: var(--text-primary) !important;
}
:where(.container.container-full[class*="miniprogram-"]) [style*="color: #00d4ff"],
:where(.container.container-full[class*="miniprogram-"]) [style*="color:#00d4ff"] {
    color: var(--primary-color) !important;
}

/* 迁移前常见的“青色描边/青色底色”(rgba 形式)：映射到主题主色 */
:where(.container.container-full[class*="miniprogram-"]) [style*="rgba(0, 212, 255"],
:where(.container.container-full[class*="miniprogram-"]) [style*="rgba(0,212,255"] {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.35) !important;
    background-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08) !important;
}

/* 小程序后台：亮色主题下避免“渐变白字”导致不可读 */
html[data-theme^="light"] :where(.container.container-full[class*="miniprogram-"]) h1[style*="-webkit-text-fill-color: transparent"] {
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* 小程序后台：表格基础样式（低优先级，给“无 class 的 table”兜底） */
:where(.container.container-full[class*="miniprogram-"]) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
:where(.container.container-full[class*="miniprogram-"]) table thead th {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10);
    color: var(--primary-color);
    font-weight: 900;
}
:where(.container.container-full[class*="miniprogram-"]) table th,
:where(.container.container-full[class*="miniprogram-"]) table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
:where(.container.container-full[class*="miniprogram-"]) table tbody tr:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06);
}

/* 小程序后台：tech-input 兼容（历史遗留） */
.tech-input {
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.3s ease;
}
.tech-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* 取消按钮（部分小程序页面旧类名） */
.btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-cancel:hover {
    background: var(--bg-secondary);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.35);
    transform: translateY(-1px);
}
.btn-cancel:active { transform: translateY(0); }

/* ========== orders.html 内联样式迁移（订单管理：AI汇总/浮层/配送可视化） ========== */
.order-summarize-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.order-summarize-modal.show { display: flex; }

.order-summarize-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

html[data-theme^="dark"] .order-summarize-modal .modal-overlay,
html.dark-blue-mode .order-summarize-modal .modal-overlay,
html.dark-purple-mode .order-summarize-modal .modal-overlay,
html.dark-green-mode .order-summarize-modal .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.order-summarize-modal .modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 95%;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease-out;
    box-sizing: border-box;
}

html[data-theme^="dark"] .order-summarize-modal .modal-content,
html.dark-blue-mode .order-summarize-modal .modal-content,
html.dark-purple-mode .order-summarize-modal .modal-content,
html.dark-green-mode .order-summarize-modal .modal-content {
    border: 2px solid var(--border-color);
}

.order-summarize-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

.order-summarize-modal .modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
}

.order-summarize-modal .modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.order-summarize-modal .modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.order-summarize-modal .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    color: var(--text-primary);
}

.order-summarize-modal .modal-footer {
    padding: 20px 24px;
    border-top: 2px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--bg-secondary);
}

@media (max-width: 768px) {
    .order-summarize-modal .modal-content {
        width: 95%;
        max-height: 95vh;
    }
    .order-summarize-modal .modal-footer {
        flex-direction: column;
    }
    .order-summarize-modal .modal-footer .btn {
        width: 100%;
    }
}

/* 订单表单浮层样式 */
.order-form-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}
.order-form-modal.show { display: flex; }

.order-form-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

html[data-theme^="dark"] .order-form-modal .modal-overlay,
html.dark-blue-mode .order-form-modal .modal-overlay,
html.dark-purple-mode .order-form-modal .modal-overlay,
html.dark-green-mode .order-form-modal .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.order-form-modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 95%;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease-out;
    box-sizing: border-box;
}

html[data-theme^="dark"] .order-form-modal-content,
html.dark-blue-mode .order-form-modal-content,
html.dark-purple-mode .order-form-modal-content,
html.dark-green-mode .order-form-modal-content {
    border: 2px solid var(--border-color);
}

.order-form-modal .modal-header {
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}
.order-form-modal .modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
}
.order-form-modal .modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}
.order-form-modal .modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.order-form-modal-body {
    padding: 16px 28px;
    overflow-y: auto;
    flex: 1;
    color: var(--text-primary);
}
.order-form-modal .form-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 8px 12px;
}
.order-form-modal .form-section { margin-bottom: 12px; }
.order-form-modal .form-section h3 {
    margin-bottom: 12px !important;
    padding-bottom: 6px !important;
    font-size: 15px !important;
}
.order-form-modal .form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.order-form-modal .form-row .form-group { margin-bottom: 0; }
.order-form-modal .form-group { margin-bottom: 12px; }
.order-form-modal .form-group label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 13px;
}
.order-form-modal .form-group input,
.order-form-modal .form-group select,
.order-form-modal .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}
.order-form-modal .form-group textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.4;
}
.order-form-modal .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--border-color);
}
.order-form-modal .smart-input-section {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    border: 2px solid var(--success-color);
}
.order-form-modal .smart-input-title {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success-color);
    font-size: 14px;
}
.order-form-modal .balance-display {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    overflow: visible !important;
}
.order-form-modal .balance-display::before { display: none !important; }

html[data-theme^="light"] .order-form-modal .balance-display {
    color: #059669 !important;
    font-weight: 700;
}
html[data-theme^="dark"] .order-form-modal .balance-display,
html.dark-blue-mode .order-form-modal .balance-display,
html.dark-purple-mode .order-form-modal .balance-display,
html.dark-green-mode .order-form-modal .balance-display {
    color: #34d399 !important;
    font-weight: 700;
    text-shadow: none !important;
}
.order-form-modal .required { color: var(--error-color); }

@media (max-width: 768px) {
    .order-form-modal-content {
        width: 95%;
        max-height: 95vh;
    }
    .order-form-modal .form-row { flex-direction: column; }
    .order-form-modal .form-actions { flex-direction: column; }
    .order-form-modal .form-actions .btn { width: 100%; }
}

/* 智能识别原始文本浮层样式 */
.recognize-text-float {
    position: fixed;
    right: 20px;
    top: 20px;
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    background: var(--bg-card);
    border: 2px solid var(--success-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
html[data-theme^="dark"] .recognize-text-float,
html.dark-blue-mode .recognize-text-float,
html.dark-purple-mode .recognize-text-float,
html.dark-green-mode .recognize-text-float {
    background: var(--bg-card);
    border-color: var(--success-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.float-header {
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px 10px 0 0;
}
html[data-theme^="dark"] .float-header { background: rgba(16, 185, 129, 0.2); }
.float-title {
    font-weight: bold;
    color: var(--success-color);
    font-size: 14px;
}
html[data-theme^="dark"] .float-title,
html.dark-blue-mode .float-title,
html.dark-purple-mode .float-title,
html.dark-green-mode .float-title {
    color: var(--success-text);
}
.float-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
}
.float-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.float-content {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: calc(100vh - 120px);
}

@keyframes modalSlideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 未匹配字段提示样式 */
.field-unmatched,
input.field-unmatched,
select.field-unmatched,
textarea.field-unmatched {
    border-color: #f59e0b !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}
html[data-theme^="dark"] .field-unmatched,
html[data-theme^="dark"] input.field-unmatched,
html[data-theme^="dark"] select.field-unmatched,
html[data-theme^="dark"] textarea.field-unmatched {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.field-default-value,
input.field-default-value,
select.field-default-value,
textarea.field-default-value {
    border-color: #3b82f6 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
html[data-theme^="dark"] .field-default-value,
html[data-theme^="dark"] input.field-default-value,
html[data-theme^="dark"] select.field-default-value,
html[data-theme^="dark"] textarea.field-default-value {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.field-hint {
    margin-top: 6px;
    padding: 6px 10px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    color: #92400e;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: fadeIn 0.3s ease-in;
}
html[data-theme^="dark"] .field-hint {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #fbbf24;
}

.field-hint-default {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}
html[data-theme^="dark"] .field-hint-default {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 订单管理列表中总价样式：只保留颜色，不特殊字体大小和粗体 */
.data-table .balance-amount {
    font-size: inherit !important;
    font-weight: normal !important;
    color: var(--primary-color);
}

/* ===========================
   配送（闪送）浮层样式（orders页面）
   =========================== */
.ss-delivery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10003;
    display: none;
    align-items: center;
    justify-content: center;
}
.ss-delivery-modal.show { display: flex; }
.ss-delivery-modal-content {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 95%;
    width: 95%;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 2px solid var(--border-color);
}
.ss-delivery-modal-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1;
}
.ss-tabs { display:flex; gap:10px; flex-wrap: wrap; margin: 8px 0 14px; }
.ss-tab {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
}
.ss-tab.active { background: var(--accent-gradient); color: #fff; border-color: transparent; }
.ss-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .ss-grid-2 { grid-template-columns: 1fr; } }
.ss-actions-row { display:flex; gap:10px; flex-wrap: wrap; align-items: center; }
.ss-pre {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 12px;
    border-radius: 12px;
    min-height: 140px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.ss-summary {
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    margin-bottom: 10px;
}
.ss-summary-title { font-weight: 800; margin-bottom: 8px; }
.ss-summary-subtitle { font-weight: 700; margin: 10px 0 6px; color: var(--text-secondary); font-size: 12px; }
.ss-summary-muted { color: var(--text-secondary); font-size: 12px; }
.ss-kv { display:flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed rgba(0,0,0,0.12); }
html[data-theme^="dark"] .ss-kv { border-top-color: rgba(255,255,255,0.12); }
.ss-kv:first-of-type { border-top: none; }
.ss-kv span { color: var(--text-secondary); font-size: 12px; }
.ss-kv strong { font-weight: 800; }
.ss-kv code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
.ss-fee-list { display: grid; gap: 6px; }
.ss-fee-row { display:flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,0.05); }
html[data-theme^="dark"] .ss-fee-row { background: rgba(255,255,255,0.06); }
.ss-fee-row span { color: var(--text-primary); font-size: 12px; }
.ss-fee-row strong { font-weight: 800; }

.ss-banner {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    margin-bottom: 12px;
    font-weight: 600;
}
.ss-banner.success { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.10); color: var(--success-text); }
.ss-banner.error { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); color: var(--error-text); }
.ss-banner.warning { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); color: var(--warning-color); }
.ss-banner.info { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.10); color: var(--info-color); }

.ss-timeline {
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.ss-timeline-head { font-weight: 700; margin-bottom: 10px; color: var(--text-primary); }
.ss-timeline-steps { display: grid; gap: 8px; }
.ss-timeline-step { display:flex; align-items:center; gap: 10px; }
.ss-timeline-dot { width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--border-color); background: transparent; }
.ss-timeline-label { display:flex; align-items: baseline; gap: 8px; color: var(--text-primary); font-weight: 600; }
.ss-timeline-code { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.ss-timeline-step.done .ss-timeline-dot { border-color: rgba(34,197,94,0.6); background: rgba(34,197,94,0.35); }
.ss-timeline-step.active .ss-timeline-dot { border-color: rgba(59,130,246,0.8); background: rgba(59,130,246,0.45); }
.ss-timeline-step.todo .ss-timeline-dot { opacity: 0.8; }
.ss-timeline-step.todo .ss-timeline-label { color: var(--text-secondary); font-weight: 600; }

.ss-visual { display: grid; gap: 10px; margin-bottom: 10px; }
.ss-raw summary { cursor: pointer; color: var(--text-secondary); font-weight: 700; margin-bottom: 6px; }
.ss-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.ss-table th, .ss-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    font-size: 13px;
}
.ss-table th { text-align: left; color: var(--text-secondary); width: 160px; }
.ss-table tr:last-child th, .ss-table tr:last-child td { border-bottom: none; }

.ss-tree details > summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
.ss-tree { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; }
.ss-tree .ss-tree-node { margin-top: 8px; }
.ss-tree code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
.ss-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(0,0,0,0.04);
    font-size: 12px;
    font-weight: 700;
}
html[data-theme^="dark"] .ss-pill { background: rgba(255,255,255,0.06); }

/* ========== 闪送开放平台（后台页）通用样式（原 shansong_platform.html 内联迁移） ========== */
.ss-page { display: block; }
.ss-badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: rgba(0,0,0,0.08);
}
html[data-theme^="light"] .ss-badge { background: rgba(0,0,0,0.04); }
.ss-badge.ok { border-color: rgba(34,197,94,0.35); color: var(--success-text); background: rgba(34,197,94,0.12); }
.ss-badge.bad { border-color: rgba(239,68,68,0.35); color: var(--error-text); background: rgba(239,68,68,0.12); }
.ss-badge.warn { border-color: rgba(251,191,36,0.35); color: var(--warning-color); background: rgba(251,191,36,0.12); }
.ss-badge.info { border-color: rgba(96,165,250,0.35); color: var(--info-color); background: rgba(96,165,250,0.10); }

.ss-panel { display: none; }
.ss-panel.active { display: block; }
.ss-code-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ss-mini { font-size: 12px; color: var(--text-secondary); }

/* 城市选择器弹窗（配置页） */
.ss-city-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10020; }
.ss-city-modal.show { display: flex; }
.ss-city-modal .ss-city-overlay { position:absolute; inset:0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.ss-city-modal .ss-city-card {
    position: relative;
    width: min(980px, 95vw);
    max-height: 90vh;
    overflow: hidden;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
}
.ss-city-head { padding: 14px 16px; border-bottom: 1px solid var(--border-color); display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.ss-city-head h3 { margin: 0; font-size: 16px; }
.ss-city-body { padding: 14px 16px; overflow: auto; }
.ss-city-actions { display:flex; gap:10px; flex-wrap: wrap; align-items:center; margin-bottom: 12px; }
.ss-city-list { display: grid; gap: 10px; }
.ss-city-item {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
}
.ss-city-item strong { font-weight: 800; }
.ss-city-item .meta { color: var(--text-secondary); font-size: 12px; }
.ss-city-item.active { outline: 2px solid rgba(59,130,246,0.8); }

/* ========== 小程序后台：订单/商品/用户页面（从内联样式迁移） ========== */
.miniprogram-orders-page .order-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.miniprogram-orders-page .order-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.miniprogram-orders-page .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.miniprogram-orders-page .order-no {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.miniprogram-orders-page .order-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.miniprogram-orders-page .order-status {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
}
.miniprogram-orders-page .status-pending { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.25); color: var(--warning-color); }
.miniprogram-orders-page .status-paid { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.25); color: var(--success-text); }
.miniprogram-orders-page .status-shipped { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.25); color: var(--info-color); }
.miniprogram-orders-page .status-completed { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.25); color: var(--success-text); }
.miniprogram-orders-page .status-cancelled { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.25); color: var(--error-text); }

.miniprogram-orders-page .order-items-list { margin-bottom: 12px; }
.miniprogram-orders-page .order-item-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 8px;
}
.miniprogram-orders-page .order-item-product:last-child { margin-bottom: 0; }

.miniprogram-orders-page .product-image,
.miniprogram-products-page .product-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,0.04);
    flex-shrink: 0;
}
html[data-theme^="dark"] .miniprogram-orders-page .product-image,
html[data-theme^="dark"] .miniprogram-products-page .product-image {
    background: rgba(255,255,255,0.06);
}
.miniprogram-orders-page .product-image-placeholder,
.miniprogram-products-page .product-image-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 22px;
    flex-shrink: 0;
}
html[data-theme^="dark"] .miniprogram-orders-page .product-image-placeholder,
html[data-theme^="dark"] .miniprogram-products-page .product-image-placeholder {
    background: rgba(255,255,255,0.06);
}

.miniprogram-orders-page .product-name {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.miniprogram-orders-page .product-specs {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.miniprogram-orders-page .product-price-quantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.miniprogram-orders-page .product-price {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 800;
}
.miniprogram-orders-page .product-quantity {
    font-size: 12px;
    color: var(--text-secondary);
}

.miniprogram-orders-page .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-orders-page .total-label { font-size: 13px; color: var(--text-secondary); margin-right: 8px; }
.miniprogram-orders-page .total-price { font-size: 18px; color: var(--primary-color); font-weight: 900; }
.miniprogram-orders-page .order-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* 小程序订单：详情弹窗（更紧凑、更易读） */
.miniprogram-orders-page #orderModal .modal-content {
    padding: 0;
    overflow: hidden;
}
.miniprogram-orders-page #orderModal .modal-content > .modal-header { margin: 0; }
.miniprogram-orders-page #orderModal .modal-body { padding: 16px; }
.miniprogram-orders-page #orderModal .modal-footer { padding: 12px 16px; }

.miniprogram-orders-page #orderModal .detail-section {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.miniprogram-orders-page #orderModal .detail-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 700;
}
.miniprogram-orders-page #orderModal .detail-value {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
}
.miniprogram-orders-page #orderModal .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.miniprogram-orders-page #orderModal .detail-row:last-child { margin-bottom: 0; }
.miniprogram-orders-page #orderModal .detail-row-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-orders-page #orderModal .detail-row-strong { font-weight: 900; }
.miniprogram-orders-page #orderModal .detail-amount-strong { font-weight: 900; color: var(--primary-color); font-size: 18px; }

.miniprogram-orders-page #orderModal .order-item-product { margin-bottom: 10px; }
.miniprogram-orders-page #orderModal .order-item-product:last-child { margin-bottom: 0; }

/* 商品页：状态徽标（从内联样式迁移/补齐） */
.miniprogram-products-page .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
}
.miniprogram-products-page .status-online { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: var(--success-text); }
.miniprogram-products-page .status-offline { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: var(--error-text); }

/* 商品页：图片管理/预览（从内联样式迁移/补齐） */
.miniprogram-products-page .image-upload-section { margin-bottom: 18px; }
.miniprogram-products-page .image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}
.miniprogram-products-page .image-preview-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.35);
    background: rgba(0,0,0,0.04);
}
html[data-theme^="dark"] .miniprogram-products-page .image-preview-item { background: rgba(255,255,255,0.06); }
.miniprogram-products-page .image-preview-item.main {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.18);
}
.miniprogram-products-page .image-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.miniprogram-products-page .image-preview-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    padding: 6px;
    background: rgba(0,0,0,0.65);
    border-radius: 10px;
    backdrop-filter: blur(6px);
}
.miniprogram-products-page .image-preview-actions button {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.miniprogram-products-page .image-preview-actions button:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }
.miniprogram-products-page .image-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 11px;
    padding: 6px 8px;
    text-align: center;
}
.miniprogram-products-page .upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--accent-gradient);
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.30);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
    transition: transform 0.15s ease, filter 0.15s ease;
    user-select: none;
}
.miniprogram-products-page .upload-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
.miniprogram-products-page .upload-btn input[type="file"] { display: none; }
.miniprogram-products-page .image-url-input {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.miniprogram-products-page .image-url-input input { flex: 1; min-width: 240px; }

/* 商品页：图片预览模态框 */
#imagePreviewOverlay { z-index: 10003; }
.image-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10004;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.image-modal.show { display: flex; }
.image-modal img {
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(0,0,0,0.25);
    box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}
.image-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
.image-modal-close:hover { background: rgba(0,0,0,0.60); }

/* 用户页：统计卡片网格 */
.miniprogram-users-page .statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.miniprogram-users-page .stat-card {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.miniprogram-users-page .stat-card:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.35);
    transform: translateY(-1px);
}
.miniprogram-users-page .stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.miniprogram-users-page .stat-value { font-size: 22px; font-weight: 900; color: var(--primary-color); }
.miniprogram-users-page .stat-unit { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }
.miniprogram-users-page .stat-section { margin-bottom: 24px; }
.miniprogram-users-page .stat-section-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* ========== 小程序后台：余额/支付/统计/配置/分类（从内联样式迁移） ========== */
.miniprogram-balance-page .stats-grid,
.miniprogram-payments-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.miniprogram-balance-page .stat-card,
.miniprogram-payments-page .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(10px);
}
.miniprogram-balance-page .stat-label,
.miniprogram-payments-page .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.miniprogram-balance-page .stat-value,
.miniprogram-payments-page .stat-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-color);
}

.miniprogram-balance-page .filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.miniprogram-balance-page .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.miniprogram-balance-page .filter-item label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}
.miniprogram-balance-page .filter-item input,
.miniprogram-balance-page .filter-item select {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 13px;
}
.miniprogram-balance-page .type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--border-color);
}
.miniprogram-balance-page .type-recharge { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: var(--success-text); }
.miniprogram-balance-page .type-gift { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: var(--warning-color); }
.miniprogram-balance-page .type-consume { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: var(--error-text); }
.miniprogram-balance-page .status-pending { background: rgba(245,158,11,0.14); color: var(--warning-color); }
.miniprogram-balance-page .status-completed { background: rgba(16,185,129,0.14); color: var(--success-text); }
.miniprogram-balance-page .status-cancelled { background: rgba(239,68,68,0.14); color: var(--error-text); }
.miniprogram-balance-page .amount-positive { color: var(--success-text); font-weight: 900; }
.miniprogram-balance-page .amount-negative { color: var(--error-text); font-weight: 900; }

.miniprogram-payments-page .payment-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.miniprogram-payments-page .payment-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.miniprogram-payments-page .payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-payments-page .payment-order-id { font-size: 15px; font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }
.miniprogram-payments-page .payment-meta { font-size: 12px; color: var(--text-secondary); }
.miniprogram-payments-page .payment-status {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
}

.miniprogram-payments-page .status-pending { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: var(--warning-color); }
.miniprogram-payments-page .status-success { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: var(--success-text); }
.miniprogram-payments-page .status-failed { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: var(--error-text); }

.miniprogram-payments-page .payment-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.miniprogram-payments-page .detail-item { display: flex; flex-direction: column; gap: 6px; }
.miniprogram-payments-page .detail-label { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.miniprogram-payments-page .detail-value { font-size: 14px; color: var(--text-primary); }
.miniprogram-payments-page .payment-amount { font-size: 18px; color: var(--primary-color); font-weight: 900; }

.miniprogram-payments-page .payment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-payments-page .order-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 800;
}
.miniprogram-payments-page .order-link:hover { text-decoration: underline; }

/* 支付：详情弹窗（更统一） */
.miniprogram-payments-page #paymentModal .modal-content {
    padding: 0;
    overflow: hidden;
}
.miniprogram-payments-page #paymentModal .modal-content > .modal-header { margin: 0; }
.miniprogram-payments-page #paymentModal .modal-body { padding: 16px; }
.miniprogram-payments-page #paymentModal .modal-footer { padding: 12px 16px; }

.miniprogram-payments-page #paymentModal .detail-section {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.miniprogram-payments-page #paymentModal .detail-section:last-child { margin-bottom: 0; }
.miniprogram-payments-page #paymentModal .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.miniprogram-payments-page #paymentModal .detail-row:last-child { margin-bottom: 0; }
.miniprogram-payments-page #paymentModal .payment-amount-large {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary-color);
}

.miniprogram-statistics-page .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.miniprogram-statistics-page .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.miniprogram-statistics-page .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
}
.miniprogram-statistics-page .stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.miniprogram-statistics-page .stat-value { font-size: 26px; font-weight: 900; color: var(--primary-color); margin-bottom: 4px; }
.miniprogram-statistics-page .stat-unit { font-size: 13px; color: var(--text-secondary); }
.miniprogram-statistics-page .stat-section { margin-bottom: 26px; }
.miniprogram-statistics-page .stat-section-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-statistics-page .refresh-btn {
    background: var(--accent-gradient);
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(0,0,0,0.15);
    margin-bottom: 14px;
}
.miniprogram-statistics-page .refresh-btn:hover { transform: translateY(-1px); }
.miniprogram-statistics-page .loading { text-align: center; padding: 32px; color: var(--text-secondary); }
.miniprogram-statistics-page .error {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.30);
    border-radius: 12px;
    padding: 14px;
    color: var(--error-text);
    margin-bottom: 14px;
}

.miniprogram-config-page .config-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.miniprogram-config-page .config-section h2 {
    color: var(--text-primary);
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 900;
}
.miniprogram-config-page .config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-config-page .config-item:last-child { border-bottom: none; }
.miniprogram-config-page .config-label { color: var(--text-primary); font-size: 13px; font-weight: 700; }
.miniprogram-config-page .config-desc { color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
.miniprogram-config-page .btn-group { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }

.miniprogram-categories-page .action-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.miniprogram-categories-page .search-bar { display: flex; gap: 12px; flex: 1; min-width: 200px; }
.miniprogram-categories-page .category-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.miniprogram-categories-page .category-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.miniprogram-categories-page .category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-categories-page .category-info { flex: 1; display: flex; align-items: center; gap: 12px; }
.miniprogram-categories-page .category-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,0.04);
    flex-shrink: 0;
}
html[data-theme^="dark"] .miniprogram-categories-page .category-image { background: rgba(255,255,255,0.06); }
.miniprogram-categories-page .category-image-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 22px;
    flex-shrink: 0;
}
html[data-theme^="dark"] .miniprogram-categories-page .category-image-placeholder { background: rgba(255,255,255,0.06); }
.miniprogram-categories-page .category-title { font-size: 15px; font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }
.miniprogram-categories-page .category-meta { font-size: 12px; color: var(--text-secondary); }

/* ========== 小程序后台：优惠券 / 轮播图 / 购物车 / 用户关系 / 地址（从内联样式迁移） ========== */
.miniprogram-coupons-page .type-badge,
.miniprogram-banners-page .type-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
}
.miniprogram-coupons-page .type-discount { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: var(--warning-color); }
.miniprogram-coupons-page .type-percent { background: rgba(168,85,247,0.14); border-color: rgba(168,85,247,0.25); color: var(--purple-color); }
.miniprogram-banners-page .type-hot_product { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: var(--warning-color); }
.miniprogram-banners-page .type-new_product { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: var(--success-text); }
.miniprogram-banners-page .type-coupon { background: rgba(168,85,247,0.14); border-color: rgba(168,85,247,0.25); color: var(--purple-color); }

/* 列表卡片通用（可复用） */
.miniprogram-coupons-page .coupon-item,
.miniprogram-banners-page .banner-item,
.miniprogram-cart-page .cart-item,
.miniprogram-user-relations-page .relation-item,
.miniprogram-addresses-page .address-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.miniprogram-coupons-page .coupon-item:hover,
.miniprogram-banners-page .banner-item:hover,
.miniprogram-cart-page .cart-item:hover,
.miniprogram-user-relations-page .relation-item:hover,
.miniprogram-addresses-page .address-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.miniprogram-coupons-page .coupon-header,
.miniprogram-banners-page .banner-header,
.miniprogram-cart-page .cart-header,
.miniprogram-user-relations-page .relation-header,
.miniprogram-addresses-page .address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.miniprogram-cart-page .cart-info,
.miniprogram-categories-page .category-info,
.miniprogram-banners-page .banner-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.miniprogram-cart-page .cart-title,
.miniprogram-user-relations-page .relation-title,
.miniprogram-addresses-page .address-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.miniprogram-cart-page .cart-meta,
.miniprogram-user-relations-page .relation-meta,
.miniprogram-addresses-page .address-meta {
    font-size: 12px;
    color: var(--text-secondary);
}
.miniprogram-addresses-page .address-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.miniprogram-cart-page .selected-badge,
.miniprogram-addresses-page .default-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(16,185,129,0.14);
    border: 1px solid rgba(16,185,129,0.25);
    color: var(--success-text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.miniprogram-addresses-page .address-item.is-default {
    border-color: rgba(16,185,129,0.35);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}

.miniprogram-cart-page .cart-details,
.miniprogram-user-relations-page .relation-details,
.miniprogram-addresses-page .address-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.miniprogram-cart-page .detail-label,
.miniprogram-user-relations-page .detail-label,
.miniprogram-addresses-page .detail-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.miniprogram-cart-page .detail-value,
.miniprogram-user-relations-page .detail-value,
.miniprogram-addresses-page .detail-value {
    font-size: 13px;
    color: var(--text-primary);
}
.miniprogram-cart-page .price-value { font-size: 16px; color: var(--success-text); font-weight: 900; }

.miniprogram-addresses-page .full-address {
    grid-column: 1 / -1;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    line-height: 1.6;
    word-break: break-word;
}

/* 地址管理：统计卡片 */
.miniprogram-addresses-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.miniprogram-addresses-page .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.miniprogram-addresses-page .stat-value { font-size: 22px; font-weight: 900; color: var(--primary-color); margin-bottom: 6px; }
.miniprogram-addresses-page .stat-label { font-size: 13px; color: var(--text-secondary); }

/* 优惠券：编辑/添加弹窗（表单与规则区） */
.miniprogram-coupons-page #couponModal .modal-content,
.miniprogram-coupons-page #rulesModal .modal-content {
    padding: 0;
    overflow: hidden;
}
.miniprogram-coupons-page #couponModal .modal-content {
    width: min(980px, 96vw);
    max-height: 92vh;
}
.miniprogram-coupons-page #couponModal .modal-content > .modal-header,
.miniprogram-coupons-page #rulesModal .modal-content > .modal-header {
    margin: 0;
}
.miniprogram-coupons-page #couponModal form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.miniprogram-coupons-page #couponModal form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
}
.miniprogram-coupons-page #couponModal .modal-body,
.miniprogram-coupons-page #rulesModal .modal-body {
    padding: 16px;
    overflow: auto;
}
.miniprogram-coupons-page #couponModal .modal-footer,
.miniprogram-coupons-page #rulesModal .modal-footer {
    padding: 12px 16px;
}

.miniprogram-coupons-page .form-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.miniprogram-coupons-page .coupon-rules-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-coupons-page .coupon-rules-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}
.miniprogram-coupons-page .coupon-rule-block { margin-bottom: 16px; }
.miniprogram-coupons-page .coupon-rule-block:last-child { margin-bottom: 0; }
.miniprogram-coupons-page .coupon-rule-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.miniprogram-coupons-page .coupon-rule-label { margin: 0; }
.miniprogram-coupons-page .coupon-rule-container {
    min-height: 50px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
}
.miniprogram-coupons-page .tech-btn.tech-btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 10px;
}

/* 优惠券：规则管理 iframe */
.miniprogram-coupons-page #rulesModal .modal-content {
    /* 覆盖全局 modal-content 的 max-width 限制，避免被卡到 800px */
    width: min(1480px, 98vw);
    max-width: min(1480px, 98vw);
    max-height: 92vh;
}
.miniprogram-coupons-page #rulesModal .modal-body.rules-iframe-wrap { padding: 0; }
.miniprogram-coupons-page .rules-iframe {
    width: 100%;
    height: 78vh;
    border: none;
    background: transparent;
}

/* 用户关系：树形视图 */
.miniprogram-user-relations-page .tree-view {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    max-height: 600px;
    overflow-y: auto;
}
.miniprogram-user-relations-page .tree-node {
    margin-left: calc(var(--tree-depth, 0) * 22px);
    padding: 10px 0 10px 14px;
    border-left: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.30);
    margin-bottom: 10px;
    position: relative;
}
.miniprogram-user-relations-page .tree-node-root {
    margin-left: 0;
    border-left: none;
    font-weight: 900;
}
.miniprogram-user-relations-page .tree-node-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor: default;
}
.miniprogram-user-relations-page .tree-node-content:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.40);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06);
}
.miniprogram-user-relations-page .tree-node-content.expanded {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55);
}
.miniprogram-user-relations-page .tree-toggle,
.miniprogram-user-relations-page .tree-toggle-placeholder {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.miniprogram-user-relations-page .tree-toggle {
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.30);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
}
.miniprogram-user-relations-page .tree-toggle:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10);
}
.miniprogram-user-relations-page .tree-node-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}
.miniprogram-user-relations-page .tree-node-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.miniprogram-user-relations-page .tree-node-info { flex: 1; min-width: 0; }
.miniprogram-user-relations-page .tree-node-name {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.miniprogram-user-relations-page .tree-node-details {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.miniprogram-user-relations-page .tree-node-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.miniprogram-user-relations-page .tree-children { display: none; margin-top: 10px; }
.miniprogram-user-relations-page .tree-children.show { display: block; }

/* 关系树：搜索 */
.miniprogram-user-relations-page .tree-search-container { position: relative; }
.miniprogram-user-relations-page .tree-search-bar { display: flex; gap: 10px; align-items: center; }
.miniprogram-user-relations-page .tree-search-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
}
.miniprogram-user-relations-page .tree-search-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.miniprogram-user-relations-page .tree-search-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.20);
    overflow: hidden;
    z-index: 5;
}
.miniprogram-user-relations-page .tree-search-results.show { display: block; }
.miniprogram-user-relations-page .tree-search-result-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-user-relations-page .tree-search-result-item:last-child { border-bottom: none; }
.miniprogram-user-relations-page .tree-search-result-item:hover { background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06); }
.miniprogram-user-relations-page .tree-search-title { font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }
.miniprogram-user-relations-page .tree-search-meta { font-size: 11px; color: var(--text-secondary); }
.miniprogram-user-relations-page .tree-search-empty { color: var(--text-secondary); cursor: default; }

/* 关系树：弹窗尺寸与滚动 */
.miniprogram-user-relations-page #treeModal .modal-content {
    width: min(1100px, 96vw);
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
}
.miniprogram-user-relations-page #treeModal .modal-content > .modal-header { margin: 0; }
.miniprogram-user-relations-page #treeModal .modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.miniprogram-user-relations-page #treeModal .modal-footer { padding: 12px 16px; }

/* ========== 表单类名兼容（form-input / form-label 等） ========== */
.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
}
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.form-textarea { resize: vertical; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
}

/* 兼容按钮式分页的 disabled 属性 */
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}
.pagination-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ========== 小程序后台：寻鲜寻优订单（从内联样式迁移） ========== */
.miniprogram-fresh-premium-orders-page .order-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.miniprogram-fresh-premium-orders-page .order-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.miniprogram-fresh-premium-orders-page .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-fresh-premium-orders-page .order-no { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.miniprogram-fresh-premium-orders-page .order-meta { font-size: 12px; color: var(--text-secondary); }
.miniprogram-fresh-premium-orders-page .order-status {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
}
.miniprogram-fresh-premium-orders-page .status-pending { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.25); color: var(--warning-color); }
.miniprogram-fresh-premium-orders-page .status-paid { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.25); color: var(--success-text); }
.miniprogram-fresh-premium-orders-page .status-shipped { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.25); color: var(--info-color); }
.miniprogram-fresh-premium-orders-page .status-completed { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.25); color: var(--success-text); }
.miniprogram-fresh-premium-orders-page .status-cancelled { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.25); color: var(--error-text); }
.miniprogram-fresh-premium-orders-page .order-item-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 8px;
}
.miniprogram-fresh-premium-orders-page .product-image { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; background: rgba(0,0,0,0.04); flex-shrink: 0; }
html[data-theme^="dark"] .miniprogram-fresh-premium-orders-page .product-image { background: rgba(255,255,255,0.06); }
.miniprogram-fresh-premium-orders-page .product-image-placeholder { width: 60px; height: 60px; border-radius: 10px; background: rgba(0,0,0,0.04); display:flex; align-items:center; justify-content:center; color: var(--text-secondary); font-size: 22px; flex-shrink:0; }
html[data-theme^="dark"] .miniprogram-fresh-premium-orders-page .product-image-placeholder { background: rgba(255,255,255,0.06); }
.miniprogram-fresh-premium-orders-page .product-name { font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
.miniprogram-fresh-premium-orders-page .product-specs { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.miniprogram-fresh-premium-orders-page .product-price { font-size: 14px; color: var(--primary-color); font-weight: 800; }
.miniprogram-fresh-premium-orders-page .product-quantity { font-size: 12px; color: var(--text-secondary); }
.miniprogram-fresh-premium-orders-page .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-fresh-premium-orders-page .total-label { font-size: 13px; color: var(--text-secondary); margin-right: 8px; }
.miniprogram-fresh-premium-orders-page .total-price { font-size: 18px; color: var(--primary-color); font-weight: 900; }
.miniprogram-fresh-premium-orders-page .detail-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
.miniprogram-fresh-premium-orders-page .detail-value { font-size: 14px; color: var(--text-primary); }
.miniprogram-fresh-premium-orders-page .payment-info {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.22);
    padding: 14px;
    border-radius: 10px;
    margin-top: 10px;
}
.miniprogram-fresh-premium-orders-page .coupon-info {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.22);
    padding: 14px;
    border-radius: 10px;
    margin-top: 10px;
}

/* ========== 小程序后台：用户日志（从内联样式迁移） ========== */
.miniprogram-user-logs-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.miniprogram-user-logs-page .stat-card {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.miniprogram-user-logs-page .stat-value { font-size: 26px; font-weight: 900; color: var(--primary-color); margin-bottom: 6px; }
.miniprogram-user-logs-page .stat-label { font-size: 13px; color: var(--text-secondary); }
.miniprogram-user-logs-page .log-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.miniprogram-user-logs-page .log-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.miniprogram-user-logs-page .log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-user-logs-page .log-title { font-size: 15px; font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }
.miniprogram-user-logs-page .log-meta { font-size: 12px; color: var(--text-secondary); }
.miniprogram-user-logs-page .action-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.miniprogram-user-logs-page .action-login { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: var(--success-text); }
.miniprogram-user-logs-page .action-logout { background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.25); color: var(--text-secondary); }
.miniprogram-user-logs-page .action-update { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.25); color: var(--info-color); }
.miniprogram-user-logs-page .action-delete { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: var(--error-text); }
.miniprogram-user-logs-page .action-restore { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: var(--warning-color); }
.miniprogram-user-logs-page .log-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.miniprogram-user-logs-page .detail-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }
.miniprogram-user-logs-page .detail-value { font-size: 13px; color: var(--text-primary); word-break: break-all; }

/* ========== 小程序后台：优惠券规则 / 规则值（从内联样式迁移） ========== */
.miniprogram-coupon-rules-page table,
.miniprogram-coupon-rule-values-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}
.miniprogram-coupon-rules-page th,
.miniprogram-coupon-rules-page td,
.miniprogram-coupon-rule-values-page th,
.miniprogram-coupon-rule-values-page td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
html[data-theme^="dark"] .miniprogram-coupon-rules-page th,
html[data-theme^="dark"] .miniprogram-coupon-rules-page td,
html[data-theme^="dark"] .miniprogram-coupon-rule-values-page th,
html[data-theme^="dark"] .miniprogram-coupon-rule-values-page td {
    border-bottom-color: rgba(255,255,255,0.10);
}
.miniprogram-coupon-rules-page th,
.miniprogram-coupon-rule-values-page th {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10);
    color: var(--primary-color);
    font-weight: 900;
}
.miniprogram-coupon-rules-page .status-badge,
.miniprogram-coupon-rule-values-page .status-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--border-color);
}
.miniprogram-coupon-rules-page .status-online,
.miniprogram-coupon-rule-values-page .status-online { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: var(--success-text); }
.miniprogram-coupon-rules-page .status-offline,
.miniprogram-coupon-rule-values-page .status-offline { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: var(--error-text); }
.miniprogram-coupon-rules-page .rule-type-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.miniprogram-coupon-rules-page .rule-type-receive { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: var(--warning-color); }
.miniprogram-coupon-rules-page .rule-type-use { background: rgba(168,85,247,0.14); border-color: rgba(168,85,247,0.25); color: var(--purple-color); }
.miniprogram-coupon-rules-page .rule-config {
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.miniprogram-coupon-rule-values-page .default-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.25);
    color: var(--warning-color);
}
.miniprogram-coupon-rule-values-page .rule-config-preview {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}
.miniprogram-coupon-rule-values-page .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* 规则管理：筛选宽度/小按钮/代码展示/iframe 内嵌 */
.tech-btn.tech-btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 10px;
}
.miniprogram-coupon-rules-page #ruleTypeFilter,
.miniprogram-coupon-rules-page #statusFilter {
    flex: 0 0 150px;
}
.miniprogram-coupon-rules-page .rule-code {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.18);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.iframe-embed .miniprogram-coupon-rules-page .page-header,
.iframe-embed .miniprogram-coupon-rule-values-page .page-header,
.iframe-embed .miniprogram-coupon-rule-values-page .main-nav {
    display: none;
}
.iframe-embed .miniprogram-coupon-rules-page .page-section,
.iframe-embed .miniprogram-coupon-rule-values-page .page-section {
    margin-top: 0;
}

.miniprogram-coupon-rule-values-page #ruleIdFilter { flex: 0 0 220px; }
.miniprogram-coupon-rule-values-page #statusFilter { flex: 0 0 150px; }
.miniprogram-coupon-rule-values-page #keywordFilter { flex: 1; min-width: 200px; }
.miniprogram-coupon-rule-values-page .rule-config-container {
    padding: 12px;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.18);
    border-radius: 12px;
}
.miniprogram-coupon-rule-values-page .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

/* ========== 小程序后台：蛋糕订单（色彩丰富 + 紧凑布局） ========== */
/* 蛋糕主题色：玫瑰/珊瑚、琥珀、青绿、紫罗兰 */
.miniprogram-cake-orders-page {
    --cake-rose: #f472b6;
    --cake-rose-dim: rgba(244, 114, 182, 0.2);
    --cake-amber: #f59e0b;
    --cake-amber-dim: rgba(245, 158, 11, 0.18);
    --cake-teal: #14b8a6;
    --cake-teal-dim: rgba(20, 184, 166, 0.18);
    --cake-violet: #8b5cf6;
    --cake-violet-dim: rgba(139, 92, 246, 0.18);
}

/* 主卡片：紧凑 + 渐变边框 */
.miniprogram-cake-orders-page .tech-card {
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    box-shadow: 0 4px 16px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.03);
}
.miniprogram-cake-orders-page .section-title {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--cake-rose);
    background: linear-gradient(135deg, var(--cake-rose), var(--cake-violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 搜索/筛选栏：紧凑 */
.miniprogram-cake-orders-page .search-bar,
.miniprogram-cake-orders-page .filter-bar {
    gap: 8px;
    margin-bottom: 10px;
}
.miniprogram-cake-orders-page .search-input {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
    border-color: var(--cake-rose-dim);
}
.miniprogram-cake-orders-page .search-input:focus {
    border-color: var(--cake-rose);
    box-shadow: 0 0 0 2px var(--cake-rose-dim);
}
.miniprogram-cake-orders-page .filter-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
}
.miniprogram-cake-orders-page .filter-btn.active {
    background: linear-gradient(135deg, var(--cake-rose), var(--cake-violet));
    color: #fff;
    border-color: transparent;
}
.miniprogram-cake-orders-page .filter-btn:hover:not(.active) {
    border-color: var(--cake-rose);
    background: var(--cake-rose-dim);
}
.miniprogram-cake-orders-page .search-bar .tech-btn {
    background: linear-gradient(135deg, var(--cake-rose), var(--cake-violet));
    padding: 8px 14px;
    font-size: 13px;
}

/* 订单卡片：紧凑 + 左侧状态色条（兼容旧类名） */
.miniprogram-cake-orders-page .order-item,
.miniprogram-cake-orders-page .order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 10px;
    border-left: 4px solid var(--primary-color);
    transition: box-shadow 0.2s, transform 0.2s;
    overflow: hidden;
}
.miniprogram-cake-orders-page .order-item:hover,
.miniprogram-cake-orders-page .order-card:hover {
    box-shadow: 0 4px 12px var(--shadow);
}
/* 卡片左侧色条与筛选按钮颜色一致 */
.miniprogram-cake-orders-page .order-card.status-pending { border-left-color: #ffc107; }
.miniprogram-cake-orders-page .order-card.status-paid { border-left-color: #28a745; }
.miniprogram-cake-orders-page .order-card.status-confirmed { border-left-color: #007bff; }
.miniprogram-cake-orders-page .order-card.status-preparing { border-left-color: #17a2b8; }
.miniprogram-cake-orders-page .order-card.status-delivering { border-left-color: #6c757d; }
.miniprogram-cake-orders-page .order-card.status-completed { border-left-color: #28a745; }
.miniprogram-cake-orders-page .order-card.status-cancelled { border-left-color: #dc3545; }
.miniprogram-cake-orders-page .order-item.status-pending { border-left-color: #ffc107; }
.miniprogram-cake-orders-page .order-item.status-paid { border-left-color: #28a745; }
.miniprogram-cake-orders-page .order-item.status-confirmed { border-left-color: #007bff; }
.miniprogram-cake-orders-page .order-item.status-preparing { border-left-color: #17a2b8; }
.miniprogram-cake-orders-page .order-item.status-delivering { border-left-color: #6c757d; }
.miniprogram-cake-orders-page .order-item.status-completed { border-left-color: #28a745; }
.miniprogram-cake-orders-page .order-item.status-cancelled { border-left-color: #dc3545; }

/* 订单卡片：缩略图 + 主内容布局 */
.miniprogram-cake-orders-page .order-card-inner {
    display: flex;
    align-items: stretch;
    min-height: 80px;
}
.miniprogram-cake-orders-page .order-card-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.miniprogram-cake-orders-page .order-card-thumb.no-img {
    background: var(--cake-violet-dim);
}
.miniprogram-cake-orders-page .order-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.miniprogram-cake-orders-page .order-thumb-placeholder {
    font-size: 11px;
    color: var(--text-secondary);
}

/* 订单网格卡片（cake-album 风格） */
.miniprogram-cake-orders-page .orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.miniprogram-cake-orders-page .orders-grid .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
}
.miniprogram-cake-orders-page .order-card.album-style {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}
/* 配送状态水印：斜着显示在卡片上，大字撑满，浮于图片之上 */
.miniprogram-cake-orders-page .order-card-delivery-watermark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(64px, 16vw, 100px);
    font-weight: 900;
    letter-spacing: 0.08em;
    transform: rotate(-22deg);
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    white-space: nowrap;
}
.miniprogram-cake-orders-page .order-card-delivery-watermark.delivery-status-cancelled { color: #F44336; }
.miniprogram-cake-orders-page .order-card-delivery-watermark.delivery-status-dispatching { color: #FF9800; }
.miniprogram-cake-orders-page .order-card-delivery-watermark.delivery-status-picking { color: #2196F3; }
.miniprogram-cake-orders-page .order-card-delivery-watermark.delivery-status-delivering,
.miniprogram-cake-orders-page .order-card-delivery-watermark.delivery-status-completed { color: #4CAF50; }
.miniprogram-cake-orders-page .order-card-delivery-watermark.delivery-status-default { color: var(--primary-color); }
/* 自取订单水印：斜着显示“自取”，样式与配送水印一致 */
.miniprogram-cake-orders-page .order-card-pickup-watermark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(64px, 16vw, 100px);
    font-weight: 900;
    letter-spacing: 0.08em;
    transform: rotate(-22deg);
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    white-space: nowrap;
    color: #17a2b8;
}
.miniprogram-cake-orders-page .order-card.album-style:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--shadow);
}
/* 配送状态已取消：卡片背景+边框循环闪烁 */
.miniprogram-cake-orders-page .order-card.delivery-cancelled {
    animation: delivery-cancelled-pulse 1.2s ease-in-out infinite;
}
@keyframes delivery-cancelled-pulse {
    0%, 100% { background: var(--bg-card); box-shadow: 0 2px 8px var(--shadow), 0 0 0 3px rgba(244, 67, 54, 0.7), 0 0 16px rgba(244, 67, 54, 0.35); }
    50% { background: color-mix(in srgb, var(--bg-card) 85%, rgba(244, 67, 54, 0.25)); box-shadow: 0 4px 20px var(--shadow), 0 0 0 4px rgba(244, 67, 54, 1), 0 0 28px rgba(244, 67, 54, 0.6); }
}
/* 配送状态派单中：卡片背景+边框循环闪烁 */
.miniprogram-cake-orders-page .order-card.delivery-dispatching {
    animation: delivery-dispatching-pulse 1.2s ease-in-out infinite;
}
@keyframes delivery-dispatching-pulse {
    0%, 100% { background: var(--bg-card); box-shadow: 0 2px 8px var(--shadow), 0 0 0 3px rgba(255, 152, 0, 0.7), 0 0 16px rgba(255, 152, 0, 0.35); }
    50% { background: color-mix(in srgb, var(--bg-card) 85%, rgba(255, 152, 0, 0.25)); box-shadow: 0 4px 20px var(--shadow), 0 0 0 4px rgba(255, 152, 0, 1), 0 0 28px rgba(255, 152, 0, 0.6); }
}
/* 配送状态待取货：卡片背景+边框循环闪烁 */
.miniprogram-cake-orders-page .order-card.delivery-picking {
    animation: delivery-picking-pulse 1.2s ease-in-out infinite;
}
@keyframes delivery-picking-pulse {
    0%, 100% { background: var(--bg-card); box-shadow: 0 2px 8px var(--shadow), 0 0 0 3px rgba(33, 150, 243, 0.7), 0 0 16px rgba(33, 150, 243, 0.35); }
    50% { background: color-mix(in srgb, var(--bg-card) 85%, rgba(33, 150, 243, 0.25)); box-shadow: 0 4px 20px var(--shadow), 0 0 0 4px rgba(33, 150, 243, 1), 0 0 28px rgba(33, 150, 243, 0.6); }
}
/* 配送状态闪送中：卡片背景+边框循环闪烁 */
.miniprogram-cake-orders-page .order-card.delivery-delivering {
    animation: delivery-delivering-pulse 1.2s ease-in-out infinite;
}
@keyframes delivery-delivering-pulse {
    0%, 100% { background: var(--bg-card); box-shadow: 0 2px 8px var(--shadow), 0 0 0 3px rgba(76, 175, 80, 0.7), 0 0 16px rgba(76, 175, 80, 0.35); }
    50% { background: color-mix(in srgb, var(--bg-card) 85%, rgba(76, 175, 80, 0.25)); box-shadow: 0 4px 20px var(--shadow), 0 0 0 4px rgba(76, 175, 80, 1), 0 0 28px rgba(76, 175, 80, 0.6); }
}
.miniprogram-cake-orders-page .order-card.album-style .order-card-thumb {
    width: 100%;
    height: 140px;
    margin: 0;
    border-radius: 0;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 0;
}
.miniprogram-cake-orders-page .order-card.album-style .order-card-body {
    padding: 10px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.miniprogram-cake-orders-page .order-card.album-style .order-no {
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.miniprogram-cake-orders-page .order-card.album-style .order-meta,
.miniprogram-cake-orders-page .order-card.album-style .order-info-row,
.miniprogram-cake-orders-page .order-card.album-style .order-delivery-info,
.miniprogram-cake-orders-page .order-card.album-style .order-params-row {
    font-size: 11px;
    color: var(--text-secondary);
}
.miniprogram-cake-orders-page .order-params-row {
    line-height: 1.4;
}
.miniprogram-cake-orders-page .order-params-row .param-label {
    font-weight: 700;
    color: var(--cake-rose);
}
.miniprogram-cake-orders-page .order-delivery-fee {
    color: var(--text-secondary);
    font-size: 10px;
}
.miniprogram-cake-orders-page .order-delivery-info {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}
/* 1层、2层等层数文字突出颜色，避免与尺寸数值混淆 */
.miniprogram-cake-orders-page .layer-label,
.miniprogram-cake-orders-page #orderModal .layer-label {
    color: var(--cake-rose);
    font-weight: 700;
    padding: 0 1px;
}
.miniprogram-cake-orders-page .order-card.album-style .order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.miniprogram-cake-orders-page .order-card.album-style .order-actions .tech-btn {
    padding: 4px 8px;
    font-size: 10px;
}

.miniprogram-cake-orders-page .order-card-main {
    flex: 1;
    min-width: 0;
    padding: 10px 14px 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.miniprogram-cake-orders-page .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.miniprogram-cake-orders-page .order-no {
    font-weight: 900;
    color: var(--cake-rose);
    font-size: 14px;
}
.miniprogram-cake-orders-page .order-status {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}
/* 状态徽章颜色与筛选按钮一致 */
.miniprogram-cake-orders-page .status-pending { background: rgba(255,193,7,0.2); color: #ffc107; }
.miniprogram-cake-orders-page .status-paid { background: rgba(40,167,69,0.2); color: #28a745; }
.miniprogram-cake-orders-page .status-confirmed { background: rgba(0,123,255,0.18); color: #007bff; }
.miniprogram-cake-orders-page .status-preparing { background: rgba(23,162,184,0.2); color: #17a2b8; }
.miniprogram-cake-orders-page .status-delivering { background: rgba(108,117,125,0.2); color: #6c757d; }
.miniprogram-cake-orders-page .status-completed { background: rgba(40,167,69,0.2); color: #28a745; }
.miniprogram-cake-orders-page .status-cancelled { background: rgba(220,53,69,0.14); color: #dc3545; }

/* 订单内按钮：紧凑 */
.miniprogram-cake-orders-page .order-item .tech-btn {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 8px;
}
.miniprogram-cake-orders-page .order-item .tech-btn:not(.secondary):not(.danger) {
    background: linear-gradient(135deg, var(--cake-rose), var(--cake-violet));
}

/* 订单卡片：信息区、价格区、操作区 */
.miniprogram-cake-orders-page .order-meta {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 4px;
}
.miniprogram-cake-orders-page .order-body {
    margin: 8px 0;
}
.miniprogram-cake-orders-page .order-info-row {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 3px;
}
.miniprogram-cake-orders-page .order-info-row:first-child { margin-top: 0; }
.miniprogram-cake-orders-page .tag-multi {
    margin-left: 6px;
    padding: 2px 6px;
    background: var(--cake-violet-dim);
    color: var(--cake-violet);
    border-radius: 4px;
    font-size: 10px;
}
.miniprogram-cake-orders-page .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-cake-orders-page .order-price-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.miniprogram-cake-orders-page .order-price-row {
    display: flex;
    align-items: baseline;
    font-size: 12px;
}
.miniprogram-cake-orders-page .order-price-row .price-label {
    color: var(--text-secondary);
}
.miniprogram-cake-orders-page .order-price-row .price-val {
    color: var(--text-primary);
    margin-left: 6px;
}
.miniprogram-cake-orders-page .order-price-row .price-discount {
    color: var(--cake-amber);
    margin-left: 6px;
}
.miniprogram-cake-orders-page .order-price-total {
    margin-top: 4px;
}
.miniprogram-cake-orders-page .order-price-total .price-total {
    font-size: 15px;
    font-weight: 900;
    color: var(--cake-rose);
}
.miniprogram-cake-orders-page .tag-coupon {
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--cake-amber-dim);
    color: var(--cake-amber);
    border-radius: 4px;
    font-size: 10px;
}
.miniprogram-cake-orders-page .order-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.miniprogram-cake-orders-page .modal-content { max-width: 800px; }
.miniprogram-cake-orders-page .modal-content.modal-content-wide { max-width: 920px; width: 95%; }

/* 蛋糕订单：详情/取消弹窗 - 紧凑 + 色彩分区 */
.miniprogram-cake-orders-page #orderModal .modal-content {
    width: min(980px, 96vw);
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.miniprogram-cake-orders-page #orderModal .modal-header {
    background: linear-gradient(135deg, var(--cake-rose-dim), var(--cake-violet-dim));
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-cake-orders-page #cancelModal .modal-content {
    width: min(640px, 96vw);
    max-height: 80vh;
    padding: 0;
    overflow: hidden;
}
.miniprogram-cake-orders-page #orderModal .modal-content > .modal-header,
.miniprogram-cake-orders-page #cancelModal .modal-content > .modal-header { margin: 0; }
.miniprogram-cake-orders-page #orderModal .modal-body,
.miniprogram-cake-orders-page #cancelModal .modal-body { padding: 12px 14px; }
.miniprogram-cake-orders-page #orderModal .modal-footer,
.miniprogram-cake-orders-page #cancelModal .modal-footer { padding: 10px 14px; }

/* 详情区块：紧凑 + 交替背景色 */
.miniprogram-cake-orders-page #orderModal .detail-section {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.miniprogram-cake-orders-page #orderModal .detail-section:nth-child(odd) {
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
}
.miniprogram-cake-orders-page #orderModal .detail-section:nth-child(even) {
    background: linear-gradient(90deg, var(--cake-rose-dim) 0%, transparent 8%);
}
.miniprogram-cake-orders-page #orderModal .detail-section:last-child { margin-bottom: 0; }
.miniprogram-cake-orders-page #orderModal .detail-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.miniprogram-cake-orders-page #orderModal .detail-value {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
}
.miniprogram-cake-orders-page #orderModal .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.miniprogram-cake-orders-page #orderModal .detail-row:last-child { margin-bottom: 0; }
.miniprogram-cake-orders-page #orderModal .detail-row-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-cake-orders-page #orderModal .detail-row-strong { font-weight: 900; }
.miniprogram-cake-orders-page #orderModal .detail-amount-strong {
    font-weight: 900;
    color: var(--cake-rose);
    font-size: 16px;
}
.miniprogram-cake-orders-page #orderModal .amount-discount { color: var(--cake-amber); font-weight: 900; }
.miniprogram-cake-orders-page #orderModal .text-danger { color: var(--error-text); font-weight: 800; }
.miniprogram-cake-orders-page #orderModal .order-image-preview {
    max-width: 200px;
    width: 100%;
    margin-top: 8px;
    border-radius: 10px;
    border: 2px solid var(--cake-rose-dim);
    display: block;
}

/* 选择汇总：与小程序蛋糕下单/详情一致（逐行：参数名 | 显示值） */
.miniprogram-cake-orders-page #orderModal .selection-summary-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.5;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-label-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
    margin-bottom: 4px;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-label {
    width: 90px;
    min-width: 90px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-value {
    flex: 1;
    color: var(--text-primary);
    word-break: break-all;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-param-group {
    margin-bottom: 12px;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-group-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-size: 13px;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-layer-row {
    padding: 4px 0;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-layer-row .selection-summary-label {
    min-width: 50px;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-mutual-hint {
    margin-bottom: 8px;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-multi {
    min-height: 80px;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-select {
    flex: 1;
    min-width: 120px;
    max-width: 100%;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-select[multiple] {
    min-height: 60px;
}

/* 选择汇总：checkbox/radio 组（与 cake_parameter_configs 一致，支持点击文字选择） */
.miniprogram-cake-orders-page #orderModal .selection-summary-list .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    flex: 1;
    min-width: 0;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .checkbox-item,
.miniprogram-cake-orders-page #orderModal .selection-summary-list .selection-option-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .selection-option-card:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.3);
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .selection-option-card:has(input:checked) {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.15);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .option-disabled .option-text {
    color: var(--text-secondary);
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .checkbox-item input[type="checkbox"],
.miniprogram-cake-orders-page #orderModal .selection-summary-list .checkbox-item input[type="radio"],
.miniprogram-cake-orders-page #orderModal .selection-summary-list .selection-option-card input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .checkbox-item .option-text,
.miniprogram-cake-orders-page #orderModal .selection-summary-list .selection-option-card .option-text {
    font-size: 13px;
    color: var(--text-primary);
    user-select: none;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-list .detail-section {
    padding: 12px 0;
}
.miniprogram-cake-orders-page #orderModal .selection-summary-param-group {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 页面区、空状态、分页：紧凑 */
.miniprogram-cake-orders-page .page-section {
    margin-top: 12px;
}
.miniprogram-cake-orders-page .empty-state {
    padding: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}
.miniprogram-cake-orders-page .pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.miniprogram-cake-orders-page .pagination .tech-btn {
    padding: 6px 12px;
    font-size: 12px;
}
.miniprogram-cake-orders-page .pagination-info {
    color: var(--text-secondary);
    font-size: 13px;
}

/* ========== 小程序后台：蛋糕参数（从内联样式迁移） ========== */
.miniprogram-cake-parameters-options-page .option-image-small {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,0.04);
}
html[data-theme^="dark"] .miniprogram-cake-parameters-options-page .option-image-small { background: rgba(255,255,255,0.06); }
.miniprogram-cake-parameters-options-page .image-preview {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,0.04);
    margin-top: 10px;
}
html[data-theme^="dark"] .miniprogram-cake-parameters-options-page .image-preview { background: rgba(255,255,255,0.06); }
.miniprogram-cake-parameters-options-page .parameter-row {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 16px;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.miniprogram-cake-parameters-options-page .parameter-row:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
}
.miniprogram-cake-parameters-options-page .parameter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.miniprogram-cake-parameters-options-page .parameter-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.miniprogram-cake-parameters-options-page .options-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-cake-parameters-options-page .options-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.miniprogram-cake-parameters-options-page .options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.miniprogram-cake-parameters-options-page .option-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    cursor: grab;
}
.miniprogram-cake-parameters-options-page .option-card:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
    transform: translateY(-1px);
}
.miniprogram-cake-parameters-options-page .option-card:active { cursor: grabbing; }
.miniprogram-cake-parameters-options-page .option-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.04);
}
html[data-theme^="dark"] .miniprogram-cake-parameters-options-page .option-image { background: rgba(255,255,255,0.06); }
.miniprogram-cake-parameters-options-page .option-name { font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }
.miniprogram-cake-parameters-options-page .option-price { color: var(--primary-color); font-size: 13px; margin-bottom: 4px; font-weight: 800; }
.miniprogram-cake-parameters-options-page .option-actions { display: flex; gap: 6px; margin-top: 10px; }
.miniprogram-cake-parameters-options-page .option-actions button { flex: 1; padding: 6px 12px; font-size: 12px; }
.miniprogram-cake-parameters-options-page .drag-handle {
    cursor: move;
    color: var(--text-secondary);
    font-size: 18px;
    padding: 5px;
    margin-right: 10px;
    user-select: none;
}
.miniprogram-cake-parameters-options-page .drag-handle:hover { color: var(--primary-color); }
.miniprogram-cake-parameters-options-page .parameter-row.dragging,
.miniprogram-cake-parameters-options-page .option-card.dragging { opacity: 0.5; border-color: var(--primary-color); }
.miniprogram-cake-parameters-options-page .option-card.dragging { transform: scale(0.95); cursor: grabbing; }
.miniprogram-cake-parameters-options-page .parameter-row.drag-over { border-top: 2px solid var(--primary-color); }
.miniprogram-cake-parameters-options-page .option-card.drag-over {
    border: 2px solid var(--primary-color);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
    transform: scale(1.02);
}
.miniprogram-cake-parameters-options-page .modal-content { max-width: 600px; }

/* ========== 小程序后台：蛋糕配置（从内联样式迁移） ========== */
.miniprogram-cake-parameter-configs-page td.param-details-cell {
    min-width: 300px;
    max-width: 600px;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6;
}
.miniprogram-cake-parameter-configs-page .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}
.miniprogram-cake-parameter-configs-page .checkbox-item { display: flex; align-items: center; gap: 8px; }
.miniprogram-cake-parameter-configs-page .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; }
.miniprogram-cake-parameter-configs-page .size-price-config { display: flex; flex-direction: column; gap: 10px; }
.miniprogram-cake-parameter-configs-page .size-price-item { display: flex; gap: 10px; align-items: center; }
.miniprogram-cake-parameter-configs-page .size-price-item input { flex: 1; }
.miniprogram-cake-parameter-configs-page .modal-content { max-width: 900px; }

/* ========== 小程序后台：蛋糕素材（基础水果 / 特调奶油 / 特调夹心） ========== */
.miniprogram-cake-base-fruits-page table,
.miniprogram-cake-special-creams-page table,
.miniprogram-cake-special-fillings-page table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}
.miniprogram-cake-base-fruits-page th,
.miniprogram-cake-base-fruits-page td,
.miniprogram-cake-special-creams-page th,
.miniprogram-cake-special-creams-page td,
.miniprogram-cake-special-fillings-page th,
.miniprogram-cake-special-fillings-page td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    vertical-align: middle;
}
html[data-theme^="dark"] .miniprogram-cake-base-fruits-page th,
html[data-theme^="dark"] .miniprogram-cake-base-fruits-page td,
html[data-theme^="dark"] .miniprogram-cake-special-creams-page th,
html[data-theme^="dark"] .miniprogram-cake-special-creams-page td,
html[data-theme^="dark"] .miniprogram-cake-special-fillings-page th,
html[data-theme^="dark"] .miniprogram-cake-special-fillings-page td {
    border-bottom-color: rgba(255,255,255,0.10);
}
.miniprogram-cake-base-fruits-page th,
.miniprogram-cake-special-creams-page th,
.miniprogram-cake-special-fillings-page th {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10);
    color: var(--primary-color);
    font-weight: 900;
}
.miniprogram-cake-base-fruits-page .image-preview,
.miniprogram-cake-special-creams-page .image-preview,
.miniprogram-cake-special-fillings-page .image-preview {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,0.04);
    margin-top: 10px;
}
html[data-theme^="dark"] .miniprogram-cake-base-fruits-page .image-preview,
html[data-theme^="dark"] .miniprogram-cake-special-creams-page .image-preview,
html[data-theme^="dark"] .miniprogram-cake-special-fillings-page .image-preview {
    background: rgba(255,255,255,0.06);
}
.miniprogram-cake-base-fruits-page .modal-content,
.miniprogram-cake-special-creams-page .modal-content,
.miniprogram-cake-special-fillings-page .modal-content { max-width: 600px; }

/* ========== 小程序后台：寻鲜寻优产品（从内联样式迁移） ========== */
.miniprogram-fresh-premium-products-page .products-list { margin-top: 16px; }
.miniprogram-fresh-premium-products-page .product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    cursor: move;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.miniprogram-fresh-premium-products-page .product-row:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.miniprogram-fresh-premium-products-page .product-row.sortable-ghost {
    opacity: 0.5;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10);
}
.miniprogram-fresh-premium-products-page .product-row.sortable-drag { opacity: 0.9; }
.miniprogram-fresh-premium-products-page .drag-handle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 18px;
    margin-right: 6px;
    cursor: grab;
    user-select: none;
}
.miniprogram-fresh-premium-products-page .drag-handle:active { cursor: grabbing; }
.miniprogram-fresh-premium-products-page .product-image-small {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,0.04);
    flex-shrink: 0;
}
html[data-theme^="dark"] .miniprogram-fresh-premium-products-page .product-image-small { background: rgba(255,255,255,0.06); }
.miniprogram-fresh-premium-products-page .product-image-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 22px;
    flex-shrink: 0;
}
html[data-theme^="dark"] .miniprogram-fresh-premium-products-page .product-image-placeholder { background: rgba(255,255,255,0.06); }
.miniprogram-fresh-premium-products-page .product-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.miniprogram-fresh-premium-products-page .product-name { font-weight: 900; color: var(--text-primary); font-size: 15px; }
.miniprogram-fresh-premium-products-page .product-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.miniprogram-fresh-premium-products-page .product-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.miniprogram-fresh-premium-products-page .status-toggle {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    transition: all 0.15s ease;
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
}
.miniprogram-fresh-premium-products-page .status-toggle.online { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.25); color: var(--success-text); }
.miniprogram-fresh-premium-products-page .status-toggle.offline { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: var(--error-text); }

.miniprogram-fresh-premium-products-page .action-btn {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: all 0.15s ease;
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
}
.miniprogram-fresh-premium-products-page .action-btn-edit { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.25); color: var(--warning-color); }
.miniprogram-fresh-premium-products-page .action-btn-preview { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.25); color: var(--info-color); }
.miniprogram-fresh-premium-products-page .action-btn-delete { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.25); color: var(--error-text); }

/* 图片上传/排序 */
.miniprogram-fresh-premium-products-page .image-upload-area {
    border: 2px dashed rgba(var(--primary-color-rgb, 99, 102, 241), 0.35);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    background: rgba(0,0,0,0.02);
    cursor: pointer;
    transition: all 0.15s ease;
}
html[data-theme^="dark"] .miniprogram-fresh-premium-products-page .image-upload-area { background: rgba(255,255,255,0.04); }
.miniprogram-fresh-premium-products-page .image-upload-area:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06);
}
.miniprogram-fresh-premium-products-page .image-upload-area.dragover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
}
.miniprogram-fresh-premium-products-page .image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.miniprogram-fresh-premium-products-page .image-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
    background: rgba(0,0,0,0.04);
    cursor: move;
}
html[data-theme^="dark"] .miniprogram-fresh-premium-products-page .image-preview-item { background: rgba(255,255,255,0.06); }
.miniprogram-fresh-premium-products-page .image-preview-item.main {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.18);
}
.miniprogram-fresh-premium-products-page .image-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.miniprogram-fresh-premium-products-page .image-preview-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 6px;
}
.miniprogram-fresh-premium-products-page .image-preview-actions button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,0.70);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.miniprogram-fresh-premium-products-page .image-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: #fff;
    font-size: 10px;
    padding: 8px;
    text-align: center;
}

/* 裁剪 & 预览（页面专用） */
.miniprogram-fresh-premium-products-page .crop-modal,
.miniprogram-fresh-premium-products-page .preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    z-index: 10003;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
}
.miniprogram-fresh-premium-products-page .crop-modal.show,
.miniprogram-fresh-premium-products-page .preview-modal.show { display: flex; }
.miniprogram-fresh-premium-products-page .crop-modal-content {
    background: rgba(30,30,30,0.98);
    border-radius: 20px;
    padding: 30px;
    max-width: 90%;
    max-height: 90vh;
    overflow: auto;
}
.miniprogram-fresh-premium-products-page .crop-container { max-width: 800px; max-height: 600px; margin: 20px auto; }
.miniprogram-fresh-premium-products-page .crop-container img { max-width: 100%; max-height: 100%; }
.miniprogram-fresh-premium-products-page .preview-content {
    background: linear-gradient(180deg, #f0f9f4 0%, #e8f5ea 30%, #ffffff 70%);
    border-radius: 20px;
    padding: 40px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.miniprogram-fresh-premium-products-page .preview-product-item { background: #ffffff; border-radius: 32px; overflow: hidden; box-shadow: 0 8px 32px rgba(76, 175, 80, 0.12); margin-bottom: 30px; }
.miniprogram-fresh-premium-products-page .preview-product-image { width: 100%; height: 300px; object-fit: cover; background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 100%); }
.miniprogram-fresh-premium-products-page .preview-product-info { padding: 30px; }
.miniprogram-fresh-premium-products-page .preview-product-name { font-size: 20px; font-weight: 800; color: #1b5e20; margin-bottom: 15px; }
.miniprogram-fresh-premium-products-page .preview-section { margin-bottom: 15px; }
.miniprogram-fresh-premium-products-page .preview-section-title { font-size: 14px; color: #1b5e20; font-weight: 700; margin-bottom: 8px; }
.miniprogram-fresh-premium-products-page .preview-tag { display: inline-block; padding: 4px 12px; background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.3); border-radius: 12px; font-size: 12px; color: #2e7d32; margin-right: 8px; margin-bottom: 8px; }

.miniprogram-fresh-premium-products-page .specs-manager,
.miniprogram-fresh-premium-products-page .json-editor-visual {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
}
.miniprogram-fresh-premium-products-page .spec-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.miniprogram-fresh-premium-products-page .spec-item input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
}
.miniprogram-fresh-premium-products-page .spec-item input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.miniprogram-fresh-premium-products-page .spec-item .remove-btn {
    padding: 8px 14px;
    background: rgba(239,68,68,0.14);
    color: var(--error-text);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 10px;
    cursor: pointer;
}

.miniprogram-fresh-premium-products-page .json-item { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.miniprogram-fresh-premium-products-page .json-item input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
}
.miniprogram-fresh-premium-products-page .json-item input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.miniprogram-fresh-premium-products-page .json-item .remove-btn {
    padding: 8px 12px;
    background: rgba(239,68,68,0.14);
    color: var(--error-text);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 10px;
    cursor: pointer;
}

/* ========== 小程序后台：可售蛋糕管理（cake_album，从内联样式迁移） ========== */
.miniprogram-cake-album-page .tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
}
.miniprogram-cake-album-page .tab {
    padding: 12px 24px;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
    font-weight: 800;
}
.miniprogram-cake-album-page .tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.miniprogram-cake-album-page .tab-content { display: none; }
.miniprogram-cake-album-page .tab-content.active { display: block; }

.miniprogram-cake-album-page .category-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.miniprogram-cake-album-page .category-tab {
    padding: 8px 16px;
    border: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.30);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}
.miniprogram-cake-album-page .category-tab:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06);
}
.miniprogram-cake-album-page .category-tab.active {
    background: var(--accent-gradient);
    color: #fff;
    border-color: transparent;
}
.miniprogram-cake-album-page .category-tab.dragging { opacity: 0.5; }
.miniprogram-cake-album-page .category-tab.drag-over {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.80);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.14);
}
.miniprogram-cake-album-page .category-tab .drag-handle { cursor: move; opacity: 0.5; font-size: 14px; margin-right: 4px; user-select: none; }
.miniprogram-cake-album-page .category-tab:hover .drag-handle { opacity: 1; }

.miniprogram-cake-album-page .file-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.miniprogram-cake-album-page .files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    position: relative;
    min-height: 200px;
}
.miniprogram-cake-album-page .file-item {
    background: var(--bg-card);
    border: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    border-radius: 10px;
    padding: 8px;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.miniprogram-cake-album-page .file-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.miniprogram-cake-album-page .file-item.selected {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.18);
}
.miniprogram-cake-album-page .file-item-checkbox { position: absolute; top: 6px; left: 6px; z-index: 10; }
.miniprogram-cake-album-page .file-item img,
.miniprogram-cake-album-page .file-item video {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    background: rgba(0,0,0,0.04);
}
html[data-theme^="dark"] .miniprogram-cake-album-page .file-item img,
html[data-theme^="dark"] .miniprogram-cake-album-page .file-item video { background: rgba(255,255,255,0.06); }
.miniprogram-cake-album-page .file-item-name {
    font-size: 12px;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.miniprogram-cake-album-page .loading-spinner {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}
.miniprogram-cake-album-page .loading-spinner::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

.miniprogram-cake-album-page .album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.miniprogram-cake-album-page .album-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    cursor: grab;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    position: relative;
}
.miniprogram-cake-album-page .album-item:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.miniprogram-cake-album-page .album-item:active { cursor: grabbing; }
.miniprogram-cake-album-page .album-item.dragging { opacity: 0.5; border-color: var(--primary-color); transform: scale(0.98); z-index: 1000; }
.miniprogram-cake-album-page .album-item.drag-over { border: 2px solid var(--primary-color); background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10); transform: scale(1.01); }
.miniprogram-cake-album-page .album-item .drag-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 16px;
    color: #fff;
    cursor: grab;
    z-index: 11;
    padding: 5px;
    background: rgba(0,0,0,0.35);
    border-radius: 6px;
    user-select: none;
}
.miniprogram-cake-album-page .album-item-image { width: 100%; height: 150px; border-radius: 10px; object-fit: cover; margin-bottom: 10px; background: rgba(0,0,0,0.04); }
html[data-theme^="dark"] .miniprogram-cake-album-page .album-item-image { background: rgba(255,255,255,0.06); }

.miniprogram-cake-album-page .checkbox-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.30);
    border-radius: 10px;
    padding: 10px;
    background: var(--bg-card);
}
.miniprogram-cake-album-page .checkbox-item { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; border-radius: 8px; }
.miniprogram-cake-album-page .checkbox-item:hover { background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06); }

.miniprogram-cake-album-page .config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.miniprogram-cake-album-page .config-card {
    background: var(--bg-card);
    border: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    position: relative;
}
.miniprogram-cake-album-page .config-card:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.miniprogram-cake-album-page .config-card.selected {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.18);
}
.miniprogram-cake-album-page .config-card input[type="checkbox"] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-color);
    z-index: 10;
}
.miniprogram-cake-album-page .config-card-name { font-weight: 900; color: var(--text-primary); font-size: 15px; margin-bottom: 8px; padding-right: 30px; }
.miniprogram-cake-album-page .config-card-description { font-size: 12px; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.miniprogram-cake-album-page .config-card.hidden { display: none; }

.miniprogram-cake-album-page #skipBtn.active,
.miniprogram-cake-album-page #overwriteBtn.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.miniprogram-cake-album-page #skipBtn,
.miniprogram-cake-album-page #overwriteBtn { transition: all 0.15s ease; }

/* 寻鲜寻优产品：模态框/表单标签页 */
.miniprogram-fresh-premium-products-page .modal { overflow-y: auto; padding: 20px; }
.miniprogram-fresh-premium-products-page .modal-content { max-width: 1000px; width: 100%; max-height: 95vh; }
.miniprogram-fresh-premium-products-page .form-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    flex-wrap: wrap;
}
.miniprogram-fresh-premium-products-page .form-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
}
.miniprogram-fresh-premium-products-page .form-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.miniprogram-fresh-premium-products-page .form-tab-content { display: none; }
.miniprogram-fresh-premium-products-page .form-tab-content.active { display: block; }
.miniprogram-fresh-premium-products-page .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.miniprogram-fresh-premium-products-page .btn-cancel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 800;
    transition: all 0.15s ease;
}
.miniprogram-fresh-premium-products-page .btn-cancel:hover {
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    transform: translateY(-1px);
}

/* 可售蛋糕：图片下拉层 */
.miniprogram-cake-album-page .image-dropdown { backdrop-filter: blur(20px); }
.miniprogram-cake-album-page .image-dropdown .checkbox-list { display: flex; flex-direction: column; gap: 8px; }
.miniprogram-cake-album-page .image-dropdown .checkbox-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; transition: background 0.15s ease; }
.miniprogram-cake-album-page .image-dropdown .checkbox-item:hover { background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08); }
.miniprogram-cake-album-page .image-dropdown .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-color); }
.miniprogram-cake-album-page .image-dropdown .checkbox-item label { cursor: pointer; user-select: none; flex: 1; }

/* ========== 主后台：仪表板（dashboard，从内联样式迁移） ========== */
.dashboard-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.dashboard-page .stat-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dashboard-page .stat-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.dashboard-page .stat-icon { font-size: 28px; flex-shrink: 0; }
.dashboard-page .stat-content { flex: 1; }
.dashboard-page .stat-content h4 { font-size: 12px; color: var(--text-secondary); margin: 0 0 4px 0; font-weight: 600; }
.dashboard-page .stat-value { font-size: 22px; font-weight: 900; color: var(--primary-color); margin: 0 0 2px 0; }
.dashboard-page .stat-detail { font-size: 11px; color: var(--text-secondary); display: block; }

.dashboard-page .vipcard-dashboard,
.dashboard-page .order-dashboard,
.dashboard-page .gallery-dashboard { margin-top: 24px; }

.dashboard-page .month-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.dashboard-page .month-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-page .month-card:hover { border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.dashboard-page .month-card.current-month { border-color: var(--primary-color); }
.dashboard-page .month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}
.dashboard-page .month-header h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
.dashboard-page .month-label {
    background: var(--primary-color);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.dashboard-page .month-card.last-month .month-label { background: var(--text-secondary); }
.dashboard-page .month-stats { display: flex; flex-direction: column; gap: 8px; }
.dashboard-page .month-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 10px;
    gap: 10px;
}
.dashboard-page .month-stat-item .stat-label { font-size: 12px; color: var(--text-secondary); }
.dashboard-page .month-stat-item .stat-value { font-size: 16px; font-weight: 900; color: var(--primary-color); }
.dashboard-page .month-stat-item .stat-detail { font-size: 12px; color: var(--text-secondary); margin-left: 8px; }

.dashboard-page .growth { font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 8px; }
.dashboard-page .growth.positive { color: var(--success-text); background: rgba(16, 185, 129, 0.12); }
.dashboard-page .growth.negative { color: var(--error-text); background: rgba(239, 68, 68, 0.12); }

.dashboard-page .order-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.dashboard-page .order-stat-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-page .order-stat-card:hover { border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.dashboard-page .order-stat-header { padding: 10px 14px; border-bottom: 2px solid var(--border-color); background: var(--bg-secondary); }
.dashboard-page .order-stat-header h4 { margin: 0; font-size: 14px; color: var(--text-primary); }
.dashboard-page .order-stat-content { padding: 12px; }
.dashboard-page .distribution-table { width: 100%; border-collapse: collapse; }
.dashboard-page .distribution-table th { text-align: left; padding: 6px 8px; font-size: 11px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.dashboard-page .distribution-table td { padding: 6px 8px; font-size: 12px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.dashboard-page .distribution-table tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
    .dashboard-page .month-comparison { grid-template-columns: 1fr; }
    .dashboard-page .order-stats-grid { grid-template-columns: 1fr; }
}

/* ========== 主后台：订单数据看板（orders_dashboard，从内联样式迁移） ========== */
.orders-dashboard-page .order-dashboard { margin-top: 40px; }
.orders-dashboard-page .month-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.orders-dashboard-page .month-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.orders-dashboard-page .month-card:hover { border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.orders-dashboard-page .month-card.current-month { border-color: var(--primary-color); }
.orders-dashboard-page .month-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--border-color); }
.orders-dashboard-page .month-header h3 { margin: 0; font-size: 20px; color: var(--text-primary); }
.orders-dashboard-page .month-label { background: var(--primary-color); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.orders-dashboard-page .month-card.last-month .month-label { background: var(--text-secondary); }
.orders-dashboard-page .month-stats { display: flex; flex-direction: column; gap: 16px; }
.orders-dashboard-page .month-stat-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--bg-secondary); border-radius: 10px; gap: 10px; }
.orders-dashboard-page .stat-label { font-size: 14px; color: var(--text-secondary); }
.orders-dashboard-page .stat-value { font-size: 18px; font-weight: 900; color: var(--primary-color); }
.orders-dashboard-page .stat-detail { font-size: 12px; color: var(--text-secondary); margin-left: 8px; }
.orders-dashboard-page .growth { font-size: 12px; font-weight: 900; padding: 2px 8px; border-radius: 8px; }
.orders-dashboard-page .growth.positive { color: var(--success-text); background: rgba(16, 185, 129, 0.12); }
.orders-dashboard-page .growth.negative { color: var(--error-text); background: rgba(239, 68, 68, 0.12); }

.orders-dashboard-page .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }
.orders-dashboard-page .stat-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.orders-dashboard-page .stat-card:hover { border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.orders-dashboard-page .stat-header { padding: 16px 20px; border-bottom: 2px solid var(--border-color); background: var(--bg-secondary); }
.orders-dashboard-page .stat-header h4 { margin: 0; font-size: 16px; color: var(--text-primary); }
.orders-dashboard-page .stat-content { padding: 20px; }
.orders-dashboard-page .distribution-table { width: 100%; border-collapse: collapse; }
.orders-dashboard-page .distribution-table th { text-align: left; padding: 8px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.orders-dashboard-page .distribution-table td { padding: 8px; font-size: 14px; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.orders-dashboard-page .distribution-table tr:last-child td { border-bottom: none; }

.orders-dashboard-page .chart-section { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.orders-dashboard-page .chart-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.orders-dashboard-page .chart-card:hover { border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.orders-dashboard-page .chart-content { padding: 20px; }
.orders-dashboard-page .hour-chart { display: flex; flex-direction: column; gap: 8px; }
.orders-dashboard-page .hour-bar-item { display: flex; align-items: center; gap: 12px; }
.orders-dashboard-page .hour-label { width: 50px; font-size: 12px; color: var(--text-secondary); text-align: right; }
.orders-dashboard-page .hour-bar-container { flex: 1; height: 24px; background: var(--bg-secondary); border-radius: 8px; position: relative; overflow: hidden; }
.orders-dashboard-page .hour-bar { height: 100%; background: var(--accent-gradient); border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; transition: width 0.3s ease; }
.orders-dashboard-page .hour-count { font-size: 11px; color: #fff; font-weight: 900; }

.orders-dashboard-page .day-chart { display: flex; align-items: flex-end; gap: 4px; height: 300px; padding: 20px 0; }
.orders-dashboard-page .day-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.orders-dashboard-page .day-label { font-size: 11px; color: var(--text-secondary); }
.orders-dashboard-page .day-bar-container { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.orders-dashboard-page .day-bar { width: 100%; background: var(--accent-gradient); border-radius: 8px 8px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px; min-height: 20px; transition: height 0.3s ease; }
.orders-dashboard-page .day-count { font-size: 10px; color: #fff; font-weight: 900; margin-bottom: 2px; }
.orders-dashboard-page .day-amount { font-size: 9px; color: rgba(255,255,255,0.85); }

@media (max-width: 768px) {
    .orders-dashboard-page .month-comparison { grid-template-columns: 1fr; }
    .orders-dashboard-page .stats-grid { grid-template-columns: 1fr; }
    .orders-dashboard-page .day-chart { height: 200px; }
}

/* ========== 主后台：支付记录（payment_records，从内联样式迁移） ========== */
.payment-records-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.payment-records-page .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.payment-records-page .stat-card:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45); }
.payment-records-page .stat-label { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.payment-records-page .stat-value { font-size: 20px; font-weight: 900; color: var(--text-primary); }
.payment-records-page .search-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.payment-records-page .badge { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; color: white; }

/* ========== 主后台：支付配置（payment_config，从内联样式迁移） ========== */
.payment-config-page .config-container { max-width: 900px; margin: 0 auto; }
.payment-config-page .config-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.payment-config-page .config-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
}
.payment-config-page .form-group small { display: block; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.payment-config-page .form-actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.payment-config-page .alert { padding: 16px; border-radius: 10px; border-left: 4px solid; }
.payment-config-page .alert-info { background: rgba(59, 130, 246, 0.12); border-color: #3b82f6; color: #3b82f6; }
.payment-config-page code { background: var(--bg-secondary); padding: 2px 6px; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; }

/* ========== 主后台：支付记录详情（payment_record_detail，从内联样式迁移） ========== */
.payment-record-detail-page .detail-container { max-width: 900px; margin: 0 auto; }
.payment-record-detail-page .detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.payment-record-detail-page .detail-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
}
.payment-record-detail-page .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.payment-record-detail-page .detail-item { display: flex; flex-direction: column; }
.payment-record-detail-page .detail-item label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; }
.payment-record-detail-page .detail-value { font-size: 15px; color: var(--text-primary); word-break: break-all; }
.payment-record-detail-page .form-select { width: 200px; margin-bottom: 12px; }
.payment-record-detail-page .badge { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; color: white; }

/* ========== 登录页（login，从内联样式迁移） ========== */
.login-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#login3dCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.login-card {
    position: relative;
    z-index: 10;
    min-width: 360px;
    max-width: 90%;
    width: auto;
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 24px;
    padding: 48px 56px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(99, 102, 241, 0.1);
    animation: cardFloat 6s ease-in-out infinite;
    overflow: hidden;
}
@keyframes cardFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.01); }
}
.login-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        rgba(99, 102, 241, 0.8),
        rgba(139, 92, 246, 0.8),
        rgba(99, 102, 241, 0.8),
        rgba(59, 130, 246, 0.8),
        rgba(99, 102, 241, 0.8));
    background-size: 400% 400%;
    border-radius: 24px;
    z-index: -1;
    animation: borderGlow 3s ease infinite;
    opacity: 0.6;
}
@keyframes borderGlow {
    0%, 100% { background-position: 0% 50%; opacity: 0.6; }
    50% { background-position: 100% 50%; opacity: 1; }
}
.login-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    animation: scanLine 3s linear infinite;
    pointer-events: none;
}
@keyframes scanLine {
    0% { left: -100%; }
    100% { left: 100%; }
}
.login-card .glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.15) 0%,
        rgba(139, 92, 246, 0.1) 30%,
        transparent 70%);
    transform: translate(-50%, -50%);
    animation: glowPulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}
.login-card .form-group input {
    background: rgba(15, 23, 42, 0.6);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    color: #f1f5f9;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(10px);
}
.login-card .form-group input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.8);
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.2),
        0 0 20px rgba(99, 102, 241, 0.4),
        inset 0 0 10px rgba(99, 102, 241, 0.1);
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-2px);
}
.login-card .form-group input::placeholder { color: rgba(148, 163, 184, 0.5); }
.login-card .btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.login-card .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}
.login-card .btn-primary:hover::before { left: 100%; }
.login-card .btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6), 0 0 30px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.login-card .btn-primary:active { transform: translateY(0) scale(0.98); }
.login-card .form-group label {
    color: #cbd5e1;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.login-card .login-header h1 { position: relative; display: inline-block; animation: titleGlow 3s ease-in-out infinite; }
@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(99, 102, 241, 0.5), 0 0 20px rgba(99, 102, 241, 0.3), 0 0 30px rgba(139, 92, 246, 0.2); }
    50% { text-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(99, 102, 241, 0.5), 0 0 40px rgba(139, 92, 246, 0.3); }
}
.login-card .login-header,
.login-card .login-form { position: relative; z-index: 1; }

/* ========== 相册分享页（gallery_share，从内联样式迁移） ========== */
.share-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
}
.share-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: calc(100vh - 350px);
    background: var(--bg-secondary);
    position: relative;
}
.share-media img,
.share-media video {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.share-media video { background: #000; }
.share-info {
    background: var(--bg-card);
    border-top: 2px solid var(--border-color);
    padding: 24px;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.share-info h1 {
    margin: 0 0 24px 0;
    color: var(--text-primary);
    font-size: 24px;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}
.info-section { margin-bottom: 24px; }
.info-section:last-child { margin-bottom: 0; }
.share-info h2 {
    margin: 0 0 16px 0;
    color: var(--text-primary);
    font-size: 18px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}
.share-info p { margin: 12px 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.share-info p strong { color: var(--text-primary); font-weight: 700; margin-right: 8px; }
.share-content .stat-value { color: var(--primary-color); font-weight: 800; font-size: 15px; }
@media (max-width: 768px) {
    .share-media { padding: 10px; min-height: calc(100vh - 400px); }
    .share-media img,
    .share-media video { max-height: calc(100vh - 200px); }
    .share-info { padding: 16px; }
    .share-info h2 { font-size: 16px; }
    .share-info p { font-size: 13px; }
}

/* ========== 分享过期页（gallery_share_expired，从内联样式迁移） ========== */
.expired-content {
    max-width: 500px;
    margin: 100px auto;
    text-align: center;
    padding: 40px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
}
.expired-icon { font-size: 64px; margin-bottom: 16px; }
.expired-content h1 { color: var(--text-primary); margin-bottom: 16px; }
.expired-content p { color: var(--text-secondary); margin-bottom: 24px; }

/* ========== 主后台：订单表单页（order_form，从内联样式迁移/简化） ========== */
.order-form-wrapper {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background: var(--bg-secondary);
}
.order-form-container { width: 100%; max-width: 1200px; margin: 0 auto; }
.order-form-wrapper .form-container { width: 100%; }
.order-form-wrapper .form-card {
    width: 100%;
    margin-top: 16px;
    padding: 24px;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.order-form-wrapper .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.order-form-wrapper .form-row .form-group { flex: 1; min-width: 240px; }
.order-form-wrapper .form-section { margin-top: 20px; }
.order-form-wrapper .form-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* 智能录单区域 */
.order-form-wrapper .smart-input-section {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.18);
    border-radius: 14px;
    padding: 16px;
}
.order-form-wrapper .smart-input-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 0;
    color: var(--text-primary);
}

/* 添加/编辑状态轻量提示（不强行固定绿色） */
.order-form-add .page-header h1 { color: var(--success-text); }
.order-form-edit .page-header h1 { color: var(--text-primary); }

/* 订单添加成功确认浮层 */
.order-confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
}
.order-confirm-modal.show { display: flex; }
.order-confirm-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
.order-confirm-modal .modal-content { max-width: 900px; width: 92%; }

/* ========== 主后台：媒体管理（gallery_admin / gallery_admin_v2，从内联样式迁移/收口） ========== */
/* 补齐 btn 扩展色系（仅少数页面使用） */
.btn-info { background: var(--info-color); color: #fff; }
.btn-warning { background: var(--warning-color); color: #fff; }
.btn-danger { background: var(--error-color); color: #fff; }
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover { filter: brightness(0.95); transform: translateY(-1px); }

.gallery-admin-page .admin-section {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.gallery-admin-page .admin-section h2 { margin: 0 0 16px 0; color: var(--text-primary); font-size: 18px; }

.gallery-admin-page .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.gallery-admin-page .stat-card { background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; }
.gallery-admin-page .stat-icon { font-size: 32px; }
.gallery-admin-page .stat-content h4 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-secondary); }
.gallery-admin-page .stat-value { font-size: 24px; font-weight: 900; color: var(--primary-color); }

.gallery-admin-page .config-panel { display: flex; flex-direction: column; gap: 16px; }
.gallery-admin-page .config-panel h3 { margin: 0 0 12px 0; font-size: 16px; color: var(--text-primary); font-weight: 800; }
.gallery-admin-page .config-group { display: flex; flex-direction: column; gap: 8px; }
.gallery-admin-page .config-group label { font-size: 14px; color: var(--text-secondary); }
.gallery-admin-page .config-group input[type="number"],
.gallery-admin-page .config-group input[type="text"] {
    padding: 10px 12px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.15s ease;
}
.gallery-admin-page .config-group input[type="number"]:focus,
.gallery-admin-page .config-group input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
}

.gallery-admin-page .gallery-theme-palette { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gallery-admin-page .gallery-theme-color-block {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    border: 3px solid transparent;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.gallery-admin-page .gallery-theme-color-block::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 24px;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}
.gallery-admin-page .gallery-theme-color-block:hover { transform: translateY(-2px) scale(1.06); }
.gallery-admin-page .gallery-theme-color-block.active { transform: scale(1.10); border-color: rgba(255, 255, 255, 0.9); }
.gallery-admin-page .gallery-theme-color-block.active::after { transform: translate(-50%, -50%) scale(1); }

.gallery-admin-page .upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bg-secondary);
    margin-bottom: 16px;
}
.gallery-admin-page .upload-area:hover,
.gallery-admin-page .upload-area.dragover { border-color: var(--primary-color); background: var(--bg-card); }
.gallery-admin-page .upload-content { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gallery-admin-page .upload-icon { font-size: 48px; }
.gallery-admin-page .upload-text { font-size: 16px; color: var(--text-primary); font-weight: 800; }
.gallery-admin-page .upload-hint { font-size: 12px; color: var(--text-secondary); }
.gallery-admin-page .upload-controls { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }

.gallery-admin-page .upload-queue {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 4px;
}
.gallery-admin-page .queue-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
.gallery-admin-page .queue-item:hover { border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.10); }
.gallery-admin-page .queue-item img,
.gallery-admin-page .queue-item video { width: 100%; height: 90px; object-fit: cover; border-radius: 10px; display: block; background: rgba(0,0,0,0.04); }
html[data-theme^="dark"] .gallery-admin-page .queue-item img,
html[data-theme^="dark"] .gallery-admin-page .queue-item video { background: rgba(255,255,255,0.06); }
.gallery-admin-page .queue-item-info { width: 100%; padding: 8px 2px 0; }
.gallery-admin-page .queue-item-name { font-size: 12px; color: var(--text-primary); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-admin-page .queue-item-status { display: inline-block; padding: 4px 8px; border-radius: 10px; font-size: 11px; width: 100%; text-align: center; font-weight: 800; color: #fff; }
.gallery-admin-page .queue-item-status.pending { background: var(--info-color); }
.gallery-admin-page .queue-item-status.uploading { background: var(--warning-color); }
.gallery-admin-page .queue-item-status.success { background: var(--success-color); }
.gallery-admin-page .queue-item-status.error { background: var(--error-color); }
.gallery-admin-page .queue-item-status.skipped { background: #94a3b8; }
.gallery-admin-page .queue-item-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}
.gallery-admin-page .queue-item:hover .queue-item-delete { opacity: 1; }
.gallery-admin-page .queue-item-delete:hover { transform: scale(1.08); }

.gallery-admin-page .upload-progress { margin-top: 16px; }
.gallery-admin-page .progress-bar { width: 100%; height: 24px; background: var(--bg-secondary); border-radius: 999px; overflow: hidden; border: 2px solid var(--border-color); }
.gallery-admin-page .progress-fill { height: 100%; background: var(--primary-color); transition: width 0.3s ease; width: 0%; }
.gallery-admin-page .progress-text { text-align: center; margin-top: 8px; color: var(--text-secondary); font-size: 14px; }

.gallery-admin-page .category-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.gallery-admin-page .category-tab {
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    font-weight: 800;
}
.gallery-admin-page .category-tab:hover { border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55); background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06); }
.gallery-admin-page .category-tab.active { background: var(--accent-gradient); color: #fff; border-color: transparent; }
.gallery-admin-page .category-tab .drag-handle { cursor: move; opacity: 0.6; font-size: 14px; user-select: none; }
.gallery-admin-page .category-tab:hover .drag-handle { opacity: 1; }
.gallery-admin-page .file-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.gallery-admin-page .files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    position: relative;
    min-height: 200px;
}
.gallery-admin-page .file-item {
    background: var(--bg-card);
    border: 2px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    border-radius: 12px;
    padding: 8px;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gallery-admin-page .file-item:hover { border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.55); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.gallery-admin-page .file-item.selected { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08); box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.18); }
.gallery-admin-page .file-item-checkbox { position: absolute; top: 6px; left: 6px; z-index: 10; }
.gallery-admin-page .file-item img,
.gallery-admin-page .file-item video { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: rgba(0,0,0,0.04); }
html[data-theme^="dark"] .gallery-admin-page .file-item img,
html[data-theme^="dark"] .gallery-admin-page .file-item video { background: rgba(255,255,255,0.06); }
.gallery-admin-page .file-item-name { font-size: 12px; color: var(--text-primary); margin-bottom: 6px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.gallery-admin-page .file-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-admin-page .file-item-actions .btn { padding: 6px 10px; font-size: 12px; border-radius: 10px; }

.gallery-admin-page .tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
}
.gallery-admin-page .tag-badge .tag-remove { cursor: pointer; opacity: 0.8; }
.gallery-admin-page .tag-badge .tag-remove:hover { opacity: 1; }

.gallery-admin-page .share-result { display: flex; flex-direction: column; gap: 10px; }
.gallery-admin-page .share-result input { width: 100%; }

/* ========== 主后台：访问统计（gallery_stats，从内联样式迁移/收口） ========== */
.gallery-stats-page .stats-section,
.gallery-stats-page .chart-section,
.gallery-stats-page .table-section,
.gallery-stats-page .hot-media-section {
    position: relative;
    margin-bottom: 24px;
}
.gallery-stats-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, var(--primary-color) 20%, var(--purple-color) 80%, transparent 100%) 1;
}
.gallery-stats-page .section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), var(--purple-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gallery-stats-page .title-icon { font-size: 24px; filter: drop-shadow(0 0 8px rgba(var(--primary-color-rgb, 99, 102, 241), 0.5)); }
.gallery-stats-page .section-subtitle { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

.gallery-stats-page .stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 16px;
}
.gallery-stats-page .stat-card-modern {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.22);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.gallery-stats-page .stat-card-modern:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    box-shadow: 0 18px 50px rgba(var(--primary-color-rgb, 99, 102, 241), 0.22);
}
.gallery-stats-page .stat-card-bg {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--primary-color-rgb, 99, 102, 241), 0.12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.gallery-stats-page .stat-card-modern:hover .stat-card-bg { opacity: 1; }
.gallery-stats-page .stat-card-content { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 16px; }
.gallery-stats-page .stat-icon-modern {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 99, 102, 241), 0.18), rgba(168, 85, 247, 0.18));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color);
}
.gallery-stats-page .stat-icon-modern svg { width: 28px; height: 28px; stroke: currentColor; }
.gallery-stats-page .stat-info { flex: 1; min-width: 0; }
.gallery-stats-page .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gallery-stats-page .stat-value-modern {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), var(--purple-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.gallery-stats-page .stat-trend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

.gallery-stats-page .chart-container-modern,
.gallery-stats-page .table-container-modern {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
}
.gallery-stats-page .chart-wrapper { position: relative; width: 100%; min-height: 320px; }

.gallery-stats-page .data-table-modern { width: 100%; border-collapse: collapse; }
.gallery-stats-page .data-table-modern th,
.gallery-stats-page .data-table-modern td { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: left; }
html[data-theme^="dark"] .gallery-stats-page .data-table-modern th,
html[data-theme^="dark"] .gallery-stats-page .data-table-modern td { border-bottom-color: rgba(255,255,255,0.10); }
.gallery-stats-page .data-table-modern th { font-weight: 900; color: var(--text-primary); background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.08); }
.gallery-stats-page .data-table-modern tr:hover td { background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.06); }
.gallery-stats-page .loading-state { text-align: center; color: var(--text-secondary); padding: 18px; }
.gallery-stats-page .loading-state-full { text-align: center; color: var(--text-secondary); padding: 40px; }
.gallery-stats-page .loading-spinner-small {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.20);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: -3px;
}

.gallery-stats-page .hot-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.gallery-stats-page .hot-media-card {
    background: var(--bg-card);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.22);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.gallery-stats-page .hot-media-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-color-rgb, 99, 102, 241), 0.45);
    box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}
.gallery-stats-page .hot-media-thumbnail { position: relative; height: 160px; background: rgba(0,0,0,0.04); overflow: hidden; }
html[data-theme^="dark"] .gallery-stats-page .hot-media-thumbnail { background: rgba(255,255,255,0.06); }
.gallery-stats-page .hot-media-thumbnail img,
.gallery-stats-page .hot-media-thumbnail video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-stats-page .hot-media-rank { position: absolute; top: 10px; left: 10px; z-index: 2; font-weight: 900; color: #fff; }
.gallery-stats-page .hot-media-video-icon { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.gallery-stats-page .hot-media-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; z-index: 1; }
.gallery-stats-page .hot-media-type { font-size: 12px; font-weight: 900; }
.gallery-stats-page .hot-media-info { padding: 14px; }
.gallery-stats-page .hot-media-title { font-weight: 900; color: var(--text-primary); margin-bottom: 8px; }
.gallery-stats-page .hot-media-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--text-secondary); font-size: 12px; margin-bottom: 10px; }
.gallery-stats-page .hot-media-category { padding: 2px 8px; border-radius: 999px; background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.10); color: var(--primary-color); font-weight: 900; }
.gallery-stats-page .hot-media-stats { display: flex; justify-content: space-between; gap: 10px; color: var(--text-secondary); font-size: 12px; }
.gallery-stats-page .hot-media-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ========== 前台：相册展示（showcase，从内联样式迁移/简化） ========== */
.showcase-container {
    min-height: 100vh;
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    padding: 0;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}
.showcase-container[data-theme="purple-blue"],
.showcase-container:not([data-theme]) { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); }
.showcase-container[data-theme="ocean"] { background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%); }
.showcase-container[data-theme="sunset"] { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%); }
.showcase-container[data-theme="forest"] { background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); }
.showcase-container[data-theme="dark-space"] { background: linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 60%, #475569 100%); }
.showcase-container[data-theme="neon"] { background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%); }
.showcase-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.10) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.showcase-header { display: none; }
.showcase-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.category-nav-wrapper {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.showcase-container[data-theme="dark-space"] .category-nav-wrapper {
    background: rgba(15, 23, 42, 0.65);
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
.category-nav-wrapper::-webkit-scrollbar { display: none; }
.category-nav { display: flex; gap: 10px; padding: 0 12px; min-width: max-content; }
.category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    color: rgba(15, 23, 42, 0.9);
    font-weight: 800;
    font-size: 13px;
    user-select: none;
}
.showcase-container[data-theme="dark-space"] .category-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.90);
}
.category-item:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.category-item.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.10);
    animation: categoryBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.showcase-container[data-theme="dark-space"] .category-item.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
}
.category-count { font-size: 12px; opacity: 0.8; }

/* 左侧分类导航布局（/g/sidebar）- 手机向、超级紧凑 */
.showcase-sidebar-layout .showcase-nav {
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 72px;
    display: flex;
    flex-direction: column;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.showcase-sidebar-layout .category-nav-wrapper {
    flex: 1;
    overflow-x: visible;
    overflow-y: auto;
    padding: 6px 4px;
    border-bottom: none;
    border-right: none;
    -webkit-overflow-scrolling: touch;
}
.showcase-sidebar-layout .category-nav {
    flex-direction: column;
    gap: 4px;
    min-width: auto;
    padding: 0;
}
.showcase-sidebar-layout .category-item {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 6px 4px;
    gap: 2px;
    font-size: 11px;
    border-radius: 0;
    min-height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    transition: none;
}
.showcase-sidebar-layout .category-item:hover,
.showcase-sidebar-layout .category-item:active {
    transform: none;
    box-shadow: none;
    background: transparent;
}
.showcase-sidebar-layout .category-item.active {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    border-left: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: none;
    animation: categoryBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-left: 2px;
}
.showcase-container[data-theme="dark-space"] .showcase-sidebar-layout .category-item.active {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: rgba(255, 255, 255, 0.85);
}
.showcase-sidebar-layout .category-item .category-icon {
    display: none;
}
.showcase-sidebar-layout .category-item .category-name {
    font-size: 11px;
    white-space: normal;
    word-break: break-all;
    line-height: 1.35;
    display: inline;
}
.showcase-sidebar-layout .category-item .category-count {
    font-size: 11px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    display: inline;
}
.showcase-sidebar-layout .category-item .category-count::before {
    content: "(";
}
.showcase-sidebar-layout .category-item .category-count::after {
    content: ")";
}
.showcase-sidebar-layout .category-item.active .category-count {
    background: transparent;
}
.showcase-sidebar-layout .category-item {
    display: block;
    line-height: 1.4;
}
.showcase-sidebar-layout .showcase-content {
    margin-left: 72px;
    padding: 6px 6px 96px 6px;
}
.showcase-sidebar-layout .showcase-footer {
    left: 72px;
}
.showcase-container[data-theme="dark-space"].showcase-sidebar-layout .showcase-nav {
    border-right-color: rgba(255, 255, 255, 0.10);
}
.showcase-sidebar-layout .user-tips-float {
    left: auto;
    right: 12px;
    bottom: 24px;
    margin-left: 0;
}
.showcase-sidebar-layout .showcase-timing-btn {
    display: none !important;
}

.showcase-content {
    position: relative;
    z-index: 1;
    padding: 56px 12px 96px 12px; /* 顶部留出固定分类导航高度 */
}
.waterfall-absolute { position: relative; width: 100%; min-height: 400px; }
.waterfall-item {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    opacity: 0;
    will-change: opacity, transform;
    animation: galleryItemBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.waterfall-item.loaded { opacity: 1; }
.waterfall-item:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 50px rgba(0,0,0,0.18); }
.waterfall-item img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.2s ease; }
.waterfall-item:hover img { transform: scale(1.03); }
.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(0,0,0,0.35), transparent 60%);
}
.video-play-overlay .play-icon {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.showcase-loading,
.showcase-no-more { text-align: center; padding: 24px 12px; color: rgba(255,255,255,0.9); }
.showcase-no-more { animation: noMoreFadeIn 0.6s ease-out; }
.showcase-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}
.no-more-icon { font-size: 36px; margin-bottom: 8px; animation: noMoreIconBounce 2s ease-in-out infinite; }

.showcase-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 12px 14px;
    text-align: center;
}
.showcase-footer h1 { margin: 0; font-size: 14px; font-weight: 900; color: rgba(15,23,42,0.9); }
.showcase-container[data-theme="dark-space"] .showcase-footer {
    background: rgba(15, 23, 42, 0.70);
    border-top-color: rgba(255,255,255,0.10);
}
.showcase-container[data-theme="dark-space"] .showcase-footer h1 { color: rgba(255,255,255,0.92); }

.user-tips-float {
    position: fixed;
    right: 12px;
    bottom: 76px;
    z-index: 120;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    backdrop-filter: blur(12px);
    max-width: 220px;
    font-size: 12px;
    animation: tipFloatIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.user-tips-float::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 3s infinite;
    pointer-events: none;
}
.user-tips-float .tip-icon {
    animation: iconPulse 2s ease-in-out infinite;
}
.copy-success-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    z-index: 120;
    background: rgba(0,0,0,0.70);
    color: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    backdrop-filter: blur(12px);
}

/* 图片/视频查看器 - 含打开/关闭动画 */
#imageViewer.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
}
#imageViewer.modal-overlay.opening {
    animation: viewerBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#imageViewer.modal-overlay.closing {
    animation: viewerBounceOut 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
@keyframes viewerBounceIn {
    0% { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    100% { opacity: 1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}
@keyframes viewerBounceOut {
    0% { opacity: 1; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
    100% { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
}

#imageViewer img,
#imageViewer video {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.8);
    opacity: 0;
    transform: scale(0.75) translateY(24px);
}
#imageViewer img.opening,
#imageViewer video.opening {
    transition: none;
    animation: imageBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#imageViewer img.closing,
#imageViewer video.closing {
    transition: none;
    animation: imageBounceOut 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
@keyframes imageBounceIn {
    0% { opacity: 0; transform: scale(0.75) translateY(24px); }
    45% { transform: scale(1.06) translateY(-6px); }
    70% { transform: scale(0.97) translateY(3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes imageBounceOut {
    0% { opacity: 1; transform: scale(1) translateY(0); }
    40% { transform: scale(0.92) translateY(8px); }
    100% { opacity: 0; transform: scale(0.72) translateY(36px); }
}

/* 相册页其余动画 keyframes（原在 showcase 内联 style 中，已注释） */
@keyframes categoryBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes tipFloatIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@keyframes galleryItemBounceIn {
    0% { opacity: 0; transform: scale(0.8); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes noMoreFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes noMoreIconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.1); }
}
@keyframes buttonGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.viewer-controls { position: absolute; top: 14px; right: 14px; display: flex; gap: 10px; z-index: 10002; }
.viewer-share-btn,
.viewer-close-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    position: relative;
}
.viewer-share-btn::before,
.viewer-close-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(139,92,246,0.5));
    z-index: -1;
    opacity: 0;
    animation: buttonGlow 2s ease-in-out infinite;
}
.viewer-share-btn:hover::before,
.viewer-close-btn:hover::before { opacity: 1; }
.viewer-nav-wrapper { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 10px; z-index: 10002; pointer-events: none; }
.showcase-viewer-nav {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    color: #fff;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

@media (max-width: 768px) {
    .showcase-content { padding: 52px 10px 24px 10px; }
    .category-item { padding: 8px 12px; }
    .viewer-controls { top: 10px; right: 10px; }
}