/*
 * AI Mirror Station - CYBER HOLOGRAM THEME
 * 赛博全息 · 深空霓虹 · 视觉爆改
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

/* ===== 核心变量 ===== */
:root {
  --neon-purple: #D946EF;
  --neon-purple-glow: rgba(217, 70, 239, 0.5);
  --neon-cyan: #22D3EE;
  --neon-cyan-glow: rgba(34, 211, 238, 0.4);
  --neon-blue: #3B82F6;
  --accent-green: #22C55E;
  --bg-void: #02040A;
  --bg-panel: rgba(8, 8, 18, 0.7);
  --bg-card: rgba(12, 12, 28, 0.6);
  --bg-input: rgba(0, 0, 0, 0.4);
  --border-dim: rgba(255, 255, 255, 0.06);
  --border-glow: rgba(34, 211, 238, 0.25);
  --text-main: #F1F5F9;
  --text-sub: #CBD5E1;
  --text-mute: #64748B;
  --font-tech: 'Space Grotesk', ui-monospace, monospace;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --radius: 12px;
  --el-color-primary: #D946EF !important;
}

/* ===== 全局 ===== */
* { scrollbar-width: thin; scrollbar-color: var(--neon-purple) transparent; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neon-purple); border-radius: 10px; }

body {
  background: var(--bg-void) !important;
  color: var(--text-main) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 极光背景 */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, rgba(217, 70, 239, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(34, 211, 238, 0.1), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(59, 130, 246, 0.06), transparent 50%);
  pointer-events: none; z-index: 0;
  animation: aurora-drift 12s ease-in-out infinite alternate;
}

/* 扫描线纹理 */
body::after {
  content: '';
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 4px);
  pointer-events: none; z-index: 1; opacity: 0.5;
}

@keyframes aurora-drift {
  0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
  100% { transform: scale(1.1) translate(20px, -15px); opacity: 1; }
}

a { color: var(--neon-cyan); }
a:hover { color: var(--neon-purple); }

/* ===== 侧边栏：光刃设计 ===== */
.default-layout .left {
  background: linear-gradient(180deg, rgba(2,4,10,0.95) 0%, rgba(8,8,20,0.85) 50%, rgba(2,4,10,0.95) 100%) !important;
  border-right: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* 右侧发光线 */
.default-layout .left::after {
  content: '';
  position: absolute; top: 0; right: -1px; width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 5%, var(--neon-cyan) 30%, var(--neon-purple) 70%, transparent 95%);
  box-shadow: 0 0 12px var(--neon-cyan-glow), 0 0 30px rgba(217, 70, 239, 0.15);
  z-index: 10;
}

/* 顶部光晕 */
.default-layout .left::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 100px;
  background: radial-gradient(ellipse at 50% 0%, rgba(217, 70, 239, 0.15), transparent 80%);
  pointer-events: none; z-index: 1;
}

.default-layout .logo-box {
  border-bottom: 1px solid var(--border-dim) !important;
  background: transparent !important;
  padding: 16px !important;
}

.default-layout .logo-box span {
  font-family: var(--font-tech) !important;
  font-weight: 700 !important; font-size: 18px !important;
  background: linear-gradient(90deg, #fff 0%, var(--neon-cyan) 25%, var(--neon-purple) 50%, var(--neon-cyan) 75%, #fff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-shadow: none;
  animation: logo-text-breathe 4s ease-in-out infinite;
}
@keyframes logo-text-breathe {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.default-layout .menu-list {
  background: transparent !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Gemini 排到菜单第一位（第6个子元素） */
.default-layout .menu-list > :nth-child(6) { order: -1 !important; }

.default-layout .menu-item {
  color: var(--text-mute) !important;
  border-radius: 6px !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  margin: 3px 8px !important; padding: 10px 14px !important;
  background: transparent !important;
  position: relative !important; overflow: hidden !important;
  border: 1px solid transparent !important;
}

.default-layout .menu-item:hover {
  color: var(--text-main) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transform: translateX(4px) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.default-layout .menu-item.menu-active,
.default-layout .menu-active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), transparent) !important;
  border-left: 3px solid var(--neon-cyan) !important;
  box-shadow: inset 12px 0 20px -8px rgba(34, 211, 238, 0.15), 0 0 15px rgba(34, 211, 238, 0.08) !important;
  text-shadow: 0 0 8px var(--neon-cyan-glow);
}

.subscribe, .subscribe-mobile {
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)) !important;
  color: #fff !important; border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px var(--neon-purple-glow) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}
.subscribe:hover, .subscribe-mobile:hover {
  box-shadow: 0 6px 30px var(--neon-purple-glow), 0 0 50px rgba(217, 70, 239, 0.2) !important;
  transform: translateY(-2px) !important;
}
.subscribe span, .subscribe-mobile span { color: #fff !important; }

/* ===== 右侧内容区 ===== */
.default-layout .right { background: var(--bg-void) !important; }

/* ===== 头部栏：悬浮驾驶舱 ===== */
#app .head,
#app .logo-box,
#app .menu,
.car-list-page .head,
.default-layout .right .head,
.default-layout .right .menu,
.default-layout .left .logo-box {
  background: rgba(2, 4, 10, 0.92) !important;
  border: 1px solid var(--border-dim) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}
#app .head *, #app .logo-box *, #app .menu *, .car-list-page .head *, .default-layout .right .head * { color: var(--text-main) !important; }
#app .menu svg, .default-layout .right .menu svg { fill: var(--text-main) !important; }

/* 头部按钮：玻璃胶囊 */
.redeem-code, .system-notice, .notice-btn {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  background: rgba(8, 8, 18, 0.8) !important;
  color: var(--text-sub) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.redeem-code:hover, .system-notice:hover, .notice-btn:hover {
  border-color: var(--neon-purple) !important;
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.25) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  background: rgba(217, 70, 239, 0.06) !important;
}

/* ===== 模型卡片：能量方块 ===== */
.car-list-box { background: transparent !important; }

[class*="car-item"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important; overflow: hidden !important;
  animation: card-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 卡片交错入场动画 */
@keyframes card-pop-in {
  from { opacity: 0; transform: translateY(30px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
[class*="car-item"]:nth-child(1) { animation-delay: 0.03s; }
[class*="car-item"]:nth-child(2) { animation-delay: 0.06s; }
[class*="car-item"]:nth-child(3) { animation-delay: 0.09s; }
[class*="car-item"]:nth-child(4) { animation-delay: 0.12s; }
[class*="car-item"]:nth-child(5) { animation-delay: 0.15s; }
[class*="car-item"]:nth-child(6) { animation-delay: 0.18s; }
[class*="car-item"]:nth-child(7) { animation-delay: 0.21s; }
[class*="car-item"]:nth-child(8) { animation-delay: 0.24s; }
[class*="car-item"]:nth-child(9) { animation-delay: 0.27s; }
[class*="car-item"]:nth-child(10) { animation-delay: 0.30s; }
[class*="car-item"]:nth-child(11) { animation-delay: 0.33s; }
[class*="car-item"]:nth-child(12) { animation-delay: 0.36s; }
[class*="car-item"]:nth-child(13) { animation-delay: 0.39s; }
[class*="car-item"]:nth-child(14) { animation-delay: 0.42s; }
[class*="car-item"]:nth-child(15) { animation-delay: 0.45s; }
[class*="car-item"]:nth-child(16) { animation-delay: 0.48s; }
[class*="car-item"]:nth-child(17) { animation-delay: 0.51s; }
[class*="car-item"]:nth-child(18) { animation-delay: 0.54s; }
[class*="car-item"]:nth-child(19) { animation-delay: 0.57s; }
[class*="car-item"]:nth-child(20) { animation-delay: 0.60s; }
[class*="car-item"]:nth-child(n+21) { animation-delay: 0.63s; }

/* 扫描光效 */
[class*="car-item"]::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: skewX(-20deg);
  transition: 0s; pointer-events: none;
}
[class*="car-item"]:hover::before { left: 200%; transition: 0.8s ease-in-out; }

/* 顶部渐变光条 */
[class*="car-item"]::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}

[class*="car-item"]:hover {
  transform: translateY(-6px) scale(1.015) !important;
  border-color: var(--neon-cyan) !important;
  background: rgba(12, 12, 28, 0.85) !important;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,0.6), 0 0 25px rgba(34, 211, 238, 0.15), inset 0 0 0 1px rgba(34, 211, 238, 0.1) !important;
}
[class*="car-item"]:hover::after { opacity: 1; }

[class*="car-item"] * { color: var(--text-main) !important; }
[class*="car-item"] .brand { background: rgba(0,0,0,0.4) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 8px !important; }
[class*="car-item"] .brand.active { box-shadow: 0 0 12px rgba(34, 211, 238, 0.2) !important; border-color: var(--neon-cyan) !important; }
[class*="car-item"] .plus { background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)) !important; border-radius: 4px !important; }
[class*="car-item"] .state { background: #000 !important; border: 1px solid var(--neon-blue) !important; color: var(--neon-blue) !important; border-radius: 6px !important; }
[class*="car-item"] .percent, .percent { color: var(--neon-cyan) !important; background: transparent !important; }
[class*="car-item"] .prefix-icon, .prefix-icon { background: transparent !important; }
[class*="car-item"] .chatgpt { background: linear-gradient(135deg, rgba(217, 70, 239, 0.08), rgba(34, 211, 238, 0.05)) !important; }

.search-button { background: rgba(255,255,255,0.04) !important; border: 1px solid var(--border-dim) !important; border-radius: 20px !important; transition: all 0.3s !important; }
.search-button:hover { border-color: var(--neon-purple) !important; box-shadow: 0 0 15px rgba(217, 70, 239, 0.2) !important; }

/* ===== 登录页：Neural Nexus · AI 星云门户 (ui-ux-pro-max v2) ===== */

/* 深空背景 + 极光 */
.user-login {
  background: #030014 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
}

/* 极光层1：紫蓝星云 */
.user-login::before {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background:
    radial-gradient(ellipse 50% 80% at 20% 50%, rgba(120, 40, 200, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(34, 211, 238, 0.25), transparent 50%),
    radial-gradient(ellipse 40% 60% at 60% 80%, rgba(217, 70, 239, 0.2), transparent 50%),
    radial-gradient(ellipse 80% 40% at 40% 30%, rgba(59, 130, 246, 0.15), transparent 60%);
  animation: aurora-drift 20s ease-in-out infinite alternate;
  pointer-events: none; z-index: 0;
}

/* 极光层2：流动光带 */
.user-login::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background:
    conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(217, 70, 239, 0.06) 60deg, transparent 120deg, rgba(34, 211, 238, 0.08) 200deg, transparent 260deg, rgba(120, 40, 200, 0.05) 320deg, transparent 360deg);
  animation: aurora-rotate 30s linear infinite;
  pointer-events: none; z-index: 0;
  filter: blur(60px);
}

@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); filter: hue-rotate(0deg); }
  33% { transform: translate(5%, -3%) scale(1.05); }
  66% { transform: translate(-3%, 5%) scale(0.98); }
  100% { transform: translate(2%, -2%) scale(1.02); filter: hue-rotate(30deg); }
}
@keyframes aurora-rotate {
  0% { transform: rotate(0deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1.5); }
}

/* 星尘微粒（纯CSS） */
.user-login .background-img {
  opacity: 0 !important;
  position: absolute !important; top: 0; left: 0; width: 100%; height: 100%;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 30% 70%, rgba(34,211,238,0.5), transparent),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(217,70,239,0.5), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(34,211,238,0.4), transparent),
    radial-gradient(1.5px 1.5px at 15% 90%, rgba(217,70,239,0.3), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 45% 55%, rgba(59,130,246,0.4), transparent),
    radial-gradient(1.5px 1.5px at 65% 95%, rgba(34,211,238,0.3), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(255,255,255,0.3), transparent) !important;
  background-size: 100% 100% !important;
  animation: stars-twinkle 8s ease-in-out infinite alternate !important;
  z-index: 0 !important;
}
@keyframes stars-twinkle {
  0% { opacity: 0.4 !important; }
  50% { opacity: 0.7 !important; }
  100% { opacity: 0.5 !important; }
}

/* 液态熔岩灯：三层 SVG metaball 纵深效果 */
.user-login .sub-content {
  position: relative !important; z-index: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 400px !important;
  overflow: hidden !important;
  background-color: #030014 !important;
  /* 第2层（中景）：中等模糊 stdDeviation=16，6球 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='g2'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='16' result='b'/%3E%3CfeColorMatrix in='b' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -9' result='g'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g2)'%3E%3Ccircle cx='120' cy='150' r='58' fill='%234285F4'%3E%3Canimate attributeName='cy' values='150;350;200;450;150' dur='13s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='120;280;180;320;120' dur='17s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='58;68;50;58' dur='9s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='300' cy='400' r='52' fill='%23D946EF'%3E%3Canimate attributeName='cy' values='400;150;350;100;400' dur='15s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='300;150;250;100;300' dur='11s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='52;60;45;52' dur='8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='200' cy='280' r='55' fill='%2322D3EE'%3E%3Canimate attributeName='cy' values='280;100;450;200;280' dur='14s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='200;320;130;280;200' dur='16s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='55;48;63;55' dur='10s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='80' cy='450' r='48' fill='%23E87461'%3E%3Canimate attributeName='cy' values='450;200;350;100;450' dur='16s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='80;250;150;320;80' dur='13s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='48;56;42;48' dur='7s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='320' cy='180' r='50' fill='%23D4A030'%3E%3Canimate attributeName='cy' values='180;400;250;500;180' dur='18s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='320;120;280;80;320' dur='14s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='50;58;44;50' dur='11s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='180' cy='500' r='45' fill='%233BAF75'%3E%3Canimate attributeName='cy' values='500;200;400;100;500' dur='12s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='180;300;100;260;180' dur='15s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='45;55;40;45' dur='8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 70% at 30% 40%, rgba(120, 40, 200, 0.25), transparent 60%),
    radial-gradient(ellipse 60% 80% at 70% 70%, rgba(34, 211, 238, 0.15), transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 20%, rgba(59, 130, 246, 0.12), transparent 50%) !important;
  background-size: cover, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.user-login .sub-content img,
.user-login .sub-content picture,
.user-login .sub-content video {
  display: none !important;
}
/* 第1层（前景）：最清晰 stdDeviation=8，4球，较小较快 */
.user-login .sub-content::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='g1'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='8' result='b'/%3E%3CfeColorMatrix in='b' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -9' result='g'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g1)'%3E%3Ccircle cx='160' cy='200' r='40' fill='%234285F4'%3E%3Canimate attributeName='cy' values='200;400;150;350;200' dur='10s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='160;300;100;250;160' dur='12s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='40;48;35;40' dur='7s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='280' cy='350' r='38' fill='%23D946EF'%3E%3Canimate attributeName='cy' values='350;120;400;180;350' dur='11s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='280;130;300;170;280' dur='9s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='38;45;32;38' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='100' cy='450' r='35' fill='%2322D3EE'%3E%3Canimate attributeName='cy' values='450;180;300;100;450' dur='12s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='100;280;200;320;100' dur='14s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='35;42;30;35' dur='8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='320' cy='130' r='36' fill='%23E87461'%3E%3Canimate attributeName='cy' values='130;380;250;480;130' dur='13s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='320;100;260;150;320' dur='10s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='36;44;30;36' dur='7s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-position: center !important;
  pointer-events: none !important; z-index: 3 !important;
}
/* 第3层（远景）：最模糊 stdDeviation=28，4球，较大较慢，低透明度 */
.user-login .sub-content::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='g3'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='28' result='b'/%3E%3CfeColorMatrix in='b' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7' result='g'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23g3)'%3E%3Ccircle cx='100' cy='300' r='80' fill='%234285F4' opacity='0.7'%3E%3Canimate attributeName='cy' values='300;500;200;400;300' dur='22s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='100;300;200;350;100' dur='25s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='80;95;70;80' dur='15s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='320' cy='200' r='75' fill='%23D946EF' opacity='0.6'%3E%3Canimate attributeName='cy' values='200;450;150;380;200' dur='20s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='320;100;250;150;320' dur='23s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='75;90;65;75' dur='13s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='200' cy='480' r='70' fill='%2322D3EE' opacity='0.5'%3E%3Canimate attributeName='cy' values='480;150;350;100;480' dur='24s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='200;350;120;300;200' dur='19s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='70;85;60;70' dur='14s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='250' cy='100' r='72' fill='%23D4A030' opacity='0.5'%3E%3Canimate attributeName='cy' values='100;400;250;500;100' dur='26s' repeatCount='indefinite'/%3E%3Canimate attributeName='cx' values='250;80;320;150;250' dur='21s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='72;88;62;72' dur='16s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.5 !important;
  pointer-events: none !important; z-index: 0 !important;
}

@keyframes sub-breathe {
  0% { opacity: 0.3; transform: scale(0.95); }
  100% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes aurora-a {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33% { transform: translate(40px, -30px) scale(1.15); opacity: 0.9; }
  66% { transform: translate(-20px, 40px) scale(0.9); opacity: 0.6; }
  100% { transform: translate(30px, 10px) scale(1.1); opacity: 0.8; }
}
@keyframes aurora-b {
  0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33% { transform: translate(-35px, 25px) scale(1.2); opacity: 0.8; }
  66% { transform: translate(25px, -35px) scale(0.85); opacity: 0.7; }
  100% { transform: translate(-15px, -20px) scale(1.05); opacity: 0.9; }
}

/* ===== 登录卡片：玻璃星门 ===== */
.user-login .layout-box, .user-login .login-box, .user-login .login-card {
  background: rgba(10, 5, 30, 0.55) !important;
  backdrop-filter: blur(40px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(120, 40, 200, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(120, 40, 200, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 60px rgba(120, 40, 200, 0.03) !important;
  position: relative !important; z-index: 2 !important;
  animation: card-materialize 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  overflow: hidden !important;
}

/* 卡片顶部渐变光带 */
.user-login .content {
  position: relative !important;
}
.user-login .content::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--neon-cyan) 15%,
    var(--neon-purple) 50%,
    var(--neon-blue) 85%,
    transparent 100%);
  background-size: 200% 100%;
  z-index: 10;
  animation: border-shimmer 4s ease-in-out infinite;
}
.user-login .content::after {
  content: '';
  position: absolute; top: 0; left: 50%; width: 80%; height: 80px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(120, 40, 200, 0.15), transparent);
  pointer-events: none; z-index: 0;
  border-radius: 0 0 50% 50%;
}

@keyframes card-materialize {
  0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes border-shimmer {
  0%, 100% { background-position: -200% 0; opacity: 0.6; }
  50% { background-position: 200% 0; opacity: 1; }
}

/* ===== 标题：星云渐变字 ===== */
.user-login .title, .user-login h1 {
  background: linear-gradient(135deg, #fff 0%, var(--neon-cyan) 40%, var(--neon-purple) 70%, #fff 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: 'Space Grotesk', var(--font-tech) !important;
  font-weight: 700 !important; font-size: 30px !important;
  letter-spacing: 3px !important;
  animation: title-gradient 6s ease-in-out infinite !important;
  text-shadow: none !important;
}
@keyframes title-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.user-login .welcome {
  color: rgba(200, 200, 255, 0.5) !important;
  font-family: var(--font-tech) !important;
  letter-spacing: 6px !important; font-size: 11px !important;
  text-transform: uppercase !important;
}

/* 标签 */
.user-login .label {
  color: rgba(200, 200, 255, 0.6) !important; background: transparent !important;
  font-family: var(--font-tech) !important; font-size: 12px !important;
  letter-spacing: 1.5px !important; text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ===== 输入框：量子通道 ===== */
.user-login .input-item { position: relative !important; }
.user-login input {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 15px 20px !important;
  font-family: var(--font-body) !important; font-size: 15px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  letter-spacing: 0.5px !important;
}
.user-login input::placeholder {
  color: rgba(150, 150, 200, 0.35) !important;
  font-family: var(--font-body) !important;
}
.user-login input:focus {
  border-color: rgba(120, 40, 200, 0.5) !important;
  background: rgba(120, 40, 200, 0.06) !important;
  box-shadow:
    0 0 0 3px rgba(120, 40, 200, 0.12),
    0 0 30px rgba(120, 40, 200, 0.08),
    inset 0 0 20px rgba(120, 40, 200, 0.03) !important;
  color: #fff !important;
}

/* 忘记密码 */
.user-login .suffix {
  color: rgba(200, 200, 255, 0.4) !important; font-size: 12px !important;
  font-family: var(--font-body) !important; letter-spacing: 0.5px !important;
  transition: all 0.3s !important;
}
.user-login .suffix:hover {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 12px var(--neon-cyan-glow);
}

/* ===== 登录按钮：星门脉冲 ===== */
.user-login .submit-btn {
  background: linear-gradient(135deg, rgba(120, 40, 200, 0.9), rgba(34, 211, 238, 0.7), rgba(59, 130, 246, 0.8)) !important;
  background-size: 200% 200% !important;
  border: none !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 600 !important; font-family: var(--font-tech) !important;
  letter-spacing: 3px !important; font-size: 14px !important;
  text-transform: uppercase !important;
  position: relative !important; overflow: hidden !important;
  box-shadow: 0 4px 25px rgba(120, 40, 200, 0.35), 0 0 60px rgba(120, 40, 200, 0.1) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: btn-gradient-flow 5s ease-in-out infinite !important;
}
.user-login .submit-btn span { color: #fff !important; position: relative; z-index: 2; }

/* 按钮流光扫过 */
.user-login .submit-btn::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  animation: btn-sweep 3s ease-in-out infinite;
  z-index: 1;
}
/* 按钮底部光晕 */
.user-login .submit-btn::after {
  content: ''; position: absolute; bottom: -50%; left: 10%; width: 80%; height: 100%;
  background: radial-gradient(ellipse, rgba(120, 40, 200, 0.4), transparent 70%);
  filter: blur(20px); z-index: -1;
  transition: all 0.4s;
}

@keyframes btn-gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes btn-sweep {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.user-login .submit-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 40px rgba(120, 40, 200, 0.5), 0 0 80px rgba(34, 211, 238, 0.15) !important;
  filter: brightness(1.15) !important;
}
.user-login .submit-btn:hover span { color: #fff !important; }
.user-login .submit-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 快速使用按钮 */
.user-login .submit-btn-minor {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(200, 200, 255, 0.6) !important;
  border-radius: 14px !important;
  font-family: var(--font-tech) !important; letter-spacing: 2px !important;
  font-size: 12px !important; text-transform: uppercase !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(10px) !important;
}
.user-login .submit-btn-minor span { color: rgba(200, 200, 255, 0.6) !important; }
.user-login .submit-btn-minor:hover {
  border-color: rgba(120, 40, 200, 0.4) !important;
  background: rgba(120, 40, 200, 0.08) !important;
  color: #fff !important;
  box-shadow: 0 0 25px rgba(120, 40, 200, 0.15) !important;
}
.user-login .submit-btn-minor:hover span { color: #fff !important; }

/* 底部文字 */
.user-login .bottom-text-box {
  color: rgba(150, 150, 200, 0.4) !important;
  font-family: var(--font-body) !important; font-size: 13px !important;
  letter-spacing: 0.5px !important;
}
.user-login .bottom-text-box span, .user-login .register-hint span {
  color: rgba(120, 40, 200, 0.7) !important;
  transition: all 0.3s !important;
}
.user-login .bottom-text-box span:hover, .user-login .register-hint span:hover {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 12px var(--neon-cyan-glow);
}

.user-login .site-footer, .user-login .footer-content, .user-login .copyright {
  color: rgba(150, 150, 200, 0.25) !important; background: transparent !important;
}

/* ===== Element Plus 全局覆盖 ===== */

/* 按钮 */
.el-button {
  color: var(--text-main) !important; background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important; border-radius: 8px !important;
  transition: all 0.3s !important;
}
.el-button:hover { background: rgba(217, 70, 239, 0.08) !important; border-color: rgba(217, 70, 239, 0.3) !important; color: #fff !important; }

.el-button--primary {
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 3px 15px var(--neon-purple-glow) !important;
  position: relative !important; overflow: hidden !important;
}
.el-button--primary::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg); transition: 0.5s;
}
.el-button--primary:hover { box-shadow: 0 5px 25px var(--neon-purple-glow) !important; transform: translateY(-1px) !important; }
.el-button--primary:hover::before { left: 100%; }

/* 输入框 */
.el-input__wrapper, .el-select__wrapper {
  background: var(--bg-input) !important; border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius) !important; box-shadow: none !important; transition: all 0.3s !important;
}
.el-input__wrapper:hover, .el-select__wrapper:hover, .el-input__wrapper.is-focus {
  border-color: var(--neon-blue) !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.15) !important;
  background: rgba(59, 130, 246, 0.04) !important;
}
.el-input__inner, .el-select__input { color: var(--text-main) !important; }
.el-input__inner::placeholder { color: var(--text-mute) !important; }

/* 对话框：全息面板 */
.el-dialog {
  background: rgba(5, 5, 10, 0.92) !important;
  border: 1px solid var(--neon-purple) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.2), 0 0 60px rgba(217, 70, 239, 0.12), 0 30px 60px rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(30px) !important;
}
.el-dialog.is-fullscreen {
  background: rgba(2, 4, 10, 0.95) !important;
  overflow: auto !important;
  width: 100% !important;
  height: 100% !important;
}

.el-dialog__header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(90deg, rgba(217, 70, 239, 0.08), transparent) !important;
}
.el-dialog__title {
  font-family: var(--font-tech) !important; font-weight: 600 !important;
  letter-spacing: 1px !important; color: #fff !important;
  text-shadow: 0 0 12px rgba(217, 70, 239, 0.4);
}
.el-dialog__body { color: var(--text-main) !important; }
.el-dialog__body * { color: var(--text-main) !important; }
.el-dialog__headerbtn { border: none !important; }
.el-dialog__headerbtn .el-dialog__close { color: var(--text-mute) !important; }
.el-dialog__headerbtn:hover .el-dialog__close { color: var(--neon-purple) !important; }
.el-dialog .el-dialog__footer { border-top: 1px solid var(--border-dim) !important; }

/* 弹窗筛选按钮 */
.el-dialog .option-buttons button, .el-dialog .filter-options button {
  background: var(--bg-card) !important; border: 1px solid var(--border-dim) !important;
  color: var(--text-main) !important; border-radius: 8px !important; transition: all 0.25s !important;
}
.el-dialog .option-buttons button:hover, .el-dialog .filter-options button:hover { border-color: rgba(34, 211, 238, 0.3) !important; color: var(--neon-cyan) !important; }
.el-dialog .option-buttons button.selected, .el-dialog .filter-options button.selected {
  background: rgba(34, 211, 238, 0.1) !important; border-color: var(--neon-cyan) !important;
  color: var(--neon-cyan) !important; box-shadow: 0 0 15px rgba(34, 211, 238, 0.15) !important;
}

/* 验证按钮 */
.el-dialog .btn, .el-dialog button.btn {
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)) !important;
  border: none !important; color: #fff !important; border-radius: 8px !important;
  box-shadow: 0 3px 15px var(--neon-purple-glow) !important;
}

/* 支付按钮 */
.payment-button, .el-button.payment-button, .el-button.is-plain.payment-button {
  background: var(--bg-card) !important; border: 1px solid var(--border-dim) !important;
  color: var(--text-main) !important; border-radius: var(--radius) !important; transition: all 0.3s !important;
}
.payment-button:hover, .el-button.payment-button:hover {
  border-color: var(--neon-cyan) !important; background: rgba(34, 211, 238, 0.06) !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.15) !important;
}

/* 套餐卡片：全息玻璃 */
.matched-card {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 14px !important; backdrop-filter: blur(12px) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important; overflow: hidden !important;
}
.matched-card::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.06), transparent);
  transform: skewX(-20deg); transition: 0s; pointer-events: none;
}
.matched-card:hover::before { left: 200%; transition: 0.8s; }
.matched-card:hover {
  background: linear-gradient(145deg, rgba(34, 211, 238, 0.06), transparent) !important;
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.12) !important;
  transform: scale(1.01);
}
.matched-card * { color: var(--text-main) !important; }
.matched-card .price, .matched-card .price * {
  color: var(--neon-cyan) !important; font-family: var(--font-tech) !important;
  text-shadow: 0 0 10px var(--neon-cyan-glow);
}
.matched-card .feature { background: rgba(217, 70, 239, 0.04) !important; border-radius: 8px !important; }
.matched-card .private, .matched-card .public { color: var(--text-mute) !important; background: transparent !important; }

/* 购买弹窗：套餐信息框 */
.selected-sub-type-info-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-main) !important;
}
.selected-sub-type-info-box * { color: var(--text-main) !important; }

/* 购买弹窗：优惠码区域 */
.coupon-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-dim) !important;
}
.coupon-section .coupon-label { color: var(--text-main) !important; }
.coupon-section .coupon-tips {
  background: rgba(255, 133, 0, 0.08) !important;
  border-left-color: #ff8500 !important;
  color: #ff8500 !important;
}
.coupon-section .coupon-btn {
  color: var(--neon-cyan) !important;
  border-color: var(--neon-cyan) !important;
}
.coupon-section .coupon-btn:hover {
  background: rgba(34, 211, 238, 0.08) !important;
}

/* 购买弹窗：筛选按钮 */
.combo .filter-options .filter-group .option-buttons button {
  background: var(--bg-card) !important;
  border-color: var(--border-dim) !important;
  color: var(--text-main) !important;
}
.combo .filter-options .filter-group .option-buttons button.selected {
  background: rgba(139, 85, 252, 0.15) !important;
  color: var(--neon-purple) !important;
  border-color: var(--neon-purple) !important;
}

/* 购买弹窗：支付信息 */
.payment-info, .combo .options-section .payment-info {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
}
.payment-info * { color: var(--text-main) !important; }
.payment-info .valid-date, .payment-info .valid-date * { color: #ee4266 !important; }

/* 购买弹窗：支付标题与按钮 */
.payment-title { color: var(--text-main) !important; }
.payment-buttons-container .payment-button,
.payment-button {
  background: var(--bg-card) !important;
  border-color: var(--border-dim) !important;
  color: var(--text-main) !important;
}
.payment-button:hover {
  border-color: var(--neon-cyan) !important;
  background: rgba(34, 211, 238, 0.06) !important;
}
.payment-label, .payment-info { color: var(--text-main) !important; }

/* 购买弹窗：有效期 */
.valid-date { color: #ee4266 !important; }

/* 购买弹窗：价格表 */
.price-table {
  background: rgba(139, 85, 252, 0.08) !important;
  border-color: rgba(139, 85, 252, 0.3) !important;
  color: var(--text-main) !important;
}
.price-table * { color: var(--text-main) !important; }
.price-table .price span { color: var(--neon-cyan) !important; }
.price-table.selected {
  border-color: var(--neon-purple) !important;
  background: rgba(139, 85, 252, 0.2) !important;
  box-shadow: 0 2px 6px rgba(139, 85, 252, 0.3) !important;
}

/* 购买弹窗：无匹配 */
.no-match { color: var(--text-mute) !important; }

/* 步骤条 */
.el-dialog .steps .box {
  background: var(--bg-card) !important; border: 1px solid var(--border-dim) !important; border-radius: 8px !important;
}
.el-dialog .steps .box p {
  background: rgba(139, 85, 252, 0.08) !important;
  border-color: rgba(139, 85, 252, 0.3) !important;
  color: var(--text-main) !important;
}

/* 下拉菜单 */
.el-popper, .el-dropdown__popper, .el-select-dropdown, .el-dropdown-menu {
  background: rgba(5, 5, 10, 0.95) !important; border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(20px) !important;
}
.el-dropdown-menu__item, .el-select-dropdown__item { color: var(--text-main) !important; }
.el-dropdown-menu__item:hover, .el-select-dropdown__item.hover { background: rgba(217, 70, 239, 0.08) !important; color: var(--neon-purple) !important; }
.el-select-dropdown__item.is-selected { color: var(--neon-cyan) !important; }

/* 标签 */
.el-tag { background: rgba(217, 70, 239, 0.1) !important; border-color: rgba(217, 70, 239, 0.2) !important; color: var(--neon-purple) !important; }
.el-tag--success { background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; }
.el-tag--success .el-tag__content { color: #4ade80 !important; }

/* Tabs */
.el-tabs__item { color: var(--text-mute) !important; }
.el-tabs__item.is-active { color: var(--neon-cyan) !important; }
.el-tabs__active-bar { background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple)) !important; }
.el-tabs__nav-wrap::after { background: var(--border-dim) !important; }

/* 表格 */
.el-table, .el-table__inner-wrapper { background: transparent !important; color: var(--text-main) !important; }
.el-table tr, .el-table th.el-table__cell { background: transparent !important; color: var(--text-main) !important; }
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf { background: transparent !important; border-bottom: 1px solid var(--border-dim) !important; }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: rgba(255, 255, 255, 0.02) !important; }
.el-table--enable-row-hover .el-table__body tr:hover > td { background: rgba(217, 70, 239, 0.06) !important; }
.el-table__empty-text { color: var(--text-mute) !important; }
.el-table::before, .el-table__inner-wrapper::before { background: var(--border-dim) !important; }

/* 分页 */
.el-pagination { color: var(--text-mute) !important; }
.el-pagination .btn-prev, .el-pagination .btn-next, .el-pager li { background: transparent !important; color: var(--text-mute) !important; }
.el-pager li.is-active { color: var(--neon-cyan) !important; }

/* 消息框 */
.el-message-box { background: rgba(5, 5, 10, 0.95) !important; border: 1px solid var(--border-dim) !important; border-radius: 16px !important; }
.el-message-box__title, .el-message-box__content { color: var(--text-main) !important; }

/* 表单标签 */
.el-form-item__label { background: transparent !important; color: var(--text-main) !important; }

/* ===== 用户中心 ===== */
.user-center, .user-center * { color: var(--text-main) !important; }
.user-center .section, .default-layout .section {
  background: var(--bg-card) !important; border: 1px solid var(--border-dim) !important;
  border-radius: 14px !important; backdrop-filter: blur(12px) !important;
}
.user-center .section-title { font-family: var(--font-tech) !important; font-weight: 600 !important; }
.user-center .info-label { color: var(--text-mute) !important; }

/* 推广有礼页面 */
/* 主卡片：覆盖紫色渐变 */
.promotion-content .promotion-card,
.user-center .promotion-content .promotion-card {
  background: rgba(12, 12, 28, 0.85) !important;
  border: 1px solid rgba(217, 70, 239, 0.15) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(217, 70, 239, 0.03) !important;
}
.promotion-content .promotion-card::before {
  background: rgba(217, 70, 239, 0.03) !important;
}
.promotion-content .promotion-card h3 { color: var(--neon-cyan) !important; font-family: var(--font-tech) !important; }
.promotion-content .promotion-card .hint-text,
.promotion-content .promotion-card .rate { color: var(--neon-cyan) !important; }
.promotion-content .promotion-card .link-input input,
.promotion-content .promotion-card .link-input .el-input__inner {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--text-sub) !important;
}
.promotion-content .promotion-card .link-input button,
.promotion-content .promotion-card .link-input .el-button {
  background: rgba(217, 70, 239, 0.15) !important;
  border: 1px solid rgba(217, 70, 239, 0.3) !important;
  color: var(--neon-purple) !important;
}
/* 统计卡片 */
.promotion-content .promotion-card .data-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(34, 211, 238, 0.1) !important;
}
.promotion-content .promotion-card .data-card .data-title { color: var(--text-mute) !important; }
.promotion-content .promotion-card .data-card .data-number { color: var(--neon-cyan) !important; font-family: var(--font-tech) !important; }
.promotion-content .promotion-card .data-card button,
.promotion-content .promotion-card .data-card .el-button {
  background: rgba(217, 70, 239, 0.2) !important;
  border: 1px solid rgba(217, 70, 239, 0.3) !important;
  color: #fff !important;
}
/* 兼容旧版 promotion-incentive */
.promotion-incentive { background: transparent !important; }
.promotion-incentive .top-content { background: transparent !important; }
.promotion-incentive .share-box {
  background: rgba(12, 12, 28, 0.85) !important;
  border: 1px solid rgba(217, 70, 239, 0.15) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(20px) !important;
}
.promotion-incentive .share-box .qrcode { background: #fff !important; border-radius: 10px !important; }
.promotion-incentive .data-overview { background: transparent !important; }
.promotion-incentive .data-item {
  background: rgba(12, 12, 28, 0.7) !important;
  border: 1px solid rgba(34, 211, 238, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.promotion-incentive .data-item .data-name { color: var(--text-mute) !important; }
.promotion-incentive .data-item .data-value { color: var(--neon-cyan) !important; font-family: var(--font-tech) !important; }
.promotion-incentive .bottom-content {
  background: rgba(8, 8, 18, 0.85) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.promotion-incentive .bottom-content * { color: var(--text-sub) !important; }
.promotion-incentive .bottom-content thead th {
  background-color: rgba(139, 85, 252, 0.08) !important;
  color: var(--text-main) !important;
}
/* 底部记录区域（records-section） */
.promotion-content .records-section,
.user-center .promotion-content .records-section,
.user-center .records-section {
  background: rgba(8, 8, 18, 0.85) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.records-section *,
.records-section .el-tabs__item,
.records-section th,
.records-section td { color: var(--text-sub) !important; }
.records-section .el-tabs__item.is-active { color: var(--neon-cyan) !important; }
.records-section .el-tabs__active-bar { background: var(--neon-cyan) !important; }
.records-section table,
.records-section thead th,
.records-section tbody td {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--border-dim) !important;
}
.records-section thead th {
  background-color: rgba(139, 85, 252, 0.08) !important;
  color: var(--text-main) !important;
}
.records-section .el-select__wrapper {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--border-dim) !important;
}

/* Footer */
.site-footer { background: transparent !important; color: var(--text-mute) !important; border-top: 1px solid var(--border-dim) !important; }
.site-footer * { color: var(--text-mute) !important; }

/* ===== 车队Loading：霓虹星门 ===== */
.el-loading-mask {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(120, 40, 200, 0.08), transparent 70%),
    #030014 !important;
  backdrop-filter: blur(4px) !important;
}
/* loading淡出过渡，缓冲close→跳转间隙 */
.el-loading-fade-leave-active {
  transition: opacity 1s ease-out !important;
}
.el-loading-spinner {
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  width: 120px !important; height: 120px !important;
  margin: 0 auto !important;
  position: relative !important;
}
/* 隐藏原生SVG圆圈 */
.el-loading-spinner .circular {
  display: none !important;
}
/* 外层光环：紫色，顺时针 */
.el-loading-spinner::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: calc(50% - 45px) !important;
  width: 90px !important; height: 90px !important;
  border-radius: 50% !important;
  border: 2.5px solid transparent !important;
  border-top-color: #D946EF !important;
  border-right-color: rgba(217, 70, 239, 0.3) !important;
  box-shadow: 0 0 25px rgba(217, 70, 239, 0.4), 0 0 60px rgba(217, 70, 239, 0.15), inset 0 0 15px rgba(217, 70, 239, 0.1) !important;
  animation: stargate-outer 1.8s linear infinite !important;
}
/* 内层光环：青色，逆时针 */
.el-loading-spinner::after {
  content: '' !important;
  position: absolute !important;
  top: 15px !important; left: calc(50% - 30px) !important;
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  border-bottom-color: #22D3EE !important;
  border-left-color: rgba(34, 211, 238, 0.3) !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.4), 0 0 50px rgba(34, 211, 238, 0.12), inset 0 0 12px rgba(34, 211, 238, 0.1) !important;
  animation: stargate-inner 1.2s linear infinite !important;
}
/* 文字：呼吸发光 */
.el-loading-spinner .el-loading-text {
  margin-top: 100px !important;
  color: rgba(220, 220, 255, 0.9) !important;
  font-family: var(--font-tech, 'Space Grotesk', monospace) !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  text-shadow: 0 0 12px rgba(217, 70, 239, 0.5), 0 0 30px rgba(34, 211, 238, 0.3) !important;
  animation: stargate-text 2.5s ease-in-out infinite alternate !important;
}
@keyframes stargate-outer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes stargate-inner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes stargate-text {
  0% { opacity: 0.6; text-shadow: 0 0 8px rgba(217, 70, 239, 0.3), 0 0 20px rgba(34, 211, 238, 0.15); }
  50% { opacity: 1; text-shadow: 0 0 15px rgba(217, 70, 239, 0.6), 0 0 40px rgba(34, 211, 238, 0.4), 0 0 60px rgba(120, 40, 200, 0.2); }
  100% { opacity: 0.7; text-shadow: 0 0 10px rgba(34, 211, 238, 0.4), 0 0 25px rgba(217, 70, 239, 0.2); }
}

/* ===== 动画减弱 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}