/* themes.css — 主题色 + v2 新增组件样式 */
/* 对应 §17 主题背景、§18 吉祥物、§3 连击条、§4 掉落预览、§5 星星、§6/§7 任务与商店 */

/* ================= 主题变量（默认白色背景与棋盘） ================= */
body[data-theme="grass"] { --board-bg: #ffffff; --board-grid: #f0f0f0; --accent: #34a853; }
body[data-theme="ocean"] { --board-bg: #ffffff; --board-grid: #f0f0f0; --accent: #2b7fd4; }
body[data-theme="star"]  { --board-bg: #ffffff; --board-grid: #f0f0f0; --accent: #7c5cff; }
body[data-theme="candy"] { --board-bg: #ffffff; --board-grid: #f0f0f0; --accent: #e0568a; }

:root {
  --ui-accent: #7c5cff;
  --ui-star-on: #ffb800;
  --ui-star-off: #dcdce4;
}

.game-container {
  background: linear-gradient(180deg, #ffffff 0%, var(--board-bg, #f6f6fa) 100%);
  transition: background 0.4s ease;
}

.board-wrap {
  background: var(--board-bg, #fff);
  transition: background 0.4s ease;
}

canvas { background: var(--board-bg, #fff); transition: background 0.4s ease; }

/* ================= HUD 扩展 ================= */
.hud-mini { font-size: 14px; color: #666; white-space: nowrap; }
.hud-mini b { color: #d4880a; font-size: 16px; }

/* ================= 倍数显示：棋盘中央横幅 ================= */

/* ================= 掉落预览（§4） ================= */
.preview-strip {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  min-height: 30px;
}

.preview-strip::before {
  content: 'NEXT';
  font-size: 10px;
  font-weight: 800;
  color: #999;
  letter-spacing: 1px;
  margin-right: 2px;
}

.preview-dot {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ================= 星星（§5） ================= */
.stars-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.stars-row span {
  font-size: 40px;
  line-height: 1;
  color: var(--ui-star-off);
  transition: transform 0.25s ease, color 0.25s ease;
}

.stars-row span.on {
  color: var(--ui-star-on);
  transform: scale(1.18);
  text-shadow: 0 4px 12px rgba(255, 184, 0, 0.45);
  animation: star-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes star-pop {
  0% { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  100% { transform: scale(1.18) rotate(0deg); opacity: 1; }
}

/* ================= Overlay 可滚动（§25）且内容全部居中 ================= */
.overlay {
  overflow-y: auto;
  padding: 24px 12px;
  justify-content: safe center;
  align-items: center;
}

.overlay::-webkit-scrollbar { width: 6px; }
.overlay::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.title.small { font-size: 24px; }

/* ================= 菜单小按钮 ================= */
.menu-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.btn-mini {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.1s ease;
}

.btn-mini:active { transform: scale(0.94); }

/* 每日挑战已完成：绿色描边，别让人以为还能再打 */
.btn-mini.is-done {
  color: #1a8f4a;
  border-color: rgba(26, 143, 74, 0.4);
  background: rgba(92, 200, 143, 0.14);
}

/* ================= 任务 / 签到（§6 §8） ================= */
.signin-box {
  width: 86%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(124, 92, 255, 0.08);
  border: 1px solid rgba(124, 92, 255, 0.25);
  font-size: 14px;
  color: #4b3f8f;
  text-align: center;
}

.task-list {
  width: 86%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 14px;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.task-row.done { opacity: 0.55; }

.task-info { flex: 1; min-width: 0; }
.task-info b { font-size: 14px; color: #333; display: block; margin-bottom: 6px; }

.task-bar {
  height: 6px;
  border-radius: 3px;
  background: #ececf2;
  overflow: hidden;
}

.task-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7c5cff, #5c8fff);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.task-num { font-size: 11px; color: #999; }

.task-claim {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffb800, #ff8c00);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.task-claim:disabled {
  background: #e4e4ec;
  color: #aaa;
  cursor: not-allowed;
}

/* ================= 商店（§7） ================= */
.shop-list {
  width: 86%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.shop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.shop-icon { font-size: 22px; }
.shop-info { flex: 1; min-width: 0; }
.shop-info b { font-size: 14px; display: block; color: #333; }
.shop-info small { font-size: 11px; color: #999; }
.shop-own { font-size: 11px; color: #999; white-space: nowrap; }

.shop-buy {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c5cff, #5c8fff);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.shop-buy:disabled { background: #e4e4ec; color: #aaa; cursor: not-allowed; }

/* ================= 吉祥物（§18） ================= */
.mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
  animation: mascot-idle 3s ease-in-out infinite;
}

.mascot-img {
  width: 84px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 10px rgba(240, 180, 41, 0.35));
}

@keyframes mascot-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ================= Toast（§25 轻提示） ================= */
#toast {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  padding: 10px 20px;
  border-radius: 20px;
  background: rgba(20, 20, 30, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  max-width: 86%;
  text-align: center;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 提示条不换行：未解锁提示等短句始终一行显示 */
#toast { white-space: nowrap; max-width: 94%; }

/* ================= 玩法规则 ================= */
.rules-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 20;
}

/* 主页左上角：主页键在左，规则键在它右边 */
.top-left-group {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

/* 左上角竖排：🏠 在上、📮 邮箱在它下面 */
.corner-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.top-left-group .corner-btn {
  position: static;
  top: auto;
  left: auto;
}

.rules-box {
  width: 92%;
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-sizing: border-box;
  --rule-fs: 15px; /* 默认中档，由右下角「规则字号 A− / A+」调节 */
}

.rules-box::-webkit-scrollbar { width: 6px; }
.rules-box::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.rule-sec { margin-bottom: 14px; }
.rule-sec:last-child { margin-bottom: 4px; }

.rule-sec h3 {
  font-size: calc(var(--rule-fs, 15px) + 2px);
  color: #4b3f8f;
  margin-bottom: 6px;
  font-weight: 800;
}

.rule-sec p {
  font-size: var(--rule-fs, 15px);
  line-height: 1.65;
  color: #444;
  margin: 3px 0;
}

.rule-sec b { color: #222; }

/* 📖 规则首页：功能介绍 / 玩法规则 两个入口 */
.rules-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 内容页右下角：固定悬浮的字号调节（文字 + A− / A+ 两个圆钮，白底黑圈黑字） */
#features-menu,
#play-rules-menu { padding-bottom: 74px; }

.rule-font-ctrl {
  position: absolute;
  right: 14px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.rule-font-label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-right: 2px;
}

.rule-font-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.rule-font-btn:active { transform: scale(0.92); }
/* 已经最小 / 最大时变淡 */
.rule-font-btn.is-off { opacity: 0.3; box-shadow: none; }

/* ================= 主页竖排菜单 ================= */
.menu-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 86%;
  margin-bottom: 4px;
}

/* 主页内容较高，压缩纵向间距，保证一屏放得下；
   底部留出 60px 专给右下角的“注销”，任何屏高都不会压到“商店” */
#main-menu {
  justify-content: flex-start;
  justify-content: safe center;
  padding-top: 18px;
  padding-bottom: 92px;
}

#main-menu .mascot { margin-bottom: 6px; }
#main-menu .title { font-size: 26px; margin-bottom: 8px; }
#main-menu .result-box { padding: 10px 20px; margin-bottom: 8px; width: 86%; }
#main-menu .result-box p { font-size: 14px; margin: 4px 0; }
#main-menu .result-box b { font-size: 17px; }
#main-menu .btn-primary,
#main-menu .btn-secondary { padding: 12px 0; font-size: 16px; margin-bottom: 8px; }
#main-menu .menu-col { gap: 7px; margin-bottom: 0; }

/* 主页提示条：购物商店按钮和注销之间，左侧 ✕ 可关闭（叉掉后仍占位，布局不跳） */
.load-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
  max-width: 86%;
  min-height: 17px;      /* 固定高度：隐藏时也不塌陷，下面的按钮位置不变 */
  font-size: 11px;
  color: #98a0b3;
  line-height: 1.4;
}

.load-tip .load-tip-x {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid #c9cede;
  background: #ffffff;
  color: #8b91a4;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.load-tip .load-tip-x:active { transform: scale(0.88); }

/* 后台面板：分「全网 / 本机」两块 */
/* 后台一级菜单：点击数量 / 全服用户 */
.admin-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 后台二级页：整页竖排居中 */
.admin-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.admin-sec {
  width: 86%;
  margin-bottom: 10px;
}

.admin-sec-title {
  font-size: 12px;
  font-weight: 800;
  color: #7c8aa5;
  letter-spacing: 1px;
  margin: 0 0 5px 4px;
  text-align: left;
}

.admin-sec .result-box {
  width: 100%;
  margin-bottom: 0;
}

/* 后台字号：统一一套，整体比主页小一号（主页 14/17 → 后台 13/14/16） */
.admin-sec-title { font-size: 13px; }   /* 板块标题「🌐 全网 / 📱 本机」 */
.admin-sec .result-box p { font-size: 14px; margin: 6px 0; }
.admin-sec .result-box b { font-size: 16px; text-align: right; max-width: 70%; line-height: 1.35; word-break: break-word; }

/* 后台底部：统计起点说明（放在「本机」板块下、关闭按钮上） */
.admin-start-note {
  width: 86%;
  margin: 2px 0 10px;
  font-size: 11px;
  color: #8b98ad;
  text-align: center;
  letter-spacing: 0.5px;
}

/* 长按「🌐 全网」板块 3 秒 → 省份统计。
   手机上必须封掉滚动/选中/长按菜单，否则手指一抖就被取消 */
#admin-global-sec {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 省份统计页（整页覆盖，安卓返回键 / 返回按钮都能回游戏） */
.prov-page {
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #eef1f8, #dfe5f2);
}

.prov-card {
  width: 88%;
  max-width: 420px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 10px 30px rgba(60, 70, 110, 0.18);
  box-sizing: border-box;
}

.prov-title {
  font-size: 17px;
  margin: 0 0 4px;
  text-align: center;
  color: #3a4160;
  font-weight: 800;
}

.prov-sub {
  text-align: center;
  color: #8a90a8;
  font-size: 11px;
  margin: 0 0 12px;
}

.prov-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 2px solid #d7dcf0;
  border-radius: 24px;
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
  background: #fff;
  color: #3a4160;
}
.prov-search:focus { border-color: #7c5cff; }

.prov-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 80px;
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.prov-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 6px;
  border-bottom: 1px dashed #e6e9f4;
  font-size: 14px;
  color: #3a4160;
}
.prov-list li b { color: #7c5cff; font-size: 14px; }
.prov-list .prov-empty { justify-content: center; color: #a5abc2; font-size: 12px; padding: 18px 0; }
/* 市级页里「IP 只到省、没到市」的差额行（不可点，颜色弱化） */
.prov-list li.prov-unknown { color: #8b90a8; }
.prov-list li.prov-unknown b { color: #a5abc2; }
/* 点省份进市级统计：可点击的行给个箭头与按压反馈 */
.prov-list li.clickable { cursor: pointer; }
.prov-list li.clickable:active { background: rgba(124, 92, 255, 0.10); }
.prov-list .prov-arrow { font-style: normal; color: #b7bcd4; font-size: 14px; margin-left: 4px; }
.prov-card .btn-primary {
  flex: 0 0 auto;
  width: auto;
  align-self: center;
  padding: 10px 44px;
  margin-top: 14px;
}

.btn-mini.wide {
  width: 100%;
  padding: 13px 0;
  font-size: 15px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  border-radius: 30px;
  border: 2px solid #e6e6ef;
}

#main-menu .btn-mini.wide { padding: 10px 0; font-size: 14px; }

.btn-mini.wide:active { background: #f6f6fb; }

/* ================= 关卡记录 ================= */
.history-hint {
  width: 86%;
  margin-bottom: 10px;
  font-size: 12px;
  color: #999;
  text-align: center;
}

.history-item.current {
  border-color: #7c5cff;
  background: rgba(124, 92, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.18);
}

.history-item.locked { opacity: 0.62; }

.history-item .h-score { color: #1a8f4a; font-size: 15px; font-weight: 700; }
/* 没通关的关卡：分数用红色提醒（主页「本关最高纪录」同样） */
.history-item .h-score.fail,
#menu-current-high.fail { color: #d63a2f !important; }
/* 「第 N 关」占固定宽度，后面的模式名才能一列对齐（1 位数 / 2 位数关卡都一样） */
.history-item .h-lv { display: inline-block; min-width: 57px; }
.history-item .lock-tag { font-size: 10px; color: #bbb; margin-left: 6px; }
/* 模式标签：与「未解锁」同位置、同字号，只换颜色以便区分 */
.history-item .mode-tag { font-size: 10px; color: #8b91a4; margin-left: 6px; }

/* ================= 主页上一关 / 下一关 ================= */
.level-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 86%;
  margin: 0 0 8px;
}

.nav-arrow {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #e6e6ef;
  background: #fff;
  color: #6c5ce7;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
  transition: transform 0.1s ease, background 0.15s ease;
}

.nav-arrow:active { transform: scale(0.9); background: #f4f2ff; }
.nav-arrow:disabled { opacity: 0.32; cursor: not-allowed; transform: none; }

.level-now {
  font-size: 14px;
  color: #666;
  font-weight: 700;
  min-width: 86px;
  text-align: center;
  white-space: nowrap;
}

.level-now b { color: #6c5ce7; font-size: 17px; }

/* ================= 暂停 ================= */
.pause-hint {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
  text-align: center;
}

/* ================= 音乐：导入 / 列表 ================= */
.input-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 13px;
  outline: none;
}

.input-row input:focus { border-color: #7c5cff; }

.input-clear {
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 92, 92, 0.5);
  background: rgba(255, 92, 92, 0.08);
  color: #c0392b;
  font-weight: bold;
  cursor: pointer;
}

.music-box {
  width: 86%;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.music-box::-webkit-scrollbar { width: 6px; }
.music-box::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.music-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-empty {
  padding: 26px 10px;
  text-align: center;
  font-size: 13px;
  color: #aaa;
  line-height: 1.6;
}

.m-item-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  /* 安卓：纵向滚动交给列表，长按后由 JS 接管拖动 */
  touch-action: pan-y;
}

/* 长按拖动排序：原位留一个淡淡的占位，手指上浮起一张「影子」跟着走 */
.m-item-wrap.lift-src {
  background: #fff;
}
/* 长按浮起时只让这一行淡下去，别把底下的「重命名 / 删除」透出来 */
.m-item-wrap.lift-src .m-item {
  opacity: .35;
}
.m-item-wrap.lift-src .m-actions {
  visibility: hidden;
}

.drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  opacity: .98;
  transform: scale(1.04);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .16);
}

.drag-ghost .m-actions { display: none; }

body.m-dragging { overflow: hidden; overscroll-behavior: none; }
body.m-dragging .m-item { cursor: grabbing; }

.m-actions {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  z-index: 1;
}

.m-action {
  width: 60px;
  height: 100%;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-action.warn { background: #e6a23c; }
.m-action.info { background: #5c8fff; }
.m-action.danger { background: #ff5c5c; }

.m-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  touch-action: pan-y;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.m-item.selected {
  background: rgba(124, 92, 255, 0.1);
  border-color: #7c5cff;
}

.m-item.active {
  border-color: #7c5cff;
  color: #7c5cff;
  font-weight: 700;
}

.m-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-tail {
  flex: 0 0 auto;
  font-size: 11px;
  color: #7c5cff;
  font-weight: 700;
}

/* 批量操作条 */
.batch-bar {
  display: none;
  width: 86%;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-primary.slim,
.btn-secondary.slim {
  flex: 1;
  width: auto;
  margin-bottom: 0;
  padding: 10px 0;
  font-size: 13px;
  border-radius: 12px;
}

.btn-primary.danger { background: linear-gradient(135deg, #ff5c5c, #c0392b); box-shadow: 0 4px 15px rgba(255, 92, 92, 0.3); }

/* 播放模式 */
.mode-row {
  display: flex;
  gap: 8px;
  width: 86%;
  margin-bottom: 10px;
}

#btn-mode-seq.active,
#btn-mode-shuf.active,
#btn-mode-loop.active {
  border-color: #7c5cff;
  color: #7c5cff;
  font-weight: 800;
  background: rgba(124, 92, 255, 0.08);
}

/* ================= 窄屏 ================= */
@media (max-width: 420px) {
  .hud-mini { display: none; }
  .preview-strip::before { font-size: 8px; letter-spacing: 0; }
  .stars-row span { font-size: 32px; }
  .music-box { max-height: 40vh; }
}

/* ================= 主页右上按钮组（设置/音乐一行，背包在音乐正下方） ================= */
.top-right-group {
  flex-direction: column;
  align-items: flex-end;
}

.top-right-row {
  display: flex;
  gap: 10px;
}

/* ================= 收集目标：准确图案 ================= */
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 3px;
  vertical-align: middle;
}

.goal-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  vertical-align: middle;
}

/* ================= 关卡记录星星 ================= */
.history-item .star-off {
  opacity: 0.22;
  filter: grayscale(1);
}

/* ================= 注销确认弹窗 ================= */
.confirm-overlay {
  z-index: 60;
}

.confirm-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 22px;
  text-align: center;
  font-weight: 600;
}

.btn-primary.btn-danger {
  background: linear-gradient(135deg, #ff5c5c, #c0392b);
  box-shadow: 0 4px 15px rgba(255, 92, 92, 0.35);
}

.btn-primary.btn-success {
  background: linear-gradient(135deg, #43c56d, #1a8f4a);
  box-shadow: 0 4px 15px rgba(67, 197, 109, 0.35);
}

/* ================= 主页：两列小按钮（新增玩法入口） ================= */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 86%;
  margin: 2px 0 6px;
}
.menu-grid .btn-mini {
  width: 100%;
  padding: 9px 6px;
  font-size: 13px;
  white-space: nowrap;
}

/* ================= 章节地图 ================= */
.chapters-list {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 12px;
}
.chapter-card {
  border-radius: 14px;
  padding: 12px;
  background: rgba(124, 92, 255, 0.06);
  border: 1px solid rgba(124, 92, 255, 0.16);
}
.chapter-card.locked { opacity: 0.55; }
.chapter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.chapter-emoji { font-size: 20px; }
.chapter-name { font-size: 14px; font-weight: 800; color: #3d3556; flex: 1; }
.chapter-stars { font-size: 12px; color: #8a7fb5; font-weight: 700; }
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.level-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0 5px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
.level-chip b { font-size: 14px; color: #3d3556; }
.level-chip i { font-size: 9px; font-style: normal; color: #ffb400; letter-spacing: -1px; }
.level-chip.done { border-color: rgba(255, 180, 0, 0.55); background: rgba(255, 246, 224, 0.9); }
.level-chip.locked { opacity: 0.45; cursor: default; }
.level-chip:active { transform: scale(0.94); }
.chapter-lock { margin-top: 8px; font-size: 12px; color: #9a93ad; text-align: center; }
/* 章节地图最底下：后面还有章节，数量不剧透 */
.chapter-more {
  margin: 2px 0 0;
  padding: 10px 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: #9a93ad;
  text-align: center;
  letter-spacing: 0.5px;
}

/* ================= 剧情过场 ================= */
.story-card {
  width: 84%;
  padding: 18px 16px;
  margin: 10px 0 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.10), rgba(255, 214, 120, 0.16));
  text-align: center;
}
.story-emoji { font-size: 46px; line-height: 1.2; }
.story-text { margin: 12px 0 0; font-size: 14px; line-height: 1.75; color: #4a4560; }

/* ================= 更多玩法 ================= */
.mode-list {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 12px;
}
.mode-card {
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.mode-head { display: flex; align-items: center; justify-content: space-between; }
.mode-head b { font-size: 15px; color: #3d3556; }
.mode-head span { font-size: 11px; color: #9a93ad; }
.mode-card p { margin: 6px 0 10px; font-size: 12px; color: #7c7590; line-height: 1.5; }
.mode-card .btn-primary { width: 100%; }

/* ================= 成就 ================= */
.sub-count { font-size: 12px; color: #9a93ad; font-weight: 700; }
.ach-list {
  width: 90%;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 12px;
}
.ach-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* 五阶：灰（未解锁）→ 铜 → 银 → 金 → 彩（满级） */
.ach-row.t0 { opacity: 0.55; }
.ach-row.t0 .ach-icon { filter: grayscale(1); opacity: 0.6; }
.ach-row.t1 { border-color: #c08050; background: linear-gradient(120deg, #fbf0e4, #fff); }
.ach-row.t2 { border-color: #a8b3c4; background: linear-gradient(120deg, #f0f4fa, #fff); }
.ach-row.t3 { border-color: #e3b322; background: linear-gradient(120deg, #fff8e2, #fff); }
.ach-row.t4 {
  border-color: transparent;
  background: linear-gradient(120deg, #ffe6ef, #e8f4ff 45%, #fff8e2);
  box-shadow: 0 3px 14px rgba(160, 120, 255, 0.22);
}
.ach-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #eceaf3;
  overflow: hidden;
}
/* 用图片做图标的成就（奶龙守护者用最新版奶龙抠图） */
.ach-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.ach-row.t1 .ach-icon { background: linear-gradient(135deg, #f0c79b, #b9762f); }
.ach-row.t2 .ach-icon { background: linear-gradient(135deg, #f2f6fb, #9aa8bd); }
.ach-row.t3 .ach-icon { background: linear-gradient(135deg, #ffe89a, #e0a800); }
.ach-row.t4 .ach-icon { background: linear-gradient(135deg, #ffb3d1, #a6d8ff 45%, #ffe08a); }
.ach-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-main b { font-size: 13px; color: #3d3556; }
.ach-main i { font-size: 11px; font-style: normal; color: #8b84a0; }
.ach-mark {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  color: #fff;
  background: #c7c3d4;
}
.ach-mark.t1 { background: linear-gradient(135deg, #d3a06b, #a8641f); }
.ach-mark.t2 { background: linear-gradient(135deg, #c3ccda, #8c99ac); }
.ach-mark.t3 { background: linear-gradient(135deg, #ffd85e, #d99b00); }
.ach-mark.t4 { background: linear-gradient(135deg, #ff9fc4, #8ec9ff 50%, #ffd666); color: #4a3a6b; }

/* ================= 图鉴 / 皮肤 ================= */
.skin-intro {
  width: 88%;
  box-sizing: border-box;
  background: rgba(124, 92, 255, 0.06);
  border: 1px solid rgba(124, 92, 255, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 10px;
  text-align: left;
}
.skin-intro p { font-size: 12px; line-height: 1.55; color: #5b5470; margin: 0 0 4px; }
.skin-intro p:last-child { margin-bottom: 0; }
.skin-intro b { color: #4b3f8f; }

.skin-list {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 12px;
}
.skin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  cursor: pointer;
}
.skin-row.active { border-color: #7c5cff; background: rgba(124, 92, 255, 0.08); }
.skin-row.locked { opacity: 0.55; }
/* 色块图标：对应颜色的小方块 */
.skin-icon {
  width: 20px;
  height: 20px;
  font-size: 17px;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.skin-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.skin-main b { font-size: 13px; color: #3d3556; }
.skin-main i { font-size: 11px; font-style: normal; color: #8b84a0; }
.skin-mark { font-size: 11px; color: #7c5cff; font-weight: 700; }

/* ================= 福利中心 ================= */
.welfare-sign {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  width: 92%;
  margin: 4px 0 10px;
}
.sign-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 10px;
  color: #8b84a0;
}
.sign-day i { font-style: normal; }
.sign-day b { font-size: 12px; color: #5b5470; }
.sign-day.signed { background: rgba(92, 200, 143, 0.2); color: #1a8f4a; }
.sign-day.today { outline: 2px dashed #7c5cff; }
.wheel-box {
  width: 70%;
  margin: 12px 0 8px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 214, 120, 0.28), rgba(124, 92, 255, 0.14));
  text-align: center;
}
.wheel-face { font-size: 40px; display: inline-block; }
.wheel-box.spinning .wheel-face { animation: wheelSpin 0.9s ease-out; }
@keyframes wheelSpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(720deg) scale(1.12); }
}
.wheel-result { margin-top: 8px; font-size: 13px; font-weight: 700; color: #5b5470; }

/* 福利中心底部：连续签到天数 + 补签 */
.welfare-streak {
  margin: 2px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #7c5cff;
}
#btn-welfare-makeup { font-size: 12px; }

/* ================= 排行榜 ================= */
.lb-list {
  width: 90%;
  max-height: 42vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 10px;
  scrollbar-width: none;            /* Firefox：滑榜时不露灰条 */
}
.lb-list::-webkit-scrollbar { display: none; }

/* 排行榜入口：先选榜单（总榜 / 省榜 / 局榜），再进列表 */
.lb-hub {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 16px;
}
.lb-hub-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  background: linear-gradient(120deg, #f6f2ff, #fff);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lb-hub-btn:active { transform: scale(0.98); box-shadow: 0 2px 10px rgba(124, 92, 255, 0.2); }
.lb-hub-btn b { font-size: 15px; color: #3d3556; }
.lb-hub-btn i { font-style: normal; font-size: 11px; color: #8b84a0; }

/* 奖牌（主页本关最高分 / 关卡记录）：放在分数左边 */
.lb-medal {
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  margin-right: 3px;
  vertical-align: middle;
}
.menu-high-wrap { display: inline-flex; align-items: center; gap: 2px; }

/* 关卡记录的分数列要放得下奖牌 */
.history-item { grid-template-columns: minmax(0, 1fr) 78px 46px; }
.history-item .h-stars { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.history-item .h-score { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.history-item .h-stars .lb-medal { font-size: 13px; margin-right: 1px; }

/* 「省榜 XX省 / 局榜 第X关」右边的 ⇄ 更换符号：只有一个符号，没有圆圈底 */
/* 「省榜 XX省 / 局榜 第X关」右边的 ⇄ 更换符号：跟标题文字同行、纵向居中，间距贴文字 */
.lb-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
}
.lb-swap {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  color: #7c5cff;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  flex: none;
  transform: translateY(-1px);
}
.lb-swap:active { transform: translateY(-1px) scale(0.88); }

/* ⇄ 弹出的选择面板：全部省份 / 关卡一格一格直接挑 */
.lb-picker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  max-height: 56vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  z-index: 30;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.pk-item {
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  font-size: 13px;
  font-weight: 700;
  color: #3d3556;
  cursor: pointer;
}
.pk-item.cur {
  background: rgba(124, 92, 255, 0.15);
  color: #7c5cff;
  border-color: #7c5cff;
}

/* 结算页「还有剩余步数　是否继续游戏」：一行写完不换行 */
#btn-clear-continue {
  width: auto;
  padding: 14px 20px;
  white-space: nowrap;
  font-size: 14px;
}
.lb-row {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  flex: 0 0 auto;
}
.lb-row.me { border-color: #7c5cff; }
.lb-swipe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  position: relative;
  z-index: 1;
  transition: transform 0.18s ease;
  will-change: transform;
  touch-action: pan-y;
}
.lb-row.me .lb-swipe { background: rgba(124, 92, 255, 0.08); }
.lb-del {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 68px;
  border: none;
  border-radius: 0;
  background: #ff5c5c;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  z-index: 0;
  cursor: pointer;
}
.lb-del:active { background: #e54848; }
.lb-rank { width: 22px; text-align: center; font-weight: 800; color: #b0a9c0; }
.lb-row.me .lb-rank { color: #7c5cff; }
.lb-name { flex: 1; color: #3d3556; }
.lb-name i { font-style: normal; font-size: 10px; color: #8a7fb5; margin-left: 5px; }
.lb-name i.lb-me { color: #7c5cff; font-weight: 700; }
.lb-score { font-weight: 800; color: #ff8c00; }
.lb-score.none { font-weight: 600; font-size: 11px; color: #b0a9c0; }
/* 后台「全服用户名单」：右边的省份标签比分数低调 */
/* 后台「玩家」名单：名次 / 名字 / 总分 / 省份 四列，分数在省份左边且竖向对齐 */
.ul-score {
  min-width: 68px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ul-prov {
  font-weight: 700;
  font-size: 12px;
  color: #8a82a6;
  width: 64px;
  min-width: 64px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-ul-list .lb-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「玩家」名单的搜索框跟着列表同宽 */
#admin-ul-search { width: 90%; margin: 8px 0 2px; }
/* 整行灰显：0 分没上榜的人（名次 / 名字也跟着变灰） */
.lb-row.none .lb-rank,
.lb-row.none .lb-name { color: #b0a9c0; }
.lb-row.none .lb-name .lb-me { background: rgba(176, 169, 192, 0.25); }
.lb-empty { padding: 18px; text-align: center; font-size: 12px; color: #9a93ad; }
.lb-tip {
  width: 88%;
  font-size: 11px;
  line-height: 1.5;
  color: #9a93ad;
  text-align: center;
  margin: 0 0 10px;
}
.lb-back { margin-top: 14px; }
.lb-form {
  display: flex;
  gap: 8px;
  width: 90%;
  margin-bottom: 8px;
}
.lb-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 13px;
  background: #fff;
  color: #333;
}
.lb-form .btn-mini { padding: 9px 14px; font-size: 13px; }

/* ================= 狂热模式 / 节拍 ================= */
#frenzy-banner {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translate(-50%, -12px) scale(0.9);
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ff8c00, #ff5c5c);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 6px 18px rgba(255, 110, 60, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 6;
}
#frenzy-banner.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
body.frenzy .board-wrap {
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.45), 0 0 26px rgba(255, 92, 92, 0.35) !important;
  animation: frenzyPulse 0.85s ease-in-out infinite alternate;
}
@keyframes frenzyPulse {
  from { filter: saturate(1); }
  to { filter: saturate(1.35) brightness(1.04); }
}

/* ================= 棋盘配色（黄色/绿色/粉色/紫色/金色） ================= */
body[data-skin="default"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(255, 205, 60, 0.5), 0 10px 26px rgba(255, 205, 60, 0.25);
}
body[data-skin="red"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.5), 0 10px 26px rgba(255, 90, 90, 0.25);
}
body[data-skin="orange"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(255, 154, 60, 0.5), 0 10px 26px rgba(255, 154, 60, 0.25);
}
body[data-skin="mint"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(90, 200, 160, 0.45), 0 10px 26px rgba(90, 200, 160, 0.22);
}
body[data-skin="cyan"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(78, 203, 255, 0.5), 0 10px 26px rgba(78, 203, 255, 0.25);
}
body[data-skin="blue"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(92, 143, 255, 0.5), 0 10px 26px rgba(92, 143, 255, 0.25);
}
body[data-skin="galaxy"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(80, 70, 160, 0.55), 0 10px 30px rgba(60, 50, 140, 0.35);
}
body[data-skin="black"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(40, 40, 48, 0.55), 0 10px 30px rgba(40, 40, 48, 0.3);
}
body[data-skin="galaxy"] .board-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
              radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
              radial-gradient(circle at 45% 80%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px);
  pointer-events: none;
}
body[data-skin="gold"] .board-wrap {
  box-shadow: 0 0 0 3px rgba(230, 170, 20, 0.6), 0 12px 30px rgba(230, 170, 20, 0.35);
}

/* 棋盘配色只改两处：游戏里棋盘外圈的光晕 + 「目标：」那一栏的底色。
   主页奶龙、按钮、其它任何地方都不动。 */
body[data-skin="default"] { --skin-target-bg: rgba(255, 205, 60, 0.25); }
body[data-skin="red"]     { --skin-target-bg: rgba(255, 90, 90, 0.22); }
body[data-skin="orange"]  { --skin-target-bg: rgba(255, 154, 60, 0.24); }
body[data-skin="mint"]    { --skin-target-bg: rgba(47, 168, 122, 0.22); }
body[data-skin="cyan"]    { --skin-target-bg: rgba(78, 203, 255, 0.24); }
body[data-skin="blue"]    { --skin-target-bg: rgba(92, 143, 255, 0.22); }
body[data-skin="galaxy"]  { --skin-target-bg: rgba(110, 100, 205, 0.24); }
body[data-skin="black"]   { --skin-target-bg: rgba(40, 40, 48, 0.18); }

/* 目标栏底色由 updateTargetBar 用这个变量上色 */
.target-bar { background: var(--skin-target-bg, rgba(255, 205, 60, 0.25)); }

/* ================= 账号：登录 / 注册 / 补全资料 ================= */
.auth-box {
  width: 86%;
  max-width: 360px;
  margin: 4px 0 14px;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(80, 60, 140, 0.10);
  text-align: left;
}

.auth-label {
  display: block;
  margin: 2px 0 5px;
  font-size: 12px;
  font-weight: 700;
  color: #8a7fb5;
}

.auth-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 2px solid #e6e6ef;
  background: #fbfaff;
  color: #3d3556;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-input:focus { border-color: #7c5cff; background: #fff; }
.auth-input::placeholder { color: #b8b2c9; }

/* 输错 / 敏感词：输入框变红 */
.auth-input.error {
  border-color: #ff5c5c;
  background: rgba(255, 92, 92, 0.06);
}

.auth-err {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #e54848;
  text-align: left;
  min-height: 0;
}
.auth-err:empty { display: none; }

.auth-tip {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #9a93ad;
  text-align: left;
}

.btn-row {
  display: flex;
  gap: 10px;
  width: 88%;
  justify-content: center;
  margin-bottom: 10px;
}
.btn-row .btn-primary,
.btn-row .btn-secondary { flex: 1; width: auto; margin: 0; }

/* 存档码：两段等宽小字文本框 */
.backup-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 82px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 2px solid #e6e6ef;
  border-radius: 10px;
  background: #fbfaff;
  color: #3a4160;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.4;
  resize: none;
  outline: none;
  word-break: break-all;
}
.backup-code:focus { border-color: #7c5cff; background: #fff; }

/* 登录页底部的「本机账号」快捷进入 */
.auth-acct-box {
  width: 88%;
  max-width: 380px;
  margin-top: 14px;
}

.auth-acct-box .history-hint { width: 100%; margin: 0 0 6px; }

.acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 2px solid #eceaf6;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(80, 60, 140, 0.06);
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.acct-row:active { transform: scale(0.985); }
.acct-row.cur { border-color: #7c5cff; background: rgba(124, 92, 255, 0.07); }
.acct-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-main b { font-size: 15px; color: #3d3556; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-main i { font-style: normal; font-size: 11px; color: #9a93ad; }
.acct-mark { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #7c5cff; }
.acct-row.cur .acct-mark { color: #1a8f4a; }

.acct-list { width: 88%; max-width: 380px; margin-bottom: 4px; }

/* ================= 📮 邮箱 ================= */
.mail-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #ff5c5c;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.mail-list {
  width: 88%;
  max-width: 380px;
  max-height: 56vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 2px;
}

.mail-list::-webkit-scrollbar { width: 6px; }
.mail-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.mail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 14px;
  border: 2px solid #eceaf6;
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(80, 60, 140, 0.06);
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.mail-row:active { transform: scale(0.985); }
.mail-row.unread { border-color: rgba(124, 92, 255, 0.5); background: #f7f4ff; }

/* 左滑删除：整行右滑盖住下面的红色「删除」键 */
.mail-swipe {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
}

.mail-swipe .mail-row {
  position: relative;
  z-index: 1;
  background: #fff;
  transition: transform 0.18s ease;
  touch-action: pan-y;
}

.mail-del {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78px;
  border: none;
  border-radius: 0 14px 14px 0;
  background: #ff5c5c;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}

.mail-del:active { background: #e64545; }

/* 邮箱底部：一键已读 / 一键删除（返回上面一排） */
.mail-tools {
  display: flex;
  gap: 10px;
  width: 88%;
  max-width: 380px;
  margin-bottom: 10px;
}

.mail-tools .btn-secondary {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin-bottom: 0;
  padding: 12px 0;
  font-size: 15px;
}

.mail-row .m-ico {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(124, 92, 255, 0.1);
  color: #5b3fd6;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
}

.mail-row .m-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mail-row .m-title { font-size: 14px; font-weight: 700; color: #3d3556; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row .m-sub { font-size: 11px; color: #9a93ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row .m-flag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #c0392b; }
.mail-row .m-flag.done { color: #9a93ad; }

.mail-row .m-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5c5c;
}

/* 邮件详情：标题带「：」时后半句作为副标题，单独一行、字号比主标题小一号 */
.mail-subtitle {
  font-size: 20px;
  line-height: 1.35;
  margin: 4px auto 10px;
  width: 88%;
  max-width: 380px;
  text-align: center;
  word-break: break-word;
}

.mail-body-box {
  width: 88%;
  max-width: 380px;
  max-height: 54vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.07);
  text-align: left;
}

.mail-body-box::-webkit-scrollbar { width: 6px; }
.mail-body-box::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.mail-meta { font-size: 11px; color: #9a93ad; margin: 0 0 8px; }
.mail-body { font-size: 14px; line-height: 1.7; color: #444; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* 账号安全里的「注销账号」：描边红按钮，和普通按钮区分开 */
.btn-danger-outline {
  width: 180px;
  padding: 14px 0;
  border: 2px solid rgba(220, 70, 70, 0.55);
  border-radius: 30px;
  background: rgba(255, 92, 92, 0.06);
  color: #c0392b;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform 0.1s ease, background 0.15s ease;
}

.btn-danger-outline:hover { background: rgba(255, 92, 92, 0.14); }
.btn-danger-outline:active { transform: scale(0.95); }