/* Shared user-facing visual system based on the voice community interface. */
:root {
  --vc-bg: #17191d;
  --vc-bg-deep: #0f1115;
  --vc-sidebar: #222429;
  --vc-panel: #1e2126;
  --vc-panel-raised: #262a30;
  --vc-control: #191b20;
  --vc-line: rgba(255, 255, 255, .09);
  --vc-line-strong: rgba(255, 255, 255, .14);
  --vc-text: #f4f7fb;
  --vc-text-soft: #d7dde6;
  --vc-muted: #9aa3af;
  --vc-accent: #20c875;
  --vc-accent-hover: #35d486;
  --vc-accent-ink: #071810;
  --vc-info: #5aa7ff;
  --vc-warn: #f2b84b;
  --vc-danger: #f06464;
  --vc-price: #ffd166;
  color-scheme: dark;
}

html[data-theme="净蓝商务"] { --vc-accent: #5aa7ff; --vc-accent-hover: #78b8ff; --vc-accent-ink: #071421; }
html[data-theme="暗夜游戏"] { --vc-accent: #20c875; --vc-accent-hover: #35d486; --vc-accent-ink: #071810; }
html[data-theme="软橙活力"] { --vc-accent: #ff8a4c; --vc-accent-hover: #ff9d69; --vc-accent-ink: #241006; }
html[data-theme="电竞霓虹"] { --vc-accent: #20c875; --vc-accent-hover: #35d486; --vc-accent-ink: #071810; }

html,
body,
#app {
  min-height: 100%;
  color: var(--vc-text) !important;
  background: var(--vc-bg) !important;
}

body {
  letter-spacing: 0;
  background: linear-gradient(135deg, #202327 0%, #121417 50%, #202327 100%) fixed !important;
}

html {
  --primary: var(--vc-accent) !important;
  --primary-light: var(--vc-accent-hover) !important;
  --primary-dark: var(--vc-accent) !important;
  --accent: var(--vc-info) !important;
  --gold: var(--vc-warn) !important;
  --price: var(--vc-price) !important;
  --bg-page: var(--vc-bg) !important;
  --bg-card: var(--vc-panel) !important;
  --bg-card-hover: var(--vc-panel-raised) !important;
  --bg-input: var(--vc-control) !important;
  --border: var(--vc-line) !important;
  --border-light: var(--vc-line) !important;
  --text-primary: var(--vc-text) !important;
  --text-secondary: var(--vc-text-soft) !important;
  --text-muted: var(--vc-muted) !important;
  --text-placeholder: #737c88 !important;
  --el-color-primary: var(--vc-accent) !important;
  --el-bg-color: var(--vc-panel) !important;
  --el-bg-color-page: var(--vc-bg) !important;
  --el-bg-color-overlay: #25282e !important;
  --el-text-color-primary: var(--vc-text) !important;
  --el-text-color-regular: var(--vc-text-soft) !important;
  --el-text-color-secondary: var(--vc-muted) !important;
  --el-text-color-placeholder: #737c88 !important;
  --el-border-color: var(--vc-line-strong) !important;
  --el-border-color-light: var(--vc-line) !important;
  --el-border-color-lighter: rgba(255, 255, 255, .06) !important;
  --el-fill-color: var(--vc-panel-raised) !important;
  --el-fill-color-light: rgba(255, 255, 255, .06) !important;
  --el-fill-color-lighter: rgba(255, 255, 255, .04) !important;
  --el-fill-color-blank: var(--vc-control) !important;
  --el-mask-color: rgba(0, 0, 0, .68) !important;
}

.home-container,
.user-container,
.page-container,
.page-layout,
.page-body,
.main-content,
.content-wrapper,
.auth-page,
.login-container,
.register-container {
  color: var(--vc-text) !important;
  background: transparent !important;
}

.top-header,
.site-header,
.header,
.navbar,
.game-bar {
  color: var(--vc-text) !important;
  background: rgba(29, 32, 37, .96) !important;
  border-color: var(--vc-line) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(14px);
}

.top-header a,
.site-header a,
.header a,
.navbar a,
.header-action,
.action-text-btn {
  color: var(--vc-text-soft) !important;
}

.top-header a:hover,
.site-header a:hover,
.header a:hover,
.navbar a:hover,
.header-action:hover,
.action-text-btn:hover {
  color: var(--vc-accent) !important;
}

.logo-text,
.brand-name,
.site-name {
  color: #ffffff !important;
  letter-spacing: 0 !important;
}

.logo-icon {
  background-color: rgba(255, 255, 255, .07) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3) !important;
}

.announcement-bar {
  color: #ecfff5 !important;
  background: #176b47 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
}

.search-bar,
.search-box,
.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-input-number,
.el-date-editor,
.el-cascader .el-input__wrapper {
  color: var(--vc-text) !important;
  background: var(--vc-control) !important;
  border-color: var(--vc-line) !important;
  box-shadow: inset 0 0 0 1px var(--vc-line) !important;
}

.search-bar:focus-within,
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
  border-color: color-mix(in srgb, var(--vc-accent) 58%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-accent) 16%, transparent), inset 0 0 0 1px var(--vc-accent) !important;
}

.el-input__inner,
.el-textarea__inner,
.el-select__selected-item,
.el-select__placeholder,
.el-radio__label,
.el-checkbox__label {
  color: var(--vc-text) !important;
}

.search-btn,
.sell-btn,
.hero-btn-primary,
.el-button--primary,
.primary-btn,
.submit-btn {
  color: var(--vc-accent-ink) !important;
  background: var(--vc-accent) !important;
  border-color: var(--vc-accent) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--vc-accent) 20%, transparent) !important;
}

.search-btn:hover,
.sell-btn:hover,
.hero-btn-primary:hover,
.el-button--primary:hover,
.primary-btn:hover,
.submit-btn:hover {
  color: var(--vc-accent-ink) !important;
  background: var(--vc-accent-hover) !important;
  border-color: var(--vc-accent-hover) !important;
}

.el-button--default,
.tool-btn,
.secondary-btn,
.filter-btn {
  color: var(--vc-text-soft) !important;
  background: #2b2f35 !important;
  border-color: var(--vc-line-strong) !important;
}

.el-card,
.product-card,
.seller-card,
.why-section,
.why-card,
.profile-card,
.stats-card,
.menu-card,
.info-card,
.security-card,
.notification-card,
.order-card,
.detail-card,
.form-card,
.login-card,
.register-card,
.auth-card,
.coupon-card,
.content-card {
  color: var(--vc-text) !important;
  background: var(--vc-panel) !important;
  border: 1px solid var(--vc-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22) !important;
}

.product-card:hover,
.seller-card:hover,
.why-card:hover,
.order-card:hover {
  background: var(--vc-panel-raised) !important;
  border-color: color-mix(in srgb, var(--vc-accent) 45%, var(--vc-line)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3) !important;
  transform: translateY(-2px) !important;
}

.section-title,
.card-title,
.menu-title,
.product-title,
.nickname,
.info-value,
.security-title,
.notif-title,
.order-title,
.detail-title,
.form-title,
.el-form-item__label,
.el-descriptions__label,
.el-descriptions__content {
  color: var(--vc-text) !important;
}

.section-subtitle,
.seller-row,
.unit,
.stat-label,
.info-label,
.security-desc,
.notif-desc,
.order-meta,
.detail-meta,
.empty-text,
.helper-text,
.el-form-item__error {
  color: var(--vc-muted) !important;
}

.price,
.price-sign,
.amount,
.order-amount {
  color: var(--vc-price) !important;
}

.hot-word,
.game-tab,
.category-tab,
.filter-item,
.type-tag,
.game-tag,
.el-tag {
  color: var(--vc-text-soft) !important;
  background: rgba(255, 255, 255, .055) !important;
  border-color: var(--vc-line) !important;
  box-shadow: none !important;
}

.game-tab.active,
.category-tab.active,
.filter-item.active,
.el-tabs__item.is-active,
.el-menu-item.is-active {
  color: var(--vc-accent) !important;
  background: color-mix(in srgb, var(--vc-accent) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--vc-accent) 38%, transparent) !important;
}

.el-menu,
.el-menu-item,
.el-sub-menu__title {
  color: var(--vc-text-soft) !important;
  background: transparent !important;
  border-color: var(--vc-line) !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .06) !important;
}

.hero-banner {
  color: var(--vc-text) !important;
  border: 1px solid var(--vc-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .32) !important;
}

.hero-banner::after {
  background: linear-gradient(90deg, rgba(15, 17, 21, .86), rgba(15, 17, 21, .22) 68%, transparent) !important;
}

.hero-title,
.hero-subtitle,
.hero-desc {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7) !important;
}

.el-dialog,
.el-drawer,
.el-message-box,
.el-popover,
.el-popper,
.el-dropdown__popper,
.el-select-dropdown {
  color: var(--vc-text) !important;
  background: #24272d !important;
  border-color: var(--vc-line-strong) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .42) !important;
}

.el-dialog__title,
.el-drawer__title,
.el-message-box__title,
.el-dropdown-menu__item,
.el-select-dropdown__item {
  color: var(--vc-text) !important;
}

.el-dropdown-menu__item:hover,
.el-select-dropdown__item.is-hovering {
  color: var(--vc-accent) !important;
  background: rgba(255, 255, 255, .06) !important;
}

.el-table,
.el-table tr,
.el-table th.el-table__cell,
.el-table td.el-table__cell,
.el-descriptions__body,
.el-descriptions__table,
.el-pagination button,
.el-pager li {
  color: var(--vc-text-soft) !important;
  background: var(--vc-panel) !important;
  border-color: var(--vc-line) !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: var(--vc-panel-raised) !important;
}

.el-empty__description p,
.el-pagination,
.el-pagination__total,
.el-pagination__jump {
  color: var(--vc-muted) !important;
}

.home-footer,
.site-footer,
footer {
  color: var(--vc-muted) !important;
  background: #111317 !important;
  border-top: 1px solid var(--vc-line) !important;
}

.home-footer a,
.site-footer a,
footer a {
  color: var(--vc-text-soft) !important;
}

.el-loading-mask {
  background: rgba(15, 17, 21, .78) !important;
}

@media (max-width: 980px) {
  .top-header,
  .site-header,
  .header,
  .navbar {
    backdrop-filter: none;
  }

  .header-inner {
    background: #1d2025 !important;
  }

  .el-card,
  .product-card,
  .profile-card,
  .stats-card,
  .menu-card,
  .info-card,
  .order-card,
  .form-card {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}