/* ==========================================================================
   ERMAO 登录 / 注册页 —— 样式表
   设计语言：iOS 17 风格（浅灰底 + 玻璃拟态卡片 + 系统蓝 var(--accent)）
   说明：本文件为独立实现，配色 / 尺寸经对目标页面测量后复刻，
        并额外支持 prefers-color-scheme: dark。
   ========================================================================== */

/* ----------------------------- 设计令牌 ----------------------------- */
/* 粉色主题：主色 #ff5d8f（玫瑰粉），背景带粉调 */
:root {
  --bg-1: #fff5f8;
  --bg-2: #ffe8f0;

  --text-1: #2b1b22;
  --text-2: #7a5c68;
  --text-3: #9b8290;

  --accent: #ff5d8f;
  --accent-hover: #f94a80;
  --accent-soft: #ffe3ec;
  --accent-ring: rgba(255, 93, 143, 0.22);
  --danger: #ff3b5c;
  --success: #34c759;

  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 14px 44px rgba(255, 93, 143, 0.14), 0 2px 10px rgba(160, 90, 120, 0.06);

  --field-bg: rgba(255, 255, 255, 0.75);
  --field-border: rgba(255, 93, 143, 0.16);
  --field-border-hover: rgba(255, 93, 143, 0.34);
  --field-h: 46px;
  --field-radius: 12px;

  --seg-bg: rgba(255, 93, 143, 0.1);
  --seg-thumb: #fff;
  --seg-radius: 9px;

  --hairline: #ffe0ea;
  --sheet-bg: #fff;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-1: #1f141a;
    --bg-2: #120b10;

    --text-1: #fbeef3;
    --text-2: #c9a8b6;
    --text-3: #9e7f8c;

    --accent: #ff7aa6;
    --accent-hover: #ff92b6;
    --accent-soft: rgba(255, 122, 166, 0.16);
    --accent-ring: rgba(255, 122, 166, 0.28);

    --card-bg: rgba(48, 32, 40, 0.74);
    --card-border: rgba(255, 150, 185, 0.14);
    --card-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);

    --field-bg: rgba(60, 40, 50, 0.68);
    --field-border: rgba(255, 150, 185, 0.16);
    --field-border-hover: rgba(255, 150, 185, 0.34);

    --seg-bg: rgba(255, 122, 166, 0.14);
    --seg-thumb: #6b4453;

    --hairline: rgba(255, 150, 185, 0.14);
    --sheet-bg: #241a20;
  }
}

/* ----------------------------- 基础重置 ----------------------------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  color: var(--text-1);
  background: var(--bg-1);
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

/* ----------------------------- 页面容器 ----------------------------- */
.auth-page {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 24px;
  background-image: radial-gradient(circle at 20% 10%, rgba(255, 93, 143, 0.14), transparent 52%),
    radial-gradient(circle at 82% 88%, rgba(255, 176, 205, 0.2), transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(255, 224, 236, 0.35), transparent 70%),
    linear-gradient(var(--bg-1), var(--bg-2));
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  .auth-page {
    background-image: radial-gradient(circle at 20% 10%, rgba(255, 122, 166, 0.2), transparent 52%),
      radial-gradient(circle at 82% 88%, rgba(255, 92, 140, 0.16), transparent 52%),
      linear-gradient(var(--bg-1), var(--bg-2));
  }
}

.card-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}

/* ----------------------------- 玻璃卡片 ----------------------------- */
.card {
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  animation: card-in 0.6s var(--ease-out);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card-body {
  padding: 28px 32px;
}

/* ----------------------------- 品牌区 ----------------------------- */
.hero {
  margin-bottom: 22px;
  padding-top: 18px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ff7aa8, #ff4d86);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
}

/* --------------------------- 过期提示条 --------------------------- */
.expired-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  color: #c53030;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.expired-banner svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

@media (prefers-color-scheme: dark) {
  .expired-banner {
    color: #ff8f8f;
    background: rgba(255, 69, 58, 0.14);
    border-color: rgba(255, 69, 58, 0.32);
  }
}

/* --------------------------- 分段控件 --------------------------- */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
  padding: 2px;
  background: var(--seg-bg);
  border-radius: var(--seg-radius);
  -webkit-user-select: none;
  user-select: none;
}

.seg-item {
  position: relative;
  z-index: 1;
  padding: 7px 0;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s;
}

.seg-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: var(--seg-thumb);
  border-radius: 7px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s var(--ease-out);
}

.seg-thumb.right {
  transform: translateX(100%);
}

/* --------------------------- 表单 --------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.noauto-trap {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.field {
  position: relative;
}

.field .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-3);
  pointer-events: none;
  transform: translateY(-50%);
  transition: color 0.2s;
}

.field input {
  width: 100%;
  height: var(--field-h);
  padding: 0 44px 0 42px;
  color: var(--text-1);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  outline: none;
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.field input::placeholder {
  color: var(--text-3);
}

.field input:hover {
  border-color: var(--field-border-hover);
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.field input:focus ~ .icon {
  color: var(--accent);
}

/* 密码：用 text-security 打码，规避浏览器密码管理器 */
.pw-masked {
  letter-spacing: 0.08em;
  -webkit-text-security: disc;
  text-security: disc;
}

.toggle-pw {
  position: absolute;
  top: 50%;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.2s, background 0.2s;
}

.toggle-pw:hover {
  color: var(--text-2);
  background: rgba(0, 0, 0, 0.04);
}

.toggle-pw svg {
  width: 18px;
  height: 18px;
}

@media (prefers-color-scheme: dark) {
  .toggle-pw:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* 验证码 */
.captcha-field input {
  padding-right: 110px;
}

.captcha-img {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 96px;
  height: 36px;
  object-fit: cover;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.15s;
}

.captcha-img:hover {
  opacity: 0.85;
}


/* --------------------------- 协议勾选行 --------------------------- */
.agreement-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: -2px;
  padding: 2px 4px;
  color: var(--text-2);
  font-size: 12px;
}

.agree-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.agree-check input[type="checkbox"] {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  background: #fff;
  border: 1.5px solid #c7c7cc;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.agree-check input[type="checkbox"]:hover {
  border-color: var(--accent);
}

.agree-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.agree-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (prefers-color-scheme: dark) {
  .agree-check input[type="checkbox"] {
    background: rgba(58, 58, 60, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

.agreement-link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.agreement-link:hover {
  text-decoration: underline;
}

/* --------------------------- 按钮 --------------------------- */
.btn-primary {
  width: 100%;
  height: 46px;
  margin-top: 6px;
  color: #fff;
  background: linear-gradient(135deg, #ff7aa8 0%, #ff5d8f 52%, #f0457a 100%);
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 93, 143, 0.32);
  transition: background 0.15s, transform 0.1s, opacity 0.2s, box-shadow 0.15s;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ff8db4 0%, #ff6d9b 52%, #f5568a 100%);
  box-shadow: 0 8px 22px rgba(255, 93, 143, 0.4);
}

.btn-primary:active {
  transform: scale(0.985);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 次级按钮（协议抽屉中的「我不同意」） */
.btn {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.btn-block {
  flex: 1;
}

.btn-plain {
  color: var(--text-1);
  background: var(--sheet-bg);
}

.btn-plain:hover {
  background: rgba(120, 120, 128, 0.08);
}

.agreement-footer .btn-primary {
  height: 44px;
  margin-top: 0;
}

/* 提交按钮：保留原生 disabled 视觉，但点击时给出「为什么不能提交」的提示 */
.btn-guard {
  position: relative;
  margin-top: 6px;
}

.btn-guard .btn-primary {
  margin-top: 0;
}

.btn-guard-mask {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: 12px;
  cursor: not-allowed;
}

.btn-guard.blocked .btn-guard-mask {
  display: block;
}

/* --------------------------- 遮罩层 --------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.45);
  animation: overlay-in 0.2s ease-out;
}

.overlay-center {
  align-items: center;
  padding: 24px;
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 底部抽屉 */
.sheet {
  width: 100%;
  max-width: 640px;
  height: 90vh;
  overflow: hidden;
  background: var(--sheet-bg);
  border-radius: 16px 16px 0 0;
  animation: sheet-in 0.3s var(--ease-out);
}

@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 居中弹窗 */
.modal {
  width: 320px;
  max-width: 88vw;
  overflow: hidden;
  background: var(--sheet-bg);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  animation: modal-in 0.25s var(--ease-out);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* --------------------------- 协议抽屉内容 --------------------------- */
.agreement-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sheet-bg);
}

.agreement-header {
  position: relative;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hairline);
}

.agreement-title {
  margin: 0;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 600;
}

.close-btn {
  position: absolute;
  top: 50%;
  right: 16px;
  padding: 4px;
  color: #8b96a3;
  background: none;
  border: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.close-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

.agreement-body {
  flex: 1;
  padding: 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.agreement-md {
  color: #1f2937;
  font-size: 14px;
  line-height: 1.75;
  word-break: break-word;
}

.agreement-md h1 {
  margin: 0 0 14px;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.agreement-md h2 {
  margin: 22px 0 10px;
  padding-left: 10px;
  color: var(--text-1);
  border-left: 3px solid var(--accent);
  font-size: 15px;
  font-weight: 600;
}

.agreement-md p {
  margin: 10px 0;
}

.agreement-md ul,
.agreement-md ol {
  margin: 10px 0;
  padding-left: 22px;
}

.agreement-md li {
  margin: 6px 0;
}

.agreement-md strong {
  color: var(--accent);
  font-weight: 700;
}

.agreement-md a {
  color: var(--accent);
  text-decoration: underline;
}

.agreement-footer {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--sheet-bg);
  border-top: 1px solid var(--hairline);
}

@media (prefers-color-scheme: dark) {
  .agreement-md {
    color: #e5e7eb;
  }
}

/* --------------------------- 卡密兑换弹窗 --------------------------- */
.redeem-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 20px;
}

.redeem-modal-title {
  color: var(--text-1);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}

.redeem-modal-sub {
  margin-bottom: 4px;
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
}

.redeem-modal-field {
  margin-top: 0;
}

.redeem-cancel {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.redeem-cancel:hover {
  color: var(--text-1);
}

/* 公告提示弹窗正文 */
.announce-body {
  max-height: 50vh;
  overflow: auto;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

/* --------------------------- 账号中心（登录后演示页） --------------------------- */
.account-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--field-bg);
  overflow: hidden;
}

.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--field-border);
}

.account-row:last-child {
  border-bottom: none;
}

.account-label {
  flex-shrink: 0;
  color: var(--text-2);
}

.account-value {
  color: var(--text-1);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}

.token-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px 4px;
}

.token-label {
  color: var(--text-2);
  font-size: 12px;
}

.account-token {
  display: block;
  padding: 8px 10px;
  color: var(--text-1);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

.btn-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.btn-block-inline {
  flex: 1;
  height: 44px;
  margin-top: 0;
  font-size: 15px;
}

.dashboard-note {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.dashboard-note code {
  color: var(--text-2);
  font-family: Menlo, Consolas, monospace;
}

/* --------------------------- 辅助文本 --------------------------- */
.hint {
  min-height: 16px;
  padding: 0 4px;
  color: var(--text-3);
  font-size: 12px;
  transition: color 0.2s;
}

.hint.err {
  color: var(--danger);
}

.hint.ok {
  color: var(--success);
}

.footer {
  margin-top: 22px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.footer a {
  margin: 0 2px;
  color: var(--text-2);
  cursor: pointer;
}

.footer a:hover {
  text-decoration: underline;
}

/* --------------------------- Toast --------------------------- */
.toast-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 70%;
  padding: 10px 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 10px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  word-break: break-all;
  white-space: pre-wrap;
  animation: toast-in 0.2s ease-out;
}

.toast.leaving {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.toast-icon {
  width: 24px;
  height: 24px;
}

/* --------------------------- 响应式 --------------------------- */
@media (max-width: 420px) {
  .card {
    border-radius: 20px;
  }

  .card-body {
    padding: 18px 24px 24px;
  }

  .hero h1 {
    font-size: 20px;
  }
}

/* 登录/注册成功后的手动兜底入口（自动跳转被浏览器拦住时才显示） */
.jump-fallback {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-3);
}

.jump-fallback a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jump-fallback a:hover {
  color: var(--accent-hover);
}

@media (prefers-color-scheme: dark) {
  .jump-fallback {
    color: var(--text-3);
  }
}

/* ============================== 用户中心 ============================== */
.uc-page {
  padding: 0 0 40px;
}

.uc-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 16px 0;
}

.uc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.uc-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.uc-logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-1);
}

.uc-sub {
  font-size: 13px;
  color: var(--text-3);
}

.uc-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uc-name {
  max-width: 160px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-1);
}

/* 会员：名字变红 + 前面挂一个会员小图标 */
.uc-name.vip {
  color: #e5342b;
  font-weight: 800;
}

.uc-vip-icon {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(229, 52, 43, 0.35));
}

/* 返回内容框：放最前面、给足高度（只显示推送内容） */
/* ★ 房间号查询卡片贴在屏幕底部：返回内容再长，也不用往下拉才能点【查询】 */
.uc-query-sticky {
  position: sticky;
  bottom: 12px;
  z-index: 8;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
  border-color: var(--accent, #2b6cff) !important;
}

.uc-content-box {
  min-height: 240px;
  padding: 16px;
  overflow: visible;      /* ★ 内容多也不出现内部滚动条：整页往下拉就能一次看全 */
  background: var(--seg-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.uc-content-box.is-waiting {
  border-color: var(--accent);
}

.uc-content-box .uc-text {
  margin: 0;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-1);
}

.uc-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  color: var(--text-3);
}

/* 查询中：按钮 + 输入框一起变灰（禁止再点） */
.btn-primary.is-busy,
.btn-primary[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.35);
}

/* 说明：房间号输入框不再进入 busy 态（查询期间禁用输入框会让用户点它完全没反应，最长要等 40 秒超时），
   这里只剩「真的被禁用」时的兜底样式 */
.uc-input[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--seg-bg);
}

.uc-logout {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 10px;
}

.uc-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.uc-card {
  padding: 18px 20px 20px;
}

.uc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.uc-card-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
}

.uc-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--seg-bg);
  border-radius: 999px;
}

.uc-badge.ok {
  color: #0a7d32;
  background: rgba(52, 199, 89, 0.16);
}

.uc-badge.bad {
  color: #c53030;
  background: rgba(255, 59, 48, 0.12);
}

.uc-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-3);
}

.uc-inline {
  display: flex;
  gap: 10px;
}

.uc-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--field-h);
  padding: 0 14px;
  font-size: 15px;
  color: var(--text-1);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  outline: none;
  touch-action: manipulation;        /* 点下去就是点下去，别等浏览器判断是不是双击缩放 */
  -webkit-user-select: text;         /* 光标 / 长按选中照旧正常 */
  user-select: text;
}

.uc-input:hover {
  border-color: var(--field-border-hover);
}

.uc-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* 键盘打开期间的输入框高亮：手机浏览器对 :focus 的样式支持时好时坏，
   这里由脚本显式加 kp-focus，保证「输入框已经聚焦」一眼看得见 */
.uc-input.kp-focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.uc-inline-btn {
  flex: 0 0 auto;
  width: 116px;
  height: var(--field-h);
  font-size: 15px;
  border-radius: var(--field-radius);
}

.uc-result {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--field-border);
}

.uc-note {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
}

.uc-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.uc-copy {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 9px;
}

.uc-content {
  max-height: 260px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-1);
  background: var(--seg-bg);
  border-radius: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

.uc-notice {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-2);
  white-space: pre-wrap;
}

/* 管理员发来的数据列表 */
.uc-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uc-msg {
  padding: 12px 14px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 12px;
}

.uc-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-3);
}

.uc-msg-room {
  padding: 2px 8px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

.uc-msg .uc-content {
  font-size: 12.5px;
}

.uc-empty {
  padding: 14px;
  font-size: 13px;
  text-align: center;
  color: var(--text-3);
  background: var(--seg-bg);
  border-radius: 12px;
}

/* 角色表：竖屏排布 + 大字号 + 颜色高亮（管理员推送的数据按这个渲染） */
.wl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  background: var(--seg-bg);
  border-left: 6px solid var(--text-3);
  border-radius: 14px;
}

.wl-label {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.wl-role {
  flex: 1 1 auto;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 2px;
  text-align: right;
  word-break: keep-all;
}

@media (prefers-color-scheme: dark) {
  .wl-label {
    color: var(--text-3);
  }
}

@media (max-width: 420px) {
  .uc-inline {
    flex-direction: column;
  }

  .uc-inline-btn {
    width: 100%;
  }

  .uc-wrap {
    padding: 16px 12px 0;
  }
}

@media (prefers-color-scheme: dark) {
  .uc-badge.ok {
    color: #6ee7a0;
    background: rgba(52, 199, 89, 0.2);
  }

  .uc-badge.bad {
    color: #ff9a92;
    background: rgba(255, 59, 48, 0.22);
  }

  .uc-note {
    color: #6ee7a0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   全端统一：电脑上也按「手机版」排版（窄列 + 居中），不要两列、不要东倒西歪
   客户在手机上是这个版式，电脑上打开也是同一个样子
   ========================================================================== */
.uc-card {
  max-width: none;              /* 卡片铺满窄列（不再被 .card 的 400px 卡住） */
}

.uc-wrap {
  max-width: 480px;             /* ★ 手机端宽度：电脑上居中显示成一条窄列 */
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.uc-main {
  display: flex;                /* ★ 永远单列（以前电脑上是两列网格，看着乱） */
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 560px) {
  .uc-page {
    padding: 26px 0 40px;
  }

  .uc-wrap {
    padding: 26px 20px 48px;
  }

  .uc-content-box {
    min-height: 260px;
  }

  .card-wrap,
  .card {
    max-width: 400px;
  }
}

/* ==========================================================================
   用户中心（登录后那页）★ v11 一屏版 ★
   —— 进去就看得见全部：顶栏 / 返回内容 / 房间号查询 / 卡密充值 / 账号信息
      都在同一屏里，页面本体不上下滑动。
   —— 只有「返回内容」框（数据多时）在框内滚动。
   —— 不依赖上面的老规则，这里用两层显式布局：
        .uc-wrap  竖排：顶栏 / 会话提示 / 主体 / 底部说明
        .uc-main  网格：返回内容(吃掉剩余高度) / 房间号查询 / 卡密充值
      卡片间距一律用 margin（老手机浏览器会把 gap 多算进滚动高度）。
   ========================================================================== */
.uc-page {
  height: 100vh;                 /* 兜底：不认 dvh 的老浏览器 */
  height: 100dvh;                /* 手机上按实际可视高度算，不被地址栏顶出去 */
  min-height: 0;                 /* ★ 覆盖 .auth-page 的 100vh，否则地址栏一收一放就滚 */
  padding: 0;
  overflow: hidden;              /* ★ 页面本体不许滚 */
  align-items: stretch;          /* 顶栏贴顶，不再垂直居中 */
  justify-content: center;       /* 电脑上依旧是居中窄列 */
}

.uc-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 10px 12px 6px;
}

/* ------------------------------ 顶栏 ------------------------------ */
.uc-top {
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.uc-logo { font-size: 19px; }
.uc-sub { font-size: 12px; }
.uc-user { gap: 8px; }
.uc-name { max-width: 34vw; font-size: 13.5px; }

.uc-logout {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 9px;
}

/* 会话失效提示：平时 hidden，不占高度 */
.expired-banner {
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 9px;
}

/* ------------------------ 主体：网格、单列 ------------------------ */
.uc-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;        /* ①吃剩余高度 ②房间号查询 ③卡密充值（小键盘浮在屏幕底部，不占行） */
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;             /* 行高是算准的，不会溢出；让卡片阴影正常显示 */
}

/* 卡片：统一紧凑内边距；间距用 margin 顶开 */
.uc-card {
  max-width: none;               /* 覆盖 ≥560px 那条 400px 老规则 */
  margin: 0;
  padding: 11px 13px;
  border-radius: 16px;
}

.uc-main > .uc-card + .uc-card {
  margin-top: 6px;               /* 「卡密充值 / 续费」紧贴着上面的「房间号查询」卡，离输入框更近一点 */
}

/* ① 返回内容：标题固定，内容框吃掉剩余高度并在框内滚动 */
.uc-main > .uc-card:first-child {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;              /* 圆角裁掉框内的滚动内容 */
}

.uc-card-head {
  align-items: center;
  margin-bottom: 7px;
}

.uc-card-head h2 { font-size: 14.5px; }

.uc-badge {
  padding: 2px 8px;
  font-size: 11px;
}

.uc-main > .uc-card:first-child .uc-content-box {
  min-height: 52px;
  padding: 8px 10px;
  overflow-y: auto;              /* ★ 只有这里滚 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.uc-main > .uc-card:first-child .uc-empty {
  height: 100%;
  min-height: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 12.5px;
}

.uc-main > .uc-card:first-child .uc-text {
  font-size: 15px;
  line-height: 1.55;
}

/* 框内的数据行也压紧一点，一屏能多看几行 */
.uc-main > .uc-card:first-child .wl-list { gap: 6px; }

.uc-main > .uc-card:first-child .wl-row {
  min-height: 40px;
  padding: 5px 10px;
  border-left-width: 4px;
  border-radius: 10px;
}

.uc-main > .uc-card:first-child .wl-label { font-size: 15px; letter-spacing: 1px; }

/* ② ③ 两张卡：一行「输入框 + 按钮」，永远留在屏幕里 */
.uc-query-sticky {
  position: static;              /* 老版是贴底 sticky，会盖住下面的卡 */
  bottom: auto;
  z-index: auto;
  box-shadow: none;
}

.uc-inline { gap: 8px; }
.uc-input { height: 42px; font-size: 14.5px; }

.uc-inline-btn {
  width: 100px;
  height: 42px;
  margin-top: 0;                 /* ★ .btn-primary 自带 margin-top:6px，会把它顶低 6px（看着和输入框没对齐） */
  font-size: 14.5px;
  line-height: 1;
}

.uc-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

/* 账号信息：一行小标签（原来是 4 行大列表，白占 60px+） */
.uc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 12px;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-3);
}

.uc-meta-item { white-space: nowrap; }

.uc-meta b {
  margin-left: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
}

.uc-meta .uc-forget {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
}

.uc-meta .uc-forget:hover { text-decoration: underline; }


/* ------------------------------ 适配 ------------------------------ */
@media (min-width: 560px) {
  .uc-wrap { padding: 16px 18px 0; }
  .uc-main > .uc-card + .uc-card { margin-top: 10px; }
}

/* 矮屏（横屏 / 老机型）：只压空隙，不藏信息 */
@media (max-height: 700px) {
  .uc-wrap { padding: 8px 10px 4px; }
  .uc-top { margin-bottom: 6px; }
  .uc-card { padding: 9px 12px; }
  .uc-card-head { margin-bottom: 6px; }
  .uc-main > .uc-card + .uc-card { margin-top: 6px; }
  .uc-input,
  .uc-inline-btn { height: 38px; }
  .uc-meta { gap: 2px 10px; margin-top: 5px; }
}

/* 窄屏真机 320/360/390：「输入框 + 按钮」必须同一行，按钮窄一点 */
@media (max-width: 480px) {
  .uc-inline { flex-direction: row; }
  .uc-inline-btn { width: 86px; padding: 0 6px; font-size: 14px; }
  .uc-meta { gap: 2px 9px; font-size: 11px; }
  .uc-meta .uc-forget { margin-left: 0; }
}

/* 极矮屏（320x568 之类）：顶栏和卡片再瘦一圈 */
@media (max-height: 620px) {
  .uc-top { margin-bottom: 5px; }
  .uc-sub { display: none; }     /* 顶栏的「用户中心」小字先去掉 */
  .uc-card { padding: 8px 11px; }
  .uc-main > .uc-card:first-child .uc-content-box { min-height: 44px; }
}

/* ==========================================================================
   ★ 房间号：不弹系统键盘，改用页面里自己画的小键盘（.kp）★
   ★ 它紧贴在「房间号」输入框正下方弹出来、并盖住下面的「卡密充值 / 续费」卡 ——
     跟系统键盘一样：盖住下面的内容，不顶版式。
     位置由 dashboard.html 末尾的脚本量：输入框下沿（getBoundingClientRect().bottom）
     写进 .kp 的 top；转屏 / 页面滚动都会重新量一次。
   ★ 展开 / 收起时一行版式都不动（脚本不再给 .uc-main 加让位内边距）——
     手指还按着屏幕时版式一跳，浏览器就会把这次点击（连同焦点）一起吃掉，
     表现就是「点一下没反应、要按住一会才聚焦」。
     所以这里没有 --kp-h、没有 padding-bottom：键盘是纯粹的浮层。
   背景必须用不透明色：--card-bg 是半透明玻璃卡，盖在卡片上会透出底下的字。
   z-index 70：压在卡片之上，但低于 .overlay(100) 和提示条 toast(300)。
   键盘上只有数字键：查询点页面上那颗「查询」（点它键盘自己收起），收键盘点页面别处。
   键盘头只显示「最近打过的号」：查询成功后输入框清空，这个显示不清（点「清空」才清）。
   电脑上够宽（>560px）又没触摸：不加 inputmode、不弹小键盘，照旧直接打字。
   ========================================================================== */
.kp {
  position: fixed;
  right: 0;
  left: 0;
  top: auto;                     /* ★ 展开时脚本按输入框下沿写 top（紧贴输入框） */
  bottom: 0;                     /* 脚本没跑起来时的兜底：贴屏幕底（老行为） */
  z-index: 70;
  max-width: none;
  margin: 0;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border: 0;
  border-top: 0.5px solid var(--card-border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
  .kp {
    background: #262628;
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.55);
  }
}

.kp[hidden] { display: none; }     /* 收起时整条键盘消失，版式回到原样 */

/* 键盘铺满整幅宽，键区收在中间一条（电脑上不会拉成一排超宽的扁键） */
.kp-head,
.kp-grid {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto;
}

/* 键盘头：一条纯显示（「房间号 + 最近打过的号」），没有按钮 */
.kp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-3);
}

.kp-label {
  flex: 0 0 auto;
}

.kp-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ★ 键盘上不放「查询」「收起」键（按要求去掉）：
     查询用页面上那颗「查询」—— 点它时键盘自己会收起，一次点击两件事都做完；
     收键盘点页面别处即可。
     键盘头上只留一条显示：最近打过的号（查询成功后输入框清空，这里不清）。 */

/* 5 个数字一行：0-9 只占两行，比系统 4 行键盘矮一半。
   ★ 键高按屏幕高度分档压紧（44 → 40 → 36 → 32）——
     键盘越矮，就越能整个待在「输入框下沿 → 屏幕底」这段空间里，
     不会为了留在屏里而往上去压住输入框。 */
.kp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.15fr;
  gap: 5px;
}

.kp-key {
  height: 44px;
  padding: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-1);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 11px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.kp-key:active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.kp-fn {
  font-size: 14px;
  color: var(--text-2);
  background: var(--seg-bg);
}

/* 矮屏：键盘矮一点，好让整条键盘 + 输入框都稳稳待在屏幕里 */
@media (max-height: 700px) {
  .kp-key { height: 40px; font-size: 19px; }
}

@media (max-height: 620px) {
  .kp-key { height: 36px; font-size: 18px; }
}

/* 横屏手机（屏幕高度很小的那种）：只把键盘再压扁一点，一张卡片都不藏 */
@media (max-height: 560px) {
  .kp-key { height: 32px; font-size: 17px; }
  .kp-head { margin-bottom: 4px; }
}

/* ★ 键盘是纯浮层：脚本只写 .kp 自己的 top，一点都不碰 .uc-main / .uc-page 的盒子，
     所以这里没有（也不该有）kp-on / --kp-h / padding-bottom 那种让位规则。
     「展开时版式纹丝不动」正是「点一下就能聚焦」的关键 —— 一动版式，
     手指还按着屏幕时输入框就跑位了，这次的点击（和刚给的焦点）会被浏览器吃掉。
     键盘越矮越不会放不下：键高按屏幕高度分档压紧（44 → 40 → 36 → 32），
     实测最矮的横屏（568x320 / 844x390：输入框下沿到屏幕底还有 122px）
     整条键盘（112px）也照样完整待在屏幕里，一张卡片都不用藏。 */


/* ==========================================================================
   粉色主题新增组件
   1) 登录/注册页的「提交后需审核」提示块
   2) 注册成功 · 等待审核面板
   3) 账号中心 · 卡密二次确认弹窗
   4) 小修：分段控件、勾选框、Toast 对齐粉色
   ========================================================================== */

/* ------------------------- 1) 审核提示块 ------------------------- */
.review-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 2px 0 10px;
  padding: 9px 11px;
  color: #b24a72;
  background: var(--accent-soft);
  border: 1px solid rgba(255, 93, 143, 0.22);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}

.review-hint svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

@media (prefers-color-scheme: dark) {
  .review-hint {
    color: #ffb3cc;
    background: rgba(255, 122, 166, 0.14);
    border-color: rgba(255, 150, 185, 0.24);
  }
}

/* ------------------------- 2) 等待审核面板 ------------------------- */
.pending-modal {
  text-align: center;
}

.pending-icon {
  width: 46px;
  height: 46px;
  margin: 2px auto 10px;
  color: #fff;
  background: linear-gradient(135deg, #ff8ab2, #ff5d8f);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(255, 93, 143, 0.32);
}

.pending-icon svg {
  width: 26px;
  height: 26px;
}

.pending-rows {
  margin: 14px 0 16px;
  padding: 10px 12px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 12px;
  text-align: left;
}

.pending-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--text-2);
}

.pending-row + .pending-row {
  border-top: 1px dashed var(--hairline);
}

.pending-row b {
  color: var(--text-1);
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}

.pending-badge {
  padding: 2px 10px;
  color: #c93f6e !important;
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: 12.5px;
}

@media (prefers-color-scheme: dark) {
  .pending-badge {
    color: #ffc0d5 !important;
    background: rgba(255, 122, 166, 0.2);
  }
}

/* ------------------------- 3) 卡密二次确认 ------------------------- */
.card-confirm {
  text-align: center;
}

.card-preview {
  margin: 14px 0 6px;
  padding: 16px 14px;
  background: linear-gradient(135deg, #fff0f6, #ffe3ec);
  border: 1px solid rgba(255, 93, 143, 0.24);
  border-radius: 14px;
}

@media (prefers-color-scheme: dark) {
  .card-preview {
    background: linear-gradient(135deg, rgba(255, 122, 166, 0.16), rgba(255, 122, 166, 0.08));
    border-color: rgba(255, 150, 185, 0.24);
  }
}

.card-preview-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-1);
  word-break: break-all;
}

.card-preview-kind {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #d33a6d;
}

@media (prefers-color-scheme: dark) {
  .card-preview-kind {
    color: #ffb0c9;
  }
}

.card-confirm-note {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ------------------------- 4) 细节小修 ------------------------- */
/* 分段控件：滑块阴影带粉调 */
.seg-thumb {
  box-shadow: 0 1px 4px rgba(255, 93, 143, 0.22), 0 0 0 0.5px rgba(255, 93, 143, 0.12);
}

/* 自绘 checkbox 选中态：粉 */
.agree-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

/* Toast 失败图标保持红色；成功态文字不额外染色 */
.toast {
  box-shadow: 0 10px 30px rgba(80, 30, 55, 0.28);
}

/* 账号中心：会员名（vip）粉得更亮 */
.uc-name.vip {
  color: var(--accent);
  font-weight: 700;
}

/* 徽标 */
.uc-badge {
  color: #c93f6e;
  background: var(--accent-soft);
}

@media (prefers-color-scheme: dark) {
  .uc-badge {
    color: #ffc0d5;
    background: rgba(255, 122, 166, 0.2);
  }
}

/* 小键盘按键按下：粉 */
.kp-key:active {
  background: var(--accent-soft);
}