/* MeiRong 管理后台样式 */
body { background: #f4f6f9; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }

/* 侧边栏 */
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 260px; background: linear-gradient(180deg, #2c3e50 0%, #1a2530 100%); color: #cbd5e1; overflow-y: auto; z-index: 100; }
.sidebar .brand { display: flex; align-items: center; gap: 8px; padding: 18px 20px; color: #fff; font-size: 16px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .nav { padding: 12px 0; }
.sidebar .nav-section { padding: 14px 20px 6px; font-size: 12px; color: #8ea3b8; letter-spacing: 1px; border-left: 3px solid #4f8ef7; margin-left: 14px; padding-left: 10px; }
.sidebar .nav-item { margin: 3px 10px; }
.sidebar .nav-link { color: #cbd5e1; padding: 11px 14px; border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.sidebar .nav-link i { font-size: 16px; width: 18px; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar .nav-link.active { color: #fff; background: #4f8ef7; }
.sidebar .sub-menu { padding-left: 34px; }
.sidebar .sub-menu .nav-link { font-size: 13px; padding: 6px 12px; }
.sidebar .nav-link .arrow { margin-left: auto; transition: transform .2s; }
.sidebar .collapsed .arrow { transform: rotate(-90deg); }

/* 主内容 */
.main { margin-left: 260px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid #e5e9f0; padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; }
.topbar .page-title { font-size: 17px; font-weight: 600; color: #2c3e50; }
.content { padding: 22px 24px; flex: 1; }

/* 卡片与表格 */
.card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.08); margin-bottom: 18px; }
.card-header { background: #fff; border-bottom: 1px solid #eef1f6; font-weight: 600; color: #2c3e50; border-radius: 12px 12px 0 0 !important; }
.table thead th { background: #f8fafc; color: #64748b; font-weight: 600; font-size: 13px; border-bottom: 1px solid #e5e9f0; white-space: nowrap; }
.table td { vertical-align: middle; font-size: 14px; }
.stat-card { border-radius: 12px; padding: 20px; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.stat-card .num { font-size: 28px; font-weight: 700; }
.stat-card .lbl { opacity: .9; font-size: 13px; }
.stat-1 { background: linear-gradient(135deg,#4f8ef7,#3b76d9); }
.stat-2 { background: linear-gradient(135deg,#22c55e,#16a34a); }
.stat-3 { background: linear-gradient(135deg,#f59e0b,#d97706); }
.stat-4 { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }

.btn { border-radius: 8px; }
.form-control, .form-select { border-radius: 8px; }
.pagination { margin-bottom: 0; }
.pagination .page-link { color: #4f8ef7; }
.pagination .active .page-link { background: #4f8ef7; border-color: #4f8ef7; }

/* 登录页 */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#2c3e50,#3b76d9); }
.login-box { width: 400px; background: #fff; border-radius: 16px; padding: 36px 36px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-box .logo { text-align: center; font-size: 22px; font-weight: 700; color: #2c3e50; margin-bottom: 6px; }
.login-box .sub { text-align: center; color: #94a3b8; font-size: 13px; margin-bottom: 22px; }

/* 客户商城 */
.store-top { background: linear-gradient(135deg,#f9738d,#ef4f6d); color: #fff; }
.store-top .navbar-brand { color: #fff; font-weight: 700; }
.store-top .nav-link { color: rgba(255,255,255,.9); }
.product-card { border-radius: 12px; overflow: hidden; border: 1px solid #f0f1f4; transition: transform .15s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.product-card .p-img { height: 160px; background: #f8fafc; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 14px; }
.product-card .p-name { font-weight: 600; padding: 10px 12px 2px; }
.product-card .p-price { color: #ef4f6d; font-weight: 700; padding: 0 12px 12px; }

/* 平台后台：HiMall 风格（顶部一级 + 左侧二级）—— 多主题 CSS 变量 */
body {
    --top-bg: linear-gradient(180deg, #2c3e50 0%, #1a2530 100%);
    --top-border: rgba(255,255,255,.06);
    --top-color: #cbd5e1;
    --top-hover: rgba(255,255,255,.1);
    --top-active-bg: #4f8ef7;
    --top-active-color: #fff;
    --brand-color: #fff;
    --aside-bg: #fff;
    --aside-border: #e5e9f0;
    --aside-title: #2c3e50;
    --aside-text: #475569;
    --aside-hover-bg: #f1f5fb;
    --aside-hover-color: #4f8ef7;
    --aside-active-bg: #eaf2fe;
    --aside-active-color: #4f8ef7;
    --crumb-bg: #fff;
    --crumb-border: #e5e9f0;
}
body.theme-light {
    --top-bg: #ffffff;
    --top-border: #e5e9f0;
    --top-color: #475569;
    --top-hover: #f1f5fb;
    --top-active-bg: #eef4ff;
    --top-active-color: #4f8ef7;
    --brand-color: #1e293b;
    --aside-bg: #f8fafc;
    --aside-border: #e5e9f0;
    --aside-title: #334155;
    --aside-text: #475569;
    --aside-hover-bg: #eef2f7;
    --aside-hover-color: #2563eb;
    --aside-active-bg: #e5efff;
    --aside-active-color: #2563eb;
    --crumb-bg: #f8fafc;
    --crumb-border: #e5e9f0;
}
body.theme-slate {
    --top-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --top-border: rgba(255,255,255,.06);
    --top-color: #cbd5e1;
    --top-hover: rgba(255,255,255,.08);
    --top-active-bg: #64748b;
    --top-active-color: #fff;
    --brand-color: #f8fafc;
    --aside-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    --aside-border: #e2e8f0;
    --aside-title: #475569;
    --aside-text: #334155;
    --aside-hover-bg: #e2e8f0;
    --aside-hover-color: #0f172a;
    --aside-active-bg: #334155;
    --aside-active-color: #fff;
    --crumb-bg: #fff;
    --crumb-border: #e2e8f0;
}
body.theme-blue {
    --top-bg: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.92);
    --top-hover: rgba(255,255,255,.14);
    --top-active-bg: #ffffff;
    --top-active-color: #1d4ed8;
    --brand-color: #fff;
    --aside-bg: #f5f8ff;
    --aside-border: #dbe4f5;
    --aside-title: #1e3a8a;
    --aside-text: #334155;
    --aside-hover-bg: #e8efff;
    --aside-hover-color: #1d4ed8;
    --aside-active-bg: #dbe6ff;
    --aside-active-color: #1d4ed8;
    --crumb-bg: #fff;
    --crumb-border: #dbe4f5;
}

.admin-top { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: var(--top-bg); color: var(--top-color); display: flex; align-items: center; padding: 0 18px; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,.2); border-bottom: 1px solid var(--top-border); }
.admin-top .admin-brand { display: flex; align-items: center; gap: 8px; color: var(--brand-color); font-size: 16px; font-weight: 700; white-space: nowrap; margin-right: 26px; }
.admin-top .brand-logo { height: 30px; width: auto; border-radius: 6px; }
.admin-topnav { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; }
.admin-topnav::-webkit-scrollbar { height: 0; }
.admin-topnav a { color: var(--top-color); padding: 7px 13px; border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.admin-topnav a i { font-size: 15px; }
.admin-topnav a:hover { color: var(--top-active-color); background: var(--top-hover); }
.admin-topnav a.active { color: var(--top-active-color); background: var(--top-active-bg); font-weight: 600; }
.admin-top-right { display: flex; align-items: center; gap: 12px; margin-left: 14px; white-space: nowrap; }
.admin-top-right .admin-user { color: var(--top-color); font-size: 13px; display: flex; align-items: center; gap: 5px; }
.admin-top-right .admin-logout { color: var(--top-color); font-size: 13px; display: flex; align-items: center; gap: 5px; text-decoration: none; }
.admin-top-right .admin-logout:hover { color: var(--top-active-color); }
.admin-top-right .theme-switch { border: 1px solid var(--top-border); border-radius: 8px; background: transparent; color: var(--top-color); font-size: 12px; padding: 3px 8px; }
.admin-top-right .theme-switch option { color: #334155; }
.admin-body { padding-top: 56px; display: flex; min-height: 100vh; }
.admin-aside { width: 220px; flex-shrink: 0; background: var(--aside-bg); border-right: 1px solid var(--aside-border); padding: 14px 10px; min-height: calc(100vh - 56px); }
.admin-aside .aside-title { font-size: 13px; font-weight: 700; color: var(--aside-title); padding: 4px 12px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--aside-border); margin-bottom: 8px; }
.admin-aside .nav-link { color: var(--aside-text); padding: 9px 12px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.admin-aside .nav-link i { font-size: 14px; width: 16px; text-align: center; }
.admin-aside .nav-link:hover { color: var(--aside-hover-color); background: var(--aside-hover-bg); }
.admin-aside .nav-link.active { color: var(--aside-active-color); background: var(--aside-active-bg); font-weight: 600; }
.admin-main { flex: 1; min-width: 0; }
.page-crumb { background: var(--crumb-bg); border-bottom: 1px solid var(--crumb-border); padding: 0 24px; height: 46px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.page-crumb a { color: #64748b; text-decoration: none; }
.page-crumb a:hover { color: var(--aside-active-color); }
.page-crumb span { color: #94a3b8; }
@media (max-width: 992px) {
    .admin-aside { display: none; }
    .admin-top .admin-brand { margin-right: 12px; }
    .admin-top-right .admin-user { display: none; }
}

/* ===== 平台后台多主题体系 v2：14 套主题（布局 + 控件联动，CSS 变量） ===== */
/* 默认值 = 浅色风格（light），用户可下拉切换其他主题 */
body {
    --page-bg: #f6f8fb;
    --radius: 8px;
    --btn-primary-bg: #2563eb; --btn-primary-hover: #1d4ed8; --btn-primary-color: #fff;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d; --btn-success-color: #fff;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626; --btn-danger-color: #fff;
    --input-bg: #fff; --input-color: #1e293b; --input-border: #cbd5e1; --input-focus: #2563eb; --input-focus-ring: rgba(37,99,235,.22);
    --card-bg: #fff; --card-border: #e2e8f0; --card-shadow: 0 1px 4px rgba(15,23,42,.07);
    --table-head-bg: #eef4ff; --table-head-color: #334155; --table-border: #e5e9f0; --table-hover: #f3f7ff;
    --badge-info: #e5efff; --badge-info-c: #2563eb; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #2563eb;
    /* 布局（浅色顶 + 浅灰侧栏） */
    --top-bg: #ffffff; --top-border: #e5e9f0; --top-color: #475569; --top-hover: #f1f5fb;
    --top-active-bg: #eef4ff; --top-active-color: #2563eb; --brand-color: #1e293b;
    --aside-bg: #f8fafc; --aside-border: #e5e9f0; --aside-title: #334155; --aside-text: #475569;
    --aside-hover-bg: #eef2f7; --aside-hover-color: #2563eb; --aside-active-bg: #e5efff; --aside-active-color: #2563eb;
    --crumb-bg: #f8fafc; --crumb-border: #e5e9f0;
}
body.theme-slate {
    --top-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); --top-border: rgba(255,255,255,.06);
    --top-color: #cbd5e1; --top-hover: rgba(255,255,255,.08); --top-active-bg: #64748b; --top-active-color: #fff;
    --brand-color: #f8fafc; --aside-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); --aside-border: #e2e8f0;
    --aside-title: #475569; --aside-text: #334155; --aside-hover-bg: #e2e8f0; --aside-hover-color: #0f172a;
    --aside-active-bg: #334155; --aside-active-color: #fff; --crumb-bg: #fff; --crumb-border: #e2e8f0;
    --page-bg: #f4f6f9; --radius: 6px;
    --btn-primary-bg: #64748b; --btn-primary-hover: #475569;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #64748b; --input-focus-ring: rgba(100,116,139,.22);
    --table-head-bg: #e9edf2; --table-head-color: #334155; --table-border: #e2e8f0; --table-hover: #f6f8fb;
    --badge-info: #e9edf2; --badge-info-c: #475569; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #475569;
}
body.theme-blue {
    --top-bg: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.92); --top-hover: rgba(255,255,255,.14); --top-active-bg: #ffffff; --top-active-color: #1d4ed8;
    --brand-color: #fff; --aside-bg: #f5f8ff; --aside-border: #dbe4f5; --aside-title: #1e3a8a;
    --aside-text: #334155; --aside-hover-bg: #e8efff; --aside-hover-color: #1d4ed8; --aside-active-bg: #dbe6ff; --aside-active-color: #1d4ed8;
    --crumb-bg: #fff; --crumb-border: #dbe4f5;
    --page-bg: #f4f7ff; --radius: 8px;
    --btn-primary-bg: #2563eb; --btn-primary-hover: #1d4ed8;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #2563eb; --input-focus-ring: rgba(37,99,235,.22);
    --card-border: #dbe4f5; --card-shadow: 0 2px 6px rgba(37,99,235,.08);
    --table-head-bg: #e5efff; --table-head-color: #1e3a8a; --table-border: #dbe4f5; --table-hover: #f3f7ff;
    --badge-info: #e5efff; --badge-info-c: #1d4ed8; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #1d4ed8;
}
body.theme-green {
    --top-bg: linear-gradient(135deg, #10b981 0%, #047857 100%); --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.94); --top-hover: rgba(255,255,255,.14); --top-active-bg: #ffffff; --top-active-color: #047857;
    --brand-color: #fff; --aside-bg: #f2fbf7; --aside-border: #d3ebe1; --aside-title: #065f46;
    --aside-text: #334155; --aside-hover-bg: #e0f5ec; --aside-hover-color: #059669; --aside-active-bg: #c9ecdb; --aside-active-color: #047857;
    --crumb-bg: #fff; --crumb-border: #d3ebe1;
    --page-bg: #f4faf7; --radius: 10px;
    --btn-primary-bg: #059669; --btn-primary-hover: #047857;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #059669; --input-focus-ring: rgba(5,150,105,.22);
    --card-border: #d3ebe1; --card-shadow: 0 2px 6px rgba(4,120,87,.08);
    --table-head-bg: #e0f5ec; --table-head-color: #065f46; --table-border: #d3ebe1; --table-hover: #f2fbf7;
    --badge-info: #e7f6ef; --badge-info-c: #047857; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #059669;
}
body.theme-purple {
    --top-bg: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.94); --top-hover: rgba(255,255,255,.14); --top-active-bg: #ffffff; --top-active-color: #6d28d9;
    --brand-color: #fff; --aside-bg: #f8f5ff; --aside-border: #e6ddfa; --aside-title: #5b21b6;
    --aside-text: #3f3f46; --aside-hover-bg: #f0e9ff; --aside-hover-color: #7c3aed; --aside-active-bg: #e5dcff; --aside-active-color: #6d28d9;
    --crumb-bg: #fff; --crumb-border: #e6ddfa;
    --page-bg: #f8f6fd; --radius: 10px;
    --btn-primary-bg: #7c3aed; --btn-primary-hover: #6d28d9;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #7c3aed; --input-focus-ring: rgba(124,58,237,.22);
    --card-border: #e6ddfa; --card-shadow: 0 2px 6px rgba(109,40,217,.08);
    --table-head-bg: #f0e9ff; --table-head-color: #5b21b6; --table-border: #e6ddfa; --table-hover: #f8f5ff;
    --badge-info: #f0e9ff; --badge-info-c: #6d28d9; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #7c3aed;
}
body.theme-orange {
    --top-bg: linear-gradient(135deg, #f97316 0%, #c2410c 100%); --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.95); --top-hover: rgba(255,255,255,.14); --top-active-bg: #ffffff; --top-active-color: #c2410c;
    --brand-color: #fff; --aside-bg: #fff9f2; --aside-border: #f5e2cd; --aside-title: #9a3412;
    --aside-text: #44403c; --aside-hover-bg: #ffeddd; --aside-hover-color: #ea580c; --aside-active-bg: #ffddbb; --aside-active-color: #c2410c;
    --crumb-bg: #fff; --crumb-border: #f5e2cd;
    --page-bg: #fbf6f0; --radius: 10px;
    --btn-primary-bg: #ea580c; --btn-primary-hover: #c2410c;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #ea580c; --input-focus-ring: rgba(234,88,12,.22);
    --card-border: #f5e2cd; --card-shadow: 0 2px 6px rgba(194,65,12,.08);
    --table-head-bg: #ffeddd; --table-head-color: #9a3412; --table-border: #f5e2cd; --table-hover: #fff9f2;
    --badge-info: #ffeddd; --badge-info-c: #c2410c; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #ea580c;
}
body.theme-dark {
    --top-bg: linear-gradient(180deg, #111827 0%, #030712 100%); --top-border: rgba(255,255,255,.08);
    --top-color: #cbd5e1; --top-hover: rgba(255,255,255,.1); --top-active-bg: #6366f1; --top-active-color: #fff;
    --brand-color: #e5e7eb; --aside-bg: #111827; --aside-border: #1f2937; --aside-title: #e5e7eb;
    --aside-text: #94a3b8; --aside-hover-bg: #1f2937; --aside-hover-color: #fff; --aside-active-bg: #6366f1; --aside-active-color: #fff;
    --crumb-bg: #0f172a; --crumb-border: #1f2937;
    --page-bg: #0f172a; --radius: 8px;
    --btn-primary-bg: #6366f1; --btn-primary-hover: #4f46e5;
    --btn-success-bg: #10b981; --btn-success-hover: #059669;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-bg: #1e293b; --input-color: #e2e8f0; --input-border: #334155; --input-focus: #818cf8; --input-focus-ring: rgba(129,140,248,.25);
    --card-bg: #111827; --card-border: #1f2937; --card-shadow: 0 2px 8px rgba(0,0,0,.4);
    --table-head-bg: #1e293b; --table-head-color: #cbd5e1; --table-border: #1f2937; --table-hover: #1e293b;
    --badge-info: #312e81; --badge-info-c: #a5b4fc; --badge-success: #064e3b; --badge-success-c: #6ee7b7;
    --badge-warning: #78350f; --badge-warning-c: #fcd34d; --badge-danger: #7f1d1d; --badge-danger-c: #fca5a5;
    --link-color: #818cf8;
}
body.theme-dark .page-crumb a { color: #94a3b8; }
body.theme-dark .page-crumb span { color: #64748b; }
body.theme-dark .theme-switch { color: #e5e7eb; }
body.theme-dark .theme-switch option { color: #111827; }
/* 第 2 批：金棕/青蓝/玫红/靛蓝/米白/藏青 */
body.theme-gold {
    --top-bg: linear-gradient(180deg, #1f2937 0%, #111827 100%); --top-border: rgba(255,255,255,.08);
    --top-color: #e5e7eb; --top-hover: rgba(255,255,255,.1); --top-active-bg: #d4a437; --top-active-color: #451a03;
    --brand-color: #f5d77e; --aside-bg: #faf8f3; --aside-border: #ece5d6; --aside-title: #7c5a12;
    --aside-text: #4b4a44; --aside-hover-bg: #f2ead9; --aside-hover-color: #a16207; --aside-active-bg: #e8d9b0; --aside-active-color: #7c5a12;
    --crumb-bg: #fffdf9; --crumb-border: #ece5d6;
    --page-bg: #faf7f0; --radius: 10px;
    --btn-primary-bg: #a16207; --btn-primary-hover: #854d0e;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #a16207; --input-focus-ring: rgba(161,98,7,.22);
    --card-border: #ece5d6; --card-shadow: 0 2px 6px rgba(124,90,18,.08);
    --table-head-bg: #f2ead9; --table-head-color: #7c5a12; --table-border: #ece5d6; --table-hover: #faf7f0;
    --badge-info: #f2ead9; --badge-info-c: #7c5a12; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #a16207;
}
body.theme-cyan {
    --top-bg: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.94); --top-hover: rgba(255,255,255,.14); --top-active-bg: #ffffff; --top-active-color: #0e7490;
    --brand-color: #fff; --aside-bg: #f0fdfa; --aside-border: #cdeee8; --aside-title: #115e59;
    --aside-text: #334155; --aside-hover-bg: #d9f4ef; --aside-hover-color: #0d9488; --aside-active-bg: #b8e8df; --aside-active-color: #0e7490;
    --crumb-bg: #fff; --crumb-border: #cdeee8;
    --page-bg: #f3fbfa; --radius: 10px;
    --btn-primary-bg: #0891b2; --btn-primary-hover: #0e7490;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #0891b2; --input-focus-ring: rgba(8,145,178,.22);
    --card-border: #cdeee8; --card-shadow: 0 2px 6px rgba(14,116,144,.08);
    --table-head-bg: #d9f4ef; --table-head-color: #115e59; --table-border: #cdeee8; --table-hover: #f0fdfa;
    --badge-info: #d9f4ef; --badge-info-c: #0e7490; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #0d9488;
}
body.theme-rose {
    --top-bg: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.95); --top-hover: rgba(255,255,255,.14); --top-active-bg: #ffffff; --top-active-color: #be123c;
    --brand-color: #fff; --aside-bg: #fff1f2; --aside-border: #f9d2da; --aside-title: #9f1239;
    --aside-text: #44403c; --aside-hover-bg: #ffe4e6; --aside-hover-color: #e11d48; --aside-active-bg: #fecdd3; --aside-active-color: #be123c;
    --crumb-bg: #fff; --crumb-border: #f9d2da;
    --page-bg: #fdf5f6; --radius: 10px;
    --btn-primary-bg: #e11d48; --btn-primary-hover: #be123c;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #e11d48; --input-focus-ring: rgba(225,29,72,.22);
    --card-border: #f9d2da; --card-shadow: 0 2px 6px rgba(190,18,60,.08);
    --table-head-bg: #ffe4e6; --table-head-color: #9f1239; --table-border: #f9d2da; --table-hover: #fff1f2;
    --badge-info: #ffe4e6; --badge-info-c: #be123c; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #e11d48;
}
body.theme-indigo {
    --top-bg: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); --top-border: rgba(255,255,255,.1);
    --top-color: rgba(255,255,255,.94); --top-hover: rgba(255,255,255,.14); --top-active-bg: #ffffff; --top-active-color: #4338ca;
    --brand-color: #fff; --aside-bg: #eef2ff; --aside-border: #dbe2fb; --aside-title: #3730a3;
    --aside-text: #373a40; --aside-hover-bg: #e0e7ff; --aside-hover-color: #4f46e5; --aside-active-bg: #c7d2fe; --aside-active-color: #4338ca;
    --crumb-bg: #fff; --crumb-border: #dbe2fb;
    --page-bg: #f4f6ff; --radius: 8px;
    --btn-primary-bg: #4f46e5; --btn-primary-hover: #4338ca;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #4f46e5; --input-focus-ring: rgba(79,70,229,.22);
    --card-border: #dbe2fb; --card-shadow: 0 2px 6px rgba(67,56,202,.08);
    --table-head-bg: #e0e7ff; --table-head-color: #3730a3; --table-border: #dbe2fb; --table-hover: #eef2ff;
    --badge-info: #e0e7ff; --badge-info-c: #4338ca; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #4f46e5;
}
body.theme-ivory {
    --top-bg: #faf7f2; --top-border: #ece5d6; --top-color: #57534e; --top-hover: #f2ead9;
    --top-active-bg: #b45309; --top-active-color: #fff; --brand-color: #92400e;
    --aside-bg: #fffdf9; --aside-border: #ece5d6; --aside-title: #92400e;
    --aside-text: #57534e; --aside-hover-bg: #faf3e6; --aside-hover-color: #b45309; --aside-active-bg: #f3e6cd; --aside-active-color: #92400e;
    --crumb-bg: #fffdf9; --crumb-border: #ece5d6;
    --page-bg: #faf7f2; --radius: 10px;
    --btn-primary-bg: #b45309; --btn-primary-hover: #92400e;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #b45309; --input-focus-ring: rgba(180,83,9,.22);
    --card-border: #ece5d6; --card-shadow: 0 2px 6px rgba(146,64,14,.07);
    --table-head-bg: #faf3e6; --table-head-color: #92400e; --table-border: #ece5d6; --table-hover: #fffdf9;
    --badge-info: #faf3e6; --badge-info-c: #92400e; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #b45309;
}
body.theme-navy {
    --top-bg: linear-gradient(135deg, #1e3a8a 0%, #172554 100%); --top-border: rgba(255,255,255,.08);
    --top-color: #cbd5e1; --top-hover: rgba(255,255,255,.1); --top-active-bg: #ffffff; --top-active-color: #1e3a8a;
    --brand-color: #fff; --aside-bg: #f1f5fd; --aside-border: #d9e2f4; --aside-title: #1e3a8a;
    --aside-text: #334155; --aside-hover-bg: #e0e9f8; --aside-hover-color: #1d4ed8; --aside-active-bg: #c7d2fe; --aside-active-color: #1e3a8a;
    --crumb-bg: #fff; --crumb-border: #d9e2f4;
    --page-bg: #f4f7fd; --radius: 6px;
    --btn-primary-bg: #1d4ed8; --btn-primary-hover: #1e40af;
    --btn-success-bg: #16a34a; --btn-success-hover: #15803d;
    --btn-danger-bg: #ef4444; --btn-danger-hover: #dc2626;
    --input-focus: #1d4ed8; --input-focus-ring: rgba(29,78,216,.22);
    --card-border: #d9e2f4; --card-shadow: 0 2px 6px rgba(30,58,138,.08);
    --table-head-bg: #e0e9f8; --table-head-color: #1e3a8a; --table-border: #d9e2f4; --table-hover: #f1f5fd;
    --badge-info: #e0e9f8; --badge-info-c: #1e3a8a; --badge-success: #e7f6ec; --badge-success-c: #15803d;
    --badge-warning: #fff3e0; --badge-warning-c: #d97706; --badge-danger: #fdecec; --badge-danger-c: #dc2626;
    --link-color: #1d4ed8;
}

/* 控件联动（按钮/输入/下拉/表格/卡片/徽章/链接），随主题变量变化 */
body .btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-color); border-radius: var(--radius); }
body .btn-primary:hover, body .btn-primary:focus, body .btn-primary:active { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--btn-primary-color); }
body .btn-success { background: var(--btn-success-bg); border-color: var(--btn-success-bg); color: var(--btn-success-color); border-radius: var(--radius); }
body .btn-success:hover, body .btn-success:focus, body .btn-success:active { background: var(--btn-success-hover); border-color: var(--btn-success-hover); color: var(--btn-success-color); }
body .btn-danger { background: var(--btn-danger-bg); border-color: var(--btn-danger-bg); color: var(--btn-danger-color); border-radius: var(--radius); }
body .btn-danger:hover, body .btn-danger:focus, body .btn-danger:active { background: var(--btn-danger-hover); border-color: var(--btn-danger-hover); color: var(--btn-danger-color); }
body .btn-outline-primary { color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); border-radius: var(--radius); }
body .btn-outline-primary:hover { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-color); }
body .btn-outline-success { color: var(--btn-success-bg); border-color: var(--btn-success-bg); border-radius: var(--radius); }
body .btn-outline-success:hover { background: var(--btn-success-bg); border-color: var(--btn-success-bg); color: var(--btn-success-color); }
body .btn-outline-danger { color: var(--btn-danger-bg); border-color: var(--btn-danger-bg); border-radius: var(--radius); }
body .btn-outline-danger:hover { background: var(--btn-danger-bg); border-color: var(--btn-danger-bg); color: var(--btn-danger-color); }
body .btn-secondary, body .btn-outline-secondary { border-radius: var(--radius); }
body .form-control, body .form-select { background-color: var(--input-bg); color: var(--input-color); border-color: var(--input-border); border-radius: var(--radius); }
body .form-control:focus, body .form-select:focus { border-color: var(--input-focus); box-shadow: 0 0 0 .22rem var(--input-focus-ring); background-color: var(--input-bg); color: var(--input-color); }
body .form-control::placeholder { color: #94a3b8; }
body .form-check-input:checked { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); }
body .form-check-input:focus { border-color: var(--input-focus); box-shadow: 0 0 0 .22rem var(--input-focus-ring); }
body .card { background: var(--card-bg); border-color: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
body .table { --bs-table-bg: transparent; --bs-table-border-color: var(--table-border); }
body .table thead th { background: var(--table-head-bg); color: var(--table-head-color); border-color: var(--table-border); }
body .table td, body .table th { border-color: var(--table-border); }
body .table tbody tr:hover { background: var(--table-hover); }
body .badge.bg-info { background: var(--badge-info) !important; color: var(--badge-info-c) !important; }
body .badge.bg-success { background: var(--badge-success) !important; color: var(--badge-success-c) !important; }
body .badge.bg-warning { background: var(--badge-warning) !important; color: var(--badge-warning-c) !important; }
body .badge.bg-danger { background: var(--badge-danger) !important; color: var(--badge-danger-c) !important; }
body a { color: var(--link-color); }
.admin-main { background: var(--page-bg); }


/* ===== 客户个人中心（卡包设计） ===== */
/* 顶部个人区：延续顶栏品牌粉渐变 */
.cc-hero { background: linear-gradient(135deg,#f9738d,#ef4f6d); border-radius: 16px; padding: 22px 20px; display: flex; align-items: center; gap: 14px; color: #fff; margin-bottom: 20px; }
.cc-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; flex-shrink: 0; }
.cc-hero-info { flex: 1; min-width: 0; }
.cc-nickname { font-size: 19px; font-weight: 700; }
.cc-phone { font-size: 13px; opacity: .85; margin-top: 2px; }
.cc-hero-cta { background: #fff; color: #ef4f6d; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 20px; text-decoration: none; flex-shrink: 0; }
.cc-hero-cta:hover { color: #e8435f; background: #fff; }

/* 会员卡：实体卡比例 1.586:1，卡面材质即等级 */
.cc-card { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1.586; border-radius: 16px; padding: 18px 20px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 14px; box-shadow: 0 10px 24px rgba(43,38,34,.18); overflow: hidden; }
.cc-card::after { content: ""; position: absolute; top: -40%; right: -20%; width: 70%; height: 180%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%); pointer-events: none; }
.cc-card.lv-normal { background: linear-gradient(135deg,#3a3532,#2b2622); }
.cc-card.lv-silver { background: linear-gradient(135deg,#c9cdd4,#9ba1ab); color: #3a3a44; }
.cc-card.lv-gold { background: linear-gradient(135deg,#c9a96e,#e8d3a2); color: #4a3b22; }
.cc-card.lv-diamond { background: linear-gradient(135deg,#3a3a44,#22222a); color: #e8e8ee; }
.cc-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.cc-card-level { font-weight: 700; letter-spacing: 2px; font-size: 14px; }
.cc-card-merchant { opacity: .8; }
.cc-card-balance { display: flex; flex-direction: column; gap: 2px; }
.cc-card-label { font-size: 12px; opacity: .75; }
.cc-card-amount { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cc-card-foot { display: flex; align-items: center; gap: 16px; font-size: 12px; opacity: .85; }
.cc-unbind { margin-left: auto; background: rgba(255,255,255,.18); border: none; color: inherit; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-unbind:hover { background: rgba(255,255,255,.32); }

/* 四宫格入口 */
.cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.cc-grid-item { background: #fff; border-radius: 10px; padding: 14px 4px; text-align: center; text-decoration: none; color: #2b2622; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 1px 3px rgba(43,38,34,.06); }
.cc-grid-item:hover { color: #e8637c; }
.cc-grid-item i { font-size: 20px; color: #e8637c; }
.cc-grid-item span { font-size: 12px; }

/* 空状态 */
.cc-empty { text-align: center; padding: 44px 20px; background: #fff; border-radius: 16px; margin-bottom: 22px; }
.cc-empty i { font-size: 40px; color: #e8637c; }
.cc-empty-title { font-weight: 700; margin-top: 10px; color: #2b2622; }
.cc-empty-desc { font-size: 13px; color: #8a827c; margin: 6px 0 16px; }
.cc-empty-cta { background: #e8637c; color: #fff; padding: 8px 22px; border-radius: 20px; font-size: 13px; text-decoration: none; }
.cc-empty-cta:hover { color: #fff; background: #d95470; }

/* 最近订单：卡片式行 */
.cc-section { margin-bottom: 20px; }
.cc-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; color: #2b2622; }
.cc-section-more { font-size: 12px; font-weight: 400; color: #8a827c; text-decoration: none; }
.cc-order { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 10px; padding: 13px 16px; margin-bottom: 8px; text-decoration: none; color: #2b2622; box-shadow: 0 1px 3px rgba(43,38,34,.06); }
.cc-order-no { font-size: 13px; font-weight: 600; }
.cc-order-time { font-size: 12px; color: #8a827c; margin-top: 2px; }
.cc-order-right { text-align: right; }
.cc-order-amt { font-weight: 700; font-variant-numeric: tabular-nums; display: block; }
.cc-order-status { font-size: 12px; }
.cc-order-status.s-pendingpay { color: #d97706; }
.cc-order-status.s-paid { color: #e8637c; }
.cc-order-status.s-shipped { color: #2563eb; }
.cc-order-status.s-completed { color: #16a34a; }
.cc-order-status.s-cancelled { color: #8a827c; }
.cc-order-empty { background: #fff; border-radius: 10px; text-align: center; color: #8a827c; font-size: 13px; padding: 26px 0; }

/* 分享 */
.cc-share { background: #f0e4d8; border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-share-title { font-weight: 600; font-size: 14px; color: #2b2622; }
.cc-share-desc { font-size: 12px; color: #8a827c; margin-top: 2px; }
.cc-share-btn { background: #fff; border: none; color: #e8637c; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 18px; cursor: pointer; }

/* 页面加载时会员卡单次上浮入场，其余无动画 */
@keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cc-card { animation: cc-rise .45s ease-out both; }
@media (prefers-reduced-motion: reduce) { .cc-card { animation: none; } }

/* ===== ERP 导航外壳 v3（平台后台 / 商家后台共用）=====
   方向：临床美学 ERP —— 左侧单栏分组导航，层级靠字重/缩进/发丝线表达，
   颜色全部走主题变量，14 套主题继续可用。 */
.erp-side { position: fixed; top: 0; left: 0; bottom: 0; width: 236px; display: flex; flex-direction: column; background: var(--aside-bg); border-right: 1px solid var(--aside-border); z-index: 100; }
.erp-brand { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 0 18px; background: var(--top-bg); color: var(--brand-color); border-bottom: 1px solid var(--top-border); font-size: 15px; font-weight: 700; }
.erp-brand .brand-logo { height: 26px; width: auto; border-radius: 6px; }
.erp-brand i { font-size: 18px; }
.erp-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-nav { flex: 1; overflow-y: auto; padding: 4px 10px 18px; }
.erp-nav::-webkit-scrollbar { width: 6px; }
.erp-nav::-webkit-scrollbar-thumb { background: rgba(100,116,139,.24); border-radius: 3px; }
.erp-group { padding: 16px 12px 5px; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--aside-text); opacity: .55; }
.erp-mod { display: flex; align-items: center; gap: 9px; padding: 8px 11px; margin: 1px 0; border-radius: 7px; color: var(--aside-text); font-size: 13.5px; line-height: 1.3; text-decoration: none; }
.erp-mod i { width: 16px; font-size: 14.5px; text-align: center; opacity: .9; }
.erp-mod:hover { background: var(--aside-hover-bg); color: var(--aside-hover-color); }
.erp-mod.active { background: var(--aside-active-bg); color: var(--aside-active-color); font-weight: 600; }
.erp-sub { margin: 3px 0 7px 9px; padding-left: 10px; border-left: 1px solid var(--aside-border); display: flex; flex-direction: column; }
.erp-subgroup { padding: 6px 10px 3px; font-size: 11px; color: var(--aside-text); opacity: .5; letter-spacing: .06em; }
.erp-subitem { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: var(--aside-text); opacity: .82; font-size: 12.5px; line-height: 1.35; text-decoration: none; }
.erp-subitem i { width: 14px; font-size: 12.5px; text-align: center; opacity: .8; }
.erp-subitem:hover { background: var(--aside-hover-bg); color: var(--aside-hover-color); opacity: 1; }
.erp-subitem.active { background: var(--aside-active-bg); color: var(--aside-active-color); opacity: 1; font-weight: 600; }
.erp-side-foot { flex-shrink: 0; padding: 10px 18px; border-top: 1px solid var(--aside-border); }
.erp-version { font-size: 11px; color: var(--aside-text); opacity: .45; letter-spacing: .06em; }
.erp-main { margin-left: 236px; min-height: 100vh; display: flex; flex-direction: column; background: var(--page-bg); }
.erp-top { position: sticky; top: 0; z-index: 90; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; background: var(--top-bg); color: var(--top-color); border-bottom: 1px solid var(--top-border); }
.erp-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.erp-crumb a { color: var(--top-color); opacity: .72; text-decoration: none; }
.erp-crumb a:hover { opacity: 1; }
.erp-crumb span { opacity: .4; }
.erp-crumb b { font-weight: 600; color: var(--brand-color); }
.erp-crumb i { font-size: 15px; opacity: .72; }
.erp-top-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.erp-top-right .theme-switch { border: 1px solid var(--top-border); border-radius: 7px; background: transparent; color: var(--top-color); font-size: 12px; padding: 3px 8px; }
.erp-top-right .theme-switch option { color: #334155; }
.erp-user { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--top-color); }
.erp-logout { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--top-color); text-decoration: none; }
.erp-logout:hover { color: var(--top-active-color); }
.erp-shop-switch { width: auto; height: 30px; padding: 2px 8px; font-size: 12px; }
@media (max-width: 992px) {
    .erp-side { display: none; }
    .erp-main { margin-left: 0; }
    .erp-top { padding: 0 14px; }
    .erp-top-right .erp-user { display: none; }
    .erp-main .content { padding: 16px 14px; }
}