/* ============================================================
   themes.css - 前台四套UI主题
   dys  默认主题：黑金电竞
   yqxt 游趣系统：品牌蓝 · 圆润轻盈
   fqy  仿晴远：深黑导航 · 锐利金黄
   mgs  仿怪蛋：柔紫 · 大圆角
   ============================================================ */

/* ---------- 导航栏颜色由后台主题配置驱动（四套通用） ---------- */
.bottom-nav {
  background: var(--nav-bg, #FFFFFF);
  border-top-color: var(--color-gray-border);
}
.nav-item { color: var(--nav-text-muted, #999999); }
.nav-item.active { color: var(--nav-text, #1A1A1A); }

/* ---------- 默认主题 dys ---------- */
html[data-theme="dys"] {
  --color-black: #1A1A1A;
  --color-black-light: #2D2D2D;
}

/* ============================================================
   主题一：游趣系统（蓝白 · 圆润）
   ============================================================ */
html[data-theme="yqxt"] {
  --color-black: #0F172A;
  --color-black-light: #1E293B;
  --color-white: #FFFFFF;
  --color-gray-bg: #F5F7FB;
  --color-gray-border: #E6EDF7;
  --color-gray-text: #8A99AD;
  --color-text-main: #1F2937;
  --color-text-secondary: #5B6B82;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(22,119,255,0.06);
  --shadow-md: 0 6px 18px rgba(22,119,255,0.10);
  --shadow-lg: 0 10px 28px rgba(22,119,255,0.14);
}

html[data-theme="yqxt"] .home-header {
  background: #FFFFFF;
  border-bottom: 1px solid #EAF1FB;
}
html[data-theme="yqxt"] .home-logo { color: var(--color-primary); letter-spacing: 0.5px; }
html[data-theme="yqxt"] .home-search-wrap { background: #F0F5FF; }
html[data-theme="yqxt"] .home-search-wrap .search-icon { color: #8A99AD; }
html[data-theme="yqxt"] .home-search-wrap input { color: #1F2937; }
html[data-theme="yqxt"] .home-search-wrap input::placeholder { color: #9AAAC0; }
html[data-theme="yqxt"] .home-msg-icon { color: #0F172A; }

html[data-theme="yqxt"] .btn-primary {
  background: linear-gradient(135deg, #4096FF 0%, #1677FF 100%);
  color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(22,119,255,0.24);
}
html[data-theme="yqxt"] .btn-dark {
  background: var(--color-primary);
  color: #FFFFFF;
}
html[data-theme="yqxt"] .btn-outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

html[data-theme="yqxt"] .notice-bar { background: #EAF2FF; }
html[data-theme="yqxt"] .notice-icon { color: #1677FF; }
html[data-theme="yqxt"] .notice-text { color: #1D4ED8; }
html[data-theme="yqxt"] .notice-more { color: #93A7C4; }

html[data-theme="yqxt"] .category-tabs { background: #FFFFFF; }
html[data-theme="yqxt"] .category-tab {
  background: #F0F5FF;
  color: #5B6B82;
  border: 1px solid transparent;
}
html[data-theme="yqxt"] .category-tab.active {
  background: #1677FF;
  color: #FFFFFF;
  border-color: #1677FF;
  box-shadow: 0 3px 8px rgba(22,119,255,0.25);
}

html[data-theme="yqxt"] .tag-dark { background: #EAF2FF; color: #1677FF; }
html[data-theme="yqxt"] .tag-dark-active { background: #1677FF; color: #FFFFFF; border-color: #1677FF; }
html[data-theme="yqxt"] .tag-dark-inactive { background: #FFFFFF; color: #5B6B82; border-color: #DCE8FA; }

html[data-theme="yqxt"] .card,
html[data-theme="yqxt"] .product-card,
html[data-theme="yqxt"] .profile-card,
html[data-theme="yqxt"] .order-card {
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(22,119,255,0.06);
}
html[data-theme="yqxt"] .product-card-image { background: #F0F5FF; }
html[data-theme="yqxt"] .product-card-cart { background: #1677FF; }
html[data-theme="yqxt"] .product-card-cart svg { color: #FFFFFF; }

html[data-theme="yqxt"] .profile-card--user {
  background: linear-gradient(135deg, #1677FF 0%, #3B8BFF 100%);
}
html[data-theme="yqxt"] .profile-username { color: #FFFFFF; }
html[data-theme="yqxt"] .profile-userid { color: rgba(255,255,255,0.72); }
html[data-theme="yqxt"] .profile-avatar { border-color: rgba(255,255,255,0.65); }
html[data-theme="yqxt"] .profile-action-btn { color: #FFFFFF; }

html[data-theme="yqxt"] .banner-placeholder,
html[data-theme="yqxt"] .comm-banner-ph,
html[data-theme="yqxt"] .live-cover-default {
  background: linear-gradient(135deg, #0B2E6F 0%, #1677FF 100%);
}
html[data-theme="yqxt"] .vip-hero { background: linear-gradient(135deg, #0F172A 0%, #1677FF 100%); }
html[data-theme="yqxt"] .boss-hero { background: linear-gradient(135deg, #0B2E6F 0%, #2F80FF 60%, #69B1FF 100%); }
html[data-theme="yqxt"] .invite-hero { background: linear-gradient(135deg, #1677FF 0%, #69B1FF 100%); }
html[data-theme="yqxt"] .nb-hero { background: linear-gradient(135deg, #0B2E6F 0%, #1677FF 100%); }
html[data-theme="yqxt"] .first-charge-banner { background: linear-gradient(135deg, #1677FF 0%, #4096FF 100%); }

html[data-theme="yqxt"] .page-header { background: #FFFFFF; border-bottom: 1px solid #EEF3FA; }
html[data-theme="yqxt"] .section-title .title-bar { background: #1677FF; }

/* ============================================================
   主题二：仿晴远（黑金 · 直角硬朗）
   ============================================================ */
html[data-theme="fqy"] {
  --color-black: #1A1A1A;
  --color-black-light: #262626;
  --color-gray-bg: #F5F6F8;
  --color-gray-border: #E4E4E4;
  --color-gray-text: #999999;
  --color-text-main: #222222;
  --color-text-secondary: #666666;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: none;
  --shadow-md: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
}

html[data-theme="fqy"] .bottom-nav {
  background: var(--nav-bg);
  border-top: none;
  box-shadow: 0 -1px 0 rgba(255,215,0,0.18);
}
html[data-theme="fqy"] .nav-item { color: var(--nav-text-muted); }
html[data-theme="fqy"] .nav-item.active { color: var(--nav-text); }
html[data-theme="fqy"] .nav-item.active .nav-icon { transform: translateY(-1px); }

html[data-theme="fqy"] .home-header { background: #1A1A1A; }
html[data-theme="fqy"] .home-search-wrap { background: rgba(255,255,255,0.07); border-radius: 2px; }
html[data-theme="fqy"] .home-search-wrap .search-icon { color: rgba(255,255,255,0.45); }
html[data-theme="fqy"] .home-search-wrap input::placeholder { color: rgba(255,255,255,0.38); }

html[data-theme="fqy"] .btn-primary {
  background: linear-gradient(135deg, #FFD700 0%, #F0C400 100%);
  color: #1A1A1A;
  border-radius: 3px;
}
html[data-theme="fqy"] .btn-dark,
html[data-theme="fqy"] .btn-outline { border-radius: 3px; }

html[data-theme="fqy"] .notice-bar { background: #1A1A1A; }
html[data-theme="fqy"] .notice-icon { color: #FFD700; }
html[data-theme="fqy"] .notice-text { color: #FFD700; }
html[data-theme="fqy"] .notice-more { color: rgba(255,255,255,0.45); }

html[data-theme="fqy"] .category-tab {
  background: #EFEFEF;
  color: #666666;
  border: 1px solid transparent;
  border-radius: 3px;
}
html[data-theme="fqy"] .category-tab.active {
  background: #1A1A1A;
  color: #FFD700;
  border-color: #FFD700;
}

html[data-theme="fqy"] .tag { border-radius: 2px; }
html[data-theme="fqy"] .tag-dark { background: #1A1A1A; color: #FFD700; }
html[data-theme="fqy"] .tag-dark-active { background: #1A1A1A; color: #FFD700; border-color: #FFD700; }
html[data-theme="fqy"] .tag-dark-inactive { background: #FFFFFF; color: #666666; border-color: #DDDDDD; }

html[data-theme="fqy"] .card,
html[data-theme="fqy"] .product-card,
html[data-theme="fqy"] .profile-card,
html[data-theme="fqy"] .order-card {
  border-radius: 4px;
  border: 1px solid #EAEAEA;
  box-shadow: none;
}
html[data-theme="fqy"] .product-card-cart { background: #1A1A1A; border-radius: 4px; }
html[data-theme="fqy"] .product-card-cart svg { color: #FFD700; }

html[data-theme="fqy"] .profile-card--user {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%);
}
html[data-theme="fqy"] .profile-action-btn { border-radius: 3px; }

html[data-theme="fqy"] .banner-placeholder,
html[data-theme="fqy"] .comm-banner-ph,
html[data-theme="fqy"] .live-cover-default {
  background: linear-gradient(135deg, #1A1A1A 0%, #3A2F10 100%);
}
html[data-theme="fqy"] .vip-hero { background: linear-gradient(135deg, #1A1A1A 0%, #3A2A0A 100%); }
html[data-theme="fqy"] .boss-hero { background: linear-gradient(135deg, #1A1A1A 0%, #3A2A0A 100%); }
html[data-theme="fqy"] .invite-hero { background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%); }
html[data-theme="fqy"] .nb-hero { background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%); }
html[data-theme="fqy"] .first-charge-banner { background: linear-gradient(135deg, #2D2D2D, #1A1A1A); }

html[data-theme="fqy"] .page-header { border-bottom: 1px solid #E4E4E4; }
html[data-theme="fqy"] .section-title .title-bar { background: #FFD700; }

/* ============================================================
   主题三：仿怪蛋（柔紫 · 大圆角）
   ============================================================ */
html[data-theme="mgs"] {
  --color-black: #241F3D;
  --color-black-light: #332B52;
  --color-gray-bg: #FFFFFF;
  --color-gray-border: #EFECFA;
  --color-gray-text: #9B94B8;
  --color-text-main: #2B2547;
  --color-text-secondary: #6F6890;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 4px 16px rgba(108,92,231,0.08);
  --shadow-md: 0 8px 24px rgba(108,92,231,0.12);
  --shadow-lg: 0 12px 32px rgba(108,92,231,0.16);
}

html[data-theme="mgs"] body,
html[data-theme="mgs"] #app { background: #FFFFFF; }

html[data-theme="mgs"] .home-header {
  background: #FFFFFF;
  border-bottom: 1px solid #F3F0FF;
}
html[data-theme="mgs"] .home-logo { color: var(--color-primary); }
html[data-theme="mgs"] .home-search-wrap { background: #F5F2FF; }
html[data-theme="mgs"] .home-search-wrap .search-icon { color: #A79FC6; }
html[data-theme="mgs"] .home-search-wrap input { color: #2B2547; }
html[data-theme="mgs"] .home-search-wrap input::placeholder { color: #A79FC6; }
html[data-theme="mgs"] .home-msg-icon { color: #6C5CE7; }

html[data-theme="mgs"] .bottom-nav {
  border-top: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 24px rgba(108,92,231,0.10);
}
html[data-theme="mgs"] .nav-item.active .nav-icon {
  background: #F1EEFF;
  border-radius: 10px;
  padding: 2px 8px;
  height: 26px;
}

html[data-theme="mgs"] .btn-primary {
  background: linear-gradient(135deg, #7C6BFF 0%, #6C5CE7 100%);
  color: #FFFFFF;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(108,92,231,0.28);
}
html[data-theme="mgs"] .btn-dark { background: #6C5CE7; color: #FFFFFF; border-radius: 999px; }
html[data-theme="mgs"] .btn-outline { border-color: #6C5CE7; color: #6C5CE7; border-radius: 999px; }

html[data-theme="mgs"] .notice-bar { background: #F3F0FF; border-radius: 0; }
html[data-theme="mgs"] .notice-icon { color: #6C5CE7; }
html[data-theme="mgs"] .notice-text { color: #5B4BD6; }
html[data-theme="mgs"] .notice-more { color: #A79FC6; }

html[data-theme="mgs"] .category-tab {
  background: #F4F1FF;
  color: #7A7299;
  border: 1px solid transparent;
}
html[data-theme="mgs"] .category-tab.active {
  background: #6C5CE7;
  color: #FFFFFF;
  border-color: #6C5CE7;
  box-shadow: 0 4px 12px rgba(108,92,231,0.28);
}

html[data-theme="mgs"] .tag-dark { background: #F3F0FF; color: #6C5CE7; }
html[data-theme="mgs"] .tag-dark-active { background: #6C5CE7; color: #FFFFFF; border-color: #6C5CE7; }
html[data-theme="mgs"] .tag-dark-inactive { background: #FFFFFF; color: #7A7299; border-color: #E8E2FF; }

html[data-theme="mgs"] .card,
html[data-theme="mgs"] .product-card,
html[data-theme="mgs"] .profile-card,
html[data-theme="mgs"] .order-card {
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(108,92,231,0.08);
}
html[data-theme="mgs"] .product-card-image { background: #F7F5FF; }
html[data-theme="mgs"] .product-card-cart { background: #6C5CE7; border-radius: 999px; }
html[data-theme="mgs"] .product-card-cart svg { color: #FFFFFF; }

html[data-theme="mgs"] .profile-card--user {
  background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
}
html[data-theme="mgs"] .profile-username { color: #FFFFFF; }
html[data-theme="mgs"] .profile-userid { color: rgba(255,255,255,0.78); }
html[data-theme="mgs"] .profile-avatar { border-color: rgba(255,255,255,0.7); }
html[data-theme="mgs"] .profile-action-btn { color: #FFFFFF; border-radius: 999px; }
html[data-theme="mgs"] .profile-grid { background: #FFFFFF; }

html[data-theme="mgs"] .banner-placeholder,
html[data-theme="mgs"] .comm-banner-ph,
html[data-theme="mgs"] .live-cover-default {
  background: linear-gradient(135deg, #4B3FC4 0%, #A29BFE 100%);
}
html[data-theme="mgs"] .vip-hero { background: linear-gradient(135deg, #4B3FC4 0%, #A29BFE 100%); }
html[data-theme="mgs"] .boss-hero { background: linear-gradient(135deg, #3A2E96 0%, #6C5CE7 60%, #A29BFE 100%); }
html[data-theme="mgs"] .invite-hero { background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%); }
html[data-theme="mgs"] .nb-hero { background: linear-gradient(135deg, #4B3FC4 0%, #6C5CE7 100%); }
html[data-theme="mgs"] .first-charge-banner { background: linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%); }

html[data-theme="mgs"] .page-header { border-bottom: 1px solid #F3F0FF; }
html[data-theme="mgs"] .section-title .title-bar { background: #6C5CE7; border-radius: 999px; }

/* ---------- 通用：把硬编码的黑金渐变统一到主题主色 ---------- */
.message-avatar.type-activity {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.message-avatar.type-order {
  background: linear-gradient(135deg, var(--color-black) 0%, var(--color-black-light) 100%);
}
.vip-badge,
.fav-cart-btn,
.nb-fc-percent {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
html[data-theme="yqxt"] .vip-badge,
html[data-theme="yqxt"] .fav-cart-btn,
html[data-theme="yqxt"] .nb-fc-percent,
html[data-theme="mgs"] .vip-badge,
html[data-theme="mgs"] .fav-cart-btn,
html[data-theme="mgs"] .nb-fc-percent { color: #FFFFFF; }