/* =========================================================
   无人房 · 控件层
   全部沿用 base.css 的变量，换皮肤时无需改这里
   ========================================================= */

/* ---------------- 顶部应用栏 ---------------- */
.appbar {
  --r: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.appbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand-mark {
  --r: 50%;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
}

.appbar__meta { display: flex; flex-direction: column; min-width: 0; }
.appbar__meta strong { font-size: var(--t-2xl); line-height: 1.25; }
.appbar__meta small { font-size: var(--t-xs); color: var(--text-2); }

.appbar__nav {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.appbar__nav a {
  padding: 8px 13px;
  border-radius: 12px;
  font-size: var(--t-sm);
  color: var(--text-2);
  transition: color .2s, background-color .2s;
}
.appbar__nav a:hover { color: var(--accent); background: var(--accent-soft); }

.appbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.appbar__nav + .appbar__actions { margin-left: 8px; }

.account-chip {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, color .2s, box-shadow .25s;
}
.account-chip:hover { color: var(--accent); transform: translateY(-1px); }
.account-chip:active { transform: scale(.96); box-shadow: var(--sh-in); }
.account-chip b {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
}

/* ---------------- 图标按钮 ---------------- */
.icon-btn {
  --r: 50%;
  --e: calc(3px * var(--shadow));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: transform .18s ease, color .2s, box-shadow .25s, background-color .25s;
}
.icon-btn:hover { color: var(--accent); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); box-shadow: var(--sh-in); }
.icon-btn--sm {
  width: 34px;
  height: 34px;
  font-size: var(--t-base);
  --e: calc(2px * var(--shadow));
}
.icon-btn--accent { color: var(--accent); background: var(--accent-soft); }

/* ---------------- 明暗主题切换 ---------------- */
.mode-switch {
  position: relative;
  display: flex;
  flex: none;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  --i: 0;
}
.mode-switch__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: var(--sh-out);
  transform: translate3d(calc(var(--i) * 100%), 0, 0);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.mode-switch__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .25s ease, transform .18s ease;
}
.mode-switch__opt:hover { color: var(--text); }
.mode-switch__opt[aria-pressed="true"] { color: var(--accent); }
.mode-switch__opt:active { transform: scale(.96); }
.mode-switch__ico { display: grid; place-items: center; font-size: .95rem; line-height: 1; }
.mode-switch__ico svg { display: block; }

/* ---------------- 文字按钮 ---------------- */
.btn {
  --r: calc(var(--radius) + 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  font-size: var(--t-xl);
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); color: var(--text); }
.btn:active { transform: scale(.96); box-shadow: var(--sh-in); }
.btn--primary { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.btn--primary:hover { color: var(--accent); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: var(--t-base); }
.btn[aria-disabled="true"],
.btn:disabled { opacity: .48; pointer-events: none; }

/* ---------------- 表单 ---------------- */
.field {
  --r: 16px;
  --e-in: calc(2px * var(--shadow));
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  background: var(--surface-in);
}
.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: var(--t-xl);
}
.field input::placeholder { color: var(--text-3); }
/* .field 自带 display:flex，会盖掉 hidden 属性，这里补回来（修改密码弹窗按需隐藏原密码框） */
.field[hidden] { display: none; }
.field__icon { color: var(--text-2); font-size: var(--t-base); font-weight: 700; }

/* ---------------- 分段控制 / 标签页 ---------------- */
.segmented,
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.segmented > [role="button"],
.tabs > [role="button"] {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: var(--t-sm);
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .2s, background-color .2s, box-shadow .25s, transform .18s;
}
.segmented > [role="button"][aria-pressed="true"],
.tabs > [role="button"][aria-selected="true"] {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
  box-shadow: var(--sh-out);
}
.segmented > [role="button"]:active { transform: scale(.97); }

/* ---------------- 开关 ---------------- */
.switch {
  --r: 14px;
  position: relative;
  width: 52px;
  height: 28px;
  flex: 0 0 52px;
  padding: 0;
  border-radius: 14px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  transition: background-color .25s ease;
}
.switch span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 2px 2px 5px var(--sh-dark), -2px -2px 5px var(--sh-light);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s;
}
.switch[aria-checked="true"] { background: var(--accent-soft); }
.switch[aria-checked="true"] span {
  transform: translateX(24px);
  background: var(--accent);
  box-shadow: 0 2px 6px var(--accent-soft-2);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--t-base);
}

/* ---------------- 复选 / 单选 ---------------- */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-base);
  color: var(--text-2);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: var(--t-sm);
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  transition: color .2s, background-color .2s;
}
.check input:checked + .check__box {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 2px 2px 6px var(--sh-dark), -2px -2px 6px var(--sh-light);
}
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------- 胶囊筛选 ---------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: color .2s, background-color .2s, box-shadow .25s, transform .18s;
}
.chip:hover { color: var(--text); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--sh-out);
}

/* ---------------- 输入框（搜索） ---------------- */
.search {
  --r: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: var(--t-base);
}

/* ---------------- 步进器 ---------------- */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-base);
}
.stepper__ctl { display: flex; align-items: center; gap: 10px; }
.stepper__ctl output {
  min-width: 72px;
  height: 44px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--accent);
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  font-variant-numeric: tabular-nums;
}
.stepper__ctl output small {
  font-size: var(--t-2xs);
  font-weight: 500;
  color: var(--text-2);
}

/* ---------------- 评分 ---------------- */
.rating { display: flex; gap: 8px; }
.rating button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-3);
  font-size: var(--t-lg);
  background: var(--surface);
  box-shadow: var(--sh-out);
  transition: color .2s, background-color .2s, transform .18s;
}
.rating button[aria-pressed="true"] { color: var(--warning); background: rgba(255, 179, 0, .14); }
.rating button:active { transform: scale(.92); }

/* ---------------- 滑块 ---------------- */
.range {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: 10px 0;
  border-radius: 7px;
  background:
    linear-gradient(90deg, var(--accent) var(--p), transparent var(--p)),
    var(--surface-in);
  box-shadow: var(--sh-in);
  outline: none;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: var(--surface);
  box-shadow: 2px 2px 6px var(--sh-dark), -2px -2px 6px var(--sh-light);
  cursor: grab;
}
.range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: var(--surface);
  box-shadow: 2px 2px 6px var(--sh-dark), -2px -2px 6px var(--sh-light);
}
.range:active::-webkit-slider-thumb { cursor: grabbing; }

.range-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t-base);
}
.range-row output { color: var(--accent); font-weight: 600; }

/* ---------------- 进度 ---------------- */
.progress {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  opacity: .75;
  transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: var(--t-xs);
  color: var(--text-2);
}

.ring {
  --p: 0;
  --size: 118px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--track) 0);
}
.ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-in);
}
.ring__value { position: relative; text-align: center; line-height: 1.2; }
.ring__value strong { display: block; font-size: var(--t-3xl); color: var(--text); }
.ring__value small { font-size: var(--t-2xs); color: var(--text-2); }

/* 剩余积分：登录后实时同步 */
.panel__points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  font-size: var(--t-xs);
  white-space: nowrap;
  transition: color .3s ease;
}
.panel__points.is-live { color: var(--accent); font-weight: 600; }
.panel__points.is-live::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(48, 209, 88, .18);
  animation: live-pulse 2.4s ease-in-out infinite;
}
.panel__points.is-bump { animation: points-bump .55s cubic-bezier(.2, .8, .2, 1); }

/* ---------------- 列表 ---------------- */
.list-card { padding: 6px; }
.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  transition: background-color .2s;
}
.list-item:hover { background: var(--accent-soft); }
.list-item__main { flex: 1; min-width: 0; }
.list-item__main h3,
.list-item__main h4 { font-size: var(--t-lg); font-weight: 600; }
.list-item__main p { font-size: var(--t-xs); color: var(--text-2); }

/* ---------------- 骨架屏 ---------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  height: 14px;
  border-radius: 7px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--track), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
.skeleton--lg { height: 40px; border-radius: 20px; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------------- 提示条 / 浮层 ---------------- */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 65;
  transform: translate(-50%, 20px);
  width: min(440px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  border-radius: 18px;
  font-size: var(--t-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.snackbar.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.snackbar span { flex: 1; }

.dialog,
.sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
}
.dialog[hidden],
.sheet[hidden] { display: none; }

.dialog__backdrop,
.sheet__backdrop {
  position: absolute;
  inset: 0;
  /* 不用 backdrop-filter：弹窗开着的时候每秒都有倒计时/积分刷新，模糊层每帧重算会明显卡 */
  background: rgba(12, 18, 30, .52);
  animation: fade-in .18s ease both;
}

/* 深色主题下压得更实一点，保证弹窗对比度 */
:root[data-mode="dark"] .dialog__backdrop,
:root[data-mode="dark"] .sheet__backdrop { background: rgba(4, 7, 12, .62); }
.dialog__panel {
  --r: 26px;
  position: relative;
  width: min(390px, 100%);
  padding: 24px;
  animation: pop-in .28s cubic-bezier(.2, .8, .2, 1) both;
}
.dialog__panel h3 { font-size: var(--t-2xl); margin-bottom: 8px; }
.dialog__panel p { font-size: var(--t-base); color: var(--text-2); }

/* 玻璃态弹窗：没有背景模糊，面板用实色，避免后面的页面文字透上来 */
[data-skin="glass"] .dialog__panel,
[data-skin="glass"] .sheet__panel {
  background: #F7F9FF;
}
[data-skin="glass"][data-mode="dark"] .dialog__panel,
[data-skin="glass"][data-mode="dark"] .sheet__panel {
  background: #1C1F27;
}
.dialog__actions { display: flex; gap: 10px; margin-top: 22px; }
.dialog__actions .btn { flex: 1; min-height: 46px; font-size: var(--t-base); }

.sheet { align-items: end; padding: 0; }
.sheet__panel {
  --r: 26px 26px 0 0;
  position: relative;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 10px 20px 24px;
  animation: sheet-up .3s cubic-bezier(.2, .8, .2, 1) both;
}
.sheet__handle {
  width: 42px;
  height: 5px;
  margin: 6px auto 14px;
  border-radius: 3px;
  background: var(--track);
}
.sheet__panel h3 { font-size: var(--t-2xl); margin-bottom: 10px; }
.sheet__panel .btn { width: 100%; margin-top: 14px; min-height: 46px; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------------- 内容区块 ---------------- */
.hero { padding-top: 4px; }
.hero__grid { display: grid; gap: calc(var(--gap) * 2.1); align-items: center; }

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
[data-align="center"] .hero__copy { align-items: center; }

.hero__title {
  font-size: clamp(2rem, 4.4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 800;
  text-wrap: balance;
}
.hero__lead { max-width: 34em; color: var(--text-2); font-size: clamp(.95rem, 1.1vw, 1.05rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__proof { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.hero__proof p { font-size: var(--t-xs); color: var(--text-2); }

.panel { --r: 24px; padding: 18px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel__title { font-size: var(--t-lg); font-weight: 600; }
.panel .ring { --size: 132px; margin: 16px auto 10px; }
.panel__caption { text-align: center; font-size: var(--t-2xs); color: var(--text-2); margin-bottom: 12px; }
.panel__rows { display: flex; flex-direction: column; gap: 2px; }
.panel__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  font-size: var(--t-sm);
  color: var(--text-2);
}
.panel__row strong { color: var(--text); font-weight: 600; }

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
}
.stat {
  min-height: 108px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.stat__label { font-size: var(--t-xs); color: var(--text-2); }
.stat__value { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.stat__foot { display: flex; align-items: center; gap: 8px; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}
.feature { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--sh-out);
}
.feature h3 { font-size: var(--t-xl); font-weight: 600; }
.feature p { font-size: var(--t-sm); color: var(--text-2); }

.showcase {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 顶部：三个房间的标签 + 左右切换 */
.showcase__bar { display: flex; align-items: center; gap: 10px; }

.showcase__tabs {
  --n: 3;
  --i: 0;
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  padding: 4px;
  border-radius: 18px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.showcase__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n));
  border-radius: 14px;
  background: var(--accent-soft);
  box-shadow: var(--sh-out);
  transform: translate3d(calc(var(--i) * 100%), 0, 0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.showcase__tab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: var(--t-sm);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: color .25s ease;
}
.showcase__tab > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase__tab:hover { color: var(--text); }
.showcase__tab[aria-selected="true"] { color: var(--accent); font-weight: 600; }

.showcase__arrows { display: flex; gap: 6px; flex: none; }
.showcase__arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: var(--surface);
  box-shadow: var(--sh-out);
  cursor: pointer;
  transition: transform .18s ease, color .2s, box-shadow .25s, opacity .2s;
}
.showcase__arrow svg { display: block; }
.showcase__arrow:hover:not(:disabled) { color: var(--accent); transform: translateY(-1px); }
.showcase__arrow:active:not(:disabled) { transform: scale(.94); box-shadow: var(--sh-in); }
.showcase__arrow:disabled { opacity: .35; cursor: default; }

/* 滑动区域 */
.showcase__viewport {
  overflow: hidden;
  touch-action: pan-y;
  border-radius: calc(var(--radius) - 8px);
}
.showcase__viewport.is-dragging { cursor: grabbing; }
.showcase__track {
  display: flex;
  width: 100%;
  align-items: flex-start;
  transition: transform .52s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.showcase__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  opacity: .35;
  transition: opacity .45s ease;
}
.showcase__slide.is-active { opacity: 1; }

.showcase__page { display: flex; flex-direction: column; }

/* 每页只有一个空内容区：自定义内容填到 content.js 的 pages[i].html */
.showcase__slot {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  min-width: 0;
}
.showcase__slot > * { max-width: 100%; }

.showcase__placeholder {
  flex: 1 1 auto;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed var(--divider);
  border-radius: calc(var(--radius) - 6px);
  color: var(--text-3);
  text-align: center;
}
.showcase__placeholder-title {
  font-size: var(--t-sm);
  color: var(--text-2);
  letter-spacing: .06em;
}
.showcase__placeholder code {
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-2xs);
  word-break: break-all;
}

/* 公益房 9 格（3 列 × 3 行）+ 第 10–12 格极品房间号，房间号可改，状态实时同步 */
.roomgrid { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.roomgrid__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.roomgrid__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.roomgrid__title { font-size: var(--t-lg); font-weight: 600; }
.roomgrid__sub { font-size: var(--t-xs); color: var(--text-2); }
.roomgrid__count {
  font-size: var(--t-xs);
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.roomgrid__count b { color: var(--text); font-weight: 600; }

.roomgrid__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.roomgrid__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px 6px;
  border-radius: calc(var(--radius) - 10px);
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  border: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.roomgrid__cell.is-busy { border-color: rgba(255, 179, 0, .42); }
/* ★★★ 2026-11-01 三档状态: 有人 (is-has) —— 用户要求「空闲 / 有人 / 游戏中」 */
.roomgrid__cell.is-has { border-color: rgba(64, 158, 255, .42); }
.roomgrid__state.is-has { background: rgba(64, 158, 255, .20); color: #1B6FD0; }
:root[data-mode="dark"] .roomgrid__state.is-has { color: #6CB2FF; }
:root[data-skin="glass"] .roomgrid__state.is-has { background: rgba(64, 158, 255, .24); }
.team__cell.is-has { border-color: rgba(64, 158, 255, .42); }
.roomgrid__cell:focus-within { border-color: var(--accent-soft-2); }

.roomgrid__cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 18px;
}
.roomgrid__idx {
  font-size: var(--t-2xs);
  color: var(--text-3);
  letter-spacing: .10em;
  font-variant-numeric: tabular-nums;
}

.roomgrid__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: 1.5;
  cursor: default;
  background: rgba(50, 187, 120, .14);
  color: var(--success);
  transition: background-color .2s ease, color .2s ease;
}
button.roomgrid__state { cursor: pointer; }
.roomgrid__state::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.roomgrid__state.is-busy { background: rgba(255, 179, 0, .20); color: #C88700; }
:root[data-mode="dark"] .roomgrid__state.is-busy { color: var(--warning); }
:root[data-skin="glass"] .roomgrid__state { background: rgba(50, 187, 120, .18); }
:root[data-skin="glass"] .roomgrid__state.is-busy { background: rgba(255, 179, 0, .24); }

.roomgrid__input {
  width: 100%;
  min-width: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  outline: none;
  transition: border-color .2s ease;
}
.roomgrid__input::placeholder { color: var(--text-3); font-weight: 400; letter-spacing: 0; }
.roomgrid__input:focus { border-bottom-color: var(--accent); }

/* 访客看到的只读房间号：长得跟输入框一致，但不可编辑，可以选中复制 */
.roomgrid__no {
  display: block;
  min-height: calc(1.5em + 2px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  user-select: text;
  -webkit-user-select: text;
}
.roomgrid__no.is-empty { color: var(--text-3); font-weight: 400; letter-spacing: 0; }

.roomgrid__hint { font-size: var(--t-2xs); color: var(--text-3); }

/* 第 10–12 格：极品房间号（只有管理员能填，访客只读） */
.roomgrid__cell--premium { border-color: rgba(255, 179, 0, .34); }
.roomgrid__cell--premium .roomgrid__idx { color: var(--text-2); letter-spacing: .04em; white-space: nowrap; }
/* 极品格一个格子能放两个房间号（10001/20002）：字号必须比其他格小一档才放得下 */
.roomgrid__cell--premium .roomgrid__input {
  font-size: var(--t-base);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
/* 两个号之间的斜杠弱化成"分隔符"，不抢数字的注意力 */
.roomgrid__slash {
  font-style: normal;
  color: var(--text-3);
  padding: 0 1px;
}
/* 极品格右上角要挂「非无人房」：窄屏放不下时让角标换行，别把「极品房间号 01」挤断 */
.roomgrid__cell--premium .roomgrid__cell-top { flex-wrap: wrap; row-gap: 2px; }
.roomgrid__tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: 1.5;
  background: rgba(255, 179, 0, .18);
  color: #C88700;
}
/* 「非无人房」是分类标记，不是状态：用中性色，别和「游戏中」抢注意力 */
.roomgrid__tag--notroom {
  background: rgba(111, 114, 128, .14);
  color: var(--text-2);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(111, 114, 128, .30);
}
:root[data-mode="dark"] .roomgrid__tag { color: var(--warning); }
:root[data-mode="dark"] .roomgrid__tag--notroom {
  color: var(--text-2);
  background: rgba(179, 179, 179, .16);
  box-shadow: inset 0 0 0 1px rgba(179, 179, 179, .26);
}

@media (max-width: 560px) {
  .roomgrid__grid { gap: 8px; }
  .roomgrid__cell { padding: 6px 8px 4px; gap: 2px; }
  .roomgrid__cell-top { gap: 3px; }
  .roomgrid__idx { font-size: .625rem; letter-spacing: .06em; }
  .roomgrid__input { font-size: var(--t-base); }
  /* 手机上极品格要放两个号，再小一档，别把格子撑破 */
  .roomgrid__cell--premium .roomgrid__input { font-size: var(--t-sm); letter-spacing: 0; }
  .roomgrid__state { padding: 1px 5px; font-size: .625rem; gap: 3px; }
  .roomgrid__sub { font-size: .625rem; line-height: 1.55; }
}

/* 无人房 / 人头房 · 房间（一列平铺满整页 / 每组 4 间） */
.teams { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.teams__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* 卡片单列、吃满页面宽度：4 个房间竖着排，每行铺满整张卡 */
.teams__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.team {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 14px;
  border-radius: calc(var(--radius) - 8px);
  background: var(--surface);
  box-shadow: var(--sh-out);
  border: 1px solid transparent;
  transition: border-color .25s ease;
}
.team.is-main { border-color: var(--accent-soft-2); }

.team__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team__name { font-size: var(--t-lg); font-weight: 600; }
.team__name-input {
  flex: 0 1 132px;
  min-width: 74px;
  padding: 3px 8px;
  border: 1px solid var(--divider);
  border-radius: 9px;
  background: var(--surface-in);
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  outline: none;
}
.team__name-input:focus { border-color: var(--accent); }
.team__badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft-2);
  color: var(--accent);
  font-size: var(--t-2xs);
  font-weight: 600;
}
.team__meta {
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.team__act {
  padding: 2px 8px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--t-2xs);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.team__act:hover { color: var(--accent); border-color: var(--accent-soft-2); }
.team__del {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.team__del:hover { color: var(--danger); }
.team__del.is-armed {
  width: auto;
  padding: 0 8px;
  background: var(--danger);
  color: #fff;
  font-size: var(--t-2xs);
}

/* 四个房间竖排一列，每行横向铺满卡片：序号 · 房间号（自适应拉满） · 主队标 · 状态 */
.team__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.team__cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 14px;
  border-radius: calc(var(--radius) - 10px);
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  border: 1px solid transparent;
  transition: border-color .25s ease;
}
.team__cell .roomgrid__idx { flex: 0 0 auto; }
.team__cell .team__no {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
  font-size: var(--t-lg);
}
.team__cell .team__main-tag { flex: 0 0 auto; margin-right: 0; margin-left: auto; }
.team__cell .roomgrid__state { flex: 0 0 auto; }
.team__cell.is-busy { border-color: rgba(255, 179, 0, .42); }
.team__cell:focus-within { border-color: var(--accent-soft-2); }

.team__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
}
/* 「解散房间」：和「更换队伍」并排，变暗规则共用（还没号 / 更换中 / 解散中） */
.team__dismiss { min-width: 92px; }
.team__dismiss:disabled,
.team__dismiss.is-dim { opacity: .45; cursor: default; box-shadow: none; }
.team__dismiss:disabled:hover,
.team__dismiss.is-dim:hover { transform: none; }
.team__main-tag {
  margin-right: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-soft-2);
  color: var(--accent);
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.team__switch { min-width: 92px; }
/* 「更换队伍」变暗：还没队伍（房间号没下发）或刚点过正在等控制台重新分配 */
.team__switch:disabled,
.team__switch.is-dim { opacity: .45; cursor: default; box-shadow: none; }
.team__switch:disabled:hover,
.team__switch.is-dim:hover { transform: none; }

/* 「创建房间中，请稍等」：控制台静默自动建房期间的提示横幅 */
.teams__wait {
  margin: 6px 0 10px;
  font-size: 13px;
  opacity: .75;
  animation: teamsWaitPulse 1.6s ease-in-out infinite;
}
.teams__wait[hidden] { display: none; }
@keyframes teamsWaitPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .9; }
}

/* 空状态：点「创建分组」才出现队伍列表 */
.teams__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 26px 16px 24px;
  border-radius: calc(var(--radius) - 8px);
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.teams__empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-out);
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
}
.teams__empty-title { font-size: var(--t-lg); font-weight: 600; }
.teams__empty-btn { margin-top: 8px; min-width: 136px; }

@media (max-width: 560px) {
  .teams__list { grid-template-columns: 1fr; }
  .team__meta { margin-left: 0; order: 3; width: 100%; }
  .team__switch { flex: 1 1 0; min-width: 0; }
  .teams__empty { padding: 22px 12px; }
  .team__cell { padding: 8px 10px; gap: 8px; }
  .team__cell .team__no { flex: 1 1 100%; order: 3; font-size: var(--t-base); }
  .team__cell .team__main-tag { margin-left: auto; }
}

/* 通用排版小件（自定义内容可以直接用） */
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--t-2xs);
  color: var(--text-3);
  letter-spacing: .02em;
}
.chips-field { display: flex; flex-direction: column; }

/* 圆点指示器 */
.showcase__dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
.showcase__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background: var(--track);
  cursor: pointer;
  transition: width .35s cubic-bezier(.22, .61, .36, 1), background-color .3s ease;
}
.showcase__dot[aria-pressed="true"] { width: 26px; background: var(--accent); }

.rooms { padding: 6px; }
.room { display: flex; align-items: center; gap: 14px; padding: 12px; }
.room__main { flex: 1; min-width: 0; }
.room__main h3,
.room__main h4 { font-size: var(--t-lg); font-weight: 600; }
.room__main p { font-size: var(--t-xs); color: var(--text-2); }
.room__status { font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.room__status--success { color: var(--success); }
.room__status--info { color: var(--accent); }
.room__status--warning { color: #C88700; }
.room__status--danger { color: var(--danger); }
:root[data-mode="dark"] .room__status--warning { color: var(--warning); }

.cta {
  --r: 26px;
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.cta h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); letter-spacing: -.02em; }
.cta > p { color: var(--text-2); font-size: var(--t-base); max-width: 36em; }
.cta__form { display: flex; gap: 10px; width: min(520px, 100%); margin-top: 6px; }
.cta__form .field { flex: 1; }
.cta__form .btn { min-height: 56px; }
.cta__note { font-size: var(--t-2xs); color: var(--text-3); }

/* ---------------- 账号 / 积分 ---------------- */
.account {
  width: min(560px, 100%);
  margin-top: 4px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account__loading {
  padding: 26px;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--text-3);
  border-radius: 18px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}

.account__register { display: flex; flex-direction: column; gap: 12px; }
.account__form { width: 100%; margin-top: 0; }
/* 注册表单：账号 + 密码 + 确认密码竖排 */
.account__form--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.account__form--stack .field { flex: 0 0 auto; }
.account__form--stack .btn { min-height: 52px; }
/* 人机验证（滑块拼图弹窗）：点击注册按钮后弹出 */
#pwdDialog .field { margin-bottom: 10px; }
#pwdDialog .account__tip { margin-bottom: 12px; }
.account__stats .mini-btn { align-self: center; }

.account__device,
.account__device-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--t-2xs);
  color: var(--text-2);
}

.account__device code,
.account__device-line code {
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
}

.account__tip { font-size: var(--t-2xs); line-height: 1.6; color: var(--text-3); }

.account__msg { min-height: 1.2em; font-size: var(--t-xs); color: var(--text-2); }
.account__msg[data-tone="ok"] { color: var(--success); }
.account__msg[data-tone="err"] { color: var(--danger); }
.account__msg[data-tone="warn"] { color: #C88700; }

.account__card { display: flex; flex-direction: column; gap: 14px; }

.account__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.account__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account__eyebrow {
  font-size: var(--t-2xs);
  letter-spacing: .08em;
  color: var(--text-3);
  text-transform: uppercase;
}
.account__who strong { font-size: var(--t-xl); word-break: break-all; }
.account__who .account__device { margin-top: 2px; }

.account__points {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: none;
  padding: 10px 18px;
  border-radius: 16px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.account__points b {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.account__points span { font-size: var(--t-2xs); color: var(--text-2); }
.account__points.is-bump b { animation: points-bump .5s cubic-bezier(.2, .8, .2, 1); }

@keyframes points-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.78); }
}

.account__mine {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--accent-soft);
}
.account__mine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--accent);
}
.account__mine-head em { font-style: normal; font-weight: 500; color: var(--text-2); }
.account__mine-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account__mine-code code {
  flex: 1;
  min-width: 8em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  word-break: break-all;
}

.account__invite { display: flex; gap: 10px; }
.account__invite .field { flex: 1 1 auto; }
.account__invite .btn { flex: none; min-height: 52px; padding: 0 18px; font-size: var(--t-base); }

.account__used {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--t-2xs);
  color: var(--text-2);
}
.account__used code {
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.account__actions { display: flex; gap: 10px; }
.account__actions .btn { flex: 1 1 0; min-height: 48px; font-size: var(--t-base); }

/* 从「每日签到」跳转过来时高亮一下签到按钮 */
.account__actions .btn.is-flash {
  animation: checkin-flash 1.8s ease both;
}
@keyframes checkin-flash {
  0% { box-shadow: 0 0 0 0 var(--accent-soft-2); transform: scale(1); }
  22% { box-shadow: 0 0 0 5px var(--accent-soft-2); transform: scale(1.03); }
  55% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transform: scale(1); }
  100% { box-shadow: var(--sh-out); transform: scale(1); }
}

.account__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: var(--t-2xs);
  color: var(--text-3);
}

.account__mode {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-in);
  color: var(--text-3);
  font-size: var(--t-2xs);
}

.group-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.group-code code {
  flex: 1;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--accent);
  word-break: break-all;
}
#groupDialog { z-index: 90; }

/* ---------------- 卡密 ---------------- */
#cardDialog,
#cardWarn { z-index: 96; }

.card-panel {
  --r: 26px;
  position: relative;
  width: min(430px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  animation: pop-in .28s cubic-bezier(.2, .8, .2, 1) both;
}
.card-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-panel__head h3 { font-size: var(--t-2xl); }
.card-panel__lead { font-size: var(--t-xs); line-height: 1.65; color: var(--text-2); }

.card-device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--t-2xs);
  color: var(--text-2);
}
.card-device code {
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-2);
}
.card-status__dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--text-3); }
.card-status__text { font-variant-numeric: tabular-nums; }
.card-status[data-tone="on"] { color: var(--success); }
.card-status[data-tone="on"] .card-status__dot {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(48, 209, 88, .16);
  animation: live-pulse 2.4s ease-in-out infinite;
}

.card-form { display: flex; gap: 10px; }
.card-form .field { flex: 1; height: 50px; }
.card-form .btn {
  flex: none;
  min-height: 50px;
  padding: 0 18px;
  font-size: var(--t-base);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* 同步卡密：激活前选房型（无人房 7 天 / 人头房 3 天） */
.card-choice { display: flex; flex-direction: column; gap: 8px; }
.card-choice[hidden] { display: none; }
.card-choice__lead { font-size: var(--t-xs); line-height: 1.6; color: var(--text-2); }
.card-choice__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card-choice__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card-choice__btn strong { font-size: var(--t-sm); font-weight: 600; }
.card-choice__btn em { font-style: normal; font-size: var(--t-2xs); color: var(--text-3); line-height: 1.45; }
.card-choice__btn:hover { border-color: var(--accent-soft-2); transform: translateY(-1px); }
.card-choice__btn.is-on {
  border-color: var(--accent);
  box-shadow: var(--sh-in), 0 0 0 2px var(--accent-soft-2);
}
.card-choice__btn:disabled { opacity: .6; cursor: default; transform: none; }

/* 购买卡密弹窗：一个 QQ 号 + 复制 */
#cardBuy { z-index: 99; }
.card-qq {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.card-qq__label { flex: none; font-size: var(--t-2xs); color: var(--text-2); }
.card-qq code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent);
  user-select: text;
  -webkit-user-select: text;
}
.card-buy__actions { display: flex; gap: 10px; }
.card-buy__actions .btn { flex: 1; min-height: 46px; text-decoration: none; }
.card-buy__actions [hidden] { display: none; }

.card-exchange {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--accent-soft);
}.card-exchange__head { display: flex; flex-direction: column; gap: 2px; }
.card-exchange__head strong { font-size: var(--t-sm); color: var(--accent); }
.card-exchange__head em { font-style: normal; font-size: var(--t-2xs); color: var(--text-2); }
.card-exchange__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--t-xs);
  color: var(--text-2);
}
.card-exchange__row b { font-size: var(--t-2xl); color: var(--accent); font-variant-numeric: tabular-nums; }
.card-exchange__row .btn {
  min-height: 40px;
  padding: 0 14px;
  font-size: var(--t-sm);
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
}

.card-code {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--sh-out);
}
.card-code[hidden] { display: none; }
.card-code code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  word-break: break-all;
}

.card-note { font-size: var(--t-2xs); line-height: 1.65; color: var(--text-3); }

/* 激活弹窗底部的「积分兑换」入口 */
.card-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--accent-soft);
}
.card-hint-row__text { font-size: var(--t-xs); color: var(--text-2); }
.card-hint-row__text b { font-size: var(--t-lg); color: var(--accent); font-variant-numeric: tabular-nums; }
.card-hint-row__btn {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  font-size: var(--t-sm);
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
}

/* 兑换弹窗 */
#cardRedeem { z-index: 97; }
.redeem-panel { gap: 14px; }
.redeem-points {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface-in);
  box-shadow: var(--sh-in);
  font-size: var(--t-xs);
  color: var(--text-2);
}
.redeem-points b { font-size: var(--t-2xl); color: var(--accent); font-variant-numeric: tabular-nums; }

.redeem-plans { display: grid; gap: 14px; }
.redeem-group__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 7px;
  padding-left: 2px;
  flex-wrap: wrap;
}
.redeem-group__head strong { font-size: var(--t-sm); color: var(--text); }
.redeem-group__head span { font-size: var(--t-2xs); color: var(--text-3); }
.redeem-group__list { display: grid; gap: 8px; }
.redeem-plan {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'head cost' 'desc desc';
  align-items: center;
  gap: 3px 10px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--sh-out);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .18s;
}
.redeem-plan:hover { transform: translateY(-1px); }
.redeem-plan__head { grid-area: head; display: flex; align-items: baseline; gap: 7px; }
.redeem-plan__head strong { font-size: var(--t-base); color: var(--text); }
.redeem-plan__head em { font-style: normal; font-size: var(--t-2xs); color: var(--text-3); }
.redeem-plan__cost { grid-area: cost; font-size: var(--t-2xs); color: var(--text-2); white-space: nowrap; }
.redeem-plan__cost b { font-size: var(--t-xl); color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 2px; }
.redeem-plan__desc { grid-area: desc; font-size: var(--t-2xs); color: var(--text-3); }
.redeem-plan.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.redeem-plan.is-short { opacity: .62; }
.redeem-plan.is-on.is-short { opacity: .8; }

.redeem-foot { display: flex; gap: 10px; }
.redeem-foot .btn { flex: 1; min-height: 46px; font-size: var(--t-base); }

/* 兑换成功小弹窗 */
#cardDone { z-index: 98; }
.card-done {
  width: min(340px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 22px 22px;
  text-align: center;
}
.card-done__badge {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 12px 26px -12px var(--accent);
}
.card-done h3 { margin: 2px 0 0; font-size: var(--t-2xl); }
.card-done__lead { font-size: var(--t-sm); line-height: 1.6; color: var(--text-2); }
.card-done__code { width: 100%; }
.card-done__code code { text-align: center; }
.card-done__meta { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.card-done__ok { width: 100%; min-height: 46px; margin-top: 4px; font-size: var(--t-base); }

/* 弹窗打开时锁住页面滚动 */
body.is-dialog-open { overflow: hidden; }

.card-warn { width: min(390px, 100%); }
.card-warn h3 { font-size: var(--t-2xl); margin-bottom: 8px; }
.card-warn p { font-size: var(--t-base); line-height: 1.7; color: var(--text-2); }
.card-warn .btn--primary { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* 首屏倒计时 */
[data-remaining].is-live {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* 付费房间未激活 */
.showcase__locked {
  flex: 1 1 auto;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--divider);
  border-radius: calc(var(--radius) - 6px);
  background: var(--surface-in);
  box-shadow: var(--sh-in);
}
.showcase__locked-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
}
.showcase__locked strong { font-size: var(--t-lg); }
.showcase__locked p { max-width: 34em; font-size: var(--t-sm); color: var(--text-2); }
.showcase__locked .btn {
  margin-top: 2px;
  background: var(--accent-soft-2);
  color: var(--accent);
  font-weight: 600;
}

.showcase__pill-row { display: flex; justify-content: flex-end; padding-bottom: 8px; }


.footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: calc(var(--gap) * 1.4);
  border-top: 1px solid var(--divider);
}
.footer__top { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.footer__brand { display: flex; align-items: flex-start; gap: 12px; max-width: 34em; }
.footer__brand strong { font-size: var(--t-lg); }
.footer__brand p { font-size: var(--t-xs); color: var(--text-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--t-xs); color: var(--text-2); }
.footer__links a:hover { color: var(--accent); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--t-2xs);
  color: var(--text-3);
}

/* ---------------- 响应式 ---------------- */
@media (min-width: 980px) {
  .appbar__nav { display: flex; }
  .appbar__actions { margin-left: 0; }
}

/* 中等宽度：导航换到第二行，主题切换收成图标，避免顶栏挤爆 */
@media (max-width: 979px) {
  .appbar { flex-wrap: wrap; row-gap: 8px; }
  .appbar__nav {
    display: flex;
    order: 3;
    flex-basis: 100%;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .appbar__nav::-webkit-scrollbar { display: none; }
  .appbar__nav a { padding: 6px 10px; }
  .mode-switch__text { display: none; }
  .mode-switch__opt { height: 34px; padding: 0 10px; }
}

@media (max-width: 640px) {
  .account__invite { flex-direction: column; }
  .account__invite .btn { width: 100%; }
}

@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; }
  .showcase__slot { min-height: 300px; }
  .shell { padding-top: 26px; }
}

@media (max-width: 560px) {
  .appbar__meta small { display: none; }
  .appbar__brand { gap: 8px; }
  .appbar__meta strong { font-size: var(--t-xl); }
  .showcase__slot { min-height: 200px; }
}

@media (max-width: 420px) {
  .appbar { padding: 10px 12px; gap: 8px; }
  .appbar__actions { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .account-chip { min-height: 40px; padding: 0 11px; font-size: var(--t-2xs); }
  .btn { padding: 0 18px; }
  .room { flex-wrap: wrap; }
  .room__status { margin-left: 56px; }
  .mode-switch__text { display: none; }
  .mode-switch__opt { padding: 0 10px; height: 34px; }
  .showcase { padding: 14px; }
  .showcase__arrow { width: 34px; height: 34px; }
  .showcase__tab { font-size: var(--t-2xs); padding: 0 6px; }
  .showcase__slot { min-height: 180px; }
  .card-panel { padding: 18px; }
  .card-hint-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .card-hint-row__btn { width: 100%; }
  .redeem-foot .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__track,
  .showcase__thumb,
  .showcase__slide,
  .mode-switch__thumb,
  .panel__points.is-live::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ================= 滑块人机验证弹窗 ================= */
.wf-slider-mask{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(10,14,24,.62);backdrop-filter:blur(3px);padding:18px}
.wf-slider-mask.is-open{display:flex}
.wf-slider-modal{width:min(420px,94vw);max-height:92vh;overflow:auto;background:var(--surface,#fff);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:16px 16px 14px;color:var(--ink,#1c2333)}
.wf-slider-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.wf-slider-title{font-size:15px;font-weight:700}
.wf-slider-brand{flex:1;text-align:right;font-size:11px;opacity:.55;letter-spacing:.06em}
.wf-slider-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:inherit;opacity:.6;padding:0 2px}
.wf-slider-close:hover{opacity:1}
.wf-slider-stage{position:relative;border-radius:10px;overflow:hidden;background:#0e1420}
.wf-slider-stage canvas{display:block;width:100%;height:auto}
.wf-slider-tip{margin:8px 2px 10px;font-size:12.5px;color:var(--ink,#1c2333);opacity:.75;min-height:1.2em}
.wf-slider-bar{position:relative;height:44px;border-radius:22px;background:rgba(127,137,158,.16);overflow:hidden;user-select:none;-webkit-user-select:none}
.wf-slider-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(64,158,255,.22)}
.wf-slider-tracktext{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--ink,#1c2333);opacity:.55;pointer-events:none}
.wf-slider-handle{position:absolute;left:0;top:0;height:44px;width:56px;margin:0;border:0;border-radius:22px;background:linear-gradient(135deg,#4da3ff,#2f7fe8);color:#fff;font-size:20px;font-weight:700;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(47,127,232,.4)}
.wf-slider-handle:active{cursor:grabbing}
.wf-slider-foot{display:flex;justify-content:flex-end;margin-top:10px}
.wf-slider-mini{border:1px solid rgba(127,137,158,.4);background:transparent;border-radius:8px;padding:4px 12px;font-size:12px;cursor:pointer;color:inherit}
.wf-slider-mini:hover{border-color:#4da3ff;color:#2f7fe8}
/* 注册成功弹窗 */
.wf-regok .wf-regok-body{padding:2px 2px 4px}
.wf-regok-title{font-size:14px;font-weight:600;margin:0 0 12px}
.wf-regok-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wf-regok-row span{font-size:12.5px;opacity:.65;width:34px;flex:none}
.wf-regok-row code{flex:1;background:rgba(127,137,158,.14);border-radius:8px;padding:8px 10px;font-size:14px;word-break:break-all;user-select:all}
.wf-regok-tip{font-size:12px;opacity:.65;line-height:1.6;margin:8px 0 14px}
.wf-regok-btn{width:100%}