/* ==========================================================================
   先锋在线 · 会员中心主题皮肤
   参考主题：MDUI 1.0.2 视觉体系（浅蓝顶栏 + 白色卡片 + 全屏动漫背景）
   所有规则限定在 html[theme] 下，避免影响 default 主题。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
html[theme] {
  --xf-primary: #91c2ed;
  --xf-primary-deep: #7fb2e2;
  --xf-accent: #536dfe;
  --xf-accent-deep: #4457d8;
  --xf-avatar: #3f51b5;
  --xf-success: #4caf50;
  --xf-warning: #ff9800;
  --xf-danger: #f44336;
  --xf-ink: #212121;
  --xf-text: #333333;
  --xf-muted: #757575;
  --xf-muted-2: #979797;
  --xf-placeholder: #bdbdbd;
  --xf-line: #e0e0e0;
  --xf-line-2: #e4e4e4;
  --xf-soft: #fafafa;
  --xf-soft-2: #f5f5f5;
  --xf-card: #ffffff;
  --xf-radius: 2px;
  --xf-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
  --xf-font: Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

html[theme] body {
  --color-primary: #536dfe;
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-danger: #f44336;
  --color-info: #757575;
  --color-text-tips: #757575;
  --color-menu-bg: #ffffff;
  --color-menu-active-bg: #f5f9ff;
  --color-menu-hover-bg: #fafafa;
  --color-menu-text: #333333;
  --color-menu-text-active: #536dfe;
  --color-price-text: #536dfe;
  --color-discount-num: #ff9800;
  --color-cash-num: #536dfe;
  font-family: var(--xf-font);
  color: var(--xf-text);
}

html[theme] .template {
  position: relative;
  z-index: 1;
  font-family: var(--xf-font);
}

/* --------------------------------------------------------------------------
   2. 全屏背景
   -------------------------------------------------------------------------- */
html[theme] body.xf-bg-ready .template,
html[theme] body.xf-bg-ready .template .el-container,
html[theme] body.xf-bg-ready .template .el-main,
html[theme] body.xf-bg-ready > .product,
html[theme] body.xf-bg-ready > .product .el-container,
html[theme] body.xf-bg-ready > .product .el-main {
  background-color: transparent !important;
  background-image: none !important;
}

/* 背景图由 theme-xianfeng-bg.js 写入 body 内联样式，这里只保留兜底色 */
html[theme] body.xf-bg-ready {
  background-color: #e8eef7;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 极淡压暗层，保证白卡对比；参考图背景保持明亮 */
html[theme] body.xf-bg-ready::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, .02);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. 顶栏 56px 纯色浅蓝（全宽，固定在侧栏之上）
   -------------------------------------------------------------------------- */
html[theme] .el-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  height: 56px !important;
  line-height: 56px;
  padding: 0 16px !important;
  background: var(--xf-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* 侧栏折叠后，顶栏左侧内容回到最左 */
html[theme] body.xf-aside-collapsed .el-header {
  padding-left: 16px !important;
}

html[theme] .el-header .header-left,
html[theme] .el-header .header-right {
  display: flex;
  align-items: center;
  height: 56px;
}

html[theme] .el-header .header-left {
  gap: 10px;
}

html[theme] .el-header .header-right {
  gap: 14px;
}

/* 汉堡按钮 */
html[theme] .xf-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

html[theme] .xf-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: #ffffff;
}

/* 隐藏旧的菜单图片，改用 CSS 汉堡 */
html[theme] .el-header .menu-img {
  display: none !important;
}

/* 返回箭头 */
html[theme] .xf-topbar-back {
  width: 20px;
  height: 20px;
  margin: 0;
  border: 0;
  transform: none;
  border-radius: 0;
  opacity: 1;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

html[theme] .xf-topbar-back::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 15px;
  height: 2px;
  background: #ffffff;
}

html[theme] .xf-topbar-back::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

html[theme] .xf-topbar-logo {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 2px;
}

html[theme] .xf-topbar-brand {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

html[theme] .xf-topbar-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

html[theme] .xf-topbar-page {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, .92);
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .45);
  white-space: nowrap;
}

/* 右侧图标 */
html[theme] .el-header .header-right-item,
html[theme] .el-header .header-right-item i,
html[theme] .el-header .header-right-item span {
  color: #ffffff !important;
}

html[theme] .el-header .right-item img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
}

html[theme] .el-header .el-badge__content {
  background: #ffffff !important;
  color: var(--xf-accent) !important;
  border: 0 !important;
  font-size: 10px;
  line-height: 16px;
  height: 16px;
  padding: 0 5px;
}

/* 太阳 / 月亮切换 */
html[theme] .xf-dark-toggle {
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

html[theme] .xf-dark-toggle::after {
  display: none;
}

html[theme] .xf-dark-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: #ffffff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* 头像 */
html[theme] .el-header .el-dropdown-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

html[theme] .el-header .head-box {
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: var(--xf-avatar) !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

html[theme] .el-header .head-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html[theme] .el-header .right-icon {
  display: none !important;
}

/* 顶栏搜索（部分页面启用时保持可用） */
html[theme] .el-header .left-img {
  display: none;
}

html[theme] .el-header .el-autocomplete {
  margin-left: 8px;
}

/* --------------------------------------------------------------------------
   4. 侧边栏 272px
   -------------------------------------------------------------------------- */
html[theme] .el-aside {
  width: 272px !important;
  background: #ffffff !important;
  border-right: 1px solid var(--xf-line) !important;
  box-shadow: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 56px;
  box-sizing: border-box;
}

/* 顶栏汉堡：桌面折叠 / 展开侧栏 */
html[theme] body.xf-aside-collapsed .el-aside {
  display: none !important;
}

html[theme] .el-aside .ali-logo,
html[theme] .el-aside > .menu-alink {
  display: none !important;
}

html[theme] .menu-group-title {
  font-size: 11px;
  font-weight: 400;
  color: var(--xf-muted);
  letter-spacing: 0;
  padding: 16px 16px 6px;
  line-height: 1;
  user-select: none;
}

html[theme] .menu-group-title:first-child {
  padding-top: 14px;
}

html[theme] .menu-top {
  margin-top: 0;
  border-right: 0;
  background: transparent;
}

html[theme] .menu-top .el-menu-item,
html[theme] .menu-top .el-submenu__title {
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--xf-text) !important;
  border-radius: 0;
  position: relative;
  transition: background-color .15s;
}

html[theme] .menu-top .el-menu-item:hover,
html[theme] .menu-top .el-submenu__title:hover {
  background-color: var(--xf-soft) !important;
}

html[theme] .menu-top .el-menu-item.is-active {
  background-color: #f5f9ff !important;
  color: var(--xf-accent) !important;
}

html[theme] .menu-top .el-menu-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  background: var(--xf-primary);
}

html[theme] .menu-top .el-menu-item.is-active i,
html[theme] .menu-top .el-submenu__title i {
  color: inherit !important;
}

html[theme] .menu-top i.iconfont {
  font-size: 18px !important;
  margin-right: 0;
  width: 18px;
  text-align: center;
}

html[theme] .aside-menu-text {
  margin-left: 12px;
  font-size: 13px;
}

html[theme] .menu-top .el-submenu .el-menu-item {
  min-width: 0;
  padding-left: 46px !important;
  font-size: 13px;
}

html[theme] .line {
  display: none !important;
}

/* 移动端抽屉 */
html[theme] .drawer-menu {
  background: #ffffff;
}

html[theme] .drawer-menu .menu-top .el-menu-item {
  height: 46px;
  line-height: 46px;
}

/* --------------------------------------------------------------------------
   5. 内容区 / 卡片
   -------------------------------------------------------------------------- */
html[theme] .el-main {
  padding: 72px 16px 16px !important;
  background: transparent !important;
  overflow-x: hidden;
}

html[theme] .main-card {
  max-width: 1260px;
  margin: 0 auto;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 未改造的旧结构页面：整块 main-card 作为白色容器，避免内容直接透在背景图上 */
html[theme] .main-card:not(:has(.xf-card)) {
  background: var(--xf-card) !important;
  border: 1px solid var(--xf-line) !important;
  border-radius: var(--xf-radius);
  box-shadow: var(--xf-shadow);
  padding: 16px !important;
  box-sizing: border-box;
}

html[theme] .xf-card,
html[theme] .el-card {
  background: var(--xf-card) !important;
  border: 1px solid var(--xf-line);
  border-radius: var(--xf-radius);
  box-shadow: var(--xf-shadow);
  padding: 16px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

html[theme] .xf-card:last-child {
  margin-bottom: 0;
}

/* 兼容旧页面中的 main-card-title */
html[theme] .main-card-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--xf-ink);
  padding: 0 0 12px;
}

/* --------------------------------------------------------------------------
   6. Element UI 基础组件（Material 化）
   -------------------------------------------------------------------------- */
html[theme] .el-button {
  border-radius: var(--xf-radius);
  box-shadow: none;
  font-weight: 400;
  font-size: 13px;
  height: 32px;
  padding: 0 16px;
  border-color: var(--xf-line);
  color: var(--xf-text);
  transition: background-color .15s, border-color .15s;
}

html[theme] .el-button--primary {
  background: var(--xf-primary);
  border-color: var(--xf-primary);
  color: var(--xf-ink);
}

html[theme] .el-button--primary:hover,
html[theme] .el-button--primary:focus {
  background: var(--xf-primary-deep);
  border-color: var(--xf-primary-deep);
  color: var(--xf-ink);
}

html[theme] .el-button--text {
  color: var(--xf-accent);
  padding: 0 6px;
}

html[theme] .el-button--small {
  height: 28px;
  padding: 0 12px;
}

html[theme] .el-button.is-plain:hover {
  background: #f5f9ff;
  border-color: var(--xf-primary);
  color: var(--xf-ink);
}

html[theme] .el-input__inner,
html[theme] .el-textarea__inner {
  height: 32px;
  line-height: 32px;
  border-radius: var(--xf-radius);
  border-color: var(--xf-line);
  box-shadow: none;
  font-size: 13px;
  color: var(--xf-text);
  background: #ffffff;
}

html[theme] .el-textarea__inner {
  height: auto;
  line-height: 1.6;
  padding: 8px 12px;
}

html[theme] .el-input__inner:focus,
html[theme] .el-textarea__inner:focus {
  border-color: var(--xf-primary);
}

html[theme] .el-input__inner::placeholder,
html[theme] .el-textarea__inner::placeholder {
  color: var(--xf-placeholder);
}

html[theme] .el-form-item__label {
  font-size: 12px;
  color: var(--xf-muted);
}

/* 表格 */
html[theme] .el-table {
  font-size: 13px;
  color: var(--xf-text);
  background: transparent;
}

html[theme] .el-table th {
  background: var(--xf-soft) !important;
  color: var(--xf-muted);
  font-weight: 400;
  font-size: 12px;
  border-bottom: 1px solid var(--xf-line) !important;
  padding: 10px 0;
}

html[theme] .el-table td {
  border-bottom: 1px solid var(--xf-line-2);
  padding: 12px 0;
  font-size: 13px;
  color: var(--xf-text);
}

html[theme] .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fafafa;
}

html[theme] .el-table::before,
html[theme] .el-table__fixed-right::before,
html[theme] .el-table__fixed::before {
  display: none;
}

html[theme] .el-table .cell {
  line-height: 24px;
}

/* Tabs */
html[theme] .el-tabs__header {
  margin: 0 0 12px;
}

html[theme] .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--xf-line);
}

html[theme] .el-tabs__item {
  height: 38px;
  line-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  color: var(--xf-muted);
}

html[theme] .el-tabs__item.is-active {
  color: var(--xf-ink);
  font-weight: 500;
  background: #ffffff;
  border: 1px solid var(--xf-line);
  border-bottom-color: #ffffff;
}

html[theme] .el-tabs__item:hover {
  color: var(--xf-accent);
}

html[theme] .el-tabs__active-bar {
  display: none;
}

html[theme] .el-tabs__content {
  overflow: visible;
}

/* 分页 */
html[theme] .el-pagination {
  padding: 12px 0 0;
  font-weight: 400;
  color: var(--xf-muted);
}

html[theme] .el-pagination button,
html[theme] .el-pagination .el-pager li {
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: var(--xf-radius);
  background: var(--xf-soft) !important;
  color: var(--xf-muted);
  font-size: 12px;
  margin: 0 2px;
}

html[theme] .el-pagination .el-pager li.active {
  background: var(--xf-accent) !important;
  color: #ffffff !important;
}

html[theme] .el-pagination .el-pager li:hover {
  color: var(--xf-accent);
}

/* 下拉 / 弹窗 / 消息 */
html[theme] .el-dialog {
  border-radius: var(--xf-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

html[theme] .el-dialog__header {
  padding: 18px 20px 8px;
}

html[theme] .el-dialog__title,
html[theme] .dialog-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--xf-ink);
}

html[theme] .el-dialog__body {
  padding: 12px 20px 18px;
  font-size: 13px;
  color: var(--xf-text);
}

html[theme] .el-dropdown-menu {
  border-radius: var(--xf-radius);
  box-shadow: var(--xf-shadow);
  border: 1px solid var(--xf-line);
}

html[theme] .el-dropdown-menu__item {
  font-size: 13px;
  color: var(--xf-text);
}

html[theme] .el-dropdown-menu__item:hover {
  background: var(--xf-soft);
  color: var(--xf-accent);
}

html[theme] .el-select-dropdown__item {
  font-size: 13px;
}

html[theme] .el-switch.is-checked .el-switch__core {
  background-color: var(--xf-accent) !important;
  border-color: var(--xf-accent) !important;
}

html[theme] .el-checkbox__input.is-checked .el-checkbox__inner,
html[theme] .el-radio__input.is-checked .el-radio__inner {
  background-color: var(--xf-accent);
  border-color: var(--xf-accent);
}

html[theme] .el-checkbox__input.is-checked + .el-checkbox__label,
html[theme] .el-radio__input.is-checked + .el-radio__label {
  color: var(--xf-text);
}

html[theme] .el-loading-mask {
  background-color: rgba(255, 255, 255, .75);
}

html[theme] .el-message {
  border-radius: var(--xf-radius);
}

/* --------------------------------------------------------------------------
   7. 登录 / 注册 / 找回密码
   -------------------------------------------------------------------------- */
html[theme] #login .container-back {
  background: rgba(12, 17, 28, .58);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--xf-radius);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .6);
}

html[theme] #login .container-back .back-text {
  color: #ffffff;
}

html[theme] #login .container-back .text-level {
  color: rgba(255, 255, 255, .62);
}

html[theme] #login .container-before {
  background: var(--xf-card);
  border-radius: var(--xf-radius);
  box-shadow: var(--xf-shadow);
  border: 1px solid rgba(21, 24, 31, .04);
  right: 0;
}

html[theme] #login .login-text-title {
  color: var(--xf-ink);
  font-weight: 600;
}

html[theme] #login .login-text-regist,
html[theme] #login .login-text-regist a {
  color: var(--xf-muted);
}

html[theme] #login .login-text-regist a:hover {
  color: var(--xf-accent);
}

html[theme] #login .form-main .el-input__inner {
  border: 0;
  border-bottom: 1px solid var(--xf-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[theme] #login .form-main .el-input__inner:focus {
  border-bottom-color: var(--xf-accent);
}

html[theme] #login .form-main .el-button,
html[theme] #regist .form-main .el-button,
html[theme] #forget .form-main .el-button {
  border-radius: var(--xf-radius);
}

html[theme] #login .form-main .el-button--primary {
  background: var(--xf-accent);
  border-color: var(--xf-accent);
  color: #ffffff;
}

html[theme] #regist .form-main .el-input__inner,
html[theme] #forget .form-main .el-input__inner {
  border: 0;
  border-bottom: 1px solid var(--xf-line);
  border-radius: 0;
  background: transparent;
}

/* --------------------------------------------------------------------------
   8. 页面兼容（旧结构）
   -------------------------------------------------------------------------- */
html[theme] #account .box-item-t {
  font-size: 11px;
  color: var(--xf-muted);
  margin-bottom: 4px;
}

html[theme] #account .box-item-b .el-input__inner,
html[theme] #account .box-item-b .el-select .el-input__inner {
  border: 0;
  border-bottom: 1px dotted var(--xf-placeholder);
  border-radius: 0;
  background: transparent;
  padding-left: 0;
}

html[theme] #account .box-item-b .el-input__inner:focus {
  border-bottom-color: var(--xf-accent);
}

html[theme] #security .msg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--xf-line);
}

html[theme] #security .item-label,
html[theme] #security .label {
  font-size: 13px;
  color: var(--xf-ink);
}

html[theme] #security .item-vlaue {
  font-size: 13px;
  color: var(--xf-muted);
}

html[theme] #finance .a-text {
  color: var(--xf-accent);
}

html[theme] #finance .total-money {
  color: var(--xf-accent);
}

html[theme] #productList .status,
html[theme] #product .status {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef7f0;
  color: var(--xf-success);
}

/* 旧版数字/金额 */
html[theme] .count-down,
html[theme] .money-text,
html[theme] .kd-value,
html[theme] .total-money {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. 暗色模式
   -------------------------------------------------------------------------- */
html[theme] body.xf-dark {
  --color-primary: #7c95ff;
  --color-menu-bg: #424242;
  --color-menu-active-bg: #1e2a44;
  --color-menu-hover-bg: #1c2029;
  --color-menu-text: #a8b1c0;
  --color-menu-text-active: #7aa5ff;
  --color-text-tips: #b0b5bf;
  color-scheme: dark;
  --xf-ink: #e8ecf2;
  --xf-text: #b6bec9;
  --xf-muted: #b0b5bf;
  --xf-muted-2: #a3aab6;
  --xf-placeholder: #9aa3b2;
  --xf-line-2: #343a46;
  --xf-soft-2: #242a35;
  --xf-accent: #9baaff;
  --xf-line: #2a2f39;
  --xf-card: #424242;
  --xf-soft: #1c2029;
}

html[theme] body.xf-dark .el-aside {
  background: #424242 !important;
  border-right-color: rgba(255, 255, 255, .06) !important;
}

html[theme] body.xf-dark .el-header {
  background: #232b3a !important;
}

html[theme] body.xf-dark .xf-card,
html[theme] body.xf-dark .main-card:not(:has(.xf-card)) {
  background: #424242 !important;
  border-color: rgba(255, 255, 255, .07);
}

html[theme] body.xf-dark .el-table,
html[theme] body.xf-dark .el-table tr,
html[theme] body.xf-dark .el-table th,
html[theme] body.xf-dark .el-table td {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .06) !important;
  color: #b6bec9;
}

html[theme] body.xf-dark .el-input__inner,
html[theme] body.xf-dark .el-textarea__inner {
  background: #1c2029;
  border-color: #2a2f39;
  color: #e8ecf2;
}

html[theme] body.xf-dark .el-dialog,
html[theme] body.xf-dark .el-drawer {
  background: #424242;
  color: #e8ecf2;
}

html[theme] body.xf-dark .menu-group-title {
  color: #6b7381;
}

/* --------------------------------------------------------------------------
   10. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  html[theme] .el-aside {
    width: 240px !important;
  }

  html[theme] .el-header {
    padding-left: 16px !important;
  }
}

@media (max-width: 1200px) {
  html[theme] .el-aside {
    width: 210px !important;
  }

  html[theme] .el-header {
    padding-left: 16px !important;
  }

  html[theme] .xf-topbar-page {
    display: none;
  }
}

@media (max-width: 768px) {
  html[theme] .el-header {
    padding-left: 16px !important;
  }

  html[theme] .el-aside {
    display: none !important;
  }
}

/* Shared brand loading screen, including legacy pages that still emit the five bars. */
html[theme] #mainLoading { flex-direction: column; gap: 24px; background: var(--xf-card); color: var(--xf-ink); }
html[theme] #mainLoading .ddr { display: none; }
html[theme] #mainLoading::before { content: ''; position: static; width: 96px; height: 96px; background: url('/static/img/brand-logo.png') center / contain no-repeat; animation: xf-brand-pulse 1.8s ease-in-out infinite; }
html[theme] #mainLoading::after { content: '先锋在线强力驱动'; font: 500 18px/1.6 var(--xf-font); letter-spacing: .1em; }
html[data-xf-dark='1'] #mainLoading { background: #424242; color: #e8ecf2; }
@keyframes xf-brand-pulse { 50% { opacity: .55; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { html[theme] #mainLoading::before { animation: none; } }
/* 加载屏底部版权：复用遗留的第一个 .ddr 元素承载文案，避免改动全部页面模板 */
html[theme] #mainLoading .ddr1 {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  width: auto;
  height: auto;
  margin: 0;
  float: none;
  background: none;
  animation: none;
}
html[theme] #mainLoading .ddr1::after {
  /* \00A9 为纯文本版权符，勿使用 U+00A9+U+FE0F（会被系统渲染成彩色 emoji） */
  content: '\00A9 2026 Xianfeng All Rights Reserved';
  display: block;
  text-align: center;
  font: 400 12px/1.6 var(--xf-font);
  font-variant-emoji: text;
  color: #9aa1ac;
  letter-spacing: .02em;
}
html[data-xf-dark='1'] #mainLoading .ddr1::after { color: #9aa4b2; }
/* Dark surfaces, menus and controls share tokens, including popups attached to body. */
html[theme] body.xf-dark.xf-bg-ready::before { display: none; }
html[theme] body.xf-dark .xf-site-footer,
html[theme] body.xf-dark .drawer-menu,
html[theme] body.xf-dark .el-select-dropdown,
html[theme] body.xf-dark .el-dropdown-menu,
html[theme] body.xf-dark .el-popover,
html[theme] body.xf-dark .el-picker-panel,
html[theme] body.xf-dark .el-message-box { background: var(--xf-card); border-color: var(--xf-line); color: var(--xf-text); }
html[theme] body.xf-dark .el-select-dropdown__item,
html[theme] body.xf-dark .el-dropdown-menu__item,
html[theme] body.xf-dark .el-form-item__label,
html[theme] body.xf-dark .el-checkbox__label,
html[theme] body.xf-dark .el-radio__label,
html[theme] body.xf-dark .el-dialog__title,
html[theme] body.xf-dark .el-message-box__title,
html[theme] body.xf-dark .el-message-box__content { color: var(--xf-text); }
html[theme] body.xf-dark .el-select-dropdown__item.hover,
html[theme] body.xf-dark .el-select-dropdown__item:hover,
html[theme] body.xf-dark .el-dropdown-menu__item:hover,
html[theme] body.xf-dark .menu-top .el-menu-item.is-active { background: #28334b !important; color: var(--xf-accent) !important; }
html[theme] body.xf-dark .el-select-dropdown__item.selected { color: var(--xf-accent); }
html[theme] body.xf-dark .el-input__inner,
html[theme] body.xf-dark .el-textarea__inner { background: var(--xf-soft); border-color: var(--xf-line) !important; color: var(--xf-ink); }
html[theme] body.xf-dark .el-input__inner::placeholder,
html[theme] body.xf-dark .el-textarea__inner::placeholder { color: var(--xf-placeholder); }
html[theme] body.xf-dark .el-checkbox__inner,
html[theme] body.xf-dark .el-radio__inner { background: var(--xf-soft); border-color: #657084; }
html[theme] body.xf-dark .is-checked .el-checkbox__inner,
html[theme] body.xf-dark .is-checked .el-radio__inner { background: #536dfe; border-color: #536dfe; }
html[theme] body.xf-dark .el-button--default { background: var(--xf-soft); border-color: var(--xf-line); color: var(--xf-text); }
html[theme] body.xf-dark .el-divider { background: var(--xf-line); }
html[theme] body.xf-dark .el-divider__text { background: var(--xf-card); color: var(--xf-muted); }
html[theme] body.xf-dark .menu-group-title { color: var(--xf-muted); }
html[theme] body.xf-dark .xf-auth-submit { color: #212121 !important; }
html[theme] body.xf-dark .xf-auth-code .code-btn { background: var(--xf-soft); color: var(--xf-accent); }

html[theme] #mainLoading::before { filter: brightness(0); }
html[theme] body.xf-dark #mainLoading::before, html[data-xf-dark='1'] #mainLoading::before { filter: none; }
html[theme] body.xf-dark .el-loading-mask { background-color: rgba(66, 66, 66, .88); }

/* --------------------------------------------------------------------------
   登录页：忘记密码（左） / 注册账户（右），同在登录按钮上方一行
   -------------------------------------------------------------------------- */
html[theme] #login .xf-auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 16px;
}

html[theme] #login .xf-auth-link {
  font-size: 12px;
  color: #6064FF;
  cursor: pointer;
  transition: color .2s;
  line-height: 1.4;
}

html[theme] #login .xf-auth-link:hover {
  color: #4a4de6;
}

html[theme] #login .xf-auth-link-strong {
  color: #6064FF;
  font-weight: 500;
}