/* ============================================================
  会员中心 — 左右布局（user 模块）
  左侧会员导航 · 右侧内容面板
  ============================================================ */

/* ---------- 页面容器 ---------- */
.user-main {
  padding-top: 12px;
  padding-bottom: 60px;
}

/* 移除全站左侧 sidebar 后全宽布局 */
.trial-layout--full {
  display: block;
}
.trial-right-content--full {
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- 左右双栏布局 ---------- */
.user-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ---------- 左侧会员导航 — 精致风格 ---------- */
.user-nav {
  width: 240px;
  flex-shrink: 0;
  height: calc(100vh - 200px);
  background: var(--c-bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
}我问你一个问题，像 VS Code 这些，或者说像它怎样找某一个文件呢？

/* 导航头部 — 头像 + 用户名 */
.user-nav__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 18px 20px;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(0,0,0,.015) 0%, transparent 100%);
}
.user-nav__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  color: var(--c-text-3);
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 2px solid var(--c-line);
}
.user-nav__info {
  min-width: 0;
}
.user-nav__name {
  display: block;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-nav__role {
  display: block;
  font-size: .78rem;
  color: var(--c-text-3);
  margin-top: 3px;
}

/* 导航菜单项 */
.user-nav__menu {
  padding: 10px;
  flex: 1 0 auto;
}
.user-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 3px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: var(--c-text-2);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  cursor: pointer;
}
.user-nav__item:hover {
  background: var(--c-bg-soft);
  color: var(--c-text);
}
.user-nav__item.is-active {
  background: var(--c-action-soft);
  color: var(--c-action);
  font-weight: var(--fw-semibold);
}
.user-nav__item i {
  width: 22px;
  text-align: center;
  font-size: .95rem;
  flex-shrink: 0;
}

/* 导航底部 */
.user-nav__footer {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--c-line);
  flex-shrink: 0;
  margin-top: auto;
}
.user-nav__back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--c-text-3);
  text-decoration: none;
  transition: color var(--ease);
}
.user-nav__back:hover {
  color: var(--c-action);
}
.user-nav__back i {
  font-size: .82rem;
}
.user-nav__item--logout {
  color: #e74c3c !important;
}
.user-nav__item--logout:hover {
  color: #c0392b !important;
  background: #fef2f2 !important;
}
.user-nav__item--register {
  color: var(--c-action) !important;
}
.user-nav__item--register:hover {
  background: var(--c-action-soft) !important;
}

/* ---------- 右侧内容区 ---------- */
.user-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* 确保子元素正常布局 */
.user-content > .user-panel {
  display: block;
}

/* 面板 */
.user-panel {
  animation: userFadeIn .25s ease;
}
@keyframes userFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   活动横幅轮播 — 门户型设计（精致现代风格）
   ============================================================ */
.user-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.08),
    0 10px 30px -5px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.04);
}
.user-banner__track {
  display: flex;
  transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}

/* ---- 每张幻灯片 ---- */
.user-banner__slide {
  min-width: 100%;
  padding: 42px 44px 50px;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 220px;
}
/* 渐变背景主题 — 亮色模式：柔和淡雅 */
.user-banner__slide--618     { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 40%, #fff8e1 100%); color: #4a2c11; }
.user-banner__slide--newuser { background: linear-gradient(135deg, #e8eaf6 0%, #f3e5f5 40%, #fce4ec 100%); color: #392b50; }
.user-banner__slide--renewal { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #e8f5e9 100%); color: #1a332e; }

/* ---- 背景装饰层（圆圈 + 波浪 + 网格） ---- */
.user-banner__bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* 网格图案叠加 */
.user-banner__bg-decor::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* newuser 浅色背景专用装饰 */
.user-banner__slide--newuser .user-banner__bg-decor::before {
  background-image:
    linear-gradient(rgba(88,46,146,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,46,146,.055) 1px, transparent 1px);
}
.user-banner__circle {
  position: absolute;
  border-radius: 50%;
  opacity: .14;
}
/* newuser 圆圈用紫色系 */
.user-banner__slide--newuser .user-banner__circle {
  opacity: .2;
}
/* 618 网格用暖橙色系 */
.user-banner__slide--618 .user-banner__bg-decor::before {
  background-image:
    linear-gradient(rgba(191,87,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,87,0,.055) 1px, transparent 1px);
}
.user-banner__slide--618 .user-banner__circle { opacity: .18; }
.user-banner__slide--618 .user-banner__wave { opacity: .3; }
.user-banner__slide--618 .user-banner__dot { background: rgba(191,87,0,.22); }
.user-banner__slide--618 .user-banner__dot.is-active { background: #ff9800; }

/* renewal 网格用青绿色系 */
.user-banner__slide--renewal .user-banner__bg-decor::before {
  background-image:
    linear-gradient(rgba(0,77,64,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,77,64,.06) 1px, transparent 1px);
}
.user-banner__slide--renewal .user-banner__circle { opacity: .16; }
.user-banner__slide--renewal .user-banner__wave { opacity: .28; }
.user-banner__slide--renewal .user-banner__dot { background: rgba(0,121,107,.24); }
.user-banner__slide--renewal .user-banner__dot.is-active { background: #26a69a; }
.user-banner__circle--1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.6) 0%, transparent 70%);
  top: -100px; right: -60px;
  animation: bannerFloat1 8s ease-in-out infinite alternate;
}
.user-banner__circle--2 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 70%);
  bottom: -50px; right: 140px;
  animation: bannerFloat2 10s ease-in-out infinite alternate-reverse;
}
.user-banner__circle--3 {
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 70%);
  top: 45%; right: 22%;
  animation: bannerFloat3 7s ease-in-out infinite alternate;
}
@keyframes bannerFloat1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-15px,18px) scale(1.08); }
}
@keyframes bannerFloat2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(12px,-14px) scale(1.12); }
}
@keyframes bannerFloat3 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-8px,-12px) scale(1.06); }
}
/* 底部波浪 — 更精致 */
.user-banner__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 0;
  opacity: .45;
}
.user-banner__slide--newuser .user-banner__wave {
  opacity: .3;
}

/* ---- 内容区 ---- */
.user-banner__content {
  position: relative;
  z-index: 2;
  width: 58%;
  flex-shrink: 0;
}
.user-banner__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  margin-bottom: 14px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.user-banner__title {
  font-size: 1.85rem;
  font-weight: 800;
  margin: 0 0 10px;
  line-height: 1.22;
  letter-spacing: -.4px;
  text-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.user-banner__highlight {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  opacity: .9;
  margin-top: 5px;
  letter-spacing: 0;
}
.user-banner__desc {
  font-size: .92rem;
  opacity: .9;
  margin: 0 0 22px;
  line-height: 1.55;
}
.user-banner__desc strong {
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* ---- 按钮 — 更精致的胶囊按钮 ---- */
.user-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.96);
  color: #1a1a2e;
  padding: 11px 28px;
  border-radius: 28px;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  transition: all .25s ease;
  box-shadow:
    0 4px 14px rgba(0,0,0,.12),
    0 1px 3px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
  letter-spacing: .2px;
}
.user-banner__btn:hover {
  transform: translateY(-2.5px) scale(1.02);
  box-shadow:
    0 8px 25px rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.08);
  background: #fff;
  color: #1a1a2e;
}
.user-banner__btn:active {
  transform: translateY(-1px) scale(.99);
}
.user-banner__btn i {
  font-size: .84rem;
}

/* ---- 右侧视觉元素区 ---- */
.user-banner__visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 价格标签 — 更精致 */
.user-banner__price-tag {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: 18px 28px;
  text-align: center;
  box-shadow:
    0 8px 28px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.25);
  animation: pricePulse 2.5s ease-in-out infinite;
}
@keyframes pricePulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.25); }
  50%      { box-shadow: 0 10px 36px rgba(0,0,0,.16),   inset 0 1px 0 rgba(255,255,255,.35); }
}
.user-banner__price-symbol {
  font-size: 1.15rem;
  font-weight: 700;
  vertical-align: top;
}
.user-banner__price-num {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.5px;
}
.user-banner__price-unit {
  font-size: .84rem;
  font-weight: 600;
  opacity: .85;
}

/* 礼物图标 */
.user-banner__gift-icon {
  width: 96px; height: 96px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  box-shadow:
    0 8px 28px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.2);
  animation: giftBounce 2s ease infinite;
}

/* ============================================================
   newuser 幻灯片 — 柔和背景专用配色覆盖
   ============================================================ */
.user-banner__slide--newuser .user-banner__tag {
  background: rgba(103,58,183,.1);
  border-color: rgba(103,58,183,.22);
  color: #5e35b1;
  box-shadow: 0 2px 8px rgba(88,46,146,.08);
}
.user-banner__slide--newuser .user-banner__title {
  color: #311b5c;
  text-shadow: none;
}
.user-banner__slide--newuser .user-banner__highlight {
  color: #7b1fa2;
}
.user-banner__slide--newuser .user-banner__desc {
  color: #4a3a68;
  opacity: 1;
}
.user-banner__slide--newuser .user-banner__desc strong {
  color: #6a1b9a;
  text-shadow: none;
}
.user-banner__slide--newuser .user-banner__btn {
  background: linear-gradient(135deg, #7e57c2 0%, #ab47bc 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(126,87,194,.35), 0 1px 3px rgba(126,87,194,.15), inset 0 1px 0 rgba(255,255,255,.18);
}
.user-banner__slide--newuser .user-banner__btn:hover {
  box-shadow: 0 8px 25px rgba(126,87,194,.45), 0 4px 10px rgba(126,87,194,.2);
  background: linear-gradient(135deg, #673ab7 0%, #8e24aa 100%);
  color: #fff;
}
.user-banner__slide--newuser .user-banner__gift-icon {
  background: rgba(126,87,194,.14);
  border-color: rgba(126,87,194,.32);
  color: #7e57c2;
  box-shadow: 0 8px 28px rgba(88,46,146,.1), inset 0 1px 0 rgba(255,255,255,.4);
}
.user-banner__slide--newuser .user-banner__arrow {
  background: rgba(88,46,146,.12);
  border-color: rgba(88,46,146,.25);
  color: #5e35b1;
}
.user-banner__slide--newuser .user-banner__arrow:hover {
  background: rgba(88,46,146,.22);
  border-color: rgba(88,46,146,.38);
}

/* ============================================================
   618 幻灯片 — 暖橙淡背景专用配色（亮色模式）
   ============================================================ */
.user-banner__slide--618 .user-banner__tag {
  background: rgba(230,126,34,.1);
  border-color: rgba(230,126,34,.22);
  color: #e65100;
  box-shadow: 0 2px 8px rgba(191,87,0,.08);
}
.user-banner__slide--618 .user-banner__title {
  color: #3e2723;
  text-shadow: none;
}
.user-banner__slide--618 .user-banner__highlight {
  color: #bf360c;
}
.user-banner__slide--618 .user-banner__desc {
  color: #5d4037;
  opacity: 1;
}
.user-banner__slide--618 .user-banner__desc strong {
  color: #e65100;
  text-shadow: none;
}
.user-banner__slide--618 .user-banner__btn {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,152,0,.35), 0 1px 3px rgba(255,152,0,.15), inset 0 1px 0 rgba(255,255,255,.18);
}
.user-banner__slide--618 .user-banner__btn:hover {
  box-shadow: 0 8px 25px rgba(255,152,0,.45), 0 4px 10px rgba(255,152,0,.2);
  background: linear-gradient(135deg, #ef6c00 0%, #e65100 100%);
  color: #fff;
}
.user-banner__slide--618 .user-banner__price-tag {
  background: rgba(245,124,0,.12);
  border-color: rgba(245,124,0,.32);
  color: #e65100;
  box-shadow: 0 8px 28px rgba(191,87,0,.08), inset 0 1px 0 rgba(255,255,255,.45);
}
.user-banner__slide--618 .user-banner__arrow {
  background: rgba(191,87,0,.10);
  border-color: rgba(191,87,0,.22);
  color: #e65100;
}
.user-banner__slide--618 .user-banner__arrow:hover {
  background: rgba(191,87,0,.18);
  border-color: rgba(191,87,0,.35);
}

/* ============================================================
   renewal 幻灯片 — 青绿淡背景专用配色（亮色模式）
   ============================================================ */
.user-banner__slide--renewal .user-banner__tag {
  background: rgba(0,121,107,.1);
  border-color: rgba(0,121,107,.22);
  color: #00796b;
  box-shadow: 0 2px 8px rgba(0,77,64,.08);
}
.user-banner__slide--renewal .user-banner__title {
  color: #1a332e;
  text-shadow: none;
}
.user-banner__slide--renewal .user-banner__highlight {
  color: #00695c;
}
.user-banner__slide--renewal .user-banner__desc {
  color: #2e5249;
  opacity: 1;
}
.user-banner__slide--renewal .user-banner__desc strong {
  color: #00796b;
  text-shadow: none;
}
.user-banner__slide--renewal .user-banner__btn {
  background: linear-gradient(135deg, #26a69a 0%, #00897b 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(38,166,154,.35), 0 1px 3px rgba(38,166,154,.15), inset 0 1px 0 rgba(255,255,255,.18);
}
.user-banner__slide--renewal .user-banner__btn:hover {
  box-shadow: 0 8px 25px rgba(38,166,154,.45), 0 4px 10px rgba(38,166,154,.2);
  background: linear-gradient(135deg, #00897b 0%, #00695c 100%);
  color: #fff;
}
.user-banner__slide--renewal .user-banner__discount-badge {
  background: rgba(0,121,107,.11);
  border-color: rgba(0,121,107,.30);
  color: #00796b;
  box-shadow: 0 8px 28px rgba(0,77,64,.08);
}
.user-banner__slide--renewal .user-banner__arrow {
  background: rgba(0,77,64,.10);
  border-color: rgba(0,77,64,.22);
  color: #00897b;
}
.user-banner__slide--renewal .user-banner__arrow:hover {
  background: rgba(0,77,64,.18);
  border-color: rgba(0,77,64,.35);
}
@keyframes giftBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-9px) scale(1.06); }
}

/* 折扣徽章 */
.user-banner__discount-badge {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 3px dashed rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  animation: discountSpin 12s linear infinite;
}
@keyframes discountSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.user-banner__discount-badge span {
  font-size: 1.72rem;
  font-weight: 900;
  letter-spacing: -1px;
}
/* 轮播指示点 & 箭头 — 更精致 */
.user-banner__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 3;
}
.user-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: all .25s ease;
  border: none;
  padding: 0;
}
.user-banner__slide--newuser .user-banner__dot {
  background: rgba(88,46,146,.25);
}
.user-banner__slide--newuser .user-banner__dot.is-active {
  background: #7e57c2;
}
.user-banner__dot.is-active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}
.user-banner__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: .8rem;
  cursor: pointer;
  z-index: 3;
  transition: all .22s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.user-banner__arrow:hover {
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-50%) scale(1.08);
  opacity: 1 !important;
}
.user-banner__banner:hover .user-banner__arrow,
.user-banner:hover .user-banner__arrow {
  opacity: .85;
  pointer-events: auto;
}
.user-banner__banner:hover .user-banner__arrow:hover,
.user-banner:hover .user-banner__arrow:hover {
  opacity: 1;
}
.user-banner__arrow--prev { left: 14px; }
.user-banner__arrow--next { right: 14px; }

/* ============================================================
   左右双栏总览布局（账户/订单 | 动态/权益/工单）
   ============================================================ */
.user-overview-row {
  display: flex !important;
  gap: 20px;
}
.user-overview-left,
.user-overview-right {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* 账户概览 & 我的订单：桌面端左右并排 — 等高卡片 */
.user-overview-left {
  display: flex;
  flex-direction: row !important;
  gap: 20px;
  align-items: stretch;
}
.user-overview-left > .user-account-card,
.user-overview-left > .user-order-card {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* 强制两个卡片内容区等高填充 */
.user-overview-left > .user-account-card > .user-account-grid,
.user-overview-left > .user-order-card > .user-order-grid {
  flex: 1 1 auto;
  display: grid;
  /* 统一 3 列，行高由 grid 自动均分 */
}
/* 左侧卡片之间间距（纵向堆叠时） */
.user-overview-left > .user-card + .user-card {
  margin-top: 0;
}
/* 右侧卡片之间间距 */
.user-overview-right > .user-card + .user-card {
  margin-top: 16px;
}
/* 最后一个卡片（右侧栏纵向堆叠时撑满剩余高度） */
.user-overview-right > .user-card:last-child {
  flex: 1 1 auto;
}

/* ---------- 卡片通用 ---------- */
.user-account-card,
.user-order-card {
  display: flex;
  flex-direction: column;
}
.user-account-card > :last-child,
.user-order-card > :last-child {
  flex: 1;
}
/* ---------- 账户/订单统一头部 — 固定高度对齐 ---------- */
.user-account-card__header,
.user-order-card__header,
.user-notice-header,
.user-benefits-header,
.user-ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 固定头部高度，确保左右完全一致 */
  height: 38px;
  margin-bottom: 12px;
}
.user-card__more {
  font-size: .78rem;
  color: var(--c-action);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease);
}
.user-card__more:hover { color: var(--c-action); text-decoration: underline; }

.user-account-card__recharge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg,#ff6b35,#f7931e);
  color: #fff !important;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: opacity .2s, transform .15s;
}
.user-account-card__recharge:hover { opacity: .88; transform: translateY(-1px); }

.user-account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 显式两行均分，确保与订单卡片完全对齐 */
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 0;
  flex: 1;
}
.user-account-item {
  padding: 12px 14px;
  border-right: 1px solid var(--c-bg-soft);
  border-bottom: 1px solid var(--c-bg-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 74px;
  transition: background .18s ease;
}
.user-account-item:nth-child(3n) { border-right: none; }
.user-account-item:nth-last-child(-n+3) { border-bottom: none; }
.user-account-item__label {
  display: block;
  font-size: .75rem;
  color: var(--c-text-3);
  margin-bottom: 2px;
}
.user-account-item__value {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.25;
}
.user-account-item__value--money {
  color: #f97316;
  font-size: 1.2rem;
}
.user-account-item__value--highlight {
  color: #ef4444;
}
.user-account-item__value i {
  font-size: .82rem;
  margin-right: 2px;
}

/* ---------- 订单卡片 — 统一网格行高 ---------- */
.user-order-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 显式两行均分，与账户卡片完全对齐 */
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 0;
  flex: 1;
}
.user-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-right: 1px solid var(--c-bg-soft);
  border-bottom: 1px solid var(--c-bg-soft);
  text-decoration: none;
  color: var(--c-text-2);
  transition: background var(--ease), color var(--ease), transform .18s ease;
  min-height: 74px;
}
.user-order-item:nth-child(3n) { border-right: none; }
.user-order-item:nth-last-child(-n+3) { border-bottom: none; }
.user-order-item:hover { background: var(--c-bg-soft); color: var(--c-text); transform: translateX(2px); }
.user-order-item__icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-soft);
  border-radius: var(--r-sm);
  font-size: .88rem;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.user-order-item:hover .user-order-item__icon {
  transform: scale(1.08);
}
.user-order-item__name {
  font-size: .8rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-order-item__count {
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-text);
  flex-shrink: 0;
}

/* 即将到期 */
.user-expiring-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--c-line);
}
.user-expiring-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.user-expiring-list { list-style: none; margin: 0; padding: 0; }
.user-expiring-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--c-text-2);
  transition: all var(--ease);
}
.user-expiring-item:last-child { margin-bottom: 0; }
.user-expiring-item:hover { border-color: var(--c-action); background: var(--c-action-soft); transform: translateX(3px); }
.user-expiring-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  background: var(--c-bg-soft);
  flex-shrink: 0;
}
.user-expiring-name {
  font-size: .82rem;
  flex: 1;
}
.user-expiring-count {
  font-weight: 700;
  font-size: .92rem;
  color: var(--c-text);
  margin-right: 4px;
}
.user-expiring-arrow {
  font-size: .7rem;
  color: var(--c-text-3);
  transition: transform .15s;
}
.user-expiring-item:hover .user-expiring-arrow { transform: translateX(3px); }

/* ---------- 动态信息 / 权益 / 工单（右侧栏） ---------- */
.user-notice-list,
.user-benefits-list,
.user-ticket-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.user-notice-item,
.user-benefit-item,
.user-ticket-item {
  border-bottom: 1px solid var(--c-bg-soft);
  padding: 11px 0;
}
.user-notice-item:last-child,
.user-benefit-item:last-child,
.user-ticket-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.user-notice-link,
.user-benefit-link,
.user-ticket-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.user-notice-link:hover,
.user-benefit-link:hover,
.user-ticket-link:hover .user-ticket-subject { color: var(--c-action); }

.user-notice-text,
.user-benefit-text,
.user-ticket-subject {
  display: block;
  font-size: .84rem;
  color: var(--c-text);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-notice-time,
.user-benefit-date,
.user-ticket-meta {
  display: block;
  font-size: .73rem;
  color: var(--c-text-3);
  margin-top: 4px;
}
.user-notice-time i,
.user-benefit-date i,
.user-ticket-meta i { margin-right: 3px; }

.user-ticket-id {
  font-size: .74rem;
  color: var(--c-text-3);
  margin-right: 4px;
  font-family: monospace;
}
.ticket__new-btn { color: #ef4444 !important; }

/* 统计卡片网格（保留兼容） */
.user-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.user-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: box-shadow var(--ease);
}
.user-stat-card:hover {
  box-shadow: var(--s-sm);
}
.user-stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.user-stat-card__icon--blue   { background: #eff6ff; color: #3b82f6; }
.user-stat-card__icon--green  { background: #ecfdf5; color: #10b981; }
.user-stat-card__icon--orange { background: #fff7ed; color: #f97316; }
.user-stat-card__icon--purple { background: #f5f3ff; color: #8b5cf6; }
.user-stat-card__body {
  display: flex;
  flex-direction: column;
}
.user-stat-card__num {
  font-size: 1.35rem;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: 1.2;
}
.user-stat-card__label {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 2px;
}

/* 通用卡片 — 更精致的阴影和圆角 */
.user-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 0;
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 4px 12px rgba(0,0,0,.03);
  transition: box-shadow .22s ease;
}
.user-card:hover {
  box-shadow:
    0 1px 3px rgba(0,0,0,.04),
    0 6px 16px rgba(0,0,0,.05);
}
.user-card__title {
  font-size: .95rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: 0 0 14px;
}
.user-card--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

/* 空状态 */
.user-empty {
  text-align: center;
  color: var(--c-text-3);
}
.user-empty i {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 10px;
  opacity: .45;
}
.user-empty p {
  font-size: var(--fs-sm);
  margin: 0;
}

/* 快捷入口网格 — 精致卡片风格 */
.user-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.user-shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  transition: all .22s ease;
  background: transparent;
}
.user-shortcut-item:hover {
  background: var(--c-action-soft);
  border-color: var(--c-action);
  color: var(--c-action);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.user-shortcut-item i {
  font-size: 1.35rem;
}

/* ---------- 个人资料表单 ---------- */
.user-form__avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
.user-form__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  color: var(--c-text-3);
  font-size: 1.8rem;
  flex-shrink: 0;
}
.user-form__username {
  display: block;
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.user-form__uid {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 2px;
}
.user-form__group {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-bg-soft);
}
.user-form__group:last-child {
  border-bottom: none;
}
.user-form__label {
  width: 100px;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
}
.user-form__value {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* ---------- 安全设置列表 ---------- */
.user-security-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.user-security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-bg-soft);
}
.user-security-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.user-security-item:first-child {
  padding-top: 0;
}
.user-security-item__info {
  min-width: 0;
}
.user-security-item__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.user-security-item__desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 2px;
}
.user-security-item__action {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--c-action);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  transition: background var(--ease);
}
.user-security-item__action:hover {
  background: var(--c-action-soft);
}

/* ---------- 偏好设置列表 ---------- */
.user-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.user-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-bg-soft);
}
.user-settings-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.user-settings-item:first-child {
  padding-top: 0;
}
.user-settings-item__info {
  min-width: 0;
}
.user-settings-item__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.user-settings-item__desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 2px;
}

/* 开关按钮 */
.user-settings-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border: none;
  border-radius: 12px;
  background: var(--c-bg-muted);
  cursor: pointer;
  transition: background var(--ease);
  flex-shrink: 0;
}
.user-settings-toggle[aria-checked="true"] {
  background: var(--c-action);
}
.user-settings-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform var(--ease);
}
.user-settings-toggle[aria-checked="true"] .user-settings-toggle__knob {
  transform: translateX(20px);
}

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .user-layout {
    flex-direction: column;
  }
  .user-nav {
    width: 100%;
    position: static;
  }
  .user-nav__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px;
  }
  .user-nav__item {
    margin-bottom: 0;
    font-size: var(--fs-xs);
    padding: 8px 10px;
  }
  .user-nav__footer {
    display: none;
  }
  .user-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .user-shortcut-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 概览双栏 -> 单栏 */
  .user-overview-row {
    flex-direction: column;
  }
  .user-overview-left,
  .user-overview-right { flex: 1 1 100%; }
  .user-overview-left { flex-direction: column; gap: 0; }
  .user-overview-left > .user-card + .user-card { margin-top: 16px; }

  /* 账户网格 -> 2列 */
  .user-account-grid { grid-template-columns: repeat(2, 1fr); }
  .user-account-item:nth-child(odd) { border-right: none; }
  .user-account-item:nth-child(-n+4) { border-bottom: none; }
  .user-account-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-bg-soft); }

  /* 订单网格 -> 2列 */
  .user-order-grid { grid-template-columns: repeat(2, 1fr); }
  .user-order-item:nth-child(2n) { border-right: none; }
}
@media (max-width: 576px) {
  .user-stat-grid {
    grid-template-columns: 1fr;
  }
  .user-shortcut-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 横幅响应式 */
  .user-banner__slide { padding: 28px 22px 36px; flex-direction: column; align-items: flex-start; text-align: left; min-height: auto; }
  .user-banner__content { width: 100%; }
  .user-banner__title { font-size: 1.4rem; }
  .user-banner__desc { font-size: .84rem; }
  .user-banner__visual { display: none; margin-top: 16px; }
  .user-banner__circle--1 { width: 170px; height: 170px; top: -50px; right: -30px; }
  .user-banner__circle--2 { width: 110px; height: 110px; bottom: -15px; right: 70px; }
  .user-banner__circle--3 { display: none; }

  /* 账户网格 -> 全宽单列 */
  .user-account-grid { grid-template-columns: 1fr; }
  .user-account-item { border-right: none !important; border-bottom: 1px solid var(--c-bg-soft); }
  .user-account-item:last-child { border-bottom: none !important; }

  /* 订单网格 -> 2列 */
  .user-order-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 暗色模式 ---------- */

/* 深色模式下 banner 幻灯片 — 恢复深色渐变背景 + 白色文字 */
html.io-dark-mode .user-banner__slide--618 {
  background: linear-gradient(135deg, #bf360c 0%, #e65100 40%, #ff8f00 100%);
  color: #fff;
}
html.io-dark-mode .user-banner__slide--newuser {
  background: linear-gradient(135deg, #3949ab 0%, #5e35b1 40%, #ad1457 100%);
  color: #fff;
}
html.io-dark-mode .user-banner__slide--renewal {
  background: linear-gradient(135deg, #004d40 0%, #00796b 50%, #26a69a 100%);
  color: #fff;
}

/* 深色模式下恢复通用白色文字样式 */
html.io-dark-mode .user-banner__tag {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
html.io-dark-mode .user-banner__title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
html.io-dark-mode .user-banner__highlight {
  color: rgba(255,255,255,.88);
}
html.io-dark-mode .user-banner__desc {
  color: rgba(255,255,255,.88);
  opacity: 1;
}
html.io-dark-mode .user-banner__desc strong {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.12);
}
html.io-dark-mode .user-banner__btn {
  background: rgba(255,255,255,.95);
  color: #1a1a2e;
  box-shadow:
    0 4px 14px rgba(0,0,0,.16),
    0 1px 3px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.7);
}
html.io-dark-mode .user-banner__btn:hover {
  background: #fff;
  box-shadow:
    0 8px 25px rgba(0,0,0,.22),
    0 4px 10px rgba(0,0,0,.08);
  color: #1a1a2e;
}

/* 深色模式视觉元素 */
html.io-dark-mode .user-banner__price-tag {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.30);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.12);
}
html.io-dark-mode .user-banner__gift-icon {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1);
}
html.io-dark-mode .user-banner__discount-badge {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
}
html.io-dark-mode .user-banner__arrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
html.io-dark-mode .user-banner__arrow:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
}
html.io-dark-mode .user-banner__dot {
  background: rgba(255,255,255,.32);
}
html.io-dark-mode .user-banner__dot.is-active {
  background: #fff;
}

/* 深色模式装饰层 */
html.io-dark-mode .user-banner__bg-decor::before {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}
html.io-dark-mode .user-banner__wave { opacity: .5; }

html.io-dark-mode .user-stat-card__icon--blue   { background: rgba(59,130,246,.15); }
html.io-dark-mode .user-stat-card__icon--green  { background: rgba(16,185,129,.15); }
html.io-dark-mode .user-stat-card__icon--orange { background: rgba(249,115,22,.15); }
html.io-dark-mode .user-stat-card__icon--purple { background: rgba(139,92,246,.15); }

/* ============================================================
   注册页面
   ============================================================ */
.register-page {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

/* 注册卡片 */
.register-card {
  width: 100%;
  max-width: 460px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--s-card);
  overflow: hidden;
  animation: userFadeIn .3s ease;
}

/* 卡片头部 */
.register-card__header {
  text-align: center;
  padding: 36px 32px 24px;
  background: linear-gradient(180deg, var(--c-action-soft) 0%, var(--c-bg-card) 100%);
  border-bottom: 1px solid var(--c-line);
}
.register-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-action) 0%, var(--c-action-hover) 100%);
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(var(--c-action-rgb), .3);
}
.register-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  margin: 0 0 6px;
}
.register-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  margin: 0;
}

/* 错误消息 */
.register-card__error {
  margin: 16px 28px 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* 成功消息 */
.register-card__success {
  margin: 16px 28px 0;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}
.register-card__success i {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.register-card__success strong {
  display: block;
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

/* 注册表单 */
.register-form {
  padding: 28px 32px 8px;
}

.register-form__group {
  margin-bottom: 20px;
}
.register-form__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
  margin-bottom: 7px;
}
.register-form__label i {
  color: var(--c-text-3);
  font-size: .8rem;
  width: 16px;
  text-align: center;
}
.register-form__input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: var(--fs-base);
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
  box-sizing: border-box;
}
.register-form__input:focus {
  border-color: var(--c-action);
  box-shadow: 0 0 0 3px var(--c-action-soft);
}
.register-form__input::placeholder {
  color: var(--c-text-3);
  opacity: .6;
}

/* 密码输入框容器 */
.register-form__password-wrap {
  position: relative;
}
.register-form__password-wrap .register-form__input {
  padding-right: 44px;
}

/* 密码显隐按钮 */
.register-form__toggle-password {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: color var(--ease), background var(--ease);
}
.register-form__toggle-password:hover {
  color: var(--c-text);
  background: var(--c-bg-soft);
}

/* 输入提示 */
.register-form__hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 5px;
}

/* 注册须知 */
.register-form__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  border: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  line-height: 1.55;
  margin-bottom: 22px;
}
.register-form__notice i {
  color: var(--c-text-3);
  font-size: .85rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 提交按钮 */
.register-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--c-action) 0%, var(--c-action-hover) 100%);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  font-family: var(--font);
  cursor: pointer;
  transition: opacity var(--ease), transform var(--ease), box-shadow var(--ease);
  box-shadow: 0 2px 8px rgba(var(--c-action-rgb), .3);
}
.register-form__submit:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--c-action-rgb), .4);
}
.register-form__submit:active {
  transform: translateY(0);
}
.register-form__submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* 卡片底部 */
.register-card__footer {
  text-align: center;
  padding: 16px 32px 28px;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  border-top: 1px solid var(--c-line);
  margin-top: 8px;
}
.register-card__login-link {
  color: var(--c-action);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ease);
}
.register-card__login-link:hover {
  color: var(--c-action-hover);
  text-decoration: underline;
}

/* ---------- 响应式 ---------- */
@media (max-width: 576px) {
  .register-card__header {
    padding: 28px 20px 20px;
  }
  .register-form {
    padding: 22px 20px 4px;
  }
  .register-card__footer {
    padding: 12px 20px 22px;
  }
  .register-card__error,
  .register-card__success {
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* ---------- 暗色模式 ---------- */
html.io-dark-mode .register-card__header {
  background: linear-gradient(180deg, rgba(var(--c-action-rgb), .12) 0%, var(--c-bg-card) 100%);
}
html.io-dark-mode .register-card__error {
  background: rgba(220,38,38,.1);
  border-color: rgba(220,38,38,.25);
  color: #fca5a5;
}
html.io-dark-mode .register-card__success {
  background: rgba(22,163,74,.1);
  border-color: rgba(22,163,74,.25);
  color: #86efac;
}
html.io-dark-mode .register-form__input {
  background: var(--c-bg-soft);
  border-color: var(--c-line);
  color: var(--c-text);
}
html.io-dark-mode .register-form__notice {
  background: rgba(255,237,213,.06);
  border-color: var(--c-line);
}
html.io-dark-mode .register-card__footer {
  border-color: var(--c-line);
}

/* ============================================================
   推广分佣系统 — Commission / Affiliate System
   ============================================================ */

/* 页面标题 */
.commission-page-title {
  font-size: 1.35rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  margin: 0 0 4px;
}
.commission-page-desc {
  font-size: .85rem;
  color: var(--c-text-3);
  margin: 0 0 20px;
}

/* 上半区：左右双栏 */
.commission-overview-row {
  display: flex !important;
  gap: 16px;
  margin-bottom: 16px;
}

/* ---------- 左侧：推广概览卡片 ---------- */
.commission-summary-card {
  flex: 1.2 1 0%;
  min-width: 0;
}
.commission-card-title {
  font-size: .95rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.commission-card-title i {
  color: var(--c-action);
}

/* 统计数据 2x2 网格 */
.commission-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.commission-stat-item {
  text-align: center;
  padding: 18px 10px;
  border-radius: var(--r-sm);
  background: var(--c-bg-soft);
  transition: background var(--ease), transform .18s ease;
}
.commission-stat-item:hover {
  background: var(--c-action-soft);
  transform: translateY(-1px);
}
.commission-stat__icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.commission-stat__num {
  font-size: 1.4rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  line-height: 1.2;
  margin-bottom: 4px;
}
.commission-stat__label {
  font-size: .75rem;
  color: var(--c-text-3);
}

/* 操作按钮行 */
.commission-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
.btn-commission {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  border-radius: var(--r-sm);
  font-size: .84rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--ease);
  border: 1.5px solid transparent;
  font-family: var(--font);
}
.btn-commission--primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,.3);
}
.btn-commission--primary:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.btn-commission--outline {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-text-2);
}
.btn-commission--outline:hover:not(:disabled) {
  border-color: var(--c-action);
  color: var(--c-action);
  background: var(--c-action-soft);
}
.btn-commission:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.commission-no-earnings {
  text-align: center;
  font-size: .76rem;
  color: var(--c-text-3);
  margin: 0;
}

/* ---------- 右侧：推广链接卡片 ---------- */
.commission-link-card {
  flex: 1 1 0%;
  min-width: 0;
}
.commission-badge--active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #059669;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  margin-left: auto;
  white-space: nowrap;
}
.commission-badge--active i {
  font-size: .55rem;
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
.commission-rate-hint {
  text-align: center;
  font-size: 1.85rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-text);
  line-height: 1.15;
  margin: 0 0 14px;
}

/* 推广码/链接输入组 */
.commission-link-group {
  margin-bottom: 12px;
}
.commission-link-label {
  display: block;
  font-size: .74rem;
  color: var(--c-text-3);
  margin-bottom: 5px;
  font-weight: var(--fw-medium);
}
.commission-link-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.commission-link-input {
  flex: 1 1 0%;
  padding: 9px 12px;
  font-size: .82rem;
  font-family: monospace, var(--font);
  color: var(--c-text-2);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--ease);
  min-width: 0;
  box-sizing: border-box;
}
.commission-link-input:focus {
  border-color: var(--c-action);
  box-shadow: 0 0 0 3px var(--c-action-soft);
}
.commission-link-input--long {
  font-size: .78rem;
}

/* 复制按钮 */
.btn-copy {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg-card);
  color: var(--c-text-3);
  cursor: pointer;
  transition: all var(--ease);
  font-size: .85rem;
}
.btn-copy:hover {
  border-color: var(--c-action);
  color: var(--c-action);
  background: var(--c-action-soft);
}
.btn-copy .fas.fa-check {
  color: #10b981;
}

/* ---------- 下半区：Tab 切换卡片 ---------- */
.commission-tabs-card {
  /* 复用 user-card 基础样式 */
}
.commission-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-bg-soft);
  margin-bottom: 18px;
  gap: 0;
}
.commission-tab {
  padding: 11px 24px;
  font-size: .86rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color var(--ease);
  font-family: var(--font);
}
.commission-tab:hover {
  color: var(--c-text);
}
.commission-tab.is-active {
  color: var(--c-action);
  font-weight: var(--fw-semibold);
}
.commission-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--c-action);
  border-radius: 1px;
}

/* Tab 面板 */
.commission-tab-pane {
  display: none;
}
.commission-tab-pane.is-active {
  display: block;
  animation: tabFadeIn .22s ease;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.commission-list-title {
  font-size: .9rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: 0 0 14px;
}

/* 空状态 */
.commission-list-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--c-text-3);
}
.commission-list-empty i {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 10px;
  opacity: .35;
}
.commission-list-empty p {
  font-size: .92rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
  margin: 0 0 4px;
}
.commission-list-empty span {
  font-size: .78rem;
  opacity: .7;
}

/* ---------- 推广记录列表项（后续有数据时使用） ---------- */
.commission-record-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-bg-soft);
  transition: background var(--ease);
}
.commission-record-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.commission-record-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f97316;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.commission-record-name {
  font-size: .87rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  flex: 1;
  min-width: 0;
}
.commission-record-email {
  font-size: .76rem;
  color: var(--c-text-3);
}
.commission-record-tag {
  font-size: .72rem;
  font-weight: var(--fw-semibold);
  color: #f97316;
  background: #fff7ed;
  padding: 3px 10px;
  border-radius: 10px;
  flex-shrink: 0;
}
.commission-record-time {
  font-size: .73rem;
  color: var(--c-text-3);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .commission-overview-row {
    flex-direction: column;
  }
  .commission-summary-card,
  .commission-link-card {
    flex: 1 1 100% !important;
  }
  .commission-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 576px) {
  .commission-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .commission-tabs {
    overflow-x: auto;
  }
  .commission-tab {
    padding: 10px 16px;
    font-size: .8rem;
    white-space: nowrap;
  }
  .commission-rate-hint {
    font-size: 1.5rem;
  }
  .btn-copy {
    width: 34px;
    height: 34px;
  }
}

/* ---------- 暗色模式 ---------- */
html.io-dark-mode .commission-stat-item {
  background: rgba(255,255,255,.04);
}
html.io-dark-mode .commission-stat-item:hover {
  background: rgba(var(--c-action-rgb), .12);
}
html.io-dark-mode .commission-badge--active {
  background: rgba(5,150,105,.15);
  color: #34d399;
}
html.io-dark-mode .commission-link-input {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: var(--c-text-2);
}
html.io-dark-mode .btn-copy {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
html.io-dark-mode .btn-copy:hover {
  background: rgba(var(--c-action-rgb), .12);
  border-color: rgba(var(--c-action-rgb), .3);
}
html.io-dark-mode .commission-record-tag {
  background: rgba(249,115,22,.15);
  color: #fb923c;
}