:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #172033;
  --muted: #6b7280;
  --line: #e6eaf2;
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --green: #16a34a;
  --shadow: 0 6px 16px rgba(15, 23, 42, 0.055);
}

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

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}

button,
input {
  font: inherit;
}

.page {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 8px calc(18px + env(safe-area-inset-bottom));
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px 10px;
}

.hero h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

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

.reward-btn {
  min-height: 32px;
  padding: 6px 13px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #22c55e 0%, #06b6d4 52%, #2563eb 100%);
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
  font-size: 12px;
  letter-spacing: .04em;
}

.identity-box,
.mine-card,
.empty-card,
.slot {
  background: var(--card);
  border: 1px solid rgba(226, 232, 240, 0.65);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.identity-box,
.mine-card,
.empty-card {
  margin-bottom: 8px;
  padding: 9px;
}

.identity-compact {
  padding: 7px 8px;
  border-radius: 12px;
}

.identity-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

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

.id-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e0f2fe;
  color: var(--blue);
  font-weight: 800;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.between {
  justify-content: space-between;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.yellow { background: #fef3c7; color: #92400e; }
.green { background: #dcfce7; color: #166534; }
.red { background: var(--red-soft); color: #991b1b; }
.blue { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; box-shadow: 0 3px 8px rgba(220, 38, 38, .26); font-weight: 900; letter-spacing: .03em; }
.gray { background: #e5e7eb; color: #4b5563; }
.orange { background: #ffedd5; color: #9a3412; }

.current-code {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-code b {
  color: #111827;
  font-size: 14px;
}

.identity-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-title b {
  color: #111827;
  font-size: 14px;
}

.identity-tip {
  margin: 0 0 0 46px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bind-row {
  display: grid;
  grid-template-columns: 118px auto;
  width: min(100% - 38px, 212px);
  gap: 5px;
  margin: 4px 0 0 38px;
}

.identity-compact .bind-row input {
  min-height: 29px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 12px;
}

.identity-compact .bind-row .small {
  min-height: 29px;
  padding: 4px 7px;
  border-radius: 9px;
  font-size: 11px;
}

input,
select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 10px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

input:focus,
select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

button {
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  padding: 7px 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.primary {
  background: var(--blue);
  color: #fff;
}

.secondary {
  background: var(--blue-soft);
  color: #1d4ed8;
}

.danger {
  background: #dc2626;
  color: #fff;
}

.danger:active {
  background: #b91c1c;
}

/* 释放是不可逆的结束动作，固定在操作组最右并保持醒目。 */
.action-row .release-action {
  order: 99;
  background: #dc2626;
  border: 1px solid #b91c1c;
  box-shadow: 0 3px 8px rgba(185, 28, 28, .26);
  font-weight: 800;
  font-size: 13px;
}
.action-row .release-action:active { background: #991b1b; transform: translateY(1px); }

.plain {
  background: transparent;
  color: #475569;
  padding: 8px 6px;
}

.small {
  white-space: nowrap;
}

.full {
  width: 100%;
  margin-top: 12px;
}

.hidden {
  display: none !important;
}

.mine-card strong,
.identity-box strong,
.sheet strong {
  font-size: 15px;
}

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

.mine-time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
}

.mine-time-main {
  min-width: 0;
}

.time-label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.mine-slot {
  color: #1d4ed8;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mine-range {
  display: block;
  color: #111827;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.mine-remain {
  align-self: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: #dbeafe;
  color: var(--blue);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.grace-warn {
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 14px;
  font-weight: 900;
}

.secret-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(230, 234, 242, 0.75);
  border-radius: 13px;
  background: #fbfdff;
}

.secret-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.secret-row b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.15;
  word-break: break-all;
}

.copy-btn {
  min-width: 48px;
  background: var(--blue-soft);
  color: #1d4ed8;
}

.action-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.action-row button {
  min-width: 0;
  min-height: 34px;
  padding: 7px 3px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* 延长属于继续使用操作，使用绿色系；释放仍保留红色。 */
.action-row .secondary[data-extend-minutes] {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  font-weight: 750;
}
.action-row .secondary[data-extend-minutes]:active { background: #bbf7d0; }

/* 仅将释放固定到右侧第 4 格。 */
.action-row .release-action { grid-column: 4; margin-left: 0; }

@media (max-width: 380px) {
  .mine-time-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 9px 10px;
  }

  .mine-range { font-size: 17px; }
  .mine-remain { padding: 9px 10px; font-size: 16px; }
}

.empty-card {
  text-align: center;
  color: var(--muted);
  line-height: 1.5;
}

.grid { display: grid; gap: 12px; margin-top: 2px; }
.slot-pool { padding: 10px; border: 1px solid #dbeafe; border-radius: 16px; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); box-shadow: 0 4px 12px rgba(30, 64, 175, .035); }
.slot-pool.pool-peak { border-color: #bfdbfe; background: linear-gradient(145deg, #eef6ff 0%, #f8fbff 58%, #ffffff 100%); }
.slot-pool.pool-public { border-color: #d1fae5; background: linear-gradient(180deg, #f5fffb 0%, #ffffff 100%); }
.slot-pool-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
.slot-pool-head strong { display: block; color: #1d4ed8; font-size: 15px; line-height: 1.2; letter-spacing: .01em; }
.pool-public .slot-pool-head strong { color: #111827; }
.slot-pool-head span { display: block; margin-top: 3px; color: #64748b; font-size: 11px; line-height: 1.35; }
.slot-pool-head em { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: #1d4ed8; background: #dbeafe; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pool-public .slot-pool-head em { color: #15803d; background: #dcfce7; }
.pool-grid-shell { position: relative; overflow: hidden; }
.pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pool-public .slot-limited { cursor:default; }
.pool-public .slot-limited .limited-tip { color:#94a3b8; font-weight:650; }
/* 第 5、6 个只露出卡片上半部分；下半部分直接裁掉，不能点击。 */
.pool-public .slot-half-mask { align-self:start; min-height:70px !important; height:70px !important; max-height:70px !important; overflow:hidden; pointer-events:none; }
.pool-public .slot-half-mask::after { content:''; position:absolute; z-index:2; right:0; bottom:0; left:0; height:15px; background:linear-gradient(180deg, rgba(245,255,251,0), #f5fffb 100%); pointer-events:none; }
/* 整个全时段区域底部渐隐，隐藏容器底线，营造下方仍有更多账号的连续感。 */
.pool-public { position:relative; overflow:hidden; padding-bottom:20px; }
.pool-public::after { content:''; position:absolute; z-index:8; right:-1px; bottom:-1px; left:-1px; height:34px; pointer-events:none; background:linear-gradient(180deg, rgba(245,255,251,0), #f5fffb 65%, #f5fffb 100%); }
.pool-public .pool-grid-shell::after { content:''; position:absolute; z-index:5; right:0; bottom:0; left:0; height:12px; pointer-events:none; background:linear-gradient(180deg, rgba(245,255,251,0), #f5fffb 78%); }
@media (min-width: 480px) { .pool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.slot {
  position: relative;
  min-height: 92px;
  padding: 7px 8px;
  border-color: transparent;
  border-radius: 13px;
}

.slot.available {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.slot-no {
  color: #64748b;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.slot .tag {
  min-width: 42px;
  padding: 3px 7px;
  font-size: 10px;
}

.slot .tag.blue {
  min-width: 68px;
  padding: 5px 9px;
  font-size: 12px;
  transform: translateY(-1px);
}

.slot-time-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.25fr);
  gap: 4px;
  margin-top: 8px;
  padding: 6px 6px;
  border-radius: 9px;
  background: #f8fafc;
}

.slot-time-grid > div { min-width: 0; }
.slot-time-grid span {
  display: block;
  margin-bottom: 2px;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.slot-time-grid b {
  display: block;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.slot-time-grid .remain-cell {
  text-align: right;
}
.slot-time-grid .remain-cell b {
  color: #2563eb;
  font-size: 14px;
  white-space: nowrap;
}
.slot-time-grid.cooling-time { grid-template-columns: 1fr 1fr; }
.slot-time-grid.cooling-time b { color: #d97706; }

.available-tip {
  margin-top: 10px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.next-fixed-period {
  margin-top: 8px;
  color: #c2410c;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .1px;
}

.mask {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  background: rgba(15, 23, 42, 0.42);
}

.sheet {
  width: 100%;
  max-width: 520px;
  max-height: min(78vh, 520px);
  overflow: auto;
  padding: 15px 14px calc(15px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 18px 18px;
  background: #fff;
  box-shadow: 0 -16px 42px rgba(15, 23, 42, 0.18);
}

.sheet p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.sheet label {
  display: block;
  margin-top: 11px;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.sheet input {
  margin-top: 7px;
}


  z-index: 20;
  align-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(3px);
}

  position: relative;
  width: min(100%, 360px);
  overflow: hidden;
  padding: 30px 25px 25px;
  border: 1px solid rgba(217, 174, 75, .36);
  border-radius: 28px;
  color: #172033;
  text-align: center;
  background: linear-gradient(180deg, #fffdf7 0%, #ffffff 72%);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .30);
}

  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: #8b7352;
  background: rgba(248, 239, 215, .72);
  font-size: 24px;
  line-height: 28px;
}

  position: relative;
  height: 140px;
  margin: -2px -12px 4px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(145deg, #eef4ff 0%, #f7f0da 100%);
}

  position: absolute;
  top: 16px;
  left: 50%;
  width: 102px;
  height: 102px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe0 0 6%, #ffe69b 43%, #efbf54 100%);
  box-shadow: 0 0 0 11px rgba(255, 232, 163, .25), 0 0 30px rgba(236, 183, 70, .45);
}

  position: absolute;
  top: 69px;
  left: calc(50% - 34px);
  font-size: 43px;
  filter: drop-shadow(0 3px 2px rgba(102, 74, 27, .2));
}

  position: absolute;
  width: 82px;
  height: 17px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
}
.cloud-left { left:-18px; bottom:23px; }.cloud-right { right:-28px; top:30px; transform:scale(.78); }
.branch-left { left:28px; top:26px; }.branch-right { right:30px; bottom:29px; transform:rotate(28deg); }



/* 部分手机网页容器会把底部导航栏覆盖在 fixed 弹窗之上。
   申请弹窗额外上移，确保时长输入和确认按钮始终位于可点击区域。 */
.apply-sheet {
  margin-bottom: max(20px, env(safe-area-inset-bottom));
  padding: 21px 18px calc(20px + env(safe-area-inset-bottom));
}

.apply-sheet strong {
  font-size: 18px;
}

.apply-sheet .plain {
  font-size: 14px;
  padding: 8px 7px;
}

.apply-sheet p {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.6;
}

.apply-sheet label {
  margin-top: 16px;
  font-size: 15px;
}

.apply-sheet input {
  min-height: 48px;
  margin-top: 9px;
  padding: 10px 12px;
  font-size: 18px;
}

/* iPhone 网页容器的布局高度可能比实际可见区域更高；由脚本写入真实可视高度。 */
/* 申请操作只有一个输入项，iPhone 上使用居中弹窗而非底部抽屉，避开浏览器工具栏。 */
#applyMask,
#seatClaimMask {
  top: var(--apply-visual-top, 0px);
  bottom: auto;
  height: var(--apply-visual-height, 100dvh);
  align-items: center;
  padding: 12px;
}

.apply-sheet {
  margin-bottom: 0;
  max-height: calc(var(--apply-visual-height, 100dvh) - 24px);
}

.apply-sheet .full {
  position: sticky;
  bottom: 0;
  z-index: 1;
  min-height: 48px;
  margin-top: 16px;
  font-size: 16px;
  box-shadow: 0 -10px 16px #fff;
}

@media (min-width: 601px) {
  .apply-sheet {
    margin-bottom: 0;
  }
}

/* 候补、自动释放提醒和打赏弹窗均在实际可见区域居中，避免移动端底部工具栏遮挡。 */
#candidateNoticeMask,
#autoReleaseMask,
#paymentMask {
  top: var(--apply-visual-top, 0px);
  bottom: auto;
  height: var(--apply-visual-height, 100dvh);
  align-items: center;
  padding: 12px;
}

.payment-sheet {
  margin-bottom: 0;
  max-height: calc(var(--apply-visual-height, 100dvh) - 24px);
  text-align: center;
}

.payment-done-btn {
  display: block;
  width: auto;
  min-width: 132px;
  min-height: 42px;
  margin: 14px auto 0;
  padding: 9px 20px;
  font-size: 14px;
}

.payment-sheet .between {
  text-align: left;
}



.toast {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 20;
  transform: translate(-50%, -8px);
  max-width: 88vw;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transition: 0.2s;
  pointer-events: none;
  text-align: center;
}

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

@media (max-width: 380px) {
  .page {
    padding-left: 6px;
    padding-right: 6px;
  }

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

  .bind-row {
    grid-template-columns: 1fr;
  }
}

.announcement-box{margin:0 0 8px;padding:11px 12px;border:1px solid #fde68a;border-radius:14px;background:linear-gradient(135deg,#fffbeb,#fff7ed);box-shadow:var(--shadow);color:#92400e}.announcement-box strong{display:block;margin-bottom:6px;font-size:14px}.announcement-box div{white-space:pre-line;font-size:12px;line-height:1.62;color:#78350f}




.station-lookup { margin: 12px 0; padding: 12px; border: 1px solid #dbeafe; border-radius: 15px; background: linear-gradient(135deg, #f8fbff, #fff); }
.station-lookup-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:9px; }
.station-lookup-head strong { color:#1e3a5f; font-size:15px; }
.station-lookup-head span { color:var(--muted); font-size:11px; }
.station-search-row { display:flex; gap:8px; }
.station-search-row input { min-width:0; flex:1; margin:0; padding:9px 10px; border:1px solid #cbd5e1; border-radius:10px; font:inherit; font-size:14px; }
.station-search-row button { flex:0 0 auto; padding:7px 13px; }
.station-search-result { margin-top:9px; overflow:hidden; border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#64748b; font-size:13px; }
.station-result-item { display:grid; grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 9px; border-bottom:1px solid #f1f5f9; }
.station-result-item:last-of-type { border-bottom:0; }
.station-result-item b { color:#334155; font-size:14px; }
.station-result-item span { overflow:hidden; color:#64748b; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.station-result-item em { justify-self:end; display:inline-flex; align-items:center; justify-content:center; min-width:25px; padding:5px 8px; border-radius:999px; box-sizing:border-box; color:#fff; background:#2563eb; text-align:center; font-size:13px; font-style:normal; font-weight:900; line-height:1; letter-spacing:1px; white-space:nowrap; }
.station-result-item em.direction-东 { background:#db2777; }.station-result-item em.direction-西 { background:#7c3aed; }.station-result-item em.direction-南 { background:#ea580c; }.station-result-item em.direction-北 { background:#0891b2; }.station-result-item em.direction-中 { background:#2563eb; }.station-result-item em.direction-东北 { background:#0f766e; }.station-result-item em.direction-东南 { background:#be123c; }.station-result-item em.direction-西北 { background:#4338ca; }.station-result-item em.direction-西南 { background:#c2410c; }
.station-search-result small { display:block; padding:7px 9px; color:#94a3b8; }




.payment-period-label { margin: 10px auto 0; padding: 7px 10px; border-radius: 10px; background: #ecfdf5; color: #15803d; font-size: 12px; font-weight: 800; line-height: 1.45; }
.payment-period-label.peak { background: #fff7ed; color: #c2410c; }




.payment-usage-title { color: #334155; }
.payment-usage-value { color: #ea580c; font-size: 17px; font-weight: 900; }


.abandon-fixed-btn {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #b45309;
  font-weight: 800;
}


.abandon-reserved-btn {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #b45309;
  font-weight: 800;
}

.slot-mask{min-height:120px;border:1px dashed #bfdbfe;border-radius:15px;background:#f8fbff}.slot-mask-cover{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#1e3a5f}.slot-mask-cover b{font-size:17px}.slot-mask-cover span{margin-top:5px;font-size:12px;color:#64748b}


.auto-release-sheet {
  max-width: 340px;
  text-align: left;
}

.auto-release-sheet > strong {
  display: block;
  font-size: 18px;
  color: #111827;
}

.auto-release-sheet p {
  margin: 12px 0 18px;
  line-height: 1.7;
  color: #4b5563;
}

.auto-release-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
}

.auto-release-actions button {
  min-height: 44px;
  margin: 0;
}

.auto-release-actions .primary {
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.28);
}


.auto-release-lead {
  display: block;
  font-weight: 800;
  color: #991b1b;
}

.auto-release-order-list {
  display: grid;
  margin: 11px 0 14px;
  overflow: hidden;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7ed, #fef2f2);
}

.auto-release-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
}

.auto-release-order + .auto-release-order {
  border-top: 1px solid #fed7aa;
}

.auto-release-order-time {
  color: #7f1d1d;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.auto-release-order-duration {
  flex: none;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.auto-release-tip {
  padding: 10px 11px;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}


.candidate-notice-sheet {
  max-width: 350px;
  border: 2px solid #f59e0b;
  background: linear-gradient(145deg, #fffdf5, #ffffff);
}

.candidate-notice-sheet > strong {
  display: block;
  color: #b45309;
  font-size: 22px;
  text-align: center;
}

.candidate-notice-sheet p {
  margin: 14px 2px 18px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.75;
}

.candidate-notice-sheet p b {
  color: #c2410c;
  font-size: 17px;
}

.candidate-notice-sheet .full {
  min-height: 46px;
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.payment-period-label.payment-period-dual {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  font-weight: 800;
}









.payment-qr { margin-top:10px; padding:12px; border:1px solid #bfdbfe; border-radius:12px; background:#f8fbff; text-align:center; color:#334155; }
.payment-qr strong,.payment-qr span { display:block; font-size:13px; }
.payment-qr span { margin-top:7px; color:#64748b; font-size:12px; }
.payment-qr img { display:block; width:210px; height:210px; max-width:100%; margin:10px auto 0; border-radius:8px; background:#fff; }

.payment-trip-info { margin:9px 0 0; padding:10px 12px; border:1px solid #dbeafe; border-radius:12px; background:#f8fbff; color:#334155; font-size:13px; line-height:1.45; }
.payment-trip-info > b { display:block; margin-bottom:6px; color:#2563eb; font-size:13px; }
.payment-trip-info > b small { margin-left:4px; color:#94a3b8; font-size:11px; font-weight:700; }
.payment-trip-info.loading,.payment-trip-info.muted { color:#64748b; background:#fafcff; border-color:#e2e8f0; font-size:12px; }
.payment-trip-summary { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.payment-trip-detail { min-width:0; display:grid; gap:2px; }
.payment-trip-detail > span:first-child { color:#64748b; font-size:11px; font-weight:700; }
.payment-trip-route { min-width:0; overflow:hidden; color:#1e293b; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.payment-trip-route i { padding:0 2px; color:#60a5fa; font-size:16px; font-style:normal; }
.payment-trip-summary strong,.payment-trip-line strong,.payment-trip-total strong { flex:0 0 auto; color:#ea580c; white-space:nowrap; font-weight:900; }
.payment-trip-summary .original-price,.payment-trip-line .original-price { text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:currentColor; }
.payment-trip-list { border-top:1px dashed #dbeafe; }
.payment-trip-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:6px 0; border-bottom:1px dashed #e0efff; }
.payment-trip-line .payment-trip-detail { flex:1; }
.payment-trip-line .payment-trip-route { display:block; }
.payment-trip-total { margin-top:3px; padding-top:7px; text-align:right; color:#64748b; font-size:12px; }
.payment-trip-total strong { font-size:14px; }
.payment-sheet .payment-period-label { margin-top:9px; padding:6px 10px; text-align:center; font-size:12px; }
.payment-sheet .payment-done-btn { margin-top:9px; padding:10px; }

.online-pay-button {
  display: block;
  width: 100%;
  min-height: 58px;
  margin: 12px 0 0;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
}
.online-pay-wechat {
  background: linear-gradient(135deg, #07c160, #05a94f);
  box-shadow: 0 8px 18px rgba(7, 193, 96, .28);
  color: #fff;
}
.online-pay-wechat:active { background: #059447; transform: translateY(1px); }
.online-pay-alipay { background: #e8f4ff; color: #1677ff; }

.payment-period-label.hidden { display:none; }
.saving-celebration { position:relative; isolation:isolate; overflow:hidden; margin:10px 0; padding:16px 42px 15px 18px; border:1px solid #f6d37b; border-radius:16px; background:radial-gradient(circle at 12% 10%,#fff8d9 0 8%,transparent 30%),linear-gradient(135deg,#fff7d5,#fff0c4 48%,#f6ddff); box-shadow:0 12px 28px rgba(220,145,20,.16); text-align:center; animation:saving-card-in .38s cubic-bezier(.18,.9,.3,1.25) both; }
.saving-celebration.hidden { display:none; }
.saving-celebration strong { position:relative; z-index:2; display:block; color:#a44b05; font-size:17px; font-weight:900; letter-spacing:.01em; line-height:1.45; animation:saving-text-pop .55s .1s both; }
.saving-celebration span { position:relative; z-index:2; display:block; margin-top:5px; color:#8a5a22; font-size:12px; font-weight:700; }
.saving-celebration .saving-amount { display:inline-block; margin:0 1px; color:#9a3c00; font-size:1.22em; font-weight:950; letter-spacing:.015em; text-shadow:0 2px 0 rgba(255,255,255,.68); animation:saving-amount-pop .78s cubic-bezier(.18,.95,.3,1.25) both; }
@keyframes saving-amount-pop { 0%{transform:scale(.78);opacity:.35} 52%{transform:scale(1.22);opacity:1} 76%{transform:scale(.97)} 100%{transform:scale(1)} }

.saving-close { position:absolute; z-index:3; top:7px; right:8px; width:26px; height:26px; border:0; border-radius:50%; background:rgba(255,255,255,.68); color:#a96514; font-size:20px; line-height:24px; cursor:pointer; }
.saving-burst { position:absolute; z-index:1; top:-9px; left:14px; color:#f59e0b; font-size:31px; text-shadow:16px 9px 0 #d946ef,-5px 20px 0 #fb7185; animation:saving-burst 1.15s ease-out both; }
.saving-confetti i { position:absolute; z-index:1; top:-12px; width:7px; height:12px; border-radius:2px; background:#fb7185; animation:saving-confetti 1.35s ease-out both; }.saving-confetti i:nth-child(2){left:22%;background:#38bdf8;animation-delay:.08s}.saving-confetti i:nth-child(3){left:40%;background:#f59e0b;animation-delay:.16s}.saving-confetti i:nth-child(4){left:57%;background:#a855f7;animation-delay:.04s}.saving-confetti i:nth-child(5){left:74%;background:#22c55e;animation-delay:.12s}.saving-confetti i:nth-child(6){left:91%;background:#fb7185;animation-delay:.2s}.saving-confetti i:nth-child(1){left:8%}
@keyframes saving-card-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}@keyframes saving-text-pop{0%{transform:scale(.78);opacity:0}65%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}@keyframes saving-burst{0%{opacity:0;transform:scale(.4) rotate(-30deg)}55%{opacity:1;transform:scale(1.15) rotate(12deg)}100%{opacity:0;transform:translate(12px,15px) scale(.8)}}@keyframes saving-confetti{0%{opacity:0;transform:translateY(0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translateY(75px) rotate(330deg)}}

/* 省钱状态融入整张结算卡：礼花、渐变与价格信息共同成为付款体验，而非单独提示条。 */
.payment-sheet.celebrating { position:relative; isolation:isolate; overflow:hidden; border:1px solid #f2c85c; background:radial-gradient(circle at 8% 0%,rgba(255,255,255,.92) 0 5%,transparent 22%),radial-gradient(circle at 94% 8%,rgba(255,216,250,.8) 0 7%,transparent 26%),linear-gradient(155deg,#fff9dc 0%,#fff6dd 42%,#f9edff 100%); box-shadow:0 24px 56px rgba(160,93,17,.28); }
.payment-sheet.celebrating::before,.payment-sheet.celebrating::after { content:'✦  •  ✧  •  ✦'; position:absolute; z-index:-1; top:44px; color:rgba(233,120,44,.34); font-size:25px; letter-spacing:12px; white-space:nowrap; animation:payment-celebrate-drift 4s ease-in-out infinite; }
.payment-sheet.celebrating::before { left:-13px; transform:rotate(-11deg); }.payment-sheet.celebrating::after { right:-38px; top:175px; color:rgba(165,75,205,.25); transform:rotate(12deg); animation-delay:-1.7s; }
.payment-sheet.celebrating .payment-trip-info { border-color:rgba(222,166,52,.35); background:rgba(255,255,255,.67); box-shadow:0 8px 16px rgba(165,105,20,.07); }
.payment-sheet.celebrating .row.between { position:relative; z-index:1; padding:2px 2px 4px; }
.payment-sheet.celebrating #paymentTitle { color:#83440e; }
.payment-sheet.celebrating .online-pay-button { box-shadow:0 12px 22px rgba(5,169,79,.28); }
.payment-sheet.celebrating .saving-celebration { margin:11px 0 12px; min-height:78px; border-width:0; background:rgba(255,255,255,.46); box-shadow:none; }
.payment-sheet.celebrating .saving-celebration strong { font-size:19px; }
@keyframes payment-celebrate-drift { 0%,100%{translate:0 0;opacity:.48}50%{translate:8px -8px;opacity:.9} }


/* 整个付款窗保持干净；庆祝视觉只保留在贺喜区。 */
.payment-sheet.celebrating { border-color:var(--sheet-border, #e5e7eb); background:#fff; box-shadow:var(--sheet-shadow, 0 12px 34px rgba(15,23,42,.18)); }
.payment-sheet.celebrating::before,.payment-sheet.celebrating::after { content:none; animation:none; }
.payment-sheet.celebrating .payment-trip-info { border-color:#dbeafe; background:#f8fbff; box-shadow:none; }
.payment-sheet.celebrating .row.between { padding:0; }
.payment-sheet.celebrating #paymentTitle { color:inherit; }
.payment-sheet.celebrating .online-pay-button { box-shadow:0 8px 18px rgba(5,169,79,.28); }
.payment-sheet.celebrating .saving-celebration { min-height:0; margin:11px 0 12px; border:1px solid #f6d37b; background:radial-gradient(circle at 12% 10%,#fff8d9 0 8%,transparent 30%),linear-gradient(135deg,#fff7d5,#fff0c4 48%,#f6ddff); box-shadow:0 12px 28px rgba(220,145,20,.16); }
.saving-celebration strong { white-space:nowrap; }
.saving-celebration .saving-prefix { display:inline; margin-right:3px; color:#a44b05; font-size:.74em; font-weight:800; vertical-align:baseline; }
.saving-celebration .saving-amount { vertical-align:baseline; }
.price-stack { display:grid; justify-items:end; gap:3px; text-align:right; }
.payment-trip-summary .price-stack,.payment-trip-line .price-stack { flex:0 0 auto; }
.actual-price { color:#9a3c00; font-size:13px; font-weight:950; line-height:1.2; letter-spacing:.01em; white-space:nowrap; }


/* 贺喜区承担全部庆祝效果：加高上下留白，移除独立关闭控件。 */
.saving-celebration { min-height:116px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:29px 20px 27px; }
.saving-celebration strong { position:relative; z-index:2; }
.saving-close { display:none; }
.payment-sheet.celebrating .saving-celebration { min-height:116px; margin:13px 0 14px; padding:29px 20px 27px; }


/* 紧凑贺喜卡：参考暖白福利卡的轻量层次，庆祝感集中在内容区。 */
.saving-celebration { min-height:94px; margin:11px 0 12px; padding:21px 22px 19px; border:1px solid rgba(246,201,107,.78); border-radius:20px; background:radial-gradient(circle at 11% 23%,rgba(255,238,173,.62) 0 3%,transparent 17%),radial-gradient(circle at 89% 17%,rgba(237,203,255,.54) 0 3%,transparent 20%),linear-gradient(105deg,#fffdf4 0%,#fff9e9 45%,#fff4fb 100%); box-shadow:0 9px 21px rgba(152,103,29,.12),inset 0 1px 0 rgba(255,255,255,.95); }
.payment-sheet.celebrating .saving-celebration { min-height:94px; margin:11px 0 12px; padding:21px 22px 19px; border:1px solid rgba(246,201,107,.78); background:radial-gradient(circle at 11% 23%,rgba(255,238,173,.62) 0 3%,transparent 17%),radial-gradient(circle at 89% 17%,rgba(237,203,255,.54) 0 3%,transparent 20%),linear-gradient(105deg,#fffdf4 0%,#fff9e9 45%,#fff4fb 100%); box-shadow:0 9px 21px rgba(152,103,29,.12),inset 0 1px 0 rgba(255,255,255,.95); }
.saving-celebration::before,.saving-celebration::after { content:''; position:absolute; z-index:1; width:7px; height:7px; border-radius:50%; background:#f5b7dc; box-shadow:19px 13px 0 -1px #d8b5f3,-17px 26px 0 -2px #f7cf79,47px 29px 0 -2px #f3a4aa; opacity:.72; }
.saving-celebration::before { top:13px; left:17px; }.saving-celebration::after { right:22px; bottom:15px; transform:scale(1.1); }
.saving-celebration strong { font-size:18px; line-height:1.25; }
.saving-celebration .saving-prefix { font-size:.76em; }
.saving-celebration .saving-amount { font-size:1.24em; }
.saving-burst { top:7px; left:26px; font-size:27px; opacity:.9; }
.saving-confetti i { top:-6px; width:6px; height:10px; opacity:.78; }


/* 最终紧凑尺寸：只保留一行贺喜文案需要的呼吸感。 */
.saving-celebration { min-height:72px; margin:9px 0 10px; padding:15px 18px 13px; border-radius:18px; }
.payment-sheet.celebrating .saving-celebration { min-height:72px; margin:9px 0 10px; padding:15px 18px 13px; }
.saving-celebration strong { font-size:17px; }
.saving-celebration .saving-prefix { font-size:.74em; }
.saving-celebration .saving-amount { font-size:1.18em; }
.saving-burst { top:1px; left:21px; font-size:23px; }
.saving-confetti i { top:-8px; width:5px; height:8px; }


/* 标题与节省金额同一行：恭喜语更醒目，但仍让金额作为第一视觉重点。 */
.saving-celebration .saving-prefix { font-size:.88em; font-weight:900; margin-right:4px; }
.saving-celebration .saving-amount { font-size:1.18em; }


/* 单独放大礼花图标，不改变标题和金额的字号层级。 */
.saving-celebration .saving-party { display:inline-block; margin-right:4px; font-size:1.42em; line-height:.6; vertical-align:-.13em; filter:drop-shadow(0 2px 1px rgba(180,103,16,.16)); }

@media (prefers-reduced-motion: reduce){.saving-celebration,.saving-celebration strong,.saving-celebration .saving-amount,.saving-burst,.saving-confetti i{animation:none}}
.payment-trip-info.waiting { border-color:#fbbf24; background:#fffbeb; color:#92400e; }
.payment-trip-info.waiting > b { display:block; color:#b45309; margin-bottom:7px; font-size:15px; line-height:1.5; }
.payment-trip-info.waiting span { display:block; margin-top:14px; font-size:14px; line-height:1.65; word-break:normal; overflow-wrap:break-word; }
.late-entry-warn { margin-top:8px; padding-top:7px; border-top:1px dashed #fed7aa; color:#c2410c; font-size:12px; font-weight:700; line-height:1.5; }

.violation-notice { margin: 10px 0; padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 13px; background: #f8fbff; color: #475569; font-size: 12px; line-height: 1.5; }
.violation-notice strong { display: block; color: #1e3a5f; font-size: 13px; }
.violation-notice span { display: block; margin-top: 2px; }
.violation-notice b { display: block; margin-top: 5px; color: #2563eb; font-size: 12px; }
.violation-notice.warn { border-color: #fde68a; background: #fffbeb; }
.violation-notice.warn b { color: #b45309; }
.violation-notice.danger { border-color: #fecaca; background: #fff1f2; }
.violation-notice.danger b { color: #b91c1c; }

.violation-notice.admin { border-color: #bfdbfe; background: #eff6ff; }
.violation-notice.admin b { color: #1d4ed8; }


/* 候补待确认：仅本人列表内的临时卡，确认后由服务端状态切换自动移除。 */
.pool-candidate{border-color:#f4dfa8;background:linear-gradient(135deg,#fffdf5,#fff6df)}
.pool-candidate .slot-pool-head strong{color:#8a6112}.pool-candidate .slot-pool-head em{background:#fff0bf;color:#8a6112}
.slot-candidate{border-color:#f1d58a;background:#fffdf7}.slot-candidate-message{margin-top:14px;color:#8a6112;font-size:14px;line-height:1.6}.slot-candidate-message b{color:#b45309;font-size:16px}

/* 抢座：紧凑状态卡 */
.seat-claim-card{margin:12px 0 14px;padding:15px 16px;border-radius:18px;border:1px solid #dce9ff;background:linear-gradient(135deg,#f8fbff,#eff6ff);box-shadow:0 6px 18px rgba(45,102,180,.08)}
.seat-claim-card.waiting{border-color:#f4dfa8;background:linear-gradient(135deg,#fffdf5,#fff6df)}
.seat-claim-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.seat-claim-top strong{display:block;color:#16355f;font-size:19px;line-height:1.25}.seat-claim-kicker{display:block;margin-bottom:3px;color:#7890ad;font-size:12px;font-weight:700;letter-spacing:.04em}.seat-claim-badge{padding:6px 9px;border-radius:999px;background:#fff0bf;color:#8a6112;font-size:12px;font-weight:800;white-space:nowrap}.seat-claim-badge.open{background:#dff5eb;color:#16764a}.seat-claim-card p{margin:9px 0 12px;color:#5f7694;font-size:13px;line-height:1.55}.seat-claim-go,.seat-claim-cancel{width:100%;border:0;border-radius:12px;padding:11px 13px;font-size:15px;font-weight:800;cursor:pointer}.seat-claim-go{background:#2678e8;color:#fff;box-shadow:0 5px 12px rgba(38,120,232,.2)}.seat-claim-go span{margin-left:6px;color:#dbeaff;font-size:12px}.seat-claim-cancel{background:#fff;color:#8a6112;border:1px solid #f1d58a}

.violation-notice .violation-list { display:block; margin-top:7px; padding-top:6px; border-top:1px dashed currentColor; font-size:11px; line-height:1.65; opacity:.9; }


/* 首页：状态优先，说明按需展开 */
.hero-compact { margin-bottom: 6px; }
.hero-compact h1 { font-size: 24px; }
.status-card { position: relative; padding: 10px 11px; }

.retry-load { margin: 2px 0 10px; padding: 6px 10px; border: 1px solid #bfdbfe; border-radius: 8px; color: #1d4ed8; background: #eff6ff; font-size: 12px; font-weight: 700; }
.retry-load.hidden { display: none; }
.identity-summary { margin: 5px 116px 0 38px; min-height: 17px; color: #64748b; font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-action { position: absolute; right: 10px; bottom: 10px; min-width: 100px; min-height: 34px; }
.usage-guide { margin: 0 0 10px; border: 1px solid #e2e8f0; border-radius: 13px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.usage-guide summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; color: #334155; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.usage-guide summary::-webkit-details-marker { display: none; }
.usage-guide summary::after { content: '›'; color: #94a3b8; font-size: 21px; font-weight: 400; line-height: 1; transform: rotate(0deg); transition: transform .18s ease; }
.usage-guide[open] summary::after { transform: rotate(90deg); }
.usage-guide summary small { margin-left: auto; color: #94a3b8; font-size: 11px; font-weight: 500; }
.usage-guide-body { padding: 0 12px 12px; border-top: 1px solid #f1f5f9; }
.guide-brief { margin: 10px 0 8px; color: #475569; font-size: 12px; line-height: 1.55; }
.usage-guide .announcement-box { margin: 8px 0 0; padding: 8px 9px; border-radius: 10px; box-shadow: none; }
.usage-guide .announcement-box div { font-size: 12px; line-height: 1.55; }
.usage-guide .violation-notice { margin: 8px 0 0; padding: 8px 9px; border-radius: 10px; }
.usage-guide .violation-notice strong { font-size: 12px; }
@media (max-width: 360px) { .identity-summary { margin-right: 102px; } .status-action { min-width: 88px; padding-left: 9px; padding-right: 9px; } }


/* 首页中秋横幅：与弹窗共用月亮、玉兔、桂花意象，公告始终紧随其后。 */
.banner-moon { position:absolute; right:22px; top:-24px; width:114px; height:114px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fffbe1 0 6%,#ffe99e 43%,#efbf55 100%); box-shadow:0 0 0 10px rgba(255,231,161,.23),0 0 28px rgba(236,183,70,.35); }
.banner-rabbit { position:absolute; right:47px; top:35px; font-size:37px; filter:drop-shadow(0 3px 2px rgba(102,74,27,.18)); }
.banner-cloud { position:absolute; width:69px; height:13px; border-radius:999px; background:rgba(255,255,255,.64); }.banner-cloud::before,.banner-cloud::after { content:''; position:absolute; border-radius:50%; background:inherit; }.banner-cloud::before { width:22px;height:22px;left:13px;bottom:4px; }.banner-cloud::after { width:18px;height:18px;left:39px;bottom:3px; }.banner-cloud-left{left:-18px;bottom:18px}.banner-cloud-right{right:91px;top:18px;transform:scale(.68)}
.banner-osmanthus { position:absolute;color:#dc9f27;font-size:17px;text-shadow:7px 9px 0 #efbe57,-6px 13px 0 #f5d47e; }.banner-osmanthus-left{left:24px;top:16px}.banner-osmanthus-right{right:16px;bottom:9px;transform:rotate(25deg)}

.usage-guide summary { justify-content: flex-start; padding: 11px 12px; font-size: 12px; font-weight: 700; }
.usage-guide summary::after { margin-left: auto; }
.usage-guide-body { padding-top: 2px; }
.guide-rules { margin: 9px 0 0; padding-left: 17px; color: #475569; font-size: 12px; line-height: 1.62; }
.guide-rules li + li { margin-top: 6px; }
.violation-notice { margin: 0 0 10px; }
.violation-notice strong { color: #92400e; }
.violation-notice.warn { border-color: #fbbf24; background: #fffbeb; }
.violation-notice.warn b { color: #b45309; font-size: 13px; }
.violation-notice.danger { border-color: #fca5a5; background: #fff1f2; }
.violation-notice.danger strong, .violation-notice.danger b { color: #b91c1c; }
.restriction-title { display:block; margin-bottom:8px; font-size:15px; }
.restriction-step, .restriction-reason { display:flex; flex-direction:column; gap:3px; padding:9px 0; border-top:1px dashed rgba(148,163,184,.52); }
.restriction-step:first-of-type { border-top:0; padding-top:0; }
.restriction-step strong, .restriction-reason strong { font-size:13px; color:#9f1239; }
.restriction-step span, .restriction-reason > span { color:#64748b; font-size:12px; line-height:1.55; }
.restriction-pay-btn { width:100%; min-height:38px; margin-top:6px; border:1px solid #fb7185; border-radius:10px; background:#e11d48; color:#fff; font-size:13px; font-weight:800; box-shadow:0 3px 8px rgba(225,29,72,.18); }
.restriction-pay-btn:active { background:#be123c; transform:translateY(1px); }
.restriction-reason ul { margin:4px 0 0; padding-left:17px; color:#64748b; font-size:12px; line-height:1.65; }
.restriction-reason li + li { margin-top:3px; }

/* 首页公告：内容以后台填写为准 */
.usage-guide-body { padding: 0 12px 12px; }
.usage-guide .announcement-box { margin: 10px 0 0; }
.usage-guide .announcement-box div { white-space: pre-wrap; }

/* 首页状态卡：先处理待缴费和当前操作 */
.hero-compact { padding: 3px 2px 6px; margin: 0; }
.hero-compact h1 { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #475569; }
.status-card { margin-bottom: 8px; padding: 11px 12px; }
.identity-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.identity-code { color:#172033; font-size:19px; font-weight:900; letter-spacing:.06em; }
.copy-entry-link { margin-left:auto; border:0; border-radius:999px; padding:5px 9px; background:#e0f2fe; color:#0369a1; font-size:12px; font-weight:800; white-space:nowrap; }
.copy-entry-link:active { transform:scale(.97); }
.identity-summary { margin:5px 0 0; min-height:17px; color:#64748b; font-size:12px; text-align:left; white-space:normal; }
.status-card.has-debt { border-color:#fdba74; background:linear-gradient(135deg,#fff9f0,#fff3e5); box-shadow:0 7px 18px rgba(234,88,12,.11); }
.status-card.clickable { cursor:pointer; }
.status-card.identity-normal-compact { margin-bottom:6px; padding:7px 11px; }
.status-card.identity-normal-compact .identity-head { min-height:24px; }

.debt-status { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.debt-status strong { color:#c2410c; font-size:16px; line-height:1.3; }
.debt-status span { color:#9a3412; font-size:12px; text-align:right; }
.usage-guide { margin:10px 0 10px; padding:10px 11px; border:1px solid #e2e8f0; border-radius:13px; background:#fff; box-shadow:var(--shadow); }
.announcement-title { display:block; color:#334155; font-size:13px; font-weight:800; }
.usage-guide .announcement-box { display:block; margin:7px 0 0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.usage-guide .announcement-box div { white-space:pre-wrap; color:#475569; font-size:12px; line-height:1.58; }
.debt-locked { border-color:#fed7aa; background:linear-gradient(135deg,#fffaf5,#fff4e8); }
.debt-locked .seat-claim-go[disabled] { background:#cbd5e1; color:#64748b; box-shadow:none; cursor:not-allowed; }
.seat-claim-sheet{padding:22px 20px 20px;background:linear-gradient(160deg,#fff 0%,#fbfdff 100%)}
.seat-claim-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #edf1f6}.seat-claim-head strong{display:block;color:#1e293b;font-size:20px;line-height:1.25}.seat-claim-head span{display:block;margin-top:4px;color:#94a3b8;font-size:12px;line-height:1.4}.seat-claim-head .plain{margin:-6px -5px 0 0;color:#64748b;font-size:14px}
.seat-claim-label{display:block;margin-top:16px!important}.seat-claim-label input{margin-top:10px!important;border-color:#dbe4ef;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.03)}
.seat-claim-duration-tip{display:block;margin:0;color:#dc2626;font-size:13px;font-weight:800;line-height:1.72;letter-spacing:0}.seat-claim-duration-tip>span{display:inline-block;white-space:nowrap}
.seat-claim-sheet .full{margin-top:18px!important;box-shadow:none!important}
#emptyMine { display:none !important; }


.mobile-load-notice {
  margin: 8px 0 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.6;
}

/* 前台前六个卡座：甲乙丙丁戊己为主标签，实际卡位编号以小字号保留。 */
.public-slot-code{font-size:.68em;font-weight:500;color:#64748b;margin-left:2px;white-space:nowrap}

/* 普通系统通知采用页面内提示，避免遮罩中断用户操作。 */


/* 冷启动骨架：首屏立即可见，不伪造真实卡位状态。 */
.skeleton-slot { min-height:88px; pointer-events:none; overflow:hidden; position:relative; background:#fff; }
.skeleton-slot::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(226,232,240,.7),transparent); animation:slot-skeleton 1.2s infinite; }
.skeleton-slot span,.skeleton-slot b,.skeleton-slot i { display:block; border-radius:6px; background:#e9eef5; }
.skeleton-slot span { width:35%; height:15px; margin:13px 12px; }
.skeleton-slot b { width:58%; height:12px; margin:20px 12px 8px; }
.skeleton-slot i { width:42%; height:11px; margin:0 12px; }
@keyframes slot-skeleton { to { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton-slot::after { animation:none; } }

/* 微信等浏览器拒绝剪贴板时，提供可选中明文，避免被脱敏展示困住。 */
.copy-fallback-overlay{position:fixed;inset:0;z-index:120;background:rgba(15,23,42,.52);display:grid;place-items:center;padding:20px}
.copy-fallback-dialog{width:min(100%,420px);padding:20px;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(15,23,42,.28)}
.copy-fallback-dialog h3{margin:0;color:#172554;font-size:18px}.copy-fallback-dialog p{margin:8px 0 12px;color:#64748b;font-size:13px;line-height:1.55}
.copy-fallback-dialog textarea{display:block;box-sizing:border-box;width:100%;min-height:68px;padding:11px;border:1px solid #93c5fd;border-radius:11px;background:#f8fbff;color:#172554;font:600 16px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical;user-select:text;-webkit-user-select:text}
.copy-fallback-dialog button{width:100%;margin-top:12px;padding:10px;border:0;border-radius:10px;background:#e0f2fe;color:#075985;font-weight:800}