/* ============================================================
   女皇云机场 - Queen Cloud Custom Theme
   Vue 3 + Naive UI + Tailwind · 紫金暗黑玄幻风格
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Noto+Serif+SC:wght@400;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --queen-purple: #8B5CF6;
  --queen-purple-dark: #6D28D9;
  --queen-purple-light: #A78BFA;
  --queen-purple-glow: rgba(139, 92, 246, 0.4);
  --queen-gold: #F59E0B;
  --queen-gold-dark: #D97706;
  --queen-gold-light: #FCD34D;
  --queen-gold-glow: rgba(245, 158, 11, 0.35);
  --queen-bg-deep: #0A0A1A;
  --queen-bg-primary: #0F0F1E;
  --queen-bg-secondary: #1A1A2E;
  --queen-bg-card: rgba(22, 22, 42, 0.72);
  --queen-bg-card-hover: rgba(30, 30, 55, 0.82);
  --queen-border: rgba(139, 92, 246, 0.18);
  --queen-border-hover: rgba(139, 92, 246, 0.45);
  --queen-text: #E8E6F0;
  --queen-text-secondary: #9B95B0;
  --queen-text-muted: #6B6580;
  --queen-glass-blur: 18px;
  --queen-radius: 16px;
  --queen-radius-sm: 10px;
  --queen-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Global Reset & Base ── */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--queen-bg-deep) !important;
  color: var(--queen-text) !important;
  font-family: 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 全局背景粒子光效 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 80% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: queenAmbient 12s ease-in-out infinite alternate;
}

/* ── #app 根容器 ── */
#app {
  position: relative;
  z-index: 1;
}

/* ── Naive UI Layout 布局 ── */
.n-layout {
  background: transparent !important;
}

.n-layout-scroll-container,
.layout-scroll-container {
  background: transparent !important;
}

/* 侧边栏 */
.n-layout-sider,
.n-layout-sider-scroll-container,
.layout-sider-scroll-container {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(var(--queen-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--queen-glass-blur)) !important;
  border-right: 1px solid var(--queen-border) !important;
}

.side-menu {
  background: transparent !important;
}

/* ── Naive UI Menu 菜单 ── */
.n-menu {
  background: transparent !important;
}

.n-menu .n-menu-item-content {
  border-radius: var(--queen-radius-sm) !important;
  margin: 2px 8px !important;
  transition: var(--queen-transition) !important;
}

.n-menu .n-menu-item-content:hover {
  background: rgba(139, 92, 246, 0.12) !important;
}

.n-menu .n-menu-item-content--selected,
.n-menu .n-menu-item-content--selected:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(109, 40, 217, 0.18)) !important;
  box-shadow: inset 0 0 12px rgba(139, 92, 246, 0.15);
}

.n-menu .n-menu-item-content--selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: linear-gradient(180deg, var(--queen-purple), var(--queen-gold));
  border-radius: 0 3px 3px 0;
}

.n-menu--collapsed .n-menu-item-content--selected::before {
  display: none;
}

/* 标题文字 */
.title-text {
  font-family: 'Cinzel', 'Noto Serif SC', serif !important;
  background: linear-gradient(135deg, var(--queen-purple-light), var(--queen-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 8px var(--queen-purple-glow));
}

/* ── Naive UI Card 卡片 (玻璃拟态) ── */
.n-card {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(var(--queen-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--queen-glass-blur)) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(139, 92, 246, 0.06) !important;
  transition: var(--queen-transition) !important;
  overflow: hidden;
}

.n-card:hover {
  border-color: var(--queen-border-hover) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 50px rgba(139, 92, 246, 0.12) !important;
  transform: translateY(-3px);
}

.n-card-header {
  border-bottom: 1px solid var(--queen-border) !important;
}

.n-card > .n-card-header .n-card-header__main {
  font-family: 'Cinzel', 'Noto Serif SC', serif;
  color: var(--queen-text) !important;
}

/* 卡片容器 & 卡片项 */
.card-container {
  position: relative;
  z-index: 1;
}

.card-item {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(var(--queen-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--queen-glass-blur)) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
  transition: var(--queen-transition) !important;
  overflow: hidden;
  position: relative;
}

.card-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.04), transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

.card-item:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--queen-border-hover) !important;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(139, 92, 246, 0.1) !important;
}

/* ── Naive UI Button 按钮 ── */
.n-button--primary-type {
  background: linear-gradient(135deg, var(--queen-purple) 0%, var(--queen-purple-dark) 100%) !important;
  border: none !important;
  border-radius: var(--queen-radius-sm) !important;
  box-shadow: 0 4px 16px var(--queen-purple-glow) !important;
  transition: var(--queen-transition) !important;
  position: relative;
  overflow: hidden;
}

.n-button--primary-type::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.n-button--primary-type:hover::after {
  transform: translateX(100%);
}

.n-button--primary-type:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.5) !important;
}

.n-button--primary-type:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px var(--queen-purple-glow) !important;
}

/* 默认按钮 */
.n-button--default-type {
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
  color: var(--queen-purple-light) !important;
  transition: var(--queen-transition) !important;
}

.n-button--default-type:hover {
  background: rgba(139, 92, 246, 0.16) !important;
  border-color: var(--queen-border-hover) !important;
}

/* 警告/金色按钮 */
.n-button--warning-type {
  background: linear-gradient(135deg, var(--queen-gold) 0%, var(--queen-gold-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--queen-gold-glow) !important;
  transition: var(--queen-transition) !important;
}

.n-button--warning-type:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.5) !important;
}

/* ── Naive UI Input 输入框 ── */
.n-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
  transition: var(--queen-transition) !important;
}

.n-input:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
}

.n-input--focus,
.n-input:focus-within {
  border-color: var(--queen-purple) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18), 0 0 20px rgba(139, 92, 246, 0.1) !important;
}

.n-input .n-input__input-el,
.n-input .n-input__textarea-el {
  color: var(--queen-text) !important;
  caret-color: var(--queen-purple-light) !important;
}

.n-input .n-input__placeholder {
  color: var(--queen-text-muted) !important;
}

/* Naive UI Select */
.n-base-selection {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
  transition: var(--queen-transition) !important;
}

.n-base-selection:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
}

.n-base-selection--active,
.n-base-selection--focus {
  border-color: var(--queen-purple) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.18) !important;
}

/* ── Naive UI Form Item ── */
.n-form-item .n-form-item-label {
  color: var(--queen-text-secondary) !important;
  font-weight: 500;
}

/* ── Naive UI Modal 模态框 ── */
.n-modal-mask {
  background: rgba(5, 5, 15, 0.75) !important;
  backdrop-filter: blur(4px) !important;
}

.n-modal,
.n-modal-body-wrapper .n-card {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius) !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(139, 92, 246, 0.08) !important;
}

/* Naive UI Dialog */
.n-dialog {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

.n-dialog .dialog-icon-container {
  color: var(--queen-purple) !important;
}

/* Naive UI Drawer 抽屉 */
.n-drawer .n-drawer-content,
.n-drawer .drawer-content {
  background: var(--queen-bg-secondary) !important;
  backdrop-filter: blur(var(--queen-glass-blur)) !important;
}

.n-drawer .n-drawer-header {
  border-bottom: 1px solid var(--queen-border) !important;
}

.n-drawer .n-drawer-footer {
  border-top: 1px solid var(--queen-border) !important;
}

/* ── Naive UI Dropdown 下拉菜单 ── */
.n-dropdown-menu,
.n-popover-body {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

.n-dropdown-option:hover,
.n-dropdown-option--pending {
  background: rgba(139, 92, 246, 0.12) !important;
}

/* ── Naive UI Data Table 数据表格 ── */
.n-data-table {
  background: transparent !important;
  border-radius: var(--queen-radius) !important;
  overflow: hidden;
}

.n-data-table .n-data-table-wrapper {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(var(--queen-glass-blur)) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius) !important;
}

.n-data-table .n-data-table-thead {
  background: rgba(139, 92, 246, 0.08) !important;
}

.n-data-table .n-data-table-th {
  background: transparent !important;
  color: var(--queen-purple-light) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--queen-border) !important;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
}

.n-data-table .n-data-table-td {
  border-bottom: 1px solid rgba(139, 92, 246, 0.06) !important;
  color: var(--queen-text) !important;
  transition: background var(--queen-transition) !important;
}

.n-data-table .n-data-table-tr:hover .n-data-table-td {
  background: rgba(139, 92, 246, 0.06) !important;
}

.n-data-table .n-data-table-empty {
  background: transparent !important;
}

/* ── Naive UI Tag 标签 ── */
.n-tag {
  border-radius: 20px !important;
  font-weight: 500 !important;
  transition: var(--queen-transition) !important;
}

.n-tag--primary-type {
  background: rgba(139, 92, 246, 0.15) !important;
  color: var(--queen-purple-light) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
}

.n-tag--success-type {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.n-tag--warning-type {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.n-tag--error-type {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* ── Naive UI List 列表 ── */
.n-list {
  background: transparent !important;
}

.n-list .n-list-item {
  border-bottom: 1px solid rgba(139, 92, 246, 0.06) !important;
  transition: background var(--queen-transition) !important;
  padding: 12px 0 !important;
}

.n-list .n-list-item:hover {
  background: rgba(139, 92, 246, 0.04) !important;
}

/* ── Naive UI Breadcrumb 面包屑 ── */
.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link {
  color: var(--queen-text-muted) !important;
  transition: color var(--queen-transition) !important;
}

.n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:hover {
  color: var(--queen-purple-light) !important;
}

.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link {
  color: var(--queen-text) !important;
}

/* ── Naive UI Message & Notification ── */
.n-message .n-message__content {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.n-notification {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ── Naive UI Loading Bar ── */
.n-loading-bar-container .n-loading-bar {
  background: linear-gradient(90deg, var(--queen-purple), var(--queen-gold), var(--queen-purple)) !important;
  background-size: 200% 100% !important;
  animation: queenLoadingShimmer 1.5s ease infinite !important;
}

/* ── Naive UI Tabs ── */
.n-tabs .n-tabs-tab {
  color: var(--queen-text-muted) !important;
  transition: var(--queen-transition) !important;
}

.n-tabs .n-tabs-tab:hover {
  color: var(--queen-purple-light) !important;
}

.n-tabs .n-tabs-tab--active {
  color: var(--queen-purple) !important;
  font-weight: 600 !important;
}

.n-tabs .n-tabs-bar {
  background: linear-gradient(90deg, var(--queen-purple), var(--queen-gold)) !important;
}

/* ── Naive UI Pagination ── */
.n-pagination .n-pagination-item--active {
  background: linear-gradient(135deg, var(--queen-purple), var(--queen-purple-dark)) !important;
  border-color: var(--queen-purple) !important;
  box-shadow: 0 2px 10px var(--queen-purple-glow) !important;
}

/* ── 主内容区域 (Tailwind 覆盖) ── */
.cus-scroll-y {
  background: var(--queen-bg-deep) !important;
}

/* 覆盖 Tailwind 暗色背景 */
.dark\:bg-hex-121212,
.dark\:bg-hex-101014 {
  background-color: var(--queen-bg-deep) !important;
}

.bg-\[\#f5f6fb\] {
  background-color: var(--queen-bg-deep) !important;
}

/* 顶部导航栏区域 */
.h-15.f-c-c {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(var(--queen-glass-blur)) !important;
  border-bottom: 1px solid var(--queen-border) !important;
}

/* ── 轮播图 / Banner ── */
.carousel-img {
  border-radius: var(--queen-radius) !important;
  overflow: hidden;
  position: relative;
}

.carousel-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 26, 0.7) 100%);
  pointer-events: none;
}

.n-carousel {
  border-radius: var(--queen-radius) !important;
  overflow: hidden;
}

/* ── 套餐/订阅卡片增强 ── */
.card-item .n-tag {
  font-size: 0.75rem !important;
}

/* 价格文字渐变 */
.color-primary,
[class*="color-primary"] {
  color: var(--queen-purple) !important;
}

/* 金额/价格大字 */
.card-item .font-bold,
.card-item .font-semibold {
  background: linear-gradient(135deg, var(--queen-purple-light), var(--queen-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 支付二维码 ── */
.pay-qrcode {
  background: #fff !important;
  border-radius: var(--queen-radius) !important;
  padding: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* ── Markdown 内容 ── */
.custom-html-style,
.markdown-body {
  color: var(--queen-text) !important;
}

.markdown-body a {
  color: var(--queen-purple-light) !important;
}

.markdown-body a:hover {
  color: var(--queen-gold) !important;
}

.markdown-body code {
  background: rgba(139, 92, 246, 0.1) !important;
  border: 1px solid rgba(139, 92, 246, 0.15) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  color: var(--queen-purple-light) !important;
}

.markdown-body pre {
  background: var(--queen-bg-secondary) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
}

/* ── 链接样式 ── */
a {
  color: var(--queen-purple-light);
  transition: color var(--queen-transition);
  text-decoration: none;
}

a:hover {
  color: var(--queen-gold);
}

/* ── Naive UI Switch 开关 ── */
.n-switch.n-switch--active .n-switch__rail {
  background: linear-gradient(135deg, var(--queen-purple), var(--queen-purple-dark)) !important;
  box-shadow: 0 0 12px var(--queen-purple-glow) !important;
}

/* ── Naive UI Progress 进度条 ── */
.n-progress .n-progress-graph-line-fill {
  background: linear-gradient(90deg, var(--queen-purple), var(--queen-gold)) !important;
}

/* ── Naive UI Checkbox & Radio ── */
.n-checkbox .n-checkbox-box--checked {
  background: var(--queen-purple) !important;
  border-color: var(--queen-purple) !important;
}

.n-radio .n-radio__dot--checked {
  background: var(--queen-purple) !important;
  box-shadow: 0 0 8px var(--queen-purple-glow) !important;
}

/* ── Naive UI Alert ── */
.n-alert {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: var(--queen-radius-sm) !important;
  border: 1px solid var(--queen-border) !important;
}

/* ── Naive UI Tooltip ── */
.n-tooltip {
  background: var(--queen-bg-secondary) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* ── 登录/注册页面 ── */
/* 登录页全屏背景 */
#app > div:first-child > div[class*="flex"][class*="justify-center"],
#app > div:first-child > div[class*="f-c-c"] {
  min-height: 100vh;
  position: relative;
}

/* 登录页背景增强 */
body:has(.n-form-item) #app::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle 400px at 30% 40%, rgba(139, 92, 246, 0.12), transparent),
    radial-gradient(circle 300px at 70% 60%, rgba(245, 158, 11, 0.08), transparent),
    radial-gradient(circle 200px at 50% 50%, rgba(139, 92, 246, 0.06), transparent);
  animation: queenAmbient 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* 登录卡片玻璃拟态增强 */
.flex-1.flex-col.overflow-hidden .n-card,
.f-c-c .n-card,
div[class*="justify-center"] > .n-card {
  background: rgba(18, 18, 38, 0.78) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border: 1px solid rgba(139, 92, 246, 0.22) !important;
  border-radius: 20px !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(139, 92, 246, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  position: relative;
  overflow: hidden;
}

/* 登录卡片顶部装饰线 */
.f-c-c .n-card::before,
div[class*="justify-center"] > .n-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--queen-purple), var(--queen-gold), var(--queen-purple), transparent);
  border-radius: 2px;
}

/* Logo 样式 */
img[src*="logo"],
.n-avatar img {
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.4);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.3);
  animation: queenFloat 4s ease-in-out infinite;
}

/* ── 滚动条美化 ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--queen-bg-deep);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--queen-purple-dark), var(--queen-purple));
  border-radius: 4px;
  border: 2px solid var(--queen-bg-deep);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--queen-purple), var(--queen-purple-light));
}

/* Firefox 滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--queen-purple-dark) var(--queen-bg-deep);
}

/* ── 选中文字颜色 ── */
::selection {
  background: rgba(139, 92, 246, 0.3);
  color: #fff;
}

::-moz-selection {
  background: rgba(139, 92, 246, 0.3);
  color: #fff;
}

/* ── 动画定义 ── */
@keyframes queenAmbient {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

@keyframes queenFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

@keyframes queenPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2), 0 0 30px rgba(139, 92, 246, 0.05);
  }
  50% {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.35), 0 0 50px rgba(139, 92, 246, 0.1);
  }
}

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

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

@keyframes queenShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ── 入场动画 ── */
.n-card,
.card-item {
  animation: queenFadeInUp 0.5s ease-out both;
}

.card-container .card-item:nth-child(1) { animation-delay: 0.05s; }
.card-container .card-item:nth-child(2) { animation-delay: 0.1s; }
.card-container .card-item:nth-child(3) { animation-delay: 0.15s; }
.card-container .card-item:nth-child(4) { animation-delay: 0.2s; }
.card-container .card-item:nth-child(5) { animation-delay: 0.25s; }
.card-container .card-item:nth-child(6) { animation-delay: 0.3s; }

/* ── Naive UI Popover / Popselect ── */
.n-popover:not(.n-popover--raw) {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

.n-popover .n-popover-arrow-wrapper .n-popover-arrow {
  background: var(--queen-bg-card) !important;
  border: 1px solid var(--queen-border) !important;
}

/* ── Naive UI Spin / Loading ── */
.n-spin-container .n-spin-body .n-spin {
  color: var(--queen-purple) !important;
}

/* ── Naive UI Empty 空状态 ── */
.n-empty .n-empty__description {
  color: var(--queen-text-muted) !important;
}

.n-empty .n-empty__icon {
  color: var(--queen-text-muted) !important;
  opacity: 0.5;
}

/* ── Naive UI Divider 分割线 ── */
.n-divider .n-divider__line {
  background-color: var(--queen-border) !important;
}

.n-divider .n-divider__title {
  color: var(--queen-text-secondary) !important;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
}

/* ── Naive UI Statistic 统计数值 ── */
.n-statistic .n-statistic-value {
  font-family: 'Cinzel', 'Noto Serif SC', serif !important;
}

.n-statistic .n-statistic-value__content {
  background: linear-gradient(135deg, var(--queen-purple-light), var(--queen-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Naive UI Result 结果页 ── */
.n-result .n-result-header__title {
  font-family: 'Cinzel', 'Noto Serif SC', serif !important;
  color: var(--queen-text) !important;
}

.n-result .n-result-header__description {
  color: var(--queen-text-secondary) !important;
}

/* ── 特殊装饰效果 ── */
/* 卡片悬浮光晕 */
.card-item:hover::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.03), transparent 50%);
  pointer-events: none;
  animation: queenPulseGlow 3s ease-in-out infinite;
}

/* 按钮光泽扫过效果 */
.n-button--primary-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.n-button--primary-type:hover::before {
  animation: queenShine 0.8s ease forwards;
}

/* ── 响应式优化 ── */
@media (max-width: 768px) {
  :root {
    --queen-radius: 12px;
    --queen-radius-sm: 8px;
    --queen-glass-blur: 14px;
  }

  /* 移动端卡片间距 */
  .card-container {
    padding: 0 8px !important;
  }

  .card-item {
    border-radius: var(--queen-radius) !important;
  }

  .card-item:hover {
    transform: none;
  }

  /* 移动端侧边栏 */
  .n-layout-sider {
    backdrop-filter: blur(24px) !important;
  }

  /* 移动端模态框 */
  .n-modal {
    margin: 12px !important;
    max-height: 90vh !important;
  }

  .n-modal .n-card {
    border-radius: var(--queen-radius) !important;
  }

  /* 移动端抽屉 */
  .n-drawer {
    max-width: 85vw !important;
  }

  /* 移动端登录卡片 */
  .f-c-c .n-card,
  div[class*="justify-center"] > .n-card {
    margin: 16px !important;
    border-radius: 16px !important;
  }

  /* 移动端数据表格横向滚动 */
  .n-data-table-wrapper {
    border-radius: var(--queen-radius) !important;
  }

  /* 移动端按钮 */
  .n-button {
    border-radius: var(--queen-radius-sm) !important;
  }

  /* 禁用移动端悬浮动画（性能优化） */
  .n-card:hover,
  .card-item:hover {
    transform: none !important;
  }

  /* 减少移动端动画 */
  .card-container .card-item {
    animation-duration: 0.3s !important;
  }
}

/* 小屏手机 */
@media (max-width: 480px) {
  .f-c-c .n-card,
  div[class*="justify-center"] > .n-card {
    margin: 10px !important;
    border-radius: 14px !important;
  }

  .n-data-table .n-data-table-th,
  .n-data-table .n-data-table-td {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }
}

/* 大屏优化 */
@media (min-width: 1440px) {
  .card-container {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* ── 减少动画偏好 ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::before {
    animation: none !important;
  }
}

/* ── Naive UI Config Provider 暗色覆盖 ── */
.n-config-provider {
  color: var(--queen-text) !important;
}

/* ── 背景图片支持 (通过 background_url 配置) ── */
body[style*="background"] {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* ── Naive UI Skeleton 骨架屏 ── */
.n-skeleton {
  background: linear-gradient(90deg,
    rgba(139, 92, 246, 0.06) 25%,
    rgba(139, 92, 246, 0.12) 50%,
    rgba(139, 92, 246, 0.06) 75%) !important;
  background-size: 200% 100% !important;
  animation: queenLoadingShimmer 1.8s ease infinite !important;
}

/* ── Naive UI Badge 徽标 ── */
.n-badge .n-badge-sup {
  background: linear-gradient(135deg, var(--queen-purple), var(--queen-purple-dark)) !important;
  box-shadow: 0 2px 8px var(--queen-purple-glow) !important;
}

/* ── Naive UI Avatar 头像 ── */
.n-avatar {
  border: 2px solid rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.15) !important;
  transition: var(--queen-transition) !important;
}

.n-avatar:hover {
  border-color: var(--queen-purple) !important;
  box-shadow: 0 0 20px var(--queen-purple-glow) !important;
}

/* ── Naive UI Steps 步骤条 ── */
.n-steps .n-step-indicator--process {
  background: linear-gradient(135deg, var(--queen-purple), var(--queen-purple-dark)) !important;
  box-shadow: 0 0 12px var(--queen-purple-glow) !important;
}

/* ── Naive UI Collapse 折叠面板 ── */
.n-collapse .n-collapse-item__header {
  color: var(--queen-text) !important;
  transition: color var(--queen-transition) !important;
}

.n-collapse .n-collapse-item__header:hover {
  color: var(--queen-purple-light) !important;
}

.n-collapse .n-collapse-item__content-inner {
  color: var(--queen-text-secondary) !important;
}

/* ── 绿色状态文字 (在线/可用) ── */
.font-semibold.text-green-400 {
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
}

/* ── 橙色标签 (推荐/热门) ── */
.bg-orange-600 {
  background: linear-gradient(135deg, var(--queen-gold), var(--queen-gold-dark)) !important;
  box-shadow: 0 2px 8px var(--queen-gold-glow) !important;
  border-radius: 6px !important;
}

/* ── 灰色背景卡片 (信息面板) ── */
.bg-gray-800 {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
}

/* ── 分割线 ── */
.border-b.border-gray-600,
.border-\[\#646669\] {
  border-color: var(--queen-border) !important;
}

/* ── 灰色辅助文字 ── */
.text-gray-400,
.text-gray-500 {
  color: var(--queen-text-secondary) !important;
}

/* ── 白色背景区域覆盖 ── */
.bg-white {
  background: var(--queen-bg-card) !important;
}

/* ── Naive UI Internal Select Menu ── */
.n-base-select-menu,
.n-internal-select-menu {
  background: var(--queen-bg-card) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--queen-border) !important;
  border-radius: var(--queen-radius-sm) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

.n-base-select-option--selected {
  background: rgba(139, 92, 246, 0.18) !important;
}

.n-base-select-option--pending {
  background: rgba(139, 92, 246, 0.1) !important;
}

/* ── Naive UI Back Top 回到顶部 ── */
.n-back-top {
  background: linear-gradient(135deg, var(--queen-purple), var(--queen-purple-dark)) !important;
  box-shadow: 0 4px 16px var(--queen-purple-glow) !important;
  border: none !important;
  transition: var(--queen-transition) !important;
}

.n-back-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.5) !important;
}

/* ── 表格样式 (原生 table 兜底) ── */
table {
  background: var(--queen-bg-card) !important;
  border-radius: var(--queen-radius) !important;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: rgba(139, 92, 246, 0.1) !important;
  color: var(--queen-purple-light) !important;
  font-weight: 600 !important;
  font-family: 'Cinzel', 'Noto Serif SC', serif;
}

td {
  border-bottom: 1px solid rgba(139, 92, 246, 0.06) !important;
}

tr:hover td {
  background: rgba(139, 92, 246, 0.04) !important;
}

/* ── Hover 悬浮列表项 (通用) ── */
div[class*="cursor-pointer"][class*="hover:bg-gray-100"]:hover {
  background: rgba(139, 92, 246, 0.08) !important;
}

div[class*="cursor-pointer"][class*="p-5"]:hover {
  background: rgba(139, 92, 246, 0.06) !important;
}

/* ── Telegram 登录按钮 ── */
[data-telegram-login] {
  border-radius: var(--queen-radius-sm) !important;
  overflow: hidden;
}

/* ── 页面底部 ── */
.n-layout-footer,
footer,
[class*="footer"] {
  background: transparent !important;
  color: var(--queen-text-muted) !important;
  border-top: 1px solid var(--queen-border) !important;
}

/* ── 全屏输入框 (搜索等) ── */
.flex-1.bg-transparent {
  color: var(--queen-text) !important;
}

.placeholder-gray-400::placeholder {
  color: var(--queen-text-muted) !important;
}

/* ── 分割线 (flex 中的 h-px) ── */
.h-px.bg-gray-300,
.flex-1.h-px {
  background-color: var(--queen-border) !important;
}

/* ============================================================
   End of Queen Cloud Custom Theme
   ============================================================ */

/* ============================================================
   登录页美化 v2 — 女皇云机场 · 皇室红金深色风格
   2026-06-12 重写，基于 CDP 真实选择器验证
   覆盖旧版副标题发光段落
   ============================================================ */

/* ===== 女皇云机场 登录页美化 v2 ===== */

/* 1. 全局字体栈（优先系统中文字体，不依赖外部 CDN） */
body, #app, .n-config-provider {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", "Noto Sans CJK SC", sans-serif !important;
}

/* 2. 登录页整体背景 — 深紫红渐变，皇室感 */
.wh-full.flex.items-center.justify-center {
  background: radial-gradient(ellipse at 35% 40%, #2e0e1e 0%, #160810 45%, #0a050c 100%) !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* 背景微妙点阵纹路 */
.wh-full.flex.items-center.justify-center::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(180, 130, 60, 0.035) 1px, transparent 1px) !important;
  background-size: 30px 30px !important;
  pointer-events: none !important;
}

/* 3. 登录卡片 — 深色底、暖金边框、圆角精致 */
.n-card.n-card--bordered.mx-auto.max-w-md.rounded-md {
  background: linear-gradient(165deg, rgba(28, 14, 22, 0.42) 0%, rgba(14, 8, 16, 0.38) 100%) !important;
  border: 1px solid rgba(185, 135, 55, 0.45) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
  box-shadow:
    0 0 0 1px rgba(185, 135, 55, 0.1),
    0 0 40px rgba(140, 26, 42, 0.12),
    0 10px 36px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 200, 90, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
  position: relative !important;
  --n-color: rgba(28, 14, 22, 0.42) !important;
  --n-color-embedded: rgba(18, 10, 16, 0.35) !important;
  --n-text-color: #e0ccaa !important;
  --n-border-color: rgba(180, 130, 60, 0.28) !important;
}

/* 卡片顶端金色装饰横线 */
.n-card.n-card--bordered.mx-auto.max-w-md.rounded-md::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(210, 160, 50, 0.8), rgba(240, 200, 80, 1), rgba(210, 160, 50, 0.8), transparent) !important;
  z-index: 2 !important;
}

/* 4. 卡片顶部语言切换栏 */
.flex.justify-between.bg-\[--n-color-embedded\].px-6.py-4.text-gray-500 {
  background: rgba(16, 8, 12, 0.28) !important;
  border-bottom: 1px solid rgba(180, 130, 60, 0.18) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* 5. Logo 金色光晕 */
.p-6 .text-center img {
  filter: drop-shadow(0 0 18px rgba(200, 145, 42, 0.65)) drop-shadow(0 4px 10px rgba(0,0,0,0.85)) !important;
  border-radius: 50% !important;
  margin-bottom: 6px !important;
}

/* 6. 副标题"女皇云机场 — Telegram 长期稳定使用环境" */
/* 金色渐变文字 + 呼吸发光动画（用 filter drop-shadow，对 transparent 文字有效） */
.wh-full.flex.items-center.justify-center h5.text-muted,
.wh-full h5[color="#6c757d"],
.n-card__content h5.text-muted {
  color: transparent !important;
  background: linear-gradient(95deg, #9a6818 5%, #f0d080 38%, #ffe090 55%, #e0b050 75%, #9a6818 95%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.5 !important;
  margin: 2px 0 4px !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 4px rgba(200, 145, 42, 0.55)) drop-shadow(0 0 10px rgba(200, 145, 42, 0.28)) !important;
  animation: queen-glow 3s ease-in-out infinite alternate !important;
}

@keyframes queen-glow {
  0%   { filter: drop-shadow(0 0 3px rgba(200, 145, 42, 0.4)) drop-shadow(0 0 7px rgba(200, 145, 42, 0.18)); }
  100% { filter: drop-shadow(0 0 7px rgba(200, 145, 42, 1.0)) drop-shadow(0 0 15px rgba(200, 145, 42, 0.5)); }
}

/* 7. 输入框 — 深色底、暖金聚焦描边 */
/* 登录页的 n-input 需要精准覆盖 NaiveUI CSS 变量 */
.wh-full .n-input.n-input--resizable,
.wh-full .n-input.n-input--resizable.n-input--stateful,
.wh-full .n-input.n-input--resizable.n-input--focus.n-input--stateful {
  --n-color: rgba(40, 25, 32, 0.85) !important;
  --n-color-focus: rgba(52, 32, 42, 0.95) !important;
  --n-text-color: #ead8b0 !important;
  --n-placeholder-color: rgba(155, 115, 70, 0.5) !important;
  --n-border: 1px solid rgba(140, 95, 42, 0.55) !important;
  --n-border-hover: 1px solid rgba(205, 150, 48, 0.72) !important;
  --n-border-focus: 1px solid rgba(210, 158, 55, 0.92) !important;
  --n-box-shadow-focus: 0 0 0 3px rgba(200, 145, 42, 0.14), 0 0 12px rgba(200, 145, 42, 0.16) !important;
  --n-border-radius: 10px !important;
  --n-caret-color: #f0d080 !important;
  --n-height: 44px !important;
  --n-padding-left: 14px !important;
  --n-padding-right: 14px !important;
  --n-font-size: 14px !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}

/* 输入框内部 wrapper 背景 */
.wh-full .n-input-wrapper {
  background: rgba(40, 25, 32, 0.85) !important;
  border-radius: 10px !important;
}

/* 输入框内文字 */
.wh-full .n-input__input-el {
  color: #ead8b0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  background: transparent !important;
  letter-spacing: 0.02em !important;
}

/* Placeholder */
.wh-full .n-input__placeholder span {
  color: rgba(155, 115, 70, 0.55) !important;
  font-size: 14px !important;
}

/* 密码眼睛图标 */
.wh-full .n-input__eye .n-base-icon { color: rgba(200, 145, 42, 0.5) !important; }
.wh-full .n-input__eye:hover .n-base-icon { color: rgba(200, 145, 42, 0.9) !important; }

/* 输入框 border 层圆角 */
.wh-full .n-input__border, .wh-full .n-input__state-border {
  border-radius: 10px !important;
}

/* 8. 登录按钮 — 旗舰重点美化 */
.wh-full button.n-button--primary-type.h-9.w-full {
  background: linear-gradient(135deg, #6b1120 0%, #9e2525 28%, #b83028 55%, #c89030 80%, #a07020 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  height: 46px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
  box-shadow:
    0 4px 20px rgba(120, 20, 35, 0.6),
    0 2px 8px rgba(180, 145, 50, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  /* NaiveUI CSS 变量覆盖 */
  --n-color: transparent !important;
  --n-color-hover: transparent !important;
  --n-color-pressed: transparent !important;
  --n-color-focus: transparent !important;
  --n-color-disabled: rgba(80, 40, 40, 0.5) !important;
  --n-border: none !important;
  --n-border-hover: none !important;
  --n-border-pressed: none !important;
  --n-border-focus: none !important;
  --n-text-color: #fff !important;
  --n-text-color-hover: #fff !important;
  --n-text-color-pressed: #fff !important;
  --n-text-color-disabled: rgba(200, 150, 150, 0.6) !important;
  --n-border-radius: 10px !important;
  --n-height: 46px !important;
  --n-font-size: 15px !important;
}

/* 光泽扫光效果 */
.wh-full button.n-button--primary-type.h-9.w-full::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 150, 0.18), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.55s ease !important;
  pointer-events: none !important;
}

.wh-full button.n-button--primary-type.h-9.w-full:hover {
  background: linear-gradient(135deg, #7d1424 0%, #b02a2a 28%, #cc3530 55%, #dba030 80%, #b08020 100%) !important;
  box-shadow:
    0 6px 26px rgba(120, 20, 35, 0.72),
    0 3px 12px rgba(200, 145, 42, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}

.wh-full button.n-button--primary-type.h-9.w-full:hover::after {
  left: 150% !important;
}

.wh-full button.n-button--primary-type.h-9.w-full:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 2px 8px rgba(120, 20, 35, 0.5),
    0 1px 4px rgba(180, 120, 30, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

.wh-full button.n-button--primary-type.h-9.w-full .n-button__content {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
  position: relative !important;
  z-index: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* 覆盖 NaiveUI 按钮 border/state overlay */
.wh-full button.n-button--primary-type.h-9.w-full .n-button__border,
.wh-full button.n-button--primary-type.h-9.w-full .n-button__state-border {
  display: none !important;
}

/* 9. Send 验证码按钮 */
.wh-full button.n-button--primary-type:not(.h-9) {
  --n-color: #6b1120 !important;
  --n-color-hover: #8b1a2a !important;
  --n-color-pressed: #500e18 !important;
  --n-border: 1px solid rgba(120, 20, 35, 0.65) !important;
  --n-border-hover: 1px solid rgba(150, 28, 45, 0.9) !important;
  --n-text-color: #f0d0a0 !important;
  --n-text-color-hover: #fff8e8 !important;
  --n-border-radius: 0 10px 10px 0 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* 10. 语言切换按钮 */
.wh-full button.n-button--default-type.n-button--medium-type {
  --n-text-color: rgba(155, 115, 70, 0.75) !important;
  --n-border: 1px solid rgba(120, 80, 35, 0.32) !important;
  --n-border-hover: 1px solid rgba(200, 145, 42, 0.5) !important;
  --n-color: transparent !important;
  --n-color-hover: rgba(200, 145, 42, 0.07) !important;
  --n-border-radius: 6px !important;
  font-size: 12px !important;
}

/* 11. 链接（Register / Forgot password） */
.wh-full .p-6 a,
.wh-full .n-card__content a {
  color: rgba(200, 145, 42, 0.82) !important;
  text-decoration: none !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}
.wh-full .p-6 a:hover,
.wh-full .n-card__content a:hover {
  color: #f0d080 !important;
  text-shadow: 0 0 7px rgba(200, 145, 42, 0.55) !important;
}

/* 12. 普通内容文字 */
.wh-full .n-card__content .p-6 {
  color: #c5aa80 !important;
}

/* 13. Checkbox（同意服务条款） */
.wh-full .n-checkbox {
  --n-border: 1px solid rgba(140, 90, 40, 0.5) !important;
  --n-border-checked: 1px solid #c8912a !important;
  --n-color-checked: #7a1520 !important;
  --n-check-mark-color: #f0d080 !important;
  --n-label-text-color: #b09060 !important;
  --n-text-color: #b09060 !important;
}

/* 14. 输入框组圆角配合（Email + Send 按钮组合） */
.wh-full .n-input-group .n-input.n-input--resizable {
  border-radius: 10px 0 0 10px !important;
}
.wh-full .n-input-group .n-input.n-input--resizable + button {
  border-radius: 0 10px 10px 0 !important;
}

/* ===== end 登录页美化 v2 ===== */

/* ============================================================
   用户面板美化 v1 — 女皇云机场 · 皇室红金深色风格
   2026-06-12 首发，CDP 真实选择器验证，覆盖所有面板页
   (Dashboard / My Orders / My Invitation / Purchase Subscription /
    Access Point Status / User Center / My Tickets / Transfer Data)
   颜色体系与登录页美化 v2 完全一致 — 深暗酒红卡片 + 红金渐变按钮
   + 暖金文字 + 系统字体栈（不依赖外部 CDN）
   ============================================================ */

/* ===== 用户面板美化 v1 ===== */

/* 1. 皇室红金配色变量 */
:root {
  --rq-red-deep:       #5c0d1a;
  --rq-red:            #8c1a2a;
  --rq-red-mid:        #a82535;
  --rq-red-bright:     #c83040;
  --rq-red-glow:       rgba(140, 26, 42, 0.45);
  --rq-gold-deep:      #7a5010;
  --rq-gold:           #c89030;
  --rq-gold-mid:       #dca840;
  --rq-gold-light:     #f0d080;
  --rq-gold-pale:      #fff3cc;
  --rq-gold-glow:      rgba(200, 144, 48, 0.35);
  --rq-bg-deep:        #0c0508;
  --rq-bg-secondary:   #1a0e14;
  --rq-bg-sider:       rgba(20, 10, 16, 0.97);
  --rq-bg-card:        rgba(26, 12, 18, 0.94);
  --rq-bg-header:      rgba(18, 8, 14, 0.97);
  --rq-text:           #e8d5b5;
  --rq-text-secondary: #b09060;
  --rq-text-muted:     #7a6040;
  --rq-border:         rgba(185, 130, 50, 0.22);
  --rq-border-mid:     rgba(200, 144, 48, 0.40);
  --rq-border-bright:  rgba(220, 168, 64, 0.70);
  --rq-gradient-btn:   linear-gradient(135deg, #6b1120 0%, #9e2525 28%, #b83028 55%, #c89030 80%, #a07020 100%);
  --rq-gradient-text:  linear-gradient(95deg, #9a6818 5%, #f0d080 38%, #ffe090 55%, #e0b050 75%, #9a6818 95%);
}

/* 2. 全局背景 — 深暗酒红 */
body {
  background: radial-gradient(ellipse at 30% 20%, #1e0810 0%, #0c0508 50%, #08030a 100%) !important;
  color: var(--rq-text) !important;
  font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans CN","Noto Sans CJK SC",sans-serif !important;
}
body::before {
  background:
    radial-gradient(ellipse 700px 450px at 20% 30%, rgba(140,26,42,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 550px 380px at 80% 70%, rgba(200,144,48,0.05) 0%, transparent 70%) !important;
}

/* 3. 主内容区背景 */
.flex-1.overflow-hidden,
.cus-scroll-y,
.cus-scroll-y.wh-full {
  background-color: var(--rq-bg-deep) !important;
  background: var(--rq-bg-deep) !important;
}

/* 4. 侧边栏 */
.n-layout-sider,
.n-layout-sider-scroll-container {
  background: var(--rq-bg-sider) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-right: 1px solid var(--rq-border) !important;
}
.n-layout-sider__border {
  background: var(--rq-border) !important;
  width: 1px !important;
}

/* 5. 顶部导航栏 */
.h-15,
.h-15.f-c-c,
.h-15.f-c-c.relative,
.flex.items-center.bg-white {
  background: var(--rq-bg-header) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--rq-border) !important;
}

/* 站名 title-text — 金色渐变（覆盖旧紫色） */
.title-text,
h2.title-text,
.title-text.font-bold,
.h-15 .title-text,
.h-15 h2.title-text {
  background: var(--rq-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 6px rgba(200,144,48,0.45)) !important;
  color: transparent !important;
}

/* 6. 菜单 — CSS 变量 + 样式 */
.n-menu {
  background: transparent !important;
  --n-item-text-color:              var(--rq-text-secondary) !important;
  --n-item-text-color-hover:        var(--rq-gold-light) !important;
  --n-item-text-color-active:       var(--rq-gold-light) !important;
  --n-item-text-color-child-active: var(--rq-gold-mid) !important;
  --n-item-icon-color:              var(--rq-text-muted) !important;
  --n-item-icon-color-hover:        var(--rq-gold-mid) !important;
  --n-item-icon-color-active:       var(--rq-gold) !important;
  --n-item-color-hover:             rgba(185,130,50,0.08) !important;
  --n-item-color-active:            rgba(140,26,42,0.22) !important;
  --n-item-color-active-hover:      rgba(140,26,42,0.30) !important;
  --n-group-text-color:             var(--rq-text-muted) !important;
  --n-text-color:                   var(--rq-text-secondary) !important;
}
.n-menu-item-group-title {
  color: var(--rq-text-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.n-menu .n-menu-item-content {
  border-radius: 10px !important;
  margin: 2px 8px !important;
  transition: all 0.25s ease !important;
}
.n-menu .n-menu-item-content:hover {
  background: rgba(185,130,50,0.09) !important;
}
.n-menu .n-menu-item-content--selected,
.n-menu .n-menu-item-content--selected:hover {
  background: linear-gradient(135deg, rgba(140,26,42,0.28), rgba(90,15,26,0.18)) !important;
  box-shadow: inset 0 0 12px rgba(140,26,42,0.15) !important;
}
/* 选中指示条 — 改为金红渐变 */
.n-menu .n-menu-item-content--selected::before {
  background: linear-gradient(180deg, var(--rq-gold), var(--rq-red-mid)) !important;
}

/* 7. 卡片 — 高优先级覆盖旧登录页规则 */
/* 旧规则 .flex-1.flex-col.overflow-hidden .n-card 有 !important + 高特异性，
   使用更长选择器链确保在同等 !important 下以顺序胜出（此段在文件末尾） */
html body .n-layout .n-card,
html body div .n-card,
html body .n-card,
html body .n-card.n-card--bordered,
.flex-1.flex-col.overflow-hidden .n-card,
.f-c-c .n-card,
div[class*="justify-center"] > .n-card {
  background: var(--rq-bg-card) !important;
  --n-color: var(--rq-bg-card) !important;
  --n-color-embedded: rgba(22,10,17,0.98) !important;
  border: 1px solid var(--rq-border) !important;
  --n-border-color: var(--rq-border) !important;
  --n-text-color: var(--rq-text) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 1px rgba(185,130,50,0.08),
    0 8px 32px rgba(0,0,0,0.55),
    0 0 40px rgba(140,26,42,0.05) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  color: var(--rq-text) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  position: relative !important;
}
html body .n-card:hover,
html body .n-card.n-card--bordered:hover {
  border-color: var(--rq-border-mid) !important;
  box-shadow:
    0 0 0 1px rgba(200,144,48,0.15),
    0 12px 40px rgba(0,0,0,0.6),
    0 0 50px rgba(140,26,42,0.1) !important;
  transform: translateY(-2px) !important;
}
/* 卡片顶端金色装饰线 */
html body .n-card::before,
html body .n-card.n-card--bordered::before,
.flex-1.flex-col.overflow-hidden .n-card::before,
.f-c-c .n-card::before,
div[class*="justify-center"] > .n-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(200,144,48,0.6), rgba(230,180,60,0.9), rgba(200,144,48,0.6), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: 0 !important;
  animation: none !important;
}
.n-card-header {
  border-bottom: 1px solid var(--rq-border) !important;
  color: var(--rq-text) !important;
}
.n-card-header .n-card-header__main,
.n-card > .n-card-header .n-card-header__main {
  color: var(--rq-text) !important;
  font-weight: 600 !important;
}
.n-card__content {
  color: var(--rq-text) !important;
}

/* 8. List / 快捷列表 (Dashboard Shortcut) */
.n-list {
  background: transparent !important;
  --n-text-color: var(--rq-text) !important;
  --n-border-color: var(--rq-border) !important;
  --n-color: transparent !important;
}
.n-list .n-list-item {
  color: var(--rq-text) !important;
  border-bottom: 1px solid rgba(185,130,50,0.12) !important;
  transition: background 0.25s !important;
}
.n-list .n-list-item__divider {
  background: var(--rq-border) !important;
}
.n-list-item__main { color: var(--rq-text) !important; }
.n-list .n-list-item .text-base,
.n-list .n-list-item > div,
.n-list .n-list-item .flex > div { color: var(--rq-text) !important; }
.n-list .n-list-item .text-sm,
.n-list .n-list-item .text-gray-500,
.n-list .n-list-item [class*="text-gray"] { color: var(--rq-text-secondary) !important; }
.n-list .n-list-item.cursor-pointer:hover {
  background: rgba(185,130,50,0.07) !important;
}

/* 9. 统计数值 (钱包余额 / 邀请收益) */
.n-statistic .n-statistic-value__content,
.n-statistic-value__content {
  background: var(--rq-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 10. 主按钮 — 红金渐变（与登录页 Login 按钮一致） */
.n-button--primary-type {
  background: var(--rq-gradient-btn) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  --n-text-color: #fff !important;
  --n-text-color-hover: #fff !important;
  --n-text-color-pressed: #fff !important;
  --n-color: transparent !important;
  --n-color-hover: transparent !important;
  --n-border: none !important;
  --n-border-hover: none !important;
  box-shadow:
    0 4px 16px rgba(120,20,35,0.5),
    0 2px 8px rgba(180,130,40,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  transition: all 0.28s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.n-button--primary-type:hover {
  background: linear-gradient(135deg, #7d1424 0%, #b02a2a 28%, #cc3530 55%, #dba030 80%, #b08020 100%) !important;
  box-shadow:
    0 6px 22px rgba(120,20,35,0.65),
    0 3px 10px rgba(200,144,48,0.35),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
  transform: translateY(-2px) !important;
}
.n-button--primary-type .n-button__border,
.n-button--primary-type .n-button__state-border { display: none !important; }
.n-button--primary-type .n-button__content {
  color: #fff !important;
  font-weight: 600 !important;
  position: relative !important;
  z-index: 1 !important;
}
/* 光泽扫过 */
.n-button--primary-type::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 55% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,230,150,0.16), transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.55s ease !important;
  pointer-events: none !important;
}
.n-button--primary-type:hover::after { left: 150% !important; }

/* 默认按钮 */
.n-button--default-type {
  background: rgba(140,26,42,0.06) !important;
  border: 1px solid var(--rq-border) !important;
  border-radius: 10px !important;
  color: var(--rq-gold-mid) !important;
  --n-text-color: var(--rq-gold-mid) !important;
  --n-color: rgba(140,26,42,0.06) !important;
  --n-border: 1px solid var(--rq-border) !important;
}
.n-button--default-type:hover {
  background: rgba(185,130,50,0.10) !important;
  border-color: var(--rq-border-mid) !important;
}

/* 11. 输入框 */
.n-input {
  --n-color:             rgba(28,14,20,0.85) !important;
  --n-color-focus:       rgba(35,18,25,0.95) !important;
  --n-text-color:        var(--rq-text) !important;
  --n-placeholder-color: var(--rq-text-muted) !important;
  --n-border:            1px solid var(--rq-border) !important;
  --n-border-hover:      1px solid var(--rq-border-mid) !important;
  --n-border-focus:      1px solid var(--rq-border-bright) !important;
  --n-box-shadow-focus:  0 0 0 3px rgba(200,144,48,0.12), 0 0 12px rgba(200,144,48,0.14) !important;
  --n-caret-color:       var(--rq-gold-light) !important;
  --n-border-radius:     10px !important;
  border-radius: 10px !important;
}
.n-input .n-input__input-el {
  color: var(--rq-text) !important;
  caret-color: var(--rq-gold-light) !important;
}
.n-input .n-input__placeholder span,
.n-input .n-input__placeholder { color: var(--rq-text-muted) !important; }

/* 12. Select / Dropdown */
.n-base-selection {
  --n-color:        rgba(28,14,20,0.85) !important;
  --n-text-color:   var(--rq-text) !important;
  --n-border:       1px solid var(--rq-border) !important;
  --n-border-hover: 1px solid var(--rq-border-mid) !important;
  --n-border-focus: 1px solid var(--rq-border-bright) !important;
}
.n-base-select-menu, .n-internal-select-menu,
.n-dropdown-menu, .n-popover-body, .n-popover:not(.n-popover--raw) {
  background: var(--rq-bg-card) !important;
  border: 1px solid var(--rq-border) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
.n-dropdown-option:hover, .n-dropdown-option--pending,
.n-base-select-option--pending { background: rgba(185,130,50,0.10) !important; }
.n-base-select-option--selected {
  background: rgba(140,26,42,0.18) !important;
  color: var(--rq-gold-light) !important;
}

/* 13. 标签页 */
.n-tabs .n-tabs-bar {
  background: linear-gradient(90deg, var(--rq-red), var(--rq-gold)) !important;
}
.n-tabs .n-tabs-tab--active { color: var(--rq-gold-light) !important; font-weight: 600 !important; }
.n-tabs .n-tabs-tab { color: var(--rq-text-muted) !important; }
.n-tabs .n-tabs-tab:hover { color: var(--rq-gold-mid) !important; }

/* 14. 数据表格 */
.n-data-table .n-data-table-wrapper {
  background: var(--rq-bg-card) !important;
  border: 1px solid var(--rq-border) !important;
  border-radius: 16px !important;
}
.n-data-table .n-data-table-thead { background: rgba(140,26,42,0.08) !important; }
.n-data-table .n-data-table-th {
  background: transparent !important;
  color: var(--rq-gold-mid) !important;
  border-bottom: 1px solid var(--rq-border) !important;
  font-weight: 600 !important;
}
.n-data-table .n-data-table-td {
  border-bottom: 1px solid rgba(185,130,50,0.07) !important;
  color: var(--rq-text) !important;
}
.n-data-table .n-data-table-tr:hover .n-data-table-td {
  background: rgba(140,26,42,0.06) !important;
}

/* 15. 进度条 */
.n-progress .n-progress-graph-line-fill {
  background: linear-gradient(90deg, var(--rq-red-mid), var(--rq-gold)) !important;
}

/* 16. Tag */
.n-tag--primary-type {
  background: rgba(140,26,42,0.15) !important;
  color: var(--rq-gold-mid) !important;
  border: 1px solid rgba(185,130,50,0.25) !important;
}

/* 17. Switch */
.n-switch.n-switch--active .n-switch__rail {
  background: linear-gradient(135deg, var(--rq-red), var(--rq-red-mid)) !important;
  box-shadow: 0 0 10px rgba(140,26,42,0.4) !important;
}

/* 18. Loading bar */
.n-loading-bar-container .n-loading-bar {
  background: linear-gradient(90deg, var(--rq-red), var(--rq-gold), var(--rq-red)) !important;
}

/* 19. Skeleton */
.n-skeleton {
  background: linear-gradient(90deg,
    rgba(140,26,42,0.06) 25%, rgba(200,144,48,0.10) 50%, rgba(140,26,42,0.06) 75%) !important;
}

/* 20. Divider */
.n-divider .n-divider__line { background-color: var(--rq-border) !important; }
.n-divider .n-divider__title { color: var(--rq-text-secondary) !important; }

/* 21. 链接 */
a { color: var(--rq-gold-mid) !important; transition: color 0.25s !important; }
a:hover { color: var(--rq-gold-light) !important; text-shadow: 0 0 6px rgba(200,144,48,0.4) !important; }

/* 22. Tailwind 文字/背景通用覆盖 */
.text-gray-400, .text-gray-500 { color: var(--rq-text-secondary) !important; }
.bg-white  { background: var(--rq-bg-card) !important; }
.bg-gray-800 { background: var(--rq-bg-secondary) !important; }
.border-b, [class*="border-gray-6"] { border-color: var(--rq-border) !important; }
.color-primary, [class*="color-primary"] { color: var(--rq-gold) !important; }
.bg-orange-600 { background: linear-gradient(135deg, var(--rq-gold), var(--rq-gold-deep)) !important; }

/* 价格/金额大字 */
.card-item .font-bold, .card-item .font-semibold {
  background: var(--rq-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 23. card-item 套餐卡片 */
.card-item {
  background: var(--rq-bg-card) !important;
  border: 1px solid var(--rq-border) !important;
  border-radius: 16px !important;
}
.card-item::before {
  background: linear-gradient(135deg, rgba(140,26,42,0.06), transparent 60%) !important;
}
.card-item:hover { border-color: var(--rq-border-mid) !important; }

/* 24. Modal / Dialog */
.n-modal-mask { background: rgba(5,2,8,0.78) !important; }
.n-modal, .n-dialog {
  background: var(--rq-bg-card) !important;
  border: 1px solid var(--rq-border) !important;
  border-radius: 18px !important;
}

/* 25. Drawer */
.n-drawer .n-drawer-content { background: var(--rq-bg-secondary) !important; }
.n-drawer .n-drawer-header { border-bottom: 1px solid var(--rq-border) !important; }

/* 26. Alert */
.n-alert { background: var(--rq-bg-card) !important; border-color: var(--rq-border) !important; }

/* 27. Pagination */
.n-pagination .n-pagination-item--active {
  background: linear-gradient(135deg, var(--rq-red-mid), var(--rq-red-deep)) !important;
  border-color: var(--rq-red-mid) !important;
  box-shadow: 0 2px 10px var(--rq-red-glow) !important;
}

/* 28. Checkbox / Radio */
.n-checkbox .n-checkbox-box--checked {
  background: var(--rq-red) !important;
  border-color: var(--rq-red) !important;
}
.n-radio .n-radio__dot--checked { background: var(--rq-gold) !important; }

/* 29. Form */
.n-form-item .n-form-item-label { color: var(--rq-text-secondary) !important; }

/* 30. 滚动条 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rq-red-deep), var(--rq-red)) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--rq-red), var(--rq-gold-deep)) !important;
}
::-webkit-scrollbar-track { background: var(--rq-bg-deep) !important; }

/* 31. 选中文字 */
::selection { background: rgba(140,26,42,0.32) !important; color: var(--rq-gold-pale) !important; }

/* 32. Footer / Tooltip / Badge / Avatar / Back-top */
footer, .n-layout-footer {
  background: transparent !important;
  border-top: 1px solid var(--rq-border) !important;
  color: var(--rq-text-muted) !important;
}
.n-tooltip {
  background: var(--rq-bg-card) !important;
  border: 1px solid var(--rq-border) !important;
}
.n-badge .n-badge-sup {
  background: linear-gradient(135deg, var(--rq-red), var(--rq-red-deep)) !important;
}
.n-avatar {
  border: 2px solid rgba(185,130,50,0.35) !important;
  box-shadow: 0 0 12px rgba(140,26,42,0.2) !important;
}
.n-back-top {
  background: linear-gradient(135deg, var(--rq-red), var(--rq-red-deep)) !important;
  box-shadow: 0 4px 16px var(--rq-red-glow) !important;
}

/* 33. Collapse */
.n-collapse .n-collapse-item__header { color: var(--rq-text) !important; }
.n-collapse .n-collapse-item__header:hover { color: var(--rq-gold-light) !important; }
.n-collapse .n-collapse-item__content-inner { color: var(--rq-text-secondary) !important; }

/* 34. Message / Notification / Empty */
.n-message .n-message__content {
  background: var(--rq-bg-card) !important;
  border: 1px solid var(--rq-border) !important;
}
.n-notification {
  background: var(--rq-bg-card) !important;
  border: 1px solid var(--rq-border) !important;
}
.n-empty .n-empty__description { color: var(--rq-text-muted) !important; }
.n-empty .n-empty__icon { color: var(--rq-text-muted) !important; opacity: 0.5; }

/* 35. 标题文字 */
h1, h2, h3 { color: var(--rq-text) !important; }
h4, h5, h6 { color: var(--rq-text-secondary) !important; }

/* ===== end 用户面板美化 v1 ===== */