/* ============================================================
   台球计分器 · 全站样式
   配色集中在 :root 与 .pcard[data-i] 上，改色只改这两处。
   色彩顺序：第 1 位蓝、第 2 位红、第 3 位橙、第 4 位绿（超过 4 人循环）
   ============================================================ */

:root {
  --bg-0: #33333D;
  --bg-1: #282830;
  --bg-2: #1F1F25;
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, 0.88);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --gray: #9A9A9A;
  --line: rgba(255, 255, 255, 0.14);
  --maxw: 480px;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 10px rgba(0, 0, 0, 0.22);
  --white-card: linear-gradient(170deg, #FFFFFF 0%, #F5F7FA 52%, #E9EDF3 100%);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   按钮样式重置（必须在所有按钮样式之前）
   浏览器会给每个 <button> 垫一层不透明的浅灰底色（buttonface）。
   本设计的「玻璃按钮」用的是半透明白渐变，若不清掉这层底色，
   渐变会叠在浅灰上 → 按钮变成一块白板，白色文字和白色图标全都看不见。
   小程序版的 <view> 没有这层默认底色，所以搬到网页上才暴露这个问题。
   ------------------------------------------------------------ */
button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  background-color: transparent;
  background-image: none;
  appearance: none;
  -webkit-appearance: none;
}

/* 输入框也清掉系统默认样式，统一走 .input（select 保留原生下拉箭头） */
input:not([type="checkbox"]):not([type="radio"]),
textarea {
  appearance: none;
  -webkit-appearance: none;
}

html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

body.bs {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-2);
  background-image:
    radial-gradient(120% 66% at 84% -8%, rgba(96, 124, 238, 0.22) 0%, rgba(96, 124, 238, 0) 62%),
    radial-gradient(90% 52% at 0% 4%, rgba(216, 110, 62, 0.15) 0%, rgba(216, 110, 62, 0) 62%),
    radial-gradient(130% 70% at 50% 106%, rgba(128, 74, 208, 0.22) 0%, rgba(128, 74, 208, 0) 66%),
    linear-gradient(168deg, var(--bg-0) 0%, var(--bg-1) 46%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bg-glow {
  position: fixed;
  left: 50%;
  top: -18%;
  width: 130%;
  height: 58%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 62%);
}

.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--maxw);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
}

.app-center {
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

/* ---------------------------- 导航 ---------------------------- */

.nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 10px;
}

.nav-home {
  padding-bottom: 4px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand-mark {
  display: flex;
  align-items: center;
  margin-right: 9px;
}

.bm-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.bm-dot:nth-child(1) { background: #3080E8; }
.bm-dot:nth-child(2) { background: #E83A30; }
.bm-dot:nth-child(3) { background: #DE8A26; }
.bm-dot:nth-child(4) { background: #1E8F2D; }

.bm-dot + .bm-dot {
  margin-left: -4px;
}

.brand-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1px;
}

.nav-back {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.nav-back:active {
  background: rgba(255, 255, 255, 0.1);
}

.chev {
  width: 11px;
  height: 11px;
  margin-left: 4px;
  border-left: 2.5px solid #F0F0F0;
  border-bottom: 2.5px solid #F0F0F0;
  border-radius: 1.5px;
  transform: rotate(45deg);
}

.nav-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
}

.nav-tools {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.chip {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  padding: 0 10px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2);
  touch-action: manipulation;
}

.chip + .chip {
  margin-left: 6px;
}

.chip:active {
  transform: scale(0.96);
}

.chip-v {
  font-size: 14px;
  font-weight: 500;
}

.chip-k {
  font-size: 12px;
  color: #A9D6C4;
}

.caret {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9FD8C2;
}

/* ---------------------------- 首页 ---------------------------- */

.body {
  flex: 1;
  padding: 0 18px;
}

.hero {
  padding: 8px 2px 20px;
}

.hero-title {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 1px;
}

.hero-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--gray);
}

.mode-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 19px 17px;
  margin-bottom: 13px;
  border-radius: 17px;
  text-decoration: none;
  color: inherit;
  background-image: var(--white-card);
  box-shadow: 0 9px 19px rgba(0, 0, 0, 0.46), 0 0 20px rgba(255, 255, 255, 0.07), inset 0 1px 0 #FFFFFF;
}

.mode-card:active {
  transform: scale(0.98);
}

.mc-main {
  display: block;
  min-width: 0;
}

.mc-tag {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #A3A3A3;
}

.mc-title {
  display: block;
  margin-top: 5px;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #1A1A1A;
}

.mc-desc {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #7A7A7A;
}

.mc-side {
  flex: none;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
}

.dot + .dot {
  margin-left: -9px;
}

/* 玻璃行：首页历史入口与下方账户行同宽等高 */
.row-card {
  display: flex;
  align-items: center;
  margin-top: 13px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background-image: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
}

.row-card:active {
  transform: scale(0.98);
}

.row-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 11px;
}

.row-bar {
  display: block;
  height: 2.5px;
  border-radius: 1.5px;
  background: rgba(255, 255, 255, 0.55);
}

.row-bar + .row-bar {
  margin-top: 4.5px;
}

.row-bar.short {
  width: 58%;
}

.row-main {
  flex: 1;
  min-width: 0;
}

.row-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
}

.row-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 13px;
  color: var(--gray);
}

.chev-r {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid rgba(255, 255, 255, 0.4);
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* 账户 / 访客行：与历史行同宽（左右各 18px）等高（内容 34px + 上下 12px = 58px） */
.account {
  flex: none;
  display: flex;
  align-items: center;
  margin: 12px 18px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background-image: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
}

.acc-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 50%;
  background-image: linear-gradient(160deg, #5A5A66 0%, #33333C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  font-size: 14px;
  font-weight: 500;
  line-height: 34px;
  text-align: center;
}

.acc-info {
  flex: 1;
  min-width: 0;
}

.acc-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.acc-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 13px;
  color: var(--gray);
}

.acc-form {
  flex: none;
  margin: 0;
}

.acc-btn {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #C4C4C4;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.acc-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

.foot-note {
  flex: none;
  margin: 14px 0 0;
  padding: 0 18px max(14px, env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------------------------- 记分界面 ---------------------------- */

.board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: 6px 18px 10px;
}

.pcard {
  position: relative;
  flex: 1 1 0;
  min-height: 72px;
  max-height: 132px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--ink);
  --c: #3080E8;
  --cl: #5C9BEF;
  --cd: #1E4F90;
  --glow: rgba(48, 128, 232, 0.34);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(155deg, var(--cl) 0%, var(--c) 68%, var(--c) 100%);
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.4), 0 0 23px var(--glow);
}

.ctrl {
  flex: none;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  touch-action: manipulation;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.14) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.ctrl.plus,
.ctrl.mod {
  color: var(--cd);
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EFEFF1 100%);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.26), 0 0 13px var(--glow), inset 0 1px 0 #FFFFFF;
}

/* 「−」刻意保持玻璃底色，只有白色实心的那个是主动作，一眼分主次 */
.ctrl.minus {
  color: var(--ink);
}

/* 追分：卡片上只有一个「修改分数」胶囊按钮，绝对定位贴在右侧，
   这样中间的分数依旧居中在整张卡片里（和八球被两个圆按钮夹住的观感一致）。
   用 top/bottom + margin:auto 做垂直居中，不占用 transform，好给 :active 的缩放让位。 */
.ctrl.mod {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  margin: auto 0;
  width: auto;
  height: 42px;
  padding: 0 12px;
  border-radius: 21px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 追分卡片右侧的「修改分数」是浮在卡片上的，名字留出的宽度要按它收窄 */
.pcard.has-events .pname {
  max-width: 6em;
}

/* 窄屏（iPhone SE / 小屏安卓）按钮和名字各让一步，避免撞在一起 */
@media (max-width: 344px) {
  .pcard.has-events .pname {
    max-width: 5em;
  }

  .ctrl.mod {
    padding: 0 9px;
    font-size: 11.5px;
  }
}

.ctrl:active {
  transform: scale(0.94);
}

/* 加减号用 CSS 画，不用文字字形：字形坐在数学轴上，与行盒中心差 0.13em，
   字号一变或换系统字体会偏。两个 20px 的方块都以自身中线对齐容器中线。 */
.ico {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.ico::before,
.ico::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1.5px;
}

.ico-minus::before {
  left: 0;
  top: 50%;
  width: 20px;
  height: 3px;
  margin-top: -1.5px;
}

.ico-plus::before {
  left: 0;
  top: 50%;
  width: 20px;
  height: 3px;
  margin-top: -1.5px;
}

.ico-plus::after {
  left: 50%;
  top: 0;
  width: 3px;
  height: 20px;
  margin-left: -1.5px;
}

.mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
}

.score {
  font-size: 38px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.name-line {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin-top: 5px;
}

.pname {
  max-width: 9em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* 改名按钮：直径是加减按钮的一半，面积正好 1/4 */
.edit-btn {
  flex: none;
  width: 29px;
  height: 29px;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  touch-action: manipulation;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.14) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.edit-btn:active {
  transform: scale(0.92);
}

.pen {
  position: relative;
  width: 15px;
  height: 4px;
  border-radius: 1.5px;
  background: currentColor;
  transform: translate(-1.25px, 1.25px) rotate(-45deg);
}

.pen-tip {
  position: absolute;
  right: -7px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 7px solid currentColor;
}

.footer {
  flex: none;
  display: flex;
  gap: 9px;
  padding: 2px 18px max(14px, env(safe-area-inset-bottom, 0px));
}

.fbtn {
  position: relative;
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
  color: #F0F0F0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  touch-action: manipulation;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.24);
}

.fbtn:active {
  transform: scale(0.97);
}

.fbtn.record {
  color: #1A1A1A;
  border-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EDEFF2 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), 0 0 12px rgba(255, 255, 255, 0.14), inset 0 1px 0 #FFFFFF;
}

/* 「清零 / 重置」刻意不做警示色：它是常用操作，不该看起来像危险按钮 */
.fbtn.danger {
  color: #F0F0F0;
}

.fbtn:disabled {
  opacity: 0.45;
  cursor: default;
}

.fbadge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1A1A1A;
  font-size: 11px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ---------------------------- 弹窗 ---------------------------- */

.mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 8, 14, 0.58);
}

.mask[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 300px;
  padding: 22px 20px 16px;
  border-radius: 18px;
  color: #1A1A1A;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 255, 255, 0.08);
  animation: modalIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

.modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}

.modal-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: #7A7A7A;
}

.modal-text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.modal-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FFF6ED;
  border: 1px solid #FFE3C6;
  font-size: 12px;
  line-height: 1.5;
  color: #9A5E18;
  text-align: center;
}

.modal-note[hidden] {
  display: none;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.mbtn {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  touch-action: manipulation;
}

.mbtn:active {
  transform: scale(0.98);
}

.mbtn.ghost {
  background-image: linear-gradient(180deg, #F7F9F8 0%, #EDF1F0 100%);
  color: #3F4A46;
  box-shadow: inset 0 1px 0 #FFFFFF;
}

.mbtn.primary {
  color: #FFFFFF;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(155deg, #4A4A4A, #262626);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.mbtn-block {
  width: 100%;
  margin-top: 6px;
}

.opts {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.opt {
  flex: 1;
  padding: 14px 6px;
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  text-align: center; /* 按钮重置后浏览器默认的居中没了，这里补回来 */
  touch-action: manipulation;
}

.opt.active {
  border-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(155deg, #4A4A4A, #2E2E2E);
  box-shadow: 0 5px 11px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.opt-num {
  display: block;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: #1A1A1A;
}

.opt.active .opt-num {
  color: #FFFFFF;
}

.opt-num-s {
  font-size: 22px;
  letter-spacing: 0.5px;
}

.opt-tip {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #9A9A9A;
}

.opt.active .opt-tip {
  color: rgba(255, 255, 255, 0.7);
}

.input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #E6E6E6;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1A1A1A;
  font-family: inherit;
  font-size: 15px;
}

.modal .input {
  margin-top: 14px;
}

.input:focus {
  outline: none;
  border-color: #4A4A4A;
}

.input.shake {
  animation: shake 0.3s;
  border-color: #E24B4A;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------------------------- 提示条 ---------------------------- */

/* 列表选择弹窗（得分项 / 选择扣分选手） */
.choose-list {
  margin-top: 14px;
  max-height: 48vh;
  overflow: auto;
}

.choose {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  border: 0;
  border-radius: 12px;
  background: #F4F5F7;
  cursor: pointer;
  font: inherit;
  color: #1A1A1A;
  text-align: left;
  touch-action: manipulation;
}

.choose + .choose {
  margin-top: 8px;
}

.choose:active {
  background: #E6E9EE;
}

.choose-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.choose-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.choose-right {
  flex: none;
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  z-index: 80;
  max-width: 82%;
  padding: 10px 16px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(20, 20, 24, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  font-size: 13px;
  transition: opacity 0.22s, transform 0.22s;
}

.toast[hidden] {
  display: none;
}

.toast-out {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

/* ---------------------------- 历史记录 ---------------------------- */

.sub {
  flex: none;
  margin: 0;
  padding: 0 18px 11px;
  font-size: 12px;
  color: #8A8A8A;
}

.list {
  flex: 1;
  padding: 0 18px max(20px, env(safe-area-inset-bottom, 0px));
}

.rec {
  padding: 13px 14px 9px;
  border-radius: 14px;
  color: #1A1A1A;
  background-image: var(--white-card);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.42), inset 0 1px 0 #FFFFFF;
}

.rec + .rec {
  margin-top: 10px;
}

.rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rec-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rec-mode {
  font-size: 15px;
  font-weight: 500;
}

.rec-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: #F1F1F1;
  font-size: 10px;
  color: #7A7A7A;
}

.rec-time {
  flex: none;
  font-size: 11px;
  color: #9A9A9A;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.chip-score {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 6px 5px 0;
  padding: 5px 9px;
  border-radius: 999px;
  color: #FFFFFF;
}

.chip-name {
  font-size: 11px;
  opacity: 0.86;
}

.chip-val {
  font-size: 15px;
  font-weight: 500;
}

.chip-score.top {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

.legend {
  padding: 9px 4px 0;
  font-size: 11px;
  color: #7A7A7A;
  text-align: center;
}

.list-foot {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 18px 60px;
  text-align: center;
}

.empty-mark {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.em-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 0.72;
}

.em-dot:nth-child(1) { background: #3080E8; }
.em-dot:nth-child(2) { background: #E83A30; }
.em-dot:nth-child(3) { background: #DE8A26; }
.em-dot:nth-child(4) { background: #1E8F2D; }

.em-dot + .em-dot {
  margin-left: -5px;
}

.empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #E0E0E0;
}

.empty-sub {
  margin: 7px 0 0;
  font-size: 12px;
  color: #7A7A7A;
}

.empty-btn {
  margin-top: 22px;
  padding: 11px 30px;
  border-radius: 999px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EDEFF2 100%);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.32), 0 0 15px rgba(255, 255, 255, 0.16), inset 0 1px 0 #FFFFFF;
}

/* ---------------------------- 登录 / 注册 ---------------------------- */

/* 首页账户行右侧两颗按钮：清空数据 + 退出登录 */
.acc-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 退出登录是个 <a>，样式对齐旁边的 <button> */
a.acc-btn {
  display: inline-block;
  line-height: 1.5;
  text-decoration: none;
}

/* 「还没有账号，去注册」/「已经注册过，去登录」 */
.panel-switch {
  margin-top: 16px;
  font-size: 13px;
  color: #6E7A82;
}

.panel-switch a {
  margin-left: 4px;
  color: #2E6FD6;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 111, 214, 0.35);
}

.panel-switch a:active {
  color: #1F549F;
  border-bottom-color: #1F549F;
}

/* 验证码：输入框 + 右侧图片一行排开 */
.captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-row .input {
  flex: 1;
  min-width: 0;
}

.captcha-img {
  flex: 0 0 112px;
  width: 112px;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #F3F5F7;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.captcha-img:active {
  opacity: 0.78;
}

/* 提示条默认藏起来（hidden 属性），但 .alert 没有自己的 display，
   个别老浏览器仍会显示出来，这里显式兜一层 */
.alert[hidden] {
  display: none;
}

/* ---------------------------- 安装向导 ---------------------------- */

.panel {
  width: 100%;
  max-width: 430px;
  padding: 24px 20px;
  border-radius: 20px;
  color: #1A1A1A;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.panel-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.panel-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.panel-sub {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #6E7A82;
}

.panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.panel-foot {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #8A8A8A;
}

.form {
  margin-top: 18px;
}

.field {
  display: block;
  margin-bottom: 12px;
}

.field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: #6E7A82;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.65;
  font-style: normal;
  color: #96A0A8;
}

.field-hint b {
  color: #6E7A82;
}

/* 提示行里的小链接（登录页的「忘记密码？」）：跟着文字走，不另起一行 */
.field-hint a,
.field-link {
  margin-left: 6px;
  color: #2E6FD6;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(46, 111, 214, 0.35);
}

.field-hint a:active,
.field-link:active {
  color: #1F549F;
  border-bottom-color: #1F549F;
}

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

.field-row .field {
  flex: 1;
  min-width: 0;
}

.field-narrow {
  flex: 0 0 88px;
}

.alert {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.65;
}

.alert-error {
  background: #FCEBEB;
  border: 1px solid #F7C1C1;
  color: #A32D2D;
}

.alert-ok {
  background: #E1F5EE;
  border: 1px solid #9FE1CB;
  color: #0F6E56;
}

.alert-warn {
  background: #FFF6ED;
  border: 1px solid #FFE3C6;
  color: #9A5E18;
}

.manual {
  margin-top: 18px;
  font-size: 12.5px;
  color: #6E7A82;
}

.manual summary {
  cursor: pointer;
  font-weight: 500;
  color: #4A4A4A;
}

.manual ol {
  margin: 10px 0;
  padding-left: 18px;
  line-height: 1.9;
}

.code {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 8px;
  background: #14161A;
  color: #CFE3FF;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: auto;
  white-space: pre;
}

code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

select.input {
  padding-right: 8px;
}

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

/* ------------------------------------------------------------
   兜底：系统开启「高对比度 / 强制颜色」时，浏览器会忽略自定义背景，
   这里保证按钮和卡片上的文字、图标依旧看得清。
   ------------------------------------------------------------ */
@media (forced-colors: active) {
  .chip,
  .ctrl,
  .edit-btn,
  .fbtn,
  .acc-btn,
  .mbtn,
  .opt {
    color: ButtonText;
    border: 1px solid ButtonText;
  }

  .pcard,
  .score,
  .pname {
    color: CanvasText;
  }

  .pcard .ico::before,
  .pcard .ico::after,
  .pen {
    background: CanvasText;
  }
}