/* legacy-layer: generated wrapper, see work/ui/wrap-legacy-layer.js */
@layer legacy {
/* ─────────────────────────────────────────────────────────────────────────────
   ui-redesign.css  — 咸鱼电竞后台 UI 重构覆盖层
   加载顺序：stage6.css → ui-redesign.css → tailwind.css
   品牌粉：与宣传图相近的明亮玫粉，统一由 DESIGN.md 令牌管理。
   ───────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════
   § 0  Token 层——统一品牌粉 + 基础变量
   ══════════════════════════════════════════════════════ */
:root {
  /* 品牌粉：宣传图里的明亮玫粉 */
  --c-pink:      #f7b4d0;
  --c-pink-h:    #fac8de;
  --c-pink-s:    rgba(247, 180, 208,.16);
  --c-pink-text: #ffd4e6;

  /* 覆盖 tailwind.css / stage6.css 里所有的粉色别名 */
  --xy-accent:       #f7b4d0;
  --xy-accent-hover: #fac8de;
  --xy-accent-soft:  rgba(247, 180, 208,.16);
  --xy-accent-ink:   #260c16;
  --s6-pink:         #f7b4d0;
  --s6-pink-strong:  #fac8de;
  --s6-pink-soft:    rgba(247, 180, 208,.16);
  --brand:           #f7b4d0;
  --brand-2:         #fac8de;
  --brand-soft:      rgba(247, 180, 208,.16);
  --primary:         #f7b4d0;
  --focus-ring:      rgba(247, 180, 208,.65);

  /* 圆角：三档，废除 10/14/18px 随机值 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* 间距节奏：4-step */
  --sp-1:4px; --sp-2:8px; --sp-3:12px;
  --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* 字体层级 */
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px;
  --fs-md:14px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:22px;

  /* 语义色别名 */
  --c-canvas:  var(--xy-canvas);
  --c-surface: var(--xy-surface);
  --c-raised:  var(--xy-raised);
  --c-soft:    var(--xy-soft);
  --c-line:    var(--xy-line);
  --c-text:    var(--xy-text);
  --c-muted:   var(--xy-muted);
  --c-ok:      var(--xy-ok);
  --c-warn:    var(--xy-warn);
  --c-bad:     var(--xy-bad);
  --c-info:    var(--xy-info);

  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════
   § 1  全局基础
   ══════════════════════════════════════════════════════ */

/* 细款滚动条 */
* { scrollbar-width: thin; scrollbar-color: rgba(247, 180, 208,.28) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(247, 180, 208,.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(247, 180, 208,.46); }

/* focus ring：统一粉色轮廓 */
:focus-visible { outline: 2px solid var(--xy-line-strong); outline-offset: 2px; }

/* 主按钮粉色对齐品牌色 */
.primary,
button.primary,
a.primary {
  background-color: #f7b4d0;
  border-color: var(--xy-line-strong);
}
.primary:hover,
button.primary:hover { background-color: #fac8de; border-color: var(--xy-line-strong); }

/* ══════════════════════════════════════════════════════
   § 2  手机端顶部栏
   ══════════════════════════════════════════════════════ */
.mobile-head {
  height: 52px;
  padding: 0 var(--sp-4);
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════
   § 3  首页看板
   ══════════════════════════════════════════════════════ */
.dashboard-hero { padding: var(--sp-5) 0 var(--sp-4); }
.dashboard-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}
.dashboard-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-1);
  color: #f7b4d0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.greeting-subline {
  margin: var(--sp-1) 0 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════
   § 3b  身份栏
   ══════════════════════════════════════════════════════ */
.role-context {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.dashboard-page .role-context > div,
.role-context > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
}
.role-context > div > span:first-child {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.role-context > div > strong {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   § 4  今日概览 .metrics / .metric
   ══════════════════════════════════════════════════════ */
.dashboard-overview {
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.dashboard-overview .section-head {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}
.dashboard-overview .section-head h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dashboard-overview .grid.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.dashboard-overview .card.metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px 14px;
  min-height: 0 !important;
  border: none;
  border-right: 1px solid var(--c-line);
  border-radius: 0;
  background: var(--c-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dashboard-overview .card.metric:last-child { border-right: none; }
.dashboard-overview .card.metric label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.dashboard-overview .card.metric label i,
.dashboard-overview .card.metric label svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  opacity: .55;
}
.dashboard-overview .card.metric strong {
  color: var(--c-text);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
/* 待审核用品牌粉突出 */
.dashboard-overview .card.metric:nth-child(2) strong { color: #f7b4d0; }

/* ══════════════════════════════════════════════════════
   § 5  充值流水
   ══════════════════════════════════════════════════════ */
.recharge-page-head {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.recharge-page-heading h3 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
}
.recharge-record {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border-color: var(--c-line);
  transition: border-color 140ms ease;
}
.recharge-record:hover { border-color: var(--xy-line-strong); }
.recharge-record--reversed,
.recharge-record--history { background: var(--c-canvas); opacity: .72; }
.recharge-record-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted);
  opacity: .7;
}
.recharge-record-money strong,
.recharge-record-credit strong,
.recharge-record-balance strong {
  color: #f7b4d0;
  font-size: var(--fs-lg);
  font-weight: 700;
}
.recharge-record-collection,
.recharge-record-proof,
.recharge-record-note,
.recharge-record-actions {
  padding-top: var(--sp-3);
  border-top-color: rgba(255,255,255,.07);
}
.recharge-record-actions .recharge-action-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}
.recharge-proof-button { border-radius: var(--r-sm); overflow: hidden; }
.recharge-toolbar { margin: var(--sp-1) 0; }

/* ══════════════════════════════════════════════════════
   § 6  派单卡片（保留渐变但降低饱和度；14px 圆角对齐测试断言）
   ══════════════════════════════════════════════════════ */
.dispatch-page .dispatch-card {
  background: linear-gradient(135deg,rgba(247, 180, 208,.06),rgba(29,32,40,.96) 46%,rgba(121,174,232,.035));
  border-color: var(--c-line);
  border-radius: 14px;
  transition: border-color 140ms ease;
}
.dispatch-page .dispatch-card:hover { border-color: var(--xy-line-strong); }
.dispatch-candidate-card {
  border-radius: var(--r-md);
  background: var(--c-raised);
}

/* ══════════════════════════════════════════════════════
   § 7  人员钱包
   ══════════════════════════════════════════════════════ */
.wallet-person-card,
.wallet-report-panel,
.wallet-people-list,
.wallet-detail-panel,
.wallet-approval-panel {
  background: var(--c-surface);
  border-color: var(--c-line);
  border-radius: var(--r-md);
}
/* 钱包三格：桌面保持三列，纯色底 */
.wallet-values {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
.wallet-values span {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-raised);
  color: var(--c-muted);
}
.wallet-values strong {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   § 8  登录页
   ══════════════════════════════════════════════════════ */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--sp-5) var(--sp-4);
  background: var(--c-canvas);
}
.login-card {
  width: 100%;
  max-width: 360px;
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: 0 24px 64px rgba(0,0,0,.32);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.login-brand img { width: 40px; height: 40px; border-radius: var(--r-sm); }
.login-brand h1 { font-size: var(--fs-lg); font-weight: 700; margin: 0; color: var(--c-text); }
.login-heading h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: 700; color: var(--c-text); }
.login-heading p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
.login-input-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-3);
  height: 48px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-canvas);
  transition: border-color 140ms ease;
}
.login-input-field:focus-within { border-color: var(--xy-line-strong); }
.login-input-field i, .login-input-field svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--c-muted); }
.login-input-field input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--c-text); font-size: var(--fs-base); outline: none; }
.login-input-field input::placeholder { color: var(--c-muted); }
.login-meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--c-muted); }
.login-actions .primary { width: 100%; height: 48px; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 700; letter-spacing: .02em; }

/* ══════════════════════════════════════════════════════
   § 9  Toast (#toast 单 div，.show 控制可见性)
   ══════════════════════════════════════════════════════ */
#toast {
  position: fixed !important;
  top: 88px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateX(0) !important;
  width: auto !important;
  min-width: 180px;
  max-width: 320px;
  z-index: 9000 !important;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(0,0,0,.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
#toast.show { opacity: 1 !important; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #toast { transition: opacity 80ms ease; } }

/* ══════════════════════════════════════════════════════
   § 10  人员统计格（客服管理 / 陪玩管理）
   ══════════════════════════════════════════════════════ */
.personnel-stat {
  min-height: 0 !important;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border-color: var(--c-line);
}
.personnel-stat span { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.personnel-stat strong { font-size: var(--fs-2xl); letter-spacing: -.02em; line-height: 1; }

/* ══════════════════════════════════════════════════════
   § 11  响应式
   ══════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .dashboard-overview .grid.metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  /* 今日概览：2列 */
  .dashboard-overview .grid.metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-overview .card.metric { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .dashboard-overview .card.metric:nth-child(2n) { border-right: none; }

  /* 充值流水：关键信息优先 */
  .recharge-record { grid-template-columns: 1fr 1fr !important; gap: var(--sp-3); }
  .recharge-record-money { order: -1; grid-column: 1 !important; }
  .recharge-record-balance { grid-column: 2 !important; }
  .recharge-record-id,
  .recharge-record-customer,
  .recharge-record-collection,
  .recharge-record-note,
  .recharge-record-actions { grid-column: 1 / -1 !important; }

  /* 钱包三格：手机端单列 */
  .wallet-values { grid-template-columns: 1fr !important; }

  /* 登录：全宽无边距 */
  .login-card {
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Toast：底部安全区上方 */
  #toast {
    top: auto !important;
    right: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
    left: 12px !important;
    max-width: calc(100vw - 24px);
  }
}

/* ══════════════════════════════════════════════════════
   § 12  reduced-motion
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .recharge-record,
  .dispatch-page .dispatch-card,
  .wallet-person-card { transition: none !important; }
}

} /* end legacy-layer */