/* ============================================
   企业官网皮肤系统 - 16款精心调配的色彩方案
   通过 data-skin 属性切换，所有颜色变量统一管理
   ============================================ */

/* ── 1. 海洋蓝（经典商务） ── */
[data-skin="ocean-blue"] {
    --skin-primary: #1d4ed8;
    --skin-primary-hover: #1e40af;
    --skin-primary-light: #eff6ff;
    --skin-primary-rgb: 29, 78, 216;
    --skin-accent: #0ea5e9;
    --skin-accent-hover: #0284c7;
    --skin-gradient: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(29,78,216,0.1) 0%, rgba(14,165,233,0.1) 100%);
    --skin-hero-bg: #070d19;
    --skin-hero-glow: rgba(37,99,235,0.3);
    --skin-hero-pattern: rgba(56,189,248,0.08);
    --skin-badge-bg: rgba(37,99,235,0.15);
    --skin-badge-border: rgba(59,130,246,0.3);
    --skin-badge-text: #60a5fa;
    --skin-card-accent: #2563eb;
}

/* ── 2. 森林绿（自然清新） ── */
[data-skin="forest-green"] {
    --skin-primary: #059669;
    --skin-primary-hover: #047857;
    --skin-primary-light: #ecfdf5;
    --skin-primary-rgb: 5, 150, 105;
    --skin-accent: #10b981;
    --skin-accent-hover: #059669;
    --skin-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(5,150,105,0.1) 0%, rgba(16,185,129,0.1) 100%);
    --skin-hero-bg: #0a1a14;
    --skin-hero-glow: rgba(16,185,129,0.3);
    --skin-hero-pattern: rgba(52,211,153,0.08);
    --skin-badge-bg: rgba(16,185,129,0.15);
    --skin-badge-border: rgba(52,211,153,0.3);
    --skin-badge-text: #34d399;
    --skin-card-accent: #059669;
}

/* ── 3. 日落橙（活力热情） ── */
[data-skin="sunset-orange"] {
    --skin-primary: #ea580c;
    --skin-primary-hover: #c2410c;
    --skin-primary-light: #fff7ed;
    --skin-primary-rgb: 234, 88, 12;
    --skin-accent: #f97316;
    --skin-accent-hover: #ea580c;
    --skin-gradient: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(234,88,12,0.1) 0%, rgba(249,115,22,0.1) 100%);
    --skin-hero-bg: #1a0d07;
    --skin-hero-glow: rgba(249,115,22,0.3);
    --skin-hero-pattern: rgba(251,146,60,0.08);
    --skin-badge-bg: rgba(249,115,22,0.15);
    --skin-badge-border: rgba(251,146,60,0.3);
    --skin-badge-text: #fb923c;
    --skin-card-accent: #ea580c;
}

/* ── 4. 皇家紫（高端奢华） ── */
[data-skin="royal-purple"] {
    --skin-primary: #7c3aed;
    --skin-primary-hover: #6d28d9;
    --skin-primary-light: #f5f3ff;
    --skin-primary-rgb: 124, 58, 237;
    --skin-accent: #8b5cf6;
    --skin-accent-hover: #7c3aed;
    --skin-gradient: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(139,92,246,0.1) 100%);
    --skin-hero-bg: #0f0a1a;
    --skin-hero-glow: rgba(139,92,246,0.3);
    --skin-hero-pattern: rgba(167,139,250,0.08);
    --skin-badge-bg: rgba(139,92,246,0.15);
    --skin-badge-border: rgba(167,139,250,0.3);
    --skin-badge-text: #a78bfa;
    --skin-card-accent: #7c3aed;
}

/* ── 5. 午夜黑（深邃神秘） ── */
[data-skin="midnight-dark"] {
    --skin-primary: #1e40af;
    --skin-primary-hover: #1e3a8a;
    --skin-primary-light: #1e293b;
    --skin-primary-rgb: 30, 64, 175;
    --skin-accent: #3b82f6;
    --skin-accent-hover: #2563eb;
    --skin-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(30,64,175,0.15) 0%, rgba(59,130,246,0.15) 100%);
    --skin-hero-bg: #020617;
    --skin-hero-glow: rgba(59,130,246,0.4);
    --skin-hero-pattern: rgba(96,165,250,0.06);
    --skin-badge-bg: rgba(59,130,246,0.2);
    --skin-badge-border: rgba(96,165,250,0.4);
    --skin-badge-text: #93c5fd;
    --skin-card-accent: #2563eb;
}

/* ── 6. 樱桃红（热情奔放） ── */
[data-skin="cherry-red"] {
    --skin-primary: #dc2626;
    --skin-primary-hover: #b91c1c;
    --skin-primary-light: #fef2f2;
    --skin-primary-rgb: 220, 38, 38;
    --skin-accent: #ef4444;
    --skin-accent-hover: #dc2626;
    --skin-gradient: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(239,68,68,0.1) 100%);
    --skin-hero-bg: #1a0707;
    --skin-hero-glow: rgba(239,68,68,0.3);
    --skin-hero-pattern: rgba(252,165,165,0.08);
    --skin-badge-bg: rgba(239,68,68,0.15);
    --skin-badge-border: rgba(252,165,165,0.3);
    --skin-badge-text: #fca5a5;
    --skin-card-accent: #dc2626;
}

/* ── 7. 金色荣耀（尊贵典雅） ── */
[data-skin="golden-glory"] {
    --skin-primary: #d97706;
    --skin-primary-hover: #b45309;
    --skin-primary-light: #fffbeb;
    --skin-primary-rgb: 217, 119, 6;
    --skin-accent: #f59e0b;
    --skin-accent-hover: #d97706;
    --skin-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(217,119,6,0.1) 0%, rgba(245,158,11,0.1) 100%);
    --skin-hero-bg: #1a1407;
    --skin-hero-glow: rgba(245,158,11,0.3);
    --skin-hero-pattern: rgba(253,224,71,0.08);
    --skin-badge-bg: rgba(245,158,11,0.15);
    --skin-badge-border: rgba(253,224,71,0.3);
    --skin-badge-text: #fde047;
    --skin-card-accent: #d97706;
}

/* ── 8. 天空青（清爽明快） ── */
[data-skin="sky-cyan"] {
    --skin-primary: #0891b2;
    --skin-primary-hover: #0e7490;
    --skin-primary-light: #ecfeff;
    --skin-primary-rgb: 8, 145, 178;
    --skin-accent: #06b6d4;
    --skin-accent-hover: #0891b2;
    --skin-gradient: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(8,145,178,0.1) 0%, rgba(6,182,212,0.1) 100%);
    --skin-hero-bg: #071a1f;
    --skin-hero-glow: rgba(6,182,212,0.3);
    --skin-hero-pattern: rgba(34,211,238,0.08);
    --skin-badge-bg: rgba(6,182,212,0.15);
    --skin-badge-border: rgba(34,211,238,0.3);
    --skin-badge-text: #22d3ee;
    --skin-card-accent: #0891b2;
}

/* ── 9. 玫瑰粉（温柔优雅） ── */
[data-skin="rose-pink"] {
    --skin-primary: #e11d48;
    --skin-primary-hover: #be123c;
    --skin-primary-light: #fff1f2;
    --skin-primary-rgb: 225, 29, 72;
    --skin-accent: #f43f5e;
    --skin-accent-hover: #e11d48;
    --skin-gradient: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(225,29,72,0.1) 0%, rgba(244,63,94,0.1) 100%);
    --skin-hero-bg: #1a0a0f;
    --skin-hero-glow: rgba(244,63,94,0.3);
    --skin-hero-pattern: rgba(251,113,133,0.08);
    --skin-badge-bg: rgba(244,63,94,0.15);
    --skin-badge-border: rgba(251,113,133,0.3);
    --skin-badge-text: #fb7185;
    --skin-card-accent: #e11d48;
}

/* ── 10. 石板灰（沉稳内敛） ── */
[data-skin="slate-gray"] {
    --skin-primary: #475569;
    --skin-primary-hover: #334155;
    --skin-primary-light: #f1f5f9;
    --skin-primary-rgb: 71, 85, 105;
    --skin-accent: #64748b;
    --skin-accent-hover: #475569;
    --skin-gradient: linear-gradient(135deg, #475569 0%, #64748b 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(71,85,105,0.1) 0%, rgba(100,116,139,0.1) 100%);
    --skin-hero-bg: #0f1117;
    --skin-hero-glow: rgba(100,116,139,0.3);
    --skin-hero-pattern: rgba(148,163,184,0.08);
    --skin-badge-bg: rgba(100,116,139,0.15);
    --skin-badge-border: rgba(148,163,184,0.3);
    --skin-badge-text: #94a3b8;
    --skin-card-accent: #475569;
}

/* ── 11. 翡翠青（清新自然） ── */
[data-skin="emerald-teal"] {
    --skin-primary: #0d9488;
    --skin-primary-hover: #0f766e;
    --skin-primary-light: #f0fdfa;
    --skin-primary-rgb: 13, 148, 136;
    --skin-accent: #14b8a6;
    --skin-accent-hover: #0d9488;
    --skin-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(13,148,136,0.1) 0%, rgba(20,184,166,0.1) 100%);
    --skin-hero-bg: #071a18;
    --skin-hero-glow: rgba(20,184,166,0.3);
    --skin-hero-pattern: rgba(45,212,191,0.08);
    --skin-badge-bg: rgba(20,184,166,0.15);
    --skin-badge-border: rgba(45,212,191,0.3);
    --skin-badge-text: #2dd4bf;
    --skin-card-accent: #0d9488;
}

/* ── 12. 靛蓝（深邃专业） ── */
[data-skin="indigo-blue"] {
    --skin-primary: #4338ca;
    --skin-primary-hover: #3730a3;
    --skin-primary-light: #eef2ff;
    --skin-primary-rgb: 67, 56, 202;
    --skin-accent: #6366f1;
    --skin-accent-hover: #4f46e5;
    --skin-gradient: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(67,56,202,0.1) 0%, rgba(99,102,241,0.1) 100%);
    --skin-hero-bg: #0a0a1a;
    --skin-hero-glow: rgba(99,102,241,0.3);
    --skin-hero-pattern: rgba(129,140,248,0.08);
    --skin-badge-bg: rgba(99,102,241,0.15);
    --skin-badge-border: rgba(129,140,248,0.3);
    --skin-badge-text: #818cf8;
    --skin-card-accent: #4338ca;
}

/* ── 13. 珊瑚橙（温暖亲切） ── */
[data-skin="coral-orange"] {
    --skin-primary: #f97316;
    --skin-primary-hover: #ea580c;
    --skin-primary-light: #fff7ed;
    --skin-primary-rgb: 249, 115, 22;
    --skin-accent: #fb923c;
    --skin-accent-hover: #f97316;
    --skin-gradient: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(251,146,60,0.1) 100%);
    --skin-hero-bg: #1a0f07;
    --skin-hero-glow: rgba(251,146,60,0.3);
    --skin-hero-pattern: rgba(253,186,116,0.08);
    --skin-badge-bg: rgba(251,146,60,0.15);
    --skin-badge-border: rgba(253,186,116,0.3);
    --skin-badge-text: #fdba74;
    --skin-card-accent: #f97316;
}

/* ── 14. 薄荷绿（清爽宜人） ── */
[data-skin="mint-green"] {
    --skin-primary: #10b981;
    --skin-primary-hover: #059669;
    --skin-primary-light: #ecfdf5;
    --skin-primary-rgb: 16, 185, 129;
    --skin-accent: #34d399;
    --skin-accent-hover: #10b981;
    --skin-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(52,211,153,0.1) 100%);
    --skin-hero-bg: #071a14;
    --skin-hero-glow: rgba(52,211,153,0.3);
    --skin-hero-pattern: rgba(110,231,183,0.08);
    --skin-badge-bg: rgba(52,211,153,0.15);
    --skin-badge-border: rgba(110,231,183,0.3);
    --skin-badge-text: #6ee7b7;
    --skin-card-accent: #10b981;
}

/* ── 15. 薰衣草紫（浪漫优雅） ── */
[data-skin="lavender"] {
    --skin-primary: #8b5cf6;
    --skin-primary-hover: #7c3aed;
    --skin-primary-light: #f5f3ff;
    --skin-primary-rgb: 139, 92, 246;
    --skin-accent: #a78bfa;
    --skin-accent-hover: #8b5cf6;
    --skin-gradient: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(139,92,246,0.1) 0%, rgba(167,139,250,0.1) 100%);
    --skin-hero-bg: #100d1a;
    --skin-hero-glow: rgba(167,139,250,0.3);
    --skin-hero-pattern: rgba(196,181,253,0.08);
    --skin-badge-bg: rgba(167,139,250,0.15);
    --skin-badge-border: rgba(196,181,253,0.3);
    --skin-badge-text: #c4b5fd;
    --skin-card-accent: #8b5cf6;
}

/* ── 16. 钢蓝（坚固可靠） ── */
[data-skin="steel-blue"] {
    --skin-primary: #2563eb;
    --skin-primary-hover: #1d4ed8;
    --skin-primary-light: #eff6ff;
    --skin-primary-rgb: 37, 99, 235;
    --skin-accent: #3b82f6;
    --skin-accent-hover: #2563eb;
    --skin-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --skin-gradient-subtle: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(59,130,246,0.1) 100%);
    --skin-hero-bg: #0a0f1e;
    --skin-hero-glow: rgba(59,130,246,0.35);
    --skin-hero-pattern: rgba(96,165,250,0.08);
    --skin-badge-bg: rgba(59,130,246,0.15);
    --skin-badge-border: rgba(96,165,250,0.3);
    --skin-badge-text: #60a5fa;
    --skin-card-accent: #2563eb;
}

/* ============================================
   皮肤切换动画
   ============================================ */
.skin-transitioning * {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* 皮肤预览卡片 */
.skin-preview-card {
    position: relative;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.skin-preview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.skin-preview-card.active {
    border-color: var(--skin-primary);
    box-shadow: 0 0 0 3px rgba(var(--skin-primary-rgb), 0.3);
}

.skin-preview-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.skin-preview-body {
    padding: 12px;
    background: #fff;
}

.skin-preview-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.skin-preview-desc {
    font-size: 12px;
    color: #6b7280;
}

.skin-preview-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.9);
    color: #059669;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
}