:root {
  color-scheme: light dark;
  --primary: #5b4bdb;
  --primary-container: #e9e5ff;
  --on-primary-container: #1d135f;
  --guandan: #0c8c7d;
  --guandan-container: #ddf4ef;
  --background: #faf8ff;
  --surface: #fffbff;
  --surface-variant: #e7e2f1;
  --on-surface: #1d1b24;
  --on-variant: #4b4658;
  --outline: #7b748b;
  --outline-variant: #cbc4d8;
  --positive: #d94b45;
  --positive-container: #ffe4e1;
  --negative: #14895d;
  --negative-container: #ddf5ea;
  --zero: #8a8699;
  --error: #ba1a1a;
  --shadow: 0 2px 8px rgba(31, 25, 51, .12);
  --shadow-dialog: 0 14px 40px rgba(31, 25, 51, .24);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --visual-viewport-height: 100dvh;
  --visual-viewport-top: 0px;
  --font-adjust: 2px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

html[data-font-size="small"] { --font-adjust: 0px; }
html[data-font-size="large"] { --font-adjust: 4px; }

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: transparent; }
html, body { min-height: 100%; margin: 0; background: var(--background); color: var(--on-surface); overscroll-behavior: none; }
body { overflow-x: hidden; }
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; touch-action: none; }
button, input { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100dvh; background: var(--background); }
.topbar {
  position: sticky; z-index: 20; top: 0; height: calc(56px + var(--safe-top)); min-height: calc(56px + var(--safe-top));
  padding: var(--safe-top) 4px 0; display: flex; align-items: center;
  color: #fff; background: var(--mode-color, var(--primary)); box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.is-fullscreen, :fullscreen { --safe-top: 0px; }
:-webkit-full-screen { --safe-top: 0px; }
.is-fullscreen .topbar, :fullscreen .topbar { height: 56px; min-height: 56px; padding-top: 0; }
:-webkit-full-screen .topbar { height: 56px; min-height: 56px; padding-top: 0; }
.topbar-title {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 2px;
  padding-left: 8px; font-size: calc(21px + var(--font-adjust)); line-height: 28px; font-weight: 700;
}
.topbar-title > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-title.switchable { cursor: pointer; border-radius: 8px; }
.topbar-title.switchable:active { background: rgba(255,255,255,.12); }
.icon-btn {
  border: 0; background: transparent; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: calc(23px + var(--font-adjust)); line-height: 1; flex: 0 0 auto;
  appearance: none; -webkit-appearance: none;
}
.topbar > .icon-btn:first-child { margin-left: -2px; }
.icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn.dark:hover { background: rgba(0,0,0,.06); }
.ui-icon {
  width: 22px; height: 22px; display: block; flex: 0 0 auto; color: inherit;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn .screenRotation-icon { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.icon-btn .fullscreen-icon, .icon-btn .fullscreenExit-icon { width: 24px; height: 24px; stroke-width: 2; }
.icon-btn .settings-icon { width: 25px; height: 25px; stroke-width: 1.8; fill: none; }
.content { width: 100%; max-width: 760px; margin: auto; padding: 14px 16px 28px; }

.new-card, .match-card {
  width: 100%; min-height: 78px; border-radius: 18px; margin-bottom: 12px; cursor: pointer;
}
.new-card {
  border: 1.5px dashed color-mix(in srgb, var(--mode-color) 62%, transparent);
  background: color-mix(in srgb, var(--mode-container) 72%, transparent);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--mode-color); font-size: calc(17px + var(--font-adjust)); font-weight: 600;
}
.new-card .plus { width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--mode-color); display: grid; place-items: center; font-size: calc(25px + var(--font-adjust)); }
.match-card {
  border: 0; background: var(--surface); box-shadow: var(--shadow); padding: 16px;
  display: flex; align-items: center; text-align: left;
}
.match-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; background: var(--mode-container); display: grid; place-items: center; color: var(--mode-color); font-size: calc(22px + var(--font-adjust)); }
.match-icon .zhuandan-icon { width: 30px; height: 30px; }
.match-icon .casino-icon { width: 22px; height: 22px; --icon-cutout: var(--mode-container); }
.match-main { min-width: 0; flex: 1; margin-left: 14px; }
.match-name { font-size: calc(17px + var(--font-adjust)); line-height: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-size: calc(11px + var(--font-adjust)); line-height: 14px; font-weight: 500; color: var(--on-variant); }
.pill .ui-icon { width: 14px; height: 14px; stroke-width: 2.1; }
.pill .play-icon { fill: currentColor; stroke: none; }
.pill.time .ui-icon { width: 15px; height: 15px; }
.pill.time { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill.time > span { overflow: hidden; text-overflow: ellipsis; }
.chevron { margin-left: 8px; color: var(--on-variant); font-size: calc(25px + var(--font-adjust)); }
.empty { padding-top: 56px; text-align: center; }
.empty-icon { width: 56px; height: 56px; margin: auto; border-radius: 50%; display: grid; place-items: center; background: var(--surface-variant); color: var(--mode-color); font-size: calc(27px + var(--font-adjust)); }
.empty-icon .zhuandan-icon { width: 36px; height: 36px; }
.empty-icon .casino-icon { width: 28px; height: 28px; --icon-cutout: var(--surface-variant); }
.empty h3 { margin: 14px 0 4px; font-size: calc(15px + var(--font-adjust)); }
.empty p { margin: 0; color: var(--on-variant); font-size: calc(12px + var(--font-adjust)); }

.backdrop {
  position: fixed; z-index: 80; top: var(--visual-viewport-top); left: 0; right: 0;
  height: var(--visual-viewport-height); background: rgba(20,18,27,.48);
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s ease-out;
  overscroll-behavior: contain; touch-action: none;
}
.sheet-backdrop { align-items: flex-end; padding: 0; }
.sheet, .dialog {
  background: var(--surface); color: var(--on-surface); box-shadow: var(--shadow-dialog);
  animation: rise .18s ease-out;
}
.sheet {
  width: min(680px, 100%); max-height: min(calc(var(--visual-viewport-height) - 8px), 880px); overflow: auto;
  border-radius: 26px 26px 0 0; padding: 10px 24px calc(22px + var(--safe-bottom));
  scroll-padding-block: 90px; touch-action: pan-y;
}
.sheet::before { content: ""; display: block; width: 34px; height: 4px; border-radius: 4px; background: var(--outline-variant); margin: 0 auto 18px; }
.dialog { width: min(560px, 92vw); max-height: calc(var(--visual-viewport-height) - 32px); overflow: auto; border-radius: 22px; padding: 18px; scroll-padding-block: 80px; touch-action: pan-y; }
.dialog.wide { width: min(720px, 94vw); }
.modal-title { display: flex; align-items: center; gap: 10px; font-size: calc(21px + var(--font-adjust)); line-height: 28px; font-weight: 800; margin-bottom: 18px; }
.modal-title.error { color: var(--error); }
.title-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--mode-color) 12%, transparent); color: var(--mode-color); }
.field { margin-bottom: 12px; }
.field label, .section-label { display: block; margin: 0 0 7px; color: var(--on-variant); font-size: calc(14px + var(--font-adjust)); line-height: 20px; font-weight: 600; }
.section-label { margin-top: 14px; }
#rule-chips { margin-bottom: 12px; }
.input {
  width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--outline);
  padding: 0 14px; background: transparent; color: var(--on-surface); outline: 0;
}
.input:focus { border: 2px solid var(--mode-color); padding: 0 13px; }
.input::placeholder { color: var(--on-variant); opacity: .55; }
.input-row { display: flex; gap: 10px; }
.input-row .field { flex: 1; min-width: 0; }
.player-field { display: flex; gap: 6px; align-items: center; }
.player-field .input { flex: 1; }
.remove-player[hidden] { display: none; }
.btn {
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 15px; cursor: pointer;
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.primary { color: #fff; background: var(--mode-color, var(--primary)); }
.btn.outline { color: var(--mode-color, var(--primary)); background: transparent; border: 1px solid var(--outline); }
.btn.text { min-height: 38px; padding: 0 8px; color: var(--mode-color, var(--primary)); background: transparent; }
.btn.danger { background: var(--error); color: #fff; }
.btn:disabled { cursor: default; opacity: .42; }
.btn-row { display: flex; gap: 12px; margin-top: 20px; }
.btn-row .btn { flex: 1; }
.form-actions .btn.outline { flex: 1; }
.form-actions .btn.primary, .form-actions .btn.danger { flex: 2; }
.btn.full { width: 100%; min-height: 52px; }
.error-text { color: var(--error); font-size: calc(12px + var(--font-adjust)); min-height: 18px; margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 36px; border: 1px solid var(--outline-variant); border-radius: 18px;
  padding: 0 14px; background: transparent; cursor: pointer; font-size: calc(14px + var(--font-adjust));
}
.chip.selected { background: var(--mode-container); color: var(--mode-color); border-color: var(--mode-color); font-weight: 600; }
.chip.positive.selected { color: var(--positive); background: var(--positive-container); border-color: var(--positive); }
.chip.negative.selected { color: var(--negative); background: var(--negative-container); border-color: var(--negative); }
.chip:disabled { opacity: .38; cursor: default; }

.menu-wrap { position: relative; }
.dropdown {
  position: absolute; z-index: 50; top: 44px; right: 0; width: 190px; padding: 7px;
  background: var(--surface); color: var(--on-surface); border-radius: 14px; box-shadow: var(--shadow-dialog);
}
.menu-item { width: 100%; min-height: 46px; padding: 0 10px; border: 0; background: transparent; border-radius: 10px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: calc(15px + var(--font-adjust)); }
.menu-item:hover { background: var(--surface-variant); }
.menu-item.danger { color: var(--error); }
.menu-leading { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: calc(19px + var(--font-adjust)); line-height: 1; }
.menu-leading .ui-icon { width: 22px; height: 22px; stroke-width: 2; }
.menu-leading.icon-sm { font-size: calc((19px + var(--font-adjust)) * 0.7); }
.menu-separator { height: 1px; background: var(--outline-variant); margin: 5px 2px; }

.score-shell { height: calc(100dvh - 56px - var(--safe-top)); overflow: auto; }
.score-table { min-width: 100%; border-collapse: collapse; table-layout: auto; font-size: calc(17px + var(--font-adjust)); }
.score-table th, .score-table td { height: 48px; min-width: 64px; padding: 0 14px; text-align: center; border-bottom: .5px solid var(--outline-variant); white-space: nowrap; }
.score-table thead th { position: sticky; top: 0; z-index: 5; background: var(--surface-variant); font-size: calc(15px + var(--font-adjust)); font-weight: 700; }
.score-table th:first-child, .score-table td:first-child { position: sticky; left: 0; z-index: 4; min-width: 46px; width: 46px; padding: 0; background: color-mix(in srgb, var(--surface-variant) 58%, var(--background)); border-right: 1px solid var(--outline-variant); font-size: calc(12px + var(--font-adjust)); font-weight: 600; }
.score-table thead th:first-child { z-index: 7; background: var(--surface-variant); }
.score-table .positive { color: var(--positive); font-weight: 600; }
.score-table .negative { color: var(--negative); font-weight: 600; }
.score-table .zero { color: var(--zero); }
.score-table .older td, .score-table .add-row td, .score-table .locked-row td { position: static; }
.score-table .older td { height: 34px; font-size: calc(11px + var(--font-adjust)); color: var(--primary); cursor: pointer; background: var(--background); }
.score-table .add-row td { color: var(--primary); background: color-mix(in srgb, var(--primary-container) 54%, transparent); font-size: calc(15px + var(--font-adjust)); font-weight: 600; cursor: pointer; }
.score-table .locked-row td { color: var(--on-variant); background: color-mix(in srgb, var(--surface-variant) 54%, transparent); font-size: calc(15px + var(--font-adjust)); font-weight: 600; }
.score-table tfoot td { background: var(--surface-variant); font-weight: 700; }
.score-table tfoot td:first-child { background: var(--surface-variant); }

.status-bar { margin: 14px 14px 0; border-radius: 18px; padding: 12px 16px; background: color-mix(in srgb, var(--mode-color) 10%, transparent); display: flex; align-items: center; gap: 12px; color: var(--mode-color); }
.status-bar strong { flex: 1; font-size: calc(21px + var(--font-adjust)); }
.status-rule { padding: 8px 14px; border-radius: 30px; background: var(--surface); font-size: calc(14px + var(--font-adjust)); font-weight: 700; }
.team-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px 14px 14px; height: calc(100dvh - 56px - var(--safe-top) - 74px); }
.team-panel {
  width: 100%; border: 0; border-radius: 26px; padding: 28px; box-shadow: var(--shadow); background: #e5e9f6;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 0; touch-action: manipulation; outline: none; transition: none; appearance: none; -webkit-appearance: none;
}
.team-panel:focus, .team-panel:focus-visible, .team-panel:active { outline: none; box-shadow: var(--shadow); filter: none; transform: none; }
.team-panel.winner { background: var(--positive-container); color: var(--positive); }
.team-panel.loser { background: var(--negative-container); color: var(--negative); }
.team-panel.locked { cursor: default; }
.team-head { width: 100%; display: flex; align-items: center; justify-content: space-between; color: var(--on-surface); }
.team-head strong { min-width: 0; flex: 1 1 auto; font-size: calc(24px + var(--font-adjust)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.team-head span { flex: 0 0 auto; margin-left: auto; padding-left: 12px; white-space: nowrap; text-align: right; color: color-mix(in srgb, var(--on-surface) 58%, transparent); font-size: calc(14px + var(--font-adjust)); font-weight: 700; }
.team-level { display: flex; justify-content: center; align-items: center; gap: 16px; font-weight: 800; }
.team-level .stage { font-size: clamp(calc(30px + var(--font-adjust)), 7vw, calc(44px + var(--font-adjust))); }
.team-level .level { font-size: clamp(calc(64px + var(--font-adjust)), 18vw, calc(96px + var(--font-adjust))); line-height: 1; }
.win-badge { align-self: center; border-radius: 30px; padding: 8px 18px; color: var(--positive); background: color-mix(in srgb, var(--positive) 14%, transparent); font-size: calc(21px + var(--font-adjust)); font-weight: 800; }
.zhuandan-cards-view {
  min-height: calc(100dvh - 56px - var(--safe-top));
  display: flex; flex-direction: column;
}
.zhuandan-card-grid {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px; padding: 12px 14px calc(16px + var(--safe-bottom));
}
.zhuandan-player-card {
  min-height: 162px; padding: 18px; cursor: default;
}
.zhuandan-player-card .team-head strong { font-size: calc(19px + var(--font-adjust)); }
.zhuandan-player-card .team-head .zhuandan-rank {
  padding-left: 0; margin-left: 3px; color: var(--mode-color);
  font-size: calc(14px + var(--font-adjust)); font-weight: 800;
  box-sizing: border-box; min-width: calc(26px + var(--font-adjust));
  height: calc(26px + var(--font-adjust)); line-height: calc(22px + var(--font-adjust));
  padding-inline: 5px; border-radius: 999px; text-align: center;
  border: 2px solid currentColor;
}
.zhuandan-player-card .team-head .zhuandan-rank.positive { color: var(--positive); }
.zhuandan-player-card .team-head .zhuandan-rank.negative { color: var(--negative); }
.zhuandan-player-card .team-head .zhuandan-rank.zero { color: var(--zero); }
.zhuandan-score {
  align-self: center; margin: 16px 0 10px; font-size: clamp(calc(38px + var(--font-adjust)), 10vw, calc(62px + var(--font-adjust)));
  line-height: 1; font-weight: 900;
}
.zhuandan-score.positive { color: var(--positive); }
.zhuandan-score.negative { color: var(--negative); }
.zhuandan-score.zero { color: var(--zero); }
.zhuandan-card-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--on-variant); font-size: calc(13px + var(--font-adjust)); font-weight: 700;
}
.result-menu { position: fixed; z-index: 70; width: 244px; padding: 12px; border: 1px solid var(--outline-variant); border-radius: 20px; background: var(--surface); box-shadow: none; }
.result-menu h3 { margin: 0 0 8px; font-size: calc(17px + var(--font-adjust)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-option { width: 100%; border: 0; border-radius: 16px; margin-top: 8px; padding: 11px 12px; cursor: pointer; text-align: left; font-size: calc(17px + var(--font-adjust)); font-weight: 800; }
.result-option.positive { color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, transparent); }
.result-option.guandan { color: var(--guandan); background: color-mix(in srgb, var(--guandan) 10%, transparent); }
.result-option.guard { color: #b7791f; background: color-mix(in srgb, #b7791f 10%, transparent); }

.info-list { border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--surface-variant) 46%, transparent); }
.info-row { display: flex; align-items: center; padding: 13px 16px; gap: 12px; border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 72%, transparent); }
.info-row:last-child { border: 0; }
.info-row label { width: 76px; flex: 0 0 auto; color: var(--on-variant); font-size: calc(14px + var(--font-adjust)); font-weight: 600; }
.info-row strong { flex: 1; text-align: right; font-size: calc(16px + var(--font-adjust)); overflow: hidden; text-overflow: ellipsis; }
.settlement { border-radius: 14px; overflow: auto; max-height: 58dvh; background: color-mix(in srgb, var(--surface-variant) 46%, transparent); }
.transfer { min-height: 42px; display: grid; grid-template-columns: minmax(0,1fr) 96px minmax(0,1fr); align-items: center; }
.transfer .from, .transfer .to { padding: 0 9px; font-size: calc(15px + var(--font-adjust)); font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.transfer .from { color: var(--negative); border-left: 6px solid var(--negative); }
.transfer .to { color: var(--positive); border-right: 6px solid var(--positive); text-align: right; }
.transfer .amount { text-align: center; color: var(--primary); font-size: calc(17px + var(--font-adjust)); font-weight: 800; }
.no-settlement { padding: 28px 20px; text-align: center; }
.no-settlement .flat { width: 48px; height: 48px; margin: auto; display: grid; place-items: center; border-radius: 16px; color: var(--primary); background: var(--primary-container); font-size: calc(21px + var(--font-adjust)); font-weight: 800; }
.no-settlement h3 { margin: 12px 0 4px; font-size: calc(17px + var(--font-adjust)); }
.no-settlement p { margin: 0; color: var(--on-variant); font-size: calc(14px + var(--font-adjust)); }
.sf-wrap { position: relative; display: grid; grid-template-columns: max-content max-content; justify-content: space-between; row-gap: 11px; margin: 8px 0 0; }
.sf-spacer { visibility: hidden; }
.sf-node { padding: 10px 8px; border-radius: 10px; }
.sf-payer { justify-self: start; }
.sf-creditor { justify-self: end; }
.sf-name { font-size: calc(15px + var(--font-adjust)); font-weight: 700; white-space: nowrap; display: block; color: #fff; }
.sf-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sf-line { fill: none; stroke: var(--mode-color, var(--primary)); stroke-width: 3; }
.sf-lbl-bg { fill: var(--surface, #fffbff); }
.sf-lbl { font-size: calc(12px + var(--font-adjust)); font-weight: 800; fill: var(--mode-color, var(--primary)); dominant-baseline: middle; text-anchor: middle; }

.round-editor-grid { display: flex; flex-direction: column; }
.round-editor .score-controls { display: grid; gap: 12px; }
.round-editor-actions { margin-top: 24px; }
.control-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.control-row > label { color: var(--on-variant); font-size: calc(14px + var(--font-adjust)); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button, .step-value { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-variant); font-size: calc(18px + var(--font-adjust)); line-height: 1; }
.step-value { width: 68px; background: var(--primary-container); color: var(--primary); font-size: calc(14px + var(--font-adjust)); font-weight: 600; }

/* 录入新局：倍数(左,2) + 分值(右,3) 同行，无 label */
.score-row { display: flex; align-items: stretch; gap: 12px; }
.mult-stepper { flex: 2; display: flex; align-items: stretch; height: 48px; border: 1.5px solid var(--outline-variant); border-radius: 12px; overflow: hidden; }
.mult-stepper button { flex: 0 0 38px; border: 0; background: var(--surface-variant); color: var(--mode-color, var(--primary)); font-size: calc(20px + var(--font-adjust)); font-weight: 700; cursor: pointer; }
.mult-stepper button:disabled { opacity: .4; }
.mult-input { flex: 1; min-width: 0; width: 100%; border: 0; border-left: 1.5px solid var(--outline-variant); border-right: 1.5px solid var(--outline-variant); text-align: center; background: var(--surface); color: var(--on-surface); font-size: calc(17px + var(--font-adjust)); font-weight: 700; -moz-appearance: textfield; }
.mult-input::-webkit-outer-spin-button, .mult-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tier-seg { flex: 3; display: flex; align-items: stretch; height: 48px; border: 1.5px solid var(--outline-variant); border-radius: 12px; overflow: hidden; }
.tier-seg .seg-opt { flex: 1; min-width: 0; border: 0; border-right: 1px solid var(--outline-variant); background: var(--surface); color: var(--on-surface); font-size: calc(15px + var(--font-adjust)); font-weight: 600; cursor: pointer; }
.tier-seg .seg-opt:last-child { border-right: 0; }
.tier-seg .seg-opt.selected { background: var(--mode-color, var(--primary)); color: #fff; }
.select-section { margin-top: 20px; }
.select-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: calc(17px + var(--font-adjust)); font-weight: 600; }
.select-section.winner .select-title { color: var(--positive); }
.select-section.loser .select-title { color: var(--negative); }
.select-title .hint { margin-left: auto; font-weight: 800; }
.select-title .hint.positive { color: var(--positive); }
.select-title .hint.negative { color: var(--negative); }
.divider { height: 1px; background: var(--outline-variant); margin: 18px 0; }

/* 整页登录页 */
.login-page { display: flex; min-height: 100dvh; }
.login-content { width: 100%; max-width: 420px; margin: auto; padding: max(28px, var(--safe-top)) 20px calc(28px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 24px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.login-logo { width: 84px; height: 84px; border-radius: 22px; box-shadow: var(--shadow); }
.login-brand h1 { margin: 8px 0 0; font-size: calc(21px + var(--font-adjust)); color: var(--mode-color); }
.login-brand p { margin: 0; color: var(--on-variant); font-size: calc(14px + var(--font-adjust)); }
.login-card { background: var(--surface); border-radius: 22px; padding: 20px 18px; box-shadow: var(--shadow-dialog); display: flex; flex-direction: column; gap: 12px; }
.login-card .auth-note { margin: 2px 0 4px; color: var(--on-variant); font-size: calc(12px + var(--font-adjust)); line-height: 1.6; }
.auth-title { gap: 8px; align-items: baseline; }
.auth-title-suffix { align-self: baseline; font-size: .6em; line-height: 1; color: color-mix(in srgb, var(--on-surface) 68%, transparent); font-weight: 700; }

.records { width: 100%; max-width: 760px; padding: 16px; margin: auto; }
.records table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.records th { background: var(--surface-variant); text-align: left; padding: 10px 12px; font-size: calc(14px + var(--font-adjust)); }
.records td { padding: 12px; border-bottom: 1px solid var(--outline-variant); font-size: calc(14px + var(--font-adjust)); }
.records th:first-child, .records td:first-child { width: 14%; }
.records .positive { color: var(--positive); font-weight: 800; }
.records .negative { color: var(--negative); font-weight: 800; }

.about { min-height: 100dvh; background: #fffaff; color: #24212a; }
.about .topbar { background: #fffaff; color: #24212a; box-shadow: none; height: calc(40px + var(--safe-top)); min-height: calc(40px + var(--safe-top)); }
.about .topbar .icon-btn { width: 38px; height: 38px; }
.about-content { width: 100%; max-width: 680px; margin: auto; padding: 8px 20px 28px; text-align: center; }
.hero-symbols { display: flex; justify-content: center; gap: 20px; }
.hero-symbols span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #5d55d9; font-size: calc(21px + var(--font-adjust)); font-weight: 800; }
.hero-symbols span:nth-child(1) { background: #e7e1ff; }
.hero-symbols span:nth-child(2) { background: #e2f4e7; }
.hero-symbols span:nth-child(3) { background: #e0f3ff; }
.about h1 { margin: 24px 0 6px; font-size: calc(24px + var(--font-adjust)); }
.about-sub { color: #5d5967; font-size: calc(17px + var(--font-adjust)); font-weight: 600; }
.tags { display: flex; justify-content: center; gap: 10px; margin: 18px 0 34px; }
.tag { border-radius: 30px; padding: 7px 16px; background: #e6dfff; color: #5d55d9; font-size: calc(14px + var(--font-adjust)); font-weight: 600; }
.about-card { margin: 0 0 16px; padding: 22px; border-radius: 24px; background: #f7f3fd; box-shadow: 0 2px 6px rgba(31,25,51,.08); text-align: left; }
.about-card h2 { margin: 0 0 16px; font-size: calc(21px + var(--font-adjust)); }
.about-card p { margin: 0; font-size: calc(15px + var(--font-adjust)); line-height: 27px; font-weight: 500; overflow-wrap: anywhere; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { height: 88px; padding: 12px 14px; border-radius: 16px; background: #ede5ef; display: flex; flex-direction: column; justify-content: center; }
.tile span { color: #5d5967; font-size: calc(13px + var(--font-adjust)); }
.tile strong { margin-top: 6px; font-size: calc(17px + var(--font-adjust)); }
.version { margin: 24px 0 0; color: #5d5967; font-size: calc(14px + var(--font-adjust)); font-weight: 600; user-select: none; -webkit-user-select: none; }

.settings-page { min-height: 100dvh; background: var(--background); }
.settings-content { width: 100%; max-width: 680px; margin: auto; padding: 18px 16px 32px; }
.settings-card {
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--outline-variant) 72%, transparent);
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow);
}
.setting-heading { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.setting-heading strong { font-size: calc(16px + var(--font-adjust)); line-height: 22px; }
.setting-heading small, .cache-note {
  color: var(--on-variant); font-size: calc(13px + var(--font-adjust)); line-height: 19px;
}
.settings-section { margin-bottom: 24px; }
.settings-section > h2 { margin: 0 4px 9px; color: var(--on-variant); font-size: calc(14px + var(--font-adjust)); font-weight: 700; }
.settings-card { padding: 17px; }
.account-card { display: flex; flex-direction: column; gap: 13px; }
.account-summary { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-width: 0; }
.account-avatar {
  width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 16px; color: var(--mode-color); background: color-mix(in srgb, var(--mode-color) 12%, transparent);
}
.account-avatar .ui-icon { width: 30px; height: 30px; }
.account-main { min-width: 0; min-height: 54px; display: flex; flex-direction: column; justify-content: space-between; }
.account-name-row { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.account-name-row strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(16px + var(--font-adjust)); line-height: 22px; }
.account-edit { width: 30px; height: 30px; color: var(--on-variant); }
.account-edit .ui-icon { width: 17px; height: 17px; }
.account-status {
  flex: 0 0 auto; padding: 4px 9px; border-radius: 999px;
  color: var(--mode-color); background: color-mix(in srgb, var(--mode-color) 10%, transparent);
  font-size: calc(12px + var(--font-adjust)); font-weight: 700;
}
.account-phone { color: var(--on-variant); font-size: calc(13px + var(--font-adjust)); line-height: 19px; }
.account-logout {
  width: 100%; color: var(--error); background: color-mix(in srgb, var(--error) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 36%, transparent);
}
.font-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.font-options.view-options { grid-template-columns: repeat(2, 1fr); }
.font-options button {
  min-height: 42px; border: 1px solid var(--outline-variant); border-radius: 13px;
  background: transparent; cursor: pointer; font-size: calc(14px + var(--font-adjust)); font-weight: 600;
}
.font-options button.selected {
  color: var(--mode-color); border-color: var(--mode-color);
  background: color-mix(in srgb, var(--mode-container) 78%, transparent);
}
.update-row { display: flex; align-items: center; gap: 16px; }
.switch-row { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.switch-title-row { width: 100%; display: flex; align-items: center; gap: 16px; }
.switch-title-row strong { flex: 1; font-size: calc(16px + var(--font-adjust)); line-height: 22px; }
.switch-row > small { color: var(--on-variant); font-size: calc(13px + var(--font-adjust)); line-height: 19px; }
.switch-input { flex: 0 0 auto; margin-left: auto; display: inline-flex; }
.switch-input input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch-control {
  position: relative; width: 52px; height: 30px; flex: 0 0 auto; border-radius: 20px;
  background: var(--outline-variant); transition: background .16s ease;
}
.switch-control::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform .16s ease;
}
.switch-input input:checked + .switch-control { background: var(--mode-color); }
.switch-input input:checked + .switch-control::after { transform: translateX(22px); }
.setting-divider { height: 1px; margin: 17px 0; background: var(--outline-variant); }
.update-row { align-items: flex-start; }
.update-button { flex: 0 0 auto; min-height: 42px; padding: 0 14px; border-radius: 13px; white-space: nowrap; font-size: calc(13px + var(--font-adjust)); }
.update-progress { margin-top: 15px; }
.update-progress-track { height: 8px; overflow: hidden; border-radius: 8px; background: var(--outline-variant); }
.update-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--mode-color); transition: width .18s ease; }
.update-progress small { display: block; margin-top: 7px; color: var(--on-variant); font-size: calc(12px + var(--font-adjust)); text-align: right; }
.cache-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--mode-container) 50%, transparent); }

@media (max-width: 460px) {
  .update-row { flex-direction: column; }
  .update-button { width: 100%; }
}

.order-list { margin: 0; padding: 0; list-style: none; }
.order-row { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--outline-variant); }
.order-row span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.warning-box { border-radius: 18px; padding: 14px 16px; background: color-mix(in srgb, var(--surface-variant) 46%, transparent); }
.warning-box strong { display: block; margin-top: 6px; font-size: calc(17px + var(--font-adjust)); }
.import-summary > div { display: flex; align-items: baseline; gap: 2px; font-weight: 400; }
.import-summary > div + div { margin-top: 6px; }
.import-summary strong { display: inline; margin: 0; font-size: inherit; font-weight: 700; }
.import-progress-panel { padding: 4px 0; }
.import-progress-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.import-progress-label small { color: var(--on-variant); font-size: calc(12px + var(--font-adjust)); }
.import-progress-label strong { color: var(--mode-color); font-size: calc(13px + var(--font-adjust)); }
.data-result-page { text-align: center; }
.data-result-heading { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.data-result-page .modal-title { justify-content: flex-start; margin: 0; }
.data-result-page > p { margin: 0 0 16px; color: var(--on-variant); line-height: 1.55; }
.data-result-icon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 24px; font-weight: 800;
}
.data-result-icon.success { background: var(--negative); }
.data-result-icon.error { background: var(--error); }
.data-result-details { margin-bottom: 18px; text-align: left; }
.data-result-details > div { display: flex; align-items: baseline; gap: 2px; }
.data-result-details > div + div { margin-top: 7px; }
.data-result-details strong { display: inline; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: inherit; }
#toast-root { position: fixed; z-index: 200; left: 50%; bottom: calc(26px + var(--safe-bottom)); transform: translateX(-50%); pointer-events: none; }
.toast { min-width: 180px; max-width: min(90vw, 480px); padding: 12px 16px; border-radius: 12px; color: #fff; background: #322f39; box-shadow: var(--shadow-dialog); text-align: center; animation: toast .2s ease-out; }

@media (orientation: landscape) and (min-width: 700px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .round-editor.sheet { width: min(1040px, 98vw); max-width: none; border-radius: 22px; margin: auto; max-height: 96dvh; }
  .round-editor.sheet::before { display: none; }
  .round-editor-grid { display: grid; grid-template-columns: 42% 58%; grid-template-areas: "left right" "actions right"; gap: 0; }
  .round-editor-left { grid-area: left; padding-right: 22px; border-right: 1px solid var(--outline-variant); }
  .round-editor-right { grid-area: right; padding-left: 22px; }
  .round-editor-actions { grid-area: actions; margin-top: 20px; padding-right: 22px; }
}

.is-layout-landscape .team-grid { grid-template-columns: 1fr 1fr; height: calc(100dvh - 56px - var(--safe-top) - 74px); }
.is-layout-landscape .round-editor.sheet { width: min(1040px, 98vw); max-width: none; border-radius: 22px; margin: auto; max-height: 96dvh; }
.is-layout-landscape .round-editor.sheet::before { display: none; }
.is-layout-landscape .round-editor-grid { display: grid; grid-template-columns: 42% 58%; grid-template-areas: "left right" "actions right"; gap: 0; }
.is-layout-landscape .round-editor-left { grid-area: left; padding-right: 22px; border-right: 1px solid var(--outline-variant); }
.is-layout-landscape .round-editor-right { grid-area: right; padding-left: 22px; }
.is-layout-landscape .round-editor-actions { grid-area: actions; margin-top: 20px; padding-right: 22px; }
.is-layout-portrait .team-grid { grid-template-columns: 1fr; }

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #c9c1ff; --primary-container: #4231be; --on-primary-container: #eae5ff;
    --guandan: #7bd5cb; --guandan-container: #00504a; --background: #14121b; --surface: #1c1924;
    --surface-variant: #4b4658; --on-surface: #e8e0ee; --on-variant: #cbc4d8; --outline: #958ea3;
    --outline-variant: #4b4658; --positive-container: #5f2525; --negative-container: #064d36;
  }
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast { from { opacity: 0; transform: translateY(8px); } }

.btn.full { width: 100%; }

/* 登录/注册：标题栏右侧文字切换 */
.auth-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.auth-switch { border: 0; background: transparent; color: var(--mode-color, var(--primary)); font-size: calc(15px + var(--font-adjust)); font-weight: 600; cursor: pointer; padding: 4px 8px; }
.auth-note { color: var(--on-variant); font-size: calc(13px + var(--font-adjust)); line-height: 1.5; margin: 4px 0 14px; }

/* 赛局分享：二维码弹窗 + 只读分享查看页 */
.share-qr-box { display: flex; justify-content: center; padding: 10px 0 14px; }
.share-qr { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 12px; box-shadow: var(--shadow); }
.share-qr img, .share-qr canvas { display: block; width: 100% !important; height: 100% !important; }
/* 分享页状态栏：第N局 + 进行中（小3号）+ 右侧手动刷新按钮 */
/* 详情/分享共用状态栏：第N局 + 进行中/已清算（半字号）+ 右侧操作图标 */
.status-bar.detail-status { padding: 7px 11px 7px 16px; }
.status-bar.detail-status strong { display: inline-flex; align-items: baseline; gap: 8px; }
.detail-status .status-sub { font-size: .5em; font-weight: 700; opacity: .8; }
.detail-status .detail-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-width: max-content; padding: 5px 12px 5px 9px; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--mode-color) 13%, transparent); color: var(--mode-color); font-size: calc(15px + var(--font-adjust)); font-weight: 700; cursor: pointer; }
.detail-status .detail-action .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-block; }
.detail-status .detail-action.detail-action-plain { background: transparent; padding: 2px 0; border-radius: 0; gap: 4px; }
.detail-action.spinning .ui-icon { animation: share-spin .8s linear infinite; transform-origin: 50% 50%; }
@keyframes share-spin { to { transform: rotate(360deg); } }
/* 已清算/已结束：状态栏文字与图标淡黑色 */
.detail-status.is-settled,
.detail-status.is-settled .detail-action { color: color-mix(in srgb, var(--on-surface) 66%, transparent); }
.detail-status.is-settled .detail-action { background: color-mix(in srgb, var(--on-surface) 11%, transparent); }
.detail-status .share-refresh,
.detail-status.is-settled .share-refresh { background: transparent; padding: 2px 0; border-radius: 0; }